Skip to content

Commit

Permalink
feat: new flag info box (#9308)
Browse files Browse the repository at this point in the history 
- updated spacing of elements
- modified header and "flag type" 
- added "collaborators"
- refactored tags

Co-authored-by: Thomas Heartman <[email protected]>
  • Loading branch information
@Tymek @thomasheartman
Tymek and thomasheartman authored Feb 18, 2025
1 parent b15502e commit 2ede2a6
Show file tree
Hide file tree
Showing 10 changed files with 339 additions and 354 deletions.
2 changes: 1 addition & 1 deletion frontend/src/component/feature/Dependencies/AddDependencyDialogue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const AddDependencyDialogue = ({
return (
<Dialogue
open={showDependencyDialogue}
title='Add parent feature dependency'
title='Add parent flag dependency'
onClose={onClose}
onClick={manageDependency}
primaryButtonText={
Expand Down
51 changes: 24 additions & 27 deletions frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { useLastViewedFlags } from 'hooks/useLastViewedFlags';
import { useUiFlag } from 'hooks/useUiFlag';
import OldFeatureOverviewMetaData from './FeatureOverviewMetaData/OldFeatureOverviewMetaData';
import { OldFeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/OldFeatureOverviewSidePanel';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { NewFeatureOverviewEnvironment } from './NewFeatureOverviewEnvironment/NewFeatureOverviewEnvironment';

const StyledContainer = styled('div')(({ theme }) => ({
Expand Down Expand Up @@ -51,39 +50,37 @@ const FeatureOverview = () => {
setLastViewed({ featureId, projectId });
}, [featureId]);
const [environmentId, setEnvironmentId] = useState('');

const flagOverviewRedesign = useUiFlag('flagOverviewRedesign');
const FeatureOverviewMetaData = flagOverviewRedesign
? NewFeatureOverviewMetaData
: OldFeatureOverviewMetaData;
const FeatureOverviewSidePanel = flagOverviewRedesign ? (
<NewFeatureOverviewSidePanel
environmentId={environmentId}
setEnvironmentId={setEnvironmentId}
/>
) : (
<OldFeatureOverviewSidePanel
hiddenEnvironments={hiddenEnvironments}
setHiddenEnvironments={setHiddenEnvironments}
/>
);

return (
<StyledContainer>
<div>
<FeatureOverviewMetaData />
{FeatureOverviewSidePanel}
</div>
<StyledMainContent>
<ConditionallyRender
condition={flagOverviewRedesign}
show={
<NewFeatureOverviewEnvironment
{flagOverviewRedesign ? (
<>
<NewFeatureOverviewMetaData />
<NewFeatureOverviewSidePanel
environmentId={environmentId}
setEnvironmentId={setEnvironmentId}
/>
}
elseShow={<FeatureOverviewEnvironments />}
/>
</>
) : (
<>
<OldFeatureOverviewMetaData />
<OldFeatureOverviewSidePanel
hiddenEnvironments={hiddenEnvironments}
setHiddenEnvironments={setHiddenEnvironments}
/>
</>
)}
</div>
<StyledMainContent>
{flagOverviewRedesign ? (
<NewFeatureOverviewEnvironment
environmentId={environmentId}
/>
) : (
<FeatureOverviewEnvironments />
)}
</StyledMainContent>
<Routes>
<Route
Expand Down
35 changes: 35 additions & 0 deletions ...rc/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/AddTagButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import type { FC } from 'react';
import AddIcon from '@mui/icons-material/Add';
import { styled } from '@mui/material';
import PermissionButton from 'component/common/PermissionButton/PermissionButton';
import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';

const StyledAddTagButton = styled(PermissionButton)(({ theme }) => ({
lineHeight: theme.typography.body1.lineHeight,
borderRadius: theme.shape.borderRadiusExtraLarge,
background: theme.palette.secondary.light,
padding: theme.spacing(0.5, 1),
height: theme.spacing(3.5),
}));

const StyledAddIcon = styled(AddIcon)(({ theme }) => ({
fontSize: theme.typography.body2.fontSize,
}));

type AddTagButtonProps = {
project: string;
onClick: () => void;
};

export const AddTagButton: FC<AddTagButtonProps> = ({ project, onClick }) => (
<StyledAddTagButton
size='small'
permission={UPDATE_FEATURE}
projectId={project}
variant='text'
onClick={onClick}
startIcon={<StyledAddIcon />}
>
Add tag
</StyledAddTagButton>
);
34 changes: 34 additions & 0 deletions ...c/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/Collaborators.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { styled } from '@mui/material';
import {
AvatarComponent,
AvatarGroup,
} from 'component/common/AvatarGroup/AvatarGroup';
import type { Collaborator } from 'interfaces/featureToggle';
import type { FC } from 'react';

const StyledAvatarComponent = styled(AvatarComponent)(({ theme }) => ({
width: theme.spacing(2.5),
height: theme.spacing(2.5),
}));

const StyledAvatarGroup = styled(AvatarGroup)({
flexWrap: 'nowrap',
});

type CollaboratorsProps = {
collaborators: Collaborator[] | undefined;
};

export const Collaborators: FC<CollaboratorsProps> = ({ collaborators }) => {
if (!collaborators || collaborators.length === 0) {
return null;
}

return (
<StyledAvatarGroup
users={collaborators}
avatarLimit={9}
AvatarComponent={StyledAvatarComponent}
/>
);
};
169 changes: 67 additions & 102 deletions ...c/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/DependencyRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { AddDependencyDialogue } from 'component/feature/Dependencies/AddDependencyDialogue';
import type { IFeatureToggle } from 'interfaces/featureToggle';
import { useState } from 'react';
Expand Down Expand Up @@ -26,11 +25,8 @@ import {
} from './FeatureOverviewMetaData';

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

const useDeleteDependency = (project: string, featureId: string) => {
Expand Down Expand Up @@ -112,13 +108,12 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {

return (
<>
<ConditionallyRender
condition={canAddParentDependency}
show={
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency:
</StyledMetaDataItemLabel>
{canAddParentDependency ? (
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency:
</StyledMetaDataItemLabel>
<div>
<StyledPermissionButton
size='small'
permission={UPDATE_FEATURE_DEPENDENCY}
Expand All @@ -128,99 +123,69 @@ export const DependencyRow = ({ feature }: IDependencyRowProps) => {
setShowDependencyDialogue(true);
}}
>
Add parent feature
Add parent flag
</StyledPermissionButton>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
condition={hasParentDependency}
show={
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency:
</StyledMetaDataItemLabel>
<StyledMetaDataItemValue>
<StyledLink
to={`/projects/${feature.project}/features/${feature.dependencies[0]?.feature}`}
>
{feature.dependencies[0]?.feature}
</StyledLink>
<ConditionallyRender
condition={checkAccess(
UPDATE_FEATURE_DEPENDENCY,
environment,
)}
show={
<DependencyActions
feature={feature.name}
onEdit={() =>
setShowDependencyDialogue(true)
}
onDelete={deleteDependency}
/>
}
</div>
</StyledMetaDataItem>
) : null}
{hasParentDependency ? (
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency:
</StyledMetaDataItemLabel>
<StyledMetaDataItemValue>
<StyledLink
to={`/projects/${feature.project}/features/${feature.dependencies[0]?.feature}`}
>
{feature.dependencies[0]?.feature}
</StyledLink>
{checkAccess(UPDATE_FEATURE_DEPENDENCY, environment) ? (
<DependencyActions
feature={feature.name}
onEdit={() => setShowDependencyDialogue(true)}
onDelete={deleteDependency}
/>
</StyledMetaDataItemValue>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
condition={
hasParentDependency && !feature.dependencies[0]?.enabled
}
show={
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency value:
</StyledMetaDataItemLabel>
<span>disabled</span>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
condition={
hasParentDependency &&
Boolean(feature.dependencies[0]?.variants?.length)
}
show={
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency value:
</StyledMetaDataItemLabel>
<VariantsTooltip
variants={feature.dependencies[0]?.variants || []}
/>
</StyledMetaDataItem>
}
/>
<ConditionallyRender
condition={hasChildren}
show={
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Children:
</StyledMetaDataItemLabel>
<ChildrenTooltip
childFeatures={feature.children}
project={feature.project}
/>
</StyledMetaDataItem>
}
/>

<ConditionallyRender
condition={Boolean(feature.project)}
show={
<AddDependencyDialogue
) : null}
</StyledMetaDataItemValue>
</StyledMetaDataItem>
) : null}
{hasParentDependency && !feature.dependencies[0]?.enabled ? (
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency value:
</StyledMetaDataItemLabel>
<span>disabled</span>
</StyledMetaDataItem>
) : null}
{hasParentDependency &&
Boolean(feature.dependencies[0]?.variants?.length) ? (
<StyledMetaDataItem>
<StyledMetaDataItemLabel>
Dependency value:
</StyledMetaDataItemLabel>
<VariantsTooltip
variants={feature.dependencies[0]?.variants || []}
/>
</StyledMetaDataItem>
) : null}
{hasChildren ? (
<StyledMetaDataItem>
<StyledMetaDataItemLabel>Children:</StyledMetaDataItemLabel>
<ChildrenTooltip
childFeatures={feature.children}
project={feature.project}
featureId={feature.name}
parentDependency={feature.dependencies[0]}
onClose={() => setShowDependencyDialogue(false)}
showDependencyDialogue={showDependencyDialogue}
/>
}
/>
</StyledMetaDataItem>
) : null}
{feature.project ? (
<AddDependencyDialogue
project={feature.project}
featureId={feature.name}
parentDependency={feature.dependencies[0]}
onClose={() => setShowDependencyDialogue(false)}
showDependencyDialogue={showDependencyDialogue}
/>
) : null}
</>
);
};
10 changes: 5 additions & 5 deletions ...ture/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,11 @@ test('show dependency dialogue', async () => {
},
);

const addParentButton = await screen.findByText('Add parent feature');
const addParentButton = await screen.findByText('Add parent flag');

addParentButton.click();

await screen.findByText('Add parent feature dependency');
await screen.findByText('Add parent flag dependency');
});

test('show dependency dialogue for OSS with dependencies', async () => {
Expand All @@ -127,11 +127,11 @@ test('show dependency dialogue for OSS with dependencies', async () => {
},
);

const addParentButton = await screen.findByText('Add parent feature');
const addParentButton = await screen.findByText('Add parent flag');

addParentButton.click();

await screen.findByText('Add parent feature dependency');
await screen.findByText('Add parent flag dependency');
});

test('show child', async () => {
Expand Down Expand Up @@ -291,7 +291,7 @@ test('edit dependency', async () => {
const editButton = await screen.findByText('Edit');
fireEvent.click(editButton);

await screen.findByText('Add parent feature dependency');
await screen.findByText('Add parent flag dependency');
});

test('show variant dependencies', async () => {
Expand Down
Loading

0 comments on commit 2ede2a6

Please sign in to comment.