diff --git a/airbyte-webapp/src/components/ServiceForm/components/PropertyField.tsx b/airbyte-webapp/src/components/ServiceForm/components/PropertyField.tsx index 8e3581ac64e09..5546bb11bba2c 100644 --- 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 = ({ property }) => { /> ); } else { + const inputType = property.isSecret + ? "password" + : property.type === "integer" + ? "number" + : "text"; + + const onKeyDown = (key: React.KeyboardEvent) => { + key.preventDefault(); + form.setValue(key.key); + }; + return ( = ({ 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 index 357213635826a..1aff6cc90c157 100644 --- a/airbyte-webapp/src/core/form/types.ts +++ b/airbyte-webapp/src/core/form/types.ts @@ -6,8 +6,9 @@ export type FormBaseItem = { fieldKey: string; fieldName: string; isRequired: boolean; - meta?: { [key: string]: any }; + isSecret?: boolean; title?: string; + meta?: { [key: string]: any }; } & Partial; type FormGroupItem = { @@ -15,9 +16,9 @@ type FormGroupItem = { fieldName: string; fieldKey: string; isRequired: boolean; + title?: string; properties: FormBlock[]; isLoading?: boolean; - title?: string; description?: string; default?: JSONSchema7Type; examples?: JSONSchema7Type; @@ -25,10 +26,10 @@ type FormGroupItem = { 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 index 3cc793913781d..ff702cf0a2a52 100644 --- 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 index 79a38e6c69120..50d484a5e02aa 100644 --- 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"