🪟 🎨 🏁 Headers + Breadcrumbs (#6185)

airbytehq · May 11, 2023 · d424dc4 · d424dc4
1 parent fa33d22
commit d424dc4
Show file tree

Hide file tree

Showing 35 changed files with 663 additions and 196 deletions.
diff --git a/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.module.scss b/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.module.scss
@@ -1,22 +1,13 @@
 @use "../../scss/colors";
 @use "../../scss/variables";
 
-.content,
 .entityInfo {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.content {
-  padding: 0 variables.$spacing-xl variables.$spacing-xl;
-}
-
-.entityInfo {
   justify-content: left;
   padding: variables.$spacing-lg variables.$spacing-xl variables.$spacing-2xl;
   gap: variables.$spacing-lg;
+  align-items: center;
 }
 
 .entityType {

diff --git a/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx b/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx
@@ -2,11 +2,14 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+import { Box } from "components/ui/Box";
 import { DropdownMenu, DropdownMenuOptionType } from "components/ui/DropdownMenu";
+import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { Text } from "components/ui/Text";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
+import { useExperiment } from "hooks/services/Experiment";
 import { getIcon } from "utils/imageUtils";
 
 import styles from "./TableItemTitle.module.scss";
@@ -20,6 +23,7 @@ interface TableItemTitleProps {
   entityName: string;
   entityIcon?: string;
   releaseStage?: ReleaseStage;
+  connectionsCount: number;
 }
 
 const TableItemTitle: React.FC<TableItemTitleProps> = ({
@@ -30,24 +34,28 @@ const TableItemTitle: React.FC<TableItemTitleProps> = ({
   entityName,
   entityIcon,
   releaseStage,
+  connectionsCount,
 }) => {
   const { formatMessage } = useIntl();
-
+  const isNewConnectionFlowEnabled = useExperiment("connection.updatedConnectionFlow", false);
   return (
-    <>
-      <div className={styles.entityInfo}>
-        {entityIcon && <div className={styles.entityIcon}>{getIcon(entityIcon)}</div>}
-        <div>
-          <Heading as="h2">{entityName}</Heading>
-          <Text size="lg" bold className={styles.entityType}>
-            <span>{entity}</span>
-            <ReleaseStageBadge stage={releaseStage} />
-          </Text>
+    <Box px="xl" pt="lg">
+      {!isNewConnectionFlowEnabled && (
+        <div className={styles.entityInfo}>
+          {entityIcon && <div className={styles.entityIcon}>{getIcon(entityIcon)}</div>}
+          <div>
+            <Heading as="h2">{entityName}</Heading>
+            <Text size="lg" bold className={styles.entityType}>
+              <span>{entity}</span>
+              <ReleaseStageBadge stage={releaseStage} />
+            </Text>
+          </div>
         </div>
-      </div>
-      <div className={styles.content}>
+      )}
+
+      <FlexContainer alignItems="center" justifyContent="space-between">
         <Heading as="h3" size="sm">
-          <FormattedMessage id="tables.connections" />
+          <FormattedMessage id="tables.connections.pluralized" values={{ value: connectionsCount }} />
         </Heading>
         <DropdownMenu
           placement="bottom-end"
@@ -69,8 +77,8 @@ const TableItemTitle: React.FC<TableItemTitleProps> = ({
             </Button>
           )}
         </DropdownMenu>
-      </div>
-    </>
+      </FlexContainer>
+    </Box>
   );
 };
 

diff --git a/...src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx b/...src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx
@@ -66,7 +66,7 @@ export const UpdateConnectionDataResidency: React.FC = () => {
           <div className={styles.spinner}>{connectionUpdating && <Spinner size="sm" />}</div>
           <div className={styles.dropdown}>
             <DataGeographyDropdown
-              isDisabled={connectionUpdating}
+              isDisabled={connectionUpdating || connection.status === "deprecated"}
               geographies={geographies}
               value={selectedValue || connection.geography || geographies[0]}
               onChange={handleSubmit}

diff --git a/airbyte-webapp/src/components/connector/ConnectorNavigationTabs.tsx b/airbyte-webapp/src/components/connector/ConnectorNavigationTabs.tsx
@@ -2,32 +2,37 @@ import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { useParams } from "react-router-dom";
 
-import { Box } from "components/ui/Box";
 import { Tabs } from "components/ui/Tabs";
 import { LinkTab } from "components/ui/Tabs/LinkTab";
 
+import { DestinationRead, SourceRead } from "core/request/AirbyteClient";
 import { RoutePaths } from "pages/routePaths";
 
 enum TabTypes {
   OVERVIEW = "overview",
   SETTINGS = "settings",
 }
 
-export const ConnectorNavigationTabs: React.FC<{ connectorType: "source" | "destination" }> = ({ connectorType }) => {
-  const params = useParams<{ "*": TabTypes | "" | undefined; workspaceId: string; id: string }>();
+export const ConnectorNavigationTabs: React.FC<{
+  connectorType: "source" | "destination";
+  connector: SourceRead | DestinationRead;
+  id: string;
+}> = ({ connectorType, id }) => {
+  const params = useParams<{ "*": TabTypes | "" | undefined; workspaceId: string }>();
 
   const connectorTypePath = connectorType === "source" ? RoutePaths.Source : RoutePaths.Destination;
 
+  const basePath = `/${RoutePaths.Workspaces}/${params.workspaceId}/${connectorTypePath}/${id}`;
   const tabs = [
     {
       id: TabTypes.OVERVIEW,
       name: <FormattedMessage id="tables.overview" />,
-      to: `/${RoutePaths.Workspaces}/${params.workspaceId}/${connectorTypePath}/${params.id}/`,
+      to: basePath,
     },
     {
       id: TabTypes.SETTINGS,
       name: <FormattedMessage id="tables.settings" />,
-      to: `/${RoutePaths.Workspaces}/${params.workspaceId}/${connectorTypePath}/${params.id}/settings`,
+      to: `${basePath}/settings`,
     },
   ];
 
@@ -37,20 +42,18 @@ export const ConnectorNavigationTabs: React.FC<{ connectorType: "source" | "dest
   );
 
   return (
-    <Box pl="xl">
-      <Tabs>
-        {tabs.map((tabItem) => {
-          return (
-            <LinkTab
-              id={tabItem.id}
-              key={tabItem.id}
-              name={tabItem.name}
-              to={tabItem.to}
-              isActive={tabItem.id === currentTab}
-            />
-          );
-        })}
-      </Tabs>
-    </Box>
+    <Tabs>
+      {tabs.map((tabItem) => {
+        return (
+          <LinkTab
+            id={tabItem.id}
+            key={tabItem.id}
+            name={tabItem.name}
+            to={tabItem.to}
+            isActive={tabItem.id === currentTab}
+          />
+        );
+      })}
+    </Tabs>
   );
 };
diff --git a/airbyte-webapp/src/components/connector/ConnectorTitleBlock.module.scss b/airbyte-webapp/src/components/connector/ConnectorTitleBlock.module.scss
@@ -0,0 +1,4 @@
+.icon {
+  width: 50px;
+  height: 50px;
+}
diff --git a/airbyte-webapp/src/components/connector/ConnectorTitleBlock.tsx b/airbyte-webapp/src/components/connector/ConnectorTitleBlock.tsx
@@ -0,0 +1,37 @@
+import { ConnectorIcon } from "components/common/ConnectorIcon";
+import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+import { FlexContainer } from "components/ui/Flex";
+import { Heading } from "components/ui/Heading";
+import { Text } from "components/ui/Text";
+
+import { ConnectorDefinition } from "core/domain/connector";
+import { DestinationRead, SourceRead } from "core/request/AirbyteClient";
+
+import styles from "./ConnectorTitleBlock.module.scss";
+
+type Connector = SourceRead | DestinationRead;
+
+interface ConnectorTitleBlockProps<T extends Connector> {
+  connector: T;
+  connectorDefinition: ConnectorDefinition;
+}
+
+export const ConnectorTitleBlock = <T extends Connector>({
+  connector,
+  connectorDefinition,
+}: ConnectorTitleBlockProps<T>) => {
+  return (
+    <FlexContainer alignItems="center">
+      <ConnectorIcon icon={connector.icon} className={styles.icon} />
+      <FlexContainer direction="column" gap="sm">
+        <Heading as="h1" size="md">
+          {connector.name}
+        </Heading>
+        <FlexContainer alignItems="center">
+          <Text color="grey">{connectorDefinition.name}</Text>
+          <ReleaseStageBadge stage={connectorDefinition.releaseStage} />
+        </FlexContainer>
+      </FlexContainer>
+    </FlexContainer>
+  );
+};
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/NextBreadcrumbs.module.scss b/airbyte-webapp/src/components/ui/Breadcrumbs/NextBreadcrumbs.module.scss
@@ -0,0 +1,3 @@
+.link {
+  text-decoration: none;
+}
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/NextBreadcrumbs.stories.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/NextBreadcrumbs.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { BreadcrumbsDataItem } from "./Breadcrumbs";
+import { NextBreadcrumbs } from "./NextBreadcrumbs";
+
+export default {
+  title: "UI/NextBreadcrumbs",
+  component: NextBreadcrumbs,
+  argTypes: {},
+} as Meta<typeof NextBreadcrumbs>;
+
+const Template: StoryFn<typeof NextBreadcrumbs> = (args) => {
+  return <NextBreadcrumbs data={args.data} />;
+};
+
+const data: BreadcrumbsDataItem[] = [
+  {
+    label: "Workspace",
+    to: "/workspace",
+  },
+  {
+    label: "Source",
+    to: "/workspace/source",
+  },
+  {
+    label: "Settings",
+  },
+];
+
+export const Primary = Template.bind({});
+Primary.args = {
+  data,
+};
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/NextBreadcrumbs.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/NextBreadcrumbs.tsx
@@ -0,0 +1,42 @@
+import React, { Fragment } from "react";
+
+import styles from "./NextBreadcrumbs.module.scss";
+import { FlexContainer, FlexItem } from "../Flex";
+import { Link } from "../Link";
+import { Text } from "../Text";
+
+export interface NavigationDataItem {
+  label: string;
+  to?: string;
+}
+
+export interface NextBreadcrumbsProps {
+  data: NavigationDataItem[];
+}
+
+export const NextBreadcrumbs: React.FC<NextBreadcrumbsProps> = ({ data }) => {
+  return (
+    <>
+      {data.length && (
+        <FlexContainer className={styles.container}>
+          {data.map((item, index) => (
+            <Fragment key={item.label}>
+              <FlexItem>
+                {item.to ? (
+                  <Link to={item.to} className={styles.link}>
+                    <Text size="sm" color={index === data.length - 1 ? "darkBlue" : "grey"}>
+                      {item.label}
+                    </Text>
+                  </Link>
+                ) : (
+                  <Text size="sm">{item.label}</Text>
+                )}
+              </FlexItem>
+              {index !== data.length - 1 && <Text size="sm"> / </Text>}
+            </Fragment>
+          ))}
+        </FlexContainer>
+      )}
+    </>
+  );
+};
diff --git a/airbyte-webapp/src/components/ui/PageHeader/NextPageHeader.module.scss b/airbyte-webapp/src/components/ui/PageHeader/NextPageHeader.module.scss
@@ -0,0 +1,7 @@
+@use "scss/z-indices";
+@use "scss/variables";
+
+.container {
+  z-index: z-indices.$pageHeader;
+  padding: variables.$spacing-xl variables.$spacing-xl 0;
+}
diff --git a/airbyte-webapp/src/components/ui/PageHeader/NextPageHeader.tsx b/airbyte-webapp/src/components/ui/PageHeader/NextPageHeader.tsx
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import React from "react";
+
+import styles from "./NextPageHeader.module.scss";
+import { FlexContainer } from "../Flex";
+
+interface PageHeaderProps {
+  leftComponent: string | React.ReactNode;
+  endComponent?: React.ReactNode;
+}
+// todo: things aren't lined up right when there is scrollbar in the area below the header (because the header isn't in the scrollable div)
+export const NextPageHeader: React.FC<PageHeaderProps> = ({ leftComponent, endComponent }) => (
+  <FlexContainer
+    className={classNames(styles.container)}
+    alignItems="center"
+    justifyContent="space-between"
+    data-testid="page-header-container"
+  >
+    {leftComponent}
+    {endComponent}
+  </FlexContainer>
+);
diff --git a/airbyte-webapp/src/components/ui/PageHeader/NextPageHeaderWithNavigation.module.scss b/airbyte-webapp/src/components/ui/PageHeader/NextPageHeaderWithNavigation.module.scss
@@ -0,0 +1,10 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.container {
+  background-color: colors.$white;
+}
+
+.section {
+  border-bottom: variables.$border-thin solid colors.$grey-100;
+}
diff --git a/airbyte-webapp/src/components/ui/PageHeader/NextPageHeaderWithNavigation.tsx b/airbyte-webapp/src/components/ui/PageHeader/NextPageHeaderWithNavigation.tsx
@@ -0,0 +1,26 @@
+import styles from "./NextPageHeaderWithNavigation.module.scss";
+import { Box } from "../Box";
+import { NavigationDataItem, NextBreadcrumbs } from "../Breadcrumbs/NextBreadcrumbs";
+import { FlexContainer } from "../Flex";
+
+interface NextPageHeaderWithNavigationProps {
+  breadCrumbsData: NavigationDataItem[];
+}
+
+export const NextPageHeaderWithNavigation: React.FC<React.PropsWithChildren<NextPageHeaderWithNavigationProps>> = ({
+  breadCrumbsData,
+  children,
+}) => {
+  return (
+    <FlexContainer direction="column" gap="none" className={styles.container}>
+      <Box py="lg" px="xl" className={styles.section}>
+        <NextBreadcrumbs data={breadCrumbsData} />
+      </Box>
+      <Box pt="lg" px="xl" className={styles.section}>
+        <FlexContainer direction="column" gap="lg">
+          {children}
+        </FlexContainer>
+      </Box>
+    </FlexContainer>
+  );
+};