🪟🔧 Refactor ConnectorsView (#21531)

* WIP

* WIP

* wip

* more fixes

* fix test

* remove some more styled components and improve memoization

* review comment

Author: Joe Reuter

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

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

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

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",

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}

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,33 +15,39 @@ 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();
 
   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}

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.module.scss

@@ -0,0 +1,3 @@
+.iconContainer {
+  height: 25px;
+}

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

@@ -1,57 +1,29 @@
 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;
   hasUpdate?: boolean;
   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>
   );
 };
 

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