From 3238996a911b9329481cc959532caaad92321cd3 Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Wed, 29 May 2024 13:59:17 +0000 Subject: [PATCH 01/23] added aria-label to breadcrumbs #507 --- src/view/breadcrumbs.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/view/breadcrumbs.component.tsx b/src/view/breadcrumbs.component.tsx index a8243e37e..e5d1915b4 100644 --- a/src/view/breadcrumbs.component.tsx +++ b/src/view/breadcrumbs.component.tsx @@ -78,6 +78,7 @@ const Breadcrumbs = (props: BreadcrumbsProps) => { ev.preventDefault(); onChangeNode(id as string); }} + aria-label={`breadcrumb-${name}`} > {name} From 2e772ff6e8a7650ea3cccf205feeb71dd75afabf Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Wed, 29 May 2024 14:01:58 +0000 Subject: [PATCH 02/23] aria label to tooltips #507 --- src/catalogue/items/catalogueItemsDialog.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/catalogue/items/catalogueItemsDialog.component.tsx b/src/catalogue/items/catalogueItemsDialog.component.tsx index 10cfffccf..2e706e405 100644 --- a/src/catalogue/items/catalogueItemsDialog.component.tsx +++ b/src/catalogue/items/catalogueItemsDialog.component.tsx @@ -982,6 +982,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) { sx={{ display: 'flex', alignItems: 'center' }} > Name: {property.name} From 3826e14b6d76649e5fef5675a5a4f4667a7a5d06 Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Wed, 29 May 2024 14:05:23 +0000 Subject: [PATCH 03/23] obsolete dialog textbox given label #507 --- .../obsoleteCatalogueItemDialog.component.tsx | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx b/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx index a0816798c..88ccaf743 100644 --- a/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx +++ b/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx @@ -14,7 +14,6 @@ import { StepLabel, Stepper, TextField, - Typography, } from '@mui/material'; import { AxiosError } from 'axios'; import React from 'react'; @@ -225,21 +224,19 @@ const ObsoleteCatalogueItemDialog = ( ); case 1: return ( - <> - Obsolete Reason - - handleObsoleteDetailChanged({ - ...obsoleteDetails, - obsolete_reason: e.target.value, - }) - } - minRows={16} - multiline - fullWidth - /> - + + handleObsoleteDetailChanged({ + ...obsoleteDetails, + obsolete_reason: e.target.value, + }) + } + minRows={16} + multiline + fullWidth + /> ); case 2: return ( From d8bcf4ab79969ba35265d60fb2616cd8f3210b13 Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Wed, 29 May 2024 14:24:28 +0000 Subject: [PATCH 04/23] added aria label to tooltip in items dialog --- src/items/itemDialog.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/items/itemDialog.component.tsx b/src/items/itemDialog.component.tsx index eca7e4f7d..fcedc5a79 100644 --- a/src/items/itemDialog.component.tsx +++ b/src/items/itemDialog.component.tsx @@ -1005,6 +1005,7 @@ function ItemDialog(props: ItemDialogProps) { sx={{ display: 'flex', alignItems: 'center' }} > Name: {property.name} From 9ca82dd757fb68c63151c82e88bcc2e8e8788931 Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Fri, 14 Jun 2024 12:17:01 +0000 Subject: [PATCH 05/23] Rename catalogue_item_properites to properties #661 --- .../with_mock_data/catalogueCategories.cy.ts | 8 +- src/api/catalogueCategories.test.tsx | 10 +- src/api/catalogueItems.test.tsx | 4 +- src/api/catalogueItems.tsx | 3 +- src/app.types.tsx | 6 +- ...catalogueCategoryDialog.component.test.tsx | 14 +- .../catalogueCategoryDialog.component.tsx | 173 ++++++++---------- ...CategoryDirectoryDialog.component.test.tsx | 2 +- ...alogueCategoryTableView.component.test.tsx | 10 +- ...temPropertiesMigrationDialog.component.tsx | 36 ++-- ...ogueItemDirectoryDialog.component.test.tsx | 2 +- ...catalogueItemDirectoryDialog.component.tsx | 20 +- .../items/catalogueItemsDialog.component.tsx | 2 +- .../items/catalogueItemsTable.component.tsx | 5 +- src/items/itemDialog.component.test.tsx | 2 +- src/items/itemDialog.component.tsx | 2 +- src/items/itemsTable.component.tsx | 3 +- src/mocks/CatalogueCategories.json | 24 +-- src/mocks/handlers.ts | 23 +-- src/testUtils.tsx | 2 +- 20 files changed, 157 insertions(+), 194 deletions(-) diff --git a/cypress/e2e/with_mock_data/catalogueCategories.cy.ts b/cypress/e2e/with_mock_data/catalogueCategories.cy.ts index 8da1ada10..89f3a1ee9 100644 --- a/cypress/e2e/with_mock_data/catalogueCategories.cy.ts +++ b/cypress/e2e/with_mock_data/catalogueCategories.cy.ts @@ -292,7 +292,7 @@ describe('Catalogue Category', () => { JSON.stringify({ name: 'test', is_leaf: true, - catalogue_item_properties: [ + properties: [ { name: 'Updated Field 1', type: 'boolean', mandatory: false }, { name: 'Updated Field 2', @@ -350,7 +350,7 @@ describe('Catalogue Category', () => { JSON.stringify({ name: 'test', is_leaf: true, - catalogue_item_properties: [ + properties: [ { name: 'Updated Field 1', type: 'boolean', mandatory: false }, { name: 'Updated Field 2', @@ -692,7 +692,7 @@ describe('Catalogue Category', () => { parent_id: null, code: 'cameras', is_leaf: true, - catalogue_item_properties: [ + properties: [ { name: 'Resolution', type: 'number', @@ -806,7 +806,7 @@ describe('Catalogue Category', () => { parent_id: '2', code: 'cameras', is_leaf: true, - catalogue_item_properties: [ + properties: [ { name: 'Resolution', type: 'number', diff --git a/src/api/catalogueCategories.test.tsx b/src/api/catalogueCategories.test.tsx index 026db1ad1..c37c6ec31 100644 --- a/src/api/catalogueCategories.test.tsx +++ b/src/api/catalogueCategories.test.tsx @@ -80,7 +80,7 @@ describe('catalogue categories api functions', () => { expect(result.current.isSuccess).toBeTruthy(); }); expect(result.current.data).toEqual({ - catalogue_item_properties: [ + properties: [ { id: '1', allowed_values: null, @@ -253,7 +253,7 @@ describe('catalogue categories api functions', () => { parent_id: '1', code: 'wavefront-sensors', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '1', name: 'Wavefront Measurement Range', @@ -277,7 +277,7 @@ describe('catalogue categories api functions', () => { parent_id: '1', code: 'energy-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '3', name: 'Measurement Range', @@ -418,7 +418,7 @@ describe('catalogue categories api functions', () => { parent_id: '1', code: 'wavefront-sensors', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '1', name: 'Wavefront Measurement Range', @@ -442,7 +442,7 @@ describe('catalogue categories api functions', () => { parent_id: '1', code: 'energy-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '3', name: 'Measurement Range', diff --git a/src/api/catalogueItems.test.tsx b/src/api/catalogueItems.test.tsx index ee0407068..18a9ade05 100644 --- a/src/api/catalogueItems.test.tsx +++ b/src/api/catalogueItems.test.tsx @@ -313,7 +313,7 @@ describe('catalogue items api functions', () => { name: 'RF Lenses', is_leaf: true, parent_id: '655ca56c1c251a2a828ca906', - catalogue_item_properties: [ + properties: [ { id: '91', name: 'center wavelength', @@ -446,7 +446,7 @@ describe('catalogue items api functions', () => { name: 'RF Lenses', is_leaf: true, parent_id: '655ca56c1c251a2a828ca906', - catalogue_item_properties: [ + properties: [ { id: '90', name: 'center wavelength', diff --git a/src/api/catalogueItems.tsx b/src/api/catalogueItems.tsx index 5b41c7907..cedbe55fb 100644 --- a/src/api/catalogueItems.tsx +++ b/src/api/catalogueItems.tsx @@ -255,8 +255,7 @@ export const useCopyToCatalogueItem = (): UseMutationResult< // in tests const targetProperties = - copyToCatalogueItem.targetCatalogueCategory - ?.catalogue_item_properties; + copyToCatalogueItem.targetCatalogueCategory?.properties; const properties = catalogueItem.properties.map((property) => { const targetPropertyId = targetProperties?.find( diff --git a/src/app.types.tsx b/src/app.types.tsx index 0e1d42eb0..980176525 100644 --- a/src/app.types.tsx +++ b/src/app.types.tsx @@ -14,12 +14,12 @@ export interface AddCatalogueCategory { name: string; parent_id?: string | null; is_leaf: boolean; - catalogue_item_properties?: AddCatalogueCategoryProperty[]; + properties?: AddCatalogueCategoryProperty[]; } export interface AddCatalogueCategoryWithPlacementIds extends AddCatalogueCategory { - catalogue_item_properties?: AddCatalogueCategoryPropertyWithPlacementIds[]; + properties?: AddCatalogueCategoryPropertyWithPlacementIds[]; } export interface EditCatalogueCategory { @@ -49,7 +49,7 @@ export interface CatalogueCategory { parent_id: string | null; code: string; is_leaf: boolean; - catalogue_item_properties?: CatalogueCategoryProperty[]; + properties?: CatalogueCategoryProperty[]; created_time: string; modified_time: string; } diff --git a/src/catalogue/category/catalogueCategoryDialog.component.test.tsx b/src/catalogue/category/catalogueCategoryDialog.component.test.tsx index a10ca0bfd..a0dc57f18 100644 --- a/src/catalogue/category/catalogueCategoryDialog.component.test.tsx +++ b/src/catalogue/category/catalogueCategoryDialog.component.test.tsx @@ -337,7 +337,7 @@ describe('Catalogue Category Dialog', () => { await waitFor(() => user.click(saveButton)); expect(axiosPostSpy).toHaveBeenCalledWith('/v1/catalogue-categories', { - catalogue_item_properties: [ + properties: [ { mandatory: true, name: 'radius', @@ -375,7 +375,7 @@ describe('Catalogue Category Dialog', () => { await waitFor(() => user.click(saveButton)); expect(axiosPostSpy).toHaveBeenCalledWith('/v1/catalogue-categories', { - catalogue_item_properties: [ + properties: [ { allowed_values: { type: 'list', values: [1, 2, 8] }, mandatory: true, @@ -414,7 +414,7 @@ describe('Catalogue Category Dialog', () => { await waitFor(() => user.click(saveButton)); expect(axiosPostSpy).toHaveBeenCalledWith('/v1/catalogue-categories', { - catalogue_item_properties: [ + properties: [ { allowed_values: { type: 'list', values: ['1', '2', '8'] }, mandatory: true, @@ -839,7 +839,7 @@ describe('Catalogue Category Dialog', () => { parent_id: '1', code: 'voltage-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '1', name: 'Measurement Range', @@ -897,7 +897,7 @@ describe('Catalogue Category Dialog', () => { expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/catalogue-categories/4', { name: 'test2', - catalogue_item_properties: undefined, + properties: undefined, }); expect(onClose).toHaveBeenCalled(); @@ -972,7 +972,7 @@ describe('Catalogue Category Dialog', () => { props.selectedCatalogueCategory = { ...mockData, is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '1', name: 'Field 1', @@ -1002,7 +1002,7 @@ describe('Catalogue Category Dialog', () => { expect(axiosPostSpy).toHaveBeenCalledWith('/v1/catalogue-categories', { ...values, is_leaf: true, - catalogue_item_properties: [ + properties: [ { name: 'Field 1', type: 'text', diff --git a/src/catalogue/category/catalogueCategoryDialog.component.tsx b/src/catalogue/category/catalogueCategoryDialog.component.tsx index 5a38b4f77..123e91e1d 100644 --- a/src/catalogue/category/catalogueCategoryDialog.component.tsx +++ b/src/catalogue/category/catalogueCategoryDialog.component.tsx @@ -67,58 +67,56 @@ const CatalogueCategoryDialog = React.memo( name: '', parent_id: null, is_leaf: false, - catalogue_item_properties: undefined, + properties: undefined, }); React.useEffect(() => { if (selectedCatalogueCategory) { const updatedCatalogueItemProperties = - selectedCatalogueCategory.catalogue_item_properties?.map( - (property) => { - // Transform allowed_values to an array of objects with id and value keys - const allowedValuesWithId = property.allowed_values?.values.map( - (value) => ({ - av_placement_id: generateUniqueId('av_placement_id_'), // Allowed values (av) - value: value, - }) - ) || [ - { - av_placement_id: generateUniqueId('av_placement_id_'), - value: '', - }, - ]; // Default case if allowed_values is undefined or empty - - let modifiedCatalogueItemProperties = { - ...property, - cip_placement_id: generateUniqueId('cip_placement_id_'), - id: undefined, - }; + selectedCatalogueCategory.properties?.map((property) => { + // Transform allowed_values to an array of objects with id and value keys + const allowedValuesWithId = property.allowed_values?.values.map( + (value) => ({ + av_placement_id: generateUniqueId('av_placement_id_'), // Allowed values (av) + value: value, + }) + ) || [ + { + av_placement_id: generateUniqueId('av_placement_id_'), + value: '', + }, + ]; // Default case if allowed_values is undefined or empty - if (property.allowed_values) { - modifiedCatalogueItemProperties = { - ...modifiedCatalogueItemProperties, - allowed_values: { - type: property.allowed_values?.type, - values: allowedValuesWithId, - }, - }; - } + let modifiedCatalogueItemProperties = { + ...property, + cip_placement_id: generateUniqueId('cip_placement_id_'), + id: undefined, + }; - return modifiedCatalogueItemProperties; + if (property.allowed_values) { + modifiedCatalogueItemProperties = { + ...modifiedCatalogueItemProperties, + allowed_values: { + type: property.allowed_values?.type, + values: allowedValuesWithId, + }, + }; } - ) || undefined; + + return modifiedCatalogueItemProperties; + }) || undefined; const updatedSelectedCatalogueCategory: AddCatalogueCategoryWithPlacementIds = { ...selectedCatalogueCategory, - catalogue_item_properties: updatedCatalogueItemProperties, + properties: updatedCatalogueItemProperties, }; setCategoryData( // This is not ideal but fixes the properties being reset when closing the dialog // The array itself is stored as a reference in typescript meaning that modifying - // categoryData.catalogue_item_properties without this will also modify - // selectedCatalogueCategory.catalogue_item_properties preventing any modified fields + // categoryData.properties without this will also modify + // selectedCatalogueCategory.properties preventing any modified fields // from being reset // This ensures the array created is brand new with a different reference to fix it // See https://stackoverflow.com/questions/9885821/copying-of-an-array-of-objects-to-another-array-without-object-reference-in-java @@ -157,7 +155,7 @@ const CatalogueCategoryDialog = React.memo( name: '', parent_id: null, is_leaf: false, - catalogue_item_properties: undefined, + properties: undefined, }); setCatalogueItemPropertiesErrors([]); setAllowedValuesListErrors([]); @@ -264,21 +262,14 @@ const CatalogueCategoryDialog = React.memo( const validateFormFields = React.useCallback(() => { let hasErrors = false; - if ( - categoryData.catalogue_item_properties && - categoryData.catalogue_item_properties?.length > 0 - ) { - for ( - let i = 0; - i < categoryData.catalogue_item_properties.length; - i++ - ) { - if (!categoryData.catalogue_item_properties[i].name.trim()) { + if (categoryData.properties && categoryData.properties?.length > 0) { + for (let i = 0; i < categoryData.properties.length; i++) { + if (!categoryData.properties[i].name.trim()) { setCatalogueItemPropertiesErrors((prev) => [ ...prev, { - cip_placement_id: categoryData.catalogue_item_properties - ? categoryData.catalogue_item_properties[i].cip_placement_id + cip_placement_id: categoryData.properties + ? categoryData.properties[i].cip_placement_id : '', errors: { fieldName: 'name', @@ -289,12 +280,12 @@ const CatalogueCategoryDialog = React.memo( hasErrors = true; } - if (!categoryData.catalogue_item_properties[i].type.trim()) { + if (!categoryData.properties[i].type.trim()) { setCatalogueItemPropertiesErrors((prev) => [ ...prev, { - cip_placement_id: categoryData.catalogue_item_properties - ? categoryData.catalogue_item_properties[i].cip_placement_id + cip_placement_id: categoryData.properties + ? categoryData.properties[i].cip_placement_id : '', errors: { fieldName: 'type', @@ -306,15 +297,12 @@ const CatalogueCategoryDialog = React.memo( hasErrors = true; } - if ( - categoryData.catalogue_item_properties[i].allowed_values?.values - .length === 0 - ) { + if (categoryData.properties[i].allowed_values?.values.length === 0) { setCatalogueItemPropertiesErrors((prev) => [ ...prev, { - cip_placement_id: categoryData.catalogue_item_properties - ? categoryData.catalogue_item_properties[i].cip_placement_id + cip_placement_id: categoryData.properties + ? categoryData.properties[i].cip_placement_id : '', errors: { fieldName: 'allowed_values', @@ -327,10 +315,9 @@ const CatalogueCategoryDialog = React.memo( } } - const listOfPropertyNames: string[] = - categoryData.catalogue_item_properties.map((property) => - property.name.toLowerCase().trim() - ); + const listOfPropertyNames: string[] = categoryData.properties.map( + (property) => property.name.toLowerCase().trim() + ); const duplicateIds: string[] = []; @@ -338,11 +325,11 @@ const CatalogueCategoryDialog = React.memo( for (let j = i + 1; j < listOfPropertyNames.length; j++) { if (value === listOfPropertyNames[j]) { duplicateIds.push( - categoryData.catalogue_item_properties - ? categoryData.catalogue_item_properties[i].cip_placement_id + categoryData.properties + ? categoryData.properties[i].cip_placement_id : '', - categoryData.catalogue_item_properties - ? categoryData.catalogue_item_properties[j].cip_placement_id + categoryData.properties + ? categoryData.properties[j].cip_placement_id : '' ); } @@ -366,7 +353,7 @@ const CatalogueCategoryDialog = React.memo( } const hasAllowedValuesListErrors = validateAllowedValuesList( - categoryData.catalogue_item_properties + categoryData.properties ); if (hasAllowedValuesListErrors) { @@ -410,37 +397,35 @@ const CatalogueCategoryDialog = React.memo( let updatedProperties: AddCatalogueCategoryProperty[] | undefined; // Inside your component or wherever you're processing the data - if (categoryData.catalogue_item_properties) { - updatedProperties = categoryData.catalogue_item_properties.map( - (property) => { - const allowedValuesList = property.allowed_values?.values.map( - (val) => val.value + if (categoryData.properties) { + updatedProperties = categoryData.properties.map((property) => { + const allowedValuesList = property.allowed_values?.values.map( + (val) => val.value + ); + if (property.allowed_values?.type === 'list') { + // Assuming values are strings, convert them to numbers + const convertedValues = convertListToNumbers( + allowedValuesList || [] ); - if (property.allowed_values?.type === 'list') { - // Assuming values are strings, convert them to numbers - const convertedValues = convertListToNumbers( - allowedValuesList || [] - ); - // Update the property with the converted values - return { - ...property, - cip_placement_id: undefined, - allowed_values: { - ...property.allowed_values, - values: - property.type === 'number' - ? convertedValues - : allowedValuesList ?? [], - }, - }; - } + // Update the property with the converted values return { ...property, cip_placement_id: undefined, + allowed_values: { + ...property.allowed_values, + values: + property.type === 'number' + ? convertedValues + : allowedValuesList ?? [], + }, }; } - ); + return { + ...property, + cip_placement_id: undefined, + }; + }); } clearFormFields(); @@ -453,7 +438,7 @@ const CatalogueCategoryDialog = React.memo( if (updatedProperties) { catalogueCategory = { ...catalogueCategory, - catalogue_item_properties: updatedProperties, + properties: updatedProperties, }; } @@ -566,7 +551,7 @@ const CatalogueCategoryDialog = React.memo( is_leaf: value === 'true' ? true : false, }; if (value === 'false') { - newData.catalogue_item_properties = undefined; + newData.properties = undefined; setCatalogueItemPropertiesErrors([]); } handleFormChange(newData); @@ -593,13 +578,13 @@ const CatalogueCategoryDialog = React.memo( Catalogue Item Fields handleFormChange({ ...categoryData, - catalogue_item_properties: formFields, + properties: formFields, }) } onChangeCatalogueItemPropertiesErrors={ diff --git a/src/catalogue/category/catalogueCategoryDirectoryDialog.component.test.tsx b/src/catalogue/category/catalogueCategoryDirectoryDialog.component.test.tsx index 47a3a0309..61e7e4481 100644 --- a/src/catalogue/category/catalogueCategoryDirectoryDialog.component.test.tsx +++ b/src/catalogue/category/catalogueCategoryDirectoryDialog.component.test.tsx @@ -364,7 +364,7 @@ describe('CatalogueCategoryDirectoryDialog', () => { parent_id: '1', code: 'energy-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '1', name: 'Measurement Range', diff --git a/src/catalogue/category/catalogueCategoryTableView.component.test.tsx b/src/catalogue/category/catalogueCategoryTableView.component.test.tsx index 45bacc42c..4ba2d4e5a 100644 --- a/src/catalogue/category/catalogueCategoryTableView.component.test.tsx +++ b/src/catalogue/category/catalogueCategoryTableView.component.test.tsx @@ -29,7 +29,7 @@ describe('CatalogueCategoryTableView', () => { parent_id: '1', code: 'energy-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '1', name: 'Measurement Range', @@ -60,7 +60,7 @@ describe('CatalogueCategoryTableView', () => { parent_id: '1', code: 'cameras', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '3', name: 'Resolution', @@ -93,7 +93,7 @@ describe('CatalogueCategoryTableView', () => { parent_id: '1', code: 'energy-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '1', name: 'Measurement Range', @@ -111,7 +111,7 @@ describe('CatalogueCategoryTableView', () => { parent_id: '1', code: 'wavefront-sensors', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '10', name: 'Wavefront Measurement Range', @@ -134,7 +134,7 @@ describe('CatalogueCategoryTableView', () => { parent_id: '1', code: 'voltage-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '12', name: 'Measurement Range', diff --git a/src/catalogue/category/catalogueItemPropertiesMigrationDialog.component.tsx b/src/catalogue/category/catalogueItemPropertiesMigrationDialog.component.tsx index f35ced295..acf1af4c2 100644 --- a/src/catalogue/category/catalogueItemPropertiesMigrationDialog.component.tsx +++ b/src/catalogue/category/catalogueItemPropertiesMigrationDialog.component.tsx @@ -99,7 +99,7 @@ function CatalogueItemPropertiesMigrationDialog( const updatedCatalogueItemProperties = React.useMemo( () => - selectedCatalogueCategory.catalogue_item_properties?.map((item) => { + selectedCatalogueCategory.properties?.map((item) => { // Transform allowed_values to an array of objects with id and value keys const allowedValuesWithId = item.allowed_values?.values.map( (value) => ({ @@ -130,14 +130,13 @@ function CatalogueItemPropertiesMigrationDialog( return modifiedCatalogueCategory; }) || undefined, - [selectedCatalogueCategory.catalogue_item_properties] + [selectedCatalogueCategory.properties] ); const updatedSelectedCatalogueCategory: AddCatalogueCategoryWithPlacementIds = JSON.parse(JSON.stringify(selectedCatalogueCategory)); - updatedSelectedCatalogueCategory.catalogue_item_properties = - updatedCatalogueItemProperties; + updatedSelectedCatalogueCategory.properties = updatedCatalogueItemProperties; const [activeStep, setActiveStep] = React.useState(0); const [steps, setSteps] = React.useState([STEPS_ADD[0]]); @@ -514,15 +513,13 @@ function CatalogueItemPropertiesMigrationDialog( const validateProperty = React.useCallback(() => { let hasErrors = false; - const propertyNames = - selectedCatalogueCategory.catalogue_item_properties?.map((property) => - property.name.trim().toLowerCase() - ); + const propertyNames = selectedCatalogueCategory.properties?.map( + (property) => property.name.trim().toLowerCase() + ); - const selectedProperty = - selectedCatalogueCategory.catalogue_item_properties?.find( - (property) => property.id === catalogueItemField?.id - ); + const selectedProperty = selectedCatalogueCategory.properties?.find( + (property) => property.id === catalogueItemField?.id + ); if (catalogueItemField) { if (!catalogueItemField.name.trim()) { @@ -631,7 +628,7 @@ function CatalogueItemPropertiesMigrationDialog( }, [ catalogueItemField, propertyMigrationType, - selectedCatalogueCategory.catalogue_item_properties, + selectedCatalogueCategory.properties, ]); const handleAddProperty = React.useCallback(() => { if (catalogueItemField && propertyMigrationType === 'add') { @@ -704,10 +701,9 @@ function CatalogueItemPropertiesMigrationDialog( return; } - const initialPropertyDetails = - selectedCatalogueCategory.catalogue_item_properties?.find( - (property) => property.id === catalogueItemField.id - ); + const initialPropertyDetails = selectedCatalogueCategory.properties?.find( + (property) => property.id === catalogueItemField.id + ); const property: Partial = { id: catalogueItemField.id, @@ -823,12 +819,10 @@ function CatalogueItemPropertiesMigrationDialog( case 1: return ( - {updatedSelectedCatalogueCategory.catalogue_item_properties && ( + {updatedSelectedCatalogueCategory.properties && ( { code: 'energy-meters', is_leaf: true, - catalogue_item_properties: [ + properties: [ { id: '7', name: 'Measurement Range', diff --git a/src/catalogue/items/catalogueItemDirectoryDialog.component.tsx b/src/catalogue/items/catalogueItemDirectoryDialog.component.tsx index c2440289b..45191d7d2 100644 --- a/src/catalogue/items/catalogueItemDirectoryDialog.component.tsx +++ b/src/catalogue/items/catalogueItemDirectoryDialog.component.tsx @@ -90,13 +90,9 @@ const CatalogueItemDirectoryDialog = ( const handleMoveToCatalogueItem = React.useCallback(() => { if ( + JSON.stringify(parentInfo.properties?.map(({ id, ...rest }) => rest)) !== JSON.stringify( - parentInfo.catalogue_item_properties?.map(({ id, ...rest }) => rest) - ) !== - JSON.stringify( - targetCatalogueCategory?.catalogue_item_properties?.map( - ({ id, ...rest }) => rest - ) + targetCatalogueCategory?.properties?.map(({ id, ...rest }) => rest) ) ) { setErrorMessage( @@ -117,20 +113,16 @@ const CatalogueItemDirectoryDialog = ( handleClose, moveToCatalogueItem, onChangeSelectedItems, - parentInfo.catalogue_item_properties, + parentInfo.properties, selectedItems, targetCatalogueCategory, ]); const handleCopyToCatalogueItem = React.useCallback(() => { if ( + JSON.stringify(parentInfo.properties?.map(({ id, ...rest }) => rest)) !== JSON.stringify( - parentInfo.catalogue_item_properties?.map(({ id, ...rest }) => rest) - ) !== - JSON.stringify( - targetCatalogueCategory?.catalogue_item_properties?.map( - ({ id, ...rest }) => rest - ) + targetCatalogueCategory?.properties?.map(({ id, ...rest }) => rest) ) ) { setErrorMessage( @@ -151,7 +143,7 @@ const CatalogueItemDirectoryDialog = ( copyToCatalogueItem, handleClose, onChangeSelectedItems, - parentInfo.catalogue_item_properties, + parentInfo.properties, selectedItems, targetCatalogueCategory, ]); diff --git a/src/catalogue/items/catalogueItemsDialog.component.tsx b/src/catalogue/items/catalogueItemsDialog.component.tsx index cebc992ed..e35f4eda8 100644 --- a/src/catalogue/items/catalogueItemsDialog.component.tsx +++ b/src/catalogue/items/catalogueItemsDialog.component.tsx @@ -72,7 +72,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) { const { open, onClose, parentInfo, selectedCatalogueItem, type } = props; const parentId = parentInfo?.id ?? null; const parentCatalogueItemPropertiesInfo = React.useMemo( - () => parentInfo?.catalogue_item_properties ?? [], + () => parentInfo?.properties ?? [], [parentInfo] ); diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx index e8fa43d03..6c9e45dfd 100644 --- a/src/catalogue/items/catalogueItemsTable.component.tsx +++ b/src/catalogue/items/catalogueItemsTable.component.tsx @@ -227,8 +227,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => { 'create' | 'save as' | 'edit' >('create'); const columns = React.useMemo[]>(() => { - const viewCatalogueItemProperties = - parentInfo.catalogue_item_properties ?? []; + const viewCatalogueItemProperties = parentInfo.properties ?? []; const propertyFilters: PropertyFiltersType = { boolean: 'autocomplete', string: 'text', @@ -582,7 +581,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => { enableGrouping: false, }, ]; - }, [dense, parentInfo.catalogue_item_properties]); + }, [dense, parentInfo.properties]); const [rowSelection, setRowSelection] = React.useState( selectedRowState ?? {} diff --git a/src/items/itemDialog.component.test.tsx b/src/items/itemDialog.component.test.tsx index 0ef910c5d..956b4a2c7 100644 --- a/src/items/itemDialog.component.test.tsx +++ b/src/items/itemDialog.component.test.tsx @@ -229,7 +229,7 @@ describe('ItemDialog', () => { it('displays no item properties message', async () => { props.catalogueCategory = { ...props.catalogueCategory, - catalogue_item_properties: [], + properties: [], } as CatalogueCategory; props.catalogueItem = { diff --git a/src/items/itemDialog.component.tsx b/src/items/itemDialog.component.tsx index badea095e..733b39520 100644 --- a/src/items/itemDialog.component.tsx +++ b/src/items/itemDialog.component.tsx @@ -112,7 +112,7 @@ function ItemDialog(props: ItemDialogProps) { selectedItem, } = props; const parentCatalogueItemPropertiesInfo = React.useMemo( - () => catalogueCategory?.catalogue_item_properties ?? [], + () => catalogueCategory?.properties ?? [], [catalogueCategory] ); diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx index 5727a13ef..8a088eb8c 100644 --- a/src/items/itemsTable.component.tsx +++ b/src/items/itemsTable.component.tsx @@ -107,8 +107,7 @@ export function ItemsTable(props: ItemTableProps) { // Breadcrumbs + Mui table V2 + extra const tableHeight = getPageHeightCalc('50px + 110px + 48px'); const columns = React.useMemo[]>(() => { - const viewCatalogueItemProperties = - catalogueCategory?.catalogue_item_properties ?? []; + const viewCatalogueItemProperties = catalogueCategory?.properties ?? []; const propertyFilters: PropertyFiltersType = { boolean: 'autocomplete', string: 'text', diff --git a/src/mocks/CatalogueCategories.json b/src/mocks/CatalogueCategories.json index adc9d7dbd..4dbdcc40d 100644 --- a/src/mocks/CatalogueCategories.json +++ b/src/mocks/CatalogueCategories.json @@ -32,7 +32,7 @@ "parent_id": null, "code": "overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow-overflow", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Resolution Overflow Overflow Overflow Overflow Overflow", "type": "number", @@ -70,7 +70,7 @@ "parent_id": "1", "code": "cameras", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Resolution", "type": "number", @@ -135,7 +135,7 @@ "parent_id": "1", "code": "energy-meters", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Measurement Range", "type": "number", @@ -164,7 +164,7 @@ "parent_id": "1", "code": "energy-meters-v2", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Measurement Range", "type": "number", @@ -193,7 +193,7 @@ "parent_id": "1", "code": "wavefront-sensors", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Wavefront Measurement Range", "type": "string", @@ -231,7 +231,7 @@ "parent_id": "8", "code": "motorized-actuators", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Travel Range", "type": "number", @@ -305,7 +305,7 @@ "parent_id": "10", "code": "cryopumps", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Cooldown Time", "type": "string", @@ -334,7 +334,7 @@ "parent_id": "10", "code": "dry-vacuum-pumps", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Pumping Speed", "type": "number", @@ -378,7 +378,7 @@ "parent_id": "10", "code": "turbomolecular-pumps", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Pumping Speed", "type": "number", @@ -407,7 +407,7 @@ "parent_id": "10", "code": "turbo-pumps", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Pumping Speed", "type": "number", @@ -454,7 +454,7 @@ "parent_id": "15", "code": "Frequency", "is_leaf": true, - "catalogue_item_properties": [], + "properties": [], "created_time": "2024-01-01T12:00:00.000+00:00", "modified_time": "2024-01-02T13:10:10.000+00:00" }, @@ -464,7 +464,7 @@ "parent_id": "1", "code": "voltage-meters", "is_leaf": true, - "catalogue_item_properties": [ + "properties": [ { "name": "Measurement Range", "type": "number", diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index c7483c11b..ec1d47628 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -76,15 +76,12 @@ export const handlers = [ body = { ...body, - catalogue_item_properties: body.catalogue_item_properties?.map( - (property) => ({ - ...property, - id: generateUniqueId('test_id_'), - unit: - UnitsJSON.find((unit) => unit.id === property.unit_id)?.value ?? - null, - }) - ), + properties: body.properties?.map((property) => ({ + ...property, + id: generateUniqueId('test_id_'), + unit: + UnitsJSON.find((unit) => unit.id === property.unit_id)?.value ?? null, + })), }; return HttpResponse.json( { @@ -250,9 +247,7 @@ export const handlers = [ const property = CatalogueCategoriesJSON.find( (category) => category.id === catalogue_category_id - )?.catalogue_item_properties?.find( - (property) => property.id === property_id - ); + )?.properties?.find((property) => property.id === property_id); return HttpResponse.json( { id: '1', ...property, ...body } as CatalogueCategoryProperty, @@ -280,7 +275,7 @@ export const handlers = [ const catalogueCategoryProperties = CatalogueCategoriesJSON.find( (category) => category.id === body.catalogue_category_id - )?.catalogue_item_properties; + )?.properties; body = { ...body, @@ -691,7 +686,7 @@ export const handlers = [ ); const catalogueCategoryProperties = CatalogueCategoriesJSON.find( (category) => category.id === catalogueItem?.catalogue_category_id - )?.catalogue_item_properties; + )?.properties; const usageStatus = UsageStatusJSON.find( (usageStatus) => usageStatus.id == body.usage_status_id diff --git a/src/testUtils.tsx b/src/testUtils.tsx index 8224fe718..9531c52c6 100644 --- a/src/testUtils.tsx +++ b/src/testUtils.tsx @@ -130,7 +130,7 @@ export const getCatalogueItemsPropertiesById = ( return []; } - const properties = filteredCategories[0].catalogue_item_properties ?? []; + const properties = filteredCategories[0].properties ?? []; return properties as CatalogueCategoryProperty[]; }; From 74ff1b538dbd85e4b762674c51e4402b5cd9e0f9 Mon Sep 17 00:00:00 2001 From: Joshua Kitenge Date: Mon, 17 Jun 2024 10:23:18 +0000 Subject: [PATCH 06/23] point at ral-facilities/inventory-management-system-api#294 for the e2e tests --- .github/workflows/ci-build.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci-build.yml b/.github/workflows/ci-build.yml index 364c028ed..82a7fe11a 100644 --- a/.github/workflows/ci-build.yml +++ b/.github/workflows/ci-build.yml @@ -117,7 +117,7 @@ jobs: --env API__ALLOWED_CORS_HEADERS='["*"]' \ --env API__ALLOWED_CORS_ORIGINS='["*"]' \ --env API__ALLOWED_CORS_METHODS='["*"]' \ - harbor.stfc.ac.uk/inventory-management-system/ims-api:develop + harbor.stfc.ac.uk/inventory-management-system/ims-api:pr-294 - name: Checkout repo uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4 From ee301f54d8a8fdd3358d7dec260c72f78d2c0fea Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Tue, 18 Jun 2024 13:43:42 +0000 Subject: [PATCH 07/23] added aria-label to tooltip #507 --- src/utils.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/utils.tsx b/src/utils.tsx index 360c5a921..6b1490cb5 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -213,6 +213,7 @@ export const OverflowTip: React.FC = ({ return ( Date: Tue, 18 Jun 2024 13:43:58 +0000 Subject: [PATCH 08/23] improved colour contrast in cat cat dialog #507 --- .../category/catalogueCategoryDialog.component.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/catalogue/category/catalogueCategoryDialog.component.tsx b/src/catalogue/category/catalogueCategoryDialog.component.tsx index fca831736..9bf48f22f 100644 --- a/src/catalogue/category/catalogueCategoryDialog.component.tsx +++ b/src/catalogue/category/catalogueCategoryDialog.component.tsx @@ -554,7 +554,11 @@ const CatalogueCategoryDialog = React.memo( - + Catalogue Directory Content Date: Tue, 18 Jun 2024 13:44:16 +0000 Subject: [PATCH 09/23] added label to obsolete reason textfield #507 --- src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx b/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx index 7e69ff3ec..b4ad3eccd 100644 --- a/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx +++ b/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx @@ -12,6 +12,7 @@ import { StepLabel, Stepper, TextField, + Typography, } from '@mui/material'; import { AxiosError } from 'axios'; import React from 'react'; @@ -230,6 +231,7 @@ const ObsoleteCatalogueItemDialog = ( <> Obsolete Reason From 320be225ae53451c768a0e784ff5b2f48535b1d0 Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Tue, 18 Jun 2024 13:50:57 +0000 Subject: [PATCH 10/23] changed obsolete replacement table unselectable item text colour #507 --- src/catalogue/items/catalogueItemsTable.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx index e8fa43d03..e892823c5 100644 --- a/src/catalogue/items/catalogueItemsTable.component.tsx +++ b/src/catalogue/items/catalogueItemsTable.component.tsx @@ -753,7 +753,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => { isItemSelectable === undefined || isItemSelectable(row.original.catalogueItem) ? 'inherit' - : 'action.disabled', + : 'GrayText', }, } as TableCellOverFlowTipProps)} /> From df818b520bbb9334d26fb20dcef74f686e021f82 Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Tue, 18 Jun 2024 14:17:05 +0000 Subject: [PATCH 11/23] changed aria-label in overflow tooltip --- src/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils.tsx b/src/utils.tsx index 6b1490cb5..2319fa313 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -213,7 +213,7 @@ export const OverflowTip: React.FC = ({ return ( Date: Wed, 19 Jun 2024 10:18:17 +0000 Subject: [PATCH 12/23] fixed breadcrumbs fastpass issue #507 --- src/utils.tsx | 1 - src/view/breadcrumbs.component.tsx | 18 +++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/utils.tsx b/src/utils.tsx index 2319fa313..360c5a921 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -213,7 +213,6 @@ export const OverflowTip: React.FC = ({ return ( { const trailPrefix = breadcrumbsInfo && !breadcrumbsInfo.full_trail - ? [emptyElement, ['', ]] + ? [emptyElement, ['test', ]] : [emptyElement]; // Defines the maximum width of each breadcrumb item within the navigation bar, // ensuring it occupies 100% of the view width minus 10% for the sci-gateway navigation, @@ -49,7 +49,7 @@ const Breadcrumbs = (props: BreadcrumbsProps) => { } + separator={} aria-label="breadcrumb" itemsBeforeCollapse={9} > @@ -63,13 +63,17 @@ const Breadcrumbs = (props: BreadcrumbsProps) => { currIndex === breadcrumbsInfo.trail.length + trailPrefix.length - 1 ) { - return ( + return typeof name === 'string' && name != '' ? ( {name} + ) : ( + + {name} + ); } else if (typeof name === 'object') { return ( @@ -78,20 +82,24 @@ const Breadcrumbs = (props: BreadcrumbsProps) => { ); } else { - return ( + return typeof name === 'string' && name != '' ? ( { ev.preventDefault(); onChangeNode(id as string); }} - aria-label={`breadcrumb-${name}`} > {name} + ) : ( + + {name} + ); } })} From 055b87d484f8fafcc98e0e68e5ae3dcdbda4e7f2 Mon Sep 17 00:00:00 2001 From: MatteoGuarnaccia5 Date: Wed, 19 Jun 2024 10:35:12 +0000 Subject: [PATCH 13/23] updated snapshots #507 --- ...talogueItemsDialog.component.test.tsx.snap | 6 +++ ...atalogueItemsTable.component.test.tsx.snap | 8 ++-- .../systemItemsTable.component.test.tsx.snap | 8 ++-- .../breadcrumbs.component.test.tsx.snap | 48 ++++++++----------- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/catalogue/items/__snapshots__/catalogueItemsDialog.component.test.tsx.snap b/src/catalogue/items/__snapshots__/catalogueItemsDialog.component.test.tsx.snap index 0bc79b4ae..31492ca25 100644 --- a/src/catalogue/items/__snapshots__/catalogueItemsDialog.component.test.tsx.snap +++ b/src/catalogue/items/__snapshots__/catalogueItemsDialog.component.test.tsx.snap @@ -939,6 +939,7 @@ exports[`Catalogue Items Dialog > renders properties step correctly 1`] = ` class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-1 css-1de4kho-MuiGrid-root" >