From cf3643786f0dfa594a84f38272c888471e677489 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Wed, 12 Oct 2022 13:18:16 +0100
Subject: [PATCH] Hide ID filters in data app pages (#25873)
* Hide ID filters in data app pages
* Extend existing `getVisibleParameters` utility
* Use existing `getVisibleParameters` in Dashboard
---
.../dashboard/components/Dashboard/Dashboard.jsx | 13 ++++++++-----
frontend/src/metabase/parameters/types.ts | 4 +++-
frontend/src/metabase/parameters/utils/ui.ts | 6 ++++--
.../src/metabase/parameters/utils/ui.unit.spec.ts | 4 ++++
4 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx
index 26c92ce32c2..e6e3c6f59e0 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx
@@ -8,6 +8,7 @@ import { getMainElement } from "metabase/lib/dom";
import DashboardHeader from "metabase/dashboard/containers/DashboardHeader";
import SyncedParametersList from "metabase/parameters/components/SyncedParametersList/SyncedParametersList";
import { getValuePopulatedParameters } from "metabase/parameters/utils/parameter-values";
+import { getVisibleParameters } from "metabase/parameters/utils/ui";
import DashboardControls from "../../hoc/DashboardControls";
import { DashboardSidebars } from "../DashboardSidebars";
import DashboardGrid from "../DashboardGrid";
@@ -102,9 +103,10 @@ class Dashboard extends Component {
this.parametersAndCardsContainerRef = React.createRef();
}
- static getDerivedStateFromProps(props, state) {
- return props.parameters.length !== state.parametersListLength
- ? { parametersListLength: props.parameters.length }
+ static getDerivedStateFromProps({ parameters }, { parametersListLength }) {
+ const visibleParameters = getVisibleParameters(parameters);
+ return visibleParameters.length !== parametersListLength
+ ? { parametersListLength: visibleParameters.length }
: null;
}
@@ -231,6 +233,7 @@ class Dashboard extends Component {
const shouldRenderAsNightMode = isNightMode && isFullscreen;
const dashboardHasCards = dashboard => dashboard.ordered_cards.length > 0;
+ const visibleParameters = getVisibleParameters(parameters);
const parametersWidget = (
<SyncedParametersList
@@ -247,10 +250,10 @@ class Dashboard extends Component {
);
const shouldRenderParametersWidgetInViewMode =
- !isEditing && !isFullscreen && parameters.length > 0;
+ !isEditing && !isFullscreen && visibleParameters.length > 0;
const shouldRenderParametersWidgetInEditMode =
- isEditing && parameters.length > 0;
+ isEditing && visibleParameters.length > 0;
const cardsContainerShouldHaveMarginTop =
!shouldRenderParametersWidgetInViewMode &&
diff --git a/frontend/src/metabase/parameters/types.ts b/frontend/src/metabase/parameters/types.ts
index ea867b41325..e7789cac50e 100644
--- a/frontend/src/metabase/parameters/types.ts
+++ b/frontend/src/metabase/parameters/types.ts
@@ -10,7 +10,9 @@ export interface FieldFilterUiParameter extends ValuePopulatedParameter {
hasVariableTemplateTagTarget?: boolean;
}
-export type UiParameter = FieldFilterUiParameter | ValuePopulatedParameter;
+export type UiParameter = (FieldFilterUiParameter | ValuePopulatedParameter) & {
+ hidden?: boolean;
+};
export type ParameterWithTarget = Parameter & {
target: ParameterTarget;
diff --git a/frontend/src/metabase/parameters/utils/ui.ts b/frontend/src/metabase/parameters/utils/ui.ts
index 32154c7f8e2..20fb2cb9801 100644
--- a/frontend/src/metabase/parameters/utils/ui.ts
+++ b/frontend/src/metabase/parameters/utils/ui.ts
@@ -32,12 +32,14 @@ export function buildHiddenParametersSlugSet(
export function getVisibleParameters(
parameters: UiParameter[],
- hiddenParameterSlugs: string | undefined,
+ hiddenParameterSlugs?: string,
) {
const hiddenParametersSlugSet =
buildHiddenParametersSlugSet(hiddenParameterSlugs);
- return parameters.filter(p => !hiddenParametersSlugSet.has(p.slug));
+ return parameters.filter(
+ p => !hiddenParametersSlugSet.has(p.slug) && !p.hidden,
+ );
}
export function getParameterWidgetTitle(parameter: UiParameter) {
diff --git a/frontend/src/metabase/parameters/utils/ui.unit.spec.ts b/frontend/src/metabase/parameters/utils/ui.unit.spec.ts
index 0c7983f8934..9ade9c7ff81 100644
--- a/frontend/src/metabase/parameters/utils/ui.unit.spec.ts
+++ b/frontend/src/metabase/parameters/utils/ui.unit.spec.ts
@@ -54,6 +54,10 @@ describe("parameters/utils/ui", () => {
id: "4",
slug: "qux",
}),
+ createMockUiParameter({
+ id: "5",
+ hidden: true,
+ }),
];
const hiddenParameterSlugs = "bar,baz";
--
GitLab