fix(RHINENG-11369): CreateGroupModal returns to previous modal

Author: darkeriossss

src/Routes/Devices/AddDeviceModal.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import validatorTypes from '@data-driven-forms/react-form-renderer/validator-types';
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
@@ -14,6 +14,7 @@ import { Button, Text } from '@patternfly/react-core';
 import useInventoryGroups from '../../hooks/useInventoryGroups';
 import { useFeatureFlags } from '../../utils';
 import { FEATURE_INVENTORY_WORKSPACES_RENAME } from '../../constants/features';
+import CreateGroupModal from '../Groups/CreateGroupModal';
 
 const CreateGroupButton = ({ closeModal, workspaceRename }) => (
   <>
@@ -61,13 +62,13 @@ const createSchema = (deviceIds, workspaceRename) => ({
 const AddDeviceModal = ({
   isModalOpen,
   setIsModalOpen,
-  setIsCreateGroupModalOpen,
   reloadData,
   deviceIds,
 }) => {
   const dispatch = useDispatch();
 
   const [inventoryGroupsEnabled] = useInventoryGroups(false);
+  const [isCreateGroupModalOpen, setIsCreateGroupModalOpen] = useState(false);
   const useWorkspacesRename = useFeatureFlags(
     FEATURE_INVENTORY_WORKSPACES_RENAME
   );
@@ -98,33 +99,46 @@ const AddDeviceModal = ({
     apiWithToast(dispatch, addDevicesToGroupFunc, statusMessages);
   };
   return (
-    <Modal
-      isOpen={isModalOpen}
-      closeModal={() => setIsModalOpen(false)}
-      title={`Add to ${
-        inventoryGroupsEnabled && useWorkspacesRename ? 'workspace' : 'group'
-      }`}
-      submitLabel="Add"
-      additionalMappers={{
-        'search-input': {
-          component: SearchInputApi,
-        },
-        'create-group-btn': {
-          component: CreateGroupButton,
-          closeModal: () => {
-            setIsCreateGroupModalOpen(true);
-            setIsModalOpen(false);
+    <>
+      <Modal
+        isOpen={isModalOpen && !isCreateGroupModalOpen}
+        closeModal={() => setIsModalOpen(false)}
+        title={`Add to ${
+          inventoryGroupsEnabled && useWorkspacesRename ? 'workspace' : 'group'
+        }`}
+        submitLabel="Add"
+        additionalMappers={{
+          'search-input': {
+            component: SearchInputApi,
+          },
+          'create-group-btn': {
+            component: CreateGroupButton,
+            closeModal: () => {
+              setIsCreateGroupModalOpen(true);
+            },
+            workspaceRename: inventoryGroupsEnabled && useWorkspacesRename,
           },
-          workspaceRename: inventoryGroupsEnabled && useWorkspacesRename,
-        },
-      }}
-      schema={createSchema(
-        deviceIds,
-        inventoryGroupsEnabled && useWorkspacesRename
+        }}
+        schema={createSchema(
+          deviceIds,
+          inventoryGroupsEnabled && useWorkspacesRename
+        )}
+        onSubmit={handleAddDevices}
+        reloadData={reloadData}
+      />
+      {isCreateGroupModalOpen && (
+        <CreateGroupModal
+          isModalOpen={isCreateGroupModalOpen}
+          setIsModalOpen={setIsCreateGroupModalOpen}
+          reloadData={reloadData}
+          deviceIds={deviceIds}
+          // hasHostModal makes sure the host modal is opened
+          // after this modal is closed
+          hasHostModal
+          setIsHostModalOpen={setIsModalOpen}
+        />
       )}
-      onSubmit={handleAddDevices}
-      reloadData={reloadData}
-    />
+    </>
   );
 };
 
@@ -133,7 +147,6 @@ export default AddDeviceModal;
 AddDeviceModal.propTypes = {
   isModalOpen: PropTypes.bool,
   setIsModalOpen: PropTypes.func,
-  setIsCreateGroupModalOpen: PropTypes.func,
   reloadData: PropTypes.func,
   deviceIds: PropTypes.array,
 };

src/Routes/Devices/Inventory.js

@@ -7,7 +7,6 @@ import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 import DeviceTable from './DeviceTable';
 import AddDeviceModal from './AddDeviceModal';
 import RemoveDeviceModal from './RemoveDeviceModal';
-import CreateGroupModal from '../Groups/CreateGroupModal';
 import useApi from '../../hooks/useApi';
 import { getInventory } from '../../api/devices';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -71,7 +70,6 @@ const Inventory = ({
   const [checkedDeviceIds, setCheckedDeviceIds] = useState([]);
   const [isRowSelected, setIsRowSelected] = useState(false);
   const [hasModalSubmitted, setHasModalSubmitted] = useState(false);
-  const [isCreateGroupModalOpen, setIsCreateGroupModalOpen] = useState(false);
   const dispatch = useDispatch();
 
   const [updateModal, setUpdateModal] = useState({
@@ -368,15 +366,6 @@ const Inventory = ({
         <AddDeviceModal
           isModalOpen={isAddDeviceModalOpen}
           setIsModalOpen={setIsAddDeviceModalOpen}
-          setIsCreateGroupModalOpen={setIsCreateGroupModalOpen}
-          reloadData={reloadData}
-          deviceIds={isRowSelected ? deviceId : checkedDeviceIds}
-        />
-      )}
-      {isCreateGroupModalOpen && (
-        <CreateGroupModal
-          isModalOpen={isCreateGroupModalOpen}
-          setIsModalOpen={setIsCreateGroupModalOpen}
           reloadData={reloadData}
           deviceIds={isRowSelected ? deviceId : checkedDeviceIds}
         />

src/Routes/Groups/CreateGroupModal.js

@@ -75,6 +75,8 @@ const CreateGroupModal = ({
   setIsModalOpen,
   deviceIds,
   reloadData,
+  hasHostModal = false,
+  setIsHostModalOpen,
 }) => {
   const dispatch = useDispatch();
 
@@ -131,10 +133,15 @@ const CreateGroupModal = ({
     apiWithToast(dispatch, addDevicesToGroupFunc, statusMessages);
   };
 
+  const onClose = () => {
+    setIsModalOpen(false);
+    hasHostModal && setIsHostModalOpen(true);
+  };
+
   return (
     <Modal
       isOpen={isModalOpen}
-      closeModal={() => setIsModalOpen(false)}
+      closeModal={onClose}
       title={`Create ${
         inventoryGroupsEnabled && useWorkspacesRename ? 'workspace' : 'group'
       }`}
@@ -156,4 +163,6 @@ CreateGroupModal.propTypes = {
   setIsModalOpen: PropTypes.func,
   reloadData: PropTypes.func,
   deviceIds: PropTypes.array,
+  hasHostModal: PropTypes.bool,
+  setIsHostModalOpen: PropTypes.func,
 };

src/Routes/ImageManagerDetail/__snapshots__/ImagePackagesTab.test.js.snap

@@ -8,7 +8,6 @@ exports[`ImagePackagesTab renders correctly 1`] = `
   data-ouia-safe="true"
   data-testid="toolbar-header-testid"
   id="toolbar-header"
-  style="padding: 0px;"
 >
   <div
     class="pf-v5-c-toolbar__content"

src/Routes/ImageManagerDetail/__snapshots__/ImageVersionsTab.test.js.snap

@@ -8,7 +8,6 @@ exports[`ImageVersionsTab renders correctly 1`] = `
   data-ouia-safe="true"
   data-testid="toolbar-header-testid"
   id="toolbar-header"
-  style="padding: 0px;"
 >
   <div
     class="pf-v5-c-toolbar__content"

src/Routes/Repositories/__snapshots__/RepositoryTable.test.js.snap

@@ -8,7 +8,6 @@ exports[`RepositoryTable renders correctly 1`] = `
   data-ouia-safe="true"
   data-testid="toolbar-header-testid"
   id="toolbar-header"
-  style="padding: 0px;"
 >
   <div
     class="pf-v5-c-toolbar__content"

src/components/Modal.js

@@ -72,6 +72,7 @@ RepoModal.propTypes = {
   additionalMappers: PropTypes.object,
   titleIconVariant: PropTypes.any,
   validatorMapper: PropTypes.object,
+  onCancel: PropTypes.func,
 };
 
 export default RepoModal;

src/components/general-table/ToolbarHeader.js

@@ -44,11 +44,7 @@ const ToolbarHeader = ({
   kebabItems,
 }) => {
   return (
-    <Toolbar
-      style={{ padding: '0' }}
-      id="toolbar-header"
-      data-testid="toolbar-header-testid"
-    >
+    <Toolbar id="toolbar-header" data-testid="toolbar-header-testid">
       <ToolbarContent>
         <FilterControls
           filters={filters}

src/components/general-table/__snapshots__/GeneralTable.test.js.snap

@@ -8,7 +8,6 @@ exports[`General table should render correctly 1`] = `
   data-ouia-safe="true"
   data-testid="toolbar-header-testid"
   id="toolbar-header"
-  style="padding: 0px;"
 >
   <div
     class="pf-v5-c-toolbar__content"

src/components/general-table/__snapshots__/ToolbarHeader.test.js.snap

@@ -8,7 +8,6 @@ exports[`Toolbar Header should render correctly 1`] = `
   data-ouia-safe="true"
   data-testid="toolbar-header-testid"
   id="toolbar-header"
-  style="padding: 0px;"
 >
   <div
     class="pf-v5-c-toolbar__content"