From ae0ce1f3d0ccf10c69a1b98eeb15b65e0651fc64 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Wed, 18 Jan 2023 17:52:15 +0100
Subject: [PATCH 1/7] WIP

---
 .../Indicator/Indicator.module.scss           | 12 +++
 .../src/components/Indicator/Indicator.tsx    | 21 ++++--
 .../ReleaseStageBadge/ReleaseStageBadge.tsx   |  2 +-
 airbyte-webapp/src/locales/en.json            |  1 -
 .../components/ConnectorCell.module.scss      |  5 ++
 .../components/ConnectorCell.tsx              | 44 ++---------
 .../components/ConnectorsView.module.scss     |  3 +
 .../components/ConnectorsView.tsx             | 75 +++++++++++--------
 .../ConnectorsPage/components/VersionCell.tsx | 45 +++++------
 .../Connector/ConnectorForm/ConnectorForm.tsx |  3 +-
 10 files changed, 113 insertions(+), 98 deletions(-)
 create mode 100644 airbyte-webapp/src/components/Indicator/Indicator.module.scss
 create mode 100644 airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss

diff --git a/airbyte-webapp/src/components/Indicator/Indicator.module.scss b/airbyte-webapp/src/components/Indicator/Indicator.module.scss
new file mode 100644
index 0000000000000..5ecd4ae36e4db
--- /dev/null
+++ b/airbyte-webapp/src/components/Indicator/Indicator.module.scss
@@ -0,0 +1,12 @@
+@use "scss/colors";
+
+.indicator {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background: colors.$red;
+}
+
+.hidden {
+  background-color: transparent;
+}
diff --git a/airbyte-webapp/src/components/Indicator/Indicator.tsx b/airbyte-webapp/src/components/Indicator/Indicator.tsx
index 7332a0017d736..6b684037f417f 100644
--- a/airbyte-webapp/src/components/Indicator/Indicator.tsx
+++ b/airbyte-webapp/src/components/Indicator/Indicator.tsx
@@ -1,8 +1,15 @@
-import styled from "styled-components";
+import classNames from "classnames";
 
