Add alert banner to system items dialog #1608

Author: joshdimanteto

cypress/e2e/with_api/systems/functions.ts

@@ -160,8 +160,8 @@ export const moveItemToSystem = (values: {
     cy.findByText('Storage 2').click();
   });
 
-  // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy.wait(4000);
+  cy.findByText('Item Moving Rule Applied').should('exist');
+
   cy.findByRole('button', { name: 'Move here' }).should('not.be.disabled');
   cy.findByRole('button', { name: 'Move here' }).click();
   cy.findByRole('dialog').should('not.exist', { timeout: 10000 });

cypress/e2e/with_mock_data/systems.cy.ts

@@ -990,8 +990,7 @@ describe('Systems', () => {
           cy.findByRole('button', { name: 'navigate to systems home' }).click();
           cy.findByLabelText('Storage row').click();
 
-          // eslint-disable-next-line cypress/no-unnecessary-waiting
-          cy.wait(4000);
+          cy.findByText('Item Moving Rule Applied').should('exist');
           cy.findByRole('button', { name: 'Move here' }).click();
         });
 
@@ -1069,8 +1068,7 @@ describe('Systems', () => {
     cy.findByLabelText('Row Actions').first().click();
     cy.findByText('Edit').click();
 
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(100);
+    cy.findByText('Item Moving Rule Applied').should('exist');
 
     cy.findByRole('button', { name: 'Next' }).click();
 
@@ -1102,8 +1100,7 @@ describe('Systems', () => {
     cy.findByLabelText('Row Actions').first().click();
     cy.findByText('Duplicate').click();
 
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(100);
+    cy.findByText('Item Creation Rule Applied').should('exist');
 
     cy.findByRole('button', { name: 'Next' }).click();
     cy.findByRole('button', { name: 'Next' }).click();

src/items/itemDialog.component.tsx

@@ -626,6 +626,7 @@ function ItemDialog(props: ItemDialogProps) {
             />
 
             {parentSystemId &&
+              parentSystemId !== selectedItem?.system_id &&
               !isSelectedRulesLoading &&
               !systemsDataLoading && (
                 <MRTTopTableAlert

src/systems/systemItemsDialog.component.test.tsx

@@ -222,31 +222,36 @@ describe('SystemItemsDialog', () => {
       await user.click(screen.getByLabelText('navigate to systems home'));
 
       await waitFor(() => {
-        expect(screen.getByText('Giant laser')).toBeInTheDocument();
+        expect(screen.getByText('Pulse Laser')).toBeInTheDocument();
       });
 
-      await user.click(screen.getByText('Giant laser'));
+      await user.click(screen.getByText('Pulse Laser'));
 
-      await waitFor(() => {
-        expect(screen.getByText('Smaller laser')).toBeInTheDocument();
-      });
+      expect(
+        await screen.findByText('Item Moving Rule Applied')
+      ).toBeInTheDocument();
+      expect(
+        await screen.findByLabelText(
+          'The items usage statuses will be updated to In Use, as defined by the rules'
+        )
+      ).toBeInTheDocument();
 
       await user.click(screen.getByRole('button', { name: 'Move here' }));
 
       expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/items/KvT2Ox7n', {
-        system_id: '65328f34a40ff5301575a4e3',
+        system_id: '656da8ef9cba7a76c6f81a5d',
         usage_status_id: '1',
       });
       expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/items/G463gOIA', {
-        system_id: '65328f34a40ff5301575a4e3',
+        system_id: '656da8ef9cba7a76c6f81a5d',
         usage_status_id: '1',
       });
 
       expect(mockOnClose).toHaveBeenCalled();
       expect(mockOnChangeSelectedItems).toHaveBeenCalledWith({});
     }, 10000);
 
-    it('moves selected systems (to non-root system)', async () => {
+    it('moves selected systems (to non-root system with the same system type)', async () => {
       props.parentSystemId = SystemsJSON[2].id;
       createView();
 
@@ -257,22 +262,28 @@ describe('SystemItemsDialog', () => {
       await user.click(screen.getByLabelText('navigate to systems home'));
 
       await waitFor(() => {
-        expect(screen.getByText('Giant laser')).toBeInTheDocument();
+        expect(screen.getByText('Pulse Laser')).toBeInTheDocument();
       });
 
-      await user.click(screen.getByText('Giant laser'));
+      await user.click(screen.getByText('Pulse Laser'));
 
-      await waitFor(() => {
-        expect(screen.getByText('Smaller laser')).toBeInTheDocument();
-      });
+      expect(
+        await screen.findByText('Item Moving Rule Applied')
+      ).toBeInTheDocument();
+
+      expect(
+        await screen.findByLabelText(
+          'The items usage statuses we remain the same, as defined by the rules'
+        )
+      ).toBeInTheDocument();
 
       await user.click(screen.getByRole('button', { name: 'Move here' }));
 
       expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/items/KvT2Ox7n', {
-        system_id: '65328f34a40ff5301575a4e3',
+        system_id: '656da8ef9cba7a76c6f81a5d',
       });
       expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/items/G463gOIA', {
-        system_id: '65328f34a40ff5301575a4e3',
+        system_id: '656da8ef9cba7a76c6f81a5d',
       });
 
       expect(mockOnClose).toHaveBeenCalled();

src/systems/systemItemsDialog.component.tsx

@@ -18,6 +18,7 @@ import {
   useGetSystems,
   useGetSystemsBreadcrumbs,
 } from '../api/systems';
+import MRTTopTableAlert from '../common/mrtTopTableAlert.component';
 import handleTransferState from '../handleTransferState';
 import Breadcrumbs from '../view/breadcrumbs.component';
 import { SystemsTableView } from './systemsTableView.component';
@@ -61,7 +62,8 @@ const SystemItemsDialog = React.memo((props: SystemItemsDialogProps) => {
   const { data: tableRules } = useGetRules(srcSystemTypeId);
 
   // This should be a list of 1 rule
-  const { data: selectedRules } = useGetRules(srcSystemTypeId, dstSystemTypeId);
+  const { data: selectedRules, isLoading: isSelectedRulesLoading } =
+    useGetRules(srcSystemTypeId, dstSystemTypeId);
 
   const [placeIntoSystemError, setPlaceIntoSystemError] = React.useState<
     string | undefined
@@ -168,6 +170,22 @@ const SystemItemsDialog = React.memo((props: SystemItemsDialogProps) => {
             />
           </Grid>
           <Grid size={12}>
+            {parentSystemId &&
+              selectedItems.length !== 0 &&
+              parentSystemId !== selectedItems[0].system_id &&
+              !isSelectedRulesLoading &&
+              !systemsDataLoading && (
+                <MRTTopTableAlert
+                  title="Item Moving Rule Applied"
+                  showInfoTooltip
+                  infoTooltipTitle={
+                    selectedRules && selectedRules[0]
+                      ? `The items usage statuses will be updated to ${selectedRules[0].dst_usage_status?.value}, as defined by the rules`
+                      : 'The items usage statuses we remain the same, as defined by the rules'
+                  }
+                  alertProps={{ elevation: 1 }}
+                />
+              )}
             <SystemsTableView
               systemsData={systemsData}
               systemsDataLoading={systemsDataLoading}