Merge branch 'master' into 42093-extract-analytics

metabase · May 3, 2024 · 06a682e · 06a682e
2 parents d988382 + 0691779
commit 06a682e
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 10 deletions.
diff --git a/e2e/test/scenarios/visualizations-tabular/drillthroughs/column_extract_drill.cy.spec.js b/e2e/test/scenarios/visualizations-tabular/drillthroughs/column_extract_drill.cy.spec.js
@@ -11,14 +11,15 @@ import {
   getNotebookStep,
   openNotebook,
   openOrdersTable,
+  openPeopleTable,
   popover,
   resetSnowplow,
   restore,
   visitQuestion,
   visualize,
 } from "e2e/support/helpers";
 
-const { ORDERS, ORDERS_ID } = SAMPLE_DATABASE;
+const { ORDERS, ORDERS_ID, PEOPLE } = SAMPLE_DATABASE;
 
 const DATE_CASES = [
   {
@@ -53,6 +54,37 @@ const DATE_CASES = [
   },
 ];
 
+const EMAIL_CASES = [
+  {
+    option: "Domain",
+    value: "yahoo",
+    example: "example, online",
+  },
+  {
+    option: "Host",
+    value: "yahoo.com",
+    example: "example.com, online.com",
+  },
+];
+
+const URL_CASES = [
+  {
+    option: "Domain",
+    value: "yahoo",
+    example: "example, online",
+  },
+  {
+    option: "Subdomain",
+    value: "",
+    example: "www, maps",
+  },
+  {
+    option: "Host",
+    value: "yahoo.com",
+    example: "example.com, online.com",
+  },
+];
+
 const DATE_QUESTION = {
   query: {
     "source-table": ORDERS_ID,
@@ -86,6 +118,7 @@ describeWithSnowplow("extract action", () => {
             option,
             value,
             example,
+            extraction: "Extract day, month…",
           });
         });
       });
