feat(OCPADVISOR-70): Enable "Upgrade Risks" tab on the cluster detail…

…s view (#541) Implements https://issues.redhat.com/browse/OCPADVISOR-70.
RedHatInsights · Apr 6, 2023 · c47ac72 · c47ac72
1 parent cc84d19
commit c47ac72
Show file tree

Hide file tree

Showing 9 changed files with 224 additions and 55 deletions.
diff --git a/compiled-lang/en.json b/compiled-lang/en.json
@@ -115,6 +115,7 @@
   "unableToConnectDesc": "There was an error retrieving data. Check your connection and try again.",
   "undefined": "Undefined",
   "unknown": "Unknown",
+  "upgradeRisks": "Upgrade risks",
   "version": "Version",
   "veryLow": "Very Low",
   "viewAffectedClusters": "View {clusters, plural, one {the affected cluster} other {# affected clusters}}",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "nightly": "npm run deploy",
     "start": "webpack serve --config config/dev.webpack.config.js",
     "start:beta": "BETA=true npm start",
+    "start:proxy:beta": "npm run start:beta",
     "start:beta:mock": "BETA=true MOCK=true npm start",
     "test:ct": "BABEL_ENV=component cypress run --component",
     "test:jest": "TZ=UTC jest --verbose --passWithNoTests --no-cache",
@@ -35,6 +36,7 @@
     "@redhat-cloud-services/frontend-components-utilities": "^3.3.13",
     "@redhat-cloud-services/rule-components": "^3.2.6",
     "@reduxjs/toolkit": "1.8.6",
+    "@unleash/proxy-client-react": "^3.5.2",
     "axios": "^0.27.2",
     "babel-plugin-formatjs": "^10.3.31",
     "classnames": "^2.3.1",

diff --git a/src/Components/Cluster/Cluster.cy.js b/src/Components/Cluster/Cluster.cy.js
@@ -11,6 +11,7 @@ import {
   checkNoMatchingRecs,
   checkRowCounts,
 } from '../../../cypress/utils/table';
+import FlagProvider from '@unleash/proxy-client-react';
 
 // selectors
 const CLUSTER_HEADER = '#cluster-header';
@@ -42,13 +43,15 @@ describe('cluster page', () => {
 
   it('cluster page in the successful state', () => {
     mount(
-      <MemoryRouter>
-        <Intl>
-          <Provider store={getStore()}>
-            <Cluster {...props} />
-          </Provider>
-        </Intl>
-      </MemoryRouter>
+      <FlagProvider>
+        <MemoryRouter>
+          <Intl>
+            <Provider store={getStore()}>
+              <Cluster {...props} />
+            </Provider>
+          </Intl>
+        </MemoryRouter>
+      </FlagProvider>
     );
     // renders breadcrumbs
     cy.get(BREADCRUMBS)
@@ -74,13 +77,15 @@ describe('cluster page', () => {
       },
     };
     mount(
-      <MemoryRouter>
-        <Intl>
-          <Provider store={getStore()}>
-            <Cluster {...props} />
-          </Provider>
-        </Intl>
-      </MemoryRouter>
+      <FlagProvider>
+        <MemoryRouter>
+          <Intl>
+            <Provider store={getStore()}>
+              <Cluster {...props} />
+            </Provider>
+          </Intl>
+        </MemoryRouter>
+      </FlagProvider>
     );
     // renders breadcrumbs
     cy.get(BREADCRUMBS).should('have.length', 1);
@@ -103,13 +108,15 @@ describe('cluster page', () => {
       },
     };
     mount(
-      <MemoryRouter>
-        <Intl>
-          <Provider store={getStore()}>
-            <Cluster {...props} />
-          </Provider>
-        </Intl>
-      </MemoryRouter>
+      <FlagProvider>
+        <MemoryRouter>
+          <Intl>
+            <Provider store={getStore()}>
+              <Cluster {...props} />
+            </Provider>
+          </Intl>
+        </MemoryRouter>
+      </FlagProvider>
     );
     // renders breadcrumbs
     cy.get(BREADCRUMBS).should('have.length', 1);
@@ -122,13 +129,17 @@ describe('cluster page', () => {
 
   it('adds additional filters passed by the query parameters №1', () => {
     mount(
-      <MemoryRouter initialEntries={['?total_risk=1&text=foo+bar&category=2']}>
-        <Intl>
-          <Provider store={getStore()}>
-            <Cluster {...props} />
-          </Provider>
-        </Intl>
-      </MemoryRouter>
+      <FlagProvider>
+        <MemoryRouter
+          initialEntries={['?total_risk=1&text=foo+bar&category=2']}
+        >
+          <Intl>
+            <Provider store={getStore()}>
+              <Cluster {...props} />
+            </Provider>
+          </Intl>
+        </MemoryRouter>
+      </FlagProvider>
     );
     cy.get(BREADCRUMBS);
     cy.get(CLUSTER_HEADER);
@@ -141,13 +152,15 @@ describe('cluster page', () => {
 
   it('adds additional filters passed by the query parameters №2', () => {
     mount(
-      <MemoryRouter initialEntries={['?total_risk=2&text=foo&category=1']}>
-        <Intl>
-          <Provider store={getStore()}>
-            <Cluster {...props} />
-          </Provider>
-        </Intl>
-      </MemoryRouter>
+      <FlagProvider>
+        <MemoryRouter initialEntries={['?total_risk=2&text=foo&category=1']}>
+          <Intl>
+            <Provider store={getStore()}>
+              <Cluster {...props} />
+            </Provider>
+          </Intl>
+        </MemoryRouter>
+      </FlagProvider>
     );
     cy.get(BREADCRUMBS);
     cy.get(CLUSTER_HEADER);
@@ -180,13 +193,15 @@ describe('Cluster page display name test №1', () => {
 
   it('Cluster breadcrumbs name should be Cluster With Issues', () => {
     mount(
-      <MemoryRouter>
-        <Intl>
-          <Provider store={getStore()}>
-            <Cluster {...props} />
-          </Provider>
-        </Intl>
-      </MemoryRouter>
+      <FlagProvider>
+        <MemoryRouter>
+          <Intl>
+            <Provider store={getStore()}>
+              <Cluster {...props} />
+            </Provider>
+          </Intl>
+        </MemoryRouter>
+      </FlagProvider>
     );
     cy.get(BREADCRUMBS)
       .should('have.length', 1)
@@ -196,15 +211,17 @@ describe('Cluster page display name test №1', () => {
 
   it('Cluster breadcrumbs name should be = Cluster Id', () => {
     mount(
-      <MemoryRouter>
-        <Intl>
-          <Provider store={getStore()}>
-            <Cluster
-              {...{ ...props, cluster: { ...props.cluster, data: null } }}
-            />
-          </Provider>
-        </Intl>
-      </MemoryRouter>
+      <FlagProvider>
+        <MemoryRouter>
+          <Intl>
+            <Provider store={getStore()}>
+              <Cluster
+                {...{ ...props, cluster: { ...props.cluster, data: null } }}
+              />
+            </Provider>
+          </Intl>
+        </MemoryRouter>
+      </FlagProvider>
     );
     cy.get(BREADCRUMBS)
       .should('have.length', 1)

diff --git a/src/Components/Cluster/Cluster.js b/src/Components/Cluster/Cluster.js
@@ -5,8 +5,9 @@ import PropTypes from 'prop-types';
 
 import PageHeader from '@redhat-cloud-services/frontend-components/PageHeader';
 import ClusterHeader from '../ClusterHeader';
-import ClusterRules from '../ClusterRules/ClusterRules';
 import Breadcrumbs from '../Breadcrumbs';
+import ClusterTabs from '../ClusterTabs/ClusterTabs';
+import { PageSection } from '@patternfly/react-core';
 
 export const Cluster = ({ cluster, clusterId }) => {
   // TODO: make breadcrumbs take display name from GET /cluster/id/info
@@ -18,9 +19,9 @@ export const Cluster = ({ cluster, clusterId }) => {
         />
         <ClusterHeader />
       </PageHeader>
-      <section className="pf-l-page__main-section pf-c-page__main-section">
-        <ClusterRules cluster={cluster} />
-      </section>
+      <PageSection>
+        <ClusterTabs cluster={cluster} />
+      </PageSection>
     </React.Fragment>
   );
 };

diff --git a/src/Components/ClusterTabs/ClusterTabs.js b/src/Components/ClusterTabs/ClusterTabs.js
@@ -0,0 +1,64 @@
+import { Card, CardBody, Tab, Tabs } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import { useIntl } from 'react-intl';
+import { 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 { ComingSoon } from '../MessageState/EmptyStates';
+
+const CLUSTER_TABS = ['recommendations', 'upgrade_risks'];
+
+const ClusterTabs = ({ cluster }) => {
+  const intl = useIntl();
+  const upgradeRisksEnabled = useUpgradeRisksFeatureFlag();
+  const [searchParams] = useSearchParams();
+
+  const [activeKey, setActiveKey] = useState(() => {
+    const activeTab = searchParams.get('active_tab');
+    return upgradeRisksEnabled
+      ? CLUSTER_TABS.includes(activeTab)
+        ? activeTab
+        : 'recommendations'
+      : 'recommendations';
+  });
+
+  return (
+    <Card isCompact>
+      <CardBody>
+        <Tabs
+          activeKey={activeKey}
+          onSelect={(event, key) => {
+            setSearchParameter('active_tab', key);
+            setActiveKey(key);
+          }}
+          aria-label="Cluster tabs"
+        >
+          <Tab
+            eventKey="recommendations"
+            title={intl.formatMessage(messages.recommendations)}
+          >
+            <ClusterRules cluster={cluster} />
+          </Tab>
+          {upgradeRisksEnabled && (
+            <Tab
+              eventKey="upgrade_risks"
+              title={intl.formatMessage(messages.upgradeRisks)}
+            >
+              <ComingSoon />
+            </Tab>
+          )}
+        </Tabs>
+      </CardBody>
+    </Card>
+  );
+};
+
+ClusterTabs.propTypes = {
+  cluster: PropTypes.object,
+};
+
+export default ClusterTabs;
diff --git a/src/Messages.js b/src/Messages.js
@@ -642,4 +642,9 @@ export default defineMessages({
     defaultMessage:
       'The risk of change is <strong>{ level }</strong>, because the change takes very little time to implement and there is minimal impact to system operations.',
   },
+  upgradeRisks: {
+    id: 'upgradeRisks',
+    description: 'Upgrade risks text',
+    defaultMessage: 'Upgrade risks',
+  },
 });