Use Mantine Switch instead of Toggle in Dashboard Sidebar (#34817)

e2e/test/scenarios/dashboard-filters/dashboard-filters-auto-apply.cy.spec.js

@@ -52,11 +52,13 @@ function createDashboardDetails({ parameters }) {
   };
 }
 
-const TOAST_TIMEOUT = 20000;
+const TOAST_TIMEOUT = 16000;
 
 const TOAST_MESSAGE =
   "You can make this dashboard snappier by turning off auto-applying filters.";
 
+const filterToggleLabel = "Auto-apply filters";
+
 describe(
   "scenarios > dashboards > filters > auto apply",
   { tags: "@slow" },
@@ -98,9 +100,9 @@ describe(
         );
         toggleDashboardInfoSidebar();
         rightSidebar().within(() => {
-          cy.findByLabelText("Auto-apply filters").click();
+          cy.findByText(filterToggleLabel).click();
           cy.wait("@updateDashboard");
-          cy.findByLabelText("Auto-apply filters").should("not.be.checked");
+          cy.findByLabelText(filterToggleLabel).should("not.be.checked");
         });
         filterWidget().findByText("Gadget").should("be.visible");
         getDashboardCard().findByText("Rows 1-4 of 53").should("be.visible");
@@ -130,9 +132,9 @@ describe(
         filterWidget().findByText("Widget").should("be.visible");
         dashboardParametersContainer().button("Apply").should("be.visible");
         rightSidebar().within(() => {
-          cy.findByLabelText("Auto-apply filters").click();
+          cy.findByText(filterToggleLabel).click();
           cy.wait("@updateDashboard");
-          cy.findByLabelText("Auto-apply filters").should("be.checked");
+          cy.findByLabelText(filterToggleLabel).should("be.checked");
         });
         filterWidget().findByText("Widget").should("be.visible");
         getDashboardCard().findByText("Rows 1-4 of 54").should("be.visible");
@@ -147,9 +149,9 @@ describe(
           cy.button("Update filter").click();
         });
         rightSidebar().within(() => {
-          cy.findByLabelText("Auto-apply filters").click();
+          cy.findByText(filterToggleLabel).click();
           cy.wait("@updateDashboard");
-          cy.findByLabelText("Auto-apply filters").should("not.be.checked");
+          cy.findByLabelText(filterToggleLabel).should("not.be.checked");
         });
         filterWidget().findByText("2 selections").should("be.visible");
         cy.get("@cardQuery.all").should("have.length", 5);
@@ -230,9 +232,10 @@ describe(
           "parameter with default value should still be applied after turning auto-apply filter off",
         );
         rightSidebar().within(() => {
-          cy.findByLabelText("Auto-apply filters").should("be.checked").click();
+          cy.findByLabelText(filterToggleLabel).should("be.checked");
+          cy.findByText(filterToggleLabel).click();
           cy.wait("@updateDashboard");
-          cy.findByLabelText("Auto-apply filters").should("not.be.checked");
+          cy.findByLabelText(filterToggleLabel).should("not.be.checked");
         });
 
         getDashboardCard().findByText("Rows 1-4 of 53").should("be.visible");
@@ -252,11 +255,10 @@ describe(
           "should not use the default parameter after turning auto-apply filter on again since the parameter was manually updated",
         );
         rightSidebar().within(() => {
-          cy.findByLabelText("Auto-apply filters")
-            .should("not.be.checked")
-            .click();
+          cy.findByLabelText(filterToggleLabel).should("not.be.checked");
+          cy.findAllByText(filterToggleLabel).click();
           cy.wait("@updateDashboard");
-          cy.findByLabelText("Auto-apply filters").should("be.checked");
+          cy.findByLabelText(filterToggleLabel).should("be.checked");
         });
 
         getDashboardCard().findByText("Rows 1-4 of 200").should("be.visible");
@@ -276,7 +278,7 @@ describe(
 
         toggleDashboardInfoSidebar();
         rightSidebar()
-          .findByLabelText("Auto-apply filters")
+          .findByLabelText(filterToggleLabel)
           .should("not.be.checked");
         // Gadget
         const filterDefaultValue = FILTER_WITH_DEFAULT_VALUE.default[0];
@@ -311,7 +313,7 @@ describe(
 
         toggleDashboardInfoSidebar();
         rightSidebar()
-          .findByLabelText("Auto-apply filters")
+          .findByLabelText(filterToggleLabel)
           .should("not.be.checked");
         filterWidget().findByText("Gadget").should("be.visible");
         getDashboardCard().findByText("Rows 1-4 of 53").should("be.visible");
@@ -389,9 +391,7 @@ describe(
         cy.wait("@cardQuery");
 
         toggleDashboardInfoSidebar();
-        rightSidebar()
-          .findByLabelText("Auto-apply filters")
-          .should("be.disabled");
+        rightSidebar().findByLabelText(filterToggleLabel).should("be.disabled");
       });
 
       it("should not display a toast even when a dashboard takes longer than 15s to load", () => {
@@ -553,7 +553,7 @@ describe(
 
           toggleDashboardInfoSidebar();
           rightSidebar()
-            .findByLabelText("Auto-apply filters")
+            .findByLabelText(filterToggleLabel)
             .should("not.be.checked");
           filterWidget().findByText("Gadget").should("be.visible");
 
@@ -627,9 +627,9 @@ describeWithSnowplow("scenarios > dashboards > filters > auto apply", () => {
       expectGoodSnowplowEvents(
         NUMBERS_OF_GOOD_SNOWPLOW_EVENTS_BEFORE_DISABLING_AUTO_APPLY_FILTERS,
       );
-      cy.findByLabelText("Auto-apply filters").click();
+      cy.findByText(filterToggleLabel).click();
       cy.wait("@updateDashboard");
-      cy.findByLabelText("Auto-apply filters").should("not.be.checked");
+      cy.findByLabelText(filterToggleLabel).should("not.be.checked");
       expectGoodSnowplowEvents(
         NUMBERS_OF_GOOD_SNOWPLOW_EVENTS_BEFORE_DISABLING_AUTO_APPLY_FILTERS + 1,
       );
@@ -646,9 +646,9 @@ describeWithSnowplow("scenarios > dashboards > filters > auto apply", () => {
       expectGoodSnowplowEvents(
         NUMBERS_OF_GOOD_SNOWPLOW_EVENTS_BEFORE_DISABLING_AUTO_APPLY_FILTERS,
       );
-      cy.findByLabelText("Auto-apply filters").click();
+      cy.findByText(filterToggleLabel).click();
       cy.wait("@updateDashboard");
-      cy.findByLabelText("Auto-apply filters").should("be.checked");
+      cy.findByLabelText(filterToggleLabel).should("be.checked");
       expectGoodSnowplowEvents(
         NUMBERS_OF_GOOD_SNOWPLOW_EVENTS_BEFORE_DISABLING_AUTO_APPLY_FILTERS,
       );

e2e/test/scenarios/dashboard/reproductions/16559-show-recent-dashboard-revision.cy.spec.js

@@ -6,6 +6,7 @@ import {
   popover,
   restore,
   sidebar,
+  rightSidebar,
   toggleDashboardInfoSidebar,
   visitDashboard,
 } from "e2e/support/helpers";
@@ -70,7 +71,7 @@ describe("issue 16559", () => {
       .should("be.visible");
 
     cy.log("Toggle auto-apply filters");
-    cy.findByLabelText("Auto-apply filters").click();
+    rightSidebar().findByText("Auto-apply filters").click();
     cy.findByTestId("dashboard-history-list")
       .findAllByRole("listitem")
       .eq(0)

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

@@ -11,6 +11,7 @@ export interface ToggleProps
   onChange?: (value: boolean) => void;
 }
 
+/** @deprecated use metabase/ui Switch instead */
 const Toggle = forwardRef(function Toggle(
   { className, value, small, color, onChange, ...rest }: ToggleProps,
   ref: Ref<HTMLInputElement>,

frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.tsx

@@ -4,6 +4,7 @@ import { t } from "ttag";
 import { PLUGIN_CACHING } from "metabase/plugins";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import MetabaseSettings from "metabase/lib/settings";
+import { Switch } from "metabase/ui";
 
 import { Timeline } from "metabase/common/components/Timeline";
 import EditableText from "metabase/core/components/EditableText";
@@ -17,8 +18,6 @@ import {
   toggleAutoApplyFilters,
 } from "metabase/dashboard/actions";
 
-import Toggle from "metabase/core/components/Toggle";
-import FormField from "metabase/core/components/FormField";
 import { useUniqueId } from "metabase/hooks/use-unique-id";
 import { getTimelineEvents } from "metabase/common/components/Timeline/utils";
 import { useRevisionListQuery } from "metabase/common/hooks/use-revision-list-query";
@@ -93,18 +92,16 @@ export function DashboardInfoSidebar({
       </ContentSection>
 
       <ContentSection>
-        <FormField
-          title={t`Auto-apply filters`}
-          orientation="horizontal"
-          htmlFor={autoApplyFilterToggleId}
-        >
-          <Toggle
-            disabled={!canWrite}
-            id={autoApplyFilterToggleId}
-            value={dashboard.auto_apply_filters}
-            onChange={handleToggleAutoApplyFilters}
-          />
-        </FormField>
+        <Switch
+          disabled={!canWrite}
+          label={t`Auto-apply filters`}
+          labelPosition="left"
+          variant="stretch"
+          size="sm"
+          id={autoApplyFilterToggleId}
+          checked={dashboard.auto_apply_filters}
+          onChange={e => handleToggleAutoApplyFilters(e.target.checked)}
+        />
       </ContentSection>
       {showCaching && (
         <ContentSection>

frontend/src/metabase/ui/components/inputs/Switch/Switch.stories.mdx

@@ -15,6 +15,10 @@ export const argTypes = {
     control: { type: "inline-radio" },
     options: ["left", "right"],
   },
+  variant: {
+    control: { type: "inline-radio" },
+    options: ["default", "stretch"],
+  },
   label: {
     control: { type: "text" },
   },

frontend/src/metabase/ui/components/inputs/Switch/Switch.styled.tsx

@@ -116,5 +116,13 @@ export const getSwitchOverrides = (): MantineThemeOverride["components"] => ({
         },
       };
     },
+    variants: {
+      stretch: () => ({
+        body: {
+          display: "flex",
+          justifyContent: "space-between",
+        },
+      }),
+    },
   },
 });