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<{ <> Is this feature complete? - 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. { const { markFeatureCompleted } = useFeatureLifecycleApi(); + const { parentVariantOptions: variantOptions } = useParentVariantOptions( + projectId, + featureId, + ); const [status, setStatus] = useState('kept'); const [variant, setVariant] = useState(undefined); const onClick = async () => { @@ -96,18 +101,26 @@ export const MarkCompletedDialogue = ({ }} control={} /> - } + 0} + show={ + } + /> + } /> 0 && + status === 'kept-with-variant' + } show={ { + 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 = ( <> void, projectId: string) => { featureIds={[featureArchiveState || '']} projectId={projectId} /> + { + 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, }; };