From 8add871ae79173a9d1ddb962d7c18670341d9220 Mon Sep 17 00:00:00 2001
From: Djebran Lezzoum <ldjebran@gmail.com>
Date: Mon, 11 Dec 2023 13:45:35 +0100
Subject: [PATCH] feat(THEEDGE-3758): show both tabs when adding systems to
 group

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.
FIXES: https://issues.redhat.com/browse/THEEDGE-3758
---
 .../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;