Extract CurrentPicker date component (#24192)

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/CurrentPicker/CurrentPicker.styled.tsx

+import styled from "@emotion/styled";
+
+import { alpha, color } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
+
+import Button from "metabase/core/components/Button";
+
+export const CurrentContainer = styled.div<{ first?: boolean }>`
+  display: flex;
+  flex-wrap: no-wrap;
+  grid-gap: ${space(2)};
+  margin-bottom: ${({ first }) => (first ? space(2) : "")};
+`;
+
+export const CurrentPopover = styled.div`
+  color: ${color("white")};
+  background-color: ${color("black")};
+  padding: ${space(1)} ${space(2)};
+`;
+
+type ButtonProps = {
+  primaryColor?: string;
+  selected?: boolean;
+};
+
+export const CurrentButton = styled(Button)<ButtonProps>`
+  border: none;
+  border-radius: 99px;
+
+  background-color: ${({ selected, primaryColor = color("brand") }) =>
+    selected ? primaryColor : alpha(primaryColor, 0.1)};
+  color: ${({ selected, primaryColor = color("brand") }) =>
+    selected ? "white" : primaryColor};
+
+  padding-top: ${space(1)};
+  padding-bottom: ${space(1)};
+
+  &:hover {
+    color: white;
+    background-color: ${props => props.primaryColor || color("brand")};
+  }
+`;

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

+import React from "react";
+import { t } from "ttag";
+import moment from "moment";
+
+import { formatBucketing } from "metabase/lib/query_time";
+import TippyPopover from "metabase/components/Popover/TippyPopover";
+import { DATE_PERIODS } from "../RelativeDatePicker";
+import {
+  CurrentButton,
+  CurrentContainer,
+  CurrentPopover,
+} from "./CurrentPicker.styled";
+import Filter from "metabase-lib/lib/queries/structured/Filter";
+
+type CurrentPickerProps = {
+  className?: string;
+  filter: Filter;
+  primaryColor?: string;
+  onCommit: (filter?: any[]) => void;
+};
+
+const periodPopoverText = (period: string) => {
+  const now = moment();
+  let start: string, end: string;
+  switch (period) {
+    case "day":
+      return t`Right now, this is ${now.format("ddd, MMM D")}`;
+    case "week":
+      start = now.startOf("week").format("ddd, MMM D");
+      end = now.endOf("week").format("ddd, MMM D");
+      return t`Right now, this is ${start} - ${end}`;
+    case "month":
+      start = now.startOf("month").format("ddd, MMM D");
+      end = now.endOf("month").format("ddd, MMM D");
+      return t`Right now, this is ${start} - ${end}`;
+    case "quarter":
+      start = now.startOf("quarter").format("ddd, MMM D");
+      end = now.endOf("quarter").format("ddd, MMM D");
+      return t`Right now, this is ${start} - ${end}`;
+    case "year":
+      start = now.startOf("year").format("MMM D, YYYY");
+      end = now.endOf("year").format("MMM D, YYYY");
+      return t`Right now, this is ${start} - ${end}`;
+  }
+};
+
+export default function CurrentPicker(props: CurrentPickerProps) {
+  const {
+    className,
+    primaryColor,
+    onCommit,
+    filter: [operator, field, _intervals, unit],
+  } = props;
+  return (
+    <div className={className}>
+      {DATE_PERIODS.map((periods, index) => (
+        <CurrentContainer key={periods.length} first={index === 0}>
+          {periods.map(period => (
+            <TippyPopover
+              key={period}
+              placement="bottom"
+              delay={[500, null]}
+              content={
+                <CurrentPopover>{periodPopoverText(period)}</CurrentPopover>
+              }
+            >
+              <CurrentButton
+                key={period}
+                primaryColor={primaryColor}
+                selected={operator && unit === period.toLowerCase()}
+                onClick={() => {
+                  onCommit([operator, field, "current", period]);
+                }}
+              >
+                {formatBucketing(period, 1)}
+              </CurrentButton>
+            </TippyPopover>
+          ))}
+        </CurrentContainer>
+      ))}
+    </div>
+  );
+}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/CurrentPicker/index.ts

+export { default } from "./CurrentPicker";

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

@@ -22,7 +22,8 @@ import DatePickerHeader from "./DatePickerHeader";
 import ExcludeDatePicker from "./ExcludeDatePicker";
 import DatePickerShortcuts from "./DatePickerShortcuts";
 import { DateShortcutOptions } from "./DatePickerShortcutOptions";
-import { CurrentPicker, NextPicker, PastPicker } from "./RelativeDatePicker";
+import CurrentPicker from "./CurrentPicker";
+import { NextPicker, PastPicker } from "./RelativeDatePicker";
 import { AfterPicker, BeforePicker, BetweenPicker } from "./RangeDatePicker";
 import SingleDatePicker from "./SingleDatePicker";
 

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

@@ -22,47 +22,16 @@ export const NumericInput = styled(BaseNumericInput)<BaseProps>`
   }
 `;
 
-type ButtonProps = {
-  primaryColor?: string;
-  selected?: boolean;
-};
-
-export const CurrentButton = styled(Button)<ButtonProps>`
-  border: none;
-  border-radius: 99px;
-
-  background-color: ${({ selected, primaryColor = color("brand") }) =>
-    selected ? primaryColor : alpha(primaryColor, 0.1)};
-  color: ${({ selected, primaryColor = color("brand") }) =>
-    selected ? "white" : primaryColor};
-
-  padding-top: ${space(1)};
-  padding-bottom: ${space(1)};
-
-  &:hover {
-    color: white;
-    background-color: ${props => props.primaryColor || color("brand")};
-  }
-`;
-
-export const CurrentContainer = styled.div<{ first?: boolean }>`
-  display: flex;
-  flex-wrap: no-wrap;
-  grid-gap: ${space(2)};
-  margin-bottom: ${({ first }) => (first ? space(2) : "")};
-`;
-
-export const CurrentPopover = styled.div`
-  color: ${color("white")};
-  background-color: ${color("black")};
-  padding: ${space(1)} ${space(2)};
-`;
-
 export const OptionsContainer = styled.div`
   background-color: ${color("white")};
   padding: ${space(2)} ${space(1)};
 `;
 
+type ButtonProps = {
+  primaryColor?: string;
+  selected?: boolean;
+};
+
 type OptionButtonProps = ButtonProps & {
   reverseIconDirection?: boolean;
 };

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

@@ -5,7 +5,6 @@ import moment from "moment";
 import { assoc } from "icepick";
 
 import {
-  formatBucketing,
   formatStartingFrom,
   getRelativeDatetimeInterval,
   getStartingFrom,
@@ -18,9 +17,6 @@ import TippyPopover from "metabase/components/Popover/TippyPopover";
 
 import Filter from "metabase-lib/lib/queries/structured/Filter";
 import {
-  CurrentButton,
-  CurrentContainer,
-  CurrentPopover,
   GridContainer,
   GridText,
   MoreButton,
@@ -42,76 +38,16 @@ export const NextPicker = (props: Props) => (
   />
 );
 
-const periodPopoverText = (period: string) => {
-  const now = moment();
-  let start: string, end: string;
-  switch (period) {
-    case "day":
-      return t`Right now, this is ${now.format("ddd, MMM D")}`;
-    case "week":
-      start = now.startOf("week").format("ddd, MMM D");
-      end = now.endOf("week").format("ddd, MMM D");
-      return t`Right now, this is ${start} - ${end}`;
-    case "month":
-      start = now.startOf("month").format("ddd, MMM D");
-      end = now.endOf("month").format("ddd, MMM D");
-      return t`Right now, this is ${start} - ${end}`;
-    case "quarter":
-      start = now.startOf("quarter").format("ddd, MMM D");
-      end = now.endOf("quarter").format("ddd, MMM D");
-      return t`Right now, this is ${start} - ${end}`;
-    case "year":
-      start = now.startOf("year").format("MMM D, YYYY");
-      end = now.endOf("year").format("MMM D, YYYY");
-      return t`Right now, this is ${start} - ${end}`;
-  }
-};
-
-type CurrentPickerProps = {
-  className?: string;
-  filter: Filter;
-  primaryColor?: string;
-  onCommit: (filter?: any[]) => void;
+const CURRENT_INTERVAL_NAME = {
+  day: t`today`,
+  week: t`this week`,
+  month: t`this month`,
+  year: t`this year`,
+  quarter: t`this quarter`,
+  minute: t`this minute`,
+  hour: t`this hour`,
 };
 
-export function CurrentPicker(props: CurrentPickerProps) {
-  const {
-    className,
-    primaryColor,
-    onCommit,
-    filter: [operator, field, _intervals, unit],
-  } = props;
-  return (
-    <div className={className}>
-      {DATE_PERIODS.map((periods, index) => (
-        <CurrentContainer key={periods.length} first={index === 0}>
-          {periods.map(period => (
-            <TippyPopover
-              key={period}
-              placement="bottom"
-              delay={[500, null]}
-              content={
-                <CurrentPopover>{periodPopoverText(period)}</CurrentPopover>
-              }
-            >
-              <CurrentButton
-                key={period}
-                primaryColor={primaryColor}
-                selected={operator && unit === period.toLowerCase()}
-                onClick={() => {
-                  onCommit([operator, field, "current", period]);
-                }}
-              >
-                {formatBucketing(period, 1)}
-              </CurrentButton>
-            </TippyPopover>
-          ))}
-        </CurrentContainer>
-      ))}
-    </div>
-  );
-}
-
 export const DATE_PERIODS = [
   ["day", "week", "month"],
   ["quarter", "year"],
@@ -144,16 +80,6 @@ const getStartingFromUnits = (
 const getCurrentString = (filter: Filter) =>
   t`Include ${getCurrentIntervalName(filter)}`;
 
-const CURRENT_INTERVAL_NAME = {
-  day: t`today`,
-  week: t`this week`,
-  month: t`this month`,
-  year: t`this year`,
-  quarter: t`this quarter`,
-  minute: t`this minute`,
-  hour: t`this hour`,
-};
-
 function getCurrentIntervalName(filter: Filter) {
   if (filter[0] === "time-interval") {
     return CURRENT_INTERVAL_NAME[