feat(ws): prepare frontend for Edit Workspace (#370)

* Add action to Edit workspace button

Signed-off-by: Guilherme Caponetto <[email protected]>

* Rename WorkspaceCreate* -> WorkspaceForm*

Signed-off-by: Guilherme Caponetto <[email protected]>

* Enable type-safe navigation

Signed-off-by: Guilherme Caponetto <[email protected]>

* Fix some a11y warnings in the console

Signed-off-by: Guilherme Caponetto <[email protected]>

* Prepare submit code for Workspace update

Signed-off-by: Guilherme Caponetto <[email protected]>

* Final adjustments

Signed-off-by: Guilherme Caponetto <[email protected]>

* Remove edit action while it is not fully supported

Signed-off-by: Guilherme Caponetto <[email protected]>

---------

Signed-off-by: Guilherme Caponetto <[email protected]>

Author: caponetto

workspaces/frontend/src/app/AppRoutes.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Route, Routes } from 'react-router-dom';
+import { AppRoutePaths } from '~/app/routes';
+import { WorkspaceForm } from '~/app/pages/Workspaces/Form/WorkspaceForm';
 import { NotFound } from './pages/notFound/NotFound';
 import { Debug } from './pages/Debug/Debug';
 import { Workspaces } from './pages/Workspaces/Workspaces';
-import { WorkspaceCreation } from './pages/Workspaces/Creation/WorkspaceCreation';
 import '~/shared/style/MUI-theme.scss';
 import { WorkspaceKinds } from './pages/WorkspaceKinds/WorkspaceKinds';
 
@@ -41,15 +42,15 @@ export const useAdminDebugSettings = (): NavDataItem[] => {
     },
     {
       label: 'Workspace Kinds',
-      path: '/workspacekinds',
+      path: AppRoutePaths.workspaceKinds,
     },
   ];
 };
 
 export const useNavData = (): NavDataItem[] => [
   {
     label: 'Notebooks',
-    path: '/workspaces',
+    path: AppRoutePaths.workspaces,
   },
   ...useAdminDebugSettings(),
 ];
