fix(RHINENG-14893): Correct empty state SystemDetails

src/SmartComponents/SystemDetails/Details.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import { Bullseye } from '@patternfly/react-core';
-import ComplianceEmptyState from 'PresentationalComponents/ComplianceEmptyState';
 import { useQuery } from '@apollo/client';
 import { Spinner } from '@redhat-cloud-services/frontend-components/Spinner';
 import './compliance.scss';
@@ -11,8 +10,15 @@ import SystemPoliciesAndRules from './SystemPoliciesAndRules';
 import { SYSTEM_QUERY } from './constants';
 import useTestResults from './useTestResults';
 import SystemPoliciesAndRulesRest from './SystemPoliciesAndRulesRest';
+import EmptyState from './EmptyState';
 
-export const DetailsRest = ({ inventoryId, hidePassed, ...props }) => {
+export const DetailsRest = ({
+  inventoryId,
+  hidePassed,
+  policiesCount,
+  insightsId,
+  ...props
+}) => {
   const { testResults, testResultsLoading } = useTestResults(inventoryId);
 
   return (
@@ -23,7 +29,7 @@ export const DetailsRest = ({ inventoryId, hidePassed, ...props }) => {
         </Bullseye>
       ) : testResults.length === 0 ? (
         // we render no policy cards nor rules table if there are no reporting policies
-        <ComplianceEmptyState title="No policies are reporting for this system" />
+        <EmptyState insightsId={insightsId} policiesCount={policiesCount} />
       ) : (
         <SystemPoliciesAndRulesRest
           {...props}
@@ -39,6 +45,8 @@ export const DetailsRest = ({ inventoryId, hidePassed, ...props }) => {
 DetailsRest.propTypes = {
   inventoryId: propTypes.string,
   hidePassed: propTypes.bool,
+  policiesCount: propTypes.number,
+  insightsId: propTypes.string,
 };
 
 export const DetailsGraphQL = ({ inventoryId, hidePassed, ...props }) => {
@@ -59,16 +67,12 @@ export const DetailsGraphQL = ({ inventoryId, hidePassed, ...props }) => {
 
   return (
     <div className="ins-c-compliance__scope">
-      {!data?.system || is404 ? (
-        <ComplianceEmptyState title="No policies are reporting for this system" />
-      ) : (
-        <SystemPoliciesAndRules
-          {...props}
-          hidePassed={hidePassed}
-          data={data}
-          loading={loading}
-        />
-      )}
+      <SystemPoliciesAndRules
+        {...props}
+        hidePassed={hidePassed}
+        data={data}
+        loading={loading}
+      />
     </div>
   );
 };
@@ -95,6 +99,8 @@ export const Details = (props) => {
 Details.propTypes = {
   inventoryId: propTypes.string,
   hidePassed: propTypes.bool,
+  policiesCount: propTypes.number,
+  insightsId: propTypes.string,
 };
 
 export default Details;

src/SmartComponents/SystemDetails/EmptyState.js

@@ -3,21 +3,46 @@ import propTypes from 'prop-types';
 import { NotConnected } from '@redhat-cloud-services/frontend-components/NotConnected';
 import NoPoliciesState from './NoPoliciesState';
 import NoReportsState from './NoReportsState';
+import { useLocation } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
+import useSystem from 'Utilities/hooks/api/useSystem';
+import { Bullseye, Spinner } from '@patternfly/react-core';
 
-const EmptyState = ({ system }) => {
-  if (!system?.insightsId) {
+const EmptyState = ({ insightsId, policiesCount }) => {
+  const location = useLocation();
+  const isInventoryInPath = location.pathname.includes('inventory');
+  const { inventoryId } = useParams();
+  console.log(`DEBUG insightsId ${!isInventoryInPath || !!insightsId}`)
+  const { data: { data } = {} } = useSystem({
+    params: [inventoryId],
+    skip: !isInventoryInPath || !!insightsId,
+  });
+
+  const effectiveInsightsId = data?.insights_id || insightsId;
+  const effectivePoliciesCount = data?.policies.length || policiesCount;
+
+  if (isInventoryInPath && !data) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  if (!effectiveInsightsId) {
     return <NotConnected />;
+  }
+
+  if (policiesCount === 0) {
+    return <NoPoliciesState />;
   } else {
-    if (!system?.hasPolicy) {
-      return <NoPoliciesState system={system} />;
-    } else if (system?.hasPolicy && system?.testResultProfiles?.length === 0) {
-      return <NoReportsState system={system} />;
-    }
+    return <NoReportsState policiesCount={effectivePoliciesCount} />;
   }
 };
 
 EmptyState.propTypes = {
-  system: propTypes.object,
+  insightsId: propTypes.string,
+  policiesCount: propTypes.number,
 };
 
 export default EmptyState;

src/SmartComponents/SystemDetails/NoReportsState.js

@@ -9,7 +9,7 @@ import {
   EmptyStateHeader,
 } from '@patternfly/react-core';
 
-const NoReportsState = ({ system }) => (
+const NoReportsState = ({ policiesCount }) => (
   <Bullseye>
     <EmptyState
       style={{
@@ -31,9 +31,9 @@ const NoReportsState = ({ system }) => (
         headingLevel="h1"
       />
       <EmptyStateBody>
-        This system is part of {system?.policies?.length}
-        {system?.policies?.length > 1 ? ' policies' : ' policy'}, but has not
-        returned any results.
+        This system is part of {policiesCount}
+        {policiesCount > 1 ? ' policies' : ' policy'}, but has not returned any
+        results.
       </EmptyStateBody>
       <EmptyStateBody>
         Reports are returned when the system checks into Insights. By default,
@@ -44,9 +44,7 @@ const NoReportsState = ({ system }) => (
 );
 
 NoReportsState.propTypes = {
-  system: propTypes.shape({
-    policies: propTypes.array,
-  }),
+  policiesCount: propTypes.number,
 };
 
 export default NoReportsState;

src/SmartComponents/SystemDetails/NoReportsState.test.js

@@ -5,7 +5,7 @@ import NoReportsState from './NoReportsState';
 
 describe('NoReportsState', () => {
   it('with a system having policies', () => {
-    render(<NoReportsState system={{ policies: [{}] }} />);
+    render(<NoReportsState policiesCount={1} />);
 
     expect(
       screen.getByText(
@@ -15,7 +15,7 @@ describe('NoReportsState', () => {
   });
 
   it('with a system having multiple policies', () => {
-    render(<NoReportsState system={{ policies: [{}, {}] }} />);
+    render(<NoReportsState policiesCount={2} />);
 
     expect(
       screen.getByText(

src/SmartComponents/SystemDetails/SystemDetails.js

@@ -52,6 +52,8 @@ const SystemDetailBase = ({
   loading,
   systemName,
   inventoryId,
+  policiesCount,
+  insightsId,
 }) => (
   <StateViewWithError stateValues={{ error, data, loading }}>
     <StateViewPart stateKey="data">
@@ -60,7 +62,12 @@ const SystemDetailBase = ({
         <InventoryDetails inventoryId={inventoryId} />
       </PageHeader>
       <PageSection>
-        <Details hidePassed inventoryId={inventoryId} />
+        <Details
+          hidePassed
+          inventoryId={inventoryId}
+          policiesCount={policiesCount}
+          insightsId={insightsId}
+        />
       </PageSection>
     </StateViewPart>
     <StateViewPart stateKey="loading">
@@ -77,6 +84,8 @@ SystemDetailBase.propTypes = {
   loading: propTypes.bool,
   systemName: propTypes.string,
   inventoryId: propTypes.string,
+  policiesCount: propTypes.number,
+  insightsId: propTypes.string,
 };
 
 const SystemDetailsGraphQL = ({ route }) => {
@@ -105,11 +114,23 @@ const SystemDetailsRest = ({ route }) => {
     loading,
   } = useSystem({ params: [inventoryId] });
   const systemName = data?.display_name || inventoryId;
+  const policiesCount = data?.policies.length;
+  const insightsId = data?.insights_id;
 
   useTitleEntity(route, systemName);
 
   return (
-    <SystemDetailBase {...{ data, error, loading, systemName, inventoryId }} />
+    <SystemDetailBase
+      {...{
+        data,
+        error,
+        loading,
+        systemName,
+        inventoryId,
+        policiesCount,
+        insightsId,
+      }}
+    />
   );
 };
 

src/SmartComponents/SystemDetails/SystemDetails.test.js

@@ -6,6 +6,7 @@ import { useQuery } from '@apollo/client';
 import { useLocation } from 'react-router-dom';
 import SystemDetails from './SystemDetails.js';
 import useAPIV2FeatureFlag from '../../Utilities/hooks/useAPIV2FeatureFlag.js';
+import useSystem from 'Utilities/hooks/api/useSystem';
 
 jest.mock('@apollo/client');
 
@@ -24,6 +25,8 @@ jest.mock('Utilities/hooks/useDocumentTitle', () => ({
 
 jest.mock('../../Utilities/hooks/useAPIV2FeatureFlag.js');
 
+jest.mock('Utilities/hooks/api/useSystem', () => jest.fn());
+
 describe('SystemDetails', () => {
   const defaultLocation = {
     query: {
@@ -34,6 +37,7 @@ describe('SystemDetails', () => {
     system: {
       insightsId: 'ID_YEAH',
       name: 'test.host.local',
+      policies: [],
       testResultProfiles: [],
     },
   };
@@ -49,6 +53,17 @@ describe('SystemDetails', () => {
   });
 
   it('expect to render the inventory details', () => {
+    require('react-router-dom').useLocation.mockReturnValue({
+      pathname: '/insights/inventory',
+    });
+    useSystem.mockImplementation(() => ({
+      data: {},
+      error: undefined,
+      loading: undefined,
+    }));
+
+    expect(useSystem).not.toHaveBeenCalled();
+
     render(
       <TestWrapper>
         <SystemDetails />
@@ -70,6 +85,28 @@ describe('SystemDetails', () => {
 
     expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
+});
+
+describe('SystemDetails - REST', () => {
+  beforeEach(() => {
+    useAPIV2FeatureFlag.mockImplementation(() => true);
+  });
+
+  it('expect to render Inventory Details Wrapper', () => {
+    useSystem.mockImplementation(() => ({
+      data: { data: { display_name: "foo", policies: [{}], insights_id: "123" }},
+      error: undefined,
+      loading: undefined,
+    }));
+    render(
+      <TestWrapper>
+        <SystemDetails route={{}}/>
+      </TestWrapper>
+    );
 
-  // TODO: add tests for the REST API component
+    expect(
+      screen.getByLabelText('Inventory Details Wrapper')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  })
 });

src/SmartComponents/SystemDetails/SystemPoliciesAndRules.js

@@ -19,7 +19,9 @@ const SystemPoliciesAndRules = ({ data: { system }, loading, hidePassed }) => {
   const [selectedPolicy, setSelectedPolicy] = useState(
     system.testResultProfiles[0]?.id
   );
-  const policies = system?.testResultProfiles;
+  const testResultProfiles = system?.testResultProfiles;
+  const policiesCount = system?.policies.length;
+  const insightsId = system?.insightsId;
 
   const sorter = natsort({ desc: false, insensitive: true });
   const sortedTestResultProfiles = system?.testResultProfiles.sort(
@@ -36,12 +38,12 @@ const SystemPoliciesAndRules = ({ data: { system }, loading, hidePassed }) => {
       ) : apiV2Enabled === true ? (
         <SystemPolicyCardsRest />
       ) : (
-        <SystemPolicyCards policies={policies} loading={loading} />
+        <SystemPolicyCards policies={testResultProfiles} loading={loading} />
       )}
       <br />
-      {system?.testResultProfiles?.length ? (
+      {testResultProfiles?.length ? (
         <>
-          {system.testResultProfiles.length > 1 && (
+          {testResultProfiles.length > 1 && (
             <Tabs
               activeKey={selectedPolicy}
               style={{
@@ -91,7 +93,7 @@ const SystemPoliciesAndRules = ({ data: { system }, loading, hidePassed }) => {
           />
         </>
       ) : (
-        <EmptyState system={system} />
+        <EmptyState insightsId={insightsId} policiesCount={policiesCount} />
       )}
     </>
   );
@@ -101,11 +103,14 @@ SystemPoliciesAndRules.propTypes = {
   data: propTypes.shape({
     system: propTypes.shape({
       hasPolicy: propTypes.bool,
-      policies: propTypes.shape({
-        id: propTypes.string,
-      }),
+      policies: propTypes.arrayOf(
+        propTypes.shape({
+          id: propTypes.string,
+        })
+      ),
       profiles: propTypes.array,
       testResultProfiles: propTypes.array,
+      insightsId: propTypes.string,
     }),
   }),
   loading: propTypes.bool,