From 084cccfcd612c788df7633429cd29eb0bd1ffbc1 Mon Sep 17 00:00:00 2001 From: Georgy Karataev Date: Tue, 25 Apr 2023 15:11:42 +0200 Subject: [PATCH] feat(OCPADVISOR-88): Hide upgrade risks for managed clusters (#560) * Hide upgrade risks for managed clusters * Assume that all clusters are managed while fetching info * Create hook for upgrade risks enable/disable; improve tests * Add extra tests for active_tab --- .../info.json | 9 +++ cypress/utils/interceptors.js | 39 ++++++++-- src/Components/Cluster/Cluster.cy.js | 71 +++++++++++++++---- src/Components/Cluster/Cluster.js | 6 +- src/Components/ClusterHeader/index.js | 2 +- src/Components/ClusterTabs/ClusterTabs.js | 13 ++-- .../UpgradeRisksAlert/UpgradeRisksAlert.js | 3 + .../useUpgradeRisksFeature.js | 16 +++++ src/Services/SmartProxy.js | 1 + 9 files changed, 133 insertions(+), 27 deletions(-) create mode 100644 cypress/fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/info.json create mode 100644 src/Components/UpgradeRisksTable/useUpgradeRisksFeature.js diff --git a/cypress/fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/info.json b/cypress/fixtures/api/insights-results-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/info.json new file mode 100644 index 00000000..7d50d3b0 --- /dev/null +++ b/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" +} diff --git a/cypress/utils/interceptors.js b/cypress/utils/interceptors.js index 8ea1ebce..59e8ad08 100644 --- a/cypress/utils/interceptors.js +++ b/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'); + }, +}; diff --git a/src/Components/Cluster/Cluster.cy.js b/src/Components/Cluster/Cluster.cy.js index a69789e7..3a5f448d 100644 --- a/src/Components/Cluster/Cluster.cy.js +++ b/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', () => { diff --git a/src/Components/Cluster/Cluster.js b/src/Components/Cluster/Cluster.js index a1a0ddfa..e38f7ea7 100644 --- a/src/Components/Cluster/Cluster.js +++ b/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 }) => { /> - {upgradeRisksEnabled && } + {areUpgradeRisksEnabled && } diff --git a/src/Components/ClusterHeader/index.js b/src/Components/ClusterHeader/index.js index 428118d1..b3e0039a 100644 --- a/src/Components/ClusterHeader/index.js +++ b/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 ( { 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 = () => { {activeKey === 'recommendations' && } - {upgradeRisksEnabled && ( + {areUpgradeRisksEnabled && ( { variant="warning" isInline title={intl.formatMessage(messages.resolveUpgradeRisks)} + ouiaId="upgrade-risks-alert" > {intl.formatMessage(messages.resolveUpgradeRisksDesc, { strong })} @@ -32,12 +33,14 @@ const UpgradeRisksAlert = () => { variant="success" isInline title={intl.formatMessage(messages.noKnownUpgradeRisks)} + ouiaId="upgrade-risks-alert" /> ) : isError && error.status === 404 ? ( {intl.formatMessage(messages.upgradeRisksNotAvailableDesc)} diff --git a/src/Components/UpgradeRisksTable/useUpgradeRisksFeature.js b/src/Components/UpgradeRisksTable/useUpgradeRisksFeature.js new file mode 100644 index 00000000..a1c1a138 --- /dev/null +++ b/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; diff --git a/src/Services/SmartProxy.js b/src/Services/SmartProxy.js index eaa28427..9e33ee44 100644 --- a/src/Services/SmartProxy.js +++ b/src/Services/SmartProxy.js @@ -47,6 +47,7 @@ export const SmartProxyApi = createApi({ export const { endpoints: { getUpgradeRisks: { useQueryState: useGetUpgradeRisksState }, + getClusterInfo: { useQueryState: useGetClusterInfoState }, }, useGetClusterByIdQuery, useLazyGetClusterByIdQuery,