FE: Disable invalid values source options if parameter has linked filters (#34531)

frontend/src/metabase/parameters/components/ValuesSourceSettings/ValuesSourceSettings.tsx

@@ -2,6 +2,8 @@ import { useCallback, useMemo, useState } from "react";
 import { t } from "ttag";
 import Radio from "metabase/core/components/Radio/Radio";
 import Modal from "metabase/components/Modal";
+import Tooltip from "metabase/core/components/Tooltip";
+import { Button } from "metabase/ui";
 import type {
   Parameter,
   ValuesQueryType,
@@ -10,11 +12,7 @@ import type {
 } from "metabase-types/api";
 import { getQueryType } from "metabase-lib/parameters/utils/parameter-source";
 import ValuesSourceModal from "../ValuesSourceModal";
-import {
-  RadioLabelButton,
-  RadioLabelRoot,
-  RadioLabelTitle,
-} from "./ValuesSourceSettings.styled";
+import { RadioLabelRoot, RadioLabelTitle } from "./ValuesSourceSettings.styled";
 
 export interface ValuesSourceSettingsProps {
   parameter: Parameter;
@@ -34,8 +32,13 @@ const ValuesSourceSettings = ({
   const [isModalOpened, setIsModalOpened] = useState(false);
 
   const radioOptions = useMemo(() => {
-    return getRadioOptions(queryType, () => setIsModalOpened(true));
-  }, [queryType]);
+    return getRadioOptions({
+      queryType: queryType,
+      onEditClick: () => setIsModalOpened(true),
+      // linked filters only work with connected field sources (metabase#33892)
+      isEditDisabled: hasLinkedFilters(parameter),
+    });
+  }, [queryType, parameter]);
 
   const handleModalClose = useCallback(() => {
     setIsModalOpened(false);
@@ -62,31 +65,59 @@ const ValuesSourceSettings = ({
   );
 };
 
+function hasLinkedFilters({ filteringParameters }: Parameter) {
+  return filteringParameters != null && filteringParameters.length > 0;
+}
+
 interface RadioLabelProps {
   title: string;
   isSelected?: boolean;
   onEditClick?: () => void;
+  isEditDisabled?: boolean;
 }
 
 const RadioLabel = ({
   title,
   isSelected,
   onEditClick,
+  isEditDisabled = false,
 }: RadioLabelProps): JSX.Element => {
   return (
     <RadioLabelRoot>
       <RadioLabelTitle>{title}</RadioLabelTitle>
       {isSelected && (
-        <RadioLabelButton onClick={onEditClick}>{t`Edit`}</RadioLabelButton>
+        <Tooltip
+          tooltip={t`You can’t customize selectable values for this filter because it is linked to another one.`}
+          placement="top"
+          isEnabled={isEditDisabled}
+        >
+          {/* This div is needed to make the tooltip work when the button is disabled */}
+          <div data-testid="values-source-settings-edit-btn">
+            <Button
+              onClick={onEditClick}
+              disabled={isEditDisabled}
+              variant="subtle"
+              p={0}
+              compact={true}
+            >
+              {t`Edit`}
+            </Button>
+          </div>
+        </Tooltip>
       )}
     </RadioLabelRoot>
   );
 };
 
-const getRadioOptions = (
-  queryType: ValuesQueryType,
-  onEditClick: () => void,
-) => {
+const getRadioOptions = ({
+  queryType,
+  onEditClick,
+  isEditDisabled,
+}: {
+  queryType: ValuesQueryType;
+  onEditClick: () => void;
+  isEditDisabled: boolean;
+}) => {
   return [
     {
       name: (
@@ -94,6 +125,7 @@ const getRadioOptions = (
           title={t`Dropdown list`}
           isSelected={queryType === "list"}
           onEditClick={onEditClick}
+          isEditDisabled={isEditDisabled}
         />
       ),
       value: "list",
@@ -104,6 +136,7 @@ const getRadioOptions = (
           title={t`Search box`}
           isSelected={queryType === "search"}
           onEditClick={onEditClick}
+          isEditDisabled={isEditDisabled}
         />
       ),
       value: "search",

frontend/src/metabase/parameters/components/ValuesSourceSettings/ValuesSourceSettings.unit.spec.tsx

@@ -48,4 +48,46 @@ describe("ValuesSourceSettings", () => {
       values: ["A"],
     });
   });
+
+  it("editing the values source should be disabled when the filter has linked filters", () => {
+    setup({
+      parameter: createMockParameter({
+        filteringParameters: ["2"],
+      }),
+    });
+
+    userEvent.click(screen.getByRole("radio", { name: "Dropdown list Edit" }));
+    expect(screen.getByRole("button", { name: "Edit" })).toBeDisabled();
+    userEvent.click(screen.getByRole("radio", { name: "Search box" }));
+    expect(screen.getByRole("button", { name: "Edit" })).toBeDisabled();
+
+    // hovering over the button shows the tooltip"
+    userEvent.hover(screen.getByTestId("values-source-settings-edit-btn"));
+    expect(
+      screen.getByText(
+        "You can’t customize selectable values for this filter because it is linked to another one.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("Editing the values source should be enabled when the filter has no linked filters", () => {
+    setup({
+      parameter: createMockParameter({
+        filteringParameters: [],
+      }),
+    });
+
+    userEvent.click(screen.getByRole("radio", { name: "Dropdown list Edit" }));
+    expect(screen.getByRole("button", { name: "Edit" })).toBeEnabled();
+    userEvent.click(screen.getByRole("radio", { name: "Search box" }));
+    expect(screen.getByRole("button", { name: "Edit" })).toBeEnabled();
+
+    // hovering over the button doesn't show the tooltip
+    userEvent.hover(screen.getByTestId("values-source-settings-edit-btn"));
+    expect(
+      screen.queryByText(
+        "You can’t customize selectable values for this filter because it is linked to another one.",
+      ),
+    ).not.toBeInTheDocument();
+  });
 });