remove some more styled components and improve memoization

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(() => {

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx

@@ -114,15 +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}
                   />
                 ) : null,
             },
           ]
         : []),
     ],
-    [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(

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 => {

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;
+  }
+}

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