From c7b6e249ac8d76d17471265cf0404fdac0d43e4c Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Thu, 26 Jan 2023 16:48:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=F0=9F=94=A7=20Refactor=20Connector?=
 =?UTF-8?q?sView=20(#21531)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* WIP

* WIP

* wip

* more fixes

* fix test

* remove some more styled components and improve memoization

* review comment
---
 .../Indicator/Indicator.module.scss           |  12 +
 .../src/components/Indicator/Indicator.tsx    |  21 +-
 .../ReleaseStageBadge/ReleaseStageBadge.tsx   |   2 +-
 airbyte-webapp/src/locales/en.json            |   1 -
 .../pages/ConnectorsPage/DestinationsPage.tsx |  15 +-
 .../pages/ConnectorsPage/SourcesPage.tsx      |  15 +-
 .../components/ConnectorCell.module.scss      |   3 +
 .../components/ConnectorCell.tsx              |  44 +--
 .../components/ConnectorsView.module.scss     |  13 +
 .../components/ConnectorsView.tsx             | 112 +++---
 .../components/ConnectorsViewContext.tsx      |  18 +
 .../CreateConnectorModal.module.scss          |  11 +-
 .../components/CreateConnectorModal.tsx       | 365 +++++++-----------
 .../components/PageComponents.tsx             |  11 -
 .../components/UpgradeAllButton.tsx           |   4 +-
 .../components/VersionCell.module.scss        |  35 ++
 .../ConnectorsPage/components/VersionCell.tsx | 120 ++----
 ...FrequentlyUsedConnectorsCard.test.tsx.snap |   9 +
 18 files changed, 394 insertions(+), 417 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
 create mode 100644 airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
 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/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 857cd5244d5c4..c1ad9e6aa5dc5 100644
--- a/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
+++ b/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
@@ -26,7 +26,7 @@ export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({
 }) => {
   const { formatMessage } = useIntl();
 
-  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 aca562d81eb8d..2765d6f1a38bc 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -530,7 +530,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/DestinationsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/DestinationsPage.tsx
index 0a17f1aca6c1b..85b14f4263d62 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,28 +22,34 @@ 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>();
 
   const { hasNewDestinationVersion } = useGetConnectorsOutOfDate();
 
   const onUpdateVersion = useCallback(
     async ({ id, version }: { id: string; version: string }) => {
       try {
+        setUpdatingDefinitionId(id);
         await updateDestinationDefinition({
           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[]>(() => {
@@ -80,6 +86,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..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,12 +15,15 @@ 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();
   const { sourceDefinitions } = useSourceDefinitionList();
 
   const { mutateAsync: updateSourceDefinition } = useUpdateSourceDefinition();
+  const [updatingDefinitionId, setUpdatingDefinitionId] = useState<string>();
 
   const { hasNewSourceVersion } = useGetConnectorsOutOfDate();
   const { updateAllSourceVersions } = useUpdateSourceDefinitions();
@@ -28,20 +31,23 @@ const SourcesPage: React.FC = () => {
   const onUpdateVersion = useCallback(
     async ({ id, version }: { id: string; version: string }) => {
       try {
+        setUpdatingDefinitionId(id);
         await updateSourceDefinition({
           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(() => {
@@ -72,6 +78,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/ConnectorCell.module.scss b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss
new file mode 100644
index 0000000000000..6b42d01a2f870
--- /dev/null
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss
@@ -0,0 +1,3 @@
+.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..bc8640a193087 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" gap="lg">
+      <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
new file mode 100644
index 0000000000000..762f089d5f29a
--- /dev/null
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.module.scss
@@ -0,0 +1,13 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.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 fa40c8a3aedb0..9b6a6638609c1 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -1,9 +1,9 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 
 import { HeadTitle } from "components/common/HeadTitle";
-import { FlexContainer } from "components/ui/Flex";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { Table } from "components/ui/Table";
 
@@ -14,9 +14,10 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
 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 { FormContentTitle } from "./PageComponents";
 import UpgradeAllButton from "./UpgradeAllButton";
 import VersionCell from "./VersionCell";
 
@@ -27,6 +28,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;
@@ -43,6 +45,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
   hasNewConnectorVersion,
   usedConnectorsDefinitions,
   loading,
+  updatingDefinitionId,
   error,
   onUpdate,
   connectorsDefinitions,
@@ -99,9 +102,9 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
         ? [
             {
               Header: (
-                <FormContentTitle>
+                <div className={styles.changeToHeader}>
                   <FormattedMessage id="admin.changeTo" />
-                </FormContentTitle>
+                </div>
               ),
               accessor: "latestDockerImageTag",
               collapse: true,
@@ -111,16 +114,14 @@ 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}
-                    updating={loading}
                   />
                 ) : null,
             },
           ]
         : []),
     ],
-    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion, feedbackList, loading]
+    [allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion]
   );
 
   const renderHeaderControls = (section: "used" | "available") =>
@@ -128,54 +129,69 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
       (section === "available" && usedConnectorsDefinitions.length === 0)) && (
       <FlexContainer>
         {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}
+        />
       </FlexContainer>
     );
 
+  const ctx = useMemo(
+    () => ({
+      updatingAll: loading,
+      updatingDefinitionId,
+      feedbackList,
+    }),
+    [feedbackList, loading, updatingDefinitionId]
+  );
+
+  const usedDefinitionColumns = useMemo(
+    () => renderColumns(showVersionUpdateColumn(usedConnectorsDefinitions)),
+    [renderColumns, showVersionUpdateColumn, usedConnectorsDefinitions]
+  );
+  const availableDefinitionColumns = useMemo(
+    () => renderColumns(showVersionUpdateColumn(availableConnectorDefinitions)),
+    [renderColumns, showVersionUpdateColumn, availableConnectorDefinitions]
+  );
+
   return (
-    <>
-      <HeadTitle
-        titles={[{ id: "sidebar.settings" }, { id: type === "sources" ? "admin.sources" : "admin.destinations" }]}
-      />
-      <FlexContainer direction="column" gap="2xl">
-        {usedConnectorsDefinitions.length > 0 && (
-          <FlexContainer direction="column" gap="xl">
-            <FlexContainer alignItems="center" justifyContent="space-between">
-              <Heading as="h2" size="sm">
-                <FormattedMessage id={type === "sources" ? "admin.manageSource" : "admin.manageDestination"} />
-              </Heading>
-              {renderHeaderControls("used")}
+    <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>
-            <Table
-              columns={renderColumns(showVersionUpdateColumn(usedConnectorsDefinitions))}
-              data={usedConnectorsDefinitions}
-              sortBy={defaultSorting}
-            />
-          </FlexContainer>
-        )}
+          )}
 
-        <FlexContainer direction="column" gap="xl">
-          <FlexContainer alignItems="center" justifyContent="space-between">
-            <Heading as="h2" size="sm">
-              <FormattedMessage id={type === "sources" ? "admin.availableSource" : "admin.availableDestinations"} />
-            </Heading>
-            {renderHeaderControls("available")}
+          <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={availableDefinitionColumns} data={availableConnectorDefinitions} sortBy={defaultSorting} />
           </FlexContainer>
-          <Table
-            columns={renderColumns(showVersionUpdateColumn(availableConnectorDefinitions))}
-            data={availableConnectorDefinitions}
-            sortBy={defaultSorting}
-          />
         </FlexContainer>
-      </FlexContainer>
-    </>
+      </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..6396c032d8bb3
--- /dev/null
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsViewContext.tsx
@@ -0,0 +1,18 @@
+import React, { useContext } from "react";
+
+interface Context {
+  updatingAll: boolean;
+  updatingDefinitionId?: string;
+  feedbackList: Record<string, 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 ef7827175dd42..0000000000000
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from "styled-components";
-
-export const FormContent = styled.div`
-  width: 253px;
-  margin: -10px 0 -10px 200px;
-  position: relative;
-`;
-
-export const FormContentTitle = styled(FormContent)`
-  margin: 0 0 0 200px;
-`;
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 9c6e1a990917f..c0cbaaa8b013e 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 && (
@@ -50,6 +51,7 @@ const UpgradeAllButton: React.FC<UpdateAllButtonProps> = ({ onUpdate, isLoading,
         className={styles.updateButton}
         onClick={onUpdate}
         isLoading={isLoading}
+        disabled={disabled}
         icon={hasSuccess ? undefined : <TryArrow icon={faRedoAlt} />}
       >
         {hasSuccess ? <FormattedMessage id="admin.upgraded" /> : <FormattedMessage id="admin.upgradeAll" />}
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..9cdcb2d1f495b
--- /dev/null
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.module.scss
@@ -0,0 +1,35 @@
+@use "scss/colors";
+
+.errorMessage {
+  color: colors.$red;
+}
+
+.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 69c0ffcad4837..51dd6b5de898a 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/VersionCell.tsx
@@ -1,83 +1,35 @@
 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";
 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;
   currentVersion: string;
   id: string;
   onChange: ({ version, id }: { version: string; id: string }) => void;
-  feedback?: "success" | string;
-  updating: boolean;
 }
 
-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 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, currentVersion }) => {
+  const { updatingAll, updatingDefinitionId, feedbackList } = useUpdatingState();
+  const feedback = feedbackList[id];
+  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 <ErrorMessage>{feedback}</ErrorMessage>;
+    if (feedback === "success" && !dirty) {
+      return <FormattedMessage id="form.savedChange" />;
+    }
+    if (feedback && feedback !== "success") {
+      return <span className={styles.errorMessage}>{feedback}</span>;
     }
 
     return null;
@@ -86,40 +38,44 @@ 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>
-            {renderFeedback(dirty, feedback)}
+    <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",
-                  })}
+                <div
+                  className={styles.inputField}
+                  data-before={
+                    feedback !== "success"
+                      ? formatMessage({
+                          id: "admin.latestNote",
+                        })
+                      : undefined
+                  }
                 >
-                  <VersionInput {...field} type="text" autoComplete="off" />
-                </InputField>
+                  <Input {...field} className={styles.versionInput} type="text" autoComplete="off" />
+                </div>
               )}
             </Field>
             <Button
               size="xs"
-              isLoading={isSubmitting || updating}
+              isLoading={(updatingAll && isConnectorUpdatable) || updatingCurrent}
               type="submit"
               disabled={(isSubmitting || !dirty) && !isConnectorUpdatable}
             >
               <FormattedMessage id="form.change" />
             </Button>
-          </Form>
-        )}
-      </Formik>
-    </FormContent>
+          </FlexContainer>
+        </Form>
+      )}
+    </Formik>
   );
 };
 
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 970d2ef7d5569..18dc706aac276 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
@@ -247,6 +247,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>