Clean up of dbt cloud prototype UI code (#18894)

* Clean up of dbt cloud prototype UI code * Remove variables->vars alias from scss files * Remove obsolete comments * Improvements to delete job button - i18nize the aria-label - replace most custom scss by using `<Button variant="clear" size="lg">` * Use `_` for unused function arg

Author: ambirdsall

airbyte-webapp/public/images/external/dbt-bit_tm.png

@@ -60,6 +60,16 @@
  "workspaces.createNew": "Create new workspace",
  "workspaces.loading": "Loading…",
 
+ "connection.dbtCloudJobs.cardTitle": "Transformations",
+ "connection.dbtCloudJobs.addJob": "Add transformation",
+ "connection.dbtCloudJobs.explanation": "After an Airbyte sync job has completed, the following jobs will run",
+ "connection.dbtCloudJobs.noJobs": "No transformations",
+ "connection.dbtCloudJobs.job.title": "dbt Cloud transform",
+ "connection.dbtCloudJobs.job.accountId": "Account ID",
+ "connection.dbtCloudJobs.job.jobId": "Job ID",
+ "connection.dbtCloudJobs.job.deleteButton": "Delete job",
+ "connection.dbtCloudJobs.noIntegration": "Go to your <settingsLink>settings</settingsLink> to connect a dbt Cloud account",
+
  "settings.accountSettings.logoutLabel": "Sign out",
  "settings.accountSettings.logoutText": "Sign out",
  "settings.accountSettings.firstName": "First name",

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -11,7 +11,7 @@
 import isEmpty from "lodash/isEmpty";
 import { useMutation } from "react-query";
 
-import { OperatorType, WebBackendConnectionRead, OperationRead } from "core/request/AirbyteClient";
+import { OperatorType, WebBackendConnectionRead, OperationRead, WebhookConfigRead } from "core/request/AirbyteClient";
 import { useWebConnectionService } from "hooks/services/useConnectionHook";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useUpdateWorkspace } from "services/workspaces/WorkspacesService";
@@ -26,17 +26,17 @@ const webhookConfigName = "dbt cloud";
 const executionBody = `{"cause": "airbyte"}`;
 const jobName = (t: DbtCloudJob) => `${t.account}/${t.job}`;
 
