feat(OCPADVISOR-88): Hide upgrade risks for managed clusters

cypress/fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/info.json

@@ -0,0 +1,9 @@
+{
+  "cluster": {
+    "cluster_id": "dcb95bbf-8673-4f3a-a63c-12d4a530aa6f",
+    "display_name": "Cluster With Issues",
+    "managed": false,
+    "status": "Stale"
+  },
+  "status": "ok"
+}

cypress/utils/interceptors.js

@@ -1,5 +1,7 @@
 import singleClusterPageReport from '../fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/reports-disabled-false.json';
 import upgradeRisksFixtures from '../fixtures/api/insights-results-aggregator/v1/clusters/41c30565-b4c9-49f2-a4ce-3277ad22b258/upgrade-risks-prediction.json';
+import clusterInfoFixtures from '../fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/info.json';
+import _ from 'lodash';
 
 export const clusterReportsInterceptors = {
   successful: () =>
@@ -27,7 +29,7 @@ export const clusterReportsInterceptors = {
       }
     ),
   'successful, cluster name is null': () => {
-    const report = singleClusterPageReport;
+    const report = _.cloneDeep(singleClusterPageReport);
     report.report.meta.cluster_name = '';
 
     cy.intercept(
@@ -39,7 +41,7 @@ export const clusterReportsInterceptors = {
     );
   },
   'successful, no rules': () => {
-    const report = singleClusterPageReport;
+    const report = _.cloneDeep(singleClusterPageReport);
     report.report.data = [];
 
     cy.intercept(
@@ -70,7 +72,7 @@ export const upgradeRisksInterceptors = {
       }
     ),
   'successful, alerts empty': () => {
-    const fixtures = upgradeRisksFixtures;
+    const fixtures = _.cloneDeep(upgradeRisksFixtures);
     fixtures.upgrade_recommendation.upgrade_risks_predictors.alerts = [];
     cy.intercept(
       'GET',
@@ -82,7 +84,7 @@ export const upgradeRisksInterceptors = {
     );
   },
   'successful, empty': () => {
-    const fixtures = upgradeRisksFixtures;
+    const fixtures = _.cloneDeep(upgradeRisksFixtures);
     fixtures.upgrade_recommendation.upgrade_risks_predictors = {
       alerts: [],
       operator_conditions: [],
@@ -129,3 +131,32 @@ export const upgradeRisksInterceptors = {
       }
     ),
 };
+
+export const clusterInfoInterceptors = {
+  successful: () =>
+    cy
+      .intercept(
+        'GET',
+        /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/info/,
+        {
+          statusCode: 200,
+          body: clusterInfoFixtures,
+        }
+      )
+      .as('clusterInfo'),
+  'successful, managed': () => {
+    const fixtures = _.cloneDeep(clusterInfoFixtures);
+    fixtures.cluster.managed = true;
+
+    return cy
+      .intercept(
+        'GET',
+        /\/api\/insights-results-aggregator\/v2\/cluster\/.*\/info/,
+        {
+          statusCode: 200,
+          body: fixtures,
+        }
+      )
+      .as('clusterInfo');
+  },
+};

src/Components/Cluster/Cluster.cy.js

@@ -6,6 +6,7 @@ import {
   checkRowCounts,
 } from '../../../cypress/utils/table';
 import {
+  clusterInfoInterceptors,
   clusterReportsInterceptors as interceptors,
   upgradeRisksInterceptors,
 } from '../../../cypress/utils/interceptors';
@@ -15,8 +16,7 @@ const CLUSTER_HEADER = '#cluster-header';
 const BREADCRUMBS = 'nav[class=pf-c-breadcrumb]';
 const RULES_TABLE = '#cluster-recs-list-table';
 const FILTER_CHIPS = 'li[class=pf-c-chip-group__list-item]';
-const ALERT = '[data-ouia-component-type="PF4/Alert"]';
-const TAB_BUTTON = '[data-ouia-component-type="PF4/TabButton"]';
+const TAB_BUTTON = '[data-ouia-component-type="PF4/TabButton"]'; // TODO: move to utils
 
 const CLUSTER_ID = '123';
 const CLUSTER_NAME = 'Cluster With Issues';
@@ -136,6 +136,8 @@ describe('cluster page', () => {
 
 describe('upgrade risks', () => {
   beforeEach(() => {
+    upgradeRisksInterceptors.successful();
+    clusterInfoInterceptors.successful();
     cy.intercept('/feature_flags*', {
       statusCode: 200,
       body: {
@@ -161,22 +163,40 @@ describe('upgrade risks', () => {
       .and('have.text', 'RecommendationsUpgrade risks');
   });
 
+  describe('managed clusters', () => {
+    it('does not render banner and tab', () => {
+      clusterInfoInterceptors['successful, managed'](); // override interceptor
+      mount();
+
+      cy.ouiaId('recommendations').should(
+        'have.attr',
+        'data-ouia-safe',
+        'true'
+      );
+      cy.wait('@clusterInfo');
+
+      cy.ouiaId('upgrade-risks-alert').should('not.exist');
+      cy.get(TAB_BUTTON)
+        .should('have.length', 1)
+        .and('have.text', 'Recommendations');
+    });
+  });
+
   it('has some upgrade risks', () => {
-    upgradeRisksInterceptors.successful();
     mount();
 
-    cy.get(ALERT).should('have.class', 'pf-m-warning');
-    cy.get(ALERT).within(() => {
+    cy.ouiaId('upgrade-risks-alert').should('have.class', 'pf-m-warning');
+    cy.ouiaId('upgrade-risks-alert').within(() => {
       cy.get('h4').should('contain.text', 'Resolve upgrade risks');
     });
   });
 
   it('has no upgrade risks', () => {
-    upgradeRisksInterceptors['successful, empty']();
+    upgradeRisksInterceptors['successful, empty'](); // override interceptor
     mount();
 
-    cy.get(ALERT).should('have.class', 'pf-m-success');
-    cy.get(ALERT).within(() => {
+    cy.ouiaId('upgrade-risks-alert').should('have.class', 'pf-m-success');
+    cy.ouiaId('upgrade-risks-alert').within(() => {
       cy.get('h4').should(
         'contain.text',
         'No known upgrade risks identified for this cluster.'
@@ -185,11 +205,11 @@ describe('upgrade risks', () => {
   });
 
   it('upgrade risks not found', () => {
-    upgradeRisksInterceptors['error, not found']();
+    upgradeRisksInterceptors['error, not found'](); // override interceptor
     mount();
 
-    cy.get(ALERT).should('have.class', 'pf-m-warning');
-    cy.get(ALERT).within(() => {
+    cy.ouiaId('upgrade-risks-alert').should('have.class', 'pf-m-warning');
+    cy.ouiaId('upgrade-risks-alert').within(() => {
       cy.get('h4').should(
         'contain.text',
         'Upgrade risks are not currently available.'
@@ -198,22 +218,43 @@ describe('upgrade risks', () => {
   });
 
   it('should not render alert in other error', () => {
-    upgradeRisksInterceptors['error, other']();
+    upgradeRisksInterceptors['error, other'](); // override interceptor
     mount();
 
-    cy.get(ALERT).should('not.exist');
+    cy.ouiaId('upgrade-risks-alert').should('not.exist');
   });
 
   it('should not render alert in the loading state', () => {
-    upgradeRisksInterceptors['long responding']();
+    upgradeRisksInterceptors['long responding'](); // override interceptor
     mount();
 
-    cy.get(ALERT).should('not.exist');
+    cy.ouiaId('upgrade-risks-alert').should('not.exist');
+  });
+
+  describe('active_tab search parameter', () => {
+    it('opens upgrade risks tab', () => {
+      mount(['/clusters/123?active_tab=upgrade_risks']);
+      cy.ouiaId('upgrade-risks-tab').should(
+        'have.attr',
+        'aria-selected',
+        'true'
+      );
+    });
+
+    it('opens recommendations tab', () => {
+      mount(['/clusters/123?active_tab=recommendations']);
+      cy.ouiaId('recommendations-tab').should(
+        'have.attr',
+        'aria-selected',
+        'true'
+      );
+    });
   });
 
   describe('analytics tracking', () => {
     beforeEach(() => {
       cy.intercept('/analytics/track').as('track');
+      clusterInfoInterceptors.successful(); // override interceptor
     });
 
     it('should track click on upgrade risks tab', () => {

src/Components/Cluster/Cluster.js

@@ -9,10 +9,10 @@ import Breadcrumbs from '../Breadcrumbs';
 import ClusterTabs from '../ClusterTabs/ClusterTabs';
 import { Flex, FlexItem, PageSection } from '@patternfly/react-core';
 import { UpgradeRisksAlert } from '../UpgradeRisksAlert';
-import { useUpgradeRisksFeatureFlag } from '../../Utilities/useFeatureFlag';
+import useUpgradeRisksFeature from '../UpgradeRisksTable/useUpgradeRisksFeature';
 
 export const Cluster = ({ cluster, clusterId }) => {
-  const upgradeRisksEnabled = useUpgradeRisksFeatureFlag();
+  const areUpgradeRisksEnabled = useUpgradeRisksFeature(clusterId);
 
   // TODO: make breadcrumbs take display name from GET /cluster/id/info
   return (
@@ -25,7 +25,7 @@ export const Cluster = ({ cluster, clusterId }) => {
             />
             <ClusterHeader />
           </FlexItem>
-          {upgradeRisksEnabled && <UpgradeRisksAlert />}
+          {areUpgradeRisksEnabled && <UpgradeRisksAlert />}
         </Flex>
       </PageHeader>
       <PageSection>

src/Components/ClusterHeader/index.js

@@ -15,7 +15,7 @@ const ClusterHeaderWrapper = () => {
   });
   const clusterInfo = useGetClusterInfoQuery({
     id: clusterId,
-  });
+  }); // TODO: improve cache handling: do network request only when cache is empty
 
   return (
     <ClusterHeader

src/Components/ClusterTabs/ClusterTabs.js

@@ -2,13 +2,14 @@ import { Card, CardBody, Tab, Tabs } from '@patternfly/react-core';
 import React, { useEffect, useState } from 'react';
 
 import { useIntl } from 'react-intl';
-import { useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import messages from '../../Messages';
 import { setSearchParameter } from '../../Utilities/Helpers';
 import { useUpgradeRisksFeatureFlag } from '../../Utilities/useFeatureFlag';
 import ClusterRules from '../ClusterRules/ClusterRules';
 import { UpgradeRisksTable } from '../UpgradeRisksTable';
 import { UpgradeRisksTracker } from '../UpgradeRisksTracker';
+import useUpgradeRisksFeature from '../UpgradeRisksTable/useUpgradeRisksFeature';
 
 const CLUSTER_TABS = ['recommendations', 'upgrade_risks'];
 
@@ -17,9 +18,12 @@ const ClusterTabs = () => {
   const upgradeRisksEnabled = useUpgradeRisksFeatureFlag();
   const [searchParams] = useSearchParams();
 
+  const { clusterId } = useParams();
+  const areUpgradeRisksEnabled = useUpgradeRisksFeature(clusterId);
+
   const [activeKey, setActiveKey] = useState(() => {
     const activeTab = searchParams.get('active_tab');
-    return upgradeRisksEnabled
+    return areUpgradeRisksEnabled
       ? CLUSTER_TABS.includes(activeTab)
         ? activeTab
         : 'recommendations'
@@ -28,7 +32,7 @@ const ClusterTabs = () => {
 
   useEffect(() => {
     if (
-      upgradeRisksEnabled &&
+      areUpgradeRisksEnabled &&
       searchParams.get('active_tab') === 'upgrade_risks'
     ) {
       setActiveKey('upgrade_risks');
@@ -49,10 +53,11 @@ const ClusterTabs = () => {
           <Tab
             eventKey="recommendations"
             title={intl.formatMessage(messages.recommendations)}
+            ouiaId="recommendations-tab"
           >
             {activeKey === 'recommendations' && <ClusterRules />}
           </Tab>
-          {upgradeRisksEnabled && (
+          {areUpgradeRisksEnabled && (
             <Tab
               eventKey="upgrade_risks"
               title={intl.formatMessage(messages.upgradeRisks)}

src/Components/UpgradeRisksAlert/UpgradeRisksAlert.js

@@ -24,6 +24,7 @@ const UpgradeRisksAlert = () => {
       variant="warning"
       isInline
       title={intl.formatMessage(messages.resolveUpgradeRisks)}
+      ouiaId="upgrade-risks-alert"
     >
       {intl.formatMessage(messages.resolveUpgradeRisksDesc, { strong })}
     </Alert>
@@ -32,12 +33,14 @@ const UpgradeRisksAlert = () => {
       variant="success"
       isInline
       title={intl.formatMessage(messages.noKnownUpgradeRisks)}
+      ouiaId="upgrade-risks-alert"
     />
   ) : isError && error.status === 404 ? (
     <Alert
       variant="warning"
       isInline
       title={intl.formatMessage(messages.upgradeRisksNotCurrentlyAvailable)}
+      ouiaId="upgrade-risks-alert"
     >
       {intl.formatMessage(messages.upgradeRisksNotAvailableDesc)}
     </Alert>

src/Components/UpgradeRisksTable/useUpgradeRisksFeature.js

@@ -0,0 +1,16 @@
+import get from 'lodash/get';
+import { useParams } from 'react-router-dom';
+
+import { useUpgradeRisksFeatureFlag } from '../../Utilities/useFeatureFlag';
+import { useGetClusterInfoState } from '../../Services/SmartProxy';
+
+const useUpgradeRisksFeature = (clusterId) => {
+  const upgradeRisksEnabled = useUpgradeRisksFeatureFlag();
+  const id = clusterId || useParams().clusterId;
+  const clusterInfo = useGetClusterInfoState({ id }); // doesn't request new data, uses cache
+  const isManaged = get(clusterInfo, 'data.managed', true);
+
+  return upgradeRisksEnabled && !isManaged;
+};
+
+export default useUpgradeRisksFeature;

src/Services/SmartProxy.js

@@ -47,6 +47,7 @@ export const SmartProxyApi = createApi({
 export const {
   endpoints: {
     getUpgradeRisks: { useQueryState: useGetUpgradeRisksState },
+    getClusterInfo: { useQueryState: useGetClusterInfoState },
   },
   useGetClusterByIdQuery,
   useLazyGetClusterByIdQuery,