🪟 🎨 Update layout of create connection and replication settings pages…

… to mach design (#14946) * Update ConnectionForm to match design * Split sections into cards * Update connection name label to heading * Move create/edit buttons outside of card * Fix spacing to match design * Remove noTitles prop from CreateConnectionContent component * Update OperationsSection title to match the rest of the sections * Update connection name text to show that it's required * Divide streams into sections, center dont worry teext * Wrap SyncCatalogField in a div to prevent style impact from parent * Remove don't worry message from create connection page * Update resizing of left fields and right fields to match design. Now fields should stop at certain width of page * Move replication and tarnsformation section in connection form to its own card * Move OperationSection within same render condition as CreateControls * Apply design changes to main page with scroll, connection page title, and status main info * Update main page with scroll to only scroll x on the content, not the whole page * Update connection page title to all SCSS, add xl horizontal padding to match content * Update status main info to be more flexible on window resize * Remove extra div from status view that was adding extra horizontal margin to the card * Fix minor issues Co-authored-by: Tim Roes <tim@airbyte.io>
airbytehq · Jul 28, 2022 · 22c107a · 22c107a
1 parent 3a013a4
commit 22c107a
Show file tree

Hide file tree

Showing 15 changed files with 329 additions and 283 deletions.
diff --git a/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx b/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx
@@ -1,5 +1,4 @@
 import React, { Suspense, useMemo, useState } from "react";
-import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { ContentCard } from "components";
@@ -32,15 +31,13 @@ interface CreateConnectionContentProps {
   source: SourceRead;
   destination: DestinationRead;
   afterSubmitConnection?: (connection: WebBackendConnectionRead) => void;
-  noTitles?: boolean;
 }
 
 const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   source,
   destination,
   afterSubmitConnection,
   additionBottomControls,
-  noTitles,
 }) => {
   const { mutateAsync: createConnection } = useCreateConnection();
   const trackNewConnectionAction = useTrackAction(
@@ -108,7 +105,7 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   if (schemaErrorStatus) {
     const job = LogsRequestError.extractJobInfo(schemaErrorStatus);
     return (
-      <ContentCard title={noTitles ? null : <FormattedMessage id="onboarding.setConnection" />}>
+      <ContentCard>
         <TryAfterErrorBlock
           onClick={onDiscoverSchema}
           additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
@@ -118,23 +115,19 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
     );
   }
 
-  return (
-    <ContentCard title={noTitles ? null : <FormattedMessage id="onboarding.setConnection" />}>
-      {isLoading ? (
-        <LoadingSchema />
-      ) : (
-        <Suspense fallback={<LoadingSchema />}>
-          <ConnectionForm
-            mode="create"
-            connection={connection}
-            additionBottomControls={additionBottomControls}
-            onDropDownSelect={onSelectFrequency}
-            onSubmit={onSubmitConnectionStep}
-            onChangeValues={setConnectionFormValues}
-          />
-        </Suspense>
-      )}
-    </ContentCard>
+  return isLoading ? (
+    <LoadingSchema />
+  ) : (
+    <Suspense fallback={<LoadingSchema />}>
+      <ConnectionForm
+        mode="create"
+        connection={connection}
+        additionBottomControls={additionBottomControls}
+        onDropDownSelect={onSelectFrequency}
+        onSubmit={onSubmitConnectionStep}
+        onChangeValues={setConnectionFormValues}
+      />
+    </Suspense>
   );
 };
 

diff --git a/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.module.scss b/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.module.scss
@@ -2,11 +2,17 @@
 
 .page {
   overflow-y: hidden;
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
+.contentContainer {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 .content {
   overflow-y: auto;
   height: 100%;

diff --git a/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.tsx b/airbyte-webapp/src/components/MainPageWithScroll/MainPageWithScroll.tsx
@@ -19,7 +19,9 @@ const MainPageWithScroll: React.FC<MainPageWithScrollProps> = ({ headTitle, page
         {headTitle}
         {pageTitle}
       </div>
-      <div className={styles.content}>{children}</div>
+      <div className={styles.contentContainer}>
+        <div className={styles.content}>{children}</div>
+      </div>
     </div>
   );
 };

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -34,7 +34,7 @@
   "form.noConnectorFound": "No matching connector found",
   "form.sourceName.placeholder": "Your source name",
   "form.destinationName.placeholder": "Your destination name",
-  "form.connectionName": "Name",
+  "form.connectionName": "Connection name*",
   "form.connectionName.placeholder": "Name",
   "form.name": "Name *",
   "form.sourceName.message": "Pick a name to help you identify this source in Airbyte",
@@ -50,7 +50,6 @@
   "form.cursorField": "Cursor field",
   "form.dataSync": "Activate the streams you want to sync",
   "form.dataSync.readonly": "Activated streams",
-  "form.dataSync.message": "Don’t worry! You’ll be able to change this later on.",
   "form.cancel": "Cancel",
   "form.canceling": "Canceling",
   "form.submit": "Submit",
@@ -202,7 +201,6 @@
   "onboarding.destinationSetUp": "Set up the destination",
   "onboarding.destinationSetUp.buttonText": "Set up destination",
   "onboarding.setUpConnection": "Set up connection",
-  "onboarding.setConnection": "Set up the connection",
   "onboarding.instructionsLink": "See full instructions how to connect {name}",
   "onboarding.fetchingSchema": "We are fetching the schema of your data source. \nThis should take less than a minute, but may take a few minutes on slow internet connections or data sources with a large amount of tables.",
   "onboarding.tutorial": "Check how you can sync PostgreSQL databases in minutes",

diff --git a/.../pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.module.scss b/.../pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.module.scss
@@ -1,6 +1,20 @@
 @use "../../../../../scss/variables" as vars;
 
+.container {
+  text-align: center;
+  padding: vars.$spacing-lg vars.$spacing-xl;
+}
+
 .connectionDeleted {
   max-width: vars.$width-modal-md;
   margin: vars.$spacing-lg auto;
 }
+
+.statusContainer {
+  margin: 18px 0;
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/...bapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx b/...bapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx
@@ -1,7 +1,6 @@
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { H6 } from "components";
 import { InfoBox } from "components/InfoBox";
@@ -23,20 +22,6 @@ interface ConnectionPageTitleProps {
   onStatusUpdating?: (updating: boolean) => void;
 }
 
-const Title = styled.div`
-  text-align: center;
-  padding: 21px 0 10px;
-`;
-
-const Links = styled.div`
-  margin: 18px 0;
-  font-size: 15px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const ConnectionPageTitle: React.FC<ConnectionPageTitleProps> = ({
   source,
   destination,
@@ -46,37 +31,44 @@ const ConnectionPageTitle: React.FC<ConnectionPageTitleProps> = ({
 }) => {
   const { push } = useRouter<{ id: string }>();
 
-  const steps = [
-    {
-      id: ConnectionSettingsRoutes.STATUS,
-      name: <FormattedMessage id="sources.status" />,
-    },
-    {
-      id: ConnectionSettingsRoutes.REPLICATION,
-      name: <FormattedMessage id="connection.replication" />,
-    },
-    {
-      id: ConnectionSettingsRoutes.TRANSFORMATION,
-      name: <FormattedMessage id="connectionForm.transformation.title" />,
-    },
-  ];
+  const steps = useMemo(() => {
+    const steps = [
+      {
+        id: ConnectionSettingsRoutes.STATUS,
+        name: <FormattedMessage id="sources.status" />,
+      },
+      {
+        id: ConnectionSettingsRoutes.REPLICATION,
+        name: <FormattedMessage id="connection.replication" />,
+      },
+      {
+        id: ConnectionSettingsRoutes.TRANSFORMATION,
+        name: <FormattedMessage id="connectionForm.transformation.title" />,
+      },
+    ];
+
+    connection.status !== ConnectionStatus.deprecated &&
+      steps.push({
+        id: ConnectionSettingsRoutes.SETTINGS,
+        name: <FormattedMessage id="sources.settings" />,
+      });
 
-  connection.status !== ConnectionStatus.deprecated &&
-    steps.push({
-      id: ConnectionSettingsRoutes.SETTINGS,
-      name: <FormattedMessage id="sources.settings" />,
-    });
+    return steps;
+  }, [connection.status]);
 
-  const onSelectStep = (id: string) => {
-    if (id === ConnectionSettingsRoutes.STATUS) {
-      push("");
-    } else {
-      push(id);
-    }
-  };
+  const onSelectStep = useCallback(
+    (id: string) => {
+      if (id === ConnectionSettingsRoutes.STATUS) {
+        push("");
+      } else {
+        push(id);
+      }
+    },
+    [push]
+  );
 
   return (
-    <Title>
+    <div className={styles.container}>
       {connection.status === ConnectionStatus.deprecated && (
         <InfoBox className={styles.connectionDeleted} icon={faTrash}>
           <FormattedMessage id="connection.connectionDeletedView" />
@@ -86,16 +78,16 @@ const ConnectionPageTitle: React.FC<ConnectionPageTitleProps> = ({
         <FormattedMessage id="connection.title" />
       </H6>
       <ConnectionName connection={connection} />
-      <Links>
+      <div className={styles.statusContainer}>
         <StatusMainInfo
           connection={connection}
           source={source}
           destination={destination}
           onStatusUpdating={onStatusUpdating}
         />
-      </Links>
+      </div>
       <StepsMenu lightMode data={steps} onSelect={onSelectStep} activeStep={currentStep} />
-    </Title>
+    </div>
   );
 };
 

diff --git a/...e-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/...e-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useAsyncFn, useUnmount } from "react-use";
 import styled from "styled-components";
 
-import { Button, Card, LabeledSwitch, ModalBody, ModalFooter } from "components";
+import { Button, LabeledSwitch, ModalBody, ModalFooter } from "components";
 import LoadingSchema from "components/LoadingSchema";
 
 import { toWebBackendConnectionUpdate } from "core/domain/connection";
@@ -187,27 +187,25 @@ export const ReplicationView: React.FC<ReplicationViewProps> = ({ onAfterSaveSch
 
   return (
     <Content>
-      <Card>
-        {!isRefreshingCatalog && connection ? (
-          <ConnectionForm
-            mode={connection?.status !== ConnectionStatus.deprecated ? "edit" : "readonly"}
-            connection={connection}
-            onSubmit={onSubmitForm}
-            successMessage={saved && <FormattedMessage id="form.changesSaved" />}
-            onCancel={onCancelConnectionFormEdit}
-            canSubmitUntouchedForm={activeUpdatingSchemaMode}
-            additionalSchemaControl={
-              <Button onClick={onRefreshSourceSchema} type="button" secondary>
-                <TryArrow icon={faSyncAlt} />
-                <FormattedMessage id="connection.updateSchema" />
-              </Button>
-            }
-            onChangeValues={setConnectionFormValues}
-          />
-        ) : (
-          <LoadingSchema />
-        )}
-      </Card>
+      {!isRefreshingCatalog && connection ? (
+        <ConnectionForm
+          mode={connection?.status !== ConnectionStatus.deprecated ? "edit" : "readonly"}
+          connection={connection}
+          onSubmit={onSubmitForm}
+          successMessage={saved && <FormattedMessage id="form.changesSaved" />}
+          onCancel={onCancelConnectionFormEdit}
+          canSubmitUntouchedForm={activeUpdatingSchemaMode}
+          additionalSchemaControl={
+            <Button onClick={onRefreshSourceSchema} type="button" secondary>
+              <TryArrow icon={faSyncAlt} />
+              <FormattedMessage id="connection.updateSchema" />
+            </Button>
+          }
+          onChangeValues={setConnectionFormValues}
+        />
+      ) : (
+        <LoadingSchema />
+      )}
     </Content>
   );
 };
diff --git a/...p/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.module.scss b/...p/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.module.scss
@@ -11,12 +11,31 @@
   }
 }
 
-.container {
-  width: 650px;
+.container,
+.pathContainer {
   display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
   justify-content: space-between;
+  align-items: center;
+}
+
+.pathContainer,
+.pathContainer > *,
+.enabledControlContainer {
+  flex-grow: 1;
+}
+
+.container {
+  width: 650px;
+  flex-wrap: wrap;
   padding: variables.$spacing-md variables.$spacing-xl;
   background-color: white;
   border-radius: 10px;
-  align-items: center;
+}
+
+.enabledControlContainer {
+  display: flex;
+  justify-content: space-around;
+  padding: variables.$spacing-md;
 }