Add secrets handling in UI (#1313)

* Add secrets handling in UI * Clear password input after getting from server
airbytehq · Dec 18, 2020 · 4f4ff5f · 4f4ff5f
1 parent 5532aa3
commit 4f4ff5f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/airbyte-webapp/src/components/ServiceForm/components/PropertyField.tsx b/airbyte-webapp/src/components/ServiceForm/components/PropertyField.tsx
@@ -94,6 +94,17 @@ const PropertyField: React.FC<IProps> = ({ property }) => {
       />
     );
   } else {
+    const inputType = property.isSecret
+      ? "password"
+      : property.type === "integer"
+      ? "number"
+      : "text";
+
+    const onKeyDown = (key: React.KeyboardEvent) => {
+      key.preventDefault();
+      form.setValue(key.key);
+    };
+
     return (
       <LabeledInput
         {...field}
@@ -102,8 +113,13 @@ const PropertyField: React.FC<IProps> = ({ property }) => {
         label={label}
         message={constructMessage}
         placeholder={placeholder}
-        type={property.type === "integer" ? "number" : "text"}
+        type={inputType}
         value={field.value || property.default || ""}
+        onKeyDown={
+          inputType === "password" && field.value === meta.initialValue
+            ? (key: React.KeyboardEvent) => onKeyDown(key)
+            : undefined
+        }
       />
     );
   }

diff --git a/airbyte-webapp/src/core/form/types.ts b/airbyte-webapp/src/core/form/types.ts
@@ -6,29 +6,30 @@ export type FormBaseItem = {
   fieldKey: string;
   fieldName: string;
   isRequired: boolean;
-  meta?: { [key: string]: any };
+  isSecret?: boolean;
   title?: string;
+  meta?: { [key: string]: any };
 } & Partial<JSONSchema7>;
 
 type FormGroupItem = {
   _type: "formGroup";
   fieldName: string;
   fieldKey: string;
   isRequired: boolean;
+  title?: string;
   properties: FormBlock[];
   isLoading?: boolean;
-  title?: string;
   description?: string;
   default?: JSONSchema7Type;
   examples?: JSONSchema7Type;
 };
 
 type FormConditionItem = {
   _type: "formCondition";
-  title?: string;
   fieldName: string;
   fieldKey: string;
   isRequired: boolean;
+  title?: string;
   conditions: { [key: string]: FormGroupItem | FormBaseItem };
 };
 

diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.test.ts b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.test.ts
@@ -18,9 +18,10 @@ test("should reformat jsonSchema to internal widget representation", () => {
       },
       dbname: { type: "string", description: "Name of the database." },
       password: {
+        airbyte_secret: true,
         type: "string",
         description: "Password associated with the username."
-      }
+      } as any // Because airbyte_secret is not part of json_schema
     }
   };
 
@@ -70,6 +71,7 @@ test("should reformat jsonSchema to internal widget representation", () => {
         fieldName: "key.password",
         fieldKey: "password",
         isRequired: false,
+        isSecret: true,
         type: "string"
       }
     ]

diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts
@@ -32,7 +32,8 @@ export const jsonSchemaToUiWidget = (
       fieldName: key,
       fieldKey: key,
       type: "null",
-      isRequired
+      isRequired,
+      isSecret: false
     };
   }
 
@@ -78,6 +79,7 @@ export const jsonSchemaToUiWidget = (
     fieldName: path || key,
     fieldKey: key,
     isRequired,
+    isSecret: (jsonSchema as { airbyte_secret: boolean }).airbyte_secret,
     type:
       (Array.isArray(jsonSchema.type) ? jsonSchema.type[0] : jsonSchema.type) ??
       "null"