Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

chore: prepare for lifecycle comments (#8733)

Browse Source 
This PR is a preparation for adding lifecycle comments. It turns the
Lifecycle boxes into buttons, using MUI's
[`CardActionArea`](https://mui.com/material-ui/api/card-action-area/)
component, and allows you to select one at a time.

I'm not convinced about the a11y of this approach, but it appears to be
in line with what MUI suggests, so ...

I'll add the speech bubbles in a follow-up.

<img width="1059" alt="image"
src="https://github.com/user-attachments/assets/ad3f649f-10de-4418-a780-10321e90d001">
This commit is contained in:
Thomas Heartman 2024-11-13 13:02:33 +01:00 committed by GitHub
parent 61e297dd22
commit bc7511abd4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 73 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/component/project/Project/ProjectStatus/LifecycleMessages.ts Normal file
View File

@ -0,0 +1,16 @@
import type { ProjectStatusSchemaLifecycleSummary } from 'openapi';
export const lifecycleMessages: Record<
keyof ProjectStatusSchemaLifecycleSummary,
string
> = {
initial:
'Feature flags in the initial phase indicate you have created flags that is not detected in any environments which mean either integration issues or unused flags',
preLive:
'In the pre-live phase the feature is being developed and tested in controlled environments. Once the feature is ready the flag can be enabled in production.',
live: 'The feature is being rolled out in production according to the decided strategy targeting user segments and/or using percentage rollout. ',
completed:
'Flags that are in cleanup are potentially stale flags. View the flags to evaluate whether you should archive them in Unleash and clean up your codebase to reduce technical debt',
archived:
'Flags that have been archived and are no longer in use, but kept for future reference.',
};

67
frontend/src/component/project/Project/ProjectStatus/ProjectLifecycleSummary.tsx
View File

@ -1,9 +1,9 @@
import { styled } from '@mui/material';
import { CardActionArea, styled } from '@mui/material';
import { FeatureLifecycleStageIcon } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleStageIcon';
import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
import useLoading from 'hooks/useLoading';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import type { FC } from 'react';
import { useState, type FC } from 'react';
import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
import type { ProjectStatusSchemaLifecycleSummary } from 'openapi';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@ -24,16 +24,45 @@ const HeaderRow = styled('div')(({ theme }) => ({
},
}));
const LifecycleBox = styled('li')(({ theme }) => ({
const LifecycleBoxContent = styled('div')(({ theme }) => ({
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadiusExtraLarge,
border: `2px solid ${theme.palette.divider}`,
gap: theme.spacing(4),
display: 'flex',
flexFlow: 'column',
justifyContent: 'space-between',
transition: 'border-color 200ms',
borderRadius: theme.shape.borderRadiusExtraLarge,
border: `2px solid ${theme.palette.divider}`,
}));
const StyledCardActionArea = styled(CardActionArea)(({ theme }) => ({
borderRadius: theme.shape.borderRadiusExtraLarge,
'&[aria-pressed="true"] > *': {
borderColor: theme.palette.primary.main,
},
}));
const LifecycleBox = ({
children,
isActive,
onClick,
}: {
children: React.ReactNode;
isActive?: boolean;
onClick?: () => void;
}) => {
return (
<li>
<StyledCardActionArea
onClick={onClick}
aria-pressed={isActive ? 'true' : 'false'}
>
<LifecycleBoxContent>{children}</LifecycleBoxContent>
</StyledCardActionArea>
</li>
);
};
const LifecycleList = styled('ul')(({ theme }) => ({
display: 'grid',
listStyle: 'none',
@ -144,6 +173,9 @@ export const ProjectLifecycleSummary = () => {
const { data, loading } = useProjectStatus(projectId);
const { isEnterprise } = useUiConfig();
const [activeLifecycleStage, setActiveLifecycleStage] = useState<
keyof ProjectStatusSchemaLifecycleSummary | null
>(null);
const loadingRef = useLoading<HTMLUListElement>(
loading,
'[data-loading-project-lifecycle-summary=true]',
@ -162,7 +194,10 @@ export const ProjectLifecycleSummary = () => {
<LifecycleTooltip />
</HeaderRow>
<LifecycleList ref={loadingRef}>
<LifecycleBox>
<LifecycleBox
onClick={() => setActiveLifecycleStage('initial')}
isActive={activeLifecycleStage === 'initial'}
>
<p>
<Counter>
<BigNumber
@ -182,7 +217,10 @@ export const ProjectLifecycleSummary = () => {
averageDays={data?.lifecycleSummary.initial.averageDays}
/>
</LifecycleBox>
<LifecycleBox>
<LifecycleBox
onClick={() => setActiveLifecycleStage('preLive')}
isActive={activeLifecycleStage === 'preLive'}
>
<p>
<Counter>
<BigNumber
@ -202,7 +240,10 @@ export const ProjectLifecycleSummary = () => {
averageDays={data?.lifecycleSummary.preLive.averageDays}
/>
</LifecycleBox>
<LifecycleBox>
<LifecycleBox
onClick={() => setActiveLifecycleStage('live')}
isActive={activeLifecycleStage === 'live'}
>
<p>
<Counter>
<BigNumber
@ -220,7 +261,10 @@ export const ProjectLifecycleSummary = () => {
averageDays={data?.lifecycleSummary.live.averageDays}
/>
</LifecycleBox>
<LifecycleBox>
<LifecycleBox
onClick={() => setActiveLifecycleStage('completed')}
isActive={activeLifecycleStage === 'completed'}
>
<p>
<Counter>
<BigNumber
@ -243,7 +287,10 @@ export const ProjectLifecycleSummary = () => {
}
/>
</LifecycleBox>
<LifecycleBox>
<LifecycleBox
onClick={() => setActiveLifecycleStage('archived')}
isActive={activeLifecycleStage === 'archived'}
>
<p>
<Counter>
<BigNumber