Integrate manufacturer into catalogue items v2 #108

cypress/e2e/catalogue/catalogueItems.cy.ts

@@ -17,7 +17,7 @@ describe('Catalogue Items', () => {
     cy.findByLabelText('Drawing number').type('MX43242');
     cy.findByLabelText('Drawing link').type('https://example.com');
     cy.findByLabelText('Model number').type('MXtest');
-
+    cy.findByLabelText('Manufacturer *').click().type('Man{downArrow}{enter}');
     cy.findByLabelText('Resolution (megapixels) *').type('18');
     cy.findByLabelText('Frame Rate (fps)').type('60');
     cy.findByLabelText('Sensor Type *').type('IO');
@@ -27,10 +27,6 @@ describe('Catalogue Items', () => {
     cy.findByLabelText('Older than five years').click();
     cy.findByText('False').click();
 
-    cy.findByLabelText('Manufacturer Name *').type('test');
-    cy.findByLabelText('Manufacturer URL *').type('https://test.co.uk');
-    cy.findByLabelText('Manufacturer Address *').type('1 house test TX3 6TY');
-
     cy.startSnoopingBrowserMockedRequest();
 
     cy.findByRole('button', { name: 'Save' }).click();
@@ -42,7 +38,7 @@ describe('Catalogue Items', () => {
       expect(patchRequests.length).equal(1);
       const request = patchRequests[0];
       expect(JSON.stringify(request.body)).equal(
-        '{"catalogue_category_id":"4","name":"test","cost_gbp":5000,"cost_to_rework_gbp":400,"days_to_replace":14,"days_to_rework":5,"description":"test Description","item_model_number":"MXtest","is_obsolete":false,"obsolete_reason":null,"obsolete_replacement_catalogue_item_id":null,"drawing_link":"https://example.com","drawing_number":"MX43242","properties":[{"name":"Resolution","value":18},{"name":"Frame Rate","value":60},{"name":"Sensor Type","value":"IO"},{"name":"Sensor brand","value":"pixel"},{"name":"Broken","value":true},{"name":"Older than five years","value":false}],"manufacturer":{"name":"test","address":"1 house test TX3 6TY","url":"https://test.co.uk"}}'
+        '{"catalogue_category_id":"4","name":"test","cost_gbp":5000,"cost_to_rework_gbp":400,"days_to_replace":14,"days_to_rework":5,"description":"test Description","item_model_number":"MXtest","is_obsolete":false,"obsolete_reason":null,"obsolete_replacement_catalogue_item_id":null,"drawing_link":"https://example.com","drawing_number":"MX43242","manufacturer_id":"1","properties":[{"name":"Resolution","value":18},{"name":"Frame Rate","value":60},{"name":"Sensor Type","value":"IO"},{"name":"Sensor brand","value":"pixel"},{"name":"Broken","value":true},{"name":"Older than five years","value":false}]}'
       );
     });
   });
@@ -64,7 +60,7 @@ describe('Catalogue Items', () => {
       expect(patchRequests.length).equal(1);
       const request = patchRequests[0];
       expect(JSON.stringify(request.body)).equal(
-        '{"catalogue_category_id":"5","name":"Energy Meters 27_copy1","cost_gbp":600,"cost_to_rework_gbp":89,"days_to_replace":7,"days_to_rework":60,"description":"Precision energy meters for accurate measurements. 27","item_model_number":null,"is_obsolete":false,"obsolete_reason":null,"obsolete_replacement_catalogue_item_id":null,"drawing_link":null,"drawing_number":null,"properties":[{"name":"Measurement Range","value":2000}],"manufacturer":{"name":"Manufacturer A","url":"http://example.com","address":"10 My Street"}}'
+        '{"catalogue_category_id":"5","name":"Energy Meters 27_copy1","cost_gbp":600,"cost_to_rework_gbp":89,"days_to_replace":7,"days_to_rework":60,"description":"Precision energy meters for accurate measurements. 27","item_model_number":null,"is_obsolete":false,"obsolete_reason":null,"obsolete_replacement_catalogue_item_id":null,"drawing_link":null,"drawing_number":null,"manufacturer_id":"3","properties":[{"name":"Measurement Range","value":2000}]}'
       );
     });
   });
