Field is required msg wasn't appeared for Entrypoint arguments (#15696)

* Field is required msg wasn't appeared for Entrypoint arguments * Fixed form validation and Formatted Message error
airbytehq · Aug 25, 2022 · 0a0d884 · 0a0d884
1 parent 4f6fbfa
commit 0a0d884
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 46 deletions.
diff --git a/airbyte-webapp/src/components/Modal/Modal.module.scss b/airbyte-webapp/src/components/Modal/Modal.module.scss
@@ -23,7 +23,7 @@
 
 .card {
   margin-left: variables.$width-size-menu;
-  max-width: calc(100% - variables.$width-size-menu - variables.$spacing-lg * 2);
+  max-width: calc(100% - (#{variables.$width-size-menu} - #{variables.$spacing-lg}) * 2);
 
   &.sm {
     width: variables.$width-modal-sm;

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -161,9 +161,10 @@
   "form.repositoryUrl": "Git repository URL of the custom transformation project *",
   "form.entrypoint": "Entrypoint arguments for dbt cli to run the project *",
   "form.entrypoint.docs": "Learn more",
+  "form.entrypoint.linked": "Entrypoint arguments for dbt cli to run the project. <a>Learn more</a> *",
   "form.gitBranch": "Git branch name (leave blank for default branch)",
   "form.selectType": "Select a type",
-  "form.repositoryUrl.placeholder": "https://github.com/<organisation>/<git_repo>.git",
+  "form.repositoryUrl.placeholder": "https://github.com/<angle>organisation</angle>/<angle>git_repo</angle>.git",
 
   "form.sourceNamespace": "Source namespace",
   "form.sourceStreamName": "Source stream name",

diff --git a/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.module.scss b/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.module.scss
@@ -0,0 +1,22 @@
+@use "../../../scss/variables";
+
+.content {
+  display: flex;
+  flex-direction: row;
+}
+
+.label {
+  margin-bottom: 20px;
+
+  label {
+    width: calc(100% + #{variables.$spacing-xl});
+  }
+}
+
+.column {
+  width: 100%;
+
+  &:first-child {
+    margin-right: variables.$spacing-lg;
+  }
+}
diff --git a/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx b/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx
@@ -3,7 +3,6 @@ import type { FormikErrors } from "formik/dist/types";
 import { getIn, useFormik } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import styled from "styled-components";
 import * as yup from "yup";
 
 import { Button, ControlLabels, DropDown, Input, ModalBody, ModalFooter } from "components";
@@ -16,22 +15,7 @@ import { useGetService } from "core/servicesProvider";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { equal } from "utils/objects";
 
-const Content = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-
-const Column = styled.div`
-  flex: 1 0 0;
-
-  &:first-child {
-    margin-right: 18px;
-  }
-`;
-
-const Label = styled(ControlLabels)`
-  margin-bottom: 20px;
-`;
+import styles from "./TransformationForm.module.scss";
 
 interface TransformationProps {
   transformation: OperationCreate;
@@ -102,58 +86,71 @@ const TransformationForm: React.FC<TransformationProps> = ({
     <>
       <FormChangeTracker changed={isNewTransformation || formik.dirty} formId={formId} />
       <ModalBody maxHeight={400}>
-        <Content>
-          <Column>
-            <Label
+        <div className={styles.content}>
+          <div className={styles.column}>
+            <ControlLabels
+              className={styles.label}
               {...prepareLabelFields(formik.errors, "name")}
               label={<FormattedMessage id="form.transformationName" />}
             >
               <Input {...formik.getFieldProps("name")} />
-            </Label>
+            </ControlLabels>
 
-            <Label
+            <ControlLabels
+              className={styles.label}
               {...prepareLabelFields(formik.errors, "operatorConfiguration.dbt.dockerImage")}
               label={<FormattedMessage id="form.dockerUrl" />}
             >
               <Input {...formik.getFieldProps("operatorConfiguration.dbt.dockerImage")} />
-            </Label>
-            <Label
+            </ControlLabels>
+            <ControlLabels
+              className={styles.label}
               {...prepareLabelFields(formik.errors, "operatorConfiguration.dbt.gitRepoUrl")}
               label={<FormattedMessage id="form.repositoryUrl" />}
             >
               <Input
                 {...formik.getFieldProps("operatorConfiguration.dbt.gitRepoUrl")}
-                placeholder={formatMessage({
-                  id: "form.repositoryUrl.placeholder",
-                })}
+                placeholder={formatMessage(
+                  {
+                    id: "form.repositoryUrl.placeholder",
+                  },
+                  { angle: (node: React.ReactNode) => `<${node}>` }
+                )}
               />
-            </Label>
-          </Column>
+            </ControlLabels>
+          </div>
 
-          <Column>
-            <Label label={<FormattedMessage id="form.transformationType" />}>
+          <div className={styles.column}>
+            <ControlLabels className={styles.label} label={<FormattedMessage id="form.transformationType" />}>
               <DropDown
                 options={TransformationTypes}
                 value="custom"
                 placeholder={formatMessage({ id: "form.selectType" })}
               />
-            </Label>
-            <Label
-              label={<FormattedMessage id="form.entrypoint" />}
+            </ControlLabels>
+            <ControlLabels
+              className={styles.label}
               {...prepareLabelFields(formik.errors, "operatorConfiguration.dbt.dbtArguments")}
-              message={
-                <a href={config.links.dbtCommandsReference} target="_blank" rel="noreferrer">
-                  <FormattedMessage id="form.entrypoint.docs" />
-                </a>
+              label={
+                <FormattedMessage
+                  id="form.entrypoint.linked"
+                  values={{
+                    a: (node: React.ReactNode) => (
+                      <a href={config.links.dbtCommandsReference} target="_blank" rel="noreferrer">
+                        {node}
+                      </a>
+                    ),
+                  }}
+                />
               }
             >
               <Input {...formik.getFieldProps("operatorConfiguration.dbt.dbtArguments")} />
-            </Label>
-            <Label label={<FormattedMessage id="form.gitBranch" />}>
+            </ControlLabels>
+            <ControlLabels className={styles.label} label={<FormattedMessage id="form.gitBranch" />}>
               <Input {...formik.getFieldProps("operatorConfiguration.dbt.gitRepoBranch")} />
-            </Label>
-          </Column>
-        </Content>
+            </ControlLabels>
+          </div>
+        </div>
       </ModalBody>
       <ModalFooter>
         <Button onClick={onFormCancel} type="button" secondary>
@@ -164,7 +161,7 @@ const TransformationForm: React.FC<TransformationProps> = ({
           type="button"
           data-testid="done-button"
           isLoading={formik.isSubmitting}
-          disabled={!formik.dirty || equal(transformation, formik.values)}
+          disabled={!formik.isValid || !formik.dirty || equal(transformation, formik.values)}
         >
           <FormattedMessage id="form.saveTransformation" />
         </Button>