fix(ws): when navigating between wizard steps, show drawer for steps that have drawer content

Author: jenny-s51

workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx

@@ -92,32 +92,46 @@ const WorkspaceForm: React.FC = () => {
     [currentStep],
   );
 
+  const isStepValid = useCallback(
+    (step: WorkspaceFormSteps) => {
+      switch (step) {
+        case WorkspaceFormSteps.KindSelection:
+          return !!data.kind;
+        case WorkspaceFormSteps.ImageSelection:
+          return !!data.image;
+        case WorkspaceFormSteps.PodConfigSelection:
+          return !!data.podConfig;
+        case WorkspaceFormSteps.Properties:
+          return !!data.properties.workspaceName.trim();
+        default:
+          return false;
+      }
+    },
+    [data.kind, data.image, data.podConfig, data.properties.workspaceName],
+  );
+
+  const showDrawer = useCallback(
+    (step: WorkspaceFormSteps) =>
+      // Only show drawer for steps that have drawer content
+      step !== WorkspaceFormSteps.Properties && isStepValid(step),
+    [isStepValid],
+  );
+
   const previousStep = useCallback(() => {
-    setCurrentStep(currentStep - 1);
-    setDrawerExpanded(false);
-  }, [currentStep]);
+    const newStep = currentStep - 1;
+    setCurrentStep(newStep);
+    setDrawerExpanded(showDrawer(newStep));
+  }, [currentStep, showDrawer]);
 
   const nextStep = useCallback(() => {
-    setCurrentStep(currentStep + 1);
-    setDrawerExpanded(false);
-  }, [currentStep]);
+    const newStep = currentStep + 1;
+    setCurrentStep(newStep);
+    setDrawerExpanded(showDrawer(newStep));
+  }, [currentStep, showDrawer]);
 
   const canGoToPreviousStep = useMemo(() => currentStep > 0, [currentStep]);
 
-  const isCurrentStepValid = useMemo(() => {
-    switch (currentStep) {
-      case WorkspaceFormSteps.KindSelection:
-        return !!data.kind;
-      case WorkspaceFormSteps.ImageSelection:
-        return !!data.image;
-      case WorkspaceFormSteps.PodConfigSelection:
-        return !!data.podConfig;
-      case WorkspaceFormSteps.Properties:
-        return !!data.properties.workspaceName.trim();
-      default:
-        return false;
-    }
-  }, [currentStep, data]);
+  const isCurrentStepValid = useMemo(() => isStepValid(currentStep), [isStepValid, currentStep]);
 
   const canGoToNextStep = useMemo(
     () => currentStep < Object.keys(WorkspaceFormSteps).length / 2 - 1,