+const isDbtWebhookConfig = (webhookConfig: WebhookConfigRead) => !!webhookConfig.name?.includes("dbt");
+
 const toDbtCloudJob = (operation: OperationRead): DbtCloudJob => {
  const { operationId } = operation;
  const { executionUrl } = operation.operatorConfiguration.webhook || {};
 
- const matches = (executionUrl || "").match(/\/accounts\/([^/]+)\/jobs\/([^]+)\/run\//);
-
+ const matches = (executionUrl || "").match(/\/accounts\/([^/]+)\/jobs\/([^]+)\/run/);
  if (!matches) {
  throw new Error(`Cannot extract dbt cloud job params from executionUrl ${executionUrl}`);
  } else {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const [_fullUrl, account, job] = matches;
+ const [, account, job] = matches;
 
  return {
  account,
@@ -70,9 +70,8 @@ export const useDbtIntegration = (connection: WebBackendConnectionRead) => {
  const { workspaceId } = workspace;
  const connectionService = useWebConnectionService();
 
- // TODO extract shared isDbtWebhookConfig predicate
- const hasDbtIntegration = !isEmpty(workspace.webhookConfigs?.filter((config) => /dbt/.test(config.name || "")));
- const webhookConfigId = workspace.webhookConfigs?.find((config) => /dbt/.test(config.name || ""))?.id;
+ const hasDbtIntegration = !isEmpty(workspace.webhookConfigs?.filter(isDbtWebhookConfig));
+ const webhookConfigId = workspace.webhookConfigs?.find((config) => isDbtWebhookConfig(config))?.id;
 
  const dbtCloudJobs = [...(connection.operations?.filter((operation) => isDbtCloudJob(operation)) || [])].map(
  toDbtCloudJob

airbyte-webapp/src/packages/cloud/services/dbtCloud.ts

@@ -1,14 +1,11 @@
-@use "scss/colors";
-@use "scss/variables" as vars;
-
-$item-spacing: 25px;
+@use "scss/variables";
 
 .controlGroup {
  display: flex;
  justify-content: flex-end;
- margin-top: $item-spacing;
+ margin-top: variables.$spacing-xl;
 
  .button {
- margin-left: 1em;
+ margin-left: variables.$spacing-md;
  }
 }

airbyte-webapp/src/packages/cloud/views/settings/integrations/DbtCloudSettingsView.module.scss

@@ -1,6 +1,10 @@
 @use "scss/colors";
+@use "scss/variables";
 
 .jobListContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
  padding: 25px 25px 22px;
  background-color: colors.$grey-50;
 }
@@ -14,16 +18,10 @@
  width: 100%;
 }
 
-.emptyListContent {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- > img {
- width: 111px;
- height: 111px;
- margin: 20px 0;
- }
+.emptyListImage {
+ width: 111px;
+ height: 111px;
+ margin: variables.$spacing-xl 0;
 }
 
 .contextExplanation {
@@ -38,26 +36,26 @@
 .jobListButtonGroup {
  display: flex;
  justify-content: flex-end;
- margin-top: 20px;
+ margin-top: variables.$spacing-xl;
  width: 100%;
 }
 
 .jobListButton {
- margin-left: 10px;
+ margin-left: variables.$spacing-md;
 }
 
 .jobListItem {
- margin-top: 10px;
+ margin-top: variables.$spacing-md;
  padding: 18px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
+}
 
- & img {
- height: 32px;
- width: 32px;
- }
+.dbtLogo {
+ height: 32px;
+ width: 32px;
 }
 
 .jobListItemIntegrationName {
@@ -82,10 +80,5 @@
 }
 
 .jobListItemDelete {
- color: colors.$grey-200;
- font-size: large;
- margin: 0 1em;
- cursor: pointer;
- border: none;
- background-color: inherit;
+ margin-left: variables.$spacing-lg;
 }

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.module.scss

@@ -2,30 +2,35 @@ import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { Field, Form, Formik, FieldArray, FieldProps, FormikHelpers } from "formik";
+import { ReactNode } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
-import { array, object, number } from "yup";
+import * as yup from "yup";
 
 import { FormChangeTracker } from "components/common/FormChangeTracker";
 import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
 import { Input } from "components/ui/Input";
+import { Text } from "components/ui/Text";
 
 import { WebBackendConnectionRead } from "core/request/AirbyteClient";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { DbtCloudJob, useDbtIntegration } from "packages/cloud/services/dbtCloud";
 import { RoutePaths } from "pages/routePaths";
 
+import dbtLogo from "./dbt-bit_tm.svg";
 import styles from "./DbtCloudTransformationsCard.module.scss";
+import octaviaWorker from "./octavia-worker.png";
 
 interface DbtJobListValues {
  jobs: DbtCloudJob[];
 }
 
-const dbtCloudJobListSchema = object({
- jobs: array().of(
- object({
- account: number().required().positive().integer(),
- job: number().required().positive().integer(),
+const dbtCloudJobListSchema = yup.object({
+ jobs: yup.array().of(
+ yup.object({
+ account: yup.number().required().positive().integer(),
+ job: yup.number().required().positive().integer(),
  })
  ),
 });
@@ -47,12 +52,12 @@ export const DbtCloudTransformationsCard = ({ connection }: { connection: WebBac
  };
 
  return (
- <Formik // TODO extract to parent component, see if that helps with input focus issues
+ <Formik
  onSubmit={onSubmit}
  initialValues={{ jobs: dbtCloudJobs }}
  validationSchema={dbtCloudJobListSchema}
  render={({ values, isValid, dirty }) => {
- return (
+ return hasDbtIntegration ? (
  <Form className={styles.jobListForm}>
  <FormChangeTracker changed={dirty} />
  <FieldArray
@@ -62,29 +67,33 @@ export const DbtCloudTransformationsCard = ({ connection }: { connection: WebBac
  <Card
  title={
  <span className={styles.jobListTitle}>
- Transformations
- {hasDbtIntegration && (
- <Button
- variant="secondary"
- onClick={() => push({ account: "", job: "" })}
- icon={<FontAwesomeIcon icon={faPlus} />}
- >
- Add transformation
- </Button>
- )}
+ <FormattedMessage id="connection.dbtCloudJobs.cardTitle" />
+ <Button
+ variant="secondary"
+ onClick={() => push({ account: "", job: "" })}
+ icon={<FontAwesomeIcon icon={faPlus} />}
+ >
+ <FormattedMessage id="connection.dbtCloudJobs.addJob" />
+ </Button>
  </span>
  }
  >
- {hasDbtIntegration ? (
- <DbtJobsList jobs={values.jobs} remove={remove} isValid={isValid} dirty={dirty} />
- ) : (
- <NoDbtIntegration className={styles.jobListContainer} />
- )}
+ <DbtJobsList jobs={values.jobs} remove={remove} isValid={isValid} dirty={dirty} />
  </Card>
  );
  }}
  />
  </Form>
+ ) : (
+ <Card
+ title={
+ <span className={styles.jobListTitle}>
+ <FormattedMessage id="connection.dbtCloudJobs.cardTitle" />
+ </span>
+ }
+ >
+ <NoDbtIntegration />
+ </Card>
  );
  }}
  />
@@ -102,14 +111,20 @@ const DbtJobsList = ({
  isValid: boolean;
  dirty: boolean;
 }) => (
- <div className={classNames(styles.jobListContainer, styles.emptyListContent)}>
- <p className={styles.contextExplanation}>After an Airbyte sync job has completed, the following jobs will run</p>
+ <div className={classNames(styles.jobListContainer)}>
  {jobs.length ? (
- jobs.map((_j, i) => <JobsListItem key={i} jobIndex={i} removeJob={() => remove(i)} />)
+ <>
+ <Text className={styles.contextExplanation}>
+ <FormattedMessage id="connection.dbtCloudJobs.explanation" />
+ </Text>
+ {jobs.map((_, i) => (
+ <JobsListItem key={i} jobIndex={i} removeJob={() => remove(i)} />
+ ))}
+ </>
  ) : (
  <>
- <img src="/images/octavia/worker.png" alt="An octopus wearing a hard hat, tools at the ready" />
- No transformations
+ <img src={octaviaWorker} alt="" className={styles.emptyListImage} />
+ <FormattedMessage id="connection.dbtCloudJobs.noJobs" />
  </>
  )}
  <div className={styles.jobListButtonGroup}>
@@ -125,19 +140,20 @@ const DbtJobsList = ({
 
 // TODO give feedback on validation errors (red outline and validation message)
 const JobsListItem = ({ jobIndex, removeJob }: { jobIndex: number; removeJob: () => void }) => {
+ const { formatMessage } = useIntl();
  return (
  <Card className={styles.jobListItem}>
  <div className={styles.jobListItemIntegrationName}>
- <img src="/images/external/dbt-bit_tm.png" alt="dbt logo" />
- dbt Cloud transform
+ <img src={dbtLogo} alt="" className={styles.dbtLogo} />
+ <FormattedMessage id="connection.dbtCloudJobs.job.title" />
  </div>
  <div className={styles.jobListItemInputGroup}>
  <div className={styles.jobListItemInput}>
  <Field name={`jobs.${jobIndex}.account`}>
  {({ field }: FieldProps<string>) => (
  <>
  <label htmlFor={`jobs.${jobIndex}.account`} className={styles.jobListItemInputLabel}>
- Account ID
+ <FormattedMessage id="connection.dbtCloudJobs.job.accountId" />
  </label>
  <Input {...field} type="text" />
  </>
@@ -149,33 +165,40 @@ const JobsListItem = ({ jobIndex, removeJob }: { jobIndex: number; removeJob: ()
  {({ field }: FieldProps<string>) => (
  <>
  <label htmlFor={`jobs.${jobIndex}.job`} className={styles.jobListItemInputLabel}>
- Job ID
+ <FormattedMessage id="connection.dbtCloudJobs.job.jobId" />
  </label>
  <Input {...field} type="text" />
  </>
  )}
  </Field>
  </div>
- <button type="button" className={styles.jobListItemDelete} onClick={removeJob}>
+ <Button
+ variant="clear"
+ size="lg"
+ className={styles.jobListItemDelete}
+ onClick={removeJob}
+ aria-label={formatMessage({ id: "connection.dbtCloudJobs.job.deleteButton" })}
+ >
  <FontAwesomeIcon icon={faXmark} />
- </button>
+ </Button>
  </div>
  </Card>
  );
 };
 
-const NoDbtIntegration = ({ className }: { className: string }) => {
+const NoDbtIntegration = () => {
  const { workspaceId } = useCurrentWorkspace();
  const dbtSettingsPath = `/${RoutePaths.Workspaces}/${workspaceId}/${RoutePaths.Settings}/dbt-cloud`;
  return (
- <div className={classNames(className, styles.emptyListContent)}>
- <p className={styles.contextExplanation}>After an Airbyte sync job has completed, the following jobs will run</p>
- <p className={styles.contextExplanation}>
- Go to your <Link to={dbtSettingsPath}>settings</Link> to connect your dbt Cloud account
- </p>
- <DbtCloudSignupBanner />
+ <div className={classNames(styles.jobListContainer)}>
+ <Text className={styles.contextExplanation}>
+ <FormattedMessage
+ id="connection.dbtCloudJobs.noIntegration"
+ values={{
+ settingsLink: (linkText: ReactNode) => <Link to={dbtSettingsPath}>{linkText}</Link>,
+ }}
+ />
+ </Text>
  </div>
  );
 };
-
-const DbtCloudSignupBanner = () => <div />;