Merge pull request #1165 from ral-facilities/modify-catalogue-item-ed…

…it-error-messages-when-has-children-#1136 Modify dialogue error messages when editing a catalogue item that has child elements #1136
ral-facilities · Jan 16, 2025 · f445361 · f445361
2 parents e153a36 + 5c5a543
commit f445361
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 5 deletions.
diff --git a/cypress/e2e/with_mock_data/catalogueItems.cy.ts b/cypress/e2e/with_mock_data/catalogueItems.cy.ts
@@ -603,15 +603,32 @@ describe('Catalogue Items', () => {
 
     cy.findByLabelText('Name *').clear();
     cy.findByLabelText('Name *').type('test_has_children_elements');
+
+    cy.findByLabelText('Manufacturer *').type('Man{downArrow}{enter}');
+    cy.findByRole('button', { name: 'Next' }).click();
+
+    cy.findByRole('button', { name: 'Finish'}).click();
+    cy.findByRole('dialog')
+      .should('be.visible')
+      .within(() => {
+        cy.contains('Unable to update catalogue item properties and manufacturer '
+          + '(Manufacturer C), as the catalogue item has associated items.')
+      });
+    cy.findByRole('button', { name: 'Finish' }).should('be.disabled');
+
+    cy.findByRole('button', { name: 'Back' }).click();
+    cy.findByLabelText('Manufacturer *').type('Man{upArrow}{enter}');
     cy.findByRole('button', { name: 'Next' }).click();
+    cy.findByRole('button', { name: 'Finish' }).should('be.enabled');
 
     cy.findByLabelText('Measurement Range (Joules) *').type('0');
 
     cy.findByRole('button', { name: 'Finish' }).click();
     cy.findByRole('dialog')
       .should('be.visible')
       .within(() => {
-        cy.contains('Catalogue item has child elements and cannot be edited');
+        cy.contains('Unable to update catalogue item properties and manufacturer '
+          + '(Manufacturer C), as the catalogue item has associated items.')
       });
     cy.findByRole('button', { name: 'Finish' }).should('be.disabled');
   });

diff --git a/src/catalogue/items/catalogueItemsDialog.component.test.tsx b/src/catalogue/items/catalogueItemsDialog.component.test.tsx
@@ -1084,7 +1084,39 @@ describe('Catalogue Items Dialog', () => {
       });
     });
 
-    it('displays error message if catalogue item has children elements', async () => {
+    it('displays error message when editing manufacturer_id if catalogue item has child elements', async () => {
+      props = {
+        ...props,
+        parentInfo: getCatalogueCategoryById('4'),
+        selectedCatalogueItem: getCatalogueItemById('1'),
+      };
+
+      createView();
+
+      await modifyValues({
+        name: 'test_has_children_elements',
+        manufacturer: 'Man{arrowdown}{arrowdown}{enter}',
+      });
+
+      await user.click(screen.getByRole('button', { name: 'Next' }));
+      await user.click(screen.getByRole('button', { name: 'Finish' }));
+
+      expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/catalogue-items/1', {
+        name: 'test_has_children_elements',
+        manufacturer_id: '3',
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(
+            'Unable to update catalogue item properties and manufacturer '
+              + '(Manufacturer A), as the catalogue item has associated items.'
+          )
+        ).toBeInTheDocument();
+      });
+    });
+
+    it('displays error message when editing properties if catalogue item has child elements', async () => {
       props = {
         ...props,
         parentInfo: getCatalogueCategoryById('4'),
@@ -1098,16 +1130,30 @@ describe('Catalogue Items Dialog', () => {
       });
 
       await user.click(screen.getByRole('button', { name: 'Next' }));
+
+      await modifyValues({
+        resolution: '24',
+      });
+
       await user.click(screen.getByRole('button', { name: 'Finish' }));
 
       expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/catalogue-items/1', {
         name: 'test_has_children_elements',
+        properties: [
+          { id: '1', value: 24 },
+          { id: '2', value: 30 },
+          { id: '3', value: 'CMOS' },
+          { id: '4', value: null },
+          { id: '5', value: true },
+          { id: '6', value: false },
+        ],
       });
 
       await waitFor(() => {
         expect(
           screen.getByText(
-            'Catalogue item has child elements and cannot be edited'
+            'Unable to update catalogue item properties and manufacturer '
+              + '(Manufacturer A), as the catalogue item has associated items.'
           )
         ).toBeInTheDocument();
       });

diff --git a/src/catalogue/items/catalogueItemsDialog.component.tsx b/src/catalogue/items/catalogueItemsDialog.component.tsx
@@ -386,8 +386,15 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
 
               if (response && error.response?.status === 409) {
                 if (response.detail.includes('child elements')) {
+                  // find the name of the manufacturer, so it can be used in the error message
+                  const manufacturerName = manufacturerList?.find(
+                    (manufacturer) => manufacturer.id === selectedCatalogueItem?.manufacturer_id
+                  ) || null;
+                  // add the manufacturer name into the error message
+                  const childElementsMessage = "Unable to update catalogue item properties and manufacturer ("
+                    + manufacturerName?.name + "), as the catalogue item has associated items.";
                   setErrorPropertiesStep('root.formError', {
-                    message: response.detail,
+                    message: childElementsMessage,
                   });
                 }
                 return;
@@ -407,6 +414,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
       patchCatalogueItem,
       handleClose,
       setErrorPropertiesStep,
+      manufacturerList,
     ]
   );
 

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -386,9 +386,14 @@ export const handlers = [
       };
 
       if (body.name === 'test_has_children_elements') {
+        // find the name of the manufacturer, so it can be used in the error message
+        const manufacturerName = ManufacturersJSON?.find(
+          (manufacturer) => manufacturer.id === validCatalogueItem?.manufacturer_id
+        ) as Manufacturer;
         return HttpResponse.json(
           {
-            detail: 'Catalogue item has child elements and cannot be edited',
+            detail: 'Unable to update catalogue item properties and manufacturer ('
+              + manufacturerName?.name + '), as the catalogue item has child elements.'
           },
           { status: 409 }
         );