diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx index b666ca9890..c1f14ffc0f 100644 --- a/frontend/src/component/feature/FeatureView/FeatureView.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx @@ -1,18 +1,24 @@ -import { useState } from 'react'; +import { type PropsWithChildren, useState, type FC } from 'react'; import { IconButton, styled, Tab, Tabs, Tooltip, + Typography, useMediaQuery, } from '@mui/material'; import Archive from '@mui/icons-material/Archive'; +import ArchiveOutlined from '@mui/icons-material/ArchiveOutlined'; import FileCopy from '@mui/icons-material/FileCopy'; +import FileCopyOutlined from '@mui/icons-material/FileCopyOutlined'; import Label from '@mui/icons-material/Label'; import WatchLater from '@mui/icons-material/WatchLater'; +import WatchLaterOutlined from '@mui/icons-material/WatchLaterOutlined'; import LibraryAdd from '@mui/icons-material/LibraryAdd'; +import LibraryAddOutlined from '@mui/icons-material/LibraryAddOutlined'; import Check from '@mui/icons-material/Check'; +import Star from '@mui/icons-material/Star'; import { Link, Route, @@ -49,6 +55,46 @@ import useToast from 'hooks/useToast'; import { useUiFlag } from 'hooks/useUiFlag'; import type { IFeatureToggle } from 'interfaces/featureToggle'; import { Collaborators } from './Collaborators'; +import StarBorder from '@mui/icons-material/StarBorder'; +import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; + +const NewStyledHeader = styled('div')(({ theme }) => ({ + backgroundColor: 'none', + marginBottom: theme.spacing(2), + borderBottom: `1px solid ${theme.palette.divider}`, +})); + +const LowerHeaderRow = styled('div')(({ theme }) => ({ + display: 'flex', + flexFlow: 'row nowrap', + justifyContent: 'space-between', + gap: theme.spacing(4), +})); + +const HeaderActions = styled('div')(({ theme }) => ({ + display: 'flex', + flexFlow: 'row nowrap', + alignItems: 'center', +})); + +const IconButtonWithTooltip: FC< + PropsWithChildren<{ + onClick: () => void; + label: string; + }> +> = ({ children, label, onClick }) => { + return ( + e.preventDefault()} + > + + {children} + + + ); +}; const StyledHeader = styled('div')(({ theme }) => ({ backgroundColor: theme.palette.background.paper, @@ -139,6 +185,7 @@ const useLegacyVariants = (environments: IFeatureToggle['environments']) => { export const FeatureView = () => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); + const flagOverviewRedesign = useUiFlag('flagOverviewRedesign'); const { favorite, unfavorite } = useFavoriteFeaturesApi(); const { refetchFeature } = useFeature(projectId, featureId); const { setToastData, setToastApiError } = useToast(); @@ -231,144 +278,228 @@ export const FeatureView = () => { return (
- - - - -
- - - {feature.name}{' '} - - - + {feature.name} + + + {tabData.map((tab) => ( + navigate(tab.path)} + data-testid={`TAB-${tab.title}`} + /> + ))} + + + + {feature?.favorite ? : } + + + + {isFeatureNameCopied ? ( + + ) : ( + + )} + + + + + + setShowDelDialog(true)} + > + + + setOpenStaleDialog(true)} + permission={UPDATE_FEATURE} + projectId={projectId} + tooltipProps={{ + title: 'Toggle stale state', + }} + data-loading + > + + + + + + ) : ( + + + + +
+ + + {feature.name}{' '} + + - {isFeatureNameCopied ? ( - - ) : ( - + {isFeatureNameCopied ? ( + + ) : ( + + )} + + + - )} - - + } + /> + 0} show={ - + + Has parent: + + { + feature?.dependencies[0] + ?.feature + } + + } /> - - 0} - show={ - - Has parent: - - {feature?.dependencies[0]?.feature} - - - } - /> - 0} - show={ - - Has children: - - - } - /> -
- + 0} + show={ + + Has children: + + + } + /> +
+ - - + + + + setShowDelDialog(true)} + > + + + setOpenStaleDialog(true)} + permission={UPDATE_FEATURE} + projectId={projectId} + tooltipProps={{ + title: 'Toggle stale state', + }} + data-loading + > + + + setOpenTagDialog(true)} + permission={UPDATE_FEATURE} + projectId={projectId} + tooltipProps={{ title: 'Add tag' }} + data-loading + > + + + + + + - - - setShowDelDialog(true)} - > - - - setOpenStaleDialog(true)} - permission={UPDATE_FEATURE} - projectId={projectId} - tooltipProps={{ - title: 'Toggle stale state', - }} - data-loading - > - - - setOpenTagDialog(true)} - permission={UPDATE_FEATURE} - projectId={projectId} - tooltipProps={{ title: 'Add tag' }} - data-loading - > - - - - - - - {tabData.map((tab) => ( - navigate(tab.path)} - data-testid={`TAB-${tab.title}`} - /> - ))} - - - - + {tabData.map((tab) => ( + navigate(tab.path)} + data-testid={`TAB-${tab.title}`} + /> + ))} + + + + + )} } /> } /> diff --git a/src/server-dev.ts b/src/server-dev.ts index 3643164c97..378e154a9d 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -52,7 +52,7 @@ process.nextTick(async () => { releasePlans: false, releasePlanChangeRequests: false, showUserDeviceCount: true, - flagOverviewRedesign: false, + flagOverviewRedesign: true, granularAdminPermissions: true, deltaApi: true, uniqueSdkTracking: true,