feat: add detailed view to Workspaces (#1682)

package.json

@@ -14,7 +14,7 @@
     "@data-driven-forms/react-form-renderer": "^3.22.4",
     "@formatjs/cli": "6.2.2",
     "@patternfly/quickstarts": "^5.1.0",
-    "@patternfly/react-component-groups": "^5.4.0-prerelease.2",
+    "@patternfly/react-component-groups": "^5.5.4",
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-data-view": "^5.2.0",
     "@patternfly/react-icons": "^5.1.1",

src/Messages.js

@@ -968,6 +968,46 @@ export default defineMessages({
     description: 'learn more link',
     defaultMessage: 'Learn more about workspaces',
   },
+  workspacesActionEditWorkspace: {
+    id: 'workspacesActionEditWorkspace',
+    description: 'Menu item Edit workspace',
+    defaultMessage: 'Edit workspace',
+  },
+  workspacesActionGrantAccessToWorkspace: {
+    id: 'workspacesActionGrantAccessToWorkspace',
+    description: 'Menu item Grant access to workspace',
+    defaultMessage: 'Grant access to workspace',
+  },
+  workspacesActionCreateSubWorkspace: {
+    id: 'workspacesActionCreateSubWorkspace',
+    description: 'Menu item Create sub-workspace',
+    defaultMessage: 'Create sub-workspace',
+  },
+  workspacesActionViewTenant: {
+    id: 'workspacesActionViewTenant',
+    description: 'Menu item View tenant',
+    defaultMessage: 'View tenant',
+  },
+  workspacesActionManageIntegrations: {
+    id: 'workspacesActionManageIntegrations',
+    description: 'Menu item Manage integrations',
+    defaultMessage: 'Manage integrations',
+  },
+  workspacesActionManageNotifications: {
+    id: 'workspacesActionManageNotifications',
+    description: 'Menu item Manage notifications',
+    defaultMessage: 'Manage notifications',
+  },
+  workspacesActionDeleteWorkspace: {
+    id: 'workspacesActionDeleteWorkspace',
+    description: 'Menu item Delete workspace',
+    defaultMessage: 'Delete workspace',
+  },
+  workspacesDetailBreadcrumbTitle: {
+    id: 'workspacesDetailBreadcrumbTitle',
+    description: 'Workspace detail breadcrumb title',
+    defaultMessage: 'Workspace hierarchy: ',
+  },
   viewGroupsBtn: {
     id: 'viewGroupsBtn',
     description: 'View groups button',

src/Routing.tsx

@@ -11,7 +11,8 @@ import { useFlag } from '@unleash/proxy-client-react';
 const Overview = lazy(() => import('./smart-components/overview/overview'));
 
 const WorkspacesOverview = lazy(() => import('./smart-components/workspaces/overview/about-access-tab'));
-const Workspaces = lazy(() => import('./smart-components/workspaces/workspaces'));
+const WorkspaceList = lazy(() => import('./smart-components/workspaces/WorkspaceList'));
+const WorkspaceDetail = lazy(() => import('./smart-components/workspaces/WorkspaceDetail'));
 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,7 +55,11 @@ const getRoutes = ({ enableServiceAccounts, isITLess, isWorkspacesFlag }: Record
   },
   {
     path: pathnames.workspaces.path,
-    element: Workspaces,
+    element: WorkspaceList,
+  },
+  {
+    path: pathnames['workspace-detail'].path,
+    element: WorkspaceDetail,
   },
   {
     path: pathnames['user-detail'].path,

src/helpers/workspaces/api.js

@@ -6,7 +6,6 @@ import listWorkspaces from '@redhat-cloud-services/rbac-client/dist/v2/Workspace
 import createWorkspace from '@redhat-cloud-services/rbac-client/dist/v2/WorkspacesCreate';
 import updateWorkspace from '@redhat-cloud-services/rbac-client/dist/v2/WorkspacesPatch';
 import deleteWorkspace from '@redhat-cloud-services/rbac-client/dist/v2/WorkspacesDelete';
-// import listWorkspaces from '@redhat-cloud-services/rbac-client/dist/v2/WorkspacesList';
 import { APIFactory } from '@redhat-cloud-services/javascript-clients-shared';
 
 import { RBAC_API_BASE_2 } from '../../utilities/constants';

src/helpers/workspaces/workspaces-helper.ts

@@ -5,3 +5,7 @@ const workspacesApi = getWorkspacesApi();
 export async function getWorkspaces() {
   return await workspacesApi.listWorkspaces();
 }
+
+export async function getWorkspace(ws: string) {
+  return await workspacesApi.getWorkspace({ id: ws });
+}

src/redux/action-types.js

@@ -69,3 +69,4 @@ export const RESET_EXPAND_SPLATS = 'RESET_EXPAND_SPLATS';
 export const API_ERROR = 'API_ERROR';
 
 export const FETCH_WORKSPACES = 'FETCH_WORKSPACES';
+export const FETCH_WORKSPACE = 'FETCH_WORKSPACE';

src/redux/actions/workspaces-actions.ts

@@ -3,7 +3,10 @@ import * as WorkspacesHelper from '../../helpers/workspaces/workspaces-helper';
 
 export const fetchWorkspaces = () => ({
   type: ActionTypes.FETCH_WORKSPACES,
-  payload: WorkspacesHelper.getWorkspaces().catch((err) => {
-    throw err;
-  }),
+  payload: WorkspacesHelper.getWorkspaces(),
+});
+
+export const fetchWorkspace = (ws: string) => ({
+  type: ActionTypes.FETCH_WORKSPACE,
+  payload: WorkspacesHelper.getWorkspace(ws),
 });

src/redux/reducers/workspaces-reducer.ts

@@ -1,4 +1,4 @@
-import { FETCH_WORKSPACES } from '../action-types';
+import { FETCH_WORKSPACES, FETCH_WORKSPACE } from '../action-types';
 
 export interface Workspace {
   id: string;
@@ -11,23 +11,35 @@ export interface WorkspacesStore {
   isLoading: boolean;
   workspaces: Workspace[];
   error: string;
+  selectedWorkspace: Workspace;
 }
 
 export const workspacesInitialState = {
   isLoading: false,
   workspaces: [],
   error: '',
+  selectedWorkspace: undefined,
 };
 
 const setLoadingState = (state: WorkspacesStore) => ({ ...state, isLoading: true });
 
+const setLoadingDetailState = (state: WorkspacesStore) => ({ ...state, isLoading: true });
+
 const setWorkspaces = (state: WorkspacesStore, { payload }: { payload: { data: Workspace } }) => ({
   ...state,
   workspaces: payload.data,
   isLoading: false,
 });
 
+const setWorkspace = (state: WorkspacesStore, { payload }: { payload: { data: Workspace } }) => ({
+  ...state,
+  selectedWorkspace: payload.data,
+  isLoading: false,
+});
+
 export default {
   [`${FETCH_WORKSPACES}_PENDING`]: setLoadingState,
   [`${FETCH_WORKSPACES}_FULFILLED`]: setWorkspaces,
+  [`${FETCH_WORKSPACE}_PENDING`]: setLoadingDetailState,
+  [`${FETCH_WORKSPACE}_FULFILLED`]: setWorkspace,
 };