From e0c466051469849e5ae95d0c639ba53730a0bf37 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 1 Nov 2022 11:05:40 +0100 Subject: [PATCH 1/2] refactor breadcrumbs to use actual links --- .../ui/Breadcrumbs/Breadcrumbs.module.scss | 21 +++++++ .../components/ui/Breadcrumbs/Breadcrumbs.tsx | 55 +++++++------------ .../ui/Breadcrumbs/index.stories.tsx | 15 ++--- .../DestinationItemPage.tsx | 11 ++-- .../pages/SourceItemPage/SourceItemPage.tsx | 9 +-- 5 files changed, 56 insertions(+), 55 deletions(-) create mode 100644 airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss new file mode 100644 index 000000000000..f576f5bbe370 --- /dev/null +++ b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss @@ -0,0 +1,21 @@ +@use "scss/colors"; + +.container { + font-weight: normal; + cursor: default; +} + +.item { + display: inline-block; + cursor: pointer; + color: colors.$blue-400; + text-decoration: none; + + &--unlinked { + font-weight: bold; + } + + &:hover { + opacity: 0.8; + } +} diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx index 87df194a700a..414ca1eb8a01 100644 --- a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx +++ b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx @@ -1,28 +1,11 @@ import React from "react"; -import styled from "styled-components"; +import { Link } from "react-router-dom"; -const BreadcrumbsContainer = styled.div` - font-weight: normal; - cursor: default; -`; - -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 { @@ -30,20 +13,22 @@ interface BreadcrumbsProps { } export const Breadcrumbs: React.FC = ({ data }) => { - const lastIndex = data.length - 1; - return ( - - {data.map((item, key) => - key === lastIndex ? ( - {item.name} - ) : ( - - {item.name} - / - - ) - )} - +
+ {data.map((item, index) => ( + + {item.to ? ( + + {item.label} + + ) : ( + + {item.label} + + )} + {index !== data.length - 1 && / } + + ))} +
); }; diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx index 96f93c2f62ef..645309ea5756 100644 --- 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 = (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 index a87d607d2f10..45840130ef22 100644 --- 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(() => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), [params]); const { sources } = useSourceList(); @@ -41,8 +42,6 @@ const DestinationItemPage: React.FC = () => { const { connections } = useConnectionList(); - const onClickBack = () => navigate(".."); - const onSelectStep = (id: string) => { const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase(); navigate(path); @@ -50,10 +49,10 @@ const DestinationItemPage: React.FC = () => { const breadcrumbsData = [ { - name: , - 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 index 03949f1f8982..29517ffa4a19 100644 --- 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/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( () => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), [params] @@ -45,10 +46,10 @@ const SourceItemPage: React.FC = () => { const breadcrumbsData = [ { - name: , - onClick: () => navigate(".."), + label: formatMessage({ id: "sidebar.sources" }), + to: "..", }, - { name: source.name }, + { label: source.name }, ]; const connectionsWithSource = connections.filter((connectionItem) => connectionItem.sourceId === source.sourceId); From 33081ea692ceae9db815d54a14981ea0e1967798 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 1 Nov 2022 20:46:46 +0100 Subject: [PATCH 2/2] PR comments on styles --- .../ui/Breadcrumbs/Breadcrumbs.module.scss | 13 +++++-------- .../src/components/ui/Breadcrumbs/Breadcrumbs.tsx | 7 ++++--- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss index f576f5bbe370..37bcac8f8e48 100644 --- a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss +++ b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss @@ -7,15 +7,12 @@ .item { display: inline-block; - cursor: pointer; - color: colors.$blue-400; - text-decoration: none; - &--unlinked { - font-weight: bold; + a { + text-decoration: none; } +} - &:hover { - opacity: 0.8; - } +.unlinked { + font-weight: bold; } diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx index 414ca1eb8a01..40e3a7a034a6 100644 --- a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx +++ b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { Link } from "react-router-dom"; + +import { Link } from "components"; import styles from "./Breadcrumbs.module.scss"; @@ -18,11 +19,11 @@ export const Breadcrumbs: React.FC = ({ data }) => { {data.map((item, index) => ( {item.to ? ( - + {item.label} ) : ( - + {item.label} )}