@@ -81,9 +77,7 @@ describe('Catalogue Items', () => {
     cy.findByLabelText('Cost (£) *').type('5000');
     cy.findByLabelText('Time to replace (days) *').type('14');
 
-    cy.findByLabelText('Manufacturer Name *').type('test');
-    cy.findByLabelText('Manufacturer URL *').type('https://test.co.uk');
-    cy.findByLabelText('Manufacturer Address *').type('1 house test TX3 6TY');
+    cy.findByLabelText('Manufacturer *').click().type('Man{downArrow}{enter}');
 
     cy.startSnoopingBrowserMockedRequest();
 
@@ -96,7 +90,7 @@ describe('Catalogue Items', () => {
       expect(patchRequests.length).equal(1);
       const request = patchRequests[0];
       expect(JSON.stringify(request.body)).equal(
-        '{"catalogue_category_id":"4","name":"test","cost_gbp":5000,"cost_to_rework_gbp":null,"days_to_replace":14,"days_to_rework":null,"description":null,"item_model_number":null,"is_obsolete":false,"obsolete_reason":null,"obsolete_replacement_catalogue_item_id":null,"drawing_link":null,"drawing_number":null,"properties":[{"name":"Resolution","value":18},{"name":"Sensor Type","value":"IO"},{"name":"Broken","value":true}],"manufacturer":{"name":"test","address":"1 house test TX3 6TY","url":"https://test.co.uk"}}'
+        '{"catalogue_category_id":"4","name":"test","cost_gbp":5000,"cost_to_rework_gbp":null,"days_to_replace":14,"days_to_rework":null,"description":null,"item_model_number":null,"is_obsolete":false,"obsolete_reason":null,"obsolete_replacement_catalogue_item_id":null,"drawing_link":null,"drawing_number":null,"manufacturer_id":"1","properties":[{"name":"Resolution","value":18},{"name":"Sensor Type","value":"IO"},{"name":"Broken","value":true}]}'
       );
     });
   });
