Skip to content

Commit

Permalink
fix: date time picker & table card toolbar locale (#3905)
Browse files Browse the repository at this point in the history
  • Loading branch information
@simson1
simson1 authored Dec 14, 2024
1 parent 92bdb91 commit 444485f
Show file tree
Hide file tree
Showing 11 changed files with 45 additions and 46 deletions.
Binary file modified ...ine/components/Dashboard/DashboardGrid.test.e2ex-DashboardGrid-lg-TableCard.png
100644 → 100755
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nshots/baseline/components/TableCard/TableCard.test.e2ex-TableCard_Expanded.png
100644 → 100755
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"test:e2e:update": "cypress-image-diff -u",
"test:e2e": "cross-env BABEL_ENV='e2e' NODE_ENV='e2e' cypress run-ct --browser=chrome --headed --config video=false,screenshotOnRunFailure=false",
"test:e2e:interactive": "cross-env BABEL_ENV='e2e' NODE_ENV='e2e' cypress open-ct --browser=chrome --config video=false,screenshotOnRunFailure=false",
"test:e2e:ci": "cross-env HEIGHT=1680 WIDTH=1680 BABEL_ENV='e2e' NODE_ENV='e2e' cypress run-ct --browser=chrome --config watchForFileChanges=false --record false video=false,screenshotOnRunFailure=false",
"test:e2e:ci": "cross-env HEIGHT=1680 WIDTH=1680 BABEL_ENV='e2e' NODE_ENV='e2e' cypress run-ct --browser=chrome --config watchForFileChanges=false --record false video=false,screenshotOnRunFailure=false",
"test:e2e:images": "cd ../.. && docker-compose run --no-deps --rm react-visual-regression-tests bash -c 'cd /@ai-apps/packages/react && pwd && yarn cypress install && yarn test:e2e:ci --record=false --config video=false,screenshotOnRunFailure=false'",
"test:e2e:docker:build": "cd ../.. && docker-compose up --build",
"test:e2e:docker:clean": "docker system prune",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DateTimePicker/DateTimePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -954,7 +954,7 @@ const DateTimePicker = ({
value={
absoluteValue ? [absoluteValue.startDate, absoluteValue.endDate] : ''
}
locale={locale.split('-')[0]}
locale={locale?.split('-')[0]}
>
<DatePickerInput
labelText=""
Expand Down
14 changes: 7 additions & 7 deletions packages/react/src/components/DateTimePicker/DateTimePicker.test.e2e.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ describe('DateTimePicker', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible').click();

cy.findByText('Custom range').should('be.visible');
cy.findByText('August').should('be.visible');
Expand Down Expand Up @@ -76,7 +76,7 @@ describe('DateTimePicker', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible').click();

cy.findByLabelText(i18n.startTimeLabel).type(
'{backspace}{backspace}{backspace}{backspace}{backspace}91:35'
Expand Down Expand Up @@ -208,10 +208,10 @@ describe('DateTimePicker', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible');
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible');
cy.get('body').realPress('Tab');
cy.findByRole('dialog').should('be.visible');
cy.findByRole('button', { name: /2021-08-01 12:34 to 2021-08-06 10:49/ })
cy.findByRole('button', { name: /08\/01\/2021 12:34 to 08\/06\/2021 10:49/ })
.should('be.focused')
.type('{enter}');
cy.findByText('Custom range').should('be.visible');
Expand Down Expand Up @@ -472,11 +472,11 @@ describe('DateTimePicker', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').click();
cy.findByText('Relative').should('be.visible').click();
cy.get('body').click();

cy.findByRole('button').contains('2021-08-01 12:34 to 2021-08-06 10:49');
cy.findByRole('button').contains('08/01/2021 12:34 to 08/06/2021 10:49');
expect(onApply).to.be.callCount(0);
expect(onCancel).to.be.callCount(0);
});
Expand Down Expand Up @@ -588,7 +588,7 @@ describe('DateTimePicker', () => {
// Preserves only saved changes
cy.findByTestId('date-time-picker__field').should(
'have.text',
'2021-08-01 11:11 to 2021-08-06 10:49'
'08/01/2021 11:11 to 08/06/2021 10:49'
);
});
});
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/DateTimePicker/DateTimePickerV2.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@ const DateTimePicker = ({
style,
...others
}) => {
// make sure locale is 2 letters
const newLocale = locale?.length === 2 ? locale : locale.slice(0, 2);
return useNewTimeSpinner ? (
<DateTimePickerNew
testId={testId}
Expand All @@ -58,7 +56,7 @@ const DateTimePicker = ({
onClear={onClear}
i18n={i18n}
light={light}
locale={newLocale}
locale={locale}
id={id}
hasIconOnly={hasIconOnly}
menuOffset={menuOffset}
Expand Down Expand Up @@ -87,7 +85,7 @@ const DateTimePicker = ({
onApply={onApply}
i18n={i18n}
light={light}
locale={newLocale}
locale={locale}
id={id}
hasIconOnly={hasIconOnly}
menuOffset={menuOffset}
Expand Down
58 changes: 29 additions & 29 deletions packages/react/src/components/DateTimePicker/DateTimePickerV2.test.e2e.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible').click();

cy.findByText('Custom range').should('be.visible');
cy.findByText('August').should('be.visible');
Expand All @@ -286,8 +286,8 @@ describe('DateTimePickerV2', () => {
start: Cypress.sinon.match.any,
startDate: '08/06/2021',
startTime: '13:34',
humanValue: '2021-08-06 13:34 to 2021-08-08 12:34',
tooltipValue: '2021-08-06 13:34 to 2021-08-08 12:34',
humanValue: '08/06/2021 13:34 to 08/08/2021 12:34',
tooltipValue: '08/06/2021 13:34 to 08/08/2021 12:34',
},
});
});
Expand All @@ -312,7 +312,7 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible').click();

cy.findByText('Custom range').should('be.visible');
cy.findByText('August').should('be.visible');
Expand All @@ -336,8 +336,8 @@ describe('DateTimePickerV2', () => {
start: Cypress.sinon.match.any,
startDate: '08/08/2021',
startTime: '12:34',
humanValue: '2021-08-08 12:34 to 2021-08-08 12:35',
tooltipValue: '2021-08-08 12:34 to 2021-08-08 12:35',
humanValue: '08/08/2021 12:34 to 08/08/2021 12:35',
tooltipValue: '08/08/2021 12:34 to 08/08/2021 12:35',
},
});
});
Expand Down Expand Up @@ -508,7 +508,7 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible').click();
cy.findByLabelText(i18n.startTimeLabel).type(
'{backspace}{backspace}{backspace}{backspace}{backspace}91:35'
);
Expand Down Expand Up @@ -763,10 +763,10 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible');
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible');
cy.get('body').realPress('Tab');
cy.findByRole('dialog').should('be.visible');
cy.findByRole('button', { name: /2021-08-01 12:34 to 2021-08-06 10:49/ })
cy.findByRole('button', { name: /08\/01\/2021 12:34 to 08\/06\/2021 10:49/ })
.should('be.focused')
.type('{enter}');
cy.findByText('Custom range').should('be.visible');
Expand Down Expand Up @@ -815,11 +815,11 @@ describe('DateTimePickerV2', () => {
end: Cypress.sinon.match.any,
endDate: '08/13/2021',
endTime: '12:39',
humanValue: '2021-08-06 11:35 to 2021-08-13 12:39',
humanValue: '08/06/2021 11:35 to 08/13/2021 12:39',
start: Cypress.sinon.match.any,
startDate: '08/06/2021',
startTime: '11:35',
tooltipValue: '2021-08-06 11:35 to 2021-08-13 12:39',
tooltipValue: '08/06/2021 11:35 to 08/13/2021 12:39',
},
});
});
Expand All @@ -846,10 +846,10 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').should('be.visible').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').should('be.visible').click();
cy.focused().type('{enter}');
cy.findByRole('dialog').should('be.visible');
cy.findByRole('button', { name: /2021-08-01 12:34 to 2021-08-06 10:49/ })
cy.findByRole('button', { name: /08\/01\/2021 12:34 to 08\/06\/2021 10:49/ })
.should('be.focused')
.type('{enter}');
cy.findByText('Custom range').should('be.visible');
Expand Down Expand Up @@ -897,11 +897,11 @@ describe('DateTimePickerV2', () => {
end: Cypress.sinon.match.any,
endDate: '08/13/2021',
endTime: '12:49',
humanValue: '2021-08-06 02:34 to 2021-08-13 12:49',
humanValue: '08/06/2021 02:34 to 08/13/2021 12:49',
start: Cypress.sinon.match.any,
startDate: '08/06/2021',
startTime: '02:34',
tooltipValue: '2021-08-06 02:34 to 2021-08-13 12:49',
tooltipValue: '08/06/2021 02:34 to 08/13/2021 12:49',
},
timeSingleValue: null,
});
Expand Down Expand Up @@ -964,7 +964,7 @@ describe('DateTimePickerV2', () => {
id: 'item-03',
label: 'Last 6 hours',
offset: 360,
tooltipValue: `${lastSixHours.format('YYYY-MM-DD HH:mm')} to Now`,
tooltipValue: `${lastSixHours.format('L HH:mm')} to Now`,
},
});
});
Expand Down Expand Up @@ -1065,8 +1065,8 @@ describe('DateTimePickerV2', () => {
start: Cypress.sinon.match.any,
startDate: lastMonth.format(`MM/[20]/YYYY`),
startTime: null,
humanValue: `${lastMonth.format('YYYY-MM-[20]')} to ${now.format('YYYY-MM-[12]')}`,
tooltipValue: `${lastMonth.format('YYYY-MM-[20]')} to ${now.format('YYYY-MM-[12]')}`,
humanValue: `${lastMonth.format(`MM/[20]/YYYY`)} to ${now.format(`MM/[12]/YYYY`)}`,
tooltipValue: `${lastMonth.format(`MM/[20]/YYYY`)} to ${now.format(`MM/[12]/YYYY`)}`,
},
});
});
Expand Down Expand Up @@ -1114,8 +1114,8 @@ describe('DateTimePickerV2', () => {
start: Cypress.sinon.match.any,
startDate: lastMonth.format(`MM/[20]/YYYY`),
startTime: null,
humanValue: `${lastMonth.format('YYYY-MM-[20]')} to ${now.format('YYYY-MM-[12]')}`,
tooltipValue: `${lastMonth.format('YYYY-MM-[20]')} to ${now.format('YYYY-MM-[12]')}`,
humanValue: `${lastMonth.format(`MM/[20]/YYYY`)} to ${now.format(`MM/[12]/YYYY`)}`,
tooltipValue: `${lastMonth.format(`MM/[20]/YYYY`)} to ${now.format(`MM/[12]/YYYY`)}`,
},
timeSingleValue: null,
});
Expand Down Expand Up @@ -1231,11 +1231,11 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').click();
cy.findByText('Relative').should('be.visible').click();
cy.get('body').click();

