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.
RedHatInsights · Dec 14, 2023 · fb656c6 · fb656c6
1 parent d9c6f62
commit fb656c6
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;