fix(ws): Improve workspace form drawer details and wizard flow (kubeflow#467)

Signed-off-by: Jenny <[email protected]>

move formatLabel to separate util

add title, divider, and fix wizard buttons to align with PF design guidelines

Signed-off-by: Jenny <[email protected]>

prevent wizard button from active state when no selection

Signed-off-by: Jenny <[email protected]>

rebase

Signed-off-by: Jenny <[email protected]>

handle standard infra resource types

Author: jenny-s51

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

@@ -86,14 +86,29 @@ const WorkspaceForm: React.FC = () => {
 
   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 canGoToNextStep = useMemo(
     () => currentStep < Object.keys(WorkspaceFormSteps).length / 2 - 1,
     [currentStep],
   );
 
   const canSubmit = useMemo(
-    () => !isSubmitting && !canGoToNextStep,
-    [canGoToNextStep, isSubmitting],
+    () => !isSubmitting && !canGoToNextStep && isCurrentStepValid,
+    [canGoToNextStep, isSubmitting, isCurrentStepValid],
   );
 
   const handleSubmit = useCallback(async () => {
@@ -255,33 +270,34 @@ const WorkspaceForm: React.FC = () => {
         <Flex>
           <FlexItem>
             <Button
-              variant="primary"
-              ouiaId="Primary"
+              variant="secondary"
+              ouiaId="Secondary"
               onClick={previousStep}
               isDisabled={!canGoToPreviousStep}
             >
               Previous
             </Button>
           </FlexItem>
           <FlexItem>
-            <Button
-              variant="primary"
-              ouiaId="Primary"
-              onClick={nextStep}
-              isDisabled={!canGoToNextStep}
-            >
-              Next
-            </Button>
-          </FlexItem>
-          <FlexItem>
-            <Button
-              variant="primary"
-              ouiaId="Primary"
-              onClick={handleSubmit}
-              isDisabled={!canSubmit}
-            >
-              {mode === 'create' ? 'Create' : 'Save'}
-            </Button>
+            {canGoToNextStep ? (
+              <Button
+                variant="primary"
+                ouiaId="Primary"
+                onClick={nextStep}
+                isDisabled={!isCurrentStepValid}
+              >
+                Next
+              </Button>
+            ) : (
+              <Button
+                variant="primary"
+                ouiaId="Primary"
+                onClick={handleSubmit}
+                isDisabled={!canSubmit}
+              >
+                {mode === 'create' ? 'Create' : 'Save'}
+              </Button>
+            )}
           </FlexItem>
           <FlexItem>
             <Button variant="link" isInline onClick={cancel}>

workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
-import { List, ListItem, Title } from '@patternfly/react-core';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Title,
+} from '@patternfly/react-core';
 import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
+import { formatLabelKey } from '~/shared/utilities/WorkspaceUtils';
 
 type WorkspaceFormImageDetailsProps = {
   workspaceImage?: WorkspacePodConfigValue;
@@ -14,13 +21,21 @@ export const WorkspaceFormImageDetails: React.FunctionComponent<WorkspaceFormIma
       <>
         <Title headingLevel="h3">{workspaceImage.displayName}</Title>
         <br />
-        <List isPlain>
-          {workspaceImage.labels.map((label) => (
-            <ListItem key={label.key}>
-              {label.key}={label.value}
-            </ListItem>
-          ))}
-        </List>
+        {workspaceImage.labels.map((label) => (
+          <DescriptionList
+            key={label.key}
+            isHorizontal
+            isCompact
+            horizontalTermWidthModifier={{
+              default: '17ch',
+            }}
+          >
+            <DescriptionListGroup>
+              <DescriptionListTerm>{formatLabelKey(label.key)}</DescriptionListTerm>
+              <DescriptionListDescription>{label.value}</DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        ))}
       </>
     )}
   </div>

workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx

@@ -12,7 +12,7 @@ export const WorkspaceFormKindDetails: React.FunctionComponent<WorkspaceFormKind
   <div style={{ marginLeft: 'var(--pf-t--global--spacer--md)' }}>
     {workspaceKind && (
       <>
-        <Title headingLevel="h3">{workspaceKind.name}</Title>
+        <Title headingLevel="h3">{workspaceKind.displayName}</Title>
         <p>{workspaceKind.description}</p>
       </>
     )}

workspaces/frontend/src/app/pages/Workspaces/Form/labelFilter/FilterByLabels.tsx

@@ -6,6 +6,7 @@ import {
 } from '@patternfly/react-catalog-view-extension';
 import '@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css';
 import { WorkspaceOptionLabel } from '~/shared/api/backendApiTypes';
+import { formatLabelKey } from '~/shared/utilities/WorkspaceUtils';
 
 type FilterByLabelsProps = {
   labelledObjects: WorkspaceOptionLabel[];
@@ -60,7 +61,7 @@ export const FilterByLabels: React.FunctionComponent<FilterByLabelsProps> = ({
   return (
     <FilterSidePanel id="filter-panel">
       {[...filterMap.keys()].map((label) => (
-        <FilterSidePanelCategory key={label} title={label}>
+        <FilterSidePanelCategory key={label} title={formatLabelKey(label)}>
           {Array.from(filterMap.get(label)?.values() ?? []).map((labelValue) => (
             <FilterSidePanelCategoryItem
               key={`${label}|||${labelValue}`}

workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Title,
+  Divider,
+} from '@patternfly/react-core';
 import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
+import { formatLabelKey } from '~/shared/utilities/WorkspaceUtils';
 
 type WorkspaceFormPodConfigDetailsProps = {
   workspacePodConfig?: WorkspacePodConfigValue;
@@ -12,14 +20,23 @@ export const WorkspaceFormPodConfigDetails: React.FunctionComponent<
   <>
     {workspacePodConfig && (
       <div style={{ marginLeft: 'var(--pf-t--global--spacer--md)' }}>
+        <Title headingLevel="h3">{workspacePodConfig.displayName}</Title>{' '}
         <p>{workspacePodConfig.description}</p>
-        <List isPlain>
-          {workspacePodConfig.labels.map((label) => (
-            <ListItem key={label.key}>
-              {label.key}={label.value}
-            </ListItem>
-          ))}
-        </List>
+        <Divider />
+        {workspacePodConfig.labels.map((label) => (
+          <DescriptionList
+            key={label.key}
+            isHorizontal
+            horizontalTermWidthModifier={{
+              default: '12ch',
+            }}
+          >
+            <DescriptionListGroup>
+              <DescriptionListTerm>{formatLabelKey(label.key)}</DescriptionListTerm>
+              <DescriptionListDescription>{label.value}</DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        ))}
       </div>
     )}
   </>

workspaces/frontend/src/shared/style/MUI-theme.scss

@@ -177,13 +177,18 @@
 }
 
 .mui-theme .pf-v6-c-card {
-  --pf-v6-c-card--BorderWidth: 0px;
+  --pf-v6-c-card--BorderWidth: 1px;
   --pf-v6-c-card--BorderRadius: var(--mui-shape-borderRadius);
-  box-shadow: var(--mui-shadows-1);
+  --pf-v6-c-card--BorderColor: var(--mui-palette-divider);
+}
+
+.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
+  --pf-v6-c-card--BorderColor: var(--mui-palette-grey-300);
 }
 
 .mui-theme .pf-v6-c-card:hover {
   --pf-v6-c-card--BackgroundColor: var(--mui-palette-grey-100);
+  --pf-v6-c-card--BorderColor: var(--mui-palette-grey-200);
 }
 
 .mui-theme .pf-v6-c-card.pf-m-selected {
@@ -865,6 +870,11 @@
 
 }
 
+// Fix hover state margin issue by removing problematic padding
+.mui-theme .pf-v6-c-menu__list {
+  --pf-v6-c-content--list--PaddingInlineStart: 0;
+}
+
 .mui-theme .pf-v6-c-expandable-section .pf-v6-c-expandable-section__content {
   margin-block-end: var(--mui-spacing-16px);
 }

workspaces/frontend/src/shared/utilities/WorkspaceUtils.ts

@@ -111,6 +111,11 @@ export const formatLabelKey = (key: string): string => {
     return baseName.charAt(0).toUpperCase() + baseName.slice(1);
   }
 
+  // Handle standard infrastructure resource types
+  if (key === 'cpu' || key === 'gpu') {
+    return key.toLocaleUpperCase();
+  }
+
   // Otherwise just capitalize the first letter
   return key.charAt(0).toUpperCase() + key.slice(1);
 };