From fb656c6bdc42cd24d5e36f1887578b71189e4bc0 Mon Sep 17 00:00:00 2001
From: Djebran Lezzoum <ldjebran@gmail.com>
Date: Thu, 14 Dec 2023 18:43:10 +0200
Subject: [PATCH] feat(THEEDGE-3758): Show both tabs when adding systems to
 group (#2120)

Implements https://issues.redhat.com/browse/THEEDGE-3758.

Show both tabs when adding systems to group, when adding conventional systems, conventional tab should be selected by default and when adding immutable systems, immutable tab should be selected by default.
---
 .../GroupSystems/GroupImmutableSystems.js     |  3 +++
 src/components/GroupSystems/GroupSystems.js   |  3 +++
 .../Modals/AddSystemsToGroupModal.js          | 19 +++++++++++++------
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/GroupSystems/GroupImmutableSystems.js b/src/components/GroupSystems/GroupImmutableSystems.js
index 5c4129238..bd7b92601 100644
--- a/src/components/GroupSystems/GroupImmutableSystems.js
+++ b/src/components/GroupSystems/GroupImmutableSystems.js
@@ -30,6 +30,7 @@ import {
 } from '../../Utilities/edge';
 import { edgeColumns } from '../ImmutableDevices/columns';
 import { mergeArraysByKey } from '@redhat-cloud-services/frontend-components-utilities/helpers';
+import { hybridInventoryTabKeys } from '../../Utilities/constants';
 export const prepareColumns = (
   initialColumns,
   hideGroupColumn,
@@ -212,6 +213,8 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
           }}
           groupId={groupId}
           groupName={groupName}
+          edgeParityIsAllowed={true}
+          activeTab={hybridInventoryTabKeys.immutable.key}
         />
       )}
       {removeHostsFromGroupModalOpen && (
diff --git a/src/components/GroupSystems/GroupSystems.js b/src/components/GroupSystems/GroupSystems.js
index af4614465..e91e3080e 100644
--- a/src/components/GroupSystems/GroupSystems.js
+++ b/src/components/GroupSystems/GroupSystems.js
@@ -21,6 +21,7 @@ import { useBulkSelectConfig } from '../../Utilities/hooks/useBulkSelectConfig';
 import difference from 'lodash/difference';
 import map from 'lodash/map';
 import useGlobalFilter from '../filters/useGlobalFilter';
+import { hybridInventoryTabKeys } from '../../Utilities/constants';
 
 export const prepareColumns = (
   initialColumns,
@@ -126,6 +127,8 @@ const GroupSystems = ({ groupName, groupId }) => {
           }}
           groupId={groupId}
           groupName={groupName}
+          edgeParityIsAllowed={true}
+          activeTab={hybridInventoryTabKeys.conventional.key}
         />
       )}
       {removeHostsFromGroupModalOpen && (
diff --git a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js
index e45612ac1..243a1c138 100644
--- a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js
+++ b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js
@@ -31,6 +31,7 @@ import useFeatureFlag from '../../../Utilities/useFeatureFlag';
 import { PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
 import { InfoCircleIcon } from '@patternfly/react-icons';
 import { AccountStatContext } from '../../../Routes';
+import { hybridInventoryTabKeys } from '../../../Utilities/constants';
 
 const AddSystemsToGroupModal = ({
   isModalOpen,
@@ -38,6 +39,7 @@ const AddSystemsToGroupModal = ({
   groupId,
   groupName,
   edgeParityIsAllowed,
+  activeTab,
 }) => {
   const dispatch = useDispatch();
 
@@ -135,10 +137,14 @@ const AddSystemsToGroupModal = ({
     alreadyHasGroup.length > 0 || immutableDevicesAlreadyHasGroup.length > 0;
 
   const { hasEdgeDevices } = useContext(AccountStatContext);
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTabKey, setActiveTabKey] = useState(
+    hybridInventoryTabKeys[activeTab] === undefined
+      ? hybridInventoryTabKeys.conventional.key
+      : activeTab
+  );
 
-  const handleTabClick = (_event, tabIndex) => {
-    setActiveTab(tabIndex);
+  const handleTabClick = (_event, tabKey) => {
+    setActiveTabKey(tabKey);
   };
 
   let overallSelectedText;
@@ -248,18 +254,18 @@ const AddSystemsToGroupModal = ({
           {edgeParityEnabled && hasEdgeDevices ? (
             <Tabs
               className="pf-m-light pf-c-table"
-              activeKey={activeTab}
+              activeKey={activeTabKey}
               onSelect={handleTabClick}
               aria-label="Hybrid inventory tabs"
             >
               <Tab
-                eventKey={0}
+                eventKey={hybridInventoryTabKeys.conventional.key}
                 title={<TabTitleText>Conventional (RPM-DNF)</TabTitleText>}
               >
                 {ConventionalInventoryTable}
               </Tab>
               <Tab
-                eventKey={1}
+                eventKey={hybridInventoryTabKeys.immutable.key}
                 title={<TabTitleText>Immutable (OSTree)</TabTitleText>}
               >
                 <section className={'pf-c-toolbar'}>
@@ -288,6 +294,7 @@ AddSystemsToGroupModal.propTypes = {
   groupId: PropTypes.string,
   groupName: PropTypes.string,
   edgeParityIsAllowed: PropTypes.bool,
+  activeTab: PropTypes.string,
 };
 
 export default AddSystemsToGroupModal;