🪟🔧 Reactor Breadcrumbs component to use anchors (airbytehq#18764)

* refactor breadcrumbs to use actual links * PR comments on styles
drewrasm · Nov 2, 2022 · 23804cc · 23804cc
1 parent ffa42fa
commit 23804cc
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 54 deletions.
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,18 @@
+@use "scss/colors";
+
+.container {
+  font-weight: normal;
+  cursor: default;
+}
+
+.item {
+  display: inline-block;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.unlinked {
+  font-weight: bold;
+}
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx
@@ -1,49 +1,35 @@
 import React from "react";
-import styled from "styled-components";
 
-const BreadcrumbsContainer = styled.div`
-  font-weight: normal;
-  cursor: default;
-`;
+import { Link } from "components";
 
-const LastBreadcrumbsItem = styled.span`
-  font-weight: bold;
-`;
-
-const BreadcrumbsItem = styled.div`
-  display: inline-block;
-  cursor: pointer;
-  color: ${({ theme }) => theme.primaryColor};
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;
+import styles from "./Breadcrumbs.module.scss";
 
 export interface BreadcrumbsDataItem {
-  name: string | React.ReactNode;
-  onClick?: () => void;
+  label: string;
+  to?: string;
 }
 
 interface BreadcrumbsProps {
   data: BreadcrumbsDataItem[];
 }
 
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ data }) => {
-  const lastIndex = data.length - 1;
-
   return (
-    <BreadcrumbsContainer>
-      {data.map((item, key) =>
-        key === lastIndex ? (
-          <LastBreadcrumbsItem key={`breadcrumbs-item-${key}`}>{item.name}</LastBreadcrumbsItem>
-        ) : (
-          <span key={`breadcrumbs-item-${key}`}>
-            <BreadcrumbsItem onClick={item.onClick}>{item.name}</BreadcrumbsItem>
-            <span> / </span>
-          </span>
-        )
-      )}
-    </BreadcrumbsContainer>
+    <div className={styles.container}>
+      {data.map((item, index) => (
+        <span key={index}>
+          {item.to ? (
+            <Link to={item.to} $clear className={styles.item}>
+              {item.label}
+            </Link>
+          ) : (
+            <span className={styles.unlinked} key={index}>
+              {item.label}
+            </span>
+          )}
+          {index !== data.length - 1 && <span> / </span>}
+        </span>
+      ))}
+    </div>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx
@@ -10,22 +10,17 @@ export default {
 
 const Template: ComponentStory<typeof Breadcrumbs> = (args) => <Breadcrumbs {...args} />;
 
-const onClick = () => {
-  console.log("onClick");
-};
-
 const data: BreadcrumbsDataItem[] = [
   {
-    name: "Workspace",
-    onClick,
+    label: "Workspace",
+    to: "/workspace",
   },
   {
-    name: "Source",
-    onClick,
+    label: "Source",
+    to: "/workspace/source",
   },
   {
-    name: "Settings",
-    onClick,
+    label: "Settings",
   },
 ];
 

diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense, useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 import { Route, Routes, useNavigate, useParams } from "react-router-dom";
 
 import { LoadingPage } from "components";
@@ -29,6 +29,7 @@ const DestinationItemPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.DESTINATION_ITEM);
   const params = useParams() as { "*": StepsTypes | ""; id: string };
   const navigate = useNavigate();
+  const { formatMessage } = useIntl();
   const currentStep = useMemo<string>(() => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), [params]);
 
   const { sources } = useSourceList();
@@ -41,19 +42,17 @@ const DestinationItemPage: React.FC = () => {
 
   const { connections } = useConnectionList();
 
-  const onClickBack = () => navigate("..");
-
   const onSelectStep = (id: string) => {
     const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase();
     navigate(path);
   };
 
   const breadcrumbsData = [
     {
-      name: <FormattedMessage id="admin.destinations" />,
-      onClick: onClickBack,
+      label: formatMessage({ id: "admin.destinations" }),
+      to: "..",
     },
-    { name: destination.name },
+    { label: destination.name },
   ];
 
   const connectionsWithDestination = connections.filter(

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense, useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 import { Route, Routes, useNavigate, useParams } from "react-router-dom";
 
 import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
@@ -29,6 +29,7 @@ const SourceItemPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.SOURCE_ITEM);
   const params = useParams<{ "*": StepsTypes | "" | undefined; id: string }>();
   const navigate = useNavigate();
+  const { formatMessage } = useIntl();
   const currentStep = useMemo<StepsTypes | "" | undefined>(
     () => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]),
     [params]
@@ -45,10 +46,10 @@ const SourceItemPage: React.FC = () => {
 
   const breadcrumbsData = [
     {
-      name: <FormattedMessage id="sidebar.sources" />,
-      onClick: () => navigate(".."),
+      label: formatMessage({ id: "sidebar.sources" }),
+      to: "..",
     },
-    { name: source.name },
+    { label: source.name },
   ];
 
   const connectionsWithSource = connections.filter((connectionItem) => connectionItem.sourceId === source.sourceId);