Disable save button while adding or editing a custom transformation i…

…n transformation page * Update FormCard to be able to disable submit button and disable if form is not valid * Update TransformationView to track if transformation is edited to enable and disable submit button
airbytehq · Jun 2, 2022 · 7981f47 · 7981f47
1 parent 203a4d8
commit 7981f47
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/...ebapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx b/...ebapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx
@@ -1,6 +1,7 @@
 import { Field, FieldArray } from "formik";
 import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
+import { useToggle } from "react-use";
 import styled from "styled-components";
 
 import { ContentCard, H4 } from "components";
@@ -55,6 +56,7 @@ const CustomTransformationsCard: React.FC<{
   mode: ConnectionFormMode;
 }> = ({ operations, onSubmit, mode }) => {
   const defaultTransformation = useDefaultTransformation();
+  const [editingTransformation, toggleEditingTransformation] = useToggle(false);
 
   const initialValues = useMemo(
     () => ({
@@ -73,11 +75,18 @@ const CustomTransformationsCard: React.FC<{
         enableReinitialize: true,
         onSubmit,
       }}
+      submitDisabled={editingTransformation}
       mode={mode}
     >
       <FieldArray name="transformations">
         {(formProps) => (
-          <TransformationField defaultTransformation={defaultTransformation} {...formProps} mode={mode} />
+          <TransformationField
+            defaultTransformation={defaultTransformation}
+            {...formProps}
+            mode={mode}
+            onStartEdit={toggleEditingTransformation}
+            onEndEdit={toggleEditingTransformation}
+          />
         )}
       </FieldArray>
     </FormCard>

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
@@ -4,15 +4,16 @@ import styled from "styled-components";
 
 import { Button, LoadingButton } from "components";
 
-type IProps = {
+interface EditControlProps {
   isSubmitting: boolean;
   dirty: boolean;
+  submitDisabled?: boolean;
   resetForm: () => void;
   successMessage?: React.ReactNode;
   errorMessage?: React.ReactNode;
   editSchemeMode?: boolean;
   withLine?: boolean;
-};
+}
 
 const Warning = styled.div`
   margin-bottom: 10px;
@@ -49,9 +50,10 @@ const Line = styled.div`
   margin: 16px -27px 0 -24px;
 `;
 
-const EditControls: React.FC<IProps> = ({
+const EditControls: React.FC<EditControlProps> = ({
   isSubmitting,
   dirty,
+  submitDisabled,
   resetForm,
   successMessage,
   errorMessage,
@@ -79,18 +81,13 @@ const EditControls: React.FC<IProps> = ({
       <Buttons>
         <div>{showStatusMessage()}</div>
         <div>
-          <Button
-            type="button"
-            secondary
-            disabled={(isSubmitting || !dirty) && (!editSchemeMode || isSubmitting)}
-            onClick={resetForm}
-          >
+          <Button type="button" secondary disabled={isSubmitting || (!dirty && !editSchemeMode)} onClick={resetForm}>
             <FormattedMessage id="form.cancel" />
           </Button>
           <ControlButton
             type="submit"
             isLoading={isSubmitting}
-            disabled={(isSubmitting || !dirty) && (!editSchemeMode || isSubmitting)}
+            disabled={submitDisabled || isSubmitting || (!dirty && !editSchemeMode)}
           >
             {editSchemeMode ? (
               <FormattedMessage id="connection.saveAndReset" />

diff --git a/airbyte-webapp/src/views/Connection/FormCard.tsx b/airbyte-webapp/src/views/Connection/FormCard.tsx
@@ -20,13 +20,15 @@ interface FormCardProps<T> extends CollapsibleCardProps {
   bottomSeparator?: boolean;
   form: FormikConfig<T>;
   mode?: ConnectionFormMode;
+  submitDisabled?: boolean;
 }
 
 export function FormCard<T>({
   children,
   form,
   bottomSeparator = true,
   mode,
+  submitDisabled,
   ...props
 }: React.PropsWithChildren<FormCardProps<T>>) {
   const { formatMessage } = useIntl();
@@ -54,6 +56,7 @@ export function FormCard<T>({
                   withLine={bottomSeparator}
                   isSubmitting={isSubmitting}
                   dirty={dirty}
+                  submitDisabled={!isValid || submitDisabled}
                   resetForm={() => {
                     resetForm();
                     reset();