feat: [M3-8936] - Add Date Presets Functionality to Date Picker component.

packages/manager/.changeset/pr-11395-added-1734381247482.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Add Date Presets Functionality to Date Picker component ([#11395](https://github.com/linode/manager/pull/11395))

packages/manager/src/components/DatePicker/DateTimePicker.tsx

@@ -1,13 +1,14 @@
+import { InputAdornment, TextField } from '@linode/ui';
 import { Divider } from '@linode/ui';
 import { Box } from '@linode/ui';
-import { TextField } from '@linode/ui';
-import { Grid, Popover } from '@mui/material';
+import { Grid, Popover, useTheme } from '@mui/material';
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import React, { useEffect, useState } from 'react';
 
+import Calendar from 'src/assets/icons/calendar.svg';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 
 import { TimeZoneSelect } from './TimeZoneSelect';
@@ -66,22 +67,33 @@ export const DateTimePicker = ({
   onApply,
   onCancel,
   onChange,
-  placeholder = 'yyyy-MM-dd HH:mm',
+  placeholder = 'Select Date',
   showTime = true,
   showTimeZone = true,
   sx,
   timeSelectProps = {},
   timeZoneSelectProps = {},
   value = null,
 }: DateTimePickerProps) => {
+  const theme = useTheme<Theme>();
+
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  // Current and original states
   const [selectedDateTime, setSelectedDateTime] = useState<DateTime | null>(
     value
   );
   const [selectedTimeZone, setSelectedTimeZone] = useState<null | string>(
     timeZoneSelectProps.value || null
   );
 
+  const [originalDateTime, setOriginalDateTime] = useState<DateTime | null>(
+    value
+  );
+  const [originalTimeZone, setOriginalTimeZone] = useState<null | string>(
+    timeZoneSelectProps.value || null
+  );
+
   const TimePickerFieldProps: TextFieldProps = {
     label: timeSelectProps?.label ?? 'Select Time',
     noMarginTop: true,
@@ -115,6 +127,8 @@ export const DateTimePicker = ({
 
   const handleApply = () => {
     setAnchorEl(null);
+    setOriginalDateTime(selectedDateTime);
+    setOriginalTimeZone(selectedTimeZone);
     onChange(selectedDateTime);
 
     if (onApply) {
@@ -124,6 +138,9 @@ export const DateTimePicker = ({
 
   const handleClose = () => {
     setAnchorEl(null);
+    setSelectedDateTime(originalDateTime);
+    setSelectedTimeZone(originalTimeZone);
+
     if (onCancel) {
       onCancel();
     }
@@ -139,16 +156,25 @@ export const DateTimePicker = ({
     <LocalizationProvider dateAdapter={AdapterLuxon}>
       <Box sx={{ minWidth: '300px', ...sx }}>
         <TextField
+          InputProps={{
+            readOnly: true,
+            startAdornment: (
+              <InputAdornment position="start">
+                <Calendar />
+              </InputAdornment>
+            ),
+            sx: { paddingLeft: theme.spacing() },
+          }}
           value={
             selectedDateTime
               ? `${selectedDateTime.toFormat(format)}${
                   selectedTimeZone ? ` (${selectedTimeZone})` : ''
                 }`
               : ''
           }
-          InputProps={{ readOnly: true }}
           errorText={errorText}
           label={label}
+          noMarginTop
           onClick={(event) => setAnchorEl(event.currentTarget)}
           placeholder={placeholder}
         />
@@ -165,29 +191,6 @@ export const DateTimePicker = ({
             onChange={handleDateChange}
             value={selectedDateTime || null}
             {...dateCalendarProps}
-            // TODO: Move styling customization to global theme styles.
-            sx={(theme: Theme) => ({
-              '& .MuiDayCalendar-weekContainer, & .MuiDayCalendar-header': {
-                justifyContent: 'space-between',
-              },
-              '& .MuiDayCalendar-weekDayLabel': {
-                fontSize: '0.875rem',
-              },
-              '& .MuiPickersCalendarHeader-label': {
-                fontFamily: theme.font.bold,
-              },
-              '& .MuiPickersCalendarHeader-root': {
-                borderBottom: `1px solid ${theme.borderColors.divider}`,
-                fontSize: '0.875rem',
-                paddingBottom: theme.spacing(1),
-              },
-              '& .MuiPickersDay-root': {
-                fontSize: '0.875rem',
-                margin: `${theme.spacing(0.5)}px`,
-              },
-              borderRadius: `${theme.spacing(2)}`,
-              borderWidth: '0px',
-            })}
           />
           <Grid
             container
@@ -198,32 +201,6 @@ export const DateTimePicker = ({
               <Grid item xs={4}>
                 <TimePicker
                   slotProps={{
-                    actionBar: {
-                      sx: (theme: Theme) => ({
-                        justifyContent: 'center',
-                        marginBottom: theme.spacing(1 / 2),
-                        marginTop: theme.spacing(1 / 2),
-                        padding: 0,
-                      }),
-                    },
-                    layout: {
-                      sx: (theme: Theme) => ({
-                        '& .MuiPickersLayout-contentWrapper': {
-                          borderBottom: `1px solid ${theme.borderColors.divider}`,
-                        },
-                        border: `1px solid ${theme.borderColors.divider}`,
-                      }),
-                    },
-                    openPickerButton: {
-                      sx: { padding: 0 },
-                    },
-                    popper: {
-                      sx: (theme: Theme) => ({
-                        ul: {
-                          borderColor: `${theme.borderColors.divider} !important`,
-                        },
-                      }),
-                    },
                     textField: TimePickerFieldProps,
                   }}
                   onChange={handleTimeChange}
@@ -247,10 +224,6 @@ export const DateTimePicker = ({
         <Divider />
         <Box display="flex" justifyContent="flex-end">
           <ActionsPanel
-            primaryButtonProps={{
-              label: 'Apply',
-              onClick: handleApply,
-            }}
             secondaryButtonProps={{
               buttonType: 'outlined',
               label: 'Cancel',
@@ -260,6 +233,7 @@ export const DateTimePicker = ({
               marginBottom: theme.spacing(1),
               marginRight: theme.spacing(2),
             })}
+            primaryButtonProps={{ label: 'Apply', onClick: handleApply }}
           />
         </Box>
       </Popover>