From e5a0255909f57ea2a383c1d23fc3f7f97b2170a4 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Tue, 16 Apr 2024 11:01:15 +0300
Subject: [PATCH] Refactor and convert `DataSelector.module.css` to CSS modules
 (#41362)

---
 .../components/DataSelector/DataSelector.jsx  |  2 --
 .../DataSelector/DataSelector.module.css      |  4 ----
 .../QuestionDataSelector.tsx}                 | 19 +++++++++++++------
 .../view/QuestionDataSelector/index.ts        |  1 +
 .../View/NewQuestionView/NewQuestionView.tsx  |  3 +--
 5 files changed, 15 insertions(+), 14 deletions(-)
 delete mode 100644 frontend/src/metabase/query_builder/components/DataSelector/DataSelector.module.css
 rename frontend/src/metabase/query_builder/components/view/{QuestionDataSelector.jsx => QuestionDataSelector/QuestionDataSelector.tsx} (57%)
 create mode 100644 frontend/src/metabase/query_builder/components/view/QuestionDataSelector/index.ts

diff --git a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx
index 5fb7db827e8..98f42f8dacc 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.jsx
@@ -46,8 +46,6 @@ import {
 import { SearchResults, getSearchItemTableOrCardId } from "./data-search";
 import SavedEntityPicker from "./saved-entity-picker/SavedEntityPicker";
 
-import "./DataSelector.module.css";
-
 const MIN_SEARCH_LENGTH = 2;
 
 // chooses a data source bucket (datasets / raw data (tables) / saved questions)
diff --git a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.module.css b/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.module.css
deleted file mode 100644
index 7f6e04eb45a..00000000000
--- a/frontend/src/metabase/query_builder/components/DataSelector/DataSelector.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* HACK: DataPopover should be below the search box */
-:global(.DataPopoverContainer) {
-  z-index: 2;
-}
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionDataSelector.jsx b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/QuestionDataSelector.tsx
similarity index 57%
rename from frontend/src/metabase/query_builder/components/view/QuestionDataSelector.jsx
rename to frontend/src/metabase/query_builder/components/view/QuestionDataSelector/QuestionDataSelector.tsx
index 5f1293fb8a5..2bf4991e05c 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionDataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/QuestionDataSelector.tsx
@@ -1,13 +1,20 @@
-/* eslint-disable react/prop-types */
+import CS from "metabase/css/core/index.css";
+import type { updateQuestion as updateQuestionAction } from "metabase/query_builder/actions";
 import { DataSourceSelector } from "metabase/query_builder/components/DataSelector";
 import * as Lib from "metabase-lib";
+import type Question from "metabase-lib/v1/Question";
+import type { DatabaseId, TableId } from "metabase-types/api";
 
-export default function QuestionDataSelector({
+export const QuestionDataSelector = ({
   question,
   updateQuestion,
   triggerElement,
-}) {
-  const handleTableChange = (tableId, databaseId) => {
+}: {
+  question: Question;
+  updateQuestion: typeof updateQuestionAction;
+  triggerElement: JSX.Element;
+}) => {
+  const handleTableChange = (tableId: TableId, databaseId: DatabaseId) => {
     const metadata = question.metadata();
     const metadataProvider = Lib.metadataProvider(databaseId, metadata);
     const table = Lib.tableOrCardMetadata(metadataProvider, tableId);
@@ -17,7 +24,7 @@ export default function QuestionDataSelector({
 
   return (
     <DataSourceSelector
-      containerClassName="DataPopoverContainer"
+      containerClassName={CS.z2}
       hasTableSearch
       databaseQuery={{ saved: true }}
       setSourceTableFn={handleTableChange}
@@ -25,4 +32,4 @@ export default function QuestionDataSelector({
       isOpen
     />
   );
-}
+};
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/index.ts b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/index.ts
new file mode 100644
index 00000000000..72954fbe4de
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/QuestionDataSelector/index.ts
@@ -0,0 +1 @@
+export { QuestionDataSelector } from "./QuestionDataSelector";
diff --git a/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx b/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx
index 61a01883b39..31f68f691bb 100644
--- a/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx
+++ b/frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx
@@ -4,10 +4,9 @@ import { t } from "ttag";
 import Subhead from "metabase/components/type/Subhead";
 import CS from "metabase/css/core/index.css";
 import type { updateQuestion } from "metabase/query_builder/actions";
+import { QuestionDataSelector } from "metabase/query_builder/components/view/QuestionDataSelector";
 import type Question from "metabase-lib/v1/Question";
 
-import QuestionDataSelector from "../../QuestionDataSelector";
-
 type Props = {
   question: Question;
   updateQuestion: typeof updateQuestion;
-- 
GitLab