fix: re-add openshift project query param to avoid conflict with dashboard namespace

Author: PeterYurkovich

web/src/components/dashboards/legacy/legacy-dashboard-page.tsx

@@ -10,32 +10,32 @@ import ErrorAlert from './error';
 import { DashboardSkeletonLegacy } from './dashboard-skeleton-legacy';
 import { useLegacyDashboards } from './useLegacyDashboards';
 import { MonitoringProvider } from '../../../contexts/MonitoringContext';
-import { useMonitoringNamespace } from '../../hooks/useMonitoringNamespace';
 import { useMonitoring } from '../../../hooks/useMonitoring';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { QueryParams } from '../../../components/query-params';
+import { useOpenshiftProject } from './useOpenshiftProject';
 
 type LegacyDashboardsPageProps = {
   urlBoard: string;
 };
 
 const LegacyDashboardsPage_: FC<LegacyDashboardsPageProps> = ({ urlBoard }) => {
-  const { namespace, setNamespace } = useMonitoringNamespace();
+  const { project, setProject } = useOpenshiftProject();
   const {
     legacyDashboardsError,
     legacyRows,
     legacyDashboardsLoading,
     legacyDashboardsMetadata,
     changeLegacyDashboard,
     legacyDashboard,
-  } = useLegacyDashboards(namespace, urlBoard);
+  } = useLegacyDashboards(project, urlBoard);
   const { perspective } = usePerspective();
   const { displayNamespaceSelector } = useMonitoring();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
     <>
-      {displayNamespaceSelector && <NamespaceBar onNamespaceChange={(ns) => setNamespace(ns)} />}
+      {displayNamespaceSelector && <NamespaceBar onNamespaceChange={(ns) => setProject(ns)} />}
       <DashboardSkeletonLegacy
         boardItems={legacyDashboardsMetadata}
         changeBoard={changeLegacyDashboard}

web/src/components/dashboards/legacy/useOpenshiftProject.ts

@@ -0,0 +1,90 @@
+import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+import { useCallback, useEffect } from 'react';
+import { QueryParams } from '../../query-params';
+import { StringParam, useQueryParam } from 'use-query-params';
+import { useDispatch, useSelector } from 'react-redux';
+import { dashboardsPatchVariable } from '../../../store/actions';
+import { MonitoringState } from '../../../store/store';
+import { getObserveState, usePerspective } from '../../hooks/usePerspective';
+import { useMonitoring } from '../../../hooks/useMonitoring';
+import { ALL_NAMESPACES_KEY } from '../../utils';
+import { useParams } from 'react-router';
+
+export const useOpenshiftProject = () => {
+  const { perspective } = usePerspective();
+  const [activeNamespace, setActiveNamespace] = useActiveNamespace();
+  const { ns: routeNamespace } = useParams<{ ns?: string }>();
+  const [openshiftProject, setOpenshiftProject] = useQueryParam(
+    QueryParams.OpenshiftProject,
+    StringParam,
+  );
+  const { plugin } = useMonitoring();
+  const variableNamespace = useSelector(
+    (state: MonitoringState) =>
+      getObserveState(plugin, state).dashboards.variables['namespace']?.value ?? '',
+  );
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (perspective !== 'dev') {
+      // If the URL parameter is set, but the activeNamespace doesn't match it, then
+      // set the activeNamespace to match the URL parameter
+      if (openshiftProject && openshiftProject !== activeNamespace) {
+        setActiveNamespace(openshiftProject);
+        if (variableNamespace !== openshiftProject && openshiftProject !== ALL_NAMESPACES_KEY) {
+          dispatch(
+            dashboardsPatchVariable('namespace', {
+              // Dashboards space variable shouldn't use the ALL_NAMESPACES_KEY
+              value: openshiftProject,
+            }),
+          );
+        }
+        return;
+      }
+      if (!openshiftProject) {
+        setOpenshiftProject(activeNamespace);
+        if (variableNamespace !== activeNamespace && openshiftProject !== ALL_NAMESPACES_KEY) {
+          // Dashboards space variable shouldn't use the ALL_NAMESPACES_KEY
+          dispatch(
+            dashboardsPatchVariable('namespace', {
+              value: activeNamespace,
+            }),
+          );
+        }
+        return;
+      }
+    } else {
+      // perform useMonitoringNamespace when in dev perspective
+      if (routeNamespace && activeNamespace !== routeNamespace) {
+        setActiveNamespace(routeNamespace);
+      }
+    }
+  }, [
+    activeNamespace,
+    setActiveNamespace,
+    openshiftProject,
+    setOpenshiftProject,
+    dispatch,
+    variableNamespace,
+    perspective,
+    routeNamespace,
+  ]);
+
+  const setProject = useCallback(
+    (namespace: string) => {
+      if (perspective === 'dev') {
+        setActiveNamespace(namespace);
+      } else {
+        setActiveNamespace(namespace);
+        setOpenshiftProject(namespace);
+        dispatch(dashboardsPatchVariable('namespace', { value: namespace }));
+      }
+    },
+    [setActiveNamespace, setOpenshiftProject, dispatch, perspective],
+  );
+
+  return {
+    project: openshiftProject,
+    setProject,
+  };
+};