-export const Indicator = styled.div`
-  height: 10px;
-  width: 10px;
-  border-radius: 50%;
-  background: ${({ theme }) => theme.dangerColor};
-`;
+import styles from "./Indicator.module.scss";
+
+export interface IndicatorProps {
+  /**
+   * Set to true to render an invisible indicator so reserve the space in the UI
+   */
+  hidden?: boolean;
+  className?: string;
+}
+
+export const Indicator: React.FC<IndicatorProps> = ({ hidden, className }) => (
+  <div className={classNames(className, styles.indicator, { [styles.hidden]: hidden })} />
+);
diff --git a/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx b/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
index af9693a35b615..95b3184fe7fef 100644
--- a/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
+++ b/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
@@ -27,7 +27,7 @@ interface ReleaseStageBadgeProps {
 }
 
 export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({ stage, small, tooltip = true }) => {
-  if (!stage || stage === ReleaseStage.custom) {
+  if (!stage) {
     return null;
   }
 
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index f14cf07b329c2..8145299764402 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -527,7 +527,6 @@
   "admin.downloadSchedulerLogs": "Download Scheduler Logs",
   "admin.upgradeAll": "Upgrade all",
   "admin.upgraded": "Upgraded!",
-  "admin.customImage": "custom",
 
   "settings.accountSettings": "Account Settings",
   "settings.webhook": "Connection status Webhook",
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss
new file mode 100644
index 0000000000000..198355a346170
--- /dev/null
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss
@@ -0,0 +1,5 @@
+@use "scss/colors";
+
+.iconContainer {
+  height: 25px;
+}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx
index 93c9e035ceb4f..c96383128471a 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx
@@ -1,13 +1,14 @@
 import React from "react";
-import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import Indicator from "components/Indicator";
 import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+import { FlexContainer } from "components/ui/Flex";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
 import { getIcon } from "utils/imageUtils";
 
+import styles from "./ConnectorCell.module.scss";
+
 interface ConnectorCellProps {
   connectorName: string;
   img?: string;
@@ -15,43 +16,14 @@ interface ConnectorCellProps {
   releaseStage?: ReleaseStage;
 }
 
-const Content = styled.div<{ enabled?: boolean }>`
-  display: flex;
-  align-items: center;
-  padding-left: 30px;
-  position: relative;
-  margin: -5px 0;
-  min-width: 290px;
-  gap: 8px;
-`;
-
-const Image = styled.div`
-  height: 25px;
-  width: 17px;
-`;
-
-const Notification = styled(Indicator)`
-  position: absolute;
-  left: 8px;
-`;
-
-const CustomAnnotation = styled.span`
-  color: ${({ theme }) => theme.greyColor40};
-`;
-
 const ConnectorCell: React.FC<ConnectorCellProps> = ({ connectorName, img, hasUpdate, releaseStage }) => {
   return (
-    <Content>
-      {hasUpdate && <Notification />}
-      <Image>{getIcon(img)}</Image>
-      <span>{connectorName}</span>
+    <FlexContainer alignItems="center">
+      <Indicator hidden={!hasUpdate} />
+      <div className={styles.iconContainer}>{getIcon(img)}</div>
+      <div>{connectorName}</div>
       <ReleaseStageBadge small tooltip={false} stage={releaseStage} />
-      {releaseStage === "custom" && (
-        <CustomAnnotation>
-          (<FormattedMessage id="admin.customImage" />)
-        </CustomAnnotation>
-      )}
-    </Content>
+    </FlexContainer>
   );
 };
 
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
index 17d92ee1b1e64..a2367e9b97723 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
@@ -1,3 +1,6 @@
+@use "scss/variables";
+@use "scss/colors";
+
 .buttonsContainer {
   display: flex;
 }
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
index 21030a1999776..4d1e5a7e9b4e9 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -3,6 +3,9 @@ import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 
 import { HeadTitle } from "components/common/HeadTitle";
+import Indicator from "components/Indicator";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
+import { Heading } from "components/ui/Heading";
 import { Table } from "components/ui/Table";
 
 import { Connector, ConnectorDefinition } from "core/domain/connector";
@@ -15,7 +18,6 @@ import ConnectorCell from "./ConnectorCell";
 import styles from "./ConnectorsView.module.scss";
 import CreateConnector from "./CreateConnector";
 import ImageCell from "./ImageCell";
-import { Block, FormContentTitle, Title } from "./PageComponents";
 import UpgradeAllButton from "./UpgradeAllButton";
 import VersionCell from "./VersionCell";
 
@@ -69,7 +71,12 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
   const renderColumns = useCallback(
     (showVersionUpdateColumn: boolean) => [
       {
-        Header: <FormattedMessage id="admin.connectors" />,
+        Header: (
+          <FlexContainer>
+            <Indicator hidden />
+            <FormattedMessage id="admin.connectors" />
+          </FlexContainer>
+        ),
         accessor: "name",
         customWidth: 25,
         Cell: ({ cell, row }: CellProps<ConnectorDefinition>) => (
@@ -97,11 +104,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
       ...(showVersionUpdateColumn
         ? [
             {
-              Header: (
-                <FormContentTitle>
-                  <FormattedMessage id="admin.changeTo" />
-                </FormContentTitle>
-              ),
+              Header: <FormattedMessage id="admin.changeTo" />,
               accessor: "latestDockerImageTag",
               collapse: true,
               Cell: ({ cell, row }: CellProps<ConnectorDefinition>) =>
@@ -139,36 +142,46 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
     );
 
   return (
-    <>
+    <div className={styles.connectorsTable}>
       <HeadTitle
         titles={[{ id: "sidebar.settings" }, { id: type === "sources" ? "admin.sources" : "admin.destinations" }]}
       />
-      {usedConnectorsDefinitions.length > 0 && (
-        <Block>
-          <Title bold>
-            <FormattedMessage id={type === "sources" ? "admin.manageSource" : "admin.manageDestination"} />
-            {renderHeaderControls("used")}
-          </Title>
+      <FlexContainer direction="column" gap="2xl">
+        {usedConnectorsDefinitions.length > 0 && (
+          <FlexContainer direction="column">
+            <FlexContainer className={styles.title} alignItems="center">
+              <FlexItem grow>
+                <Heading as="h2">
+                  <FormattedMessage id={type === "sources" ? "admin.manageSource" : "admin.manageDestination"} />
+                </Heading>
+              </FlexItem>
+              {renderHeaderControls("used")}
+            </FlexContainer>
+            <Table
+              columns={renderColumns(showVersionUpdateColumn(usedConnectorsDefinitions))}
+              data={usedConnectorsDefinitions}
+              sortBy={defaultSorting}
+            />
+          </FlexContainer>
+        )}
+
+        <FlexContainer direction="column">
+          <FlexContainer className={styles.title} alignItems="center">
+            <FlexItem grow>
+              <Heading as="h2">
+                <FormattedMessage id={type === "sources" ? "admin.availableSource" : "admin.availableDestinations"} />
+              </Heading>
+            </FlexItem>
+            {renderHeaderControls("available")}
+          </FlexContainer>
           <Table
-            columns={renderColumns(showVersionUpdateColumn(usedConnectorsDefinitions))}
-            data={usedConnectorsDefinitions}
+            columns={renderColumns(showVersionUpdateColumn(availableConnectorDefinitions))}
+            data={availableConnectorDefinitions}
             sortBy={defaultSorting}
           />
-        </Block>
-      )}
-
-      <Block>
-        <Title bold>
-          <FormattedMessage id={type === "sources" ? "admin.availableSource" : "admin.availableDestinations"} />
-          {renderHeaderControls("available")}
-        </Title>
-        <Table
-          columns={renderColumns(showVersionUpdateColumn(availableConnectorDefinitions))}
-          data={availableConnectorDefinitions}
-          sortBy={defaultSorting}
-        />
-      </Block>
-    </>
+        </FlexContainer>
+      </FlexContainer>
+    </div>
   );
 };
 
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
index 69c0ffcad4837..3fc648add4bed 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 
 import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
 import { Input } from "components/ui/Input";
 
 import { DEV_IMAGE_TAG } from "core/domain/connector/constants";
@@ -95,27 +96,29 @@ const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, feedba
       >
         {({ isSubmitting, dirty }) => (
           <Form>
-            {renderFeedback(dirty, feedback)}
-            <Field name="version">
-              {({ field }: FieldProps<string>) => (
-                <InputField
-                  showNote={version === field.value}
-                  data-before={formatMessage({
-                    id: "admin.latestNote",
-                  })}
-                >
-                  <VersionInput {...field} type="text" autoComplete="off" />
-                </InputField>
-              )}
-            </Field>
-            <Button
-              size="xs"
-              isLoading={isSubmitting || updating}
-              type="submit"
-              disabled={(isSubmitting || !dirty) && !isConnectorUpdatable}
-            >
-              <FormattedMessage id="form.change" />
-            </Button>
+            <FlexContainer alignItems="center">
+              {renderFeedback(dirty, feedback)}
+              <Field name="version">
+                {({ field }: FieldProps<string>) => (
+                  <InputField
+                    showNote={version === field.value}
+                    data-before={formatMessage({
+                      id: "admin.latestNote",
+                    })}
+                  >
+                    <VersionInput {...field} type="text" autoComplete="off" />
+                  </InputField>
+                )}
+              </Field>
+              <Button
+                size="xs"
+                isLoading={isSubmitting || updating}
+                type="submit"
+                disabled={(isSubmitting || !dirty) && !isConnectorUpdatable}
+              >
+                <FormattedMessage id="form.change" />
+              </Button>
+            </FlexContainer>
           </Form>
         )}
       </Formik>
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
index f193a3f41e8c4..846c916719076 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
@@ -100,7 +100,7 @@ export const ConnectorForm: React.FC<ConnectorFormProps> = (props) => {
       onSubmit={onFormSubmit}
       enableReinitialize
     >
-      {({ dirty, resetForm }) => (
+      {({ dirty, resetForm, values }) => (
         <ConnectorFormContextProvider
           formType={formType}
           getValues={getValues}
@@ -110,6 +110,7 @@ export const ConnectorForm: React.FC<ConnectorFormProps> = (props) => {
           validationSchema={validationSchema}
           connectorId={connectorId}
         >
+          <pre>{JSON.stringify(values, null, 2)}</pre>
           <FormikPatch />
           <FormChangeTracker changed={dirty} formId={formId} />
           <FormRoot

From 9072c0f08683ccbe774f39c8b56a0753f2e6035a Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Wed, 18 Jan 2023 18:49:23 +0100
Subject: [PATCH 2/7] WIP

---
 .../pages/ConnectorsPage/DestinationsPage.tsx |  5 +++
 .../pages/ConnectorsPage/SourcesPage.tsx      |  5 +++
 .../components/ConnectorsView.module.scss     |  4 +++
 .../components/ConnectorsView.tsx             | 35 +++++++++----------
 .../components/UpgradeAllButton.tsx           |  4 ++-
 5 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx
index a2bf82cbe32ce..e61b4a0f6d481 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx
@@ -24,12 +24,14 @@ const DestinationsPage: React.FC = () => {
   const [feedbackList, setFeedbackList] = useState<Record<string, string>>({});
 
   const { mutateAsync: updateDestinationDefinition } = useUpdateDestinationDefinition();
+  const [updatingDefinitionId, setUpdatingDefinitionId] = useState<string>();
 
   const { hasNewDestinationVersion } = useGetConnectorsOutOfDate();
 
   const onUpdateVersion = useCallback(
     async ({ id, version }: { id: string; version: string }) => {
       try {
+        setUpdatingDefinitionId(id);
         await updateDestinationDefinition({
           destinationDefinitionId: id,
           dockerImageTag: version,
@@ -41,6 +43,8 @@ const DestinationsPage: React.FC = () => {
           ...feedbackList,
           [id]: formatMessage({ id: messageId }),
         });
+      } finally {
+        setUpdatingDefinitionId(undefined);
       }
     },
     [feedbackList, formatMessage, updateDestinationDefinition]
@@ -80,6 +84,7 @@ const DestinationsPage: React.FC = () => {
       onUpdateVersion={onUpdateVersion}
       usedConnectorsDefinitions={usedDestinationDefinitions}
       connectorsDefinitions={destinationDefinitions}
+      updatingDefinitionId={updatingDefinitionId}
       loading={loading}
       error={error}
       onUpdate={onUpdate}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx
index 5cc3a1fea402d..f654bed38fc3f 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx
@@ -21,6 +21,7 @@ const SourcesPage: React.FC = () => {
   const { sourceDefinitions } = useSourceDefinitionList();
 
   const { mutateAsync: updateSourceDefinition } = useUpdateSourceDefinition();
+  const [updatingDefinitionId, setUpdatingDefinitionId] = useState<string>();
 
   const { hasNewSourceVersion } = useGetConnectorsOutOfDate();
   const { updateAllSourceVersions } = useUpdateSourceDefinitions();
@@ -28,6 +29,7 @@ const SourcesPage: React.FC = () => {
   const onUpdateVersion = useCallback(
     async ({ id, version }: { id: string; version: string }) => {
       try {
+        setUpdatingDefinitionId(id);
         await updateSourceDefinition({
           sourceDefinitionId: id,
           dockerImageTag: version,
@@ -39,6 +41,8 @@ const SourcesPage: React.FC = () => {
           ...feedbackList,
           [id]: formatMessage({ id: messageId }),
         });
+      } finally {
+        setUpdatingDefinitionId(undefined);
       }
     },
     [feedbackList, formatMessage, updateSourceDefinition]
@@ -72,6 +76,7 @@ const SourcesPage: React.FC = () => {
     <ConnectorsView
       type="sources"
       loading={loading}
+      updatingDefinitionId={updatingDefinitionId}
       error={error}
       isUpdateSuccess={isUpdateSuccess}
       hasNewConnectorVersion={hasNewSourceVersion}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
index a2367e9b97723..c1af33cd97a09 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
@@ -4,3 +4,7 @@
 .buttonsContainer {
   display: flex;
 }
+
+.changeToHeader {
+  margin-left: 200px;
+}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
index 4d1e5a7e9b4e9..34ac5154ac625 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -3,7 +3,6 @@ import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 
 import { HeadTitle } from "components/common/HeadTitle";
-import Indicator from "components/Indicator";
 import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { Table } from "components/ui/Table";
@@ -28,6 +27,7 @@ interface ConnectorsViewProps {
   usedConnectorsDefinitions: SourceDefinitionRead[] | DestinationDefinitionRead[];
   connectorsDefinitions: SourceDefinitionRead[] | DestinationDefinitionRead[];
   loading: boolean;
+  updatingDefinitionId?: string;
   error?: Error;
   onUpdate: () => void;
   onUpdateVersion: ({ id, version }: { id: string; version: string }) => void;
@@ -44,6 +44,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
   hasNewConnectorVersion,
   usedConnectorsDefinitions,
   loading,
+  updatingDefinitionId,
   error,
   onUpdate,
   connectorsDefinitions,
@@ -71,12 +72,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
   const renderColumns = useCallback(
     (showVersionUpdateColumn: boolean) => [
       {
-        Header: (
-          <FlexContainer>
-            <Indicator hidden />
-            <FormattedMessage id="admin.connectors" />
-          </FlexContainer>
-        ),
+        Header: <FormattedMessage id="admin.connectors" />,
         accessor: "name",
         customWidth: 25,
         Cell: ({ cell, row }: CellProps<ConnectorDefinition>) => (
@@ -104,7 +100,11 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
       ...(showVersionUpdateColumn
         ? [
             {
-              Header: <FormattedMessage id="admin.changeTo" />,
+              Header: (
+                <div className={styles.changeToHeader}>
+                  <FormattedMessage id="admin.changeTo" />
+                </div>
+              ),
               accessor: "latestDockerImageTag",
               collapse: true,
               Cell: ({ cell, row }: CellProps<ConnectorDefinition>) =>
@@ -115,14 +115,14 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
                     onChange={onUpdateVersion}
                     feedback={feedbackList[Connector.id(row.original)]}
                     currentVersion={row.original.dockerImageTag}
-                    updating={loading}
+                    updating={loading || Connector.id(row.original) === updatingDefinitionId}
                   />
                 ) : null,
             },
           ]
         : []),
     ],
-    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion, feedbackList, loading]
+    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion, feedbackList, loading, updatingDefinitionId]
   );
 
   const renderHeaderControls = (section: "used" | "available") =>
@@ -130,14 +130,13 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
       (section === "available" && usedConnectorsDefinitions.length === 0)) && (
       <div className={styles.buttonsContainer}>
         {allowUploadCustomImage && <CreateConnector type={type} />}
-        {(hasNewConnectorVersion || isUpdateSuccess) && allowUpdateConnectors && (
-          <UpgradeAllButton
-            isLoading={loading}
-            hasError={!!error && !loading}
-            hasSuccess={isUpdateSuccess}
-            onUpdate={onUpdate}
-          />
-        )}
+        <UpgradeAllButton
+          disabled={!((hasNewConnectorVersion || isUpdateSuccess) && allowUpdateConnectors)}
+          isLoading={loading}
+          hasError={!!error && !loading}
+          hasSuccess={isUpdateSuccess}
+          onUpdate={onUpdate}
+        />
       </div>
     );
 
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/UpgradeAllButton.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/UpgradeAllButton.tsx
index 3f76768c2778e..720cdb379cb0c 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/UpgradeAllButton.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/UpgradeAllButton.tsx
@@ -35,9 +35,10 @@ interface UpdateAllButtonProps {
   isLoading: boolean;
   hasError: boolean;
   hasSuccess: boolean;
+  disabled: boolean;
 }
 
-const UpgradeAllButton: React.FC<UpdateAllButtonProps> = ({ onUpdate, isLoading, hasError, hasSuccess }) => {
+const UpgradeAllButton: React.FC<UpdateAllButtonProps> = ({ onUpdate, isLoading, hasError, hasSuccess, disabled }) => {
   return (
     <UpdateButtonContent>
       {hasError && (
@@ -51,6 +52,7 @@ const UpgradeAllButton: React.FC<UpdateAllButtonProps> = ({ onUpdate, isLoading,
         onClick={onUpdate}
         isLoading={isLoading}
         wasActive={hasSuccess}
+        disabled={disabled}
         icon={hasSuccess ? undefined : <TryArrow icon={faRedoAlt} />}
       >
         {hasSuccess ? <FormattedMessage id="admin.upgraded" /> : <FormattedMessage id="admin.upgradeAll" />}

From 79da160ae1ba7f5889b655aa3816f9de152514c2 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Thu, 19 Jan 2023 14:48:52 +0100
Subject: [PATCH 3/7] wip

---
 .../pages/ConnectorsPage/components/PageComponents.tsx      | 6 +-----
 .../src/views/Connector/ConnectorForm/ConnectorForm.tsx     | 3 +--
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
index 31a9eaff246da..5a41ebc1b5db0 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
@@ -20,8 +20,4 @@ const FormContent = styled.div`
   position: relative;
 `;
 
-const FormContentTitle = styled(FormContent)`
-  margin: 0 0 0 200px;
-`;
-
-export { Title, Block, FormContent, FormContentTitle };
+export { Title, Block, FormContent };
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
index 846c916719076..f193a3f41e8c4 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
@@ -100,7 +100,7 @@ export const ConnectorForm: React.FC<ConnectorFormProps> = (props) => {
       onSubmit={onFormSubmit}
       enableReinitialize
     >
-      {({ dirty, resetForm, values }) => (
+      {({ dirty, resetForm }) => (
         <ConnectorFormContextProvider
           formType={formType}
           getValues={getValues}
@@ -110,7 +110,6 @@ export const ConnectorForm: React.FC<ConnectorFormProps> = (props) => {
           validationSchema={validationSchema}
           connectorId={connectorId}
         >
-          <pre>{JSON.stringify(values, null, 2)}</pre>
           <FormikPatch />
           <FormChangeTracker changed={dirty} formId={formId} />
           <FormRoot

From d3fc6271eda0947c619f38a0a551c65b78afcaad Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Thu, 19 Jan 2023 15:58:33 +0100
Subject: [PATCH 4/7] more fixes

---
 .../components/ConnectorCell.module.scss      |   2 -
 .../components/ConnectorCell.tsx              |   2 +-
 .../components/ConnectorsView.module.scss     |   7 +
 .../components/ConnectorsView.tsx             |  79 ++--
 .../components/ConnectorsViewContext.tsx      |  17 +
 .../CreateConnectorModal.module.scss          |  11 +-
 .../components/CreateConnectorModal.tsx       | 365 +++++++-----------
 .../components/PageComponents.tsx             |  23 --
 .../components/VersionCell.module.scss        |   9 +
 .../ConnectorsPage/components/VersionCell.tsx | 109 ++----
 10 files changed, 275 insertions(+), 349 deletions(-)
 create mode 100644 airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx
 delete mode 100644 airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
 create mode 100644 airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss
index 198355a346170..6b42d01a2f870 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss
@@ -1,5 +1,3 @@
-@use "scss/colors";
-
 .iconContainer {
   height: 25px;
 }
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx
index c96383128471a..bc8640a193087 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx
@@ -18,7 +18,7 @@ interface ConnectorCellProps {
 
 const ConnectorCell: React.FC<ConnectorCellProps> = ({ connectorName, img, hasUpdate, releaseStage }) => {
   return (
-    <FlexContainer alignItems="center">
+    <FlexContainer alignItems="center" gap="lg">
       <Indicator hidden={!hasUpdate} />
       <div className={styles.iconContainer}>{getIcon(img)}</div>
       <div>{connectorName}</div>
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
index c1af33cd97a09..1444a9ecb85de 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
@@ -8,3 +8,10 @@
 .changeToHeader {
   margin-left: 200px;
 }
+
+.connectorsTable {
+  td {
+    padding-top: variables.$spacing-sm;
+    padding-bottom: variables.$spacing-sm;
+  }
+}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
index 34ac5154ac625..da4d71f12afd5 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 
@@ -15,6 +15,7 @@ import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 
 import ConnectorCell from "./ConnectorCell";
 import styles from "./ConnectorsView.module.scss";
+import { ConnectorsViewContext } from "./ConnectorsViewContext";
 import CreateConnector from "./CreateConnector";
 import ImageCell from "./ImageCell";
 import UpgradeAllButton from "./UpgradeAllButton";
@@ -115,14 +116,13 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
                     onChange={onUpdateVersion}
                     feedback={feedbackList[Connector.id(row.original)]}
                     currentVersion={row.original.dockerImageTag}
-                    updating={loading || Connector.id(row.original) === updatingDefinitionId}
                   />
                 ) : null,
             },
           ]
         : []),
     ],
-    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion, feedbackList, loading, updatingDefinitionId]
+    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion, feedbackList]
   );
 
   const renderHeaderControls = (section: "used" | "available") =>
@@ -140,47 +140,58 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
       </div>
     );
 
+  const ctx = useMemo(
+    () => ({
+      updatingAll: loading,
+      updatingDefinitionId,
+    }),
+    [loading, updatingDefinitionId]
+  );
+
+  const usedDefinitionColumns = useMemo(
+    () => renderColumns(showVersionUpdateColumn(usedConnectorsDefinitions)),
+    [renderColumns, showVersionUpdateColumn, usedConnectorsDefinitions]
+  );
+  const availableDefinitionColumns = useMemo(
+    () => renderColumns(showVersionUpdateColumn(availableConnectorDefinitions)),
+    [renderColumns, showVersionUpdateColumn, availableConnectorDefinitions]
+  );
+
   return (
-    <div className={styles.connectorsTable}>
-      <HeadTitle
-        titles={[{ id: "sidebar.settings" }, { id: type === "sources" ? "admin.sources" : "admin.destinations" }]}
-      />
-      <FlexContainer direction="column" gap="2xl">
-        {usedConnectorsDefinitions.length > 0 && (
+    <ConnectorsViewContext.Provider value={ctx}>
+      <div className={styles.connectorsTable}>
+        <HeadTitle
+          titles={[{ id: "sidebar.settings" }, { id: type === "sources" ? "admin.sources" : "admin.destinations" }]}
+        />
+        <FlexContainer direction="column" gap="2xl">
+          {usedConnectorsDefinitions.length > 0 && (
+            <FlexContainer direction="column">
+              <FlexContainer className={styles.title} alignItems="center">
+                <FlexItem grow>
+                  <Heading as="h2">
+                    <FormattedMessage id={type === "sources" ? "admin.manageSource" : "admin.manageDestination"} />
+                  </Heading>
+                </FlexItem>
+                {renderHeaderControls("used")}
+              </FlexContainer>
+              <Table columns={usedDefinitionColumns} data={usedConnectorsDefinitions} sortBy={defaultSorting} />
+            </FlexContainer>
+          )}
+
           <FlexContainer direction="column">
             <FlexContainer className={styles.title} alignItems="center">
               <FlexItem grow>
                 <Heading as="h2">
-                  <FormattedMessage id={type === "sources" ? "admin.manageSource" : "admin.manageDestination"} />
+                  <FormattedMessage id={type === "sources" ? "admin.availableSource" : "admin.availableDestinations"} />
                 </Heading>
               </FlexItem>
-              {renderHeaderControls("used")}
+              {renderHeaderControls("available")}
             </FlexContainer>
-            <Table
-              columns={renderColumns(showVersionUpdateColumn(usedConnectorsDefinitions))}
-              data={usedConnectorsDefinitions}
-              sortBy={defaultSorting}
-            />
-          </FlexContainer>
-        )}
-
-        <FlexContainer direction="column">
-          <FlexContainer className={styles.title} alignItems="center">
-            <FlexItem grow>
-              <Heading as="h2">
-                <FormattedMessage id={type === "sources" ? "admin.availableSource" : "admin.availableDestinations"} />
-              </Heading>
-            </FlexItem>
-            {renderHeaderControls("available")}
+            <Table columns={availableDefinitionColumns} data={availableConnectorDefinitions} sortBy={defaultSorting} />
           </FlexContainer>
-          <Table
-            columns={renderColumns(showVersionUpdateColumn(availableConnectorDefinitions))}
-            data={availableConnectorDefinitions}
-            sortBy={defaultSorting}
-          />
         </FlexContainer>
-      </FlexContainer>
-    </div>
+      </div>
+    </ConnectorsViewContext.Provider>
   );
 };
 
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx
new file mode 100644
index 0000000000000..77c2568495788
--- /dev/null
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx
@@ -0,0 +1,17 @@
+import React, { useContext } from "react";
+
+interface Context {
+  updatingAll: boolean;
+  updatingDefinitionId?: string;
+}
+
+export const useUpdatingState = (): Context => {
+  const updatingState = useContext(ConnectorsViewContext);
+  if (!updatingState) {
+    throw new Error("useUpdatingState must be used within a ConnectorsViewContext.");
+  }
+
+  return updatingState;
+};
+
+export const ConnectorsViewContext = React.createContext<Context | null>(null);
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss
index c1e94076bed6d..bb16f4688ddd1 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.module.scss
@@ -1,5 +1,10 @@
-@use "scss/variables";
+@use "scss/colors";
 
-.buttonWithMargin {
-  margin: 0 variables.$spacing-md;
+.errorMessage {
+  color: colors.$red;
+}
+
+.docLink {
+  text-decoration: none;
+  display: inline-block;
 }
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
index dcb33b8787ed9..e3219209729d9 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
@@ -1,13 +1,12 @@
 import { Field, FieldProps, Form, Formik } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import styled from "styled-components";
 import * as yup from "yup";
 
-import { LabeledInput, Link } from "components";
+import { LabeledInput } from "components";
 import { Button } from "components/ui/Button";
-import { Modal } from "components/ui/Modal";
-import { StatusIcon } from "components/ui/StatusIcon";
+import { FlexContainer } from "components/ui/Flex";
+import { Modal, ModalBody, ModalFooter } from "components/ui/Modal";
 import { Text } from "components/ui/Text";
 
 import { isCloudApp } from "utils/app";
@@ -25,60 +24,6 @@ export interface CreateConnectorModalProps {
     dockerRepository: string;
   }) => Promise<void>;
 }
-
-const Content = styled.div`
-  width: 585px;
-  padding: 19px 41px 30px 36px;
-`;
-
-const ButtonContent = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 40px;
-`;
-
-const FieldContainer = styled.div`
-  margin-bottom: 21px;
-`;
-
-const Subtitle = styled.div`
-  margin-bottom: 26px;
-  font-size: 14px;
-  line-height: 21px;
-  color: ${({ theme }) => theme.darkPrimaryColor};
-`;
-
-const DocLink = styled(Link).attrs({ as: "a" })`
-  text-decoration: none;
-  display: inline-block;
-`;
-
-const Error = styled(StatusIcon)`
-  padding-top: 4px;
-  padding-left: 1px;
-  font-size: 17px;
-  width: 26px;
-  min-width: 26px;
-  height: 26px;
-`;
-
-const ErrorBlock = styled.div`
-  display: flex;
-  justify-content: right;
-  align-items: center;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  color: ${({ theme }) => theme.darkPrimaryColor};
-  max-width: 320px;
-`;
-
-const ErrorText = styled.div`
-  font-weight: normal;
-  color: ${({ theme }) => theme.dangerColor};
-  max-width: 400px;
-`;
 const validationSchema = yup.object().shape({
   name: yup.string().trim().required("form.empty.error"),
   documentationUrl: yup.string().trim().url("form.url.error").notRequired(),
@@ -98,167 +43,149 @@ const CreateConnectorModal: React.FC<CreateConnectorModalProps> = ({ onClose, on
   const { formatMessage } = useIntl();
 
   return (
-    <Modal onClose={onClose} title={<FormattedMessage id="admin.addNewConnector" />}>
-      <Content>
-        <Subtitle>
-          <FormattedMessage
-            id="admin.learnMore"
-            values={{
-              lnk: (lnk: React.ReactNode) => (
-                <DocLink target="_blank" href={links.docsLink} as="a">
-                  {lnk}
-                </DocLink>
-              ),
-            }}
-          />
-        </Subtitle>
-        <Formik
-          initialValues={{
-            name: "",
-            documentationUrl: "",
-            dockerImageTag: "",
-            dockerRepository: "",
-          }}
-          validationSchema={validationSchema}
-          onSubmit={async (values, { setSubmitting }) => {
-            await onSubmit(values);
-            setSubmitting(false);
-          }}
-        >
-          {({ isSubmitting, isValid, dirty }) => (
-            <Form>
-              <FieldContainer>
-                <Field name="name">
-                  {({ field, meta }: FieldProps<string>) => (
-                    <LabeledInput
-                      {...field}
-                      type="text"
-                      placeholder={formatMessage({
-                        id: "admin.connectorName.placeholder",
-                      })}
-                      label={
-                        <Label>
-                          <FormattedMessage id="admin.connectorName" />
-                        </Label>
-                      }
-                      error={meta.touched && !!meta.error}
-                      message={
-                        meta.touched && meta.error ? (
-                          <FormattedMessage id={meta.error} />
-                        ) : (
-                          <FormattedMessage id="form.empty.error" />
-                        )
-                      }
-                    />
-                  )}
-                </Field>
-              </FieldContainer>
-              <FieldContainer>
-                <Field name="dockerRepository">
-                  {({ field, meta }: FieldProps<string>) => (
-                    <LabeledInput
-                      {...field}
-                      type="text"
-                      autoComplete="off"
-                      placeholder={formatMessage({
-                        id: "admin.dockerRepository.placeholder",
-                      })}
-                      label={
-                        <Label>
-                          <FormattedMessage
-                            id={isCloudApp() ? "admin.dockerFullImageName" : "admin.dockerRepository"}
-                          />
-                        </Label>
-                      }
-                      error={meta.touched && !!meta.error}
-                      message={
-                        meta.touched && meta.error ? (
-                          <FormattedMessage id={meta.error} />
-                        ) : (
-                          <FormattedMessage id="form.empty.error" />
-                        )
-                      }
-                    />
-                  )}
-                </Field>
-              </FieldContainer>
-              <FieldContainer>
-                <Field name="dockerImageTag">
-                  {({ field, meta }: FieldProps<string>) => (
-                    <LabeledInput
-                      {...field}
-                      type="text"
-                      autoComplete="off"
-                      placeholder={formatMessage({
-                        id: "admin.dockerImageTag.placeholder",
-                      })}
-                      label={
-                        <Label>
-                          <FormattedMessage id="admin.dockerImageTag" />
-                        </Label>
-                      }
-                      error={!!meta.error && meta.touched}
-                      message={
-                        meta.touched && meta.error ? (
-                          <FormattedMessage id={meta.error} />
-                        ) : (
-                          <FormattedMessage id="form.empty.error" />
-                        )
-                      }
-                    />
-                  )}
-                </Field>
-              </FieldContainer>
-              <FieldContainer>
-                <Field name="documentationUrl">
-                  {({ field, meta }: FieldProps<string>) => (
-                    <LabeledInput
-                      {...field}
-                      type="text"
-                      autoComplete="off"
-                      placeholder={formatMessage({
-                        id: "admin.documentationUrl.placeholder",
-                      })}
-                      label={
-                        <Label>
-                          <FormattedMessage id="admin.documentationUrl" />
-                        </Label>
-                      }
-                      error={meta.touched && !!meta.error}
-                      message={meta.error && <FormattedMessage id={meta.error} />}
-                    />
-                  )}
-                </Field>
-              </FieldContainer>
-              <ButtonContent>
-                {errorMessage ? (
-                  <ErrorBlock>
-                    <Error />
-                    <ErrorText>{errorMessage}</ErrorText>
-                  </ErrorBlock>
-                ) : (
-                  <div />
-                )}
-                <div>
-                  <Button
-                    className={styles.buttonWithMargin}
-                    onClick={onClose}
-                    type="button"
-                    variant="secondary"
-                    disabled={isSubmitting}
-                  >
-                    <FormattedMessage id="form.cancel" />
-                  </Button>
-                  <Button type="submit" disabled={isSubmitting || !dirty || !isValid} isLoading={isSubmitting}>
-                    <FormattedMessage id="form.add" />
-                  </Button>
-                </div>
-              </ButtonContent>
-            </Form>
-          )}
-        </Formik>
-      </Content>
-    </Modal>
+    <Formik
+      initialValues={{
+        name: "",
+        documentationUrl: "",
+        dockerImageTag: "",
+        dockerRepository: "",
+      }}
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setSubmitting }) => {
+        await onSubmit(values);
+        setSubmitting(false);
+      }}
+    >
+      {({ isSubmitting, isValid, dirty }) => (
+        <Modal onClose={onClose} title={<FormattedMessage id="admin.addNewConnector" />}>
+          <Form>
+            <ModalBody>
+              <FlexContainer direction="column" gap="xl">
+                <Text>
+                  <FormattedMessage
+                    id="admin.learnMore"
+                    values={{
+                      lnk: (lnk: React.ReactNode) => (
+                        <a className={styles.docLink} target="_blank" href={links.docsLink} rel="noreferrer">
+                          {lnk}
+                        </a>
+                      ),
+                    }}
+                  />
+                </Text>
+                <FlexContainer direction="column">
+                  <Field name="name">
+                    {({ field, meta }: FieldProps<string>) => (
+                      <LabeledInput
+                        {...field}
+                        type="text"
+                        placeholder={formatMessage({
+                          id: "admin.connectorName.placeholder",
+                        })}
+                        label={
+                          <Label>
+                            <FormattedMessage id="admin.connectorName" />
+                          </Label>
+                        }
+                        error={meta.touched && !!meta.error}
+                        message={
+                          meta.touched && meta.error ? (
+                            <FormattedMessage id={meta.error} />
+                          ) : (
+                            <FormattedMessage id="form.empty.error" />
+                          )
+                        }
+                      />
+                    )}
+                  </Field>
+                  <Field name="dockerRepository">
+                    {({ field, meta }: FieldProps<string>) => (
+                      <LabeledInput
+                        {...field}
+                        type="text"
+                        autoComplete="off"
+                        placeholder={formatMessage({
+                          id: "admin.dockerRepository.placeholder",
+                        })}
+                        label={
+                          <Label>
+                            <FormattedMessage
+                              id={isCloudApp() ? "admin.dockerFullImageName" : "admin.dockerRepository"}
+                            />
+                          </Label>
+                        }
+                        error={meta.touched && !!meta.error}
+                        message={
+                          meta.touched && meta.error ? (
+                            <FormattedMessage id={meta.error} />
+                          ) : (
+                            <FormattedMessage id="form.empty.error" />
+                          )
+                        }
+                      />
+                    )}
+                  </Field>
+                  <Field name="dockerImageTag">
+                    {({ field, meta }: FieldProps<string>) => (
+                      <LabeledInput
+                        {...field}
+                        type="text"
+                        autoComplete="off"
+                        placeholder={formatMessage({
+                          id: "admin.dockerImageTag.placeholder",
+                        })}
+                        label={
+                          <Label>
+                            <FormattedMessage id="admin.dockerImageTag" />
+                          </Label>
+                        }
+                        error={!!meta.error && meta.touched}
+                        message={
+                          meta.touched && meta.error ? (
+                            <FormattedMessage id={meta.error} />
+                          ) : (
+                            <FormattedMessage id="form.empty.error" />
+                          )
+                        }
+                      />
+                    )}
+                  </Field>
+                  <Field name="documentationUrl">
+                    {({ field, meta }: FieldProps<string>) => (
+                      <LabeledInput
+                        {...field}
+                        type="text"
+                        autoComplete="off"
+                        placeholder={formatMessage({
+                          id: "admin.documentationUrl.placeholder",
+                        })}
+                        label={
+                          <Label>
+                            <FormattedMessage id="admin.documentationUrl" />
+                          </Label>
+                        }
+                        error={meta.touched && !!meta.error}
+                        message={meta.error && <FormattedMessage id={meta.error} />}
+                      />
+                    )}
+                  </Field>
+
+                  {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+                </FlexContainer>
+              </FlexContainer>
+            </ModalBody>
+            <ModalFooter>
+              <Button onClick={onClose} type="button" variant="secondary" disabled={isSubmitting}>
+                <FormattedMessage id="form.cancel" />
+              </Button>
+              <Button type="submit" disabled={isSubmitting || !dirty || !isValid} isLoading={isSubmitting}>
+                <FormattedMessage id="form.add" />
+              </Button>
+            </ModalFooter>
+          </Form>
+        </Modal>
+      )}
+    </Formik>
   );
 };
 
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
deleted file mode 100644
index 5a41ebc1b5db0..0000000000000
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from "styled-components";
-
-import { H5 } from "components/base/Titles";
-
-const Title = styled(H5)`
-  color: ${({ theme }) => theme.darkPrimaryColor};
-  margin-bottom: 19px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-const Block = styled.div`
-  margin-bottom: 56px;
-`;
-
-const FormContent = styled.div`
-  width: 253px;
-  margin: -10px 0 -10px 200px;
-  position: relative;
-`;
-
-export { Title, Block, FormContent };
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss
new file mode 100644
index 0000000000000..e5316ff1abc49
--- /dev/null
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss
@@ -0,0 +1,9 @@
+@use "scss/colors";
+
+.errorMessage {
+  color: colors.$red;
+}
+
+.versionCell {
+  width: 450px;
+}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
index 3fc648add4bed..461651e7f40cb 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
@@ -4,12 +4,13 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 
 import { Button } from "components/ui/Button";
-import { FlexContainer } from "components/ui/Flex";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Input } from "components/ui/Input";
 
 import { DEV_IMAGE_TAG } from "core/domain/connector/constants";
 
-import { FormContent } from "./PageComponents";
+import { useUpdatingState } from "./ConnectorsViewContext";
+import styles from "./VersionCell.module.scss";
 
 interface VersionCellProps {
   version: string;
@@ -17,7 +18,6 @@ interface VersionCellProps {
   id: string;
   onChange: ({ version, id }: { version: string; id: string }) => void;
   feedback?: "success" | string;
-  updating: boolean;
 }
 
 const VersionInput = styled(Input)`
@@ -45,40 +45,17 @@ const InputField = styled.div<{ showNote?: boolean }>`
   }
 `;
 
-const SuccessMessage = styled.div`
-  color: ${({ theme }) => theme.successColor};
-  font-size: 12px;
-  line-height: 18px;
-  position: absolute;
-  text-align: right;
-  width: 205px;
-  left: -208px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  white-space: break-spaces;
-`;
-
-const ErrorMessage = styled(SuccessMessage)`
-  color: ${({ theme }) => theme.dangerColor};
-  font-size: 11px;
-  line-height: 14px;
-`;
-
-const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, feedback, currentVersion, updating }) => {
+const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, feedback, currentVersion }) => {
+  const { updatingAll, updatingDefinitionId } = useUpdatingState();
+  const updatingCurrent = id === updatingDefinitionId;
   const { formatMessage } = useIntl();
 
   const renderFeedback = (dirty: boolean, feedback?: string) => {
     if (feedback && !dirty) {
       if (feedback === "success") {
-        return (
-          <SuccessMessage>
-            <FormattedMessage id="form.savedChange" />
-          </SuccessMessage>
-        );
+        return <FormattedMessage id="form.savedChange" />;
       }
-      return <ErrorMessage>{feedback}</ErrorMessage>;
+      return <span className={styles.errorMessage}>{feedback}</span>;
     }
 
     return null;
@@ -87,42 +64,40 @@ const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, feedba
   const isConnectorUpdatable = currentVersion !== version || currentVersion === DEV_IMAGE_TAG;
 
   return (
-    <FormContent>
-      <Formik
-        initialValues={{
-          version,
-        }}
-        onSubmit={(values) => onChange({ id, version: values.version })}
-      >
-        {({ isSubmitting, dirty }) => (
-          <Form>
-            <FlexContainer alignItems="center">
-              {renderFeedback(dirty, feedback)}
-              <Field name="version">
-                {({ field }: FieldProps<string>) => (
-                  <InputField
-                    showNote={version === field.value}
-                    data-before={formatMessage({
-                      id: "admin.latestNote",
-                    })}
-                  >
-                    <VersionInput {...field} type="text" autoComplete="off" />
-                  </InputField>
-                )}
-              </Field>
-              <Button
-                size="xs"
-                isLoading={isSubmitting || updating}
-                type="submit"
-                disabled={(isSubmitting || !dirty) && !isConnectorUpdatable}
-              >
-                <FormattedMessage id="form.change" />
-              </Button>
-            </FlexContainer>
-          </Form>
-        )}
-      </Formik>
-    </FormContent>
+    <Formik
+      initialValues={{
+        version,
+      }}
+      onSubmit={(values) => onChange({ id, version: values.version })}
+    >
+      {({ isSubmitting, dirty }) => (
+        <Form>
+          <FlexContainer justifyContent="flex-end" alignItems="center" className={styles.versionCell}>
+            <FlexItem>{renderFeedback(dirty, feedback)}</FlexItem>
+            <Field name="version">
+              {({ field }: FieldProps<string>) => (
+                <InputField
+                  showNote={version === field.value}
+                  data-before={formatMessage({
+                    id: "admin.latestNote",
+                  })}
+                >
+                  <VersionInput {...field} type="text" autoComplete="off" />
+                </InputField>
+              )}
+            </Field>
+            <Button
+              size="xs"
+              isLoading={(updatingAll && isConnectorUpdatable) || updatingCurrent}
+              type="submit"
+              disabled={(isSubmitting || !dirty) && !isConnectorUpdatable}
+            >
+              <FormattedMessage id="form.change" />
+            </Button>
+          </FlexContainer>
+        </Form>
+      )}
+    </Formik>
   );
 };
 

From dbbfc23ba52a6cd6d0e2ec1ce95b83cac2b871ec Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Thu, 19 Jan 2023 17:13:57 +0100
Subject: [PATCH 5/7] fix test

---
 .../FrequentlyUsedConnectorsCard.test.tsx.snap           | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap b/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap
index 1233916b162d2..f3ed2ee1c6dbd 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/FrequentlyUsedConnectors/__snapshots__/FrequentlyUsedConnectorsCard.test.tsx.snap
@@ -246,6 +246,15 @@ exports[`<mockFrequentlyUsedConnectors /> should renders with mock data without
                           >
                             MongoDB
                           </div>
+                          <span
+                            class="<removed-for-snapshot-test>"
+                          >
+                            <div
+                              class="<removed-for-snapshot-test>"
+                            >
+                              Custom
+                            </div>
+                          </span>
                         </div>
                       </div>
                     </div>

From a70a3c7391a36ff3911865bfdcc9da01c839ba81 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Fri, 20 Jan 2023 13:50:44 +0100
Subject: [PATCH 6/7] remove some more styled components and improve
 memoization

---
 .../pages/ConnectorsPage/SourcesPage.tsx      | 10 +++--
 .../components/ConnectorsView.tsx             |  6 +--
 .../components/ConnectorsViewContext.tsx      |  1 +
 .../components/VersionCell.module.scss        | 26 ++++++++++++
 .../ConnectorsPage/components/VersionCell.tsx | 40 ++++---------------
 5 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx
index f654bed38fc3f..8fb1707dbb268 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useAsyncFn } from "react-use";
 
@@ -15,6 +15,8 @@ const SourcesPage: React.FC = () => {
 
   const [isUpdateSuccess, setIsUpdateSuccess] = useState(false);
   const [feedbackList, setFeedbackList] = useState<Record<string, string>>({});
+  const feedbackListRef = useRef(feedbackList);
+  feedbackListRef.current = feedbackList;
 
   const { formatMessage } = useIntl();
   const { sources } = useSourceList();
@@ -34,18 +36,18 @@ const SourcesPage: React.FC = () => {
           sourceDefinitionId: id,
           dockerImageTag: version,
         });
-        setFeedbackList({ ...feedbackList, [id]: "success" });
+        setFeedbackList({ ...feedbackListRef.current, [id]: "success" });
       } catch (e) {
         const messageId = e.status === 422 ? "form.imageCannotFound" : "form.someError";
         setFeedbackList({
-          ...feedbackList,
+          ...feedbackListRef.current,
           [id]: formatMessage({ id: messageId }),
         });
       } finally {
         setUpdatingDefinitionId(undefined);
       }
     },
-    [feedbackList, formatMessage, updateSourceDefinition]
+    [formatMessage, updateSourceDefinition]
   );
 
   const usedSourcesDefinitions: SourceDefinitionRead[] = useMemo(() => {
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
index da4d71f12afd5..572f5eabdc47f 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -114,7 +114,6 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
                     version={cell.value || row.original.dockerImageTag}
                     id={Connector.id(row.original)}
                     onChange={onUpdateVersion}
-                    feedback={feedbackList[Connector.id(row.original)]}
                     currentVersion={row.original.dockerImageTag}
                   />
                 ) : null,
@@ -122,7 +121,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
           ]
         : []),
     ],
-    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion, feedbackList]
+    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion]
   );
 
   const renderHeaderControls = (section: "used" | "available") =>
@@ -144,8 +143,9 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
     () => ({
       updatingAll: loading,
       updatingDefinitionId,
+      feedbackList,
     }),
-    [loading, updatingDefinitionId]
+    [feedbackList, loading, updatingDefinitionId]
   );
 
   const usedDefinitionColumns = useMemo(
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx
index 77c2568495788..6396c032d8bb3 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx
@@ -3,6 +3,7 @@ import React, { useContext } from "react";
 interface Context {
   updatingAll: boolean;
   updatingDefinitionId?: string;
+  feedbackList: Record<string, string>;
 }
 
 export const useUpdatingState = (): Context => {
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss
index e5316ff1abc49..9cdcb2d1f495b 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss
@@ -7,3 +7,29 @@
 .versionCell {
   width: 450px;
 }
+
+.versionInput {
+  max-width: 145px;
+  margin-right: 19px;
+}
+
+.inputField {
+  display: inline-block;
+  position: relative;
+  background: colors.$white;
+
+  &::before {
+    position: absolute;
+    display: block;
+    pointer-events: none;
+    content: attr(data-before);
+    color: colors.$grey-400;
+    top: 10px;
+    right: 22px;
+    z-index: 3;
+  }
+
+  &:focus-within::before {
+    display: none;
+  }
+}
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
index 461651e7f40cb..b28c504e52bdc 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
@@ -1,7 +1,6 @@
 import { Field, FieldProps, Form, Formik } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import styled from "styled-components";
 
 import { Button } from "components/ui/Button";
 import { FlexContainer, FlexItem } from "components/ui/Flex";
@@ -17,36 +16,11 @@ interface VersionCellProps {
   currentVersion: string;
   id: string;
   onChange: ({ version, id }: { version: string; id: string }) => void;
-  feedback?: "success" | string;
 }
 
-const VersionInput = styled(Input)`
-  max-width: 145px;
-  margin-right: 19px;
-`;
-
-const InputField = styled.div<{ showNote?: boolean }>`
-  display: inline-block;
-  position: relative;
-  background: ${({ theme }) => theme.whiteColor};
-
-  &:before {
-    position: absolute;
-    display: ${({ showNote }) => (showNote ? "block" : "none")};
-    content: attr(data-before);
-    color: ${({ theme }) => theme.greyColor40};
-    top: 10px;
-    right: 22px;
-    z-index: 3;
-  }
-
-  &:focus-within:before {
-    display: none;
-  }
-`;
-
-const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, feedback, currentVersion }) => {
-  const { updatingAll, updatingDefinitionId } = useUpdatingState();
+const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, currentVersion }) => {
+  const { updatingAll, updatingDefinitionId, feedbackList } = useUpdatingState();
+  const feedback = feedbackList[id];
   const updatingCurrent = id === updatingDefinitionId;
   const { formatMessage } = useIntl();
 
@@ -76,14 +50,14 @@ const VersionCell: React.FC<VersionCellProps> = ({ id, version, onChange, feedba
             <FlexItem>{renderFeedback(dirty, feedback)}</FlexItem>
             <Field name="version">
               {({ field }: FieldProps<string>) => (
-                <InputField
-                  showNote={version === field.value}
+                <div
+                  className={styles.inputField}
                   data-before={formatMessage({
                     id: "admin.latestNote",
                   })}
                 >
-                  <VersionInput {...field} type="text" autoComplete="off" />
-                </InputField>
+                  <Input {...field} className={styles.versionInput} type="text" autoComplete="off" />
+                </div>
               )}
             </Field>
             <Button

From 121d1776b414097ad2c68799c368a20f9386aaa3 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Thu, 26 Jan 2023 12:09:59 +0100
Subject: [PATCH 7/7] review comment

---
 .../pages/ConnectorsPage/DestinationsPage.tsx          | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx
index e61b4a0f6d481..be4e3d3696b61 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useAsyncFn } from "react-use";
 
@@ -22,6 +22,8 @@ const DestinationsPage: React.FC = () => {
   const { destinations } = useDestinationList();
 
   const [feedbackList, setFeedbackList] = useState<Record<string, string>>({});
+  const feedbackListRef = useRef(feedbackList);
+  feedbackListRef.current = feedbackList;
 
   const { mutateAsync: updateDestinationDefinition } = useUpdateDestinationDefinition();
   const [updatingDefinitionId, setUpdatingDefinitionId] = useState<string>();
@@ -36,18 +38,18 @@ const DestinationsPage: React.FC = () => {
           destinationDefinitionId: id,
           dockerImageTag: version,
         });
-        setFeedbackList({ ...feedbackList, [id]: "success" });
+        setFeedbackList({ ...feedbackListRef.current, [id]: "success" });
       } catch (e) {
         const messageId = e.status === 422 ? "form.imageCannotFound" : "form.someError";
         setFeedbackList({
-          ...feedbackList,
+          ...feedbackListRef.current,
           [id]: formatMessage({ id: messageId }),
         });
       } finally {
         setUpdatingDefinitionId(undefined);
       }
     },
-    [feedbackList, formatMessage, updateDestinationDefinition]
+    [formatMessage, updateDestinationDefinition]
   );
 
   const usedDestinationDefinitions = useMemo<DestinationDefinitionRead[]>(() => {