Split content from `FilterModal` into `FilterContent` (#44534)

frontend/src/metabase/querying/components/FilterContent/FilterBody.tsx

+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 />
+  );

frontend/src/metabase/querying/components/FilterContent/FilterContent.tsx

+import { FilterBody } from "./FilterBody";
+import { FilterFooter } from "./FilterFooter";
+import { FilterHeader } from "./FilterHeader";
+
+export const FilterContent = {
+  Header: FilterHeader,
+  Body: FilterBody,
+  Footer: FilterFooter,
+};

frontend/src/metabase/querying/components/FilterContent/FilterFooter.tsx

+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>
+  </>
+);

frontend/src/metabase/querying/components/FilterContent/FilterHeader.tsx

+import { FilterSearchInput } from "./FilterSearchInput";
+
+type FilterHeaderProps = {
+  value: string;
+  onChange: (searchText: string) => void;
+};
+
+export const FilterHeader = ({ value, onChange }: FilterHeaderProps) => {
+  return <FilterSearchInput searchText={value} onChange={onChange} />;
+};

frontend/src/metabase/querying/components/FilterContent/index.ts

 export * from "./TabContent";
 export * from "./FilterSearchInput";
 export * from "./types";
+export * from "./FilterContent";

frontend/src/metabase/querying/components/FilterModal/FilterModal.tsx

 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>

frontend/src/metabase/querying/components/FilterModal/utils/index.ts

+export * from "./filters";
+export * from "./modal";
+export * from "./search";