Add toast and delete modal messaging when removing/adding peers. (#14373)

awx/ui/src/screens/Instances/InstancePeers/InstancePeerList.js

@@ -11,6 +11,7 @@ import DisassociateButton from 'components/DisassociateButton';
 import AssociateModal from 'components/AssociateModal';
 import ErrorDetail from 'components/ErrorDetail';
 import AlertModal from 'components/AlertModal';
+import useToast, { AlertVariant } from 'hooks/useToast';
 import { getQSConfig, parseQueryString, mergeParams } from 'util/qs';
 import { useLocation, useParams } from 'react-router-dom';
 import useRequest, { useDismissableError } from 'hooks/useRequest';
@@ -30,6 +31,7 @@ function InstancePeerList({ setBreadcrumb }) {
   const location = useLocation();
   const { id } = useParams();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { addToast, Toast, toastProps } = useToast();
   const readInstancesOptions = useCallback(
     () => InstancesAPI.readOptions(id),
     [id]
@@ -114,8 +116,14 @@ function InstancePeerList({ setBreadcrumb }) {
         ];
         await InstancesAPI.update(instance.id, { peers: new_peers });
         fetchPeers();
+        addToast({
+          id: instancesPeerToAssociate,
+          title: t`${selected_hostname} added as a peer. Please be sure to run the install bundle for ${instance.hostname} again in order to see changes take effect.`,
+          variant: AlertVariant.success,
+          hasTimeout: true,
+        });
       },
-      [instance, fetchPeers]
+      [instance, fetchPeers, addToast]
     )
   );
 
@@ -134,7 +142,12 @@ function InstancePeerList({ setBreadcrumb }) {
       }
       await InstancesAPI.update(instance.id, { peers: new_peers });
       fetchPeers();
-    }, [instance, selected, fetchPeers])
+      addToast({
+        title: t`${selected_hostname} removed. Please be sure to run the install bundle for ${instance.hostname} again in order to see changes take effect.`,
+        variant: AlertVariant.success,
+        hasTimeout: true,
+      });
+    }, [instance, selected, fetchPeers, addToast])
   );
 
   const { error, dismissError } = useDismissableError(
@@ -239,6 +252,7 @@ function InstancePeerList({ setBreadcrumb }) {
           ]}
         />
       )}
+      <Toast {...toastProps} />
       {error && (
         <AlertModal
           isOpen={error}

awx/ui/src/screens/Instances/Shared/InstanceForm.test.js

@@ -65,7 +65,7 @@ describe('<InstanceForm />', () => {
     expect(handleCancel).toBeCalled();
   });
 
-  test('should call handleSubmit when Cancel button is clicked', async () => {
+  test('should call handleSubmit when Save button is clicked', async () => {
     expect(handleSubmit).not.toHaveBeenCalled();
     await act(async () => {
       wrapper.find('input#hostname').simulate('change', {
@@ -74,9 +74,6 @@ describe('<InstanceForm />', () => {
       wrapper.find('input#instance-description').simulate('change', {
         target: { value: 'This is a repeat song', name: 'description' },
       });
-      wrapper.find('input#instance-port').simulate('change', {
-        target: { value: 'This is a repeat song', name: 'listener_port' },
-      });
     });
     wrapper.update();
     expect(
@@ -91,10 +88,9 @@ describe('<InstanceForm />', () => {
       enabled: true,
       managed_by_policy: true,
       hostname: 'new Foo',
-      listener_port: 'This is a repeat song',
       node_state: 'installed',
       node_type: 'execution',
-      peers_from_control_nodes: true,
+      peers_from_control_nodes: false,
       peers: [],
     });
   });

awx/ui/src/screens/Instances/Shared/RemoveInstanceButton.js

@@ -176,7 +176,7 @@ function RemoveInstanceButton({ itemsToRemove, onRemove, isK8s }) {
             </Button>,
           ]}
         >
-          <div>{t`This action will remove the following instances:`}</div>
+          <div>{t`This action will remove the following instance and you may need to rerun the install bundle for any instance that was previously connected to:`}</div>
           {itemsToRemove.map((item) => (
             <span key={item.id} id={`item-to-be-removed-${item.id}`}>
               <strong>{item.hostname}</strong>