Pass date and time format to timeline forms (#26289)

frontend/src/metabase-types/api/mocks/settings.ts

@@ -63,6 +63,7 @@ export const createMockSettings = (opts?: Partial<Settings>): Settings => ({
   "application-font-files": [],
   "available-fonts": [],
   "available-locales": null,
+  "custom-formatting": {},
   "enable-public-sharing": false,
   "enable-xrays": false,
   "email-configured?": false,

frontend/src/metabase-types/api/settings.ts

+export interface FormattingSettings {
+  "type/Temporal"?: DateFormattingSettings;
+  "type/Number"?: NumberFormattingSettings;
+  "type/Currency"?: CurrencyFormattingSettings;
+}
+
+export interface DateFormattingSettings {
+  date_style?: string;
+  date_separator?: string;
+  date_abbreviate?: boolean;
+  time_style?: string;
+}
+
+export interface NumberFormattingSettings {
+  number_separators?: string;
+}
+
+export interface CurrencyFormattingSettings {
+  currency?: string;
+  currency_style?: string;
+  currency_in_header?: boolean;
+}
+
 export interface Engine {
   "driver-name": string;
   "superseded-by": string | undefined;
   source: EngineSource;
 }
+
 export interface EngineSource {
   type?: "official" | "community" | "partner";
   contact?: EngineSourceContact;
@@ -43,6 +67,7 @@ export interface Settings {
   "application-font-files": FontFile[] | null;
   "available-fonts": string[];
   "available-locales": LocaleData[] | null;
+  "custom-formatting": FormattingSettings;
   "enable-public-sharing": boolean;
   "enable-xrays": boolean;
   "email-configured?": boolean;

frontend/src/metabase/core/components/DateSelector/DateSelector.tsx

@@ -22,7 +22,7 @@ export interface DateSelectorProps {
   style?: CSSProperties;
   value?: Moment;
   hasTime?: boolean;
-  is24HourMode?: boolean;
+  timeFormat?: string;
   onChange?: (date?: Moment) => void;
   onHasTimeChange?: (hasTime: boolean) => void;
   onSubmit?: () => void;
@@ -34,7 +34,7 @@ const DateSelector = forwardRef(function DateSelector(
     style,
     value,
     hasTime,
-    is24HourMode,
+    timeFormat,
     onChange,
     onHasTimeChange,
     onSubmit,
@@ -79,7 +79,7 @@ const DateSelector = forwardRef(function DateSelector(
         <SelectorTimeContainer>
           <TimeInput
             value={value}
-            is24HourMode={is24HourMode}
+            timeFormat={timeFormat}
             onChange={onChange}
             onClear={handleTimeClear}
           />

frontend/src/metabase/core/components/DateWidget/DateWidget.tsx

@@ -20,7 +20,6 @@ export interface DateWidgetProps extends DateWidgetAttributes {
   hasTime?: boolean;
   dateFormat?: string;
   timeFormat?: string;
-  is24HourMode?: boolean;
   error?: boolean;
   fullWidth?: boolean;
   onChange?: (date?: Moment) => void;
@@ -33,7 +32,6 @@ const DateWidget = forwardRef(function DateWidget(
     hasTime,
     dateFormat,
     timeFormat,
-    is24HourMode,
     error,
     fullWidth,
     onChange,
@@ -60,7 +58,7 @@ const DateWidget = forwardRef(function DateWidget(
         <DateSelector
           value={value}
           hasTime={hasTime}
-          is24HourMode={is24HourMode}
+          timeFormat={timeFormat}
           onChange={onChange}
           onHasTimeChange={onHasTimeChange}
           onSubmit={handleClose}

frontend/src/metabase/core/components/FormTextArea/FormTextArea.tsx

@@ -5,7 +5,10 @@ import TextArea, { TextAreaProps } from "metabase/core/components/TextArea";
 import FormField from "metabase/core/components/FormField";
 
 export interface FormTextAreaProps
-  extends Omit<TextAreaProps, "value" | "error" | "onChange" | "onBlur"> {
+  extends Omit<
+    TextAreaProps,
+    "value" | "error" | "fullWidth" | "onChange" | "onBlur"
+  > {
   name: string;
   title?: string;
   description?: ReactNode;
@@ -47,6 +50,7 @@ const FormTextArea = forwardRef(function FormTextArea(
         name={name}
         value={value}
         error={touched && error != null}
+        fullWidth
         onChange={onChange}
         onBlur={onBlur}
       />

frontend/src/metabase/core/components/TimeInput/TimeInput.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, Ref, useCallback } from "react";
 import { t } from "ttag";
 import moment, { Moment } from "moment-timezone";
 import Tooltip from "metabase/components/Tooltip";
-
 import {
   InputClearButton,
   InputClearIcon,
@@ -13,9 +12,11 @@ import {
   InputRoot,
 } from "./TimeInput.styled";
 
+const TIME_FORMAT_12 = "h:mm A";
+
 export interface TimeInputProps {
   value: Moment;
-  is24HourMode?: boolean;
+  timeFormat?: string;
   autoFocus?: boolean;
   hasClearButton?: boolean;
   onChange?: (value: Moment) => void;
@@ -25,7 +26,7 @@ export interface TimeInputProps {
 const TimeInput = forwardRef(function TimeInput(
   {
     value,
-    is24HourMode,
+    timeFormat = TIME_FORMAT_12,
     autoFocus,
     hasClearButton = true,
     onChange,
@@ -33,6 +34,7 @@ const TimeInput = forwardRef(function TimeInput(
   }: TimeInputProps,
   ref: Ref<HTMLDivElement>,
 ): JSX.Element {
+  const is24HourMode = timeFormat === "HH:mm";
   const hoursText = value.format(is24HourMode ? "HH" : "hh");
   const minutesText = value.format("mm");
   const isAm = value.hours() < 12;

frontend/src/metabase/core/components/TimeInput/TimeInput.unit.spec.tsx

@@ -39,7 +39,9 @@ describe("TimeInput", () => {
     const value = moment({ hours: 0, minutes: 0 });
     const onChange = jest.fn();
 
-    render(<TestTimeInput value={value} is24HourMode onChange={onChange} />);
+    render(
+      <TestTimeInput value={value} timeFormat="HH:mm" onChange={onChange} />,
+    );
     userEvent.clear(screen.getByLabelText("Hours"));
     userEvent.type(screen.getByLabelText("Hours"), "15");
     userEvent.clear(screen.getByLabelText("Minutes"));

frontend/src/metabase/timelines/common/components/EditEventModal/EditEventModal.tsx

 import React, { useCallback, useMemo } from "react";
 import { t } from "ttag";
 import { Timeline, TimelineEvent, TimelineEventData } from "metabase-types/api";
-import EventForm from "../EventForm";
+import EventForm from "../../containers/EventForm";
 import ModalBody from "../ModalBody";
 import ModalHeader from "../ModalHeader";
 

frontend/src/metabase/timelines/common/components/EditEventModal/EditEventModal.unit.spec.tsx

-import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
-  createMockTimeline,
-  createMockTimelineEvent,
-} from "metabase-types/api/mocks";
-import EditEventModal, { EditEventModalProps } from "./EditEventModal";
-
-describe("EditEventModal", () => {
-  it("should submit modal", async () => {
-    const props = getProps();
-
-    render(<EditEventModal {...props} />);
-    userEvent.clear(screen.getByLabelText("Event name"));
-    userEvent.type(screen.getByLabelText("Event name"), "New name");
-    await waitFor(() => expect(screen.getByText("Update")).toBeEnabled());
-
-    userEvent.click(screen.getByText("Update"));
-    await waitFor(() => expect(props.onSubmit).toHaveBeenCalled());
-  });
-});
-
-const getProps = (
-  opts?: Partial<EditEventModalProps>,
-): EditEventModalProps => ({
-  event: createMockTimelineEvent(),
-  timeline: createMockTimeline(),
-  onSubmit: jest.fn(),
-  onArchive: jest.fn(),
-  onCancel: jest.fn(),
-  onClose: jest.fn(),
-  ...opts,
-});

frontend/src/metabase/timelines/common/components/EventForm/EventForm.tsx

@@ -11,7 +11,11 @@ import FormTextArea from "metabase/core/components/FormTextArea";
 import FormSelect from "metabase/core/components/FormSelect";
 import FormSubmitButton from "metabase/core/components/FormSubmitButton";
 import FormErrorMessage from "metabase/core/components/FormErrorMessage";
-import { Timeline, TimelineEventData } from "metabase-types/api";
+import {
+  FormattingSettings,
+  Timeline,
+  TimelineEventData,
+} from "metabase-types/api";
 import FormArchiveButton from "../FormArchiveButton";
 import { EventFormFooter } from "./EventForm.styled";
 
@@ -29,7 +33,7 @@ const EventSchema = Yup.object({
   timeline_id: Yup.number(),
 });
 
-export interface EventFormProps {
+export interface EventFormOwnProps {
   initialValues: TimelineEventData;
   timelines?: Timeline[];
   onSubmit: (data: TimelineEventData) => void;
@@ -37,14 +41,22 @@ export interface EventFormProps {
   onCancel?: () => void;
 }
 
+export interface EventFormStateProps {
+  formattingSettings?: FormattingSettings;
+}
+
+export type EventFormProps = EventFormOwnProps & EventFormStateProps;
+
 const EventForm = ({
   initialValues,
   timelines = [],
+  formattingSettings,
   onSubmit,
   onArchive,
   onCancel,
 }: EventFormProps): JSX.Element => {
   const isNew = initialValues.id == null;
+  const dateSettings = formattingSettings?.["type/Temporal"];
 
   const iconOptions = useMemo(() => {
     return getTimelineIcons();
@@ -72,6 +84,8 @@ const EventForm = ({
             name="timestamp"
             title={t`Date`}
             hasTime={values.time_matters}
+            dateFormat={dateSettings?.date_style}
+            timeFormat={dateSettings?.time_style}
             onHasTimeChange={value => setFieldValue("time_matters", value)}
           />
           <FormTextArea
@@ -79,7 +93,6 @@ const EventForm = ({
             title={t`Description`}
             infoLabel={t`Markdown supported`}
             infoTooltip={t`Add links and formatting via markdown`}
-            fullWidth
           />
           <FormSelect name="icon" title={t`Icon`} options={iconOptions} />
           {timelines.length > 1 && (

frontend/src/metabase/timelines/common/components/EventForm/index.ts

 export { default } from "./EventForm";
+export type { EventFormStateProps, EventFormOwnProps } from "./EventForm";

frontend/src/metabase/timelines/common/components/NewEventModal/NewEventModal.tsx

@@ -8,7 +8,7 @@ import {
   TimelineEventData,
   TimelineEventSource,
 } from "metabase-types/api";
-import EventForm from "../EventForm";
+import EventForm from "../../containers/EventForm";
 import ModalBody from "../ModalBody";
 import ModalHeader from "../ModalHeader";
 

frontend/src/metabase/timelines/common/components/TimelineForm/TimelineForm.tsx

@@ -55,7 +55,7 @@ const TimelineForm = ({
             placeholder={t`Product releases`}
             autoFocus
           />
-          <FormTextArea name="description" title={t`Description`} fullWidth />
+          <FormTextArea name="description" title={t`Description`} />
           <FormSelect name="icon" title={t`Default icon`} options={icons} />
           <TimelineFormFooter>
             <FormErrorMessage inline />

frontend/src/metabase/timelines/common/containers/EventForm/EventForm.tsx

+import { connect } from "react-redux";
+import { State } from "metabase-types/store";
+import { getSetting } from "metabase/selectors/settings";
+import EventForm, {
+  EventFormOwnProps,
+  EventFormStateProps,
+} from "../../components/EventForm";
+
+const mapStateToProps = (state: State) => ({
+  formattingSettings: getSetting(state, "custom-formatting"),
+});
+
+export default connect<EventFormStateProps, unknown, EventFormOwnProps, State>(
+  mapStateToProps,
+)(EventForm);

frontend/src/metabase/timelines/common/containers/EventForm/index.ts

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

frontend/test/metabase/scenarios/organization/timelines-collection.cy.spec.js

@@ -6,6 +6,7 @@ import {
   resetSnowplow,
   restore,
   getFullName,
+  popover,
 } from "__support__/e2e/helpers";
 
 import { USERS } from "__support__/e2e/cypress_data";
@@ -97,8 +98,7 @@ describe("scenarios > organization > timelines > collection", () => {
 
       cy.findByLabelText("Event name").type("RC1");
 
-      // New event modal
-      cy.get(".Modal").within(() => {
+      getModal().within(() => {
         cy.findByRole("button", { name: "calendar icon" }).click();
       });
       cy.findByText("15").click();
@@ -137,8 +137,7 @@ describe("scenarios > organization > timelines > collection", () => {
 
       cy.findByLabelText("Event name").type("RC1");
 
-      // New event modal
-      cy.get(".Modal").within(() => {
+      getModal().within(() => {
         cy.findByRole("button", { name: "calendar icon" }).click();
       });
       cy.findByText("15").click();
@@ -162,8 +161,7 @@ describe("scenarios > organization > timelines > collection", () => {
 
       cy.findByLabelText("Event name").type("RC1");
 
-      // New event modal
-      cy.get(".Modal").within(() => {
+      getModal().within(() => {
         cy.findByRole("button", { name: "calendar icon" }).click();
       });
       cy.findByText("15").click();
@@ -517,6 +515,45 @@ describe("scenarios > organization > timelines > collection", () => {
       cy.wait("@updateTimeline");
       cy.findByText("Releases");
     });
+
+    it("should use custom date formatting settings", () => {
+      cy.createTimelineWithEvents({
+        events: [{ name: "RC1", timestamp: "2022-10-12T18:15:30Z" }],
+      });
+      setFormattingSettings({
+        "type/Temporal": { date_style: "YYYY/M/D" },
+      });
+      cy.visit("/collection/root/timelines");
+
+      openMenu("RC1");
+      cy.findByText("Edit event").click();
+      cy.findByDisplayValue("2022/10/12").should("be.visible");
+
+      cy.findByLabelText("Date").clear().type("2022/10/15");
+      cy.button("Update").click();
+      cy.wait("@updateEvent");
+      cy.findByText("2022/10/15").should("be.visible");
+    });
+
+    it("should use custom time formatting settings", () => {
+      cy.createTimelineWithEvents({
+        events: [{ name: "RC1", timestamp: "2022-10-12T18:15:30Z" }],
+      });
+      setFormattingSettings({
+        "type/Temporal": { time_style: "HH:mm" },
+      });
+      cy.visit("/collection/root/timelines");
+
+      openMenu("RC1");
+      cy.findByText("Edit event").click();
+      getModal().within(() => {
+        cy.findByRole("button", { name: "calendar icon" }).click();
+      });
+      popover().within(() => {
+        cy.findByText("Add time").click();
+        cy.findByText("AM").should("not.exist");
+      });
+    });
   });
 
   describe("as readonly user", () => {
@@ -589,3 +626,9 @@ const openMenu = name => {
     .parent()
     .within(() => cy.icon("ellipsis").click());
 };
+
+const setFormattingSettings = settings => {
+  cy.request("PUT", "api/setting/custom-formatting", {
+    value: settings,
+  });
+};