From 75dcf8202a19d0e107c0fe592999fe41992d350d Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Tue, 13 Dec 2022 11:00:08 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=F0=9F=94=A7=20=20Remove=20top=20le?=
 =?UTF-8?q?vel=20state=20for=20unfinished=20flows=20in=20connector=20form?=
 =?UTF-8?q?=20(#20135)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor loading state
---
 .../ConnectorForm/components/EditControls.tsx |   5 +-
 .../Property/ConfirmationControl.tsx          |  71 ------------
 .../components/Property/Control.tsx           |  56 +--------
 .../SecretConfirmationControl.module.scss     |   8 ++
 .../Property/SecretConfirmationControl.tsx    | 108 ++++++++++++++++++
 .../components/Sections/PropertySection.tsx   |  12 +-
 .../ConnectorForm/connectorFormContext.tsx    |  15 ---
 7 files changed, 125 insertions(+), 150 deletions(-)
 delete mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/ConfirmationControl.tsx
 create mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.module.scss
 create mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx
index 46f921fa2ff85..dcd6650625610 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx
@@ -4,7 +4,6 @@ import styled from "styled-components";
 
 import { Button } from "components/ui/Button";
 
-import { useConnectorForm } from "../connectorFormContext";
 import styles from "./EditControls.module.scss";
 import { TestingConnectionError } from "./TestingConnectionError";
 import { TestingConnectionSpinner } from "./TestingConnectionSpinner";
@@ -42,8 +41,6 @@ const EditControls: React.FC<IProps> = ({
   errorMessage,
   onCancelTesting,
 }) => {
-  const { unfinishedFlows } = useConnectorForm();
-
   if (isSubmitting) {
     return <TestingConnectionSpinner isCancellable={isTestConnectionInProgress} onCancelTesting={onCancelTesting} />;
   }
@@ -63,7 +60,7 @@ const EditControls: React.FC<IProps> = ({
       {renderStatusMessage()}
       <Controls>
         <div className={styles.buttonsContainer}>
-          <Button type="submit" disabled={isSubmitting || !dirty || Object.keys(unfinishedFlows).length > 0}>
+          <Button type="submit" disabled={isSubmitting || !dirty}>
             <FormattedMessage id="form.saveChangesAndTest" />
           </Button>
           <Button
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/ConfirmationControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/ConfirmationControl.tsx
deleted file mode 100644
index ff4adb9f71ae4..0000000000000
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/ConfirmationControl.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useRef } from "react";
-import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
-
-import { Button } from "components/ui/Button";
-
-const ComponentContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
-interface ConfirmationControlProps {
-  component: React.ReactElement;
-  showButtons?: boolean;
-  isEditInProgress?: boolean;
-  onStart: () => void;
-  onCancel: () => void;
-  onDone: () => void;
-  disabled?: boolean;
-}
-
-const ConfirmationControl: React.FC<ConfirmationControlProps> = ({
-  isEditInProgress,
-  showButtons,
-  onStart,
-  onCancel,
-  onDone,
-  component,
-  disabled,
-}) => {
-  const controlRef = useRef<HTMLElement>(null);
-
-  if (!showButtons) {
-    return <>{component}</>;
-  }
-
-  const handleStartEdit = () => {
-    if (controlRef && controlRef.current) {
-      controlRef.current?.removeAttribute?.("disabled");
-      controlRef.current?.focus?.();
-    }
-    onStart();
-  };
-
-  return (
-    <ComponentContainer>
-      {React.cloneElement(component, {
-        ref: controlRef,
-        autoFocus: isEditInProgress,
-        disabled: !isEditInProgress || disabled,
-      })}
-      {isEditInProgress ? (
-        <>
-          <Button size="xs" onClick={onDone} type="button" disabled={disabled}>
-            <FormattedMessage id="form.done" />
-          </Button>
-          <Button size="xs" onClick={onCancel} type="button" variant="secondary" disabled={disabled}>
-            <FormattedMessage id="form.cancel" />
-          </Button>
-        </>
-      ) : (
-        <Button size="xs" onClick={handleStartEdit} type="button" disabled={disabled}>
-          <FormattedMessage id="form.edit" />
-        </Button>
-      )}
-    </ComponentContainer>
-  );
-};
-
-export default ConfirmationControl;
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx
index 2208ee16b9796..a6b9c1d1c3968 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx
@@ -5,7 +5,6 @@ import { DatePicker } from "components/ui/DatePicker";
 import { DropDown } from "components/ui/DropDown";
 import { Input } from "components/ui/Input";
 import { Multiselect } from "components/ui/Multiselect";
-import { SecretTextArea } from "components/ui/SecretTextArea";
 import { TagInput } from "components/ui/TagInput/TagInput";
 import { TextArea } from "components/ui/TextArea";
 
@@ -13,27 +12,16 @@ import { FormBaseItem } from "core/form/types";
 import { useExperiment } from "hooks/services/Experiment";
 import { isDefined } from "utils/common";
 
-import ConfirmationControl from "./ConfirmationControl";
+import SecretConfirmationControl from "./SecretConfirmationControl";
 
 interface ControlProps {
   property: FormBaseItem;
   name: string;
-  unfinishedFlows: Record<string, { startValue: string }>;
-  addUnfinishedFlow: (key: string, info?: Record<string, unknown>) => void;
-  removeUnfinishedFlow: (key: string) => void;
   disabled?: boolean;
   error?: boolean;
 }
 
-export const Control: React.FC<ControlProps> = ({
-  property,
-  name,
-  addUnfinishedFlow,
-  removeUnfinishedFlow,
-  unfinishedFlows,
-  disabled,
-  error,
-}) => {
+export const Control: React.FC<ControlProps> = ({ property, name, disabled, error }) => {
   const [field, meta, helpers] = useField(name);
   const useDatepickerExperiment = useExperiment("connector.form.useDatepicker", true);
 
@@ -107,46 +95,14 @@ export const Control: React.FC<ControlProps> = ({
   } else if (property.multiline && !property.isSecret) {
     return <TextArea {...field} autoComplete="off" value={value ?? ""} rows={3} disabled={disabled} error={error} />;
   } else if (property.isSecret) {
-    const unfinishedSecret = unfinishedFlows[name];
-    const isEditInProgress = !!unfinishedSecret;
     const isFormInEditMode = isDefined(meta.initialValue);
     return (
-      <ConfirmationControl
-        component={
-          property.multiline && (isEditInProgress || !isFormInEditMode) ? (
-            <SecretTextArea
-              {...field}
-              autoComplete="off"
-              value={value ?? ""}
-              rows={3}
-              disabled={disabled}
-              error={error}
-            />
-          ) : (
-            <Input
-              {...field}
-              autoComplete="off"
-              value={value ?? ""}
-              type="password"
-              disabled={disabled}
-              error={error}
-            />
-          )
-        }
+      <SecretConfirmationControl
+        name={name}
+        multiline={Boolean(property.multiline)}
         showButtons={isFormInEditMode}
-        isEditInProgress={isEditInProgress}
-        onDone={() => removeUnfinishedFlow(name)}
-        onStart={() => {
-          addUnfinishedFlow(name, { startValue: field.value });
-          helpers.setValue("");
-        }}
-        onCancel={() => {
-          removeUnfinishedFlow(name);
-          if (unfinishedSecret && unfinishedSecret.hasOwnProperty("startValue")) {
-            helpers.setValue(unfinishedSecret.startValue);
-          }
-        }}
         disabled={disabled}
+        error={error}
       />
     );
   }
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.module.scss
new file mode 100644
index 0000000000000..9c134388a8625
--- /dev/null
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.module.scss
@@ -0,0 +1,8 @@
+@use "scss/variables";
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: top;
+  gap: variables.$spacing-sm;
+}
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx
new file mode 100644
index 0000000000000..2504726e20148
--- /dev/null
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx
@@ -0,0 +1,108 @@
+import { useField, useFormikContext } from "formik";
+import React, { useEffect, useRef, useState } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { Button } from "components/ui/Button";
+import { Input } from "components/ui/Input";
+import { SecretTextArea } from "components/ui/SecretTextArea";
+
+import styles from "./SecretConfirmationControl.module.scss";
+
+interface SecretConfirmationControlProps {
+  showButtons?: boolean;
+  name: string;
+  multiline: boolean;
+  disabled?: boolean;
+  error?: boolean;
+}
+
+const SecretConfirmationControl: React.FC<SecretConfirmationControlProps> = ({
+  showButtons,
+  disabled,
+  multiline,
+  name,
+  error,
+}) => {
+  const [field, , helpers] = useField(name);
+  const [previousValue, setPreviousValue] = useState<unknown>(undefined);
+  const isEditInProgress = Boolean(previousValue);
+  const controlRef = useRef<HTMLInputElement>(null);
+
+  const { dirty, touched } = useFormikContext();
+
+  const component =
+    multiline && (isEditInProgress || !showButtons) ? (
+      <SecretTextArea
+        {...field}
+        autoComplete="off"
+        value={field.value ?? ""}
+        rows={3}
+        error={error}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={showButtons && isEditInProgress}
+        disabled={(showButtons && !isEditInProgress) || disabled}
+      />
+    ) : (
+      <Input
+        {...field}
+        autoComplete="off"
+        value={field.value ?? ""}
+        type="password"
+        error={error}
+        ref={controlRef}
+        disabled={(showButtons && !isEditInProgress) || disabled}
+      />
+    );
+
+  useEffect(() => {
+    if (!dirty && !touched && previousValue) {
+      setPreviousValue(undefined);
+    }
+  }, [dirty, helpers, previousValue, touched]);
+
+  if (!showButtons) {
+    return <>{component}</>;
+  }
+
+  const handleStartEdit = () => {
+    if (controlRef && controlRef.current) {
+      controlRef.current?.removeAttribute?.("disabled");
+      controlRef.current?.focus?.();
+    }
+    setPreviousValue(field.value);
+    helpers.setValue("");
+  };
+
+  const onDone = () => {
+    setPreviousValue(undefined);
+  };
+
+  const onCancel = () => {
+    if (previousValue) {
+      helpers.setValue(previousValue);
+    }
+    setPreviousValue(undefined);
+  };
+
+  return (
+    <div className={styles.container}>
+      {component}
+      {isEditInProgress ? (
+        <>
+          <Button size="xs" onClick={onDone} type="button" disabled={disabled}>
+            <FormattedMessage id="form.done" />
+          </Button>
+          <Button size="xs" onClick={onCancel} type="button" variant="secondary" disabled={disabled}>
+            <FormattedMessage id="form.cancel" />
+          </Button>
+        </>
+      ) : (
+        <Button size="xs" onClick={handleStartEdit} type="button" disabled={disabled}>
+          <FormattedMessage id="form.edit" />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SecretConfirmationControl;
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/PropertySection.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/PropertySection.tsx
index e2ffe3377d0c3..a7e3334296707 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/PropertySection.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/PropertySection.tsx
@@ -22,7 +22,7 @@ const PropertySection: React.FC<PropertySectionProps> = ({ property, path, disab
   const propertyPath = path ?? property.path;
   const formikBag = useField(propertyPath);
   const [field, meta] = formikBag;
-  const { addUnfinishedFlow, removeUnfinishedFlow, unfinishedFlows, widgetsInfo } = useConnectorForm();
+  const { widgetsInfo } = useConnectorForm();
 
   const overriddenComponent = widgetsInfo[propertyPath]?.component;
   if (overriddenComponent) {
@@ -59,15 +59,7 @@ const PropertySection: React.FC<PropertySectionProps> = ({ property, path, disab
 
   return (
     <PropertyLabel className={styles.defaultLabel} property={property} label={labelText}>
-      <Control
-        property={property}
-        name={propertyPath}
-        addUnfinishedFlow={addUnfinishedFlow}
-        removeUnfinishedFlow={removeUnfinishedFlow}
-        unfinishedFlows={unfinishedFlows}
-        disabled={disabled}
-        error={hasError}
-      />
+      <Control property={property} name={propertyPath} disabled={disabled} error={hasError} />
       {hasError && <PropertyError>{errorMessage}</PropertyError>}
     </PropertyLabel>
   );
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx
index aa6051625ef59..18932ca2670ec 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx
@@ -12,9 +12,6 @@ interface ConnectorFormContext {
   getValues: <T = unknown>(values: ConnectorFormValues<T>) => ConnectorFormValues<T>;
   widgetsInfo: WidgetConfigMap;
   setUiWidgetsInfo: (path: string, value: Record<string, unknown>) => void;
-  unfinishedFlows: Record<string, { startValue: string; id: number | string }>;
-  addUnfinishedFlow: (key: string, info?: Record<string, unknown>) => void;
-  removeUnfinishedFlow: (key: string) => void;
   resetConnectorForm: () => void;
   selectedConnectorDefinition: ConnectorDefinition;
   selectedConnectorDefinitionSpecification: ConnectorDefinitionSpecification;
@@ -62,7 +59,6 @@ export const ConnectorFormContextProvider: React.FC<React.PropsWithChildren<Conn
   const { resetForm } = useFormikContext<ConnectorFormValues>();
 
   const ctx = useMemo<ConnectorFormContext>(() => {
-    const unfinishedFlows = widgetsInfo["_common.unfinishedFlows"] ?? {};
     const context: ConnectorFormContext = {
       widgetsInfo,
       getValues,
@@ -73,17 +69,6 @@ export const ConnectorFormContextProvider: React.FC<React.PropsWithChildren<Conn
       validationSchema,
       isEditMode,
       connectorId,
-      unfinishedFlows,
-      addUnfinishedFlow: (path, info) =>
-        setUiWidgetsInfo("_common.unfinishedFlows", {
-          ...unfinishedFlows,
-          [path]: info ?? {},
-        }),
-      removeUnfinishedFlow: (path: string) =>
-        setUiWidgetsInfo(
-          "_common.unfinishedFlows",
-          Object.fromEntries(Object.entries(unfinishedFlows).filter(([key]) => key !== path))
-        ),
       resetConnectorForm: () => {
         resetForm();
         resetUiWidgetsInfo();