cy.findAllByRole('button').eq(0).contains('2021-08-01 12:34 to 2021-08-06 10:49');
cy.findAllByRole('button').eq(0).contains('08/01/2021 12:34 to 08/06/2021 10:49');
expect(onApply).to.be.callCount(0);
expect(onCancel).to.be.callCount(0);
});
Expand All @@ -1260,11 +1260,11 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2021-08-01 12:34 to 2021-08-06 10:49').click();
cy.findByText('08/01/2021 12:34 to 08/06/2021 10:49').click();
cy.findByText('Relative').should('be.visible').click();
cy.get('body').click();

cy.findAllByRole('button').eq(0).contains('2021-08-01 12:34 to 2021-08-06 10:49');
cy.findAllByRole('button').eq(0).contains('08/01/2021 12:34 to 08/06/2021 10:49');
expect(onApply).to.be.callCount(0);
expect(onCancel).to.be.callCount(0);
});
Expand All @@ -1289,11 +1289,11 @@ describe('DateTimePickerV2', () => {
/>
);

cy.findByText('2020-04-01 12:34').click();
cy.findByText('04/01/2020 12:34').click();
cy.findByText('Relative').should('be.visible').click();
cy.get('body').click();

cy.findAllByRole('button').eq(0).contains('2020-04-01 12:34');
cy.findAllByRole('button').eq(0).contains('04/01/2020 12:34');
expect(onApply).to.be.callCount(0);
expect(onCancel).to.be.callCount(0);
});
Expand Down Expand Up @@ -1405,7 +1405,7 @@ describe('DateTimePickerV2', () => {
// Preserves only saved changes
cy.findByTestId('date-time-picker__field').should(
'have.text',
'2021-08-01 11:11 to 2021-08-06 10:49'
'08/01/2021 11:11 to 08/06/2021 10:49'
);
});