@@ -111,6 +105,9 @@ describe('Catalogue Items', () => {
     cy.findByText('Please enter how many days it would take to replace').should(
       'exist'
     );
+    cy.findByText(
+      'Please choose a manufacturer, or add a new manufacturer'
+    ).should('exist');
     cy.findByText('Please select either True or False').should('exist');
 
     cy.findByLabelText('Name *').type('test');
@@ -120,6 +117,7 @@ describe('Catalogue Items', () => {
     cy.findByText('True').click();
     cy.findByLabelText('Cost (£) *').type('5000');
     cy.findByLabelText('Time to replace (days) *').type('14');
+    cy.findByLabelText('Manufacturer *').click().type('Man{downArrow}{enter}');
 
     cy.findAllByText('This field is mandatory').should('have.length', 0);
     cy.findByText('Please enter name').should('not.exist');
@@ -128,6 +126,9 @@ describe('Catalogue Items', () => {
     cy.findByText('Please enter how many days it would take to replace').should(
       'not.exist'
     );
+    cy.findByText(
+      'Please chose a manufacturer, or add a new manufacturer'
+    ).should('not.exist');
 
     // value error from number field
 
@@ -154,41 +155,38 @@ describe('Catalogue Items', () => {
     cy.findByLabelText('Time to replace (days) *').type('14');
 
     cy.findAllByText('Please enter a valid number').should('have.length', 0);
-
-    cy.findByText('Please enter a Manufacturer Name').should('exist');
-    cy.findByText('Please enter a Manufacturer URL').should('exist');
-    cy.findByText('Please enter a Manufacturer Address').should('exist');
-
-    cy.findByLabelText('Manufacturer Name *').type('test');
-    cy.findByLabelText('Manufacturer URL *').type('test.co.uk');
     cy.findByLabelText('Drawing link').type('test.co.uk');
-    cy.findByLabelText('Manufacturer Address *').type('1 house test TX3 6TY');
-
-    cy.findByText('Please enter a Manufacturer Name').should('not.exist');
-    cy.findByText('Please enter a Manufacturer URL').should('not.exist');
-    cy.findByText('Please enter a Manufacturer Address').should('not.exist');
 
     cy.findByRole('button', { name: 'Save' }).click();
 
-    cy.findAllByText(
-      'Please enter a valid Manufacturer URL. Only "http://" and "https://" links with typical top-level domain are accepted'
-    ).should('exist');
     cy.findAllByText(
       'Please enter a valid Drawing link. Only "http://" and "https://" links with typical top-level domain are accepted'
     ).should('exist');
-    cy.findByLabelText('Manufacturer URL *').clear();
+
     cy.findByLabelText('Drawing link').clear();
-    cy.findByLabelText('Manufacturer URL *').type('https://test.co.uk');
+
     cy.findByLabelText('Drawing link').type('https://test.co.uk');
     cy.findByRole('button', { name: 'Save' }).click();
-    cy.findByText(
-      'Please enter a valid Manufacturer URL. Only "http://" and "https://" links with typical top-level domain are accepted'
-    ).should('not.exist');
+
     cy.findAllByText(
       'Please enter a valid Drawing link. Only "http://" and "https://" links with typical top-level domain are accepted'
     ).should('not.exist');
   });
 
+  it('opens add manufacturer dialog and closes it back to catalogue item dialog', () => {
+    cy.findByRole('button', { name: 'Add Catalogue Item' }).click();
+
+    cy.findByRole('button', { name: 'add manufacturer' }).click();
+
+    cy.findByText('Add Manufacturer').should('exist');
+
+    cy.findByRole('button', { name: 'Cancel' }).click();
+
+    cy.findByText('Add Manufacturer').should('not.exist');
+
+    cy.findByText('Details').should('exist');
+  });
+
   it('displays the table view correctly', () => {
     cy.findByText('Cameras 1').should('exist');
     cy.findByText('Cameras 2').should('exist');
@@ -243,9 +241,43 @@ describe('Catalogue Items', () => {
     cy.findByLabelText('Resolution (megapixels) *').should('have.value', '12');
     cy.findByLabelText('Frame Rate (fps)').should('have.value', '30');
     cy.findByLabelText('Sensor Type *').should('have.value', 'CMOS');
+    cy.findByLabelText('Manufacturer *').should('have.value', 'Manufacturer A');
+
     cy.findByRole('button', { name: 'Cancel' }).click();
   });
 
+  it('navigates to manufacturer landing page', () => {
+    cy.visit('/catalogue/5');
+
+    cy.findByRole('button', { name: 'Show/Hide columns' }).click();
+    cy.findByRole('button', { name: 'Hide all' }).click();
+    cy.findByRole('checkbox', {
+      name: 'Toggle visibility Manufacturer Name',
+    }).click();
+    cy.get('body').click();
+
+    cy.findByRole('link', { name: 'Manufacturer A' }).click();
+    cy.url().should('contain', '/manufacturer/1');
+  });
+
+  it('checks the href property of the manufacturer link', () => {
+    cy.findByRole('button', { name: 'Show/Hide columns' }).click();
+    cy.findByText('Hide all').click();
+
+    cy.findByText('Manufacturer URL').click();
+
+    // Find the link element
+    cy.findAllByText('http://example.com')
+      .first()
+      .should('have.attr', 'href')
+      .should('include', 'http://example.com'); // Check href attribute value
+
+    cy.findAllByText('http://example.com')
+      .first()
+      .should('have.attr', 'target')
+      .should('include', '_blank'); // Check target attribute value
+  });
+
   it('displays the expired landing page message and navigates back to the catalogue home', () => {
     cy.visit('/catalogue/items/1fds');
 
@@ -336,6 +368,9 @@ describe('Catalogue Items', () => {
     cy.findByLabelText('Drawing number').type('MX43242');
     cy.findByLabelText('Drawing link').type('https://example.com');
     cy.findByLabelText('Model number').type('MXtest');
+    cy.findByLabelText('Manufacturer *')
+      .click()
+      .type('Man{downArrow}{downArrow}{enter}');
     cy.startSnoopingBrowserMockedRequest();
 
     cy.findByRole('button', { name: 'Save' }).click();
@@ -347,7 +382,7 @@ describe('Catalogue Items', () => {
       expect(patchRequests.length).equal(1);
       const request = patchRequests[0];
       expect(JSON.stringify(request.body)).equal(
-        '{"name":"test","description":null,"cost_gbp":6000,"cost_to_rework_gbp":894,"days_to_replace":71,"days_to_rework":605,"drawing_number":"MX43242","drawing_link":"https://example.com","item_model_number":"MXtest"}'
+        '{"name":"test","description":null,"cost_gbp":6000,"cost_to_rework_gbp":894,"days_to_replace":71,"days_to_rework":605,"drawing_number":"MX43242","drawing_link":"https://example.com","item_model_number":"MXtest","manufacturer_id":"2"}'
       );
     });
   });

cypress/e2e/manufacturer/manufacturer.cy.ts

@@ -299,6 +299,51 @@ describe('Manufacturer', () => {
         cy.contains('Please enter a post code or zip code.');
       });
   });
+
+  it('navigates to landing page and navigates back to the table view', () => {
+    cy.findByText('Manufacturer A').click();
+    cy.findByText('Telephone number:').should('exist');
+
+    cy.findByRole('link', { name: 'Manufacturer table view' }).click();
+
+    cy.findByText('Manufacturer A').should('exist');
+    cy.findByText('Manufacturer B').should('exist');
+    cy.findByText('Manufacturer C').should('exist');
+  });
+
+  it('navigates to landing page, opens edit dialog and closes it', () => {
+    cy.findByText('Manufacturer A').click();
+    cy.findByText('Telephone number:').should('exist');
+
+    cy.findByRole('button', { name: 'Edit' }).click();
+    cy.findByLabelText('Name *').should('have.value', 'Manufacturer A');
+    cy.findByLabelText('URL').should('have.value', 'http://example.com');
+    cy.findByLabelText('Address Line *').should(
+      'have.value',
+      '1 Example Street'
+    );
+    cy.findByLabelText('Town').should('have.value', 'Oxford');
+    cy.findByLabelText('County').should('have.value', 'Oxfordshire');
+    cy.findByLabelText('Country *').should('have.value', 'United Kingdom');
+    cy.findByLabelText('Post/Zip code *').should('have.value', 'OX1 2AB');
+    cy.findByLabelText('Telephone number').should('have.value', '07334893348');
+
+    cy.findByRole('button', { name: 'Cancel' }).click();
+  });
+
+  it('displays expired landing page message and navigates back to manufacturer table view', () => {
+    cy.visit('/manufacturer/invalid');
+
+    cy.findByText(
+      `This manufacturer doesn't exist. Please click the Home button to navigate to the manufacturer table`
+    ).should('exist');
+
+    cy.findByRole('link', { name: 'Home' }).click();
+
+    cy.findByText('Manufacturer A').should('exist');
+    cy.findByText('Manufacturer B').should('exist');
+    cy.findByText('Manufacturer C').should('exist');
+  });
   it('sets the table filters and clears the table filters', () => {
     cy.findByText('Manufacturer A').should('exist');
     cy.findByRole('button', { name: 'Clear Filters' }).should('be.disabled');

src/api/catalogueItem.test.tsx

@@ -98,11 +98,7 @@ describe('catalogue items api functions', () => {
         drawing_number: null,
         id: '1',
         is_obsolete: false,
-        manufacturer: {
-          address: '10 My Street',
-          name: 'Manufacturer A',
-          url: 'http://example.com',
-        },
+        manufacturer_id: '1',
         item_model_number: null,
         name: 'Cameras 1',
         obsolete_reason: null,

src/api/manufacturer.tsx

@@ -2,6 +2,7 @@ import axios, { AxiosError } from 'axios';
 import {
   useMutation,
   UseMutationResult,
+  useQueries,
   useQuery,
   useQueryClient,
   UseQueryResult,
@@ -133,6 +134,17 @@ export const useManufacturer = (
   );
 };
 
+export const useManufacturerIds = (
+  ids: string[]
+): UseQueryResult<Manufacturer, unknown>[] => {
+  return useQueries({
+    queries: ids.map((id) => ({
+      queryKey: ['Manufacturer', id],
+      queryFn: () => fetchManufacturer(id),
+    })),
+  });
+};
+
 const editManufacturer = async (
   manufacturer: EditManufacturer
 ): Promise<Manufacturer> => {
@@ -163,8 +175,11 @@ export const useEditManufacturer = (): UseMutationResult<
       onError: (error) => {
         console.log('Got error ' + error.message);
       },
-      onSuccess: () => {
+      onSuccess: (manufacturerReturned) => {
         queryClient.invalidateQueries({ queryKey: ['Manufacturers'] });
+        queryClient.invalidateQueries({
+          queryKey: ['Manufacturer', manufacturerReturned.id],
+        });
       },
     }
   );

src/app.types.tsx

@@ -88,6 +88,7 @@ export interface CatalogueItemDetails extends ObsoleteDetails {
   drawing_number: string | null;
   drawing_link: string | null;
   item_model_number: string | null;
+  manufacturer_id: string;
 }
 // need so we can cast string to number e.g for 10.50
 export type CatalogueItemDetailsPlaceholder = {
@@ -104,12 +105,7 @@ export interface CatalogueDetailsErrorMessages {
   drawing_number: string;
   drawing_link: string;
   item_model_number: string;
-}
-
-export interface CatalogueItemManufacturer {
-  name: string;
-  address: string;
-  url: string;
+  manufacturer_id: string;
 }
 
 export interface CatalogueItemProperty {
@@ -125,12 +121,10 @@ export interface CatalogueItemPropertyResponse {
 
 export interface CatalogueItem extends CatalogueItemDetails {
   properties: CatalogueItemPropertyResponse[];
-  manufacturer: CatalogueItemManufacturer;
   id: string;
 }
 export interface AddCatalogueItem extends CatalogueItemDetails {
   properties: CatalogueItemProperty[];
-  manufacturer: CatalogueItemManufacturer;
 }
 
 export interface EditCatalogueItem extends Partial<AddCatalogueItem> {

src/catalogue/catalogue.component.test.tsx

@@ -335,7 +335,7 @@ describe('Catalogue', () => {
     await waitFor(() => {
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
-  });
+  }, 10000);
 
   it('opens move catalogue category dialog and can closes the dialog', async () => {
     createView('/catalogue/1');