Skip to content
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.

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

Update dependency @mui/x-date-pickers to v6 #213

Merged
merged 27 commits into from
Nov 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
17de85b
Update dependency @mui/x-date-pickers to v6
renovate[bot] Aug 14, 2023
5ea31f8
Install @mui/core & apply v6 migration
kennethnym Aug 18, 2023
4b47864
Forgot to commit modified yarn lock files
kennethnym Aug 24, 2023
3636900
Revert @mui/base install
kennethnym Aug 24, 2023
6114409
Install @mui/base again
kennethnym Aug 24, 2023
e1f879d
Migrate usages of DateTimePicker to v6
kennethnym Aug 24, 2023
bcdd2e6
extract custom text field component from slots
kaperoo Oct 27, 2023
bbd9568
Fix bug in @mui/x-date-pickers via `yarn patch`
louise-davies Oct 27, 2023
931c545
fix some unit tests for date pickers
kaperoo Oct 30, 2023
ef6c107
Merge branch 'develop' into renovate/mui-x-date-pickers-6.x
kaperoo Oct 30, 2023
c993fe2
Merge branch 'renovate/mui-x-date-pickers-6.x' of https://github.com/…
kaperoo Oct 30, 2023
e2e2d51
fix merge error
kaperoo Oct 30, 2023
7586520
fix unit tests for searchBar component
kaperoo Oct 30, 2023
c29404c
fixed e2e search tests
kaperoo Oct 31, 2023
28463a5
updated snapshots for plotting playwright tests
kaperoo Nov 1, 2023
fda5f36
Revert "updated snapshots for plotting playwright tests"
kaperoo Nov 1, 2023
c50a375
playwright fix and code clean-up
kaperoo Nov 1, 2023
e24ebbb
Refactor date-picker tests
kaperoo Nov 6, 2023
78157c2
added missing custom day to dayTime component
kaperoo Nov 6, 2023
b4411e8
Close picker when clicked away + unify action bar buttons
kaperoo Nov 6, 2023
bb45fdb
Merge branch 'develop' into renovate/mui-x-date-pickers-6.x
kaperoo Nov 6, 2023
d144ca5
Merge branch 'develop' into renovate/mui-x-date-pickers-6.x
louise-davies Nov 15, 2023
e66adbb
Add 'today' button to to-date pickers
kaperoo Nov 21, 2023
0fe7d8f
Update @mui/x-date-pickers & patch to latest version
louise-davies Nov 21, 2023
2d627e8
update unit tests + snapshots
kaperoo Nov 21, 2023
43a4ca6
fix cypress tests
kaperoo Nov 21, 2023
d94af0b
remove commented out code
kaperoo Nov 21, 2023
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
425 changes: 294 additions & 131 deletions .pnp.cjs

