Refactor & convert PageTitle to SCSS (#17139)

* Converts PageTitle from styled components to SCSS. * Delete package-lock.json * Swapped deprecated H3 for Text base component. * Renames and moves the PageTitle component. * Adds primary story. * Removes PageTitle component. * Regenerates failing snapshot tests. * Requested changes.
airbytehq · Sep 30, 2022 · 0daa9f2 · 0daa9f2
1 parent 0cd1d56
commit 0daa9f2
Show file tree

Hide file tree

Showing 20 changed files with 114 additions and 104 deletions.
diff --git a/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx b/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx
@@ -8,8 +8,9 @@ import { useUpdateEffect } from "react-use";
 import rehypeSlug from "rehype-slug";
 import urls from "rehype-urls";
 
-import { LoadingPage, PageTitle } from "components";
+import { LoadingPage } from "components";
 import { Markdown } from "components/ui/Markdown";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useConfig } from "config";
 import { useDocumentation } from "hooks/services/useDocumentation";
@@ -52,7 +53,7 @@ export const DocumentationPanel: React.FC = () => {
     <LoadingPage />
   ) : (
     <div className={styles.container}>
-      <PageTitle withLine title={<FormattedMessage id="connector.setupGuide" />} />
+      <PageHeader withLine title={<FormattedMessage id="connector.setupGuide" />} />
       <Markdown
         className={styles.content}
         content={docs && !error ? docs : formatMessage({ id: "connector.setupGuide.notFound" })}

diff --git a/airbyte-webapp/src/components/PageTitle/PageTitle.tsx b/airbyte-webapp/src/components/PageTitle/PageTitle.tsx
diff --git a/airbyte-webapp/src/components/PageTitle/index.tsx b/airbyte-webapp/src/components/PageTitle/index.tsx
diff --git a/airbyte-webapp/src/components/index.tsx b/airbyte-webapp/src/components/index.tsx
@@ -10,7 +10,6 @@ export * from "./LabeledSwitch";
 export * from "./Link";
 export * from "./LoadingPage";
 export * from "./MainPageWithScroll";
-export * from "./PageTitle";
 export * from "./SimpleTableComponents";
 export * from "./StatusIcon";
 export * from "./ConnectorCard";
diff --git a/...omponents/PageTitle/PageTitle.module.scss → ...ents/ui/PageHeader/PageHeader.module.scss b/...omponents/PageTitle/PageTitle.module.scss → ...ents/ui/PageHeader/PageHeader.module.scss
@@ -1,5 +1,5 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
 
 .container {
   padding: variables.$spacing-xl 32px 0;

diff --git a/airbyte-webapp/src/components/ui/PageHeader/PageHeader.tsx b/airbyte-webapp/src/components/ui/PageHeader/PageHeader.tsx
@@ -0,0 +1,48 @@
+import classNames from "classnames";
+import React from "react";
+
+import { Text } from "components/ui/Text";
+
+import styles from "./PageHeader.module.scss";
+
+interface PageHeaderProps {
+  withLine?: boolean;
+  middleComponent?: React.ReactNode;
+  middleTitleBlock?: React.ReactNode;
+  endComponent?: React.ReactNode;
+  title: React.ReactNode;
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({
+  title,
+  withLine,
+  middleComponent,
+  middleTitleBlock,
+  endComponent,
+}) => (
+  <div className={classNames(styles.container)} data-withLine={withLine}>
+    <Text
+      as="h1"
+      size="md"
+      className={classNames(styles.start, {
+        [styles.withLine]: withLine,
+      })}
+    >
+      {title}
+    </Text>
+    {middleTitleBlock ? (
+      <Text
+        as="h3"
+        size="md"
+        className={classNames(styles.heading, {
+          [styles.middle]: middleTitleBlock,
+        })}
+      >
+        {middleTitleBlock}
+      </Text>
+    ) : (
+      <div className={classNames(styles.middle)}>{middleComponent}</div>
+    )}
+    <div className={classNames(styles.end)}>{endComponent}</div>
+  </div>
+);
diff --git a/airbyte-webapp/src/components/ui/PageHeader/index.stories.tsx b/airbyte-webapp/src/components/ui/PageHeader/index.stories.tsx
@@ -0,0 +1,28 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Button } from "../Button";
+import { PageHeader } from "./PageHeader";
+
+export default {
+  title: "UI/PageHeader",
+  component: PageHeader,
+  argTypes: {},
+} as ComponentMeta<typeof PageHeader>;
+
+const Template: ComponentStory<typeof PageHeader> = (args) => <PageHeader {...args} />;
+
+const title = "Connections";
+
+const endComponent = (
+  <Button icon={<FontAwesomeIcon icon={faPlus} />} variant="primary" size="sm">
+    New Source
+  </Button>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title,
+  endComponent,
+};
diff --git a/airbyte-webapp/src/components/ui/PageHeader/index.tsx b/airbyte-webapp/src/components/ui/PageHeader/index.tsx
@@ -0,0 +1 @@
+export * from "./PageHeader";
diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { PageTitle } from "components";
 import HeadTitle from "components/HeadTitle";
 import MainPageWithScroll from "components/MainPageWithScroll";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
@@ -28,7 +28,7 @@ const CreditsPage: React.FC = () => {
   return (
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "credits.credits" }]} />}
-      pageTitle={<PageTitle title={<FormattedMessage id="credits.credits" />} />}
+      pageTitle={<PageHeader title={<FormattedMessage id="credits.credits" />} />}
     >
       <Content>
         {!emailVerified && <EmailVerificationHintWithMargin />}

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx
@@ -4,9 +4,10 @@ import React, { Suspense } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
-import { Button, LoadingPage, MainPageWithScroll, PageTitle } from "components";
+import { Button, LoadingPage, MainPageWithScroll } from "components";
 import { EmptyResourceListView } from "components/EmptyResourceListView";
 import HeadTitle from "components/HeadTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
