feat: feature completed connected to backend (#6947)

Connects feature complete to backend

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.test.tsx

@@ -11,9 +11,19 @@ const twoMinutesAgo = '2024-04-25T08:03:00.000Z';
 const oneHourAgo = '2024-04-25T07:05:00.000Z';
 const twoHoursAgo = '2024-04-25T06:05:00.000Z';
 
-const renderOpenTooltip = (stage: LifecycleStage, onArchive = () => {}) => {
+const renderOpenTooltip = (
+    stage: LifecycleStage,
+    onArchive = () => {},
+    onComplete = () => {},
+    loading = true,
+) => {
     render(
-        <FeatureLifecycleTooltip stage={stage} onArchive={onArchive}>
+        <FeatureLifecycleTooltip
+            stage={stage}
+            onArchive={onArchive}
+            onComplete={onComplete}
+            loading={loading}
+        >
             <span>child</span>
         </FeatureLifecycleTooltip>,
         { permissions: [{ permission: DELETE_FEATURE }] },

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FeatureLifecycleTooltip.tsx

@@ -257,7 +257,10 @@ const BoldTitle = styled(Typography)(({ theme }) => ({
     fontWeight: theme.fontWeight.bold,
 }));
 
-const LiveStageDescription: FC = ({ children }) => {
+const LiveStageDescription: FC<{
+    onComplete: () => void;
+    loading: boolean;
+}> = ({ children, onComplete, loading }) => {
     return (
         <>
             <BoldTitle>Is this feature complete?</BoldTitle>
@@ -274,6 +277,8 @@ const LiveStageDescription: FC = ({ children }) => {
                 variant='outlined'
                 permission={UPDATE_FEATURE}
                 size='small'
+                onClick={onComplete}
+                disabled={loading}
             >
                 Mark Completed
             </PermissionButton>
@@ -351,7 +356,9 @@ export const FeatureLifecycleTooltip: FC<{
     children: React.ReactElement<any, any>;
     stage: LifecycleStage;
     onArchive: () => void;
-}> = ({ children, stage, onArchive }) => (
+    onComplete: () => void;
+    loading: boolean;
+}> = ({ children, stage, onArchive, onComplete, loading }) => (
     <HtmlTooltip
         maxHeight={800}
         maxWidth={350}
@@ -393,7 +400,10 @@ export const FeatureLifecycleTooltip: FC<{
                         </PreLiveStageDescription>
                     )}
                     {stage.name === 'live' && (
-                        <LiveStageDescription>
+                        <LiveStageDescription
+                            onComplete={onComplete}
+                            loading={loading}
+                        >
                             <Environments environments={stage.environments} />
                         </LiveStageDescription>
                     )}

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx

@@ -14,6 +14,7 @@ import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/Feat
 import { useState } from 'react';
 import { FeatureArchiveNotAllowedDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveNotAllowedDialog';
 import { populateCurrentStage } from '../FeatureLifecycle/populateCurrentStage';
+import useFeatureLifecycleApi from 'hooks/api/actions/useFeatureLifecycleApi/useFeatureLifecycleApi';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
@@ -79,9 +80,10 @@ export const StyledLabel = styled('span')(({ theme }) => ({
 const FeatureOverviewMetaData = () => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
-    const { feature } = useFeature(projectId, featureId);
+    const { feature, refetchFeature } = useFeature(projectId, featureId);
     const { project, description, type } = feature;
     const featureLifecycleEnabled = useUiFlag('featureLifecycle');
+    const { markFeatureCompleted, loading } = useFeatureLifecycleApi();
     const navigate = useNavigate();
     const [showDelDialog, setShowDelDialog] = useState(false);
 
@@ -89,6 +91,11 @@ const FeatureOverviewMetaData = () => {
 
     const currentStage = populateCurrentStage(feature);
 
+    const onComplete = async () => {
+        await markFeatureCompleted(featureId, projectId);
+        refetchFeature();
+    };
+
     return (
         <StyledContainer>
             <StyledPaddingContainerTop>
@@ -122,6 +129,8 @@ const FeatureOverviewMetaData = () => {
                                 <FeatureLifecycleTooltip
                                     stage={currentStage!}
                                     onArchive={() => setShowDelDialog(true)}
+                                    onComplete={onComplete}
+                                    loading={loading}
                                 >
                                     <FeatureLifecycleStageIcon
                                         stage={currentStage!}

frontend/src/hooks/api/actions/useFeatureLifecycleApi/useFeatureLifecycleApi.ts

@@ -0,0 +1,25 @@
+import useAPI from '../useApi/useApi';
+
+const useFeatureLifecycleApi = () => {
+    const { makeRequest, makeLightRequest, createRequest, errors, loading } =
+        useAPI({
+            propagateErrors: true,
+        });
+
+    const markFeatureCompleted = async (name: string, project: string) => {
+        const path = `api/admin/projects/${project}/features/${name}/lifecycle/complete`;
+        const req = createRequest(path, {
+            method: 'POST',
+        });
+
+        return makeRequest(req.caller, req.id);
+    };
+
+    return {
+        markFeatureCompleted,
+        errors,
+        loading,
+    };
+};
+
+export default useFeatureLifecycleApi;