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

Author: sjaanus

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx

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

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

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

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx

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

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx

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