Expand Down Expand Up @@ -1438,7 +1438,7 @@ describe('DateTimePickerV2', () => {
cy.findByLabelText('Start time').focus().clear();
cy.get('body').click();
// Preserves only saved changes
cy.findByTestId('date-time-picker__field').should('have.text', '2020-04-01 11:11');
cy.findByTestId('date-time-picker__field').should('have.text', '04/01/2020 11:11');
});

it('with default absolute value (new time spinner)', () => {
Expand Down Expand Up @@ -1473,7 +1473,7 @@ describe('DateTimePickerV2', () => {
// Preserves only saved changes
cy.findByTestId('date-time-picker__field').should(
'have.text',
'2021-08-01 12:35 to 2021-08-06 10:49'
'08/01/2021 12:35 to 08/06/2021 10:49'
);
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1318,7 +1318,7 @@ const DateTimePicker = ({
? [singleDateValue?.startDate]
: null
}
locale={locale}
locale={locale?.split('-')[0]}
>
<DatePickerInput
labelText=""
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1053,7 +1053,7 @@ const DateTimePicker = ({
value={
absoluteValue ? [absoluteValue.startDate, absoluteValue.endDate] : ''
}
locale={locale}
locale={locale?.split('-')[0]}
>
<DatePickerInput
labelText=""
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/DateTimePicker/__snapshots__/DateTimePicker.story.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
id="definition-tooltip-2"
role="tooltip"
>
10/28/2018 07:04 to Now
2018-10-28 07:04 to Now
</span>
</span>
<svg
Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
<li
className="bx--list__item iot--date-time-picker__listitem iot--date-time-picker__listitem--current"
>
10/28/2018 07:04 to Now
2018-10-28 07:04 to Now
</li>
<li
className="bx--list__item iot--date-time-picker__listitem iot--date-time-picker__listitem--custom"
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/TableCard/TableCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -556,6 +556,7 @@ const TableCard = ({
timeRange={timeRange}
timeRangeOptions={timeRangeOptions}
renderDateDropdownInPortal={renderDateDropdownInPortal}
locale={locale}
/>
);

Expand Down

0 comments on commit 444485f

Please sign in to comment.