DateTimePicker from DS used in Strapi

[simotae14]

What does it do?
We want to integrate the new DateTimePicker inside the design system into the Strapi project.

Decision
I think there is no reason to maintain the DateTimePicker inside the helper-plugin because it is a Design Component that can be used in other places.

Consequences
I think we can have a more clear and correct division between components into the different repos. We need also to take care about the possible errors with the old versions of the Design System and strapi

Display a warning to the user that inside the old DateTimePicker that this component is still under definition/development and that it is not recommended to use it because the code and the API will change soon.

How to test it?
We need to test if we make some regressions in the code, in every section where we can use the DateTimePicker, how it works with content from another locale

Why is it needed?
We need to move the logic from the helper-plugin to the Design System project

[codecov]

Codecov Report

Base: 50.37% // Head: 60.34% // Increases project coverage by +9.96% 🎉

Coverage data is based on head (7810ae7) compared to base (ba020d0).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #14830      +/-   ##
==========================================
+ Coverage   50.37%   60.34%   +9.96%     
==========================================
  Files         291     1367    +1076     
  Lines       10288    33268   +22980     
  Branches     2279     6353    +4074     
==========================================
+ Hits         5183    20076   +14893     
- Misses       4219    11347    +7128     
- Partials      886     1845     +959     

Flag	Coverage Δ
back	50.37% <ø> (ø)
front	64.80% <100.00%> (?)
unit_back	50.37% <ø> (ø)
unit_front	64.80% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...n/src/components/FilterPopover/FilterValueInput.js	45.00% <100.00%> (ø)
...admin/src/components/EmptyAssets/EmptyAssetGrid.js	100.00% <0.00%> (ø)
...ontent-manager/components/AttributeFilter/index.js	50.00% <0.00%> (ø)
packages/plugins/color-picker/admin/src/index.js	0.00% <0.00%> (ø)
...e/admin/admin/src/hooks/useSettingsMenu/reducer.js	94.44% <0.00%> (ø)
...ges/core/upload/admin/src/utils/getAllowedFiles.js	100.00% <0.00%> (ø)
.../RepeatableComponent/AccordionGroupCustom/index.js	31.57% <0.00%> (ø)
...onents/AttributeOptions/CustomFieldOption/index.js	94.44% <0.00%> (ø)
...mponents/AttributeOptions/AttributeOption/index.js	90.00% <0.00%> (ø)
...c/content-manager/components/SectionTitle/index.js	0.00% <0.00%> (ø)
... and 1067 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[gu-stav]

Just to make sure because I don't remember: is the API of both components (helper-plugin and design-system) identical for every prop?

[simotae14]

these are the props in the legacy version of the DateTimePicker in the helper plugin (

strapi/packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js

Line 196 in 45831f3

DateTimePicker.propTypes = {

)

DateTimePicker.propTypes = {
  ariaLabel: PropTypes.string,
  clearLabel: PropTypes.string,
  disabled: PropTypes.bool,
  error: PropTypes.string,
  hint: PropTypes.string,
  label: PropTypes.string,
  labelAction: PropTypes.element,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onClear: PropTypes.func,
  required: PropTypes.bool,
  size: PropTypes.oneOf(['S', 'M']),
  step: PropTypes.number,
  value: PropTypes.instanceOf(Date),
};

and these are the props in the new version of the DateTimePicker inside the DS repo (https://github.com/strapi/design-system/blob/b30d2bdee9b8be2eae723e940c2b97762b0fc7b5/packages/strapi-design-system/src/DateTimePicker/DateTimePickerProps.js#L21)

export const dateTimePickerPropTypes = {
  ariaLabel: PropTypes.string,
  clearLabel: PropTypes.string,
  disabled: PropTypes.bool,
  error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  hint: PropTypes.string,
  label: PropTypes.string,
  labelAction: PropTypes.element,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onClear: PropTypes.func,
  required: PropTypes.bool,
  selectButtonTitle: PropTypes.string,
  size: PropTypes.oneOf(['S', 'M']),
  step: PropTypes.number,
  value: PropTypes.instanceOf(Date),
};

the only two things different are, the error pty that can be also a boolean inside the new DateTimePicker (just to prevent to show the singular errors of the DatePicker and the TimePicker), and the selectButtonTitle needed to solve an a11y problem and already set default to selectButtonTitle: 'select',

[gu-stav]

Makes sense, thanks. Can you please assign the selectButtonTitle prop using formatMessage? This allows users to overwrite value for different admin locales ...

[simotae14]

thanks @gu-stav for the suggestion, I have added the property to all the instances of the DateTimePicker

[joshuaellis]

from my POV this is fine, I can see there's comments from Gustav remaining though :)

[gu-stav]

Thank you 🌻 Just to make sure: I think we should not merge this before today's release and do it afterwards, to give it ~2 weeks on the main branch to be tested. Do you agree?

[simotae14]

Yes no problem for me @gu-stav I think it is better to wait 2 weeks because it is basically just a refactoring

[gu-stav]

@simotae14 Could you please fix the merge conflicts and merge this PR? 🙏🏼

[simotae14]

yes sure