fix(routing): RHICOMPL-3522 - Fix issues with react router upgrade (#…

…1979)

src/PresentationalComponents/LinkWithPermission/LinkWithPermission.js

@@ -9,7 +9,14 @@ NoOp.propTypes = {
   children: propTypes.node,
 };
 
-export const LinkWithPermission = ({ to, children, ...linkProps }) => {
+export const LinkWithPermission = ({
+  to,
+  children,
+  Component,
+  componentProps = {},
+  ...linkProps
+}) => {
+  const ComponentToRender = Component || Link;
   const { hasAccess, isLoading } = useRoutePermissions(to);
   const hasPermission = !isLoading && hasAccess;
   const TooltipOrDiv = !hasPermission ? Tooltip : NoOp;
@@ -18,16 +25,24 @@ export const LinkWithPermission = ({ to, children, ...linkProps }) => {
     <TooltipOrDiv
       content={<div>You do not have permissions to perform this action</div>}
     >
-      <Link app="compliance" to={to} {...linkProps} isDisabled={!hasPermission}>
+      <ComponentToRender
+        app="compliance"
+        to={to}
+        {...componentProps}
+        {...linkProps}
+        isDisabled={!hasPermission}
+      >
         {children}
-      </Link>
+      </ComponentToRender>
     </TooltipOrDiv>
   );
 };
 
 LinkWithPermission.propTypes = {
   to: propTypes.oneOfType([propTypes.string, propTypes.object]),
   children: propTypes.node,
+  Component: propTypes.node,
+  componentProps: propTypes.object,
 };
 
 export default LinkWithPermission;

src/PresentationalComponents/PoliciesTable/PoliciesTable.js

@@ -11,7 +11,7 @@ import useActionResolver from './hooks/useActionResolvers';
 export const PoliciesTable = ({ policies, DedicatedAction }) => {
   const manageColumnsEnabled = useFeature('manageColumns');
   const filters = Object.values(Filters);
-  const actionResolver = useActionResolver(policies);
+  const actionResolver = useActionResolver();
 
   return (
     <TableToolsTable

src/PresentationalComponents/PoliciesTable/PoliciesTable.test.js

@@ -6,9 +6,13 @@ jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   Link: () => 'Mocked Link',
   useLocation: jest.fn(),
-  useNavigate: jest.fn(),
 }));
 
