feat: add detailed view to Workspaces

src/Routing.tsx

@@ -11,6 +11,7 @@ import { useFlag } from '@unleash/proxy-client-react';
 const Overview = lazy(() => import('./smart-components/overview/overview'));
 
 const Workspaces = lazy(() => import('./smart-components/workspaces/workspaces'));
+const WorkspacesDetailedView = lazy(() => import('./smart-components/workspaces/workspacesDetailedView'));
 const Users = lazy(() => import('./smart-components/user/users'));
 const UserDetail = lazy(() => import('./smart-components/user/user'));
 const AddUserToGroup = lazy(() => import('./smart-components/user/add-user-to-group/add-user-to-group'));
@@ -54,6 +55,12 @@ const getRoutes = ({ enableServiceAccounts, isITLess, isWorkspacesFlag }: Record
   {
     path: pathnames.workspaces.path,
     element: Workspaces,
+    childRoutes: [
+      {
+        path: pathnames['workspace-detail'].path,
+        element: WorkspacesDetailedView,
+      },
+    ],
   },
   {
     path: pathnames['user-detail'].path,

src/smart-components/workspaces/workspaces.tsx

@@ -8,10 +8,12 @@ import { PageSection } from '@patternfly/react-core';
 import { DataView, DataViewTable, DataViewTh, DataViewTrTree, useDataViewSelection } from '@patternfly/react-data-view';
 import { Workspace } from '../../redux/reducers/workspaces-reducer';
 import { RBACStore } from '../../redux/store';
+import { useNavigate } from 'react-router-dom';
 
 const Workspaces = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
+  const navigate = useNavigate();
   const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
 
   const { isLoading, workspaces, error } = useSelector((state: RBACStore) => state.workspacesReducer);
@@ -56,6 +58,7 @@ const Workspaces = () => {
     workspaces.map((workspace) => ({
       row: [workspace.name, workspace.description],
       id: workspace.id,
+      onClick: () => handleRowClick(workspace.id),
       ...(workspace.children && workspace.children.length > 0
         ? {
             children: buildRows(workspace.children),
@@ -67,6 +70,10 @@ const Workspaces = () => {
 
   const columns: DataViewTh[] = ['Name', 'Description'];
 
+  const handleRowClick = (uuid: string) => {
+    navigate(`/iam/access-management/workspaces/${uuid}`);
+  };
+
   return (
     <React.Fragment>
       <ContentHeader

src/smart-components/workspaces/workspacesDetailedView.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchWorkspaces } from '../../redux/actions/workspaces-actions';
+import messages from '../../Messages';
+import { ContentHeader } from '@patternfly/react-component-groups';
+import { PageSection } from '@patternfly/react-core';
+import { DataView, DataViewTable, DataViewTh, DataViewTrTree, useDataViewSelection } from '@patternfly/react-data-view';
+import { Workspace } from '../../redux/reducers/workspaces-reducer';
+import { RBACStore } from '../../redux/store';
+
+const WorkspacesDetailedView = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
+
+  const { isLoading, workspaces, error } = useSelector((state: RBACStore) => state.workspacesReducer);
+
+  const [hierarchicalWorkspaces, setHierarchicalWorkspaces] = useState<Workspace[]>([]);
+
+  useEffect(() => {
+    dispatch(fetchWorkspaces());
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(fetchWorkspaces());
+  }, [dispatch]);
+
+  const mapWorkspacesToHierarchy = (workspaceData: any[]): Workspace[] => {
+    const workspaceMap: { [key: string]: Workspace } = {};
+
+    workspaceData.forEach((ws) => {
+      workspaceMap[ws.uuid] = {
+        id: ws.uuid,
+        name: ws.name,
+        description: ws.description,
+        children: [],
+      };
+    });
+
+    const hierarchy: Workspace[] = [];
+    workspaceData.forEach((ws) => {
+      if (ws.parent_id) {
+        workspaceMap[ws.parent_id]?.children?.push(workspaceMap[ws.uuid]);
+      } else {
+        hierarchy.push(workspaceMap[ws.uuid]);
+      }
+    });
+
+    return hierarchy;
+  };
+
+  useEffect(() => {
+    if (workspaces.length > 0) {
+      setHierarchicalWorkspaces(mapWorkspacesToHierarchy(workspaces));
+    }
+  }, [workspaces]);
+
+  const buildRows = (workspaces: Workspace[]): DataViewTrTree[] =>
+    workspaces.map((workspace) => ({
+      row: [workspace.name, workspace.description],
+      id: workspace.id,
+      ...(workspace.children && workspace.children.length > 0
+        ? {
+            children: buildRows(workspace.children),
+          }
+        : {}),
+    }));
+
+  const rows: DataViewTrTree[] = buildRows(hierarchicalWorkspaces);
+
+  const columns: DataViewTh[] = ['HIIIRName', 'Description'];
+
+  return (
+    <React.Fragment>
+      <ContentHeader
+        title={intl.formatMessage(messages.workspaces)}
+        subtitle={intl.formatMessage(messages.workspacesSubtitle)}
+        linkProps={{
+          label: intl.formatMessage(messages.workspacesLearnMore),
+          isExternal: true,
+          href: '#', //TODO: URL to be specified by UX team later
+        }}
+      />
+      <PageSection>
+        {isLoading && <p>Loading...</p>}
+        {error && <p>Error: {error}</p>}
+        {!isLoading && !error && (
+          <DataView selection={selection}>
+            <DataViewTable isTreeTable aria-label="Repositories table" ouiaId={'ouiaId'} columns={columns} rows={rows} />
+          </DataView>
+        )}
+      </PageSection>
+    </React.Fragment>
+  );
+};
+
+export default WorkspacesDetailedView;

src/utilities/pathnames.js

@@ -13,6 +13,11 @@ const pathnames = {
     path: '/workspaces/*',
     title: 'Workspaces',
   },
+  'workspace-detail': {
+    link: '/workspaces/:uuid',
+    path: '/workspaces/*',
+    title: 'Workspace detail',
+  },
   groups: {
     link: '/groups',
     path: '/groups/*',