Disallow deleting jobs while an update is pending (#19617)

* Clean up type definitions Also removes the "Error" from the `{setV,v}alidationErrorMessage` variables to pave the way for success feedback. * Show success message and clear form on successful dbt cloud token submission * Always clear form error state and message in sync * Disallow deleting jobs while an update is pending
airbytehq · Nov 21, 2022 · bab76fb · bab76fb
1 parent 3eea315
commit bab76fb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -104,6 +104,7 @@
   "settings.integrationSettings.dbtCloudSettings.form.singleTenantUrl": "Single-tenant URL",
   "settings.integrationSettings.dbtCloudSettings.form.testConnection": "Test connection",
   "settings.integrationSettings.dbtCloudSettings.form.submit": "Save changes",
+  "settings.integrationSettings.dbtCloudSettings.form.success": "Service Token saved successfully",
   "settings.generalSettings": "General Settings",
   "settings.generalSettings.changeWorkspace": "Change Workspace",
   "settings.generalSettings.form.name.label": "Workspace name",

diff --git a/airbyte-webapp/src/packages/cloud/views/settings/integrations/DbtCloudSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/settings/integrations/DbtCloudSettingsView.tsx
@@ -1,6 +1,6 @@
 import { Field, FieldProps, Form, Formik } from "formik";
 import React, { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { LabeledInput } from "components/LabeledInput";
 import { Button } from "components/ui/Button";
@@ -11,6 +11,7 @@ import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponen
 import styles from "./DbtCloudSettingsView.module.scss";
 
 export const DbtCloudSettingsView: React.FC = () => {
+  const { formatMessage } = useIntl();
   const { mutate: submitDbtCloudIntegrationConfig, isLoading } = useSubmitDbtCloudIntegrationConfig();
   const [hasValidationError, setHasValidationError] = useState(false);
   const [validationMessage, setValidationMessage] = useState("");
@@ -21,15 +22,21 @@ export const DbtCloudSettingsView: React.FC = () => {
           initialValues={{
             serviceToken: "",
           }}
-          onSubmit={({ serviceToken }) => {
+          onSubmit={({ serviceToken }, { resetForm }) => {
             setHasValidationError(false);
+            setValidationMessage("");
             return submitDbtCloudIntegrationConfig(serviceToken, {
               onError: (e) => {
                 setHasValidationError(true);
 
                 setValidationMessage(e.message.replace("Internal Server Error: ", ""));
               },
-              onSuccess: () => setValidationMessage(""),
+              onSuccess: () => {
+                setValidationMessage(
+                  formatMessage({ id: "settings.integrationSettings.dbtCloudSettings.form.success" })
+                );
+                resetForm();
+              },
             });
           }}
         >

diff --git a/...Page/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx b/...Page/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx
@@ -154,7 +154,7 @@ const DbtJobsList = ({ jobs, remove, dirty, isLoading }: DbtJobsListProps) => {
             <FormattedMessage id="connection.dbtCloudJobs.explanation" />
           </Text>
           {jobs.map((job, i) => (
-            <JobsListItem key={i} job={job} removeJob={() => remove(i)} />
+            <JobsListItem key={i} job={job} removeJob={() => remove(i)} isLoading={isLoading} />
           ))}
         </>
       ) : (
@@ -184,8 +184,9 @@ const DbtJobsList = ({ jobs, remove, dirty, isLoading }: DbtJobsListProps) => {
 interface JobsListItemProps {
   job: DbtCloudJob;
   removeJob: () => void;
+  isLoading: boolean;
 }
-const JobsListItem = ({ job, removeJob }: JobsListItemProps) => {
+const JobsListItem = ({ job, removeJob, isLoading }: JobsListItemProps) => {
   const { formatMessage } = useIntl();
   // TODO if `job.jobName` is undefined, that means we failed to match any of the
   // dbt-Cloud-supplied jobs with the saved job. This means one of two things has
@@ -218,6 +219,7 @@ const JobsListItem = ({ job, removeJob }: JobsListItemProps) => {
           size="lg"
           className={styles.jobListItemDelete}
           onClick={removeJob}
+          disabled={isLoading}
           aria-label={formatMessage({ id: "connection.dbtCloudJobs.job.deleteButton" })}
         >
           <FontAwesomeIcon icon={faXmark} height="21" width="21" />