@@ -59,9 +60,10 @@ const AppRoutes: React.FC = () => {
 
   return (
     <Routes>
-      <Route path="/workspaces/create" element={<WorkspaceCreation />} />
-      <Route path="/workspacekinds" element={<WorkspaceKinds />} />
-      <Route path="/workspaces" element={<Workspaces />} />
+      <Route path={AppRoutePaths.workspaceCreate} element={<WorkspaceForm />} />
+      <Route path={AppRoutePaths.workspaceEdit} element={<WorkspaceForm />} />
+      <Route path={AppRoutePaths.workspaces} element={<Workspaces />} />
+      <Route path={AppRoutePaths.workspaceKinds} element={<WorkspaceKinds />} />
       <Route path="/" element={<Workspaces />} />
       <Route path="*" element={<NotFound />} />
       {

workspaces/frontend/src/app/error/ErrorBoundary.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 import { Button, Split, SplitItem, Title } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
+import { AppRoutePaths } from '~/app/routes';
 import ErrorDetails from '~/app/error/ErrorDetails';
 import UpdateState from '~/app/error/UpdateState';
 
@@ -57,7 +59,11 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
                 An error occurred
               </Title>
               <p className="pf-v6-u-mb-md">
-                Try{' '}
+                Try going back to the{' '}
+                <Link reloadDocument to={AppRoutePaths.root}>
+                  HOME PAGE
+                </Link>{' '}
+                or{' '}
                 <Button
                   data-testid="reload-link"
                   variant="link"
@@ -66,7 +72,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
                 >
                   reloading
                 </Button>{' '}
-                the page if there was a recent update.
+                this page if there was a recent update.
               </p>
             </SplitItem>
             <SplitItem>

workspaces/frontend/src/app/hooks/useCurrentRouteKey.ts

@@ -0,0 +1,18 @@
+import { useLocation, matchPath } from 'react-router-dom';
+import { AppRouteKey, AppRoutePaths } from '~/app/routes';
+
+export function useCurrentRouteKey(): AppRouteKey | undefined {
+  const location = useLocation();
+  const { pathname } = location;
+
+  const matchEntries = Object.entries(AppRoutePaths) as [AppRouteKey, string][];
+
+  for (const [routeKey, pattern] of matchEntries) {
+    const match = matchPath({ path: pattern, end: true }, pathname);
+    if (match) {
+      return routeKey;
+    }
+  }
+
+  return undefined;
+}

workspaces/frontend/src/app/hooks/useGenericObjectState.ts

@@ -9,6 +9,7 @@ export type GenericObjectState<T> = [
   data: T,
   setData: UpdateObjectAtPropAndValue<T>,
   resetDefault: () => void,
+  replace: (newValue: T) => void,
 ];
 
 const useGenericObjectState = <T>(defaultData: T | (() => T)): GenericObjectState<T> => {
@@ -28,7 +29,11 @@ const useGenericObjectState = <T>(defaultData: T | (() => T)): GenericObjectStat
     setValue(defaultDataRef.current);
   }, []);
 
-  return [value, setPropValue, resetToDefault];
+  const replace = React.useCallback((newValue: T) => {
+    setValue(newValue);
+  }, []);
+
+  return [value, setPropValue, resetToDefault, replace];
 };
 
 export default useGenericObjectState;

workspaces/frontend/src/app/hooks/useWorkspaceFormData.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
+import { WorkspaceFormData } from '~/app/types';
+import useFetchState, {
+  FetchState,
+  FetchStateCallbackPromise,
+} from '~/shared/utilities/useFetchState';
+
+const EMPTY_FORM_DATA: WorkspaceFormData = {
+  kind: undefined,
+  image: undefined,
+  podConfig: undefined,
+  properties: {
+    deferUpdates: false,
+    homeDirectory: '',
+    volumes: [],
+    secrets: [],
+    workspaceName: '',
+  },
+};
+
+const useWorkspaceFormData = (args: {
+  namespace: string | undefined;
+  workspaceName: string | undefined;
+}): FetchState<WorkspaceFormData> => {
+  const { api, apiAvailable } = useNotebookAPI();
+
+  const call = React.useCallback<FetchStateCallbackPromise<WorkspaceFormData>>(
+    async (opts) => {
+      if (!apiAvailable) {
+        throw new Error('API not yet available');
+      }
+
+      if (!args.namespace || !args.workspaceName) {
+        return EMPTY_FORM_DATA;
+      }
+
+      const workspace = await api.getWorkspace(opts, args.namespace, args.workspaceName);
+      const workspaceKind = await api.getWorkspaceKind(opts, workspace.workspaceKind.name);
+      const imageConfig = workspace.podTemplate.options.imageConfig.current;
+      const podConfig = workspace.podTemplate.options.podConfig.current;
+
+      return {
+        kind: workspaceKind,
+        image: {
+          id: imageConfig.id,
+          displayName: imageConfig.displayName,
+          description: imageConfig.description,
+          hidden: false,
+          labels: [],
+        },
+        podConfig: {
+          id: podConfig.id,
+          displayName: podConfig.displayName,
+          description: podConfig.description,
+          hidden: false,
+          labels: [],
+        },
+        properties: {
+          workspaceName: workspace.name,
+          deferUpdates: workspace.deferUpdates,
+          volumes: workspace.podTemplate.volumes.data.map((volume) => ({ ...volume })),
+          secrets: workspace.podTemplate.volumes.secrets?.map((secret) => ({ ...secret })) ?? [],
+          homeDirectory: workspace.podTemplate.volumes.home?.mountPath ?? '',
+        },
+      };
+    },
+    [api, apiAvailable, args.namespace, args.workspaceName],
+  );
+
+  return useFetchState(call, EMPTY_FORM_DATA);
+};
+
+export default useWorkspaceFormData;

workspaces/frontend/src/app/hooks/useWorkspaceFormLocationData.ts

@@ -0,0 +1,59 @@
+import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
+import { useCurrentRouteKey } from '~/app/hooks/useCurrentRouteKey';
+import { useTypedLocation } from '~/app/routerHelper';
+import { AppRouteKey, RouteStateMap } from '~/app/routes';
+
+type WorkspaceFormLocationState = RouteStateMap['workspaceEdit'] | RouteStateMap['workspaceCreate'];
+
+interface WorkspaceFormLocationData {
+  mode: 'edit' | 'create';
+  namespace: string;
+  workspaceName?: string;
+}
+
+function getRouteStateIfMatch<K extends AppRouteKey>(
+  expectedRoute: K,
+  actualRoute: AppRouteKey,
+  state: unknown,
+): Partial<RouteStateMap[K]> | undefined {
+  if (expectedRoute !== actualRoute || typeof state !== 'object' || state === null) {
+    return undefined;
+  }
+
+  return state as Partial<RouteStateMap[K]>;
+}
+
+export function useWorkspaceFormLocationData(): WorkspaceFormLocationData {
+  const { selectedNamespace } = useNamespaceContext();
+  const location = useTypedLocation<'workspaceEdit' | 'workspaceCreate'>();
+  const routeKey = useCurrentRouteKey();
+  const rawState = location.state as WorkspaceFormLocationState | undefined;
+
+  if (routeKey === 'workspaceEdit') {
+    const editState = getRouteStateIfMatch('workspaceEdit', routeKey, rawState);
+    const namespace = editState?.namespace ?? selectedNamespace;
+    const workspaceName = editState?.workspaceName;
+
+    if (!workspaceName) {
+      throw new Error('Workspace name is required for edit mode');
+    }
+
+    return {
+      mode: 'edit',
+      namespace,
+      workspaceName,
+    };
+  }
+
+  if (routeKey === 'workspaceCreate') {
+    const createState = getRouteStateIfMatch('workspaceCreate', routeKey, rawState);
+    const namespace = createState?.namespace ?? selectedNamespace;
+
+    return {
+      mode: 'create',
+      namespace,
+    };
+  }
+
+  throw new Error('Unknown workspace form route');
+}

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

@@ -509,19 +509,21 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
             <Table aria-label="Sortable table" ouiaId="SortableTable">
               <Thead>
                 <Tr>
-                  <Th />
-                  {Object.values(columnNames).map((columnName, index) => (
-                    <Th
-                      key={`${columnName}-col-name`}
-                      sort={
-                        columnName === 'Name' || columnName === 'Status'
-                          ? getSortParams(index)
-                          : undefined
-                      }
-                    >
-                      {columnName}
-                    </Th>
-                  ))}
+                  <Th aria-label="WorkspaceKind Icon" />
+                  {Object.values(columnNames)
+                    .filter((name) => name !== '')
+                    .map((columnName, index) => (
+                      <Th
+                        key={`${columnName}-col-name`}
+                        sort={
+                          columnName === 'Name' || columnName === 'Status'
+                            ? getSortParams(index)
+                            : undefined
+                        }
+                      >
+                        {columnName}
+                      </Th>
+                    ))}
                   <Th screenReaderText="Primary action" />
                 </Tr>
               </Thead>

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

@@ -21,14 +21,15 @@ import { WorkspaceDetailsPodTemplate } from '~/app/pages/Workspaces/Details/Work
 type WorkspaceDetailsProps = {
   workspace: Workspace;
   onCloseClick: React.MouseEventHandler;
-  onEditClick: React.MouseEventHandler;
+  // TODO: Uncomment when edit action is fully supported
+  // onEditClick: React.MouseEventHandler;
   onDeleteClick: React.MouseEventHandler;
 };
 
 export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> = ({
   workspace,
   onCloseClick,
-  onEditClick,
+  // onEditClick,
   onDeleteClick,
 }) => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
@@ -44,7 +45,7 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
     <DrawerPanelContent data-testid="workspaceDetails">
       <DrawerHead>
         <Title headingLevel="h6">{workspace.name}</Title>
-        <WorkspaceDetailsActions onEditClick={onEditClick} onDeleteClick={onDeleteClick} />
+        <WorkspaceDetailsActions /*onEditClick={onEditClick}*/ onDeleteClick={onDeleteClick} />
         <DrawerActions>
           <DrawerCloseButton onClick={onCloseClick} />
         </DrawerActions>

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

@@ -9,12 +9,13 @@ import {
 } from '@patternfly/react-core';
 
 interface WorkspaceDetailsActionsProps {
-  onEditClick: React.MouseEventHandler;
+  // TODO: Uncomment when edit action is fully supported
+  // onEditClick: React.MouseEventHandler;
   onDeleteClick: React.MouseEventHandler;
 }
 
 export const WorkspaceDetailsActions: React.FC<WorkspaceDetailsActionsProps> = ({
-  onEditClick,
+  // onEditClick,
   onDeleteClick,
 }) => {
   const [isOpen, setOpen] = React.useState(false);
@@ -41,14 +42,15 @@ export const WorkspaceDetailsActions: React.FC<WorkspaceDetailsActionsProps> = (
           )}
         >
           <DropdownList>
-            <DropdownItem
+            {/* TODO: Uncomment when edit action is fully supported */}
+            {/* <DropdownItem
               id="workspace-details-action-edit-button"
               aria-label="Edit workspace"
               key="edit-workspace-button"
               onClick={onEditClick}
             >
               Edit
-            </DropdownItem>
+            </DropdownItem> */}
             <DropdownItem
               id="workspace-details-action-delete-button"
               aria-label="Delete workspace"