Remove 'react-router-dom-v5-compat' package and use of useActiveNames…

…pace from the sdk

console-extensions.json

@@ -8,11 +8,39 @@
         "kind": "TektonResult"
       },
       "color": "#38812f",
-      "label": "%TektonResult%",
-      "labelPlural": "%TektonResults%",
+      "label": "%plugin__pipeline-console-plugin~TektonResult%",
+      "labelPlural": "%plugin__pipeline-console-plugin~TektonResults%",
       "abbr": "TR"
     }
   },
+  {
+    "type": "console.model-metadata",
+    "properties": {
+      "model": {
+        "group": "tekton.dev",
+        "version": "v1beta1",
+        "kind": "Pipeline"
+      },
+      "color": "#38812f",
+      "label": "%plugin__pipeline-console-plugin~Pipeline%",
+      "labelPlural": "%plugin__pipeline-console-plugin~Pipelines%",
+      "abbr": "PL"
+    }
+  },
+  {
+    "type": "console.model-metadata",
+    "properties": {
+      "model": {
+        "group": "tekton.dev",
+        "version": "v1",
+        "kind": "Pipeline"
+      },
+      "color": "#38812f",
+      "label": "%plugin__pipeline-console-plugin~Pipeline%",
+      "labelPlural": "%plugin__pipeline-console-plugin~Pipelines%",
+      "abbr": "PL"
+    }
+  },
   {
     "type": "console.page/route",
     "properties": {

package.json

@@ -24,8 +24,8 @@
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.15.5",
-    "@openshift-console/dynamic-plugin-sdk": "0.0.21",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.11",
+    "@openshift-console/dynamic-plugin-sdk": "0.0.18",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.9",
     "@patternfly/react-charts": "6.94.19",
     "@patternfly/react-core": "4.276.8",
     "@patternfly/react-table": "4.113.0",
@@ -37,6 +37,7 @@
     "@types/node": "^18.0.0",
     "@types/react": "^17.0.37",
     "@types/react-helmet": "^6.1.4",
+    "@types/react-redux": "6.0.2",
     "@types/react-router-dom": "^5.3.2",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
@@ -66,7 +67,6 @@
     "react-i18next": "^11.7.3",
     "react-router": "5.3.x",
     "react-router-dom": "5.3.x",
-    "react-router-dom-v5-compat": "^6.11.2",
     "resolve-url-loader": "2.x",
     "sass": "^1.42.1",
     "sass-loader": "^10.1.1",
@@ -100,6 +100,9 @@
     "@types/express": "^4.17.18",
     "classnames": "^2.3.2",
     "lodash-es": "^4.17.21",
+    "react-redux": "7.2.2",
+    "redux": "4.0.1",
+    "typesafe-actions": "^4.2.1",
     "victory-core": "^36.6.11"
   }
 }

src/components/hooks/useActiveNamespace.ts

@@ -0,0 +1,43 @@
+import { useLocation } from 'react-router-dom';
+import { ALL_NAMESPACES_KEY } from '../../consts';
+
+const basePathPattern = new RegExp(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  `^/?${(window as any).SERVER_FLAGS.basePath}`,
+);
+const stripBasePath = (path: string): string =>
+  path.replace(basePathPattern, '/');
+export const legalNamePattern = /[a-z0-9](?:[-a-z0-9]*[a-z0-9])?/;
+
+const getNamespace = (path: string): string => {
+  path = stripBasePath(path);
+  const split = path.split('/').filter((x) => x);
+
+  if (split[1] === 'all-namespaces') {
+    return ALL_NAMESPACES_KEY;
+  }
+
+  let ns: string;
+  if (
+    split[1] === 'cluster' &&
+    ['namespaces', 'projects'].includes(split[2]) &&
+    split[3]
+  ) {
+    ns = split[3];
+  } else if (split[1] === 'ns' && split[2]) {
+    ns = split[2];
+  } else {
+    return;
+  }
+
+  const match = ns.match(legalNamePattern);
+  return match && match.length > 0 && match[0];
+};
+
+export const useActiveNamespace = (): [string] => {
+  const { pathname } = useLocation();
+  const activeNamespace = getNamespace(pathname);
+  return [activeNamespace];
+};
+
+export default useActiveNamespace;

