fix: UI issues in table and text inputs; add ThemeAwareFormGroupWrapper (#696)

fix action cell and useWorkspaceRowActions test



bump to latest shared library versions

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

Author: jenny-s51

workspaces/frontend/package-lock.json

@@ -121,9 +121,9 @@
     "dompurify": "^3.2.4",
     "js-yaml": "^4.1.0",
     "lodash-es": "^4.17.15",
-    "mod-arch-core": "^1.1.5",
-    "mod-arch-kubeflow": "^1.1.5",
-    "mod-arch-shared": "^1.1.5",
+    "mod-arch-core": "^1.2.0",
+    "mod-arch-kubeflow": "^1.2.0",
+    "mod-arch-shared": "^1.2.0",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "^7.5.2",

workspaces/frontend/package.json

@@ -62,6 +62,7 @@ import {
 import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';
 import CustomEmptyState from '~/shared/components/CustomEmptyState';
 import { WorkspacesWorkspace, WorkspacesWorkspaceState } from '~/generated/data-contracts';
+import { useWorkspaceActionsContext } from '~/app/context/WorkspaceActionsContext';
 
 const {
   fields: wsTableColumns,
@@ -128,6 +129,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
     },
     ref,
   ) => {
+    const { isDrawerExpanded } = useWorkspaceActionsContext();
     const [workspaceKinds] = useWorkspaceKinds();
     const [expandedWorkspacesNames, setExpandedWorkspacesNames] = useState<string[]>([]);
     const [filters, setFilters] = useState<Record<FilterKey, string>>({
@@ -518,6 +520,8 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
           data-testid="workspaces-table"
           aria-label="Sortable table"
           ouiaId="SortableTable"
+          variant="compact"
+          gridBreakPoint={isDrawerExpanded ? 'grid' : 'grid-lg'}
           style={{ tableLayout: 'fixed' }}
         >
           <Thead>
@@ -570,15 +574,15 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
                     {visibleColumnKeys.map((columnKey) => {
                       if (columnKey === 'connect') {
                         return (
-                          <Td key="connect" isActionCell>
+                          <Td key="connect" dataLabel={wsTableColumns[columnKey].label}>
                             <WorkspaceConnectAction workspace={workspace} />
                           </Td>
                         );
                       }
 
                       if (columnKey === 'actions') {
                         return (
-                          <Td key="actions" isActionCell data-testid="action-column">
+                          <Td key="actions" data-testid="action-column">
                             <ActionsColumn
                               items={rowActions(workspace).map((action) => ({
                                 ...action,
@@ -638,9 +642,11 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
                           )}
                           {columnKey === 'namespace' && workspace.namespace}
                           {columnKey === 'state' && (
-                            <Label color={extractStateColor(workspace.state)}>
-                              {workspace.state}
-                            </Label>
+                            <div className="pf-v6-u-display-inline-block">
+                              <Label color={extractStateColor(workspace.state)}>
+                                {workspace.state}
+                              </Label>
+                            </div>
                           )}
                           {columnKey === 'gpu' && formatResourceFromWorkspace(workspace, 'gpu')}
                           {columnKey === 'idleGpu' && formatWorkspaceIdleState(workspace)}

workspaces/frontend/src/app/components/WorkspaceTable.tsx

@@ -39,6 +39,7 @@ export type WorkspaceActionsContextType = {
   requestStartAction: RequestAction;
   requestRestartAction: RequestAction;
   requestStopAction: RequestAction;
+  isDrawerExpanded: boolean;
 };
 
 export const WorkspaceActionsContext = React.createContext<WorkspaceActionsContextType | undefined>(
@@ -148,6 +149,8 @@ export const WorkspaceActionsContextProvider: React.FC<WorkspaceActionsContextPr
     }
   }, [activeWsAction, executeEditAction]);
 
+  const isDrawerExpanded = activeWsAction?.action === ActionType.ViewDetails;
+
   const contextValue = useMemo(
     () => ({
       requestViewDetailsAction,
@@ -156,6 +159,7 @@ export const WorkspaceActionsContextProvider: React.FC<WorkspaceActionsContextPr
       requestStartAction,
       requestRestartAction,
       requestStopAction,
+      isDrawerExpanded,
     }),
     [
       requestViewDetailsAction,
@@ -164,12 +168,19 @@ export const WorkspaceActionsContextProvider: React.FC<WorkspaceActionsContextPr
       requestStartAction,
       requestRestartAction,
       requestStopAction,
+      isDrawerExpanded,
     ],
   );
 
   return (
     <WorkspaceActionsContext.Provider value={contextValue}>
-      <Drawer isInline isExpanded={activeWsAction?.action === ActionType.ViewDetails}>
+      <Drawer
+        isInline
+        isExpanded={isDrawerExpanded}
+        onExpand={() => {
+          /* drawer expanded */
+        }}
+      >
         <DrawerContent panelContent={drawerContent}>
           <DrawerContentBody>
             {children}

workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx

@@ -27,6 +27,7 @@ describe('useWorkspaceRowActions', () => {
     requestStartAction: (args: RequestActionArgs) => void;
     requestRestartAction: (args: RequestActionArgs) => void;
     requestStopAction: (args: RequestActionArgs) => void;
+    isDrawerExpanded: boolean;
   };
 
   const contextValue: WorkspaceActionsContextLike = {
@@ -36,6 +37,7 @@ describe('useWorkspaceRowActions', () => {
     requestStartAction: jest.fn(),
     requestRestartAction: jest.fn(),
     requestStopAction: jest.fn(),
+    isDrawerExpanded: false,
   };
 
   const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (

workspaces/frontend/src/app/hooks/__tests__/useWorkspaceRowActions.spec.tsx

@@ -30,6 +30,7 @@ export const WorkspaceDetailsActions: React.FC<WorkspaceDetailsActionsProps> = (
           toggle={(toggleRef) => (
             <MenuToggle
               variant="primary"
+              className="workspace-details-action-toggle"
               ref={toggleRef}
               onClick={() => setOpen(!isOpen)}
               isExpanded={isOpen}

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx

@@ -10,6 +10,7 @@ import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/Wor
 import { WorkspaceFormPropertiesVolumes } from '~/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes';
 import { WorkspacekindsImageConfigValue } from '~/generated/data-contracts';
 import { WorkspaceFormProperties } from '~/app/types';
+import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';
 import { WorkspaceFormPropertiesSecrets } from './WorkspaceFormPropertiesSecrets';
 
 interface WorkspaceFormPropertiesSelectionProps {
@@ -36,11 +37,11 @@ const WorkspaceFormPropertiesSelection: React.FunctionComponent<
         <SplitItem isFilled>
           <div className="pf-u-p-lg pf-u-max-width-xl">
             <Form>
-              <FormGroup
+              <ThemeAwareFormGroupWrapper
                 label="Workspace Name"
                 isRequired
                 fieldId="workspace-name"
-                style={{ width: 520 }}
+                className="pf-u-width-520"
               >
                 <TextInput
                   isRequired
@@ -49,7 +50,7 @@ const WorkspaceFormPropertiesSelection: React.FunctionComponent<
                   onChange={(_, value) => onSelect({ ...selectedProperties, workspaceName: value })}
                   id="workspace-name"
                 />
-              </FormGroup>
+              </ThemeAwareFormGroupWrapper>
               <FormGroup fieldId="defer-updates">
                 <Checkbox
                   label="Defer Updates"
@@ -73,10 +74,10 @@ const WorkspaceFormPropertiesSelection: React.FunctionComponent<
                 >
                   {isVolumesExpanded && (
                     <>
-                      <FormGroup
+                      <ThemeAwareFormGroupWrapper
                         label="Home Directory"
                         fieldId="home-directory"
-                        style={{ width: 500 }}
+                        className="pf-u-width-500"
                       >
                         <TextInput
                           value={selectedProperties.homeDirectory}
@@ -87,8 +88,10 @@ const WorkspaceFormPropertiesSelection: React.FunctionComponent<
                             });
                           }}
                           id="home-directory"
+                          type="text"
+                          name="home-directory"
                         />
-                      </FormGroup>
+                      </ThemeAwareFormGroupWrapper>
 
                       <FormGroup fieldId="volumes-table" style={{ marginTop: '1rem' }}>
                         <WorkspaceFormPropertiesVolumes

workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection.tsx

@@ -24,6 +24,7 @@ import {
 } from '@patternfly/react-table/dist/esm/components/Table';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { WorkspacesPodVolumeMount } from '~/generated/data-contracts';
+import ThemeAwareFormGroupWrapper from '~/shared/components/ThemeAwareFormGroupWrapper';
 
 interface WorkspaceFormPropertiesVolumesProps {
   volumes: WorkspacesPodVolumeMount[];
@@ -149,7 +150,7 @@ export const WorkspaceFormPropertiesVolumes: React.FC<WorkspaceFormPropertiesVol
         />
         <ModalBody>
           <Form>
-            <FormGroup label="PVC Name" isRequired fieldId="pvc-name">
+            <ThemeAwareFormGroupWrapper label="PVC Name" isRequired fieldId="pvc-name">
               <TextInput
                 name="pvcName"
                 isRequired
@@ -158,8 +159,8 @@ export const WorkspaceFormPropertiesVolumes: React.FC<WorkspaceFormPropertiesVol
                 onChange={(_, val) => setFormData({ ...formData, pvcName: val })}
                 id="pvc-name"
               />
-            </FormGroup>
-            <FormGroup label="Mount Path" isRequired fieldId="mount-path">
+            </ThemeAwareFormGroupWrapper>
+            <ThemeAwareFormGroupWrapper label="Mount Path" isRequired fieldId="mount-path">
               <TextInput
                 name="mountPath"
                 isRequired
@@ -168,7 +169,7 @@ export const WorkspaceFormPropertiesVolumes: React.FC<WorkspaceFormPropertiesVol
                 onChange={(_, val) => setFormData({ ...formData, mountPath: val })}
                 id="mount-path"
               />
-            </FormGroup>
+            </ThemeAwareFormGroupWrapper>
             <FormGroup fieldId="readonly-access">
               <Switch
                 id="readonly-access-switch"

workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx

@@ -47,47 +47,49 @@ export const WorkspaceConnectAction: React.FunctionComponent<WorkspaceConnectAct
   };
 
   return (
-    <Dropdown
-      isOpen={open}
-      onSelect={onSelect}
-      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle
-          ref={toggleRef}
-          variant="secondary"
-          onClick={onToggleClick}
-          isExpanded={open}
-          isDisabled={workspace.state !== WorkspacesWorkspaceState.WorkspaceStateRunning}
-          splitButtonItems={[
-            <MenuToggleAction
-              id="connect-endpoint-button"
-              key="connect-endpoint-button"
-              onClick={onClickConnect}
-              className="connect-button-no-wrap"
-            >
-              Connect
-            </MenuToggleAction>,
-          ]}
-        />
-      )}
-      ouiaId="BasicDropdown"
-      shouldFocusToggleOnSelect
-    >
-      <DropdownList>
-        {workspace.services.map((service) => {
-          if (!service.httpService) {
-            return null;
-          }
-          return (
-            <DropdownItem
-              value={service.httpService.httpPath}
-              key={`${workspace.name}-${service.httpService.displayName}`}
-            >
-              {service.httpService.displayName}
-            </DropdownItem>
-          );
-        })}
-      </DropdownList>
-    </Dropdown>
+    <div className="workspace-connect-wrapper pf-v6-u-display-inline-block">
+      <Dropdown
+        isOpen={open}
+        onSelect={onSelect}
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            variant="secondary"
+            onClick={onToggleClick}
+            isExpanded={open}
+            isDisabled={workspace.state !== WorkspacesWorkspaceState.WorkspaceStateRunning}
+            splitButtonItems={[
+              <MenuToggleAction
+                id="connect-endpoint-button"
+                key="connect-endpoint-button"
+                onClick={onClickConnect}
+                className="connect-button-no-wrap"
+              >
+                Connect
+              </MenuToggleAction>,
+            ]}
+          />
+        )}
+        ouiaId="BasicDropdown"
+        shouldFocusToggleOnSelect
+      >
+        <DropdownList>
+          {workspace.services.map((service) => {
+            if (!service.httpService) {
+              return null;
+            }
+            return (
+              <DropdownItem
+                value={service.httpService.httpPath}
+                key={`${workspace.name}-${service.httpService.displayName}`}
+              >
+                {service.httpService.displayName}
+              </DropdownItem>
+            );
+          })}
+        </DropdownList>
+      </Dropdown>
+    </div>
   );
 };