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

feat: strategy menu interaction between two dialogues. (#9732)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-04-09 15:14:45 +03:00 committed by GitHub
parent 48b9be709e
commit 8da5fe6811
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,7 @@ const StyledCard = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
width: '100%', width: '100%',
height: '100%',
maxWidth: '30rem', maxWidth: '30rem',
padding: theme.spacing(1.5, 2), padding: theme.spacing(1.5, 2),
color: 'inherit', color: 'inherit',

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

@ -70,15 +70,17 @@ export const FeatureStrategyMenu = ({
matchWidth, matchWidth,
disableReason, disableReason,
}: IFeatureStrategyMenuProps) => { }: IFeatureStrategyMenuProps) => {
const [anchor, setAnchor] = useState<Element>(); const [isStrategyMenuDialogOpen, setIsStrategyMenuDialogOpen] =
useState<boolean>(false);
const [onlyReleasePlans, setOnlyReleasePlans] = useState<boolean>(false); const [onlyReleasePlans, setOnlyReleasePlans] = useState<boolean>(false);
const navigate = useNavigate(); const navigate = useNavigate();
const { trackEvent } = usePlausibleTracker(); const { trackEvent } = usePlausibleTracker();
const [selectedTemplate, setSelectedTemplate] = const [selectedTemplate, setSelectedTemplate] =
useState<IReleasePlanTemplate>(); useState<IReleasePlanTemplate>();
const [addReleasePlanOpen, setAddReleasePlanOpen] = useState(false); const [addReleasePlanOpen, setAddReleasePlanOpen] = useState(false);
const isPopoverOpen = Boolean(anchor); const dialogId = isStrategyMenuDialogOpen
const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined; ? 'FeatureStrategyMenuDialog'
: undefined;
const { setToastApiError, setToastData } = useToast(); const { setToastApiError, setToastData } = useToast();
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
const { addChange } = useChangeRequestApi(); const { addChange } = useChangeRequestApi();
@ -93,7 +95,7 @@ export const FeatureStrategyMenu = ({
releasePlansEnabled && isChangeRequestConfigured(environmentId); releasePlansEnabled && isChangeRequestConfigured(environmentId);
const onClose = () => { const onClose = () => {
setAnchor(undefined); setIsStrategyMenuDialogOpen(false);
}; };
const openDefaultStrategyCreationModal = (event: React.SyntheticEvent) => { const openDefaultStrategyCreationModal = (event: React.SyntheticEvent) => {
@ -107,12 +109,12 @@ export const FeatureStrategyMenu = ({
const openMoreStrategies = (event: React.SyntheticEvent) => { const openMoreStrategies = (event: React.SyntheticEvent) => {
setOnlyReleasePlans(false); setOnlyReleasePlans(false);
setAnchor(event.currentTarget); setIsStrategyMenuDialogOpen(true);
}; };
const openReleasePlans = (event: React.SyntheticEvent) => { const openReleasePlans = (event: React.SyntheticEvent) => {
setOnlyReleasePlans(true); setOnlyReleasePlans(true);
setAnchor(event.currentTarget); setIsStrategyMenuDialogOpen(true);
}; };
const addReleasePlan = async (template: IReleasePlanTemplate) => { const addReleasePlan = async (template: IReleasePlanTemplate) => {
@ -158,6 +160,7 @@ export const FeatureStrategyMenu = ({
} finally { } finally {
setAddReleasePlanOpen(false); setAddReleasePlanOpen(false);
setSelectedTemplate(undefined); setSelectedTemplate(undefined);
onClose();
} }
}; };
@ -178,7 +181,7 @@ export const FeatureStrategyMenu = ({
projectId={projectId} projectId={projectId}
environmentId={environmentId} environmentId={environmentId}
onClick={openReleasePlans} onClick={openReleasePlans}
aria-labelledby={popoverId} aria-labelledby={dialogId}
variant='outlined' variant='outlined'
sx={{ minWidth: matchWidth ? '282px' : 'auto' }} sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
disabled={Boolean(disableReason)} disabled={Boolean(disableReason)}
@ -196,7 +199,7 @@ export const FeatureStrategyMenu = ({
projectId={projectId} projectId={projectId}
environmentId={environmentId} environmentId={environmentId}
onClick={openDefaultStrategyCreationModal} onClick={openDefaultStrategyCreationModal}
aria-labelledby={popoverId} aria-labelledby={dialogId}
variant={variant} variant={variant}
sx={{ minWidth: matchWidth ? '282px' : 'auto' }} sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
disabled={Boolean(disableReason)} disabled={Boolean(disableReason)}
@ -222,7 +225,7 @@ export const FeatureStrategyMenu = ({
<MoreVert /> <MoreVert />
</StyledAdditionalMenuButton> </StyledAdditionalMenuButton>
<Dialog <Dialog
open={isPopoverOpen} open={isStrategyMenuDialogOpen}
onClose={onClose} onClose={onClose}
maxWidth='md' maxWidth='md'
PaperProps={{ PaperProps={{
@ -244,6 +247,7 @@ export const FeatureStrategyMenu = ({
onReviewReleasePlan={(template) => { onReviewReleasePlan={(template) => {
setSelectedTemplate(template); setSelectedTemplate(template);
setAddReleasePlanOpen(true); setAddReleasePlanOpen(true);
onClose();
}} }}
onClose={onClose} onClose={onClose}
/> />
@ -252,7 +256,12 @@ export const FeatureStrategyMenu = ({
{selectedTemplate && ( {selectedTemplate && (
<ReleasePlanReviewDialog <ReleasePlanReviewDialog
open={addReleasePlanOpen} open={addReleasePlanOpen}
setOpen={setAddReleasePlanOpen} setOpen={(open) => {
setAddReleasePlanOpen(open);
if (!open) {
setIsStrategyMenuDialogOpen(true);
}
}}
onConfirm={() => { onConfirm={() => {
addReleasePlan(selectedTemplate); addReleasePlan(selectedTemplate);
}} }}

3
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
View File

@ -17,6 +17,7 @@ interface IFeatureStrategyMenuCardProps {
strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> & strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> &
Partial<IStrategy>; Partial<IStrategy>;
defaultStrategy?: boolean; defaultStrategy?: boolean;
onClose: () => void;
} }
const StyledIcon = styled('div')(({ theme }) => ({ const StyledIcon = styled('div')(({ theme }) => ({
@ -67,6 +68,7 @@ export const FeatureStrategyMenuCard = ({
environmentId, environmentId,
strategy, strategy,
defaultStrategy, defaultStrategy,
onClose,
}: IFeatureStrategyMenuCardProps) => { }: IFeatureStrategyMenuCardProps) => {
const StrategyIcon = getFeatureStrategyIcon(strategy.name); const StrategyIcon = getFeatureStrategyIcon(strategy.name);
const strategyName = formatStrategyName(strategy.name); const strategyName = formatStrategyName(strategy.name);
@ -86,6 +88,7 @@ export const FeatureStrategyMenuCard = ({
buttonTitle: strategy.displayName || strategyName, buttonTitle: strategy.displayName || strategyName,
}, },
}); });
onClose();
}; };
return ( return (

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

@ -24,7 +24,7 @@ interface IFeatureStrategyMenuCardsProps {
onlyReleasePlans: boolean; onlyReleasePlans: boolean;
onAddReleasePlan: (template: IReleasePlanTemplate) => void; onAddReleasePlan: (template: IReleasePlanTemplate) => void;
onReviewReleasePlan: (template: IReleasePlanTemplate) => void; onReviewReleasePlan: (template: IReleasePlanTemplate) => void;
onClose?: () => void; onClose: () => void;
} }
const StyledTypography = styled(Typography)(({ theme }) => ({ const StyledTypography = styled(Typography)(({ theme }) => ({
@ -102,7 +102,6 @@ const StyledIcon = styled('div')(({ theme }) => ({
alignItems: 'center', alignItems: 'center',
})); }));
// Empty state styling
const EmptyStateContainer = styled(Box)(({ theme }) => ({ const EmptyStateContainer = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@ -170,16 +169,14 @@ export const FeatureStrategyMenuCards = ({
<TitleText variant='h2'> <TitleText variant='h2'>
{onlyReleasePlans ? 'Select template' : 'Select strategy'} {onlyReleasePlans ? 'Select template' : 'Select strategy'}
</TitleText> </TitleText>
{onClose && ( <IconButton
<IconButton size='small'
size='small' onClick={onClose}
onClick={onClose} edge='end'
edge='end' aria-label='close'
aria-label='close' >
> <CloseIcon fontSize='small' />
<CloseIcon fontSize='small' /> </IconButton>
</IconButton>
)}
</TitleRow> </TitleRow>
<ScrollableContent> <ScrollableContent>
{allStrategies ? ( {allStrategies ? (
@ -203,6 +200,7 @@ export const FeatureStrategyMenuCards = ({
environmentId={environmentId} environmentId={environmentId}
strategy={defaultStrategy} strategy={defaultStrategy}
defaultStrategy={true} defaultStrategy={true}
onClose={onClose}
/> />
</CardWrapper> </CardWrapper>
{preDefinedStrategies.map((strategy) => ( {preDefinedStrategies.map((strategy) => (
@ -212,6 +210,7 @@ export const FeatureStrategyMenuCards = ({
featureId={featureId} featureId={featureId}
environmentId={environmentId} environmentId={environmentId}
strategy={strategy} strategy={strategy}
onClose={onClose}
/> />
</CardWrapper> </CardWrapper>
))} ))}
@ -331,6 +330,7 @@ export const FeatureStrategyMenuCards = ({
environmentId environmentId
} }
strategy={strategy} strategy={strategy}
onClose={onClose}
/> />
</CardWrapper> </CardWrapper>
))} ))}