fix(ESSNTL-3730): Refresh groups when new created (#1857)

Addresses https://issues.redhat.com/browse/ESSNTL-3730?focusedId=22178599&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-22178599.
RedHatInsights · May 10, 2023 · 9488163 · 9488163
1 parent ee69adc
commit 9488163
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/src/components/InventoryGroups/Modals/AddHostToGroupModal.js b/src/components/InventoryGroups/Modals/AddHostToGroupModal.js
@@ -1,11 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, {  useState } from 'react';
 import PropTypes from 'prop-types';
 import Modal from './Modal';
 import { addHostToGroup } from '../utils/api';
 import apiWithToast from '../utils/apiWithToast';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch  } from 'react-redux';
 import { CreateGroupButton } from '../SmallComponents/CreateGroupButton';
-import { fetchGroups } from '../../../store/inventory-actions';
 import { addHostSchema } from './ModalSchemas/schemes';
 import CreateGroupModal from './CreateGroupModal';
 
@@ -15,14 +14,7 @@ const AddHostToGroupModal = ({
     modalState,
     reloadData
 }) => {
-
     const dispatch = useDispatch();
-    //we have to fetch groups to make them available in state
-    useEffect(() => {
-        dispatch(fetchGroups());
-    }, []);
-
-    const groups = useSelector(({ groups }) => groups?.data?.results);
 
     const [isCreateGroupModalOpen, setIsCreateGroupModalOpen] = useState(false);
     const handleAddDevices = (values) => {
@@ -49,7 +41,7 @@ const AddHostToGroupModal = ({
                 closeModal={() => setIsModalOpen(false)}
                 title="Add to group"
                 submitLabel="Add"
-                schema={addHostSchema(modalState.name, groups)}
+                schema={addHostSchema(modalState.name)}
                 additionalMappers={{
                     'create-group-btn': {
                         component: CreateGroupButton,
@@ -67,7 +59,6 @@ const AddHostToGroupModal = ({
                 <CreateGroupModal
                     isModalOpen={isCreateGroupModalOpen}
                     setIsModalOpen={setIsCreateGroupModalOpen}
-                    reloadData={() => console.log('data reloaded')}
                     //modal before prop tells create group modal that it should
                     //reopen add host modal when user closes create group modal
                     modalBefore={true}

diff --git a/src/components/InventoryGroups/Modals/ModalSchemas/schemes.js b/src/components/InventoryGroups/Modals/ModalSchemas/schemes.js
@@ -3,6 +3,7 @@ import validatorTypes from '@data-driven-forms/react-form-renderer/validator-typ
 import componentTypes from '@data-driven-forms/react-form-renderer/component-types';
 import { nameValidator } from '../../helpers/validate';
 import { Text } from '@patternfly/react-core';
+import { getGroups } from '../../utils/api';
 
 export const createGroupSchema = (namePresenceValidator) => ({
     fields: [
@@ -45,15 +46,16 @@ export const confirmSystemsAddSchema = (hostsNumber) => ({
 const createDescription = (systemName) => {
     return (
         <Text>
-        Select a group to add <strong>{systemName}</strong> to, or create a new one.
+      Select a group to add <strong>{systemName}</strong> to, or create a new
+      one.
         </Text>
     );
 };
 
 //this is a custom schema that is passed via additional mappers to the Modal component
 //it allows to create custom item types in the modal
 
-export const addHostSchema = (systemName, groups) => ({
+export const addHostSchema = (systemName) => ({
     fields: [
         {
             component: componentTypes.PLAIN_TEXT,
@@ -69,12 +71,26 @@ export const addHostSchema = (systemName, groups) => ({
             isRequired: true,
             isClearable: true,
             placeholder: 'Type or click to select a group',
-            options: (groups || []).map(({ id, name }) => ({
-                label: name,
-                value: { name, id }
-            })),
+            loadOptions: (searchValue = '') =>
+                getGroups().then(({ results = [] }) => {
+                    return results.reduce((acc, { name, id }) => {
+                        if (name.toLowerCase().includes(searchValue.trim().toLowerCase())) {
+                            return [
+                                ...acc,
+                                {
+                                    label: name,
+                                    value: { name, id }
+                                }
+                            ];
+                        }
+                    }, []);
+                }),
             validate: [{ type: validatorTypes.REQUIRED }]
         },
-        { component: 'create-group-btn', name: 'create-group-btn', isRequired: true }
+        {
+            component: 'create-group-btn',
+            name: 'create-group-btn',
+            isRequired: true
+        }
     ]
 });