feat(THEEDGE-3539): Add update action to group details (#2103)

Implements https://issues.redhat.com/browse/THEEDGE-3539.
RedHatInsights · Nov 23, 2023 · 53ebfa8 · 53ebfa8
1 parent b0ec242
commit 53ebfa8
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 15 deletions.
diff --git a/src/api/edge/updates.js b/src/api/edge/updates.js
@@ -0,0 +1,9 @@
+import axios from 'axios';
+import { EDGE_API_BASE } from '../api';
+
+export const getInventoryGroupDevicesUpdateInfo = async (groupUUID) => {
+  const result = await axios.get(
+    `${EDGE_API_BASE}/updates/inventory-groups/${groupUUID}/update-info`
+  );
+  return result?.data;
+};
diff --git a/src/components/InventoryGroupDetail/EdgeUpdateDeviceModal.js b/src/components/InventoryGroupDetail/EdgeUpdateDeviceModal.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
+import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
+import { resolveRelPath } from '../../Utilities/path';
+import { getNotificationProp } from '../../Utilities/edge';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+const EdgeUpdateDeviceModal = (props) => {
+  const dispatch = useDispatch();
+  const notificationProp = getNotificationProp(dispatch);
+  return (
+    <AsyncComponent
+      appName="edge"
+      module="./UpdateDeviceModal"
+      ErrorComponent={<ErrorState />}
+      navigateProp={useNavigate}
+      locationProp={useLocation}
+      notificationProp={notificationProp}
+      pathPrefix={resolveRelPath('')}
+      fallback={null}
+      {...props}
+    />
+  );
+};
+
+export default EdgeUpdateDeviceModal;
diff --git a/src/components/InventoryGroupDetail/GroupDetailHeader.js b/src/components/InventoryGroupDetail/GroupDetailHeader.js
@@ -13,7 +13,7 @@ import {
   PageHeader,
   PageHeaderTitle,
 } from '@redhat-cloud-services/frontend-components';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -26,6 +26,9 @@ import {
   REQUIRED_PERMISSIONS_TO_READ_GROUP,
 } from '../../constants';
 import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate/useInsightsNavigate';
+import useFeatureFlag from '../../Utilities/useFeatureFlag';
+import EdgeUpdateDeviceModal from './EdgeUpdateDeviceModal';
+import { getInventoryGroupDevicesUpdateInfo } from '../../api/edge/updates';
 
 const GroupDetailHeader = ({ groupId }) => {
   const dispatch = useDispatch();
@@ -45,6 +48,29 @@ const GroupDetailHeader = ({ groupId }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [renameModalOpen, setRenameModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [edgeUpdateModal, setEdgeUpdateModal] = useState({
+    deviceData: [],
+    isOpen: false,
+  });
+  const [edgeDeviceUpdateInfo, setEdgeDeviceUpdateInfo] = useState(null);
+
+  const isEdgeParityGroupsEnabled = useFeatureFlag(
+    'edgeParity.inventory-groups-enabled'
+  );
+
+  useEffect(() => {
+    if (isEdgeParityGroupsEnabled) {
+      (async () => {
+        try {
+          const groupEdgeDevicesUpdateInfo =
+            await getInventoryGroupDevicesUpdateInfo(groupId);
+          setEdgeDeviceUpdateInfo(groupEdgeDevicesUpdateInfo);
+        } catch (error) {
+          console.error(error);
+        }
+      })();
+    }
+  }, [edgeUpdateModal]);
 
   const name = data?.results?.[0]?.name;
 
@@ -62,6 +88,27 @@ const GroupDetailHeader = ({ groupId }) => {
     return groupId;
   };
 
+  let dropdownItems = [
+    <DropdownItem key="rename-group" onClick={() => setRenameModalOpen(true)}>
+      Rename
+    </DropdownItem>,
+    <DropdownItem key="delete-group" onClick={() => setDeleteModalOpen(true)}>
+      Delete
+    </DropdownItem>,
+  ];
+
+  if (isEdgeParityGroupsEnabled) {
+    dropdownItems.push(
+      <DropdownItem
+        key="update-edge-devices"
+        onClick={() => setEdgeUpdateModal({ deviceData: [], isOpen: true })}
+        isDisabled={!edgeDeviceUpdateInfo?.update_valid}
+      >
+        Update
+      </DropdownItem>
+    );
+  }
+
   return (
     <PageHeader>
       {renameModalOpen && (
@@ -83,6 +130,13 @@ const GroupDetailHeader = ({ groupId }) => {
           groupIds={[groupId]}
         />
       )}
+      {edgeUpdateModal.isOpen && (
+        <EdgeUpdateDeviceModal
+          inventoryGroupUpdateDevicesInfo={edgeDeviceUpdateInfo}
+          updateModal={edgeUpdateModal}
+          setUpdateModal={setEdgeUpdateModal}
+        />
+      )}
       <Breadcrumb>
         <BreadcrumbItem>
           <Link to="../groups">Groups</Link>
@@ -112,20 +166,7 @@ const GroupDetailHeader = ({ groupId }) => {
                 Group actions
               </DropdownToggle>
             }
-            dropdownItems={[
-              <DropdownItem
-                key="rename-group"
-                onClick={() => setRenameModalOpen(true)}
-              >
-                Rename
-              </DropdownItem>,
-              <DropdownItem
-                key="delete-group"
-                onClick={() => setDeleteModalOpen(true)}
-              >
-                Delete
-              </DropdownItem>,
-            ]}
+            dropdownItems={dropdownItems}
           />
         </FlexItem>
       </Flex>

diff --git a/src/components/InventoryGroupDetail/__tests__/GroupDetailHeader.test.js b/src/components/InventoryGroupDetail/__tests__/GroupDetailHeader.test.js
@@ -6,6 +6,7 @@ import GroupDetailHeader from '../GroupDetailHeader';
 import { DROPDOWN } from '@redhat-cloud-services/frontend-components-utilities/CypressUtils/selectors';
 import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
 
+jest.mock('../../../Utilities/useFeatureFlag');
 jest.mock('react-redux', () => {
   return {
     ...jest.requireActual('react-redux'),