= (
const endDateFilter = filter.endDate ? toDate(filter.endDate) : null;
if (startDateFilter && endDateFilter) {
- return isWithinInterval(tableDate, {
- start: startDateFilter,
- end: endDateFilter,
- });
+ try {
+ satisfiedFilters.push(
+ isWithinInterval(tableDate, {
+ start: startDateFilter,
+ end: endDateFilter,
+ })
+ );
+ } catch (e) {
+ if (e instanceof RangeError) {
+ // isWithinInterval throws with RangeError if startDate > endDate
+ // in the date filter we tell the user this is invalid,
+ // so handle it there and do nothing here
+ } else {
+ throw e;
+ }
+ }
+
+ continue;
}
if (startDateFilter) {
- return (
+ satisfiedFilters.push(
isEqual(tableDate, startDateFilter) ||
- isAfter(tableDate, startDateFilter)
+ isAfter(tableDate, startDateFilter)
);
+
+ continue;
}
if (endDateFilter) {
- return (
+ satisfiedFilters.push(
isEqual(tableDate, endDateFilter) ||
- isBefore(tableDate, endDateFilter)
+ isBefore(tableDate, endDateFilter)
);
+
+ continue;
}
}
+ satisfiedFilters.push(false);
}
- return true;
+ return satisfiedFilters.every((value) => value);
});
function sortDownloadItems(
diff --git a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap
index f86cd8c24..af4b4ede8 100644
--- a/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap
+++ b/packages/datagateway-download/src/downloadTab/__snapshots__/downloadTab.component.test.tsx.snap
@@ -178,7 +178,7 @@ exports[`DownloadTab should render correctly 1`] = `
{
cy.get('.MuiFormHelperText-root').contains('At least one required');
});
+ // MUI v6 date pickers don't allow for invalid dates to be entered
it('should display an error when an invalid start date is entered', () => {
- cy.get('[aria-label="Start date input"]').type('2009-13-01');
+ cy.get('[aria-label="Start date input"]').type('2009-12-00');
cy.get('.MuiFormHelperText-root').contains('Date format: yyyy-MM-dd.');
- cy.get('[aria-label="Start date input"]').clear();
+ // cy.get('[aria-label="Start date input"]').clear();
+ cy.get('[aria-label="Start date input"]').type('{ctrl}a{backspace}');
cy.get('.MuiFormHelperText-root').should('not.exist');
- cy.get('[aria-label="Start date input"]').type('2009-02-30');
+ cy.get('[aria-label="Start date input"]').type('0000-02-28');
cy.get('.MuiFormHelperText-root').contains('Date format: yyyy-MM-dd.');
});
it('should display an error when an invalid end date is entered', () => {
- cy.get('[aria-label="End date input"]').type('2009-13-01');
+ cy.get('[aria-label="End date input"]').type('2009-12-00');
cy.get('.MuiFormHelperText-root').contains('Date format: yyyy-MM-dd.');
- cy.get('[aria-label="End date input"]').clear();
+ // cy.get('[aria-label="End date input"]').clear();
+ cy.get('[aria-label="End date input"]').type('{ctrl}a{backspace}');
cy.get('.MuiFormHelperText-root').should('not.exist');
- cy.get('[aria-label="End date input"]').type('2009-02-30');
+ cy.get('[aria-label="End date input"]').type('0000-02-28');
cy.get('.MuiFormHelperText-root').contains('Date format: yyyy-MM-dd.');
});
diff --git a/packages/datagateway-search/cypress/e2e/searchPageContainer.cy.ts b/packages/datagateway-search/cypress/e2e/searchPageContainer.cy.ts
index a9af8f74a..8c9ef3e7a 100644
--- a/packages/datagateway-search/cypress/e2e/searchPageContainer.cy.ts
+++ b/packages/datagateway-search/cypress/e2e/searchPageContainer.cy.ts
@@ -1,31 +1,24 @@
describe('SearchPageContainer Component', () => {
- let facilityName: string;
+ // let facilityName: string;
- before(() => {
- cy.readFile('server/e2e-settings.json').then((settings) => {
- if (settings.facilityName) facilityName = settings.facilityName;
- });
- });
+ // before(() => {
+ // cy.readFile('server/e2e-settings.json').then((settings) => {
+ // if (settings.facilityName) facilityName = settings.facilityName;
+ // });
+ // });
it('Should default back to 10 when any result is manually entered into the url', () => {
cy.login();
- cy.visit('/search/data?view=card&results=100');
cy.intercept('**/investigations/count?where=%7B%22id*').as(
'investigationsCount'
);
cy.intercept('**/investigations?*').as('investigations');
- cy.intercept('**/datasets/count?where=%7B%22id*').as('datasetsCount');
- cy.intercept('**/datasets?*').as('datasets');
- cy.intercept('**/datafiles/count?where=%7B%22id*').as('datafilesCount');
- cy.intercept('**/datafiles?*').as('datafiles');
- cy.intercept(`**/topcat/user/cart/${facilityName}/cartItems`).as('topcat');
-
- cy.clearDownloadCart();
- cy.get('[aria-label="Submit search"]')
- .click()
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
+ cy.visit('/search/data?view=card&results=100');
+
+ cy.get('[aria-label="Submit search"]').click();
+ cy.wait(['@investigations', '@investigations', '@investigationsCount'], {
+ timeout: 10000,
+ });
cy.get('[aria-label="card-buttons"]', { timeout: 10000 }).should(
'have.length',
@@ -33,40 +26,67 @@ describe('SearchPageContainer Component', () => {
);
});
+ it('should be able to load results from a URL', () => {
+ cy.login();
+ cy.intercept('**/investigations/count?where=%7B%22id*').as(
+ 'investigationsCount'
+ );
+ cy.intercept('**/investigations?*').as('investigations');
+
+ cy.visit('/search/data/?view=card&searchText=test&startDate=2000-06-01');
+ cy.wait(['@investigations', '@investigations', '@investigationsCount'], {
+ timeout: 10000,
+ });
+
+ //Should be in card view
+ cy.get('[aria-label="page view Display as table"]').should('exist');
+ cy.get('[aria-label="page view Display as table"]').contains(
+ 'Display as table'
+ );
+
+ cy.get('[aria-label="Search table"]')
+ .contains('Investigation')
+ .contains('1')
+ .should('exist');
+ cy.get('[aria-label="Search table"]')
+ .contains('Dataset')
+ .contains('5')
+ .should('exist');
+ cy.get('[aria-label="Search table"]')
+ .contains('Datafile')
+ .contains('36')
+ .should('exist');
+ });
+
describe('SearchPageContainer Components', () => {
beforeEach(() => {
cy.login();
+ cy.clearDownloadCart();
cy.visit('/search/data/');
cy.intercept('**/investigations/count?where=%7B%22id*').as(
'investigationsCount'
);
cy.intercept('**/investigations?*').as('investigations');
- cy.clearDownloadCart();
cy.get('#filled-search').type('dog');
- cy.get('[aria-label="Submit search"]')
- .click()
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
+ cy.get('[aria-label="Submit search"]').click();
+ cy.wait(['@investigations', '@investigations', '@investigationsCount'], {
+ timeout: 10000,
+ });
});
it('should load correctly', () => {
cy.title().should('equal', 'DataGateway Search');
cy.get('#container-search-filters').should('exist');
+ cy.get('#container-search-table').should('exist');
+
cy.location().should((loc) => {
expect(loc.search).to.eq('?searchText=dog');
});
- });
- it('should display results correctly', () => {
- cy.get('#container-search-table').should('exist');
- });
-
- it('should have the correct url for the DOI link (Tableview) ', () => {
- // DOI
+ // check table DOI link is correct
cy.get('[data-testid="investigation-search-table-doi-link"]')
.first()
@@ -81,21 +101,6 @@ describe('SearchPageContainer Component', () => {
});
});
- it('should be able to navigate through tabs without losing the filters (Table)', () => {
- cy.title().should('equal', 'DataGateway Search');
-
- cy.get('#container-search-filters').should('exist');
- cy.get('[aria-label="Filter by Title"]').type('ba');
- cy.contains('Visit ID').first().click();
-
- cy.get('[id="simple-tab-dataset"]').click();
- cy.get('[id="simple-tab-investigation"]').click();
-
- cy.get('[aria-rowcount="4"]').should('exist');
-
- cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains('18');
- });
-
it('should be able to click clear filters button to clear filters', () => {
cy.url().then((url) => {
cy.get('#container-search-filters').should('exist');
@@ -118,25 +123,18 @@ describe('SearchPageContainer Component', () => {
});
});
- it('should have the correct url for the DOI link (Cardview) ', () => {
- // DOI
-
- cy.get('[aria-label="page view Display as cards"]').click();
+ it('should be able to switch between tabs (and filters should not be lost)', () => {
+ cy.get('[aria-label="Search table"]')
+ .contains('Investigation')
+ .contains('5');
- cy.get('[data-testid="investigation-search-card-doi-link"]')
- .first()
- .then(($doi) => {
- const doi = $doi.text();
+ cy.get('[aria-label="Filter by Title"]').type('ba');
+ cy.contains('Visit ID').first().click();
- const url = `https://doi.org/${doi}`;
+ cy.get('[aria-rowcount="4"]').should('exist');
- cy.get('[data-testid="investigation-search-card-doi-link"]')
- .first()
- .should('have.attr', 'href', url);
- });
- });
+ cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains('18');
- it('should be able to switch between tabs', () => {
cy.get('[aria-label="Search table"]')
.contains('Dataset')
.contains('3')
@@ -149,8 +147,12 @@ describe('SearchPageContainer Component', () => {
cy.get('[aria-label="Search table"]')
.contains('Investigation')
- .contains('5')
+ .contains('4')
.click();
+
+ cy.get('[aria-rowcount="4"]').should('exist');
+
+ cy.get('[aria-rowindex="1"] [aria-colindex="4"]').contains('18');
});
it('should be able to switch to card view', () => {
@@ -165,6 +167,19 @@ describe('SearchPageContainer Component', () => {
expect(loc.search).to.eq('?view=card&searchText=dog');
});
+ // check card view DOI link is correct
+ cy.get('[data-testid="investigation-search-card-doi-link"]')
+ .first()
+ .then(($doi) => {
+ const doi = $doi.text();
+
+ const url = `https://doi.org/${doi}`;
+
+ cy.get('[data-testid="investigation-search-card-doi-link"]')
+ .first()
+ .should('have.attr', 'href', url);
+ });
+
cy.get('[aria-label="page view Display as table"]').click();
//Should now be in table view
@@ -194,101 +209,73 @@ describe('SearchPageContainer Component', () => {
});
it('should be able to choose number of results to display', () => {
- cy.login();
- cy.visit('/search/data/');
- cy.intercept('**/investigations/count?where=%7B%22id*').as(
- 'investigationsCount'
- );
- cy.intercept('**/investigations?*').as('investigations');
+ cy.get('[aria-label="Search text input"]').clear();
- cy.clearDownloadCart();
- cy.get('[aria-label="Submit search"]')
- .click()
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
+ cy.get('[aria-label="Submit search"]').click();
cy.get('[aria-label="page view Display as cards"]').click();
- cy.get('[aria-label="card-buttons"]', { timeout: 10000 }).should(
- 'have.length',
- 10
- );
- cy.get('select[id="select-max-results"]', {
- timeout: 10000,
- })
- .select('20')
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
- cy.get('[aria-label="card-buttons"]', { timeout: 10000 }).should(
- 'have.length',
- 20
- );
+ cy.get('select[id="select-max-results"]')
+ .as('maxResultsSelect')
+ .find('option:selected', { timeout: 10000 })
+ .should('have.text', '10');
+ cy.get('[aria-label="card-buttons"]')
+ .as('cardButtons')
+ .should('have.length', 10);
- cy.get('select[id="select-max-results"]', {
- timeout: 10000,
- })
- .select('30')
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
- cy.get('[aria-label="card-buttons"]', { timeout: 10000 }).should(
- 'have.length',
- 30
- );
+ cy.get('@maxResultsSelect').select('20');
+
+ cy.get('@maxResultsSelect')
+ .find('option:selected', { timeout: 10000 })
+ .should('have.text', '20');
+ cy.get('@cardButtons').should('have.length', 20);
+
+ cy.get('@maxResultsSelect').select('30');
+
+ cy.get('@maxResultsSelect')
+ .find('option:selected', { timeout: 10000 })
+ .should('have.text', '30');
+
+ cy.get('@cardButtons').should('have.length', 30);
});
- //This test appears to get a different number of results locally compared to the automated tests
- //on github meaning the test fails
- it.skip('should be able to change page in card view', () => {
- cy.get('[aria-label="Search text input"]').find('#filled-search').clear();
+ it('should be able to change page in card view', () => {
+ cy.get('[aria-label="Search text input"]').clear();
- cy.get('[aria-label="Submit search"]')
- .click()
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
+ cy.get('[aria-label="Submit search"]').click();
cy.get('[aria-label="page view Display as cards"]').click();
+ // we're testing cards in the middle of pages, as CI and SG-preprod can differ
+ // by around 1 result, so using first/last item per page is going to be
+ // wrong on one env or the other
+
cy.get('[aria-label="Go to page 2"]', { timeout: 10000 }).first().click();
- cy.get('[data-testid="card"]')
- .first()
- .contains('Guy maintain us process official people suffer.');
+ cy.contains('[data-testid="card"]', 'Star enter wide nearly off');
cy.get('[aria-label="Go to next page"]', { timeout: 10000 })
.first()
.click();
- cy.get('[data-testid="card"]')
- .first()
- .contains('Yourself smile either I pass significant.');
+ cy.contains('[data-testid="card"]', 'Crime town perhaps');
cy.get('[aria-label="Go to last page"]', { timeout: 10000 })
.first()
.click();
- cy.get('[data-testid="card"]')
- .first()
- .contains('Window former upon writer help step account.');
+ cy.contains('[data-testid="card"]', 'Imagine ball old window');
cy.get('[aria-label="Go to previous page"]', { timeout: 10000 })
.first()
.click();
- cy.get('[data-testid="card"]')
- .first()
- .contains('Someone statement Republican plan watch.');
+ cy.contains('[data-testid="card"]', 'Deep watch simple');
cy.get('[aria-label="Go to first page"]', { timeout: 10000 })
.first()
.click();
- cy.get('[data-testid="card"]')
- .first()
- .contains('Including spend increase ability music skill former.');
+ cy.contains('[data-testid="card"]', 'Now himself exist board space');
});
it('should display selection alert banner correctly', () => {
- cy.get(`[aria-rowindex="1"] [aria-colindex="1"]`)
- .click()
- .wait('@investigations', { timeout: 10000 });
+ cy.get(`[aria-rowindex="1"] [aria-colindex="1"]`).click();
+ cy.wait('@investigations', { timeout: 10000 });
cy.get('[aria-label="selection-alert"]').should('exist');
cy.get('[aria-label="selection-alert-text"]')
@@ -316,11 +303,10 @@ describe('SearchPageContainer Component', () => {
//Close drop down menu
cy.get('body').type('{esc}');
- cy.get('[aria-label="Submit search"]')
- .click()
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
+ cy.get('[aria-label="Submit search"]').click();
+ cy.wait(['@investigations', '@investigations', '@investigationsCount'], {
+ timeout: 10000,
+ });
cy.location().should((loc) => {
expect(loc.search).to.eq(
@@ -390,11 +376,10 @@ describe('SearchPageContainer Component', () => {
it('should be able to select a start date', () => {
cy.get('[aria-label="Start date input"]').type('2009-01-01');
- cy.get('[aria-label="Submit search"]')
- .click()
- .wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
+ cy.get('[aria-label="Submit search"]').click();
+ cy.wait(['@investigations', '@investigations', '@investigationsCount'], {
+ timeout: 10000,
+ });
cy.location().should((loc) => {
expect(loc.search).to.contains('?searchText=dog&startDate=2009-01-01');
@@ -405,32 +390,5 @@ describe('SearchPageContainer Component', () => {
.contains('2')
.should('exist');
});
-
- it('should be able to load results from a URL', () => {
- cy.visit(
- '/search/data/?view=card&searchText=test&startDate=2000-06-01'
- ).wait(['@investigations', '@investigations', '@investigationsCount'], {
- timeout: 10000,
- });
-
- //Should be in card view
- cy.get('[aria-label="page view Display as table"]').should('exist');
- cy.get('[aria-label="page view Display as table"]').contains(
- 'Display as table'
- );
-
- cy.get('[aria-label="Search table"]')
- .contains('Investigation')
- .contains('1')
- .should('exist');
- cy.get('[aria-label="Search table"]')
- .contains('Dataset')
- .contains('5')
- .should('exist');
- cy.get('[aria-label="Search table"]')
- .contains('Datafile')
- .contains('36')
- .should('exist');
- });
});
});
diff --git a/packages/datagateway-search/package.json b/packages/datagateway-search/package.json
index f650ab8bb..598f27bf5 100644
--- a/packages/datagateway-search/package.json
+++ b/packages/datagateway-search/package.json
@@ -9,7 +9,7 @@
"@emotion/styled": "11.11.0",
"@mui/icons-material": "5.11.0",
"@mui/material": "5.11.0",
- "@mui/x-date-pickers": "5.0.9",
+ "@mui/x-date-pickers": "6.11.2",
"@testing-library/user-event": "^14.4.3",
"@types/history": "4.7.11",
"@types/jest": "29.5.2",
@@ -67,7 +67,7 @@
"e2e": "start-server-and-test e2e:serve http://localhost:3000 cy:run",
"cy:open": "cypress open",
"cy:run": "cypress run",
- "lint:js": "eslint --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src && yarn build",
+ "lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src ./cypress && tsc --noEmit",
"eject": "react-scripts eject",
"pre-commit": "lint-staged"
},
@@ -107,13 +107,13 @@
},
"devDependencies": {
"@babel/eslint-parser": "7.22.5",
- "@testing-library/cypress": "^8.0.7",
+ "@testing-library/cypress": "8.0.7",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "12.1.3",
"@testing-library/react-hooks": "8.0.1",
"@testing-library/user-event": "14.4.3",
"@types/enzyme": "3.10.10",
- "@types/lodash.isequal": "^4.5.6",
+ "@types/lodash.isequal": "4.5.6",
"@types/react-redux": "7.1.22",
"@types/redux-mock-store": "1.0.3",
"@typescript-eslint/eslint-plugin": "5.61.0",
diff --git a/packages/datagateway-search/src/search/__snapshots__/datePicker.component.test.tsx.snap b/packages/datagateway-search/src/search/__snapshots__/datePicker.component.test.tsx.snap
deleted file mode 100644
index 1df6eeb4f..000000000
--- a/packages/datagateway-search/src/search/__snapshots__/datePicker.component.test.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DatePicker component tests CustomClearButton renders correctly 1`] = `
-
-
-
-`;
diff --git a/packages/datagateway-search/src/search/datePicker.component.test.tsx b/packages/datagateway-search/src/search/datePicker.component.test.tsx
index 380bbe6fb..419923c34 100644
--- a/packages/datagateway-search/src/search/datePicker.component.test.tsx
+++ b/packages/datagateway-search/src/search/datePicker.component.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { StateType } from '../state/app.types';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
-import SelectDates, { CustomClearButton } from './datePicker.component';
+import SelectDates from './datePicker.component';
import thunk from 'redux-thunk';
import { Router } from 'react-router-dom';
import { initialState } from '../state/reducers/dgsearch.reducer';
@@ -11,7 +11,6 @@ import {
applyDatePickerWorkaround,
cleanupDatePickerWorkaround,
} from '../setupTests';
-import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
import { render, type RenderResult, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserEvent } from '@testing-library/user-event/setup/setup';
@@ -88,29 +87,6 @@ describe('DatePicker component tests', () => {
expect(endDateInput).toHaveValue('2021-10-28');
});
- describe('CustomClearButton', () => {
- const onClear = jest.fn();
- let props: PickersActionBarProps;
-
- beforeEach(() => {
- props = {
- onClear: onClear,
- };
- });
-
- it('renders correctly', () => {
- const { asFragment } = render();
- expect(asFragment()).toMatchSnapshot();
- });
-
- it('calls onClear when button clicked', async () => {
- const user = userEvent.setup();
- render();
- await user.click(await screen.findByRole('button'));
- expect(onClear).toHaveBeenCalled();
- });
- });
-
describe('Start date box', () => {
let user: UserEvent;
@@ -126,7 +102,7 @@ describe('DatePicker component tests', () => {
name: 'searchBox.start_date_arialabel',
});
- await user.type(startDateInput, '2012 01 01');
+ await user.type(startDateInput, '2012-01-01');
expect(pushSpy).toHaveBeenCalledWith('?startDate=2012-01-01');
});
@@ -185,6 +161,7 @@ describe('DatePicker component tests', () => {
expect(testInitiateSearch).toHaveBeenCalled();
});
+ // In v6, date pickers don't allow invalid dates to be entered
it('displays error message when an invalid date is entered', async () => {
history.replace('/?searchText=&investigation=false');
@@ -193,7 +170,7 @@ describe('DatePicker component tests', () => {
name: 'searchBox.start_date_arialabel',
});
- await user.type(startDateInput, '2012 01 35');
+ await user.type(startDateInput, '2012-01-00');
expect(
await screen.findByText('searchBox.invalid_date_message')
@@ -208,7 +185,7 @@ describe('DatePicker component tests', () => {
name: 'searchBox.start_date_arialabel',
});
- await user.type(startDateInput, '3000 01 01');
+ await user.type(startDateInput, '3000-01-01');
expect(
await screen.findByText('searchBox.invalid_date_message')
@@ -223,7 +200,7 @@ describe('DatePicker component tests', () => {
name: 'searchBox.start_date_arialabel',
});
- await user.type(startDateInput, '2012 01 01');
+ await user.type(startDateInput, '2012-01-01');
const errorMessages = await screen.findAllByText(
'searchBox.invalid_date_range_message'
@@ -321,6 +298,7 @@ describe('DatePicker component tests', () => {
expect(testInitiateSearch).toHaveBeenCalled();
});
+ // In v6, date pickers don't allow invalid dates to be entered
it('displays error message when an invalid date is entered', async () => {
history.replace('/?searchText=&investigation=false');
@@ -329,7 +307,7 @@ describe('DatePicker component tests', () => {
name: 'searchBox.end_date_arialabel',
});
- await user.type(endDateInput, '2012 01 35');
+ await user.type(endDateInput, '2012-01-00');
expect(
await screen.findByText('searchBox.invalid_date_message')
@@ -344,7 +322,7 @@ describe('DatePicker component tests', () => {
name: 'searchBox.end_date_arialabel',
});
- await user.type(endDateInput, '1203 01 01');
+ await user.type(endDateInput, '1203-01-01');
expect(
await screen.findByText('searchBox.invalid_date_message')
@@ -359,7 +337,7 @@ describe('DatePicker component tests', () => {
name: 'searchBox.end_date_arialabel',
});
- await user.type(endDateInput, '2010 01 01');
+ await user.type(endDateInput, '2010-01-01');
const errorMessages = await screen.findAllByText(
'searchBox.invalid_date_range_message'
diff --git a/packages/datagateway-search/src/search/datePicker.component.tsx b/packages/datagateway-search/src/search/datePicker.component.tsx
index 6d13adec1..b1350b34a 100644
--- a/packages/datagateway-search/src/search/datePicker.component.tsx
+++ b/packages/datagateway-search/src/search/datePicker.component.tsx
@@ -9,27 +9,9 @@ import {
} from 'datagateway-common';
import { useLocation } from 'react-router-dom';
import { isBefore, isValid } from 'date-fns';
-import { TextField, Button } from '@mui/material';
+import { TextField, TextFieldProps } from '@mui/material';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
-
-export const CustomClearButton = (
- props: PickersActionBarProps
-): JSX.Element => {
- const { onClear } = props;
- return (
-
- );
-};
interface DatePickerProps {
initiateSearch: () => void;
@@ -41,6 +23,38 @@ interface DatePickerStoreProps {
type DatePickerCombinedProps = DatePickerProps & DatePickerStoreProps;
+const CustomTextField: React.FC = (props) => {
+ const { invalidDateRange, t, sideLayout, ...inputProps } =
+ props.inputProps ?? {};
+ const error =
+ // eslint-disable-next-line react/prop-types
+ (props.error || invalidDateRange) ?? undefined;
+ let helperText = t('searchBox.invalid_date_message');
+ if (invalidDateRange) helperText = t('searchBox.invalid_date_range_message');
+ return (
+
+ );
+};
+
export function SelectDates(props: DatePickerCombinedProps): JSX.Element {
const { sideLayout, initiateSearch } = props;
@@ -112,94 +126,58 @@ export function SelectDates(props: DatePickerCombinedProps): JSX.Element {
<>
{
handleChange(date as Date, 'startDate');
}}
- componentsProps={{
+ slots={{
+ textField: CustomTextField,
+ }}
+ slotProps={{
actionBar: {
actions: ['clear'],
},
- }}
- components={{
- ActionBar: CustomClearButton,
- }}
- renderInput={(props) => {
- const error =
- // eslint-disable-next-line react/prop-types
- (props.error || invalidDateRange) ?? undefined;
- let helperText = t('searchBox.invalid_date_message');
- if (invalidDateRange)
- helperText = t('searchBox.invalid_date_range_message');
-
- return (
-
- );
+ textField: {
+ inputProps: {
+ invalidDateRange,
+ sideLayout,
+ t: t,
+ placeholder: t('searchBox.start_date'),
+ 'aria-label': t('searchBox.start_date_arialabel'),
+ },
+ onKeyDown: handleKeyDown,
+ },
}}
/>
{sideLayout ?
: null}
{
handleChange(date as Date, 'endDate');
}}
- componentsProps={{
+ slots={{
+ textField: CustomTextField,
+ }}
+ slotProps={{
actionBar: {
actions: ['clear'],
},
- }}
- components={{
- ActionBar: CustomClearButton,
- }}
- renderInput={(props) => {
- const error =
- // eslint-disable-next-line react/prop-types
- (props.error || invalidDateRange) ?? undefined;
- let helperText = t('searchBox.invalid_date_message');
- if (invalidDateRange)
- helperText = t('searchBox.invalid_date_range_message');
-
- return (
-
- );
+ textField: {
+ inputProps: {
+ invalidDateRange,
+ sideLayout,
+ t: t,
+ placeholder: t('searchBox.end_date'),
+ 'aria-label': t('searchBox.end_date_arialabel'),
+ },
+ onKeyDown: handleKeyDown,
+ },
}}
/>
diff --git a/yarn.lock b/yarn.lock
index ac649748c..7469a4daf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13,9 +13,9 @@ __metadata:
linkType: hard
"@adobe/css-tools@npm:^4.0.1":
- version: 4.1.0
- resolution: "@adobe/css-tools@npm:4.1.0"
- checksum: 50d0098461af146e112bdc700959fac473cce31ad25f5077b11c87bc66529c4aeb5a1e6f30f4a9646efe003c242f52f181f042e21f9cc137703ffde54a9d1fb5
+ version: 4.3.1
+ resolution: "@adobe/css-tools@npm:4.3.1"
+ checksum: ad43456379ff391132aff687ece190cb23ea69395e23c9b96690eeabe2468da89a4aaf266e4f8b6eaab53db3d1064107ce0f63c3a974e864f4a04affc768da3f
languageName: node
linkType: hard
@@ -1458,12 +1458,12 @@ __metadata:
languageName: node
linkType: hard
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
- version: 7.22.5
- resolution: "@babel/runtime@npm:7.22.5"
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+ version: 7.22.10
+ resolution: "@babel/runtime@npm:7.22.10"
dependencies:
- regenerator-runtime: ^0.13.11
- checksum: 12a50b7de2531beef38840d17af50c55a094253697600cee255311222390c68eed704829308d4fd305e1b3dfbce113272e428e9d9d45b1730e0fede997eaceb1
+ regenerator-runtime: ^0.14.0
+ checksum: 524d41517e68953dbc73a4f3616b8475e5813f64e28ba89ff5fca2c044d535c2ea1a3f310df1e5bb06162e1f0b401b5c4af73fe6e2519ca2450d9d8c44cf268d
languageName: node
linkType: hard
@@ -1768,14 +1768,14 @@ __metadata:
languageName: node
linkType: hard
-"@date-io/core@npm:^2.15.0, @date-io/core@npm:^2.16.0":
+"@date-io/core@npm:^2.16.0":
version: 2.16.0
resolution: "@date-io/core@npm:2.16.0"
checksum: 336d0dd90fd0848116472cfb0e694e85860b2916952304201bb4d3a23d453d44589d346494584faba0fc05751cc38f1880889ce48cd982377aac2bfb20469b8a
languageName: node
linkType: hard
-"@date-io/date-fns@npm:2.16.0, @date-io/date-fns@npm:^2.15.0":
+"@date-io/date-fns@npm:2.16.0":
version: 2.16.0
resolution: "@date-io/date-fns@npm:2.16.0"
dependencies:
@@ -1789,48 +1789,6 @@ __metadata:
languageName: node
linkType: hard
-"@date-io/dayjs@npm:^2.15.0":
- version: 2.16.0
- resolution: "@date-io/dayjs@npm:2.16.0"
- dependencies:
- "@date-io/core": ^2.16.0
- peerDependencies:
- dayjs: ^1.8.17
- peerDependenciesMeta:
- dayjs:
- optional: true
- checksum: bb8192207addbf6430c35da7664b97761f87d2c6cf4a3eaf464584a980e6cecaede581af1a40c5ba0a0189dc6bff2ac16408a95ec88e542b16915430191298c8
- languageName: node
- linkType: hard
-
-"@date-io/luxon@npm:^2.15.0":
- version: 2.16.1
- resolution: "@date-io/luxon@npm:2.16.1"
- dependencies:
- "@date-io/core": ^2.16.0
- peerDependencies:
- luxon: ^1.21.3 || ^2.x || ^3.x
- peerDependenciesMeta:
- luxon:
- optional: true
- checksum: ac3f667ff122728e7559fac96f75bc85109d0054bf3955c1aea9d8365e08bd49ed51780f7f3900160773c0ed584db21556ea7d49acf075c61a30eb0b0e5da935
- languageName: node
- linkType: hard
-
-"@date-io/moment@npm:^2.15.0":
- version: 2.16.1
- resolution: "@date-io/moment@npm:2.16.1"
- dependencies:
- "@date-io/core": ^2.16.0
- peerDependencies:
- moment: ^2.24.0
- peerDependenciesMeta:
- moment:
- optional: true
- checksum: 37a541661c504e1005904fab27b7b01d0c5d6c9c8c8a3b0a69d42a578aee8c52de7c181f917ad7acb14a9d7356d240c7e107777edf10efa11a453535977fc905
- languageName: node
- linkType: hard
-
"@emotion/babel-plugin@npm:^11.11.0":
version: 11.11.0
resolution: "@emotion/babel-plugin@npm:11.11.0"
@@ -2605,48 +2563,46 @@ __metadata:
languageName: node
linkType: hard
-"@mui/utils@npm:^5.10.3, @mui/utils@npm:^5.11.0, @mui/utils@npm:^5.11.2":
- version: 5.11.2
- resolution: "@mui/utils@npm:5.11.2"
+"@mui/utils@npm:^5.11.0, @mui/utils@npm:^5.11.2, @mui/utils@npm:^5.14.5":
+ version: 5.14.5
+ resolution: "@mui/utils@npm:5.14.5"
dependencies:
- "@babel/runtime": ^7.20.7
+ "@babel/runtime": ^7.22.6
"@types/prop-types": ^15.7.5
- "@types/react-is": ^16.7.1 || ^17.0.0
+ "@types/react-is": ^18.2.1
prop-types: ^15.8.1
react-is: ^18.2.0
peerDependencies:
react: ^17.0.0 || ^18.0.0
- checksum: 69091d9120681dee29fc20220b7db5dd61334194c139df735d932f072dab00eeae6e440058ffbccebbe93d4a3a998c23b6f4df570cb66cdacd023fce9f0f5912
+ checksum: 7044d73ae41bdfd9c7c6287a3c1391ec4c5395c8f0092eac3ca4f1fd5359068fad29366f39d8072f68493eb5225399463935bbca266c879d630f8ebaa3db96d7
languageName: node
linkType: hard
-"@mui/x-date-pickers@npm:5.0.9":
- version: 5.0.9
- resolution: "@mui/x-date-pickers@npm:5.0.9"
+"@mui/x-date-pickers@npm:6.11.2":
+ version: 6.11.2
+ resolution: "@mui/x-date-pickers@npm:6.11.2"
dependencies:
- "@babel/runtime": ^7.18.9
- "@date-io/core": ^2.15.0
- "@date-io/date-fns": ^2.15.0
- "@date-io/dayjs": ^2.15.0
- "@date-io/luxon": ^2.15.0
- "@date-io/moment": ^2.15.0
- "@mui/utils": ^5.10.3
- "@types/react-transition-group": ^4.4.5
- clsx: ^1.2.1
- prop-types: ^15.7.2
+ "@babel/runtime": ^7.22.6
+ "@mui/utils": ^5.14.5
+ "@types/react-transition-group": ^4.4.6
+ clsx: ^2.0.0
+ prop-types: ^15.8.1
react-transition-group: ^4.4.5
- rifm: ^0.12.1
peerDependencies:
"@emotion/react": ^11.9.0
"@emotion/styled": ^11.8.1
- "@mui/material": ^5.4.1
- "@mui/system": ^5.4.1
+ "@mui/base": ^5.0.0-alpha.87
+ "@mui/material": ^5.8.6
+ "@mui/system": ^5.8.0
date-fns: ^2.25.0
+ date-fns-jalali: ^2.13.0-0
dayjs: ^1.10.7
- luxon: ^1.28.0 || ^2.0.0 || ^3.0.0
- moment: ^2.29.1
- react: ^17.0.2 || ^18.0.0
- react-dom: ^17.0.2 || ^18.0.0
+ luxon: ^3.0.2
+ moment: ^2.29.4
+ moment-hijri: ^2.1.2
+ moment-jalaali: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@emotion/react":
optional: true
@@ -2654,13 +2610,19 @@ __metadata:
optional: true
date-fns:
optional: true
+ date-fns-jalali:
+ optional: true
dayjs:
optional: true
luxon:
optional: true
moment:
optional: true
- checksum: 11c7414b59bdc34ac5708ccb0fd799a928915b792f2b9342994e74a61d5c718803aea32a92c3de2aed7ee7383b6fc5ba01689559a6b93946a10ecb7e7b9f4a18
+ moment-hijri:
+ optional: true
+ moment-jalaali:
+ optional: true
+ checksum: 389932d3e990d596a24d593086a02960a1111217745587ef9ac35a2e419bfbc3b7c112d50df591ff80ee864731acecb6cfe2945274796c52856f87275d1b4b10
languageName: node
linkType: hard
@@ -3029,7 +2991,7 @@ __metadata:
languageName: node
linkType: hard
-"@testing-library/cypress@npm:^8.0.7":
+"@testing-library/cypress@npm:8.0.7":
version: 8.0.7
resolution: "@testing-library/cypress@npm:8.0.7"
dependencies:
@@ -3504,7 +3466,7 @@ __metadata:
languageName: node
linkType: hard
-"@types/lodash.isequal@npm:^4.5.6":
+"@types/lodash.isequal@npm:4.5.6":
version: 4.5.6
resolution: "@types/lodash.isequal@npm:4.5.6"
dependencies:
@@ -3610,12 +3572,12 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-is@npm:^16.7.1 || ^17.0.0":
- version: 17.0.3
- resolution: "@types/react-is@npm:17.0.3"
+"@types/react-is@npm:^18.2.1":
+ version: 18.2.1
+ resolution: "@types/react-is@npm:18.2.1"
dependencies:
"@types/react": "*"
- checksum: 6abb7c47d54f012272650df8a962a28bd82f219291e5ef8b4dfa7fe0bb98ae243b060bf9fbe8ceff6213141794855a006db194b490b00ffd15842ae19d0ce1f0
+ checksum: b44c3262efa2c68fa6fe2beb9ef86170b18305469461a3f97aa14943cc033cb21a26944f718bdb6434eea6e8f7fcba251c4f45b65b897a3fcf751b5a6003cf82
languageName: node
linkType: hard
@@ -3652,12 +3614,12 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-transition-group@npm:^4.4.5":
- version: 4.4.5
- resolution: "@types/react-transition-group@npm:4.4.5"
+"@types/react-transition-group@npm:^4.4.5, @types/react-transition-group@npm:^4.4.6":
+ version: 4.4.6
+ resolution: "@types/react-transition-group@npm:4.4.6"
dependencies:
"@types/react": "*"
- checksum: 265f1c74061556708ffe8d15559e35c60d6c11478c9950d3735575d2c116ca69f461d85effa06d73a613eb8b73c84fd32682feb57cf7c5f9e4284021dbca25b0
+ checksum: 0872143821d7ee20a1d81e965f8b1e837837f11cd2206973f1f98655751992d9390304d58bac192c9cd923eca95bff107d8c9e3364a180240d5c2a6fd70fd7c3
languageName: node
linkType: hard
@@ -5704,6 +5666,13 @@ __metadata:
languageName: node
linkType: hard
+"clsx@npm:^2.0.0":
+ version: 2.0.0
+ resolution: "clsx@npm:2.0.0"
+ checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e
+ languageName: node
+ linkType: hard
+
"co@npm:^4.6.0":
version: 4.6.0
resolution: "co@npm:4.6.0"
@@ -6499,7 +6468,7 @@ __metadata:
"@emotion/styled": 11.11.0
"@mui/icons-material": 5.11.0
"@mui/material": 5.11.0
- "@mui/x-date-pickers": 5.0.9
+ "@mui/x-date-pickers": 6.11.2
"@testing-library/jest-dom": 5.16.4
"@testing-library/react": 12.1.3
"@testing-library/react-hooks": 8.0.1
@@ -6704,8 +6673,8 @@ __metadata:
"@emotion/styled": 11.11.0
"@mui/icons-material": 5.11.0
"@mui/material": 5.11.0
- "@mui/x-date-pickers": 5.0.9
- "@testing-library/cypress": ^8.0.7
+ "@mui/x-date-pickers": 6.11.2
+ "@testing-library/cypress": 8.0.7
"@testing-library/jest-dom": 5.16.5
"@testing-library/react": 12.1.3
"@testing-library/react-hooks": 8.0.1
@@ -6714,7 +6683,7 @@ __metadata:
"@types/history": 4.7.11
"@types/jest": 29.5.2
"@types/jsrsasign": 10.5.2
- "@types/lodash.isequal": ^4.5.6
+ "@types/lodash.isequal": 4.5.6
"@types/node": 18.16.18
"@types/react": 17.0.39
"@types/react-dom": 17.0.11
@@ -14149,6 +14118,13 @@ __metadata:
languageName: node
linkType: hard
+"regenerator-runtime@npm:^0.14.0":
+ version: 0.14.0
+ resolution: "regenerator-runtime@npm:0.14.0"
+ checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3
+ languageName: node
+ linkType: hard
+
"regenerator-transform@npm:^0.15.1":
version: 0.15.1
resolution: "regenerator-transform@npm:0.15.1"
@@ -14446,15 +14422,6 @@ __metadata:
languageName: node
linkType: hard
-"rifm@npm:^0.12.1":
- version: 0.12.1
- resolution: "rifm@npm:0.12.1"
- peerDependencies:
- react: ">=16.8"
- checksum: 7f11621b6a14885bdee0b49c21174627272a5f683f74aaf8444570dae319f86de38d2af55c17e08af1ebb837bf956894971cceadeaca890e4c9cd1d46f02a385
- languageName: node
- linkType: hard
-
"rimraf@npm:3.0.2, rimraf@npm:^3.0.0, rimraf@npm:^3.0.2":
version: 3.0.2
resolution: "rimraf@npm:3.0.2"