Use Mantine for DataSelector table picker (#40105) (#40171)

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorTablePicker/DataSelectorTablePicker.styled.tsx

-import styled from "@emotion/styled";
-
-import { color } from "metabase/lib/colors";
-import { space } from "metabase/styled-components/theme";
-
-export const DataSelectorTablePickerContainer = styled.div`
-  overflow-y: auto;
-  width: 300px;
-`;
-
-export const DataSelectorTablePickerHeaderContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-type Props = {
-  onClick?: () => void;
-};
-
-export const DataSelectorTablePickerHeaderClickable = styled.span<Props>`
-  align-items: center;
-  display: flex;
-
-  cursor: pointer;
-`;
-
-export const DataSelectorTablePickerHeaderDatabaseName = styled.span`
-  flex-wrap: wrap;
-  margin-inline-start: ${space(1)};
-`;
-
-export const DataSelectorTablePickerHeaderSchemaName = styled.span`
-  color: ${color("text-medium")};
-  flex-wrap: wrap;
-`;
-
-export const LinkToDocsContainer = styled.div`
-  background-color: ${color("bg-light")};
-  border-top: 1px solid ${color("border")};
-  padding: ${space(2)};
-  text-align: center;
-`;
-
-export const NoTablesFound = styled.div`
-  padding: ${space(4)};
-  text-align: center;
-`;
-
-export const DataSelectorHeaderDivider = styled.span`
-  color: ${color("text-medium")};
-  display: inline-block;
-  margin-inline: ${space(1)};
-`;

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorTablePicker/DataSelectorTablePicker.tsx

@@ -2,10 +2,11 @@ import { t } from "ttag";
 
 import AccordionList from "metabase/core/components/AccordionList";
 import ExternalLink from "metabase/core/components/ExternalLink";
+import { color } from "metabase/lib/colors";
 import MetabaseSettings from "metabase/lib/settings";
 import { isSyncCompleted } from "metabase/lib/syncing";
 import { isNotNull } from "metabase/lib/types";
-import { Icon } from "metabase/ui";
+import { Box, Icon, Flex } from "metabase/ui";
 import type Database from "metabase-lib/metadata/Database";
 import type Schema from "metabase-lib/metadata/Schema";
 import type Table from "metabase-lib/metadata/Table";
@@ -13,17 +14,6 @@ import type Table from "metabase-lib/metadata/Table";
 import { DataSelectorSection as Section } from "../DataSelector.styled";
 import DataSelectorSectionHeader from "../DataSelectorSectionHeader";
 
-import {
-  DataSelectorTablePickerContainer as Container,
-  DataSelectorTablePickerHeaderContainer as HeaderContainer,
-  DataSelectorTablePickerHeaderClickable as HeaderClickable,
-  DataSelectorTablePickerHeaderDatabaseName as HeaderDatabaseName,
-  DataSelectorTablePickerHeaderSchemaName as HeaderSchemaName,
-  LinkToDocsContainer,
-  NoTablesFound,
-  DataSelectorHeaderDivider,
-} from "./DataSelectorTablePicker.styled";
-
 type DataSelectorTablePickerProps = {
   hasFiltering?: boolean;
   hasInitialFocus?: boolean;
@@ -107,7 +97,7 @@ const DataSelectorTablePicker = ({
     const isSearchable = hasFiltering && tables.length >= minTablesToShowSearch;
 
     return (
-      <Container>
+      <Box w="18.75rem" style={{ overflowY: "auto" }}>
         <AccordionList
           id="TablePicker"
           key="tablePicker"
@@ -128,20 +118,27 @@ const DataSelectorTablePicker = ({
         {isSavedQuestionList && (
           <LinkToDocsOnReferencingSavedQuestionsInQueries />
         )}
-      </Container>
+      </Box>
     );
   } else {
     return (
       <Section>
         <DataSelectorSectionHeader header={header} />
-        <NoTablesFound>{t`No tables found in this database.`}</NoTablesFound>
+        <Box p="4rem" ta="center">{t`No tables found in this database.`}</Box>
       </Section>
     );
   }
 };
 
 const LinkToDocsOnReferencingSavedQuestionsInQueries = () => (
-  <LinkToDocsContainer>
+  <Box
+    p="md"
+    ta="center"
+    bg={color("bg-light")}
+    style={{
+      borderTop: `1px solid ${color("border")}`,
+    }}
+  >
     {t`Is a question missing?`}
     <ExternalLink
       // eslint-disable-next-line no-unconditional-metabase-links-render -- It's hard to tell if this is still used in the app. Please see https://metaboat.slack.com/archives/C505ZNNH4/p1703243785315819
@@ -153,7 +150,7 @@ const LinkToDocsOnReferencingSavedQuestionsInQueries = () => (
     >
       {t`Learn more about nested queries`}
     </ExternalLink>
-  </LinkToDocsContainer>
+  </Box>
 );
 
 const Header = ({
@@ -162,23 +159,25 @@ const Header = ({
   selectedDatabase,
   selectedSchema,
 }: HeaderProps) => (
-  <HeaderContainer>
-    <HeaderClickable onClick={onBack}>
+  <Flex align="center" wrap="wrap">
+    <Flex align="center" style={{ cursor: "pointer" }} onClick={onBack}>
       {onBack && <Icon name="chevronleft" size={18} />}
-      <HeaderDatabaseName data-testid="source-database">
+      <Box component="span" ml="sm" data-testid="source-database">
         {selectedDatabase.name}
-      </HeaderDatabaseName>
-    </HeaderClickable>
+      </Box>
+    </Flex>
 
     {selectedSchema?.name && schemas.length > 1 && (
       <>
-        <DataSelectorHeaderDivider>/</DataSelectorHeaderDivider>
-        <HeaderSchemaName data-testid="source-schema">
+        <Box component="span" mx="sm" c="text-medium">
+          /
+        </Box>
+        <Box component="span" data-testid="source-schema" c="text-medium">
           {selectedSchema.displayName()}
-        </HeaderSchemaName>
+        </Box>
       </>
     )}
-  </HeaderContainer>
+  </Flex>
 );
 
 // eslint-disable-next-line import/no-default-export -- deprecated usage