feat: [M3-8936] - Add Date Presets Functionality to Date Picker component. #11395
Conversation
This reverts commit b274baf.
|
Warning are coming up in console while changing drop down values |
packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx
Outdated
Show resolved
Hide resolved
| import { Box } from '@linode/ui'; | ||
| import { TextField } from '@linode/ui'; | ||
| import CalendarTodayIcon from '@mui/icons-material/CalendarToday'; |
There was a problem hiding this comment.
Currently, the MUI calendar icon is being used, but it will be replaced with the SVG provided by the UX.
| sx={{ | ||
| color: '#c2c2ca !important', | ||
| fontSize: '20px !important', | ||
| left: '8px', | ||
| position: 'absolute', |
There was a problem hiding this comment.
I think this will be removed when replacing MUI calendar icon with give SVG.
|
|
||
| beforeEach(() => { | ||
| // Mock DateTime.now to return a fixed datetime |
There was a problem hiding this comment.
Mocked the time instance for reliable tests.
| <Box alignContent="flex-end"> | ||
| <StyledActionButton | ||
| onClick={() => { | ||
| setShowPresets(true); | ||
| setPresetValue(presetsDefaultValue); | ||
| }} | ||
| style={{ alignSelf: 'flex-start' }} | ||
| variant="text" | ||
| > | ||
| Presets | ||
| </StyledActionButton> | ||
| </Box> |
There was a problem hiding this comment.
If there's an error, the Presets button doesn't align properly:
There was a problem hiding this comment.
do we want the custom inputs and the error here to clear if we click on 'Presets' again and select a different preset? I can see a case for either
There was a problem hiding this comment.
Fixed the alignment in error scenario e856275
| /> | ||
| </InputAdornment> | ||
| ), | ||
| sx: { paddingLeft: '32px' }, |
There was a problem hiding this comment.
is it possible to use theme spacing instead of hardcoding values? eg theme.spacing(4)
There was a problem hiding this comment.
@cpathipa Let's use the Calendar design tokens for all the styling here. You will have to add it to the light/dark theme index files and expose it here if you need to use those tokens at the component level. You could also apply them at the theme level under MuiDateField
| null | ||
| ); | ||
| // Check if the onChange function is called with the expected value | ||
| expect(onChangeMock).toHaveBeenCalledWith({ |
There was a problem hiding this comment.
heads up, this test fails (see github actions comment)
There was a problem hiding this comment.
Fixed the test with dynamic month and year e856275
| let newEndDateTime: DateTime | null = null; | ||
|
|
||
| switch (value) { | ||
| case '24hours': |
There was a problem hiding this comment.
should we have a type for this, rather than using strings? something like type DatePresetType = '24hours' | or an enum
Cloud Manager UI test results🎉 474 passing tests on test run #13 ↗︎
|
|
@cpathipa / @jaalah-akamai / @coliu-akamai I've enhance the component on top of Chandra's PR. Give it a look. |
Screen.Recording.2025-01-08.at.4.49.35.PM.mov
|
This reverts commit 15d9134.
There was a problem hiding this comment.
do we plan to merge in @nikhagra-akamai's changes to this PR? Left a couple of comments on there
spoke async about additional styling work + other stuff - thanks Chandra!
packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx
Outdated
Show resolved
Hide resolved
|
@coliu-akamai we could point @nikhagra-akamai PR to develop once it is merged. |
…nent. (linode#11395) * unit test coverage for HostNameTableCell * Revert "unit test coverage for HostNameTableCell" This reverts commit b274baf. * chore: [M3-8662] - Update Github Actions actions (linode#11009) * update actions * add changeset --------- Co-authored-by: Banks Nussman <[email protected]> * Basci date picker component * Test coverage for date picker component * DatePicker Stories * Custom DateTimePicker component * Reusable TimeZone Select Component * Create custom DateTimeRangePicker component * Storybook for DateTimePicker * Fix tests and remove console warnings * changeset * Update packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx Co-authored-by: Connie Liu <[email protected]> * Adjust styles for DatePicker * Adjust styles for DateTimePicker * update imports * Render time and timezone conditionally in DateTimePicker component * Move DatePicker to UI package * Add DatePicker dependencies * Code cleanup * PR feedback * code cleanup * Move DatePicker back to src/components * Reverting changes * Code cleanup * Adjust broken tests * Update TimeZoneSelect.tsx * Code cleanup * Add validation for start date agains end date. * Adjust styles for TimePicker component. * Add the functionality to support Date Presets * Update presets functionality and add test coverage. * Added changeset: Add Date Presets Functionality to Date Picker component * Persist the preset value * Show the start date and end date fields only when custom is selected * Add calendar icon to DateTimePicker component * code cleanup and adjust tests * Update packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx Co-authored-by: Nikhil Agrawal <[email protected]> * update components * Organize and additional prop support to DateTimeRangePicker component * Code cleanup * PR feedback - @coliu-akamai * Move styles to theme level * Revert "Move styles to theme level" This reverts commit 15d9134. * code cleanup --------- Co-authored-by: Banks Nussman <[email protected]> Co-authored-by: Banks Nussman <[email protected]> Co-authored-by: Connie Liu <[email protected]> Co-authored-by: Nikhil Agrawal <[email protected]>
Description 📝
Add Date Presets Functionality to Date Range Picker component.
Changes 🔄
List any change(s) relevant to the reviewer.
Target release date 🗓️
N/A
Preview 📷
DateTimeRangePicker-v3.mov
How to test 🧪
Verification steps
(How to verify changes)
Author Checklists
As an Author, to speed up the review process, I considered 🤔
👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support
As an Author, before moving this PR from Draft to Open, I confirmed ✅