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

feat: show a dialog when adding a release plan to a change request enabled feature environment (#9139)

Browse Source
This commit is contained in:
David Leek 2025-01-23 13:48:44 +01:00 committed by GitHub
parent e774ba1b2a
commit 7aefc573dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 108 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
View File

@ -7,6 +7,8 @@ import { useReleasePlansApi } from 'hooks/api/actions/useReleasePlansApi/useRele
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { useUiFlag } from 'hooks/useUiFlag';
const StyledIcon = styled('div')(({ theme }) => ({
width: theme.spacing(4),
@ -51,6 +53,7 @@ interface IFeatureReleasePlanCardProps {
featureId: string;
environmentId: string;
releasePlanTemplate: IReleasePlanTemplate;
setTemplateForChangeRequestDialog: (template: IReleasePlanTemplate) => void;
}
export const FeatureReleasePlanCard = ({
@ -58,15 +61,26 @@ export const FeatureReleasePlanCard = ({
featureId,
environmentId,
releasePlanTemplate,
setTemplateForChangeRequestDialog,
}: IFeatureReleasePlanCardProps) => {
const Icon = getFeatureStrategyIcon('releasePlanTemplate');
const { trackEvent } = usePlausibleTracker();
const { refetch } = useReleasePlans(projectId, featureId, environmentId);
const { addReleasePlanToFeature } = useReleasePlansApi();
const { setToastApiError, setToastData } = useToast();
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
const releasePlanChangeRequestsEnabled = useUiFlag(
'releasePlanChangeRequests',
);
const addReleasePlan = async () => {
try {
if (
releasePlanChangeRequestsEnabled &&
isChangeRequestConfigured(environmentId)
) {
setTemplateForChangeRequestDialog(releasePlanTemplate);
} else {
await addReleasePlanToFeature(
featureId,
releasePlanTemplate.id,
@ -78,6 +92,7 @@ export const FeatureReleasePlanCard = ({
text: 'Release plan added',
});
refetch();
}
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}

16
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
View File

@ -11,6 +11,8 @@ import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrate
import MoreVert from '@mui/icons-material/MoreVert';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { useUiFlag } from 'hooks/useUiFlag';
import { ReleasePlanAddChangeRequestDialog } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddChangeRequestDialog';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
interface IFeatureStrategyMenuProps {
label: string;
@ -50,6 +52,8 @@ export const FeatureStrategyMenu = ({
const [anchor, setAnchor] = useState<Element>();
const navigate = useNavigate();
const { trackEvent } = usePlausibleTracker();
const [templateForChangeRequestDialog, setTemplateForChangeRequestDialog] =
useState<IReleasePlanTemplate | undefined>();
const isPopoverOpen = Boolean(anchor);
const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined;
const flagOverviewRedesignEnabled = useUiFlag('flagOverviewRedesign');
@ -115,6 +119,9 @@ export const FeatureStrategyMenu = ({
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
setTemplateForChangeRequestDialog={
setTemplateForChangeRequestDialog
}
/>
</Popover>
</StyledStrategyMenu>
@ -175,8 +182,17 @@ export const FeatureStrategyMenu = ({
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
setTemplateForChangeRequestDialog={
setTemplateForChangeRequestDialog
}
/>
</Popover>
<ReleasePlanAddChangeRequestDialog
onClosing={() => setTemplateForChangeRequestDialog(undefined)}
featureId={featureId}
environmentId={environmentId}
releaseTemplate={templateForChangeRequestDialog}
/>
</StyledStrategyMenu>
);
};

6
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
View File

@ -4,11 +4,13 @@ import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrat
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
interface IFeatureStrategyMenuCardsProps {
projectId: string;
featureId: string;
environmentId: string;
setTemplateForChangeRequestDialog: (template: IReleasePlanTemplate) => void;
}
const StyledTypography = styled(Typography)(({ theme }) => ({
@ -20,6 +22,7 @@ export const FeatureStrategyMenuCards = ({
projectId,
featureId,
environmentId,
setTemplateForChangeRequestDialog,
}: IFeatureStrategyMenuCardsProps) => {
const { strategies } = useStrategies();
const { templates } = useReleasePlanTemplates();
@ -68,6 +71,9 @@ export const FeatureStrategyMenuCards = ({
featureId={featureId}
environmentId={environmentId}
releasePlanTemplate={template}
setTemplateForChangeRequestDialog={
setTemplateForChangeRequestDialog
}
/>
</ListItem>
))}

60
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddChangeRequestDialog.tsx Normal file
View File

@ -0,0 +1,60 @@
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import useToast from 'hooks/useToast';
import { styled, Button } from '@mui/material';
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
const StyledBoldSpan = styled('span')(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold,
}));
interface IReleasePlanAddChangeRequestDialogProps {
featureId: string;
environmentId: string;
releaseTemplate: IReleasePlanTemplate | undefined;
onClosing: () => void;
}
export const ReleasePlanAddChangeRequestDialog = ({
featureId,
environmentId,
releaseTemplate,
onClosing,
}: IReleasePlanAddChangeRequestDialogProps) => {
const { setToastData } = useToast();
const addReleasePlanToChangeRequest = async () => {
setToastData({
type: 'success',
text: 'Added to draft',
});
onClosing();
};
return (
<Dialogue
title='Request changes'
open={Boolean(releaseTemplate)}
secondaryButtonText='Cancel'
onClose={() => {
onClosing();
}}
customButton={
<Button
color='primary'
variant='contained'
onClick={addReleasePlanToChangeRequest}
autoFocus={true}
>
Add suggestion to draft
</Button>
}
>
<p>
<StyledBoldSpan>Add</StyledBoldSpan> release template{' '}
<StyledBoldSpan>{releaseTemplate?.name}</StyledBoldSpan> to{' '}
<StyledBoldSpan>{featureId}</StyledBoldSpan> in{' '}
<StyledBoldSpan>{environmentId}</StyledBoldSpan>
</p>
</Dialogue>
);
};