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

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
+                Marking the feature flag as complete does not affect any
-                configuration, but it moves the feature into it’s next life
+                configuration; however, it moves the feature flag to its next
-                cycle stage and is an indication that you have learned what you
+                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
+                reminder to start cleaning up the feature flag and removing it
-                code.
+                from the code.
             </InfoText>
             <PermissionButton
                 color='inherit'

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
+                    <ConditionallyRender
-                        key={'kept-with-variant'}
+                        condition={variantOptions.length > 0}
-                        value={'kept-with-variant'}
+                        show={
-                        legal={{
+                            <LegalValueLabel
-                            value: 'We decided to keep the feature variant',
+                                key={'kept-with-variant'}
-                            description:
+                                value={'kept-with-variant'}
-                                'Choose to specify which feature variant will be kept',
+                                legal={{
-                        }}
+                                    value: 'We decided to keep the feature variant',
-                        control={<Radio />}
+                                    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}

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)

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,
     };
 };