From d8a54827eebf1ab2bc8155833ff695a89e655134 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Tue, 25 Jun 2024 15:26:20 +0300
Subject: [PATCH] Split content from `FilterModal` into `FilterContent`
(#44534)
---
.../components/FilterContent/FilterBody.tsx | 43 ++++++++++++
.../FilterContent/FilterContent.tsx | 9 +++
.../FilterEmptyState.tsx | 0
.../components/FilterContent/FilterFooter.tsx | 36 ++++++++++
.../components/FilterContent/FilterHeader.tsx | 10 +++
.../components/FilterContent/index.ts | 1 +
.../components/FilterModal/FilterModal.tsx | 65 +++++++------------
.../components/FilterModal/utils/index.ts | 3 +
8 files changed, 126 insertions(+), 41 deletions(-)
create mode 100644 frontend/src/metabase/querying/components/FilterContent/FilterBody.tsx
create mode 100644 frontend/src/metabase/querying/components/FilterContent/FilterContent.tsx
rename frontend/src/metabase/querying/components/{FilterModal => FilterContent}/FilterEmptyState.tsx (100%)
create mode 100644 frontend/src/metabase/querying/components/FilterContent/FilterFooter.tsx
create mode 100644 frontend/src/metabase/querying/components/FilterContent/FilterHeader.tsx
create mode 100644 frontend/src/metabase/querying/components/FilterModal/utils/index.ts
diff --git a/frontend/src/metabase/querying/components/FilterContent/FilterBody.tsx b/frontend/src/metabase/querying/components/FilterContent/FilterBody.tsx
new file mode 100644
index 00000000000..52262fc3ff3
--- /dev/null
+++ b/frontend/src/metabase/querying/components/FilterContent/FilterBody.tsx
@@ -0,0 +1,43 @@
+import type * as Lib from "metabase-lib";
+
+import { FilterEmptyState } from "./FilterEmptyState";
+import { TabContent } from "./TabContent";
+import type { GroupItem } from "./types";
+
+type FilterBodyProps = {
+ groupItems: GroupItem[];
+ query: Lib.Query;
+ tab: string | null;
+ version: number;
+ searching: boolean;
+ onChange: (newQuery: Lib.Query) => void;
+ onInput: () => void;
+ onTabChange: (
+ value: ((prevState: string | null) => string | null) | string | null,
+ ) => void;
+};
+
+export const FilterBody = ({
+ groupItems,
+ onChange,
+ onInput,
+ onTabChange,
+ query,
+ searching,
+ tab,
+ version,
+}: FilterBodyProps) =>
+ groupItems.length > 0 ? (
+ <TabContent
+ query={query}
+ groupItems={groupItems}
+ tab={tab}
+ version={version}
+ isSearching={searching}
+ onChange={onChange}
+ onInput={onInput}
+ onTabChange={onTabChange}
+ />
+ ) : (
+ <FilterEmptyState />
+ );
diff --git a/frontend/src/metabase/querying/components/FilterContent/FilterContent.tsx b/frontend/src/metabase/querying/components/FilterContent/FilterContent.tsx
new file mode 100644
index 00000000000..6279a26ee21
--- /dev/null
+++ b/frontend/src/metabase/querying/components/FilterContent/FilterContent.tsx
@@ -0,0 +1,9 @@
+import { FilterBody } from "./FilterBody";
+import { FilterFooter } from "./FilterFooter";
+import { FilterHeader } from "./FilterHeader";
+
+export const FilterContent = {
+ Header: FilterHeader,
+ Body: FilterBody,
+ Footer: FilterFooter,
+};
diff --git a/frontend/src/metabase/querying/components/FilterModal/FilterEmptyState.tsx b/frontend/src/metabase/querying/components/FilterContent/FilterEmptyState.tsx
similarity index 100%
rename from frontend/src/metabase/querying/components/FilterModal/FilterEmptyState.tsx
rename to frontend/src/metabase/querying/components/FilterContent/FilterEmptyState.tsx
diff --git a/frontend/src/metabase/querying/components/FilterContent/FilterFooter.tsx b/frontend/src/metabase/querying/components/FilterContent/FilterFooter.tsx
new file mode 100644
index 00000000000..fe9152cb970
--- /dev/null
+++ b/frontend/src/metabase/querying/components/FilterContent/FilterFooter.tsx
@@ -0,0 +1,36 @@
+import { t } from "ttag";
+
+import { Button } from "metabase/ui";
+
+type FilterFooterProps = {
+ canRemoveFilters: boolean;
+ onClearFilters: () => void;
+ isChanged: boolean;
+ onApplyFilters: () => void;
+};
+
+export const FilterFooter = ({
+ canRemoveFilters,
+ isChanged,
+ onApplyFilters,
+ onClearFilters,
+}: FilterFooterProps) => (
+ <>
+ <Button
+ variant="subtle"
+ color="text-medium"
+ disabled={!canRemoveFilters}
+ onClick={onClearFilters}
+ >
+ {t`Clear all filters`}
+ </Button>
+ <Button
+ variant="filled"
+ disabled={!isChanged}
+ data-testid="apply-filters"
+ onClick={onApplyFilters}
+ >
+ {t`Apply filters`}
+ </Button>
+ </>
+);
diff --git a/frontend/src/metabase/querying/components/FilterContent/FilterHeader.tsx b/frontend/src/metabase/querying/components/FilterContent/FilterHeader.tsx
new file mode 100644
index 00000000000..8f4d6d4881a
--- /dev/null
+++ b/frontend/src/metabase/querying/components/FilterContent/FilterHeader.tsx
@@ -0,0 +1,10 @@
+import { FilterSearchInput } from "./FilterSearchInput";
+
+type FilterHeaderProps = {
+ value: string;
+ onChange: (searchText: string) => void;
+};
+
+export const FilterHeader = ({ value, onChange }: FilterHeaderProps) => {
+ return <FilterSearchInput searchText={value} onChange={onChange} />;
+};
diff --git a/frontend/src/metabase/querying/components/FilterContent/index.ts b/frontend/src/metabase/querying/components/FilterContent/index.ts
index 1fb69f349bc..adde954727e 100644
--- a/frontend/src/metabase/querying/components/FilterContent/index.ts
+++ b/frontend/src/metabase/querying/components/FilterContent/index.ts
@@ -1,3 +1,4 @@
export * from "./TabContent";
export * from "./FilterSearchInput";
export * from "./types";
+export * from "./FilterContent";
diff --git a/frontend/src/metabase/querying/components/FilterModal/FilterModal.tsx b/frontend/src/metabase/querying/components/FilterModal/FilterModal.tsx
index 645606fb07c..cbc31ff4247 100644
--- a/frontend/src/metabase/querying/components/FilterModal/FilterModal.tsx
+++ b/frontend/src/metabase/querying/components/FilterModal/FilterModal.tsx
@@ -1,14 +1,9 @@
import { useMemo, useState } from "react";
-import { t } from "ttag";
-import {
- FilterSearchInput,
- TabContent,
-} from "metabase/querying/components/FilterContent";
-import { Button, Modal } from "metabase/ui";
+import { FilterContent } from "metabase/querying/components/FilterContent";
+import { Modal } from "metabase/ui";
import * as Lib from "metabase-lib";
-import { FilterEmptyState } from "./FilterEmptyState";
import { ModalBody, ModalFooter, ModalHeader } from "./FilterModal.styled";
import { SEARCH_KEY } from "./constants";
import {
@@ -16,9 +11,11 @@ import {
getGroupItems,
hasFilters,
removeFilters,
-} from "./utils/filters";
-import { getModalTitle, getModalWidth } from "./utils/modal";
-import { isSearchActive, searchGroupItems } from "./utils/search";
+ getModalTitle,
+ getModalWidth,
+ isSearchActive,
+ searchGroupItems,
+} from "./utils";
export interface FilterModalProps {
query: Lib.Query;
@@ -80,42 +77,28 @@ export function FilterModal({
<Modal.Content>
<ModalHeader p="lg">
<Modal.Title>{getModalTitle(groupItems)}</Modal.Title>
- <FilterSearchInput searchText={searchText} onChange={handleSearch} />
+ <FilterContent.Header value={searchText} onChange={handleSearch} />
<Modal.CloseButton />
</ModalHeader>
<ModalBody p={0}>
- {visibleItems.length > 0 ? (
- <TabContent
- query={query}
- groupItems={visibleItems}
- tab={tab}
- version={version}
- isSearching={isSearching}
- onChange={handleChange}
- onInput={handleInput}
- onTabChange={setTab}
- />
- ) : (
- <FilterEmptyState />
- )}
+ <FilterContent.Body
+ groupItems={visibleItems}
+ query={query}
+ tab={tab}
+ version={version}
+ searching={isSearching}
+ onChange={handleChange}
+ onInput={handleInput}
+ onTabChange={setTab}
+ />
</ModalBody>
<ModalFooter p="md" direction="row" justify="space-between">
- <Button
- variant="subtle"
- color="text-medium"
- disabled={!canRemoveFilters}
- onClick={handleReset}
- >
- {t`Clear all filters`}
- </Button>
- <Button
- variant="filled"
- disabled={!isChanged}
- data-testid="apply-filters"
- onClick={handleSubmit}
- >
- {t`Apply filters`}
- </Button>
+ <FilterContent.Footer
+ canRemoveFilters={canRemoveFilters}
+ onClearFilters={handleReset}
+ isChanged={isChanged}
+ onApplyFilters={handleSubmit}
+ />
</ModalFooter>
</Modal.Content>
</Modal.Root>
diff --git a/frontend/src/metabase/querying/components/FilterModal/utils/index.ts b/frontend/src/metabase/querying/components/FilterModal/utils/index.ts
new file mode 100644
index 00000000000..4f439aa66f5
--- /dev/null
+++ b/frontend/src/metabase/querying/components/FilterModal/utils/index.ts
@@ -0,0 +1,3 @@
+export * from "./filters";
+export * from "./modal";
+export * from "./search";
--
GitLab