@@ -28,7 +29,7 @@ const AllConnectionsPage: React.FC = () => {
         <MainPageWithScroll
           headTitle={<HeadTitle titles={[{ id: "sidebar.connections" }]} />}
           pageTitle={
-            <PageTitle
+            <PageHeader
               title={<FormattedMessage id="sidebar.connections" />}
               endComponent={
                 <Button icon={<FontAwesomeIcon icon={faPlus} />} variant="primary" size="sm" onClick={onCreateClick}>

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx
@@ -2,11 +2,12 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import { LoadingPage, PageTitle } from "components";
+import { LoadingPage } from "components";
 import ConnectionBlock from "components/ConnectionBlock";
 import { FormPageContent } from "components/ConnectorBlocks";
 import { CreateConnection } from "components/CreateConnection/CreateConnection";
 import HeadTitle from "components/HeadTitle";
+import { PageHeader } from "components/ui/PageHeader";
 import { StepsMenu } from "components/ui/StepsMenu";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
@@ -214,7 +215,7 @@ export const CreationFormPage: React.FC = () => {
     <>
       <HeadTitle titles={[{ id: "connection.newConnectionTitle" }]} />
       <ConnectorDocumentationWrapper>
-        <PageTitle
+        <PageHeader
           title={<FormattedMessage id={titleId} />}
           middleComponent={<StepsMenu lightMode data={steps} activeStep={currentStep} />}
         />

diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { Button, MainPageWithScroll } from "components";
 import { EmptyResourceListView } from "components/EmptyResourceListView";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useDestinationList } from "hooks/services/useDestinationHook";
@@ -26,7 +26,7 @@ const AllDestinationsPage: React.FC = () => {
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "admin.destinations" }]} />}
       pageTitle={
-        <PageTitle
+        <PageHeader
           title={<FormattedMessage id="admin.destinations" />}
           endComponent={
             <Button

diff --git a/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx b/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 
 import { FormPageContent } from "components/ConnectorBlocks";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { ConnectionConfiguration } from "core/domain/connection";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
@@ -43,7 +43,7 @@ export const CreateDestinationPage: React.FC = () => {
     <>
       <HeadTitle titles={[{ id: "destinations.newDestinationTitle" }]} />
       <ConnectorDocumentationWrapper>
-        <PageTitle title={null} middleTitleBlock={<FormattedMessage id="destinations.newDestinationTitle" />} />
+        <PageHeader title={null} middleTitleBlock={<FormattedMessage id="destinations.newDestinationTitle" />} />
         <FormPageContent>
           <DestinationForm
             onSubmit={onSubmitDestinationForm}

diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
@@ -2,13 +2,14 @@ import React, { Suspense, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { Route, Routes, useNavigate, useParams } from "react-router-dom";
 
-import { DropDownRow, LoadingPage, PageTitle } from "components";
+import { DropDownRow, LoadingPage } from "components";
 import ApiErrorBoundary from "components/ApiErrorBoundary";
 import { ItemTabs, StepsTypes, TableItemTitle } from "components/ConnectorBlocks";
 import { ConnectorIcon } from "components/ConnectorIcon";
 import HeadTitle from "components/HeadTitle";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
 import { Breadcrumbs } from "components/ui/Breadcrumbs";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
@@ -88,7 +89,7 @@ const DestinationItemPage: React.FC = () => {
     <ConnectorDocumentationWrapper>
       <HeadTitle titles={[{ id: "admin.destinations" }, { title: destination.name }]} />
 
-      <PageTitle
+      <PageHeader
         title={<Breadcrumbs data={breadcrumbsData} />}
         middleComponent={<ItemTabs currentStep={currentStep} setCurrentStep={onSelectStep} />}
       />

diff --git a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx
@@ -6,7 +6,7 @@ import styled from "styled-components";
 import HeadTitle from "components/HeadTitle";
 import LoadingPage from "components/LoadingPage";
 import MainPageWithScroll from "components/MainPageWithScroll";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 import { SideMenu, CategoryItem } from "components/ui/SideMenu";
 
 import useConnector from "hooks/services/useConnector";
@@ -95,7 +95,7 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ pageConfig }) => {
   return (
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "sidebar.settings" }]} />}
-      pageTitle={<PageTitle title={<FormattedMessage id="sidebar.settings" />} />}
+      pageTitle={<PageHeader title={<FormattedMessage id="sidebar.settings" />} />}
     >
       <Content>
         <SideMenu data={menuItems} onSelect={onSelectMenuItem} activeItem={pathname} />

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { Button, MainPageWithScroll } from "components";
 import { EmptyResourceListView } from "components/EmptyResourceListView";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useSourceList } from "hooks/services/useSourceHook";
