chore(ui): Prepare for react router v6 upgrade

ui/apps/platform/package.json

@@ -74,7 +74,6 @@
         "react-responsive": "^9.0.2",
         "react-router-dom": "^5.3.4",
         "react-router-hash-link": "^2.4.3",
-        "react-router-prop-types": "^1.0.5",
         "react-select": "^2.0.0",
         "react-spinners": "^0.10.4",
         "react-table-6": "^6.11.0",

ui/apps/platform/src/Components/PatternFly/ErrorBoundary/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import Raven from 'raven-js';
 
 import ErrorBoundaryPage from './ErrorBoundaryPage';
@@ -58,4 +58,9 @@ class ErrorBoundary extends Component<Props, State> {
     }
 }
 
-export default withRouter(ErrorBoundary);
+function ErrorBoundaryWrapper({ children }: { children: ReactNode }) {
+    const location = useLocation();
+    return <ErrorBoundary location={location.pathname}>{children}</ErrorBoundary>;
+}
+
+export default ErrorBoundaryWrapper;

ui/apps/platform/src/Components/RelatedEntity.js

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import ReactRouterPropTypes from 'react-router-prop-types';
-import { withRouter } from 'react-router-dom';
+import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 
 import Widget from 'Components/Widget';
 import EntityIcon from 'Components/EntityIcon';
@@ -11,16 +10,10 @@ import hexagonal from 'images/side-panel-icons/hexagonal.svg';
 import URLService from 'utils/URLService';
 
 // @TODO We should try to use this component for Compliance as well
