Fix native time tooltip formatting (#24185) (#24221)

Co-authored-by: Alexander Polyankin <alexander.polyankin@metabase.com>

frontend/src/metabase/visualizations/lib/apply_axis.js

@@ -96,7 +96,7 @@ export function applyChartTimeseriesXAxis(
   const firstSeries = _.find(series, s => !datasetContainsNoResults(s.data));
 
   // setup an x-axis where the dimension is a timeseries
-  let dimensionColumn = firstSeries.data.cols[0];
+  const dimensionColumn = firstSeries.data.cols[0];
 
   // compute the data interval
   const dataInterval = xInterval;
@@ -116,9 +116,6 @@ export function applyChartTimeseriesXAxis(
       chart.settings["graph.x_axis.gridLine_enabled"],
     );
 
-    if (dimensionColumn.unit == null) {
-      dimensionColumn = { ...dimensionColumn, unit: dataInterval.interval };
-    }
     const waterfallTotalX =
       firstSeries.card.display === "waterfall" &&
       chart.settings["waterfall.show_total"]
@@ -127,7 +124,7 @@ export function applyChartTimeseriesXAxis(
 
     // special handling for weeks
     // TODO: are there any other cases where we should do this?
-    let tickFormatUnit = dimensionColumn.unit;
+    let tickFormatUnit = dimensionColumn.unit ?? dataInterval.interval;
     tickFormat = timestamp => {
       const { column, ...columnSettings } =
         chart.settings.column(dimensionColumn);

frontend/src/metabase/visualizations/lib/settings/column.js

@@ -154,6 +154,32 @@ function timeStyleOption(style, description) {
   };
 }
 
+function getTimeEnabledOptionsForUnit(unit) {
+  const options = [
+    { name: t`Off`, value: null },
+    { name: t`HH:MM`, value: "minutes" },
+  ];
+
+  if (
+    !unit ||
+    unit === "default" ||
+    unit === "second" ||
+    unit === "millisecond"
+  ) {
+    options.push({ name: t`HH:MM:SS`, value: "seconds" });
+  }
+
+  if (!unit || unit === "default" || unit === "millisecond") {
+    options.push({ name: t`HH:MM:SS.MS`, value: "milliseconds" });
+  }
+
+  if (options.length === 2) {
+    options[1].name = t`On`;
+  }
+
+  return options;
+}
+
 export const DATE_COLUMN_SETTINGS = {
   date_style: {
     title: t`Date style`,
@@ -208,26 +234,12 @@ export const DATE_COLUMN_SETTINGS = {
   time_enabled: {
     title: t`Show the time`,
     widget: "radio",
-    isValid: ({ unit }, settings) => !settings["time_enabled"] || hasHour(unit),
+    isValid: ({ unit }, settings) => {
+      const options = getTimeEnabledOptionsForUnit(unit);
+      return !!_.findWhere(options, { value: settings["time_enabled"] });
+    },
     getProps: ({ unit }, settings) => {
-      const options = [
-        { name: t`Off`, value: null },
-        { name: t`HH:MM`, value: "minutes" },
-      ];
-      if (
-        !unit ||
-        unit === "default" ||
-        unit === "second" ||
-        unit === "millisecond"
-      ) {
-        options.push({ name: t`HH:MM:SS`, value: "seconds" });
-      }
-      if (!unit || unit === "default" || unit === "millisecond") {
-        options.push({ name: t`HH:MM:SS.MS`, value: "milliseconds" });
-      }
-      if (options.length === 2) {
-        options[1].name = t`On`;
-      }
+      const options = getTimeEnabledOptionsForUnit(unit);
       return { options };
     },
     getHidden: (column, settings) =>

frontend/test/metabase/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js

@@ -386,13 +386,13 @@ describe("scenarios > visualizations > drillthroughs > chart drill", () => {
 
     clickLineDot({ index: 0 });
     popover().within(() => {
-      cy.findByText("January 1, 2020");
+      cy.findByText("January 1, 2020, 12:00 AM");
       cy.findByText("10");
     });
 
     clickLineDot({ index: 1 });
     popover().within(() => {
-      cy.findByText("January 2, 2020");
+      cy.findByText("January 2, 2020, 12:00 AM");
       cy.findByText("5");
     });
   });

frontend/test/metabase/scenarios/visualizations/reproductions/11435-time-tooltip-native.cy.spec.js

@@ -0,0 +1,40 @@
+import { restore, popover } from "__support__/e2e/helpers";
+
+const questionDetails = {
+  name: "11435",
+  display: "line",
+  native: {
+    query: `
+SELECT "PUBLIC"."ORDERS"."ID" AS "ID", "PUBLIC"."ORDERS"."USER_ID" AS "USER_ID", "PUBLIC"."ORDERS"."PRODUCT_ID" AS "PRODUCT_ID", "PUBLIC"."ORDERS"."SUBTOTAL" AS "SUBTOTAL", "PUBLIC"."ORDERS"."TAX" AS "TAX", "PUBLIC"."ORDERS"."TOTAL" AS "TOTAL", "PUBLIC"."ORDERS"."DISCOUNT" AS "DISCOUNT", "PUBLIC"."ORDERS"."CREATED_AT" AS "CREATED_AT", "PUBLIC"."ORDERS"."QUANTITY" AS "QUANTITY"
+FROM "PUBLIC"."ORDERS"
+WHERE ("PUBLIC"."ORDERS"."CREATED_AT" >= timestamp with time zone '2019-03-12 00:00:00.000+03:00'
+       AND "PUBLIC"."ORDERS"."CREATED_AT" < timestamp with time zone '2019-03-13 00:00:00.000+03:00')
+LIMIT 1048575`,
+  },
+  visualization_settings: {
+    "graph.dimensions": ["CREATED_AT"],
+    "graph.metrics": ["TOTAL"],
+    column_settings: {
+      '["name","CREATED_AT"]': {
+        time_enabled: "milliseconds",
+      },
+    },
+  },
+};
+
+describe("issue 11435", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  it("should use time formatting settings in tooltips for native questions (metabase#11435)", () => {
+    cy.createNativeQuestion(questionDetails, { visitQuestion: true });
+    clickLineDot({ index: 1 });
+    popover().findByTextEnsureVisible("March 11, 2019, 8:45:17.010 PM");
+  });
+});
+
+const clickLineDot = ({ index } = {}) => {
+  cy.get(".Visualization .dot").eq(index).click({ force: true });
+};