@@ -97,6 +130,7 @@ describeWithSnowplow("extract action", () => {
         extractColumnAndCheck({
           column: "Created At",
           option: "Year",
+          extraction: "Extract day, month…",
         });
         const columnIndex = 7;
         checkColumnIndex({
@@ -114,6 +148,7 @@ describeWithSnowplow("extract action", () => {
         extractColumnAndCheck({
           column: "Created At",
           option: "Year",
+          extraction: "Extract day, month…",
         });
         const columnIndex = 7;
         checkColumnIndex({
@@ -168,6 +203,7 @@ describeWithSnowplow("extract action", () => {
         extractColumnAndCheck({
           column: "Created At",
           option: "Year",
+          extraction: "Extract day, month…",
         });
         const columnIndex = 1;
         checkColumnIndex({
@@ -187,6 +223,7 @@ describeWithSnowplow("extract action", () => {
         column: "Created At: Month",
         option: "Month of year",
         value: "Apr",
+        extraction: "Extract day, month…",
       });
     });
 
@@ -196,6 +233,7 @@ describeWithSnowplow("extract action", () => {
         column: "Min of Created At: Default",
         option: "Year",
         value: "2,022",
+        extraction: "Extract day, month…",
       });
     });
 
@@ -205,11 +243,13 @@ describeWithSnowplow("extract action", () => {
         column: "Created At",
         option: "Hour of day",
         newColumn: "Hour of day",
+        extraction: "Extract day, month…",
       });
       extractColumnAndCheck({
         column: "Created At",
         option: "Hour of day",
         newColumn: "Hour of day_2",
+        extraction: "Extract day, month…",
       });
     });
 
@@ -219,6 +259,7 @@ describeWithSnowplow("extract action", () => {
         column: "Created At",
         option: "Year",
         value: "2,025",
+        extraction: "Extract day, month…",
       });
       openNotebook();
       getNotebookStep("expression").findByText("Year").click();
@@ -237,6 +278,53 @@ describeWithSnowplow("extract action", () => {
         column: "Created At",
         option: "Tag der Woche",
         value: "Dienstag",
+        extraction: "Extract day, month…",
+      });
+    });
+  });
+
+  describe("email columns", () => {
+    beforeEach(() => {
+      restore();
+      cy.signInAsAdmin();
+    });
+
+    EMAIL_CASES.forEach(({ option, value, example }) => {
+      it(option, () => {
+        openPeopleTable({ limit: 1 });
+        extractColumnAndCheck({
+          column: "Email",
+          option,
+          value,
+          example,
+          extraction: "Extract domain, host…",
+        });
+      });
+    });
+  });
+
+  describe("url columns", () => {
+    beforeEach(() => {
+      restore();
+      cy.signInAsAdmin();
+
+      // Make the Email column a URL column for these tests, to avoid having to create a new model
+      cy.request("PUT", `/api/field/${PEOPLE.EMAIL}`, {
+        semantic_type: "type/URL",
+      });
+    });
+
+    URL_CASES.forEach(({ option, value, example }) => {
+      it(option, () => {
+        openPeopleTable({ limit: 1 });
+
+        extractColumnAndCheck({
+          column: "Email",
+          option,
+          value,
+          example,
+          extraction: "Extract domain, subdomain…",
+        });
       });
     });
   });
@@ -246,13 +334,14 @@ function extractColumnAndCheck({
   column,
   option,
   newColumn = option,
+  extraction,
   value,
   example,
 }) {
   const requestAlias = _.uniqueId("dataset");
   cy.intercept("POST", "/api/dataset").as(requestAlias);
   cy.findByRole("columnheader", { name: column }).click();
-  popover().findByText("Extract day, month…").click();
+  popover().findByText(extraction).click();
   cy.wait(1);
 
   if (example) {
@@ -292,6 +381,7 @@ describeWithSnowplow("extract action", () => {
       column: "Created At",
       option: "Year",
       value: "2,025",
+      extraction: "Extract day, month…",
     });
 
     expectGoodSnowplowEvent({

diff --git a/frontend/src/metabase/query_builder/components/expressions/ExtractColumn/util.ts b/frontend/src/metabase/query_builder/components/expressions/ExtractColumn/util.ts
@@ -19,9 +19,9 @@ export function getExample(info: Lib.ColumnExtractionInfo) {
     case "year":
       return "2023, 2024";
     case "domain":
-      return "example.com, online.com";
-    case "host":
       return "example, online";
+    case "host":
+      return "example.com, online.com";
     case "subdomain":
       return "www, maps";
   }

diff --git a/frontend/src/metabase/querying/utils/drills/column-extract-drill/column-extract-drill.tsx b/frontend/src/metabase/querying/utils/drills/column-extract-drill/column-extract-drill.tsx
@@ -83,9 +83,9 @@ export function getExample(info: Lib.ColumnExtractionInfo) {
     case "year":
       return "2023, 2024";
     case "domain":
-      return "example.com, online.com";
-    case "host":
       return "example, online";
+    case "host":
+      return "example.com, online.com";
     case "subdomain":
       return "www, maps";
   }

diff --git a/frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx b/frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx
@@ -14,6 +14,7 @@ import * as MetabaseAnalytics from "metabase/lib/analytics";
 import { formatNumber } from "metabase/lib/formatting";
 import { equals } from "metabase/lib/utils";
 import { getIsShowingRawTable } from "metabase/query_builder/selectors";
+import { getIsEmbeddingSdk } from "metabase/selectors/embed";
 import { getFont } from "metabase/styled-components/selectors";
 import {
   extractRemappings,
@@ -55,6 +56,7 @@ const defaultProps = {
   isEditing: false,
   isSettings: false,
   isQueryBuilder: false,
+  isEmbeddingSdk: false,
   onUpdateVisualizationSettings: () => {},
   // prefer passing in a function that doesn't cause the application to reload
   onChangeLocation: location => {
@@ -65,6 +67,7 @@ const defaultProps = {
 const mapStateToProps = state => ({
   fontFamily: getFont(state),
   isRawTable: getIsShowingRawTable(state),
+  isEmbeddingSdk: getIsEmbeddingSdk(state),
 });
 
 const SMALL_CARD_WIDTH_THRESHOLD = 150;

diff --git a/frontend/src/metabase/visualizations/types/visualization.ts b/frontend/src/metabase/visualizations/types/visualization.ts
@@ -65,6 +65,7 @@ export interface VisualizationProps {
   isPlaceholder?: boolean;
   isFullscreen: boolean;
   isQueryBuilder: boolean;
+  isEmbeddingSdk: boolean;
   showTitle: boolean;
   isDashboard: boolean;
   isEditing: boolean;

diff --git a/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx b/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx
@@ -3,9 +3,27 @@ import styled from "@emotion/styled";
 import { ResponsiveEChartsRenderer } from "metabase/visualizations/components/EChartsRenderer";
 import LegendLayout from "metabase/visualizations/components/legend/LegendLayout";
 
-export const CartesianChartRoot = styled.div<{ isQueryBuilder: boolean }>`
-  padding: ${({ isQueryBuilder }) =>
-    isQueryBuilder ? "1rem 1rem 1rem 2rem" : "0.5rem 1rem"};
+type CartesianChartRootProps = {
+  isQueryBuilder?: boolean;
+  isEmbeddingSdk?: boolean;
+};
+
+const getChartPadding = ({
+  isEmbeddingSdk,
+  isQueryBuilder,
+}: CartesianChartRootProps) => {
+  if (isEmbeddingSdk) {
+    return "0rem";
+  }
+  if (isQueryBuilder) {
+    return "1rem 1rem 1rem 2rem";
+  }
+
+  return "0.5rem 1rem";
+};
+
+export const CartesianChartRoot = styled.div<CartesianChartRootProps>`
+  padding: ${getChartPadding};
   height: 100%;
   display: flex;
   flex-direction: column;

diff --git a/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx b/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx
@@ -32,6 +32,7 @@ function _CartesianChart(props: VisualizationProps) {
     headerIcon,
     actionButtons,
     isQueryBuilder,
+    isEmbeddingSdk,
     isFullscreen,
     hovered,
     onChangeCardAndRun,
@@ -88,7 +89,10 @@ function _CartesianChart(props: VisualizationProps) {
   const canSelectTitle = !!onChangeCardAndRun;
 
   return (
-    <CartesianChartRoot isQueryBuilder={isQueryBuilder}>
+    <CartesianChartRoot
+      isQueryBuilder={isQueryBuilder}
+      isEmbeddingSdk={isEmbeddingSdk}
+    >
       {hasTitle && (
         <LegendCaption
           title={title}