switch workspace if url segment changes

src/components/ApplicationDetails/WorkspaceSwitcher.tsx

@@ -5,7 +5,7 @@ import { ContextMenuItem, ContextSwitcher } from '../ContextSwitcher';
 
 export const WorkspaceSwitcher: React.FC<{ selectedWorkspace?: string }> = () => {
   const navigate = useNavigate();
-  const { workspace, setWorkspace, workspaces } = React.useContext(WorkspaceContext);
+  const { workspace, workspaces } = React.useContext(WorkspaceContext);
 
   const menuItems = React.useMemo(
     () => workspaces?.map((app) => ({ key: app.metadata.name, name: app.metadata.name })) || [],
@@ -15,7 +15,6 @@ export const WorkspaceSwitcher: React.FC<{ selectedWorkspace?: string }> = () =>
 
   const onSelect = (item: ContextMenuItem) => {
     navigate(`/application-pipeline/workspaces/${item.name}/applications`);
-    setWorkspace(item.name);
   };
 
   return workspaces.length > 0 ? (

src/types/workspace.ts

@@ -2,7 +2,7 @@ import { K8sResourceCommon } from '@openshift/dynamic-plugin-sdk-utils';
 
 export interface Workspace extends K8sResourceCommon {
   status: {
-    type: string;
+    type?: string;
     namespaces: Namespace[];
     owner: string;
     role: string;

src/utils/__tests__/workspace-context-utils.spec.ts

@@ -208,4 +208,18 @@ describe('useActiveWorkspace', () => {
       );
     });
   });
+
+  it('should update workspace if url segment changes', async () => {
+    k8sListResourceItemsMock.mockReturnValue(mockWorkspaces);
+    window.location.pathname = '/application-pipeline/workspaces/workspace-one/applications';
+    const { result, waitForNextUpdate, rerender } = renderHook(() => useActiveWorkspace());
+    await waitForNextUpdate();
+
+    expect(result.current.workspace).toBe('workspace-one');
+
+    window.location.pathname = '/application-pipeline/workspaces/workspace-two/applications';
+    rerender();
+
+    expect(result.current.workspace).toBe('workspace-two');
+  });
 });

src/utils/workspace-context-utils.ts

@@ -35,21 +35,25 @@ export const useWorkspaceInfo = () => {
   const { namespace, workspace } = React.useContext(WorkspaceContext);
   return { namespace, workspace };
 };
-export const getHomeWorkspace = (workspaces) => workspaces?.find((w) => w?.status?.type === 'home');
+export const getHomeWorkspace = (workspaces: Workspace[]) =>
+  workspaces?.find((w) => w?.status?.type === 'home');
 
 export const useActiveWorkspace = (): WorkspaceContextData => {
   const lastUsedWorkspace = useLastUsedWorkspace();
   const navigate = useNavigate();
   const [, workspaceFromUrl = ''] = window.location.pathname.match(workspacePathMatcher) || [];
   const [workspace, setWorkspace] = React.useState<string>(getActiveWorkspace);
   const [namespace, setNamespace] = React.useState<string>('');
-  const [workspaces, setWorkspaces] = React.useState<any>([]);
+  const [workspaces, setWorkspaces] = React.useState<Workspace[]>([]);
   const [workspacesLoaded, setWorkspacesLoaded] = React.useState<boolean>(false);
 
-  const getDefaultNsForWorkspace = React.useCallback((allWorkspaces, currentWorkspace) => {
-    const obj = allWorkspaces?.find((w) => w.metadata.name === currentWorkspace);
-    return obj?.status?.namespaces.find((n) => n.type === 'default');
-  }, []);
+  const getDefaultNsForWorkspace = React.useCallback(
+    (allWorkspaces: Workspace[], currentWorkspace: string) => {
+      const obj = allWorkspaces?.find((w) => w.metadata.name === currentWorkspace);
+      return obj?.status?.namespaces.find((n) => n.type === 'default');
+    },
+    [],
+  );
 
   React.useEffect(() => {
     if (workspace && workspaces?.length > 0) {
@@ -61,13 +65,24 @@ export const useActiveWorkspace = (): WorkspaceContextData => {
     }
   }, [getDefaultNsForWorkspace, setNamespace, workspace, workspaces]);
 
+  // switch workspace if URL segment has changed
+  React.useEffect(() => {
+    if (
+      workspace &&
+      workspaceFromUrl &&
+      workspaceFromUrl !== workspace &&
+      workspaces.some((w) => w.metadata.name === workspaceFromUrl)
+    ) {
+      setWorkspace(workspaceFromUrl);
+    }
+  }, [workspace, workspaceFromUrl, workspaces]);
+
   React.useEffect(() => {
     let unmounted = false;
     const fetchWorkspaces = async () => {
-      let allWorkspaces = [];
+      let allWorkspaces: Workspace[] = [];
       try {
-        setActiveWorkspace(''); // to fetch root level workspaces
-        allWorkspaces = await k8sListResourceItems({
+        allWorkspaces = await k8sListResourceItems<Workspace>({
           model: WorkspaceModel,
         });
       } catch (e) {
@@ -79,6 +94,8 @@ export const useActiveWorkspace = (): WorkspaceContextData => {
         return;
       }
 
+      setActiveWorkspace(''); // to fetch root level workspaces
+
       let ws: string;
       if (Array.isArray(allWorkspaces)) {
         const workspaceNames = allWorkspaces.map((dataResource) => dataResource.metadata.name);