-const RelatedEntity = ({
-    match,
-    location,
-    history,
-    name,
-    entityType,
-    entityId,
-    value,
-    ...rest
-}) => {
+const RelatedEntity = ({ name, entityType, entityId, value, ...rest }) => {
+    const history = useHistory();
+    const location = useLocation();
+    const match = useRouteMatch();
     const workflowState = useContext(workflowStateContext);
 
     function onClick() {
@@ -78,9 +71,6 @@ RelatedEntity.propTypes = {
     entityId: PropTypes.string,
     value: PropTypes.string,
     link: PropTypes.string,
-    match: ReactRouterPropTypes.match.isRequired,
-    location: ReactRouterPropTypes.location.isRequired,
-    history: ReactRouterPropTypes.history.isRequired,
 };
 
 RelatedEntity.defaultProps = {
@@ -90,4 +80,4 @@ RelatedEntity.defaultProps = {
     name: null,
 };
 
-export default withRouter(RelatedEntity);
+export default RelatedEntity;

ui/apps/platform/src/Components/RelatedEntityListCount.js

@@ -1,15 +1,17 @@
 import React, { useContext } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import ReactRouterPropTypes from 'react-router-prop-types';
 
 import Widget from 'Components/Widget';
 import { newWorkflowCases } from 'constants/useCaseTypes';
 import workflowStateContext from 'Containers/workflowStateContext';
 import URLService from 'utils/URLService';
 
 // @TODO We should try to use this component for Compliance as well
-const RelatedEntityListCount = ({ match, location, history, name, value, entityType, ...rest }) => {
+const RelatedEntityListCount = ({ name, value, entityType, ...rest }) => {
+    const history = useHistory();
+    const location = useLocation();
+    const match = useRouteMatch();
     const workflowState = useContext(workflowStateContext);
 
     function onClick() {
@@ -53,14 +55,11 @@ const RelatedEntityListCount = ({ match, location, history, name, value, entityT
 RelatedEntityListCount.propTypes = {
     name: PropTypes.string.isRequired,
     value: PropTypes.number,
-    match: ReactRouterPropTypes.match.isRequired,
-    location: ReactRouterPropTypes.location.isRequired,
-    history: ReactRouterPropTypes.history.isRequired,
     entityType: PropTypes.string.isRequired,
 };
 
 RelatedEntityListCount.defaultProps = {
     value: 0,
 };
 
-export default withRouter(RelatedEntityListCount);
+export default RelatedEntityListCount;

ui/apps/platform/src/Components/TablePagination.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import * as Icon from 'react-feather';
-import { withRouter } from 'react-router-dom';
 import debounce from 'lodash/debounce';
 import clamp from 'lodash/clamp';
 
@@ -120,4 +119,4 @@ TablePagination.defaultProps = {
     dataLength: 0,
 };
 
-export default withRouter(TablePagination);
+export default TablePagination;

ui/apps/platform/src/Components/URLSearchInput.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 
 import Query from 'Components/ThrowingQuery';
 import URLSearchInputWithAutocomplete from 'Components/URLSearchInputWithAutocomplete';
@@ -52,4 +51,4 @@ URLSearchInput.defaultProps = {
     categories: [],
 };
 
-export default withRouter(URLSearchInput);
+export default URLSearchInput;

ui/apps/platform/src/Components/URLSearchInputWithAutocomplete.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import ReactRouterPropTypes from 'react-router-prop-types';
 import { components } from 'react-select';
 import queryString from 'qs';
 import { connect } from 'react-redux';
@@ -100,8 +100,6 @@ export const removeValuesForKey = (oldOptions, newOptions) => {
 };
 
 const URLSearchInputWithAutocomplete = ({
-    location,
-    history,
     autoCompleteResults,
     categoryOptions,
     setAllSearchOptions,
@@ -112,6 +110,8 @@ const URLSearchInputWithAutocomplete = ({
     prependAutocompleteQuery,
     ...rest
 }) => {
+    const location = useLocation();
+    const history = useHistory();
     const searchParam = useContext(searchContext);
     const workflowState = useContext(workflowStateContext);
 
@@ -309,8 +309,6 @@ URLSearchInputWithAutocomplete.propTypes = {
     placeholder: PropTypes.string.isRequired,
     categoryOptions: PropTypes.arrayOf(PropTypes.string),
     autoCompleteResults: PropTypes.arrayOf(PropTypes.string),
-    location: ReactRouterPropTypes.location.isRequired,
-    history: ReactRouterPropTypes.history.isRequired,
     fetchAutocomplete: PropTypes.func,
     clearAutocomplete: PropTypes.func,
     setAllSearchOptions: PropTypes.func.isRequired,

ui/apps/platform/src/Components/visuals/Sunburst.js

@@ -2,8 +2,6 @@ import React from 'react';
 import { Sunburst, DiscreteColorLegend, LabelSeries } from 'react-vis';
 import PropTypes from 'prop-types';
 import merge from 'deepmerge';
-import ReactRouterPropTypes from 'react-router-prop-types';
-import { withRouter } from 'react-router-dom';
 
 import SunburstDetailSection from 'Components/visuals/SunburstDetailSection';
 
@@ -70,7 +68,6 @@ class BasicSunburst extends React.Component {
         onValueSelect: PropTypes.func,
         onValueDeselect: PropTypes.func,
         staticDetails: PropTypes.bool,
-        history: ReactRouterPropTypes.history.isRequired,
         units: PropTypes.string,
         small: PropTypes.bool,
     };
@@ -234,4 +231,4 @@ class BasicSunburst extends React.Component {
     }
 }
 
-export default withRouter(BasicSunburst);
+export default BasicSunburst;

ui/apps/platform/src/Containers/AccessControl/AccessControl.tsx

@@ -17,9 +17,11 @@ function AccessControl(): ReactElement {
     return (
         <>
             <Switch>
-                <Route exact path={accessControlBasePath}>
-                    <Redirect to={getEntityPath('AUTH_PROVIDER')} />
-                </Route>
+                <Route
+                    exact
+                    path={accessControlBasePath}
+                    render={() => <Redirect to={getEntityPath('AUTH_PROVIDER')} />}
+                />
                 <Route path={accessControlPath}>
                     <Switch>
                         <Route path={getEntityPath('AUTH_PROVIDER', paramId)}>

ui/apps/platform/src/Containers/AppPage.tsx

@@ -20,14 +20,21 @@ function AppPage(): ReactElement {
             <AppPageTitle />
             <AppPageFavicon />
             <Switch>
-                <Route path={loginPath} component={LoginPage} />
-                <Route
-                    path={authorizeRoxctlPath}
-                    render={(props) => <LoginPage {...props} authorizeRoxctlMode />}
-                />
-                <Route path={testLoginResultsPath} component={TestLoginResultsPage} />
-                <Route path={authResponsePrefix} component={LoadingSection} />
-                <Route component={AuthenticatedRoutes} />
+                <Route path={loginPath}>
+                    <LoginPage />
+                </Route>
+                <Route path={authorizeRoxctlPath}>
+                    <LoginPage authorizeRoxctlMode />
+                </Route>
+                <Route path={testLoginResultsPath}>
+                    <TestLoginResultsPage />
+                </Route>
+                <Route path={authResponsePrefix}>
+                    <LoadingSection />
+                </Route>
+                <Route>
+                    <AuthenticatedRoutes />
+                </Route>
             </Switch>
         </>
     );

ui/apps/platform/src/Containers/Compliance/Entity/Page.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import ReactRouterPropTypes from 'react-router-prop-types';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 import URLService from 'utils/URLService';
 import entityTypes from 'constants/entityTypes';
 
@@ -12,7 +11,10 @@ import ControlPage from './Control';
 import DeploymentPage from './Deployment';
 import StandardPage from './Standard';
 
-const ComplianceEntityPage = ({ match, location }) => {
+const ComplianceEntityPage = () => {
+    const location = useLocation();
+    const match = useRouteMatch();
+
     const params = URLService.getParams(match, location);
 
     const pageProps = {
@@ -39,8 +41,6 @@ const ComplianceEntityPage = ({ match, location }) => {
 };
 
 ComplianceEntityPage.propTypes = {
-    match: ReactRouterPropTypes.match.isRequired,
-    location: ReactRouterPropTypes.location.isRequired,
     params: PropTypes.shape({
         entityId: PropTypes.string,
         entityType: PropTypes.string,
@@ -53,4 +53,4 @@ ComplianceEntityPage.defaultProps = {
     sidePanelMode: false,
 };
 
-export default withRouter(ComplianceEntityPage);
+export default ComplianceEntityPage;

ui/apps/platform/src/Containers/Compliance/Entity/ResourceTabs.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, withRouter } from 'react-router-dom';
-import ReactRouterPropTypes from 'react-router-prop-types';
+import { Link, useLocation, useRouteMatch } from 'react-router-dom';
 import { resourceLabels } from 'messages/common';
 import URLService from 'utils/URLService';
 import pluralize from 'pluralize';
@@ -10,7 +9,10 @@ import { SEARCH_WITH_CONTROLS as QUERY } from 'queries/search';
 import queryService from 'utils/queryService';
 import { getResourceCountFromAggregatedResults } from 'utils/complianceUtils';
 
-const ResourceTabs = ({ entityType, entityId, resourceTabs, selectedType, match, location }) => {
+const ResourceTabs = ({ entityType, entityId, resourceTabs, selectedType }) => {
+    const match = useRouteMatch();
+    const location = useLocation();
+
     function getLinkToListType(listEntityType) {
         return URLService.getURL(match, location)
             .base(entityType, entityId)
@@ -87,8 +89,6 @@ const ResourceTabs = ({ entityType, entityId, resourceTabs, selectedType, match,
 };
 
 ResourceTabs.propTypes = {
-    match: ReactRouterPropTypes.match.isRequired,
-    location: ReactRouterPropTypes.location.isRequired,
     entityType: PropTypes.string.isRequired,
     entityId: PropTypes.string.isRequired,
     selectedType: PropTypes.string,
@@ -100,4 +100,4 @@ ResourceTabs.defaultProps = {
     selectedType: null,
 };
 
-export default withRouter(ResourceTabs);
+export default ResourceTabs;

ui/apps/platform/src/Containers/Compliance/List/Header.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
 import lowerCase from 'lodash/lowerCase';
 import startCase from 'lodash/startCase';
 
@@ -72,4 +71,4 @@ ListHeader.defaultProps = {
     standard: null,
 };
 
-export default withRouter(ListHeader);
+export default ListHeader;