Skip to content

Commit

Permalink
chore: new feature flag overview metadata panel (#8663)
Browse files Browse the repository at this point in the history 
https://linear.app/unleash/issue/2-2920/update-the-flag-overview-metadata-properties-to-match-the-new-design

Updates the feature flag overview metadata panel to match the new
design.

This redesign is behind a feature flag, so we opted to go with a
duplicate file approach. We should remember to clean this up if we
decide to remove the flag.


![image](https://github.com/user-attachments/assets/0eb8464c-8279-46a8-9f64-9d914f56db36)
  • Loading branch information
@nunogois
nunogois authored Nov 6, 2024
1 parent d6e722b commit 314a4d7
Show file tree
Hide file tree
Showing 11 changed files with 1,114 additions and 258 deletions.
15 changes: 13 additions & 2 deletions frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import FeatureOverviewMetaData from './FeatureOverviewMetaData/FeatureOverviewMetaData';
import NewFeatureOverviewMetaData from './FeatureOverviewMetaData/FeatureOverviewMetaData';
import FeatureOverviewEnvironments from './FeatureOverviewEnvironments/FeatureOverviewEnvironments';
import { Route, Routes, useNavigate } from 'react-router-dom';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
Expand All @@ -8,12 +8,15 @@ import {
} from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { usePageTitle } from 'hooks/usePageTitle';
import { FeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel';
import { FeatureOverviewSidePanel as NewFeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel';
import { useHiddenEnvironments } from 'hooks/useHiddenEnvironments';
import { styled } from '@mui/material';
import { FeatureStrategyCreate } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
import { useEffect } from 'react';
import { useLastViewedFlags } from 'hooks/useLastViewedFlags';
import { useUiFlag } from 'hooks/useUiFlag';
import OldFeatureOverviewMetaData from './FeatureOverviewMetaData/OldFeatureOverviewMetaData';
import { OldFeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/OldFeatureOverviewSidePanel';

const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
Expand Down Expand Up @@ -46,6 +49,14 @@ const FeatureOverview = () => {
setLastViewed({ featureId, projectId });
}, [featureId]);

const flagOverviewRedesign = useUiFlag('flagOverviewRedesign');
const FeatureOverviewMetaData = flagOverviewRedesign
? NewFeatureOverviewMetaData
: OldFeatureOverviewMetaData;
const FeatureOverviewSidePanel = flagOverviewRedesign
? NewFeatureOverviewSidePanel
: OldFeatureOverviewSidePanel;

return (
<StyledContainer>
<div>
Expand Down
22 changes: 16 additions & 6 deletions ...mponent/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyActions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type React from 'react';
import { type FC, useState } from 'react';
import { useState } from 'react';
import {
IconButton,
ListItemIcon,
Expand All @@ -16,16 +16,27 @@ import Delete from '@mui/icons-material/Delete';
import Edit from '@mui/icons-material/Edit';
import MoreVert from '@mui/icons-material/MoreVert';

const StyledIconButton = styled(IconButton)(({ theme }) => ({
height: theme.spacing(3.5),
width: theme.spacing(3.5),
}));

const StyledPopover = styled(Popover)(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(1, 1.5),
}));

export const DependencyActions: FC<{
interface IDependencyActionsProps {
feature: string;
onEdit: () => void;
onDelete: () => void;
}> = ({ feature, onEdit, onDelete }) => {
}

export const DependencyActions = ({
feature,
onEdit,
onDelete,
}: IDependencyActionsProps) => {
const id = `dependency-${feature}-actions`;
const menuId = `${id}-menu`;

Expand All @@ -42,8 +53,7 @@ export const DependencyActions: FC<{
return (
<Box>
<Tooltip title='Dependency actions' arrow describeChild>
<IconButton
sx={{ mr: 0.25 }}
<StyledIconButton
id={id}
aria-controls={open ? menuId : undefined}
aria-haspopup='true'
Expand All @@ -52,7 +62,7 @@ export const DependencyActions: FC<{
type='button'
>
<MoreVert />
</IconButton>
</StyledIconButton>
</Tooltip>
<StyledPopover
id={menuId}
Expand Down
154 changes: 82 additions & 72 deletions ...c/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { AddDependencyDialogue } from 'component/feature/Dependencies/AddDependencyDialogue';
import type { IFeatureToggle } from 'interfaces/featureToggle';
import { type FC, useState } from 'react';
import {
FlexRow,
StyledDetail,
StyledLabel,
StyledLink,
} from '../FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/StyledRow';
import { useState } from 'react';
import { StyledLink } from '../FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/StyledRow';
import { DependencyActions } from './DependencyActions';
import { useDependentFeaturesApi } from 'hooks/api/actions/useDependentFeaturesApi/useDependentFeaturesApi';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
Expand All @@ -23,6 +18,20 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { formatUnknownError } from 'utils/formatUnknownError';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { VariantsTooltip } from './VariantsTooltip';
import { styled } from '@mui/material';
import {
StyledMetaDataItem,
StyledMetaDataItemLabel,
StyledMetaDataItemValue,
} from './FeatureOverviewMetaData';

const StyledPermissionButton = styled(PermissionButton)(({ theme }) => ({
'&&&': {
fontSize: theme.fontSizes.smallBody,
lineHeight: 1,
margin: 0,
},
}));

const useDeleteDependency = (project: string, featureId: string) => {
const { trackEvent } = usePlausibleTracker();
Expand Down Expand Up @@ -83,7 +92,11 @@ const useDeleteDependency = (project: string, featureId: string) => {
return deleteDependency;
};

export const DependencyRow: FC<{ feature: IFeatureToggle }> = ({ feature }) => {
interface IDependencyRowProps {
feature: IFeatureToggle;
}

export const DependencyRow = ({ feature }: IDependencyRowProps) => {
const [showDependencyDialogue, setShowDependencyDialogue] = useState(false);
const canAddParentDependency =
Boolean(feature.project) &&
Expand All @@ -103,68 +116,67 @@ export const DependencyRow: FC<{ feature: IFeatureToggle }> = ({ feature }) => {
<ConditionallyRender
condition={canAddParentDependency}
show={
<FlexRow>
<StyledDetail>
<StyledLabel>Dependency:</StyledLabel>
<PermissionButton
size='small'
permission={UPDATE_FEATURE_DEPENDENCY}
projectId={feature.project}
variant='text'
onClick={() => {
setShowDependencyDialogue(true);
}}
sx={(theme) => ({
marginBottom: theme.spacing(0.4),
})}
>
Add parent feature
</PermissionButton>
</StyledDetail>
</FlexRow>
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency:
</StyledMetaDataItemLabel>
<StyledPermissionButton
size='small'
permission={UPDATE_FEATURE_DEPENDENCY}
projectId={feature.project}
variant='text'
onClick={() => {
setShowDependencyDialogue(true);
}}
>
Add parent feature
</StyledPermissionButton>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
condition={hasParentDependency}
show={
<FlexRow>
<StyledDetail>
<StyledLabel>Dependency:</StyledLabel>
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency:
</StyledMetaDataItemLabel>
<StyledMetaDataItemValue>
<StyledLink
to={`/projects/${feature.project}/features/${feature.dependencies[0]?.feature}`}
>
{feature.dependencies[0]?.feature}
</StyledLink>
</StyledDetail>
<ConditionallyRender
condition={checkAccess(
UPDATE_FEATURE_DEPENDENCY,
environment,
)}
show={
<DependencyActions
feature={feature.name}
onEdit={() =>
setShowDependencyDialogue(true)
}
onDelete={deleteDependency}
/>
}
/>
</FlexRow>
<ConditionallyRender
condition={checkAccess(
UPDATE_FEATURE_DEPENDENCY,
environment,
)}
show={
<DependencyActions
feature={feature.name}
onEdit={() =>
setShowDependencyDialogue(true)
}
onDelete={deleteDependency}
/>
}
/>
</StyledMetaDataItemValue>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
condition={
hasParentDependency && !feature.dependencies[0]?.enabled
}
show={
<FlexRow>
<StyledDetail>
<StyledLabel>Dependency value:</StyledLabel>
<span>disabled</span>
</StyledDetail>
</FlexRow>
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency value:
</StyledMetaDataItemLabel>
<span>disabled</span>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
Expand All @@ -173,30 +185,28 @@ export const DependencyRow: FC<{ feature: IFeatureToggle }> = ({ feature }) => {
Boolean(feature.dependencies[0]?.variants?.length)
}
show={
<FlexRow>
<StyledDetail>
<StyledLabel>Dependency value:</StyledLabel>
<VariantsTooltip
variants={
feature.dependencies[0]?.variants || []
}
/>
</StyledDetail>
</FlexRow>
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency value:
</StyledMetaDataItemLabel>
<VariantsTooltip
variants={feature.dependencies[0]?.variants || []}
/>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
condition={hasChildren}
show={
<FlexRow>
<StyledDetail>
<StyledLabel>Children:</StyledLabel>
<ChildrenTooltip
childFeatures={feature.children}
project={feature.project}
/>
</StyledDetail>
</FlexRow>
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Children:
</StyledMetaDataItemLabel>
<ChildrenTooltip
childFeatures={feature.children}
project={feature.project}
/>
</StyledMetaDataItem>
}
/>

Expand Down
Loading

0 comments on commit 314a4d7

Please sign in to comment.