src/components/pipelines-metrics/PipelinesMetricsPage.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useParams } from 'react-router-dom-v5-compat';
 import PipelineRunsStatusCard from '../pipelines-overview/PipelineRunsStatusCard';
 import { Flex, FlexItem } from '@patternfly/react-core';
 import PipelinesRunsDurationCard from '../pipelines-overview/PipelineRunsDurationCard';
@@ -11,21 +10,22 @@ import {
 import TimeRangeDropdown from '../pipelines-overview/TimeRangeDropdown';
 import RefreshDropdown from '../pipelines-overview/RefreshDropdown';
 import PipelinesAverageDuration from './PipelinesAverageDuration';
-import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
-import './PipelinesMetrics.scss';
 import {
   IntervalOptions,
   TimeRangeOptions,
   useQueryParams,
 } from '../pipelines-overview/utils';
+import { PipelineKind } from '../../types';
+import './PipelinesMetrics.scss';
 
 type PipelinesMetricsPageProps = {
-  obj: K8sResourceKind;
+  obj: PipelineKind;
 };
 
 const PipelinesMetricsPage: React.FC<PipelinesMetricsPageProps> = ({ obj }) => {
-  const params = useParams();
-  const { ns: namespace, name: parentName } = params;
+  const {
+    metadata: { namespace, name: parentName },
+  } = obj;
   const [timespan, setTimespan] = React.useState(parsePrometheusDuration('1d'));
   const [interval, setInterval] = React.useState(
     parsePrometheusDuration('30s'),

src/components/pipelines-overview/PipelinesOverviewPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { action } from 'typesafe-actions';
 import PipelineRunsStatusCard from './PipelineRunsStatusCard';
 import { Flex, FlexItem } from '@patternfly/react-core';
 import PipelinesRunsDurationCard from './PipelineRunsDurationCard';
@@ -10,21 +11,39 @@ import NameSpaceDropdown from './NamespaceDropdown';
 import PipelineRunsListPage from './list-pages/PipelineRunsListPage';
 import TimeRangeDropdown from './TimeRangeDropdown';
 import RefreshDropdown from './RefreshDropdown';
-import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
-import { IntervalOptions, TimeRangeOptions, useQueryParams } from './utils';
+import {
+  IntervalOptions,
+  TimeRangeOptions,
+  formatNamespaceRoute,
+  useQueryParams,
+} from './utils';
+
+// FIXME upgrading redux types is causing many errors at this time
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { useActiveNamespace } from '../hooks/useActiveNamespace';
 
 const PipelinesOverviewPage: React.FC = () => {
   const { t } = useTranslation('plugin__pipeline-console-plugin');
-  const [activeNamespace, setActiveNamespace] = useActiveNamespace();
-
+  const [activeNamespace] = useActiveNamespace();
+  const dispatch = useDispatch();
+  const history = useHistory();
   const [namespace, setNamespace] = React.useState(activeNamespace);
   const [timespan, setTimespan] = React.useState(parsePrometheusDuration('1d'));
   const [interval, setInterval] = React.useState(
     parsePrometheusDuration('30s'),
   );
-
   React.useEffect(() => {
-    setActiveNamespace(namespace);
+    if (namespace !== activeNamespace) {
+      dispatch(action('setActiveNamespace', { namespace }));
+      const oldPath = window.location.pathname;
+      const newPath = formatNamespaceRoute(namespace, oldPath, window.location);
+      if (newPath !== oldPath) {
+        history.push(newPath);
+      }
+    }
   }, [namespace]);
 
   useQueryParams({

src/components/pipelines-overview/__tests__/PipelinesOverview.spec.tsx

@@ -1,24 +1,29 @@
 import * as React from 'react';
+// FIXME upgrading redux types is causing many errors at this time
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import * as redux from 'react-redux';
 import { render, screen, waitFor } from '@testing-library/react';
 import {
   VirtualizedTable,
-  useActiveNamespace,
   useK8sWatchResource,
   useActiveColumns,
 } from '@openshift-console/dynamic-plugin-sdk';
 import PipelinesOverviewPage from '../PipelinesOverviewPage';
 import { getResultsSummary } from '../../utils/summary-api';
 import * as utils from '../utils';
+import * as namespaceHooks from '../../hooks/useActiveNamespace';
 
 const virtualizedTableRenderProps = jest.fn();
-const setActiveNamespace = jest.fn();
 jest.mock('@openshift-console/dynamic-plugin-sdk', () => ({
-  useActiveNamespace: jest.fn(),
   useK8sWatchResource: jest.fn(),
   useActiveColumns: jest.fn(),
   VirtualizedTable: jest.fn(),
   k8sGet: jest.fn(),
 }));
+jest.mock('../../hooks/useActiveNamespace', () => ({
+  useActiveNamespace: jest.fn(),
+}));
 jest.mock('../../utils/tekton-results', () => ({
   createTektonResultsSummaryUrl: jest.fn(),
 }));
@@ -31,20 +36,29 @@ jest.mock('../../utils/summary-api', () => ({
 });
 
 jest.spyOn(utils, 'useQueryParams').mockReturnValue(null);
+jest.spyOn(namespaceHooks, 'useActiveNamespace').mockReturnValue(['active']);
+// FIXME upgrading redux types is causing many errors at this time
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+jest.spyOn(redux, 'useDispatch').mockReturnValue(() => {});
+const mockHistoryPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+jest.spyOn(namespaceHooks, 'useActiveNamespace').mockReturnValue(['active']);
 
 const virtualizedTableMock = VirtualizedTable as jest.Mock;
-const useActiveNamespaceMock = useActiveNamespace as jest.Mock;
 const useK8sWatchResourceMock = useK8sWatchResource as jest.Mock;
 const useActiveColumnsMock = useActiveColumns as jest.Mock;
 const getResultsSummaryMock = getResultsSummary as jest.Mock;
 
 describe('Pipeline Overview page', () => {
   beforeEach(() => {
     virtualizedTableMock.mockReturnValue(<></>);
-    useActiveNamespaceMock.mockReturnValue([
-      'active-namespace',
-      setActiveNamespace,
-    ]);
     useK8sWatchResourceMock.mockReturnValue([[], true]);
     useActiveColumnsMock.mockReturnValue([[]]);
     getResultsSummaryMock.mockReturnValue(Promise.resolve({}));

src/components/pipelines-overview/list-pages/PipelineRunsForPipelinesRow.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router-dom';
 import {
   SummaryProps,
   getReferenceForModel,
@@ -8,11 +8,12 @@ import {
 import {
   ResourceLink,
   RowProps,
-  useActiveNamespace,
+  getGroupVersionKindForModel,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { formatTime, formatTimeLastRunTime } from '../dateTime';
 import { ALL_NAMESPACES_KEY } from '../../../consts';
 import { PipelineModel } from '../../../models';
+import { useActiveNamespace } from '../../hooks/useActiveNamespace';
 
 const pipelineReference = getReferenceForModel(PipelineModel);
 
@@ -26,7 +27,7 @@ const PipelineRunsForPipelinesRow: React.FC<RowProps<SummaryProps>> = ({
     <>
       <td className={tableColumnClasses[0]}>
         <ResourceLink
-          kind={pipelineReference}
+          groupVersionKind={getGroupVersionKindForModel(PipelineModel)}
           name={name}
           namespace={namespace}
         />

src/components/pipelines-overview/list-pages/PipelineRunsForRepositoriesRow.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
-import {
-  ResourceLink,
-  RowProps,
-  useActiveNamespace,
-} from '@openshift-console/dynamic-plugin-sdk';
+import { Link } from 'react-router-dom';
+import { ResourceLink, RowProps } from '@openshift-console/dynamic-plugin-sdk';
 import {
   SummaryProps,
   getReferenceForModel,
@@ -13,6 +9,7 @@ import {
 import { formatTime, formatTimeLastRunTime } from '../dateTime';
 import { ALL_NAMESPACES_KEY } from '../../../consts';
 import { RepositoryModel } from '../../../models';
+import { useActiveNamespace } from '../../hooks/useActiveNamespace';
 
 const repositoryReference = getReferenceForModel(RepositoryModel);