Skip to content

Conditionally render spares 1591 #1599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Conditionally render spares 1591 #1599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8ded06d
Create a provider for API config #1595
joshdimanteto Nov 12, 2025
e17de50
Conditionally render the spares number #1591
joshdimanteto Nov 13, 2025
3719ebc
use 204 no content for when the spares is not defined #1591
joshdimanteto Nov 13, 2025
83073e1
improve codcov #1591
joshdimanteto Nov 13, 2025
5c4afcf
Apply suggestions from code review #1591
joshdimanteto Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 0 additions & 21 deletions src/apiConfigProvider.component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,27 +65,6 @@ describe('APIConfigProvider', () => {
});

it('settings are loaded (without spares)', async () => {
server.use(
http.get('/v1/settings/spares-definition', () => {
return HttpResponse.json({ system_types: [] }, { status: 200 });
})
);
renderComponent();

// Preloader is in a loading state when ConfigProvider is
// loading the configuration.
expect(screen.getByText('Loading...')).toBeInTheDocument();

await waitFor(() => {
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
});
expect(screen.getByTestId('settings')).toBeInTheDocument();
expect(screen.getByTestId('settings')).toHaveTextContent(
JSON.stringify({})
);
});

it('settings are loaded (without spares 204 no content)', async () => {
server.use(
http.get('/v1/settings/spares-definition', () => {
return HttpResponse.json(undefined, { status: 204 });
Expand Down
524 changes: 524 additions & 0 deletions src/catalogue/items/__snapshots__/catalogueItemsDetailsPanel.component.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/catalogue/items/__snapshots__/catalogueItemsPage.component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ exports[`CatalogueItemsPage > renders a catalogue items page correctly 1`] = `
>
<table
class="MuiTable-root MuiTable-stickyHeader css-1gcyac0-MuiTable-root"
style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-catalogueItem_name-size: 200; --col-catalogueItem_name-size: 200; --header-catalogueItem_modified_time-size: 350; --col-catalogueItem_modified_time-size: 350; --header-View_Items-size: 200; --col-View_Items-size: 200; --header-catalogueItem_number_of_spares-size: 350; --col-catalogueItem_number_of_spares-size: 350; --header-catalogueItem_description-size: 250; --col-catalogueItem_description-size: 250; --header-catalogueItem_is_obsolete-size: 200; --col-catalogueItem_is_obsolete-size: 200; --header-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --col-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --header-catalogueItem_obsolete_reason-size: 225; --col-catalogueItem_obsolete_reason-size: 225; --header-catalogueItem_properties_1-size: 250; --col-catalogueItem_properties_1-size: 250; --header-catalogueItem_properties_2-size: 250; --col-catalogueItem_properties_2-size: 250; --header-catalogueItem_properties_3-size: 250; --col-catalogueItem_properties_3-size: 250; --header-catalogueItem_properties_4-size: 250; --col-catalogueItem_properties_4-size: 250; --header-catalogueItem_properties_5-size: 250; --col-catalogueItem_properties_5-size: 250; --header-catalogueItem_properties_6-size: 250; --col-catalogueItem_properties_6-size: 250; --header-catalogueItem_cost_gbp-size: 250; --col-catalogueItem_cost_gbp-size: 250; --header-catalogueItem_cost_to_rework_gbp-size: 250; --col-catalogueItem_cost_to_rework_gbp-size: 250; --header-catalogueItem_days_to_replace-size: 275; --col-catalogueItem_days_to_replace-size: 275; --header-catalogueItem_days_to_rework-size: 250; --col-catalogueItem_days_to_rework-size: 250; --header-catalogueItem_expected_lifetime_days-size: 300; --col-catalogueItem_expected_lifetime_days-size: 300; --header-catalogueItem_drawing_number-size: 250; --col-catalogueItem_drawing_number-size: 250; --header-catalogueItem_drawing_link-size: 250; --col-catalogueItem_drawing_link-size: 250; --header-catalogueItem_item_model_number-size: 250; --col-catalogueItem_item_model_number-size: 250; --header-manufacturer_name-size: 350; --col-manufacturer_name-size: 350; --header-manufacturer_url-size: 250; --col-manufacturer_url-size: 250; --header-manufacturer_address-size: 300; --col-manufacturer_address-size: 300; --header-manufacturer_telephone-size: 300; --col-manufacturer_telephone-size: 300; --header-catalogueItem_notes-size: 250; --col-catalogueItem_notes-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-mrt_row_select-size: 60; --col-mrt_row_select-size: 60; --header-catalogueItem_name-size: 200; --col-catalogueItem_name-size: 200; --header-catalogueItem_modified_time-size: 350; --col-catalogueItem_modified_time-size: 350; --header-View_Items-size: 200; --col-View_Items-size: 200; --header-catalogueItem_description-size: 250; --col-catalogueItem_description-size: 250; --header-catalogueItem_is_obsolete-size: 200; --col-catalogueItem_is_obsolete-size: 200; --header-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --col-catalogueItem_obsolete_replacement_catalogue_item_id-size: 275; --header-catalogueItem_obsolete_reason-size: 225; --col-catalogueItem_obsolete_reason-size: 225; --header-catalogueItem_properties_1-size: 250; --col-catalogueItem_properties_1-size: 250; --header-catalogueItem_properties_2-size: 250; --col-catalogueItem_properties_2-size: 250; --header-catalogueItem_properties_3-size: 250; --col-catalogueItem_properties_3-size: 250; --header-catalogueItem_properties_4-size: 250; --col-catalogueItem_properties_4-size: 250; --header-catalogueItem_properties_5-size: 250; --col-catalogueItem_properties_5-size: 250; --header-catalogueItem_properties_6-size: 250; --col-catalogueItem_properties_6-size: 250; --header-catalogueItem_cost_gbp-size: 250; --col-catalogueItem_cost_gbp-size: 250; --header-catalogueItem_cost_to_rework_gbp-size: 250; --col-catalogueItem_cost_to_rework_gbp-size: 250; --header-catalogueItem_days_to_replace-size: 275; --col-catalogueItem_days_to_replace-size: 275; --header-catalogueItem_days_to_rework-size: 250; --col-catalogueItem_days_to_rework-size: 250; --header-catalogueItem_expected_lifetime_days-size: 300; --col-catalogueItem_expected_lifetime_days-size: 300; --header-catalogueItem_drawing_number-size: 250; --col-catalogueItem_drawing_number-size: 250; --header-catalogueItem_drawing_link-size: 250; --col-catalogueItem_drawing_link-size: 250; --header-catalogueItem_item_model_number-size: 250; --col-catalogueItem_item_model_number-size: 250; --header-manufacturer_name-size: 350; --col-manufacturer_name-size: 350; --header-manufacturer_url-size: 250; --col-manufacturer_url-size: 250; --header-manufacturer_address-size: 300; --col-manufacturer_address-size: 300; --header-manufacturer_telephone-size: 300; --col-manufacturer_telephone-size: 300; --header-catalogueItem_notes-size: 250; --col-catalogueItem_notes-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
>
<thead
class="MuiTableHead-root css-7psuou-MuiTableHead-root"
Expand Down
18 changes: 9 additions & 9 deletions src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,12 +332,12 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
</span>
</div>
<input
aria-describedby=":r41c:-helper-text"
aria-describedby=":r44d:-helper-text"
aria-invalid="false"
aria-label="Filter by Name"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-110vr2a-MuiInputBase-input-MuiInput-input"
id=":r41c:"
id=":r44d:"
placeholder="Filter by Name"
title="Filter by Name"
type="text"
Expand Down Expand Up @@ -375,7 +375,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
</div>
<p
class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-v98l45-MuiFormHelperText-root"
id=":r41c:-helper-text"
id=":r44d:-helper-text"
>
<label>
Filter Mode: Fuzzy
Expand Down Expand Up @@ -489,11 +489,11 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-6h9cc6-MuiInputBase-root-MuiInput-root"
>
<input
aria-describedby=":r41l:-helper-text"
aria-describedby=":r44m:-helper-text"
aria-invalid="false"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1yrc8ca-MuiInputBase-input-MuiInput-input"
id=":r41l:"
id=":r44m:"
inputmode="text"
placeholder="Min"
type="text"
Expand Down Expand Up @@ -524,7 +524,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
</div>
<p
class="MuiFormHelperText-root MuiFormHelperText-sizeMedium css-18y2hez-MuiFormHelperText-root"
id=":r41l:-helper-text"
id=":r44m:-helper-text"
>
<label>
Filter Mode: Between Inclusive
Expand All @@ -541,7 +541,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
aria-invalid="false"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1yrc8ca-MuiInputBase-input-MuiInput-input"
id=":r41o:"
id=":r44p:"
inputmode="text"
placeholder="Max"
type="text"
Expand Down Expand Up @@ -1118,7 +1118,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-10j3yc8-MuiFormLabel-root-MuiInputLabel-root"
for="mrt-rows-per-page-:r411:"
for="mrt-rows-per-page-:r442:"
>
Rows per page
</label>
Expand All @@ -1139,7 +1139,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
aria-hidden="true"
aria-invalid="false"
class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput"
id="mrt-rows-per-page-:r411:"
id="mrt-rows-per-page-:r442:"
tabindex="-1"
value="5"
/>
Expand Down
22 changes: 22 additions & 0 deletions src/catalogue/items/catalogueItemsDetailsPanel.component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import {
} from '../../testUtils';

import userEvent, { UserEvent } from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { CatalogueCategory, CatalogueItem } from '../../api/api.types';
import APIConfigProvider from '../../apiConfigProvider.component';
import { server } from '../../mocks/server';
import CatalogueItemsDetailsPanel, {
CatalogueItemsDetailsPanelProps,
} from './catalogueItemsDetailsPanel.component';
Expand Down Expand Up @@ -150,4 +152,24 @@ describe('Catalogue Items details panel', () => {
);
expect(view.asFragment()).toMatchSnapshot();
});

it('renders details panel correctly (without spares)', async () => {
server.use(
http.get('/v1/settings/spares-definition', () => {
return HttpResponse.json(undefined, { status: 204 });
})
);

const view = createView();
await waitFor(() => {
expect(
screen.getByRole('link', { name: 'Click here' })
).toBeInTheDocument();
});

await waitFor(() =>
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
);
expect(view.asFragment()).toMatchSnapshot();
});
});
46 changes: 25 additions & 21 deletions src/catalogue/items/catalogueItemsDetailsPanel.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ function CatalogueItemsDetailsPanel(props: CatalogueItemsDetailsPanelProps) {
const apiSettings = React.useContext(APISettingsContext);
const sparesFilterState = apiSettings?.spares?.sparesFilterState;

const isSparesDefinitionDefined = !!apiSettings.spares;

const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
setTabValue(newValue);
};
Expand Down Expand Up @@ -107,28 +109,30 @@ function CatalogueItemsDetailsPanel(props: CatalogueItemsDetailsPanelProps) {
</Typography>
</Grid>
<Grid container spacing={0}>
<Grid size={{ xs: 12, sm: 6 }}>
<Typography
sx={{
color: 'text.primary',
}}
>
Number of spares
</Typography>
<Typography
sx={{
color: 'text.secondary',
}}
>
<MuiLink
underline="hover"
component={Link}
to={`${catalogueItemIdData.id}/items${sparesFilterState}`}
{isSparesDefinitionDefined && (
<Grid size={{ xs: 12, sm: 6 }}>
<Typography
sx={{
color: 'text.primary',
}}
>
{catalogueItemIdData.number_of_spares}
</MuiLink>
</Typography>
</Grid>
Number of spares
</Typography>
<Typography
sx={{
color: 'text.secondary',
}}
>
<MuiLink
underline="hover"
component={Link}
to={`${catalogueItemIdData.id}/items${sparesFilterState}`}
>
{catalogueItemIdData.number_of_spares}
</MuiLink>
</Typography>
</Grid>
)}
<Grid size={{ xs: 12, sm: 6 }}>
<Typography
sx={{
Expand Down
17 changes: 17 additions & 0 deletions src/catalogue/items/catalogueItemsLandingPage.component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,23 @@ describe('Catalogue Items Landing Page', () => {
);
});

it('should not display spares number if spares definition is not defined', async () => {
server.use(
http.get('/v1/settings/spares-definition', () => {
return HttpResponse.json(undefined, { status: 204 });
})
);

createView('/catalogue/5/items/89');
await waitFor(() =>
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument()
);

await waitFor(() => {
expect(screen.queryByText('Number of spares')).not.toBeInTheDocument();
});
});

it('landing page renders data correctly when optional values are null', async () => {
createView('/catalogue/4/items/33');

Expand Down
49 changes: 26 additions & 23 deletions src/catalogue/items/catalogueItemsLandingPage.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ function CatalogueItemsLandingPage() {

const apiSettings = React.useContext(APISettingsContext);
const sparesFilterState = apiSettings?.spares?.sparesFilterState;
const isSparesDefinitionDefined = !!apiSettings.spares;

const isParentCorrect =
catalogueItemIdData?.catalogue_category_id === catalogueCategoryId;
Expand Down Expand Up @@ -197,31 +198,33 @@ function CatalogueItemsLandingPage() {

<Grid container size={12}>
<Grid container spacing={1}>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Typography
align="left"
sx={{
color: 'text.primary',
}}
>
Number of spares
</Typography>
{isSparesDefinitionDefined && (
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Typography
align="left"
sx={{
color: 'text.primary',
}}
>
Number of spares
</Typography>

<Typography
align="left"
sx={{
color: 'text.secondary',
}}
>
<MuiLink
underline="hover"
component={Link}
to={`items${sparesFilterState}`}
<Typography
align="left"
sx={{
color: 'text.secondary',
}}
>
{catalogueItemIdData.number_of_spares}
</MuiLink>
</Typography>
</Grid>
<MuiLink
underline="hover"
component={Link}
to={`items${sparesFilterState}`}
>
{catalogueItemIdData.number_of_spares}
</MuiLink>
</Typography>
</Grid>
)}
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Typography
align="left"
Expand Down
Loading
Loading