Merge pull request #1083 from Vizzuality/feature/clone-scenario

Scenario: cloning

app/components/scenarios/item/component.tsx

@@ -60,6 +60,14 @@ const SCENARIO_STATES = {
     text: 'Fail Features',
     styles: 'text-red-500',
   },
+  'clone-running': {
+    text: 'Running cloning',
+    styles: 'text-white',
+  },
+  'clone-failure': {
+    text: 'Fail cloning scenario',
+    styles: 'text-red-500',
+  },
   draft: {
     text: 'Edited',
     styles: 'text-gray-400',
@@ -112,6 +120,7 @@ export const Item: React.FC<ItemProps> = ({
     const geofeatureStratification = jobs.find((j) => j.kind === 'geofeatureStratification');
     const specification = jobs.find((j) => j.kind === 'specification');
     const calibration = jobs.find((j) => j.kind === 'calibration');
+    const clone = jobs.find((j) => j.kind === 'clone');
     const run = jobs.find((j) => j.kind === 'run');
 
     // PROTECTED AREAS
@@ -153,6 +162,10 @@ export const Item: React.FC<ItemProps> = ({
     if (runStatus === 'failure') return 'run-failure';
     if (runStatus === 'done') return 'run-done';
 
+    // CLONE
+    if (clone && clone.status === 'running') return 'clone-running';
+    if (clone && clone.status === 'failure') return 'clone-failure';
+
     if (ranAtLeastOnce) return 'run-done';
 
     return 'draft';

app/components/scenarios/item/settings/component.tsx

@@ -4,8 +4,6 @@ import { useRouter } from 'next/router';
 
 import { useCanEditProject } from 'hooks/permissions';
 
-import ComingSoon from 'layout/help/coming-soon';
-
 import Button from 'components/button';
 
 export interface ItemSettingsProps {
@@ -29,17 +27,15 @@ export const Item: React.FC<ItemSettingsProps> = ({
       {children}
 
       <div className="flex justify-end w-full space-x-1 mt-2.5">
-        <ComingSoon>
-          <Button
-            className="flex-shrink-0"
-            size="s"
-            theme="secondary"
-            disabled={!editable}
-            onClick={onDuplicate}
-          >
-            Duplicate
-          </Button>
-        </ComingSoon>
+        <Button
+          className="flex-shrink-0"
+          size="s"
+          theme="secondary"
+          disabled={!editable}
+          onClick={onDuplicate}
+        >
+          Duplicate
+        </Button>
 
         <Button
           className="flex-shrink-0"

app/hooks/scenarios/index.ts

@@ -760,10 +760,10 @@ export function useDuplicateScenario({
   const queryClient = useQueryClient();
   const [session] = useSession();
 
-  const duplicateScenario = ({ id }: DuplicateScenarioProps) => {
+  const duplicateScenario = ({ sid }: DuplicateScenarioProps) => {
     // Pending endpoint
     return SCENARIOS.request({
-      url: `/${id}`,
+      url: `/${sid}/clone`,
       headers: {
         Authorization: `Bearer ${session.accessToken}`,
       },
@@ -773,9 +773,7 @@ export function useDuplicateScenario({
 
   return useMutation(duplicateScenario, {
     onSuccess: (data: any, variables, context) => {
-      const { id, projectId } = data;
-      queryClient.invalidateQueries(['scenarios', projectId]);
-      queryClient.invalidateQueries(['scenarios', id]);
+      queryClient.invalidateQueries(['scenarios']);
       console.info('Success', data, variables, context);
     },
     onError: (error, variables, context) => {

app/hooks/scenarios/types.ts

@@ -89,7 +89,7 @@ export interface UseDuplicateScenarioProps {
 }
 
 export interface DuplicateScenarioProps {
-  id: string | string[];
+  sid: string | string[];
 }
 
 export interface UseRunScenarioProps {

app/layout/projects/show/scenarios/component.tsx

@@ -130,7 +130,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
   });
 
   const onDuplicate = useCallback((scenarioId, scenarioName) => {
-    duplicateScenarioMutation.mutate({ id: scenarioId }, {
+    duplicateScenarioMutation.mutate({ sid: scenarioId }, {
       onSuccess: ({ data: { data: s } }) => {
         addToast('success-duplicate-project', (
           <>
@@ -140,7 +140,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
               {' '}
               {scenarioName}
               {' '}
-              duplicated
+              start duplicating
             </p>
           </>
         ), {

app/layout/scenarios/edit/status/actions/done.tsx

@@ -311,7 +311,43 @@ export const useScenarioActionsDone = () => {
         JOB_REF.current = null;
       },
       onError: () => {
-        addToast('onRunRone', (
+        addToast('onRunError', (
+          <>
+            <h2 className="font-medium">Error!</h2>
+          </>
+        ), {
+          level: 'error',
+        });
+      },
+    });
+  }, [
+    sid,
+    scenarioMutation,
+    scenarioData?.metadata,
+    dispatch,
+    setJob,
+    setCache,
+    addToast,
+  ]);
+
+  // Run
+  const onCloneImportDone = useCallback((JOB_REF) => {
+    scenarioMutation.mutate({
+      id: `${sid}`,
+      data: {
+        metadata: mergeScenarioStatusMetaData(
+          scenarioData?.metadata,
+          scenarioData?.metadata?.scenarioEditingMetadata,
+        ),
+      },
+    }, {
+      onSuccess: () => {
+        dispatch(setJob(null));
+        dispatch(setCache(Date.now()));
+        JOB_REF.current = null;
+      },
+      onError: () => {
+        addToast('onCloneError', (
           <>
             <h2 className="font-medium">Error!</h2>
           </>
@@ -338,5 +374,7 @@ export const useScenarioActionsDone = () => {
     planningUnitsInclusion: onPlanningUnitsInclusionDone,
     calibration: onCalibrationDone,
     run: onRunDone,
+    clone: onCloneImportDone,
+    import: onCloneImportDone,
   };
 };

app/layout/scenarios/edit/status/actions/failure.tsx

@@ -232,6 +232,31 @@ export const useScenarioActionsFailure = () => {
     });
   }, [sid, scenarioMutation, scenarioData?.metadata, dispatch, setJob, addToast]);
 
+  const onCloneImportFailure = useCallback(() => {
+    scenarioMutation.mutate({
+      id: `${sid}`,
+      data: {
+        metadata: mergeScenarioStatusMetaData(
+          scenarioData?.metadata,
+          scenarioData?.metadata?.scenarioEditingMetadata?.lastTab,
+        ),
+      },
+    }, {
+      onSuccess: () => {
+        dispatch(setJob(null));
+      },
+      onError: () => {
+        addToast('onRunFailure', (
+          <>
+            <h2 className="font-medium">Error!</h2>
+          </>
+        ), {
+          level: 'error',
+        });
+      },
+    });
+  }, [sid, scenarioMutation, scenarioData?.metadata, dispatch, setJob, addToast]);
+
   return {
     features: onFeaturesFailure,
     planningAreaProtectedCalculation: onPlanningAreaProtectedCalculationFailure,
@@ -240,5 +265,7 @@ export const useScenarioActionsFailure = () => {
     planningUnitsInclusion: onPlanningUnitsInclusionFailure,
     calibration: onCalibrationFailure,
     run: onRunFailure,
+    clone: onCloneImportFailure,
+    import: onCloneImportFailure,
   };
 };

app/layout/scenarios/edit/status/constants.ts

@@ -6,6 +6,8 @@ export const TEXTS_RUNNING = {
   costSurface: () => 'Processing cost surface...',
   calibration: () => 'Processing calibration...',
   run: () => 'Running Marxan...',
+  clone: () => 'Cloning scenario...',
+  import: () => 'Importing scenario...',
 };
 
 export const TEXTS_FAILURE = {
@@ -16,4 +18,6 @@ export const TEXTS_FAILURE = {
   costSurface: () => 'Fail Processing cost surface',
   calibration: () => 'Fail Processing calibration',
   run: () => 'Fail Running Marxan',
+  clone: () => 'Fail Cloning scenario',
+  import: () => 'Fail Importing scenario',
 };