diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
index bee11a4fa0b40..ee807fe061472 100644
--- 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
index 9546b37c0427a..e8a34d1764591 100644
--- 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/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx
index 4956ae6d1bdab..af7a6048dbf99 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx
@@ -154,7 +154,7 @@ const DbtJobsList = ({ jobs, remove, dirty, isLoading }: DbtJobsListProps) => {
{jobs.map((job, i) => (
- remove(i)} />
+ 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" })}
>