feat(SingleClusterPage): New dropdown and action button

compiled-lang/en.json

@@ -4,6 +4,7 @@
   "all": "All",
   "cancel": "Cancel",
   "category": "Category",
+  "clusterDetailsRedirect": "View cluster details",
   "clusterName": "Cluster name",
   "clusters": "Clusters",
   "comingSoonBody": "We’re currently working on this page. In the meantime, you can visit the Insights Advisor recommendations page to view potential issues with your clusters.",
@@ -17,6 +18,7 @@
   "disableRuleSingleCluster": "Disable only for this cluster",
   "disabled": "Disabled",
   "documentTitle": "{subnav} - OCP Advisor | Red Hat Insights",
+  "dropDownActionSingleCluster": "Action",
   "enable": "Enable",
   "enableRule": "Enable recommendation",
   "enableRuleForClusters": "Enable this recommendation for all clusters",

src/App.scss

@@ -12,4 +12,8 @@
 .pf-c-table tr > *:first-child {
     --pf-c-table--cell--PaddingLeft: 1rem;
     --pf-c-table--cell--PaddingRight: 1rem;
+}
+
+#cluster-header-dropdown {
+    justify-self: end;
 }

src/Components/ClusterHeader/ClusterHeader.js

@@ -1,17 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import { Grid, GridItem } from '@patternfly/react-core/dist/js/layouts/Grid';
 import { Stack, StackItem } from '@patternfly/react-core/dist/js/layouts/Stack';
 import { Title } from '@patternfly/react-core/dist/js/components/Title';
+import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
 import Skeleton from '@redhat-cloud-services/frontend-components/Skeleton';
 import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat/DateFormat';
 
 import messages from '../../Messages';
 import { OneLineLoader } from '../../Utilities/Loaders';
 
 export const ClusterHeader = ({ clusterId, clusterData }) => {
+  const location = window.location;
+  const [isOpen, setIsOpen] = useState(false);
   const intl = useIntl();
   // subscribe to the cluster data query
   const {
@@ -20,9 +23,23 @@ export const ClusterHeader = ({ clusterId, clusterData }) => {
     data: cluster,
   } = clusterData;
 
+  const redirectOCM = (clusterId) => {
+    location.assign(
+      location.origin +
+        (location.pathname.includes('beta') ? `/beta` : '') +
+        `/openshift/details/${clusterId}`
+    );
+  };
+
+  const dropDownItems = [
+    <DropdownItem key="link" onClick={() => redirectOCM(clusterId)}>
+      <snap>{intl.formatMessage(messages.clusterDetailsRedirect)}</snap>
+    </DropdownItem>,
+  ];
+
   return (
     <Grid id="cluster-header" md={12} hasGutter>
-      <GridItem>
+      <GridItem span={8}>
         {isUninitializedCluster || isFetchingCluster ? (
           <Skeleton size="sm" />
         ) : (
@@ -36,6 +53,23 @@ export const ClusterHeader = ({ clusterId, clusterData }) => {
           </Title>
         )}
       </GridItem>
+      <GridItem span={4} id="cluster-header-dropdown">
+        <Dropdown
+          position="right"
+          onSelect={() => setIsOpen(!isOpen)}
+          autoFocus={false}
+          isOpen={isOpen}
+          toggle={
+            <DropdownToggle
+              id="toggle-id-2"
+              onToggle={(isOpen) => setIsOpen(isOpen)}
+            >
+              {intl.formatMessage(messages.dropDownActionSingleCluster)}
+            </DropdownToggle>
+          }
+          dropdownItems={dropDownItems}
+        />
+      </GridItem>
       <GridItem>
         <Stack>
           <StackItem id="cluster-header-uuid">

src/Components/ClusterHeader/ClusterHeader.spec.ct.js

@@ -78,4 +78,15 @@ describe('cluster page header', () => {
     // check uuid text
     cy.get(UUID_FIELD).should('have.text', 'foobar');
   });
+
+  it('action redirect button works', () => {
+    mount(
+      <Intl>
+        <ClusterHeader {...props} />
+      </Intl>
+    );
+    cy.get('.pf-c-dropdown__toggle').click();
+    cy.get('a[class=pf-c-dropdown__menu-item]').click();
+    cy.url().should('include', 'openshift/details/' + props.clusterId);
+  });
 });

src/Messages.js

@@ -189,6 +189,12 @@ export default defineMessages({
     description: 'Filter action, reset all filter chips',
     defaultMessage: 'Reset filters',
   },
+  clusterDetailsRedirect: {
+    id: 'clusterDetailsRedirect',
+    description:
+      'Dropdown on the single cluster page, redirects user to the OCM',
+    defaultMessage: 'View cluster details',
+  },
   noMatchingRecsTitle: {
     id: 'noMatchingRecommendationsTitle',
     defaultMessage: 'No matching recommendations found',
@@ -431,6 +437,11 @@ export default defineMessages({
       'Explaining the action of disabling a recommendation for a single cluster',
     defaultMessage: 'Disable only for this cluster',
   },
+  dropDownActionSingleCluster: {
+    id: 'dropDownActionSingleCluster',
+    description: 'Default text for the dropdown on the single cluster page',
+    defaultMessage: 'Action',
+  },
   disableRuleBody: {
     id: 'disableRuleBody',
     description: 'Explaining the action of disabling a recommendation',