Extract popover content in RelativeDatePicker component (#24218)

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/RelativeDatePicker.tsx

@@ -26,7 +26,7 @@ import {
   NumericInput,
 } from "./RelativeDatePicker.styled";
 
-type Props = {
+type RelativeDatePickerProps = {
   className?: string;
   filter: Filter;
   onFilterChange: (filter: any[]) => void;
@@ -36,17 +36,9 @@ type Props = {
   reverseIconDirection?: boolean;
 };
 
-export const PastPicker = (props: Props) => (
-  <RelativeDatePicker {...props} formatter={value => value * -1} />
-);
-
-export const NextPicker = (props: Props) => (
-  <RelativeDatePicker
-    {...props}
-    offsetFormatter={value => value * -1}
-    reverseIconDirection
-  />
-);
+type OptionsContentProps = RelativeDatePickerProps & {
+  setOptionsVisible: (shouldBeVisible: boolean) => void;
+};
 
 const CURRENT_INTERVAL_NAME = {
   day: t`today`,
@@ -68,6 +60,13 @@ const TIME_PERIODS = ["minute", "hour"];
 // define ALL_PERIODS in increasing order of duration
 const ALL_PERIODS = TIME_PERIODS.concat(DATE_PERIODS.flat());
 
+const SELECT_STYLE = {
+  width: 65,
+  fontSize: 14,
+  fontWeight: 700,
+  padding: 8,
+};
+
 const isSmallerUnit = (unit: string, unitToCompare: string) => {
   return ALL_PERIODS.indexOf(unit) < ALL_PERIODS.indexOf(unitToCompare);
 };
@@ -99,37 +98,39 @@ function getCurrentIntervalName(filter: Filter) {
   return null;
 }
 
-const RelativeDatePicker: React.FC<Props> = props => {
-  const {
-    filter,
-    onFilterChange,
-    formatter = value => value,
-    offsetFormatter = value => value,
-    className,
-    primaryColor,
-    reverseIconDirection,
-  } = props;
-
-  const startingFrom = getStartingFrom(filter);
-  const [intervals = 30, unit = "day"] = getRelativeDatetimeInterval(filter);
+const OptionsContent: React.FC<OptionsContentProps> = ({
+  filter,
+  primaryColor,
+  onFilterChange,
+  reverseIconDirection,
+  setOptionsVisible,
+}) => {
   const options = filter[4] || {};
   const includeCurrent = !!options["include-current"];
+  const currentString = getCurrentString(filter);
 
-  const showOptions = !startingFrom;
-  const numColumns = showOptions ? 3 : 4;
+  const handleClickOnStartingFrom = () => {
+    setOptionsVisible(false);
+    onFilterChange(setStartingFrom(filter));
+  };
 
-  const [optionsVisible, setOptionsVisible] = React.useState(false);
+  const handleClickOnIncludeCurrentTimeUnit = () => {
+    setOptionsVisible(false);
+    onFilterChange(
+      assoc(filter, 4, {
+        ...options,
+        "include-current": !includeCurrent,
+      }),
+    );
+  };
 
-  const optionsContent = (
-    <OptionsContainer data-testid="relative-datetime-options-container">
+  return (
+    <OptionsContainer>
       <OptionButton
         icon="arrow_left_to_line"
         primaryColor={primaryColor}
         reverseIconDirection={reverseIconDirection}
-        onClick={() => {
-          setOptionsVisible(false);
-          onFilterChange(setStartingFrom(filter));
-        }}
+        onClick={handleClickOnStartingFrom}
       >
         {t`Starting from...`}
       </OptionButton>
@@ -137,20 +138,37 @@ const RelativeDatePicker: React.FC<Props> = props => {
         selected={includeCurrent}
         primaryColor={primaryColor}
         icon={includeCurrent ? "check" : "calendar"}
-        onClick={() => {
-          setOptionsVisible(false);
-          onFilterChange(
-            assoc(filter, 4, {
-              ...options,
-              "include-current": !includeCurrent,
-            }),
-          );
-        }}
+        onClick={handleClickOnIncludeCurrentTimeUnit}
       >
-        {getCurrentString(filter)}
+        {/*currentString is already translated*/}
+        {currentString}
       </OptionButton>
     </OptionsContainer>
   );
+};
+
+const RelativeDatePicker: React.FC<RelativeDatePickerProps> = props => {
+  const {
+    filter,
+    onFilterChange,
+    formatter = value => value,
+    offsetFormatter = value => value,
+    className,
+    primaryColor,
+    reverseIconDirection,
+  } = props;
+
+  const startingFrom = getStartingFrom(filter);
+  const [intervals = 30, unit = "day"] = getRelativeDatetimeInterval(filter);
+
+  const showOptions = !startingFrom;
+  const numColumns = showOptions ? 3 : 4;
+
+  const [optionsVisible, setOptionsVisible] = React.useState(false);
+
+  const optionsContent = (
+    <OptionsContent {...props} setOptionsVisible={setOptionsVisible} />
+  );
 
   return (
     <GridContainer
@@ -252,9 +270,14 @@ const RelativeDatePicker: React.FC<Props> = props => {
   );
 };
 
-const SELECT_STYLE = {
-  width: 65,
-  fontSize: 14,
-  fontWeight: 700,
-  padding: 8,
-};
+export const PastPicker = (props: RelativeDatePickerProps) => (
+  <RelativeDatePicker {...props} formatter={value => value * -1} />
+);
+
+export const NextPicker = (props: RelativeDatePickerProps) => (
+  <RelativeDatePicker
+    {...props}
+    offsetFormatter={value => value * -1}
+    reverseIconDirection
+  />
+);