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" })} >