CONSOLE-3735: React router migration

dynamic-demo-plugin/src/components/Nav.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
 import { HorizontalNav } from '@openshift-console/dynamic-plugin-sdk';
 
 const Thor: React.FC = () => (
@@ -14,7 +13,7 @@ const Loki: React.FC = () => (
   </div>
 );
 
-const Asgard: React.FC<RouteComponentProps> = () => {
+const Asgard: React.FC = () => {
   const pages = [
     {
       href: '',

dynamic-demo-plugin/src/components/ProjectOverview/Inventory.tsx

@@ -1,45 +1,50 @@
 import * as React from 'react';
 import {
-    K8sResourceCommon,
-    useK8sWatchResource,
-    InventoryItem,
-    InventoryItemTitle,
-    InventoryItemLoading,
-  } from '@openshift-console/dynamic-plugin-sdk';
+  K8sResourceCommon,
+  useK8sWatchResource,
+  InventoryItem,
+  InventoryItemTitle,
+  InventoryItemLoading,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
-const getCronJobsLink = (namespace: string) =>  `/k8s/ns/${namespace}/cronjobs`;
+const getCronJobsLink = (namespace: string) => `/k8s/ns/${namespace}/cronjobs`;
 
 type ProjectInventoryItemProps = {
   projectName: string;
-}
+};
 
 const ProjectInventoryItem = ({ projectName }: ProjectInventoryItemProps) => {
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const { t } = useTranslation('plugin__console-demo-plugin');
   const [cronjobs, loaded, loadError] = useK8sWatchResource<K8sResourceCommon[]>({
     groupVersionKind: {
       group: 'batch',
       version: 'v1',
-      kind: 'CronJob'
+      kind: 'CronJob',
     },
     namespace: projectName,
-    isList: true
+    isList: true,
   });
 
   const cronJobsLink = getCronJobsLink(projectName);
   let title = <Link to={cronJobsLink}>{t('{{count}} Cron Job', { count: cronjobs.length })}</Link>;
   if (loadError) {
     title = <Link to={cronJobsLink}>{t('Cron Jobs')}</Link>;
   } else if (!loaded) {
-    title = <><InventoryItemLoading /><Link to={cronJobsLink}>{t('Cron Jobs')}</Link></>;
+    title = (
+      <>
+        <InventoryItemLoading />
+        <Link to={cronJobsLink}>{t('Cron Jobs')}</Link>
+      </>
+    );
   }
 
   return (
     <InventoryItem>
       <InventoryItemTitle>{title}</InventoryItemTitle>
     </InventoryItem>
   );
-}
+};
 
 export default ProjectInventoryItem;

dynamic-demo-plugin/src/components/ProjectTabExtensionContent.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
 import { PageSection } from '@patternfly/react-core';
 
-const ProjectTabExtensionContent: React.FC<RouteComponentProps> = () => {
+const ProjectTabExtensionContent: React.FC = () => {
   return <PageSection>This is the demo plugin addition for the project model.</PageSection>;
 };
 

frontend/__tests__/actions/ui.spec.ts

@@ -4,7 +4,6 @@ import { formatNamespacedRouteForResource } from '@console/shared/src/utils/name
 import '../../__mocks__/localStorage';
 import store from '../../public/redux';
 import * as UIActions from '../../public/actions/ui';
-import * as router from '../../public/components/utils/router';
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 
 const setActiveNamespace = (ns) => store.dispatch(UIActions.setActiveNamespace(ns));
@@ -79,12 +78,7 @@ describe('ui-actions', () => {
       expect(getActiveNamespace(store.getState())).toEqual('dessert-topping');
     });
 
-    it('should redirect to list view if current path is "new" and setting to "all-namespaces"', () => {
-      const spy = spyOn(router.history, 'push');
-      window.location.pathname = '/k8s/ns/floorwax/pods/~new';
-      setActiveNamespace(ALL_NAMESPACES_KEY);
-      expect(spy.calls.argsFor(0)[0]).toEqual('/k8s/all-namespaces/pods');
-    });
+    // removed 'should redirect to list view if current path is "new" and setting to "all-namespaces"' test because setActiveNamespace no longer navigates
   });
 
   describe('getNamespacedRoute', () => {

frontend/__tests__/components/cluster-settings.spec.tsx

@@ -61,10 +61,9 @@ jest.mock('@console/shared/src/hooks/useCanClusterUpgrade', () => ({
 
 describe('Cluster Settings page', () => {
   let wrapper: ShallowWrapper<any>;
-  const match = { url: '/settings/cluster', params: {}, isExact: true, path: '/settings/cluster' };
 
   beforeEach(() => {
-    wrapper = shallow(<ClusterSettingsPage match={match} />);
+    wrapper = shallow(<ClusterSettingsPage />);
     (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true]);
   });
 

frontend/__tests__/components/cluster-settings/basicauth-idp-form.spec.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Button } from '@patternfly/react-core';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { ButtonBar } from '../../../public/components/utils';
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
@@ -10,16 +12,22 @@ import {
   DroppableFileInput as BasicDroppableInput,
 } from '../../../public/components/cluster-settings/basicauth-idp-form';
 
-export const controlButtonTest = (wrapper: ShallowWrapper) => {
+export const controlButtonTest = (wrapper) => {
   expect(wrapper.find(ButtonBar).exists()).toBe(true);
-  expect(wrapper.find(Button).at(0).childAt(0).text()).toEqual('Add');
-  expect(wrapper.find(Button).at(1).childAt(0).text()).toEqual('Cancel');
+  expect(wrapper.find('Button[type="submit"]').at(0).text()).toEqual('Add');
+  expect(wrapper.find('Button[variant="secondary"]').at(0).text()).toEqual('Cancel');
 };
 
 describe('Add Identity Provider: BasicAuthentication', () => {
-  let wrapper: ShallowWrapper<any>;
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddBasicAuthPage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddBasicAuthPage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddBasicAuthPage component', () => {

frontend/__tests__/components/cluster-settings/github-idp-form.spec.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { ListInput } from '../../../public/components/utils';
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
@@ -8,10 +11,15 @@ import { AddGitHubPage } from '../../../public/components/cluster-settings/githu
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: GitHub', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddGitHubPage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddGitHubPage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddGitHubPage component', () => {

frontend/__tests__/components/cluster-settings/gitlab-idp-form.spec.tsx

@@ -1,16 +1,24 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
 import { IDPCAFileInput } from '../../../public/components/cluster-settings/idp-cafile-input';
 import { AddGitLabPage } from '../../../public/components/cluster-settings/gitlab-idp-form';
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: GitLab', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddGitLabPage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddGitLabPage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddGitLabPage component', () => {

frontend/__tests__/components/cluster-settings/google-idp-form.spec.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
 import { AddGooglePage } from '../../../public/components/cluster-settings/google-idp-form';
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: Google', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddGooglePage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddGooglePage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddGooglePage component', () => {

frontend/__tests__/components/cluster-settings/htpasswd-idp-form.spec.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
 import {
@@ -9,10 +12,15 @@ import {
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: HTPasswd', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddHTPasswdPage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddHTPasswdPage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddHTPasswdPage component', () => {

frontend/__tests__/components/cluster-settings/keystone-idp-form.spec.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
 import { IDPCAFileInput } from '../../../public/components/cluster-settings/idp-cafile-input';
@@ -10,10 +13,15 @@ import {
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: Keystone', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddKeystonePage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddKeystonePage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddKeystonePage component', () => {

frontend/__tests__/components/cluster-settings/ldap-idp-form.spec.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { ListInput } from '../../../public/components/utils';
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
@@ -8,10 +11,15 @@ import { AddLDAPPage } from '../../../public/components/cluster-settings/ldap-id
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: LDAP', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddLDAPPage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddLDAPPage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddLDAPPage component', () => {

frontend/__tests__/components/cluster-settings/openid-idp-form.spec.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { ListInput } from '../../../public/components/utils';
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
@@ -8,10 +11,15 @@ import { AddOpenIDIDPPage } from '../../../public/components/cluster-settings/op
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: OpenID Connect', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddOpenIDIDPPage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddOpenIDIDPPage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddOpenIDIDPPage component', () => {

frontend/__tests__/components/cluster-settings/request-header-idp-form.spec.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
+import store from '@console/internal/redux';
 
 import { ListInput } from '../../../public/components/utils';
 import { IDPNameInput } from '../../../public/components/cluster-settings/idp-name-input';
@@ -8,10 +11,15 @@ import { AddRequestHeaderPage } from '../../../public/components/cluster-setting
 import { controlButtonTest } from './basicauth-idp-form.spec';
 
 describe('Add Identity Provider: Request Header', () => {
-  let wrapper: ShallowWrapper<any>;
-
+  let wrapper;
   beforeEach(() => {
-    wrapper = shallow(<AddRequestHeaderPage />);
+    wrapper = mount(
+      <Provider store={store}>
+        <BrowserRouter>
+          <AddRequestHeaderPage />
+        </BrowserRouter>
+      </Provider>,
+    );
   });
 
   it('should render AddRequestHeaderPage component', () => {