🪟 🎨 Add description to dbt cloud service token form (airbytehq#22702)

shipyardapp · Feb 14, 2023 · cee17bd · cee17bd
1 parent 3b31548
commit cee17bd
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -101,6 +101,7 @@
   "settings.integrationSettings": "Integration settings",
   "settings.integrationSettings.dbtCloudSettings": "dbt Cloud Integration",
   "settings.integrationSettings.dbtCloudSettings.form.serviceToken": "Service Token",
+  "settings.integrationSettings.dbtCloudSettings.form.description": "To use the dbt Cloud integration, enter your service token here. <lnk>Learn more</lnk>.",
   "settings.integrationSettings.dbtCloudSettings.form.advancedOptions": "Advanced options",
   "settings.integrationSettings.dbtCloudSettings.form.singleTenantUrl": "Single-tenant URL",
   "settings.integrationSettings.dbtCloudSettings.form.testConnection": "Test connection",

diff --git a/...te-webapp/src/packages/cloud/views/settings/integrations/DbtCloudSettingsView.module.scss b/...te-webapp/src/packages/cloud/views/settings/integrations/DbtCloudSettingsView.module.scss
@@ -1,3 +1,4 @@
+@use "scss/colors";
 @use "scss/variables";
 
 .controlGroup {
@@ -9,3 +10,18 @@
     margin-left: variables.$spacing-md;
   }
 }
+
+.cardContent {
+  padding: variables.$spacing-xl;
+}
+
+.description {
+  color: colors.$grey-300;
+  margin-bottom: variables.$spacing-xl;
+  font-size: 12px;
+
+  a:link,
+  a:visited {
+    color: colors.$grey-300;
+  }
+}
diff --git a/airbyte-webapp/src/packages/cloud/views/settings/integrations/DbtCloudSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/settings/integrations/DbtCloudSettingsView.tsx
@@ -4,9 +4,11 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { LabeledInput } from "components/LabeledInput";
 import { Button } from "components/ui/Button";
+import { Text } from "components/ui/Text";
 
 import { useSubmitDbtCloudIntegrationConfig } from "packages/cloud/services/dbtCloud";
-import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents";
+import { SettingsCard } from "pages/SettingsPage/pages/SettingsComponents";
+import { links } from "utils/links";
 
 import styles from "./DbtCloudSettingsView.module.scss";
 
@@ -17,7 +19,7 @@ export const DbtCloudSettingsView: React.FC = () => {
   const [validationMessage, setValidationMessage] = useState("");
   return (
     <SettingsCard title={<FormattedMessage id="settings.integrationSettings.dbtCloudSettings" />}>
-      <Content>
+      <div className={styles.cardContent}>
         <Formik
           initialValues={{
             serviceToken: "",
@@ -41,6 +43,18 @@ export const DbtCloudSettingsView: React.FC = () => {
           }}
         >
           <Form>
+            <Text className={styles.description}>
+              <FormattedMessage
+                id="settings.integrationSettings.dbtCloudSettings.form.description"
+                values={{
+                  lnk: (node: React.ReactNode) => (
+                    <a href={links.dbtCloudIntegrationDocs} target="_blank" rel="noreferrer">
+                      {node}
+                    </a>
+                  ),
+                }}
+              />
+            </Text>
             <Field name="serviceToken">
               {({ field }: FieldProps<string>) => (
                 <LabeledInput
@@ -59,7 +73,7 @@ export const DbtCloudSettingsView: React.FC = () => {
             </div>
           </Form>
         </Formik>
-      </Content>
+      </div>
     </SettingsCard>
   );
 };
diff --git a/airbyte-webapp/src/utils/links.ts b/airbyte-webapp/src/utils/links.ts
@@ -6,6 +6,7 @@ const BASE_DOCS_LINK = "https://docs.airbyte.com";
 
 export const links = {
   dbtCommandsReference: "https://docs.getdbt.com/reference/dbt-commands",
+  dbtCloudIntegrationDocs: `${BASE_DOCS_LINK}/cloud/dbt-cloud-integration`,
   technicalSupport: `${BASE_DOCS_LINK}/troubleshooting/on-deploying`,
   termsLink: "https://airbyte.com/terms",
   privacyLink: "https://airbyte.com/privacy-policy",