From 215c0bc197236d8789db815b010c4c813bec95fc Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Tue, 2 Apr 2024 13:10:46 +0300
Subject: [PATCH] Convert BrowserCrumbs to TS (#40847)

---
 .../browse/components/SchemaBrowser.jsx         |  2 +-
 .../components/TableBrowser/TableBrowser.jsx    |  2 +-
 .../{BrowserCrumbs.jsx => BrowserCrumbs.tsx}    | 17 +++++++++++------
 .../metabase/components/BrowserCrumbs/index.jsx |  1 -
 .../metabase/components/BrowserCrumbs/index.tsx |  1 +
 .../metabase/containers/UserCollectionList.tsx  |  2 +-
 6 files changed, 15 insertions(+), 10 deletions(-)
 rename frontend/src/metabase/components/BrowserCrumbs/{BrowserCrumbs.jsx => BrowserCrumbs.tsx} (73%)
 delete mode 100644 frontend/src/metabase/components/BrowserCrumbs/index.jsx
 create mode 100644 frontend/src/metabase/components/BrowserCrumbs/index.tsx

diff --git a/frontend/src/metabase/browse/components/SchemaBrowser.jsx b/frontend/src/metabase/browse/components/SchemaBrowser.jsx
index 7ce937668fd..0302a4b5f92 100644
--- a/frontend/src/metabase/browse/components/SchemaBrowser.jsx
+++ b/frontend/src/metabase/browse/components/SchemaBrowser.jsx
@@ -3,7 +3,7 @@ import cx from "classnames";
 import { t } from "ttag";
 
 import TableBrowser from "metabase/browse/containers/TableBrowser";
-import BrowserCrumbs from "metabase/components/BrowserCrumbs";
+import { BrowserCrumbs } from "metabase/components/BrowserCrumbs";
 import Card from "metabase/components/Card";
 import EntityItem from "metabase/components/EntityItem";
 import { Grid } from "metabase/components/Grid";
diff --git a/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx b/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx
index 5e49d16d503..08b68df2e69 100644
--- a/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx
+++ b/frontend/src/metabase/browse/components/TableBrowser/TableBrowser.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { Fragment } from "react";
 import { t } from "ttag";
 
-import BrowserCrumbs from "metabase/components/BrowserCrumbs";
+import { BrowserCrumbs } from "metabase/components/BrowserCrumbs";
 import EntityItem from "metabase/components/EntityItem";
 import Database from "metabase/entities/databases";
 import { color } from "metabase/lib/colors";
diff --git a/frontend/src/metabase/components/BrowserCrumbs/BrowserCrumbs.jsx b/frontend/src/metabase/components/BrowserCrumbs/BrowserCrumbs.tsx
similarity index 73%
rename from frontend/src/metabase/components/BrowserCrumbs/BrowserCrumbs.jsx
rename to frontend/src/metabase/components/BrowserCrumbs/BrowserCrumbs.tsx
index 3620976789c..15803a4ff6b 100644
--- a/frontend/src/metabase/components/BrowserCrumbs/BrowserCrumbs.jsx
+++ b/frontend/src/metabase/components/BrowserCrumbs/BrowserCrumbs.tsx
@@ -1,5 +1,5 @@
-/* eslint-disable react/prop-types */
 import cx from "classnames";
+import type { ReactNode } from "react";
 
 import CS from "metabase/css/core/index.css";
 
@@ -12,16 +12,23 @@ import {
 
 // TODO: merge with Breadcrumbs
 
-const Crumb = ({ children }) => (
+const Crumb = ({ children }: { children: ReactNode }) => (
   <h5
-    className={cx(CS.textUppercase, "text-medium")}
+    className={cx(CS.textUppercase, CS.textMedium)}
     style={{ fontWeight: 900 }}
   >
     {children}
   </h5>
 );
 
-const BrowserCrumbs = ({ crumbs }) => (
+type BrowserCrumbsType = {
+  crumbs: {
+    title: string | ReactNode;
+    to?: string;
+  }[];
+};
+
+export const BrowserCrumbs = ({ crumbs }: BrowserCrumbsType) => (
   <BrowserCrumbsRoot data-testid="browsercrumbs">
     {crumbs
       .filter(c => c)
@@ -41,5 +48,3 @@ const BrowserCrumbs = ({ crumbs }) => (
       ))}
   </BrowserCrumbsRoot>
 );
-
-export default BrowserCrumbs;
diff --git a/frontend/src/metabase/components/BrowserCrumbs/index.jsx b/frontend/src/metabase/components/BrowserCrumbs/index.jsx
deleted file mode 100644
index 7f3a845944b..00000000000
--- a/frontend/src/metabase/components/BrowserCrumbs/index.jsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./BrowserCrumbs";
diff --git a/frontend/src/metabase/components/BrowserCrumbs/index.tsx b/frontend/src/metabase/components/BrowserCrumbs/index.tsx
new file mode 100644
index 00000000000..a79716629a7
--- /dev/null
+++ b/frontend/src/metabase/components/BrowserCrumbs/index.tsx
@@ -0,0 +1 @@
+export * from "./BrowserCrumbs";
diff --git a/frontend/src/metabase/containers/UserCollectionList.tsx b/frontend/src/metabase/containers/UserCollectionList.tsx
index 9d7ac3c3659..f202d50fe70 100644
--- a/frontend/src/metabase/containers/UserCollectionList.tsx
+++ b/frontend/src/metabase/containers/UserCollectionList.tsx
@@ -1,5 +1,5 @@
 import { useUserListQuery } from "metabase/common/hooks";
-import BrowserCrumbs from "metabase/components/BrowserCrumbs";
+import { BrowserCrumbs } from "metabase/components/BrowserCrumbs";
 import Card from "metabase/components/Card";
 import { Grid } from "metabase/components/Grid";
 import PaginationControls from "metabase/components/PaginationControls";
-- 
GitLab