fix(THEEDGE-3564): Add missing update action button to edge systems (#…

…2032)

Co-authored-by: Demetrius Lima <[email protected]>

config/overrideChrome.js

@@ -1,4 +1,4 @@
-export default () => ({
+const chromeMock = {
   updateDocumentTitle: () => undefined,
   isBeta: () => false,
   appAction: () => {},
@@ -7,4 +7,26 @@ export default () => ({
   getApp: () => 'inventory',
   getBundle: () => 'rhel',
   getUserPermissions: () => [{ permission: 'inventory:*:*' }],
-});
+  auth: {
+    getUser: () =>
+      Promise.resolve({
+        identity: {
+          account_number: '0',
+          type: 'User',
+          user: {
+            is_org_admin: true,
+          },
+        },
+        entitlements: {
+          hybrid_cloud: { is_entitled: true },
+          insights: { is_entitled: true },
+          openshift: { is_entitled: true },
+          smart_management: { is_entitled: false },
+        },
+      }),
+  },
+};
+
+export default () => chromeMock;
+
+export const useChrome = () => chromeMock;

cypress/support/interceptors.js

@@ -236,3 +236,14 @@ export const featureFlagsInterceptors = {
     }).as('getFeatureFlag');
   },
 };
+
+export const edgeInterceptors = {
+  successful: () => {
+    cy.intercept('GET', '/api/edge/v1/devices/*', {
+      statusCode: 200,
+      body: {
+        UpdatesAvailable: [],
+      },
+    }).as('getDevice');
+  },
+};

src/routes/InventoryDetail.cy.js

@@ -1,5 +1,6 @@
 /* eslint-disable rulesdir/disallow-fec-relative-imports */
 import {
+  edgeInterceptors,
   featureFlagsInterceptors,
   hostsDetailInterceptors,
   hostsDetailTagsInterceptors,
@@ -21,6 +22,7 @@ const waitForLoad = () => {
 };
 const prepareTest = (hostDetail = hostDetail) => {
   featureFlagsInterceptors.successful();
+  edgeInterceptors.successful();
   systemProfileInterceptors['full system profile, successful with response']();
   hostsDetailInterceptors.successful(hostDetail);
   hostsDetailTagsInterceptors.successful();

src/routes/InventoryDetail.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 import {
   Link,
+  useLocation,
   useNavigate,
   useParams,
   useSearchParams,
@@ -20,6 +21,8 @@ import { GeneralInformationTab } from '../components/SystemDetails';
 import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
 import { REQUIRED_PERMISSION_TO_MODIFY_HOST_IN_GROUP } from '../constants';
 import ApplicationTab from '../ApplicationTab';
+import { useGetDevice } from '../api/edge/imagesInfo';
+import useFeatureFlag from '../Utilities/useFeatureFlag';
 
 const appList = {
   'CENTOS-LINUX': [
@@ -107,6 +110,7 @@ const Inventory = () => {
   const [searchParams] = useSearchParams();
   const store = useStore();
   const navigate = useNavigate();
+  const location = useLocation();
   const dispatch = useDispatch();
   const [availableApps, setAvailableApps] = useState([]);
   const entityLoaded = useSelector(
@@ -116,6 +120,10 @@ const Inventory = () => {
   const { cloud_provider: cloudProvider, host_type: hostType } = useSelector(
     ({ systemProfileStore }) => systemProfileStore?.systemProfile || []
   );
+  const getDevice = useGetDevice();
+  const [deviceData, setDeviceData] = useState(null);
+  const enableEdgeUpdate = useFeatureFlag('edgeParity.inventory-system-detail');
+
   useEffect(() => {
     let osSlug =
       entity?.system_profile?.operating_system?.name
@@ -137,8 +145,6 @@ const Inventory = () => {
     setAvailableApps(newApps);
   }, [entity, cloudProvider]);
 
-  const clearNotifications = () => dispatch(actions.clearNotifications());
-
   const { hasAccess: canDeleteHost } = usePermissionsWithContext([
     REQUIRED_PERMISSION_TO_MODIFY_HOST_IN_GROUP(
       entity?.groups?.[0]?.id ?? null // null stands for ungroupped hosts
@@ -148,9 +154,13 @@ const Inventory = () => {
   useEffect(() => {
     chrome?.hideGlobalFilter?.(true);
     chrome.appAction('system-detail');
-    clearNotifications();
 
     inventoryId && dispatch(actions.systemProfile(inventoryId));
+
+    (async () => {
+      const device = await getDevice(inventoryId);
+      setDeviceData(device);
+    })();
   }, []);
 
   const additionalClasses = {
@@ -178,6 +188,25 @@ const Inventory = () => {
     [searchParams]
   );
 
+  const actionsEdge =
+    enableEdgeUpdate && hostType === 'edge'
+      ? [
+          {
+            title: 'Update',
+            isDisabled:
+              deviceData?.UpdateTransactions?.[0]?.Status === 'BUILDING' ||
+              deviceData?.UpdateTransactions?.[0]?.Status === 'CREATED' ||
+              !deviceData?.ImageInfo?.UpdatesAvailable?.length > 0,
+            onClick: () => {
+              navigate({
+                pathname: `${location.pathname}/update`,
+                search: '?from_details=true',
+              });
+            },
+          },
+        ]
+      : [];
+
   return (
     <InventoryDetail
       additionalClasses={additionalClasses}
@@ -202,6 +231,7 @@ const Inventory = () => {
       activeApp={searchParams.get('appName')}
       appList={availableApps}
       onTabSelect={onTabSelect}
+      actions={actionsEdge}
     />
   );
 };

src/routes/SystemUpdate.js

@@ -3,9 +3,13 @@ import React, { useEffect } from 'react';
 import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { getNotificationProp } from '../Utilities/edge';
+import { useDispatch } from 'react-redux';
 
 const SystemUpdate = () => {
   const chrome = useChrome();
+  const dispatch = useDispatch();
+  const notificationProp = getNotificationProp(dispatch);
 
   useEffect(() => {
     chrome?.updateDocumentTitle?.('Inventory Groups | Red Hat Insights');
@@ -18,6 +22,7 @@ const SystemUpdate = () => {
       module="./UpdateSystem"
       navigateProp={useNavigate}
       locationProp={useLocation}
+      notificationProp={notificationProp}
       paramsProp={useParams}
       inventoryId={inventoryId}
     />