Limit linked filter to field filter parameters (#22657)

* add logic to limit which parameters are linkable

* Filter linked filters list to all field filter parameters

* use some destructuring

frontend/src/metabase/parameters/components/ParameterSidebar.jsx

@@ -6,6 +6,10 @@ import cx from "classnames";
 import { DashboardApi } from "metabase/services";
 import Fields from "metabase/entities/fields";
 import Tables from "metabase/entities/tables";
+import {
+  canUseLinkedFilters,
+  usableAsLinkedFilter,
+} from "metabase/parameters/utils/linked-filters";
 
 import Radio from "metabase/core/components/Radio";
 import Toggle from "metabase/core/components/Toggle";
@@ -15,9 +19,10 @@ import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import ParameterValueWidget from "metabase/parameters/components/ParameterValueWidget";
 import Sidebar from "metabase/dashboard/components/Sidebar";
 
-const tabs = [
+const LINKED_FILTER = "linked-filters";
+const TABS = [
   { value: "settings", name: t`Settings`, icon: "gear" },
-  { value: "linked-filters", name: t`Linked filters`, icon: "link" },
+  { value: LINKED_FILTER, name: t`Linked filters`, icon: "link" },
 ];
 class ParameterSidebar extends React.Component {
   state = { currentTab: "settings", originalParameter: null };
@@ -51,6 +56,11 @@ class ParameterSidebar extends React.Component {
       setFilteringParameters,
     } = this.props;
     const { currentTab } = this.state;
+
+    const tabs = canUseLinkedFilters(parameter)
+      ? TABS
+      : TABS.filter(({ value }) => value !== LINKED_FILTER);
+
     return (
       <Sidebar onClose={done} onCancel={this.handleCancel}>
         <div className="flex justify-evenly border-bottom">
@@ -163,10 +173,12 @@ class OtherParameterList extends React.Component {
       showAddParameterPopover,
     } = this.props;
     const { expandedParameterId, columnPairs } = this.state;
+    const usableParameters = otherParameters.filter(usableAsLinkedFilter);
+
     return (
       <div className="py3 px2">
         <h3>{t`Limit this filter's choices`}</h3>
-        {otherParameters.length === 0 ? (
+        {usableParameters.length === 0 ? (
           <div>
             <p className="text-medium">{t`If you have another dashboard filter, you can limit the choices that are listed for this filter based on the selection of the other one.`}</p>
             <p className="text-medium">{jt`So first, ${(
@@ -181,7 +193,7 @@ class OtherParameterList extends React.Component {
             <p className="text-medium">{jt`If you toggle on one of these dashboard filters, selecting a value for that filter will limit the available choices for ${(
               <span className="text-italic">this</span>
             )} filter.`}</p>
-            {otherParameters.map(({ id, name }) => (
+            {usableParameters.map(({ id, name }) => (
               <div className={"bg-light rounded mb2"} key={name}>
                 <div className="flex justify-between align-center p2">
                   <span

frontend/src/metabase/parameters/constants.js

@@ -147,3 +147,19 @@ export const LOCATION_OPTIONS = [
     name: t`Country`,
   },
 ];
+
+export const TYPE_SUPPORTS_LINKED_FILTERS = [
+  "string",
+  "category",
+  "id",
+  "location",
+];
+
+export const TYPE_USABLE_AS_LINKED_FILTER = [
+  "date",
+  "string",
+  "number",
+  "id",
+  "category",
+  "location",
+];

frontend/src/metabase/parameters/utils/linked-filters.js

+import {
+  TYPE_SUPPORTS_LINKED_FILTERS,
+  TYPE_USABLE_AS_LINKED_FILTER,
+} from "metabase/parameters/constants";
+import { getParameterType } from "metabase/parameters/utils/parameter-type";
+
+export function canUseLinkedFilters(parameter) {
+  const type = getParameterType(parameter);
+  return TYPE_SUPPORTS_LINKED_FILTERS.includes(type);
+}
+
+export function usableAsLinkedFilter(parameter) {
+  const type = getParameterType(parameter);
+  return TYPE_USABLE_AS_LINKED_FILTER.includes(type);
+}