From 4241e368197a3d7c14dc76e85e9b2c12548d14d3 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Mon, 13 May 2024 13:41:36 +0300
Subject: [PATCH] fix: lifecycle improvements/fixes (#7044)

1. Now completed modal works from project view
2. Changed text for modal
3. Now variant selection will only appear if there are any variants
---
 .../FeatureLifecycleTooltip.tsx               | 10 +++---
 .../MarkCompletedDialogue.tsx                 | 33 +++++++++++++------
 .../ProjectFeatureToggles.tsx                 |  8 ++++-
 .../hooks/useRowActions.tsx                   | 21 ++++++++++++
 4 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
index a522318ac3..32d32317c9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx
@@ -273,12 +273,12 @@ const LiveStageDescription: FC<{
         <>
             <BoldTitle>Is this feature complete?</BoldTitle>
             <InfoText sx={{ mb: 1 }}>
-                Marking the feature as complete does not affect any
-                configuration, but it moves the feature into it’s next life
-                cycle stage and is an indication that you have learned what you
+                Marking the feature flag as complete does not affect any
+                configuration; however, it moves the feature flag to its next
+                lifecycle stage and indicates that you have learned what you
                 needed in order to progress with the feature. It serves as a
-                reminder to start cleaning up the flag and removing it from the
-                code.
+                reminder to start cleaning up the feature flag and removing it
+                from the code.
             </InfoText>
             <PermissionButton
                 color='inherit'
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/MarkCompletedDialogue.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/MarkCompletedDialogue.tsx
index b9076753f2..297392b92b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/MarkCompletedDialogue.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/MarkCompletedDialogue.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import useFeatureLifecycleApi from 'hooks/api/actions/useFeatureLifecycleApi/useFeatureLifecycleApi';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { SingleVariantOptions } from './SingleVariantOptions';
+import { useParentVariantOptions } from 'hooks/api/getters/useFeatureDependencyOptions/useFeatureDependencyOptions';
 
 interface IMarkCompletedDialogueProps {
     isOpen: boolean;
@@ -24,6 +25,10 @@ export const MarkCompletedDialogue = ({
     onComplete,
 }: IMarkCompletedDialogueProps) => {
     const { markFeatureCompleted } = useFeatureLifecycleApi();
+    const { parentVariantOptions: variantOptions } = useParentVariantOptions(
+        projectId,
+        featureId,
+    );
     const [status, setStatus] = useState<Status>('kept');
     const [variant, setVariant] = useState<string | undefined>(undefined);
     const onClick = async () => {
@@ -96,18 +101,26 @@ export const MarkCompletedDialogue = ({
                         }}
                         control={<Radio />}
                     />
-                    <LegalValueLabel
-                        key={'kept-with-variant'}
-                        value={'kept-with-variant'}
-                        legal={{
-                            value: 'We decided to keep the feature variant',
-                            description:
-                                'Choose to specify which feature variant will be kept',
-                        }}
-                        control={<Radio />}
+                    <ConditionallyRender
+                        condition={variantOptions.length > 0}
+                        show={
+                            <LegalValueLabel
+                                key={'kept-with-variant'}
+                                value={'kept-with-variant'}
+                                legal={{
+                                    value: 'We decided to keep the feature variant',
+                                    description:
+                                        'Choose to specify which feature variant will be kept',
+                                }}
+                                control={<Radio />}
+                            />
+                        }
                     />
                     <ConditionallyRender
-                        condition={status === 'kept-with-variant'}
+                        condition={
+                            variantOptions.length > 0 &&
+                            status === 'kept-with-variant'
+                        }
                         show={
                             <SingleVariantOptions
                                 parent={featureId}
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index 9f5cf81877..d0d4bdc50c 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -126,6 +126,7 @@ export const ProjectFeatureToggles = ({
         rowActionsDialogs,
         setFeatureArchiveState,
         setFeatureStaleDialogState,
+        setShowMarkCompletedDialogue,
     } = useRowActions(refetch, projectId);
 
     const isPlaceholder = Boolean(initialLoad || (loading && total));
@@ -206,7 +207,12 @@ export const ProjectFeatureToggles = ({
                         show={
                             <FeatureLifecycleCell
                                 feature={original}
-                                onComplete={refetch}
+                                onComplete={() => {
+                                    setShowMarkCompletedDialogue({
+                                        featureId: original.name,
+                                        open: true,
+                                    });
+                                }}
                                 onUncomplete={refetch}
                                 onArchive={() =>
                                     setFeatureArchiveState(original.name)
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx
index de10233345..5ba17bf051 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useRowActions.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
 import { FeatureStaleDialog } from 'component/common/FeatureStaleDialog/FeatureStaleDialog';
+import { MarkCompletedDialogue } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/MarkCompletedDialogue';
 
 export const useRowActions = (onChange: () => void, projectId: string) => {
     const [featureArchiveState, setFeatureArchiveState] = useState<
@@ -12,6 +13,13 @@ export const useRowActions = (onChange: () => void, projectId: string) => {
         stale?: boolean;
     }>({});
 
+    const [showMarkCompletedDialogue, setShowMarkCompletedDialogue] = useState<{
+        featureId: string;
+        open: boolean;
+    }>({
+        featureId: 'default',
+        open: false,
+    });
     const rowActionsDialogs = (
         <>
             <FeatureStaleDialog
@@ -34,6 +42,18 @@ export const useRowActions = (onChange: () => void, projectId: string) => {
                 featureIds={[featureArchiveState || '']}
                 projectId={projectId}
             />
+            <MarkCompletedDialogue
+                isOpen={showMarkCompletedDialogue.open}
+                setIsOpen={(open) => {
+                    setShowMarkCompletedDialogue({
+                        ...showMarkCompletedDialogue,
+                        open,
+                    });
+                }}
+                projectId={projectId}
+                featureId={showMarkCompletedDialogue.featureId}
+                onComplete={onChange}
+            />
         </>
     );
 
@@ -41,5 +61,6 @@ export const useRowActions = (onChange: () => void, projectId: string) => {
         rowActionsDialogs,
         setFeatureArchiveState,
         setFeatureStaleDialogState,
+        setShowMarkCompletedDialogue,
     };
 };