New connection page design

airbyte-webapp-e2e-tests/cypress/integration/connection.spec.js

@@ -6,7 +6,7 @@ describe("Connection main actions", () => {
     cy.get("div").contains("Test destination cypress").should("exist");
   });
 
-  it("Update connection", () => {
+  it.only("Update connection", () => {
     cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
 
     cy.createTestConnection("Test update connection source cypress", "Test update connection destination cypress");
@@ -15,11 +15,11 @@ describe("Connection main actions", () => {
     cy.get("div").contains("Test update connection source cypress").click();
     cy.get("div").contains("Test update connection destination cypress").click();
 
-    cy.get("div[data-id='settings-step']").click();
+    cy.get("div[data-id='replication-step']").click();
 
     cy.get("div[data-testid='schedule']").click();
     cy.get("div[data-testid='Every 5 min']").click();
-    cy.submitButtonClick();
+    cy.get("button[type=submit]").first().click();
     cy.wait("@updateConnection");
     cy.get("span[data-id='success-result']").should("exist");
 

airbyte-webapp-e2e-tests/cypress/support/commands/connection.js

@@ -13,6 +13,9 @@ Cypress.Commands.add("createTestConnection", (sourceName, destinationName) => {
 
   cy.get("div[data-testid='schedule']").click();
   cy.get("div[data-testid='manual']").click();
+
+  cy.get("div[data-testid='namespaceDefinition']").click();
+  cy.get("div[data-testid='namespaceDefinition-source']").click();
   cy.submitButtonClick();
 
   cy.wait("@createConnection");

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -3,7 +3,6 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 import { faRedoAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useResource } from "rest-hooks";
 
 import { Button, ContentCard } from "components";
 import LoadingSchema from "components/LoadingSchema";
@@ -13,8 +12,6 @@ import TryAfterErrorBlock from "./components/TryAfterErrorBlock";
 
 import useConnection, { ValuesProps } from "hooks/services/useConnectionHook";
 import { useDiscoverSchema } from "hooks/services/useSchemaHook";
-import SourceDefinitionResource from "core/resources/SourceDefinition";
-import DestinationDefinitionResource from "core/resources/DestinationDefinition";
 import { IDataItem } from "components/base/DropDown/components/Option";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
 import { LogsRequestError } from "core/request/LogsRequestError";
@@ -53,23 +50,12 @@ const CreateConnectionContent: React.FC<IProps> = ({
   const { createConnection } = useConnection();
   const analyticsService = useAnalyticsService();
 
-  const sourceDefinition = useResource(SourceDefinitionResource.detailShape(), {
-    sourceDefinitionId: source.sourceDefinitionId,
-  });
-
-  const destinationDefinition = useResource(
-    DestinationDefinitionResource.detailShape(),
-    {
-      destinationDefinitionId: destination.destinationDefinitionId,
-    }
-  );
-
   const {
     schema,
     isLoading,
     schemaErrorStatus,
     onDiscoverSchema,
-  } = useDiscoverSchema(source?.sourceId);
+  } = useDiscoverSchema(source.sourceId);
 
   const connection = useMemo(
     () => ({
@@ -80,35 +66,6 @@ const CreateConnectionContent: React.FC<IProps> = ({
     [schema, destination, source]
   );
 
-  if (isLoading) {
-    return (
-      <ContentCard
-        title={
-          noTitles ? null : <FormattedMessage id="onboarding.setConnection" />
-        }
-      >
-        <LoadingSchema />
-      </ContentCard>
-    );
-  }
-
-  if (schemaErrorStatus) {
-    const jobInfo = LogsRequestError.extractJobInfo(schemaErrorStatus);
-    return (
-      <ContentCard
-        title={
-          noTitles ? null : <FormattedMessage id="onboarding.setConnection" />
-        }
-      >
-        <TryAfterErrorBlock
-          onClick={onDiscoverSchema}
-          additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
-        />
-        {jobInfo && <JobItem jobInfo={jobInfo} />}
-      </ContentCard>
-    );
-  }
-
   const onSubmitConnectionStep = async (values: ValuesProps) => {
     const connection = await createConnection({
       values,
@@ -140,28 +97,47 @@ const CreateConnectionContent: React.FC<IProps> = ({
     });
   };
 
+  if (schemaErrorStatus) {
+    const jobInfo = LogsRequestError.extractJobInfo(schemaErrorStatus);
+    return (
+      <ContentCard
+        title={
+          noTitles ? null : <FormattedMessage id="onboarding.setConnection" />
+        }
+      >
+        <TryAfterErrorBlock
+          onClick={onDiscoverSchema}
+          additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
+        />
+        {jobInfo && <JobItem jobInfo={jobInfo} />}
+      </ContentCard>
+    );
+  }
+
   return (
     <ContentCard
       title={
         noTitles ? null : <FormattedMessage id="onboarding.setConnection" />
       }
     >
-      <Suspense fallback={<LoadingSchema />}>
-        <ConnectionForm
-          connection={connection}
-          additionBottomControls={additionBottomControls}
-          onDropDownSelect={onSelectFrequency}
-          additionalSchemaControl={
-            <Button onClick={onDiscoverSchema} type="button">
-              <TryArrow icon={faRedoAlt} />
-              <FormattedMessage id="connection.refreshSchema" />
-            </Button>
-          }
-          onSubmit={onSubmitConnectionStep}
-          sourceIcon={sourceDefinition?.icon}
-          destinationIcon={destinationDefinition?.icon}
-        />
-      </Suspense>
+      {isLoading ? (
+        <LoadingSchema />
+      ) : (
+        <Suspense fallback={<LoadingSchema />}>
+          <ConnectionForm
+            connection={connection}
+            additionBottomControls={additionBottomControls}
+            onDropDownSelect={onSelectFrequency}
+            additionalSchemaControl={
+              <Button onClick={onDiscoverSchema} type="button">
+                <TryArrow icon={faRedoAlt} />
+                <FormattedMessage id="connection.refreshSchema" />
+              </Button>
+            }
+            onSubmit={onSubmitConnectionStep}
+          />
+        </Suspense>
+      )}
     </ContentCard>
   );
 };

airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from "react-intl";
 import { Button, H4, StatusIcon } from "components";
 
 const Block = styled.div`
-  margin: 40px;
+  padding: 40px;
   text-align: center;
 `;
 const Title = styled(H4)`

airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import ContentCard from "components/ContentCard";
-import { Button } from "components";
+import { Button, H5 } from "components";
 import DeleteModal from "./components/DeleteModal";
 
 type IProps = {
@@ -13,9 +13,10 @@ type IProps = {
 
 const DeleteBlockComponent = styled(ContentCard)`
   margin-top: 12px;
-  padding: 29px 28px 27px;
+  padding: 19px 20px 20px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 `;
 
 const Text = styled.div`
@@ -32,16 +33,19 @@ const DeleteBlock: React.FC<IProps> = ({ type, onDelete }) => {
   return (
     <>
       <DeleteBlockComponent>
+        <Text>
+          <H5 bold>
+            <FormattedMessage id={`tables.${type}Delete.title`} />
+          </H5>
+          <FormattedMessage id={`tables.${type}DataDelete`} />
+        </Text>
         <Button
           danger
           onClick={() => setIsModalOpen(true)}
           data-id="open-delete-modal"
         >
           <FormattedMessage id={`tables.${type}Delete`} />
         </Button>
-        <Text>
-          <FormattedMessage id={`tables.${type}DataDelete`} />
-        </Text>
       </DeleteBlockComponent>
       {isModalOpen && (
         <DeleteModal

airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx

@@ -6,6 +6,7 @@ import { faCog } from "@fortawesome/free-solid-svg-icons";
 import { RoutePaths } from "pages/routes";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { Link } from "components";
+import { ConnectionSettingsRoutes } from "pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsRoutes";
 
 type IProps = {
   id: string;
@@ -36,7 +37,7 @@ const ConnectorCell: React.FC<IProps> = ({ id }) => {
     event.stopPropagation();
   };
 
-  const settingPath = `/${RoutePaths.Workspaces}/${workspaceId}/${RoutePaths.Connections}/${id}/${RoutePaths.Settings}`;
+  const settingPath = `/${RoutePaths.Workspaces}/${workspaceId}/${RoutePaths.Connections}/${id}/${ConnectionSettingsRoutes.REPLICATION}`;
   return (
     <Content onClick={openSettings}>
       <Link to={settingPath}>

airbyte-webapp/src/components/ToolTip/ToolTip.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 type ToolTipProps = {
   control: React.ReactNode;
+  className?: string;
 };
 
 const Control = styled.div`
@@ -22,17 +23,19 @@ const ToolTipView = styled.div`
   top: calc(100% + 10px);
   left: -50px;
   min-width: 100px;
+  z-index: 10;
 
-  div:hover > & {
+  div:hover > &,
+  &:hover {
     display: block;
   }
 `;
 
-const ToolTip: React.FC<ToolTipProps> = ({ children, control }) => {
+const ToolTip: React.FC<ToolTipProps> = ({ children, control, className }) => {
   return (
     <Control>
       {control}
-      <ToolTipView>{children}</ToolTipView>
+      <ToolTipView className={className}>{children}</ToolTipView>
     </Control>
   );
 };

airbyte-webapp/src/components/ToolTip/components/InfoIcon.tsx

@@ -0,0 +1,14 @@
+const InfoIcon = ({
+  color = "currentColor",
+}: {
+  color?: string;
+}): JSX.Element => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default InfoIcon;

airbyte-webapp/src/components/ToolTip/index.tsx

@@ -1,4 +1,5 @@
 import ToolTip from "./ToolTip";
+import InfoIcon from "./components/InfoIcon";
 
 export default ToolTip;
-export { ToolTip };
+export { ToolTip, InfoIcon };

airbyte-webapp/src/components/base/Button/Button.tsx

@@ -41,7 +41,7 @@ const getTextColor = (props: IStyleProps) => {
     }
     return props.theme.primaryColor;
   } else if (props.secondary || props.iconOnly) {
-    return props.theme.greyColor60;
+    return props.theme.darkGreyColor;
   }
 
   return props.theme.whiteColor;

airbyte-webapp/src/components/base/CheckBox/CheckBox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faMinus } from "@fortawesome/free-solid-svg-icons";
 
 const CheckBoxInput = styled.input`
   opacity: 0;
@@ -11,31 +11,44 @@ const CheckBoxInput = styled.input`
   position: absolute;
 `;
 
-const CheckBoxContainer = styled.label`
-  height: 20px;
-  min-width: 20px;
-  background: ${({ theme }) => theme.greyColor20};
-  color: ${({ theme }) => theme.primaryColor};
+const CheckBoxContainer = styled.label<{
+  checked?: boolean;
+  indeterminate?: boolean;
+}>`
+  height: 18px;
+  min-width: 18px;
+  border: 1px solid
+    ${({ theme, checked, indeterminate }) =>
+      checked || indeterminate ? theme.primaryColor : theme.greyColor20};
+  background: ${({ theme, checked, indeterminate }) =>
+    checked || indeterminate ? theme.primaryColor : theme.whiteColor};
+  color: ${({ theme }) => theme.whiteColor};
   text-align: center;
   border-radius: 4px;
-  font-size: 14px;
-  line-height: 14px;
+  font-size: 13px;
+  line-height: 13px;
   display: inline-block;
-  padding: 2px 0;
+  padding: 1px 0;
   cursor: pointer;
   vertical-align: top;
   position: relative;
 `;
 
-const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = (
-  props
-) => (
+const CheckBox: React.FC<
+  React.InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean }
+> = ({ indeterminate, ...props }) => (
   <CheckBoxContainer
     onClick={(event: React.SyntheticEvent) => event.stopPropagation()}
     className={props.className}
+    checked={props.checked}
+    indeterminate={indeterminate}
   >
     <CheckBoxInput {...props} type="checkbox" />
-    {props.checked && <FontAwesomeIcon icon={faCheck} />}
+    {indeterminate ? (
+      <FontAwesomeIcon icon={faMinus} />
+    ) : (
+      props.checked && <FontAwesomeIcon icon={faCheck} />
+    )}
   </CheckBoxContainer>
 );
 

airbyte-webapp/src/components/base/DropDown/DropDown.tsx

@@ -38,11 +38,15 @@ const DropDown: React.FC<DropdownProps> = React.forwardRef((props, ref) => {
     [propsComponents]
   );
 
-  const currentValue = props.isMulti
-    ? props.options?.filter((op) =>
-        props.value.find((o: OptionType) => equal(o, op.value))
-      )
-    : props.options?.find((op) => equal(op.value, props.value));
+  // undefined value is assumed to mean that value was not selected
+  const currentValue =
+    props.value !== undefined
+      ? props.isMulti
+        ? props.options?.filter((op) =>
+            props.value.find((o: OptionType) => equal(o, op.value))
+          )
+        : props.options?.find((op) => equal(op.value, props.value))
+      : null;
 
   const styles = {
     ...(props.styles ?? {}),