+jest.mock(
+  '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate',
+  () => () => ({})
+);
+
 describe('PoliciesTable', () => {
   const defaultProps = {
     history: { push: jest.fn() },

src/PresentationalComponents/PoliciesTable/hooks/useActionResolvers.js

@@ -1,38 +1,26 @@
-import { useLocation } from 'react-router-dom';
 import useNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate';
 import useRoutePermissions from 'Utilities/hooks/useRoutePermissions';
 
-const useActionResolver = (policies) => {
-  const location = useLocation();
+const useActionResolver = () => {
   const navigate = useNavigate();
 
   const { hasAccess: hasDeleteAccess, isLoading: isDeleteAccessLoading } =
     useRoutePermissions(`/scappolicies/XYZ/delete`);
   const { hasAccess: hasEditAccess, isLoading: isEditAccessLoading } =
     useRoutePermissions(`/scappolicies/XYZ/edit`);
 
-  const onClick = (to, { itemId: policyId }) => {
-    const policy = policies.find((policy) => policy.id === policyId);
-
-    navigate(to, {
-      policy,
-      background: location,
-      state: { policy },
-    });
-  };
-
   return () => [
     {
       title: 'Delete policy',
       isDisabled: !isDeleteAccessLoading && !hasDeleteAccess,
       onClick: (_event, _index, policy) =>
-        onClick(`/scappolicies/${policy.itemId}/delete`, policy),
+        navigate(`/scappolicies/${policy.itemId}/delete`),
     },
     {
       title: 'Edit policy',
       isDisabled: !isEditAccessLoading && !hasEditAccess,
       onClick: (_event, _index, policy) =>
-        onClick(`/scappolicies/${policy.itemId}/edit`, policy),
+        navigate(`/scappolicies/${policy.itemId}/edit`),
     },
   ];
 };

src/PresentationalComponents/PolicyDetailsDescription/PolicyDetailsDescription.js

@@ -13,7 +13,7 @@ import {
 import linkifyHtml from 'linkifyjs/html';
 import EditPolicyDetailsInline from '../../SmartComponents/EditPolicyDetails/EditPolicyDetailsInline';
 
-const PolicyDetailsDescription = ({ policy }) => {
+const PolicyDetailsDescription = ({ policy, refetch }) => {
   const thresholdText = `${fixedPercentage(
     policy.complianceThreshold,
     1
@@ -35,6 +35,7 @@ const PolicyDetailsDescription = ({ policy }) => {
           <Text>
             <EditPolicyDetailsInline
               policy={policy}
+              refetch={refetch}
               text={policy.complianceThreshold}
               variant="threshold"
               inlineClosedText={thresholdText}
@@ -51,6 +52,7 @@ const PolicyDetailsDescription = ({ policy }) => {
           <Text>
             <EditPolicyDetailsInline
               policy={policy}
+              refetch={refetch}
               text={businessText}
               variant="business"
               inlineClosedText={businessText}
@@ -61,8 +63,9 @@ const PolicyDetailsDescription = ({ policy }) => {
           </Text>
           <Text>
             <EditPolicyDetailsInline
-              component={TextArea}
               policy={policy}
+              refetch={refetch}
+              component={TextArea}
               text={descriptionText}
               variant="description"
               inlineClosedText={businessText}
@@ -84,6 +87,7 @@ const PolicyDetailsDescription = ({ policy }) => {
 };
 PolicyDetailsDescription.propTypes = {
   policy: propTypes.object,
+  refetch: propTypes.func,
 };
 
 export default PolicyDetailsDescription;

src/PresentationalComponents/ReportsEmptyState/ReportsEmptyState.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import ComplianceEmptyState from '../ComplianceEmptyState';
-import { BackgroundLink, LinkButton } from 'PresentationalComponents';
+import {
+  LinkWithPermission as Link,
+  LinkButton,
+} from 'PresentationalComponents';
 
 const ReportsEmptyState = () => (
   <ComplianceEmptyState
     title={'No policies are reporting'}
     mainButton={
-      <BackgroundLink
+      <Link
         to="/scappolicies/new"
         Component={LinkButton}
         componentProps={{
@@ -15,7 +18,7 @@ const ReportsEmptyState = () => (
         }}
       >
         Create new policy
-      </BackgroundLink>
+      </Link>
     }
   />
 );

src/PresentationalComponents/ReportsEmptyState/__snapshots__/ReportsEmptyState.test.js.snap

@@ -217,7 +217,7 @@ exports[`ReportsEmptyState expect to render without error 1`] = `
     }
   }
   mainButton={
-    <BackgroundLink
+    <LinkWithPermission
       Component={[Function]}
       componentProps={
         {
@@ -228,7 +228,7 @@ exports[`ReportsEmptyState expect to render without error 1`] = `
       to="/scappolicies/new"
     >
       Create new policy
-    </BackgroundLink>
+    </LinkWithPermission>
   }
   title="No policies are reporting"
 />

src/PresentationalComponents/ReportsTable/Cells.js

@@ -3,7 +3,6 @@ import propTypes from 'prop-types';
 import { TextContent, Text } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons';
 import {
-  BackgroundLink,
   PolicyPopover,
   GreySmallText,
   UnsupportedSSGVersion,
@@ -83,7 +82,7 @@ CompliantSystems.propTypes = {
 };
 
 export const PDFExportDownload = ({ id }) => (
-  <BackgroundLink
+  <Link
     to={`/reports/${id}/pdf`}
     Component={LinkButton}
     componentProps={{
@@ -93,7 +92,7 @@ export const PDFExportDownload = ({ id }) => (
     }}
   >
     <DownloadIcon />
-  </BackgroundLink>
+  </Link>
 );
 
 PDFExportDownload.propTypes = {

src/PresentationalComponents/ReportsTable/ReportsTable.test.js

@@ -22,9 +22,13 @@ jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   Link: () => 'Mocked Link',
   useLocation: jest.fn(),
-  useNavigate: jest.fn(),
 }));
 
+jest.mock(
+  '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate',
+  () => () => ({})
+);
+
 const profiles = rawPolicies.edges.map((profile) => profile.node);
 
 describe('ReportsTable', () => {

src/PresentationalComponents/ReportsTable/__snapshots__/Cells.test.js.snap

@@ -97,7 +97,7 @@ exports[`OperatingSystem expect to render without error 1`] = `
 `;
 
 exports[`PDFExportDownload expect to render without error 1`] = `
-<BackgroundLink
+<LinkWithPermission
   Component={[Function]}
   componentProps={
     {
@@ -113,5 +113,5 @@ exports[`PDFExportDownload expect to render without error 1`] = `
     noVerticalAlign={false}
     size="sm"
   />
-</BackgroundLink>
+</LinkWithPermission>
 `;

src/PresentationalComponents/TabSwitcher/TabSwitcher.test.js

@@ -12,9 +12,13 @@ jest.mock('react-router-dom', () => ({
     pathname: '/path/name',
     state: {},
   })),
-  useNavigate: jest.fn(),
 }));
 
+jest.mock(
+  '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate',
+  () => () => ({})
+);
+
 describe('TabSwitcher', () => {
   it('expect to render first tab', () => {
     const wrapper = shallow(

src/PresentationalComponents/index.js

@@ -31,7 +31,6 @@ export {
   WARNING_TEXT,
 } from './SystemsCountWarning/SystemsCountWarning';
 export { default as WarningText } from './WarningText/WarningText';
-export { default as BackgroundLink } from './BackgroundLink/BackgroundLink';
 export { default as BreadcrumbLinkItem } from './BreadcrumbLinkItem/BreadcrumbLinkItem';
 export { default as ReportsTable } from './ReportsTable/ReportsTable';
 export { default as ReportsEmptyState } from './ReportsEmptyState/ReportsEmptyState';

src/SmartComponents/CompliancePolicies/CompliancePolicies.js

@@ -8,7 +8,7 @@ import PageHeader, {
 } from '@redhat-cloud-services/frontend-components/PageHeader';
 import ComplianceEmptyState from 'PresentationalComponents/ComplianceEmptyState';
 import {
-  BackgroundLink,
+  LinkWithPermission as Link,
   ErrorPage,
   LoadingPoliciesTable,
   PoliciesTable,
@@ -47,7 +47,7 @@ const QUERY = gql`
 export const CompliancePolicies = () => {
   const location = useLocation();
   const CreateLink = () => (
-    <BackgroundLink
+    <Link
       to="/scappolicies/new"
       Component={LinkButton}
       componentProps={{
@@ -56,7 +56,7 @@ export const CompliancePolicies = () => {
       }}
     >
       Create new policy
-    </BackgroundLink>
+    </Link>
   );
 
   let { data, error, loading, refetch } = useQuery(QUERY);