Large diffs are not rendered by default.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
31 changes: 31 additions & 0 deletions .yarn/patches/@mui-x-date-pickers-npm-6.18.1-79bdefe4ec.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
diff --git a/internals/hooks/useField/useField.js b/internals/hooks/useField/useField.js
index 10a6c2874e2acdf072cd05de26711d704332ada1..30499fd39c69812775a48d8aa3d4ba6812eeb9c3 100644
--- a/internals/hooks/useField/useField.js
+++ b/internals/hooks/useField/useField.js
@@ -333,7 +333,7 @@ export const useField = params => {
// On multi input range pickers we want to update selection range only for the active input
// This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
// because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
- if (inputRef.current === getActiveElement(document)) {
+ if (inputRef.current === getActiveElement(inputRef.current.ownerDocument)) {
inputRef.current.setSelectionRange(selectionStart, selectionEnd);
}
// Even reading this variable seems to do the trick, but also setting it just to make use of it
@@ -360,7 +360,7 @@ export const useField = params => {

React.useEffect(() => {
// Select the right section when focused on mount (`autoFocus = true` on the input)
- if (inputRef.current && inputRef.current === document.activeElement) {
+ if (inputRef.current && inputRef.current === inputRef.current.ownerDocument.activeElement) {
setSelectedSections('all');
}
return () => window.clearTimeout(focusTimeoutRef.current);
@@ -390,7 +390,7 @@ export const useField = params => {
}
return 'numeric';
}, [selectedSectionIndexes, state.sections]);
- const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
+ const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(inputRef.current.ownerDocument);
const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
React.useImperativeHandle(unstableFieldRef, () => ({
75 changes: 24 additions & 51 deletions cypress/e2e/search.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,7 @@ describe('Search', () => {
});
}).as('getSettings');

cy.visit('/', {
// need these to ensure Date picker media queries pass
// ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
onBeforeLoad: (win) => {
cy.stub(win, 'matchMedia')
.withArgs('(pointer: fine)')
.returns({
matches: true,
addListener: () => {
// no-op
},
removeListener: () => {
// no-op
},
});
},
}).wait(['@getSettings']);
cy.visit('/').wait(['@getSettings']);

cy.findByRole('progressbar').should('be.visible');
cy.findByRole('progressbar').should('not.exist');
Expand Down Expand Up @@ -657,8 +641,8 @@ describe('Search', () => {

// From Date is above the To Date

cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
cy.findByLabelText('to, date-time input').type('2021-01-01 00:00');
cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
cy.findByLabelText('to, date-time input').type('2021-01-01_00:00');

cy.findByLabelText('date-time search box').should(
'have.css',
Expand All @@ -675,7 +659,7 @@ describe('Search', () => {
cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('to, date-time input').clear();

cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');

cy.findByLabelText('date-time search box').should(
'have.css',
Expand All @@ -689,10 +673,11 @@ describe('Search', () => {

// Only the To date is defined

cy.findByLabelText('from, date-time input').clear();
// cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
cy.findByLabelText('to, date-time input').clear();

cy.findByLabelText('to, date-time input').type('2022-01-01 00:00');
cy.findByLabelText('to, date-time input').type('2022-01-01_00:00');

cy.findByLabelText('date-time search box').should(
'have.css',
Expand Down Expand Up @@ -866,8 +851,8 @@ describe('Search', () => {
});

it('changes to and from dateTimes to use 0 seconds and 59 seconds respectively', () => {
cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
cy.findByLabelText('to, date-time input').type('2022-01-02 00:00');
cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
cy.findByLabelText('to, date-time input').type('2022-01-02_00:00');

const expectedToDate = new Date('2022-01-02 00:00:59');
const expectedFromDate = new Date('2022-01-01 00:00:00');
Expand Down Expand Up @@ -939,15 +924,13 @@ describe('Search', () => {
cy.findByLabelText('from, date-time picker').click();
cy.findByRole('dialog').contains(13).click();
cy.findByLabelText('from, date-time picker').click();

cy.findByLabelText('open experiment search box')
.contains('ID 22110007')
.should('exist');

cy.findByLabelText('to, date-time picker').click();
cy.findByRole('dialog').contains(14).click();
cy.findByLabelText('to, date-time picker').click();

cy.findByLabelText('open experiment search box')
.contains('ID 22110007')
.should('exist');
Expand Down Expand Up @@ -1123,28 +1106,12 @@ describe('Search', () => {
});
}).as('getSettings');

cy.visit('/', {
// need these to ensure Date picker media queries pass
// ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
onBeforeLoad: (win) => {
cy.stub(win, 'matchMedia')
.withArgs('(pointer: fine)')
.returns({
matches: true,
addListener: () => {
// no-op
},
removeListener: () => {
// no-op
},
});
},
}).wait(['@getSettings']);
cy.visit('/').wait(['@getSettings']);
});

it('displays appropriate tooltips', () => {
cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
cy.findByLabelText('to, date-time input').type('2023-01-01 00:00');
cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
cy.findByLabelText('to, date-time input').type('2023-01-01_00:00');

cy.startSnoopingBrowserMockedRequest();

Expand Down Expand Up @@ -1215,8 +1182,10 @@ describe('Search', () => {
);
});

cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('from, date-time input').type('2022-01-11 00:00');
// .clear doesn't work with datepickers in v6
// cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
cy.findByLabelText('from, date-time input').type('2022-01-11_00:00');

cy.contains('Search').click();
// eslint-disable-next-line cypress/no-unnecessary-waiting
Expand All @@ -1227,8 +1196,10 @@ describe('Search', () => {

cy.clearMocks();

cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('from, date-time input').type('2022-01-02 00:00');
// .clear doesn't work with datepickers in v6
// cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
cy.findByLabelText('from, date-time input').type('2022-01-02_00:00');

cy.contains('Search').click();
// eslint-disable-next-line cypress/no-unnecessary-waiting
Expand Down Expand Up @@ -1281,8 +1252,10 @@ describe('Search', () => {
expect(gte).equal('2022-01-02T00:00:00');
});

cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
// .clear doesn't work with datepickers in v6
// cy.findByLabelText('from, date-time input').clear();
cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');

cy.contains('Search').click();
// eslint-disable-next-line cypress/no-unnecessary-waiting
Expand Down
18 changes: 1 addition & 17 deletions cypress/e2e/table.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,7 @@ const verifyColumnOrder = (columns: string[]): void => {

describe('Table Component', () => {
beforeEach(() => {
cy.visit('/', {
// need these to ensure Date picker media queries pass
// ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
onBeforeLoad: (win) => {
cy.stub(win, 'matchMedia')
.withArgs('(pointer: fine)')
.returns({
matches: true,
addListener: () => {
// no-op
},
removeListener: () => {
// no-op
},
});
},
});
cy.visit('/');
});

it('adds columns in the order they are selected', () => {
Expand Down
19 changes: 13 additions & 6 deletions e2e/plotting.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -279,12 +279,19 @@ test('user can add from and to dates to timestamp on x-axis', async ({

await popup.locator('[aria-label="line chart"]').click();

await popup
.locator('[aria-label="from, date-time input"]')
.fill('2022-01-03 00:00:00');
await popup
.locator('[aria-label="to, date-time input"]')
.fill('2022-01-10 00:00:00');
// .fill doesn't work with date-pickers v6
// await popup
// .locator('[aria-label="from, date-time input"]')
// .fill('2022-01-03 00:00');
await popup.locator('[aria-label="to, date-time input"]').click();
await popup.keyboard.type('202201100000');

// .fill doesn't work with date-pickers v6
// await popup
// .locator('[aria-label="to, date-time input"]')
// .fill('2022-01-10 00:00');
await popup.locator('[aria-label="from, date-time input"]').click();
await popup.keyboard.type('202201030000');

await popup.locator('label:has-text("Search all channels")').fill('Shot Num');

Expand Down
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@
"@emotion/cache": "11.11.0",
"@emotion/react": "11.11.1",
"@emotion/styled": "11.11.0",
"@mui/base": "5.0.0-beta.12",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this added? Maybe we can remove it? Unless it was needed for the patch...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was added in this commit: 6114409. It seems to be needed for the patch, as the code won't compile without it.

"@mui/icons-material": "5.14.16",
"@mui/material": "5.14.16",
"@mui/system": "5.14.16",
"@mui/x-date-pickers": "5.0.7",
"@mui/x-date-pickers": "6.18.1",
"@reduxjs/toolkit": "1.9.0",
"@tanstack/react-query": "4.29.5",
"@tanstack/react-query-devtools": "4.29.6",
Expand Down Expand Up @@ -47,7 +48,8 @@
"resolutions": {
"@typescript-eslint/eslint-plugin": "6.2.1",
"@typescript-eslint/parser": "6.2.1",
"@testing-library/react/@testing-library/dom": "9.3.1"
"@testing-library/react/@testing-library/dom": "9.3.1",
"@mui/[email protected]": "patch:@mui/x-date-pickers@npm%3A6.18.1#./.yarn/patches/@mui-x-date-pickers-npm-6.18.1-79bdefe4ec.patch"
},
"scripts": {
"lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -348,19 +348,20 @@ exports[`x-axis tab renders correctly with timestamp x axis 1`] = `
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
>
<div
class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-z3c6am-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-v4u5dn-MuiInputBase-root-MuiInput-root"
>
<input
aria-invalid="false"
aria-label="from, date-time input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1x51dt5-MuiInputBase-input-MuiInput-input"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1pd62rs-MuiInputBase-input-MuiInput-input"
id="from date-time"
inputmode="text"
placeholder="From..."
style="font-size: 10px;"
type="tel"
type="text"
value=""
/>
<div
Expand Down Expand Up @@ -395,19 +396,20 @@ exports[`x-axis tab renders correctly with timestamp x axis 1`] = `
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
>
<div
class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-z3c6am-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-v4u5dn-MuiInputBase-root-MuiInput-root"
>
<input
aria-invalid="false"
aria-label="to, date-time input"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1x51dt5-MuiInputBase-input-MuiInput-input"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1pd62rs-MuiInputBase-input-MuiInput-input"
id="to date-time"
inputmode="text"
placeholder="To..."
style="font-size: 10px;"
type="tel"
type="text"
value=""
/>
<div
Expand Down
Loading
Loading