refactor. better naming for the add display filter form

Author: elad-n

src/components/elements/dateManager/SearchForm.tsx src/components/elements/dateManager/AddNewDisplayFilterForm.tsx

@@ -4,7 +4,7 @@ import { DatePicker, TimeField } from '@mui/x-date-pickers';
 import React, { Dispatch, SetStateAction } from 'react';
 import { Dayjs } from 'dayjs';
 
-interface SearchFormProps {
+interface AddNewDisplayFilterFormProps {
   setDisplayName: Dispatch<SetStateAction<string>>;
   setDisplayNameTouched: (value: boolean) => void;
   setDate: Dispatch<SetStateAction<Dayjs | null>>;
@@ -14,7 +14,7 @@ interface SearchFormProps {
   displayName: string;
   setHour: Dispatch<SetStateAction<Dayjs | null>>;
 }
-export const SearchForm = ({
+export const AddNewDisplayFilterForm = ({
   setDisplayName,
   setDisplayNameTouched,
   setDate,
@@ -23,7 +23,7 @@ export const SearchForm = ({
   hour,
   setHour,
   displayName,
-}: SearchFormProps) => {
+}: AddNewDisplayFilterFormProps) => {
   return (
     <Box width={'50%'} py={2} px={1} display={'inline-grid'} gap={2}>
       <Box display={'inline-grid'} gap={1}>

src/components/elements/dateManager/Presets.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import { List, ListItem, ListItemButton, ListItemText, Typography } from '@mui/material';
 import { Box } from '@mui/system';
-import { PresetType } from '../displayFilter/ComparePopover';
 import { Dayjs } from 'dayjs';
 
+export type PresetType = {
+  name: string;
+  value: Dayjs;
+};
+
 const PresetsList = ({
   list,
   onPresetClick,

src/components/elements/dateManager/index.tsx

@@ -7,14 +7,15 @@ import { Button, ButtonStretch, ButtonVariant } from '../button';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import theme from '../../../theme';
 import PresetsContent from './Presets';
-import { SearchForm } from './SearchForm';
-import { PresetType } from '../displayFilter/ComparePopover';
+import { PresetType } from '../displayFilter/AddNewFieldPopover';
+import { AddNewDisplayFilterForm } from './AddNewDisplayFilterForm';
 
 export interface DateManagerProps {
   presets: PresetType[];
-  compare: ({ alias, value }: { alias: string; value: number }) => void;
+  addClickedHandler: ({ alias, value }: { alias: string; value: number }) => void;
   close: () => void;
   loading: boolean;
+  oldReferenceName: string;
 }
 
 const formattedDate = (
@@ -24,7 +25,13 @@ const formattedDate = (
   return `${dayjs(date).format('YYYY-MM-DD')} ${dayjs(hour).format('HH:mm:ss')}`;
 };
 
-export const DateManager = ({ presets, compare, close, loading }: DateManagerProps) => {
+export const DateManager = ({
+  presets,
+  addClickedHandler,
+  close,
+  loading,
+  oldReferenceName,
+}: DateManagerProps) => {
   const defaultDisplayName = `as of ${dayjs().format('YYYY-MM-DD')} ${dayjs().format('HH:mm:ss')}`;
 
   const [date, setDate] = useState<null | Dayjs>(dayjs());
@@ -38,7 +45,7 @@ export const DateManager = ({ presets, compare, close, loading }: DateManagerPro
   useEffect(() => {
     const value = formattedDate(date, hour);
     if (!displayNameTouched) {
-      setDisplayName(`as of ${value}`);
+      setDisplayName(`copy of ${oldReferenceName}`);
     }
     setValue(dayjs(value).unix());
   }, [hour, date]);
@@ -48,12 +55,12 @@ export const DateManager = ({ presets, compare, close, loading }: DateManagerPro
       <ThemeProvider theme={theme}>
         <Box width={'530px'} height={'100%'} color={'#172D32'} px={1}>
           <Typography component={'div'} p={1} variant={'mediumBold'}>
-            Compare to previous version
+            Add new field
           </Typography>
           <Divider sx={{ backgroundColor: '#F8FAFC' }} />
 
           <Box display={'flex'}>
-            <SearchForm
+            <AddNewDisplayFilterForm
               setErrorDate={setErrorDate}
               setDisplayName={setDisplayName}
               setDisplayNameTouched={setDisplayNameTouched}
@@ -90,11 +97,11 @@ export const DateManager = ({ presets, compare, close, loading }: DateManagerPro
                 stretch={ButtonStretch.Slim}
                 variant={ButtonVariant.Primary}
                 onClick={() => {
-                  compare({ value, alias: displayName });
+                  addClickedHandler({ alias: displayName, value });
                   close();
                 }}
                 disabled={!date || errorDate || loading}
-                label={loading ? 'loading...' : 'Search'}
+                label={loading ? 'loading...' : 'Add Field'}
               />
             </Box>
           </Box>

src/components/elements/displayFilter/ComparePopover.tsx src/components/elements/displayFilter/AddNewFieldPopover.tsx

@@ -25,13 +25,16 @@ export const defaultPresets: PresetType[] = [
   },
 ];
 
-const ComparePopover = ({
+const AddNewFieldPopover = ({
   presets,
   addNewFilter,
+  oldReferenceName,
 }: {
   presets?: PresetType[];
   addNewFilter: ({ alias, value }: { alias: string; value: number }) => void;
+  oldReferenceName: string;
 }) => {
+  console.log('oldReferenceName ', oldReferenceName);
   const [loading, setLoading] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -76,14 +79,15 @@ const ComparePopover = ({
         }}
       >
         <DateManager
+          oldReferenceName={oldReferenceName}
           close={handleClose}
           loading={loading}
-          compare={addNewFilter}
+          addClickedHandler={addNewFilter}
           presets={presets?.length ? presets : defaultPresets}
         />
       </Popover>
     </div>
   );
 };
 
-export default ComparePopover;
+export default AddNewFieldPopover;

src/components/elements/displayFilter/index.tsx

@@ -2,7 +2,7 @@ import { IconButton, Stack, ThemeProvider, Tooltip, Typography } from '@mui/mate
 import React, { useEffect, useState } from 'react';
 import { Icon } from '../../icons';
 import theme from '../../../theme';
-import ComparePopover from './ComparePopover';
+import AddNewFieldPopover from './AddNewFieldPopover';
 import { Box } from '@mui/system';
 import { FilterType } from '../controlledDisplayFiltersGroup';
 
@@ -86,7 +86,9 @@ export function DisplayFilter({
           </Tooltip>
         </Box>
 
-        {showCompareButton && <ComparePopover addNewFilter={addNewFilterHandler} />}
+        {showCompareButton && (
+          <AddNewFieldPopover oldReferenceName={filter.name} addNewFilter={addNewFilterHandler} />
+        )}
       </Stack>
     </ThemeProvider>
   );

src/stories/elements/dateManager/DateManager.stories.tsx

@@ -2,11 +2,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 import { DateManager, DateManagerProps } from '../../../components';
 import dayjs from 'dayjs';
-
-function deductDays(days: number) {
-  const date = new Date();
-  return dayjs(date.setDate(date.getDay() - days)).format('YYYY-MM-DD');
-}
+import { Box } from '@mui/system';
 
 const meta: Meta<DateManagerProps> = {
   title: 'Elements/Date Manager',
@@ -15,22 +11,26 @@ const meta: Meta<DateManagerProps> = {
 
 export default meta;
 
-const Template: StoryFn<DateManagerProps> = (args) => <DateManager {...args} />;
+const Template: StoryFn<DateManagerProps> = (args) => (
+  <Box sx={{ backgroundColor: 'white', width: 'fit-content' }}>
+    <DateManager {...args} />
+  </Box>
+);
 
 export const DateManagerExample = Template.bind({});
 DateManagerExample.args = {
   presets: [
     {
       name: '1 day ago',
-      value: deductDays(1),
+      value: dayjs().subtract(1, 'day'),
     },
     {
       name: '1 week ago',
-      value: deductDays(7),
+      value: dayjs().subtract(7, 'day'),
     },
     {
       name: '1 month ago',
-      value: deductDays(30),
+      value: dayjs().subtract(30, 'day'),
     },
   ],
 };