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
RedHatInsights · Dec 14, 2023 · 8add871 · 8add871
1 parent aff72b5
commit 8add871
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -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
@@ -31,13 +31,15 @@ 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,
   setIsModalOpen,
   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;