@@ -24,7 +24,7 @@ const AllSourcesPage: React.FC = () => {
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "admin.sources" }]} />}
       pageTitle={
-        <PageTitle
+        <PageHeader
           title={<FormattedMessage id="sidebar.sources" />}
           endComponent={
             <Button icon={<FontAwesomeIcon icon={faPlus} />} onClick={onCreateSource} size="sm" data-id="new-source">

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 
 import { FormPageContent } from "components/ConnectorBlocks";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { ConnectionConfiguration } from "core/domain/connection";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
@@ -44,7 +44,7 @@ const CreateSourcePage: React.FC = () => {
     <>
       <HeadTitle titles={[{ id: "sources.newSourceTitle" }]} />{" "}
       <ConnectorDocumentationWrapper>
-        <PageTitle title={null} middleTitleBlock={<FormattedMessage id="sources.newSourceTitle" />} />
+        <PageHeader title={null} middleTitleBlock={<FormattedMessage id="sources.newSourceTitle" />} />
         <FormPageContent>
           <SourceForm onSubmit={onSubmitSourceStep} sourceDefinitions={sourceDefinitions} hasSuccess={successRequest} />
         </FormPageContent>

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
@@ -8,9 +8,9 @@ import { ItemTabs, StepsTypes, TableItemTitle } from "components/ConnectorBlocks
 import { ConnectorIcon } from "components/ConnectorIcon";
 import HeadTitle from "components/HeadTitle";
 import LoadingPage from "components/LoadingPage";
-import PageTitle from "components/PageTitle";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
 import { Breadcrumbs } from "components/ui/Breadcrumbs";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
@@ -89,7 +89,7 @@ const SourceItemPage: React.FC = () => {
   return (
     <ConnectorDocumentationWrapper>
       <HeadTitle titles={[{ id: "admin.sources" }, { title: source.name }]} />
-      <PageTitle
+      <PageHeader
         title={<Breadcrumbs data={breadcrumbsData} />}
         middleComponent={<ItemTabs currentStep={currentStep} setCurrentStep={onSelectStep} />}
       />