🪟 🎉 Replace multiline + hidden connector field with `SecretTextArea` component #16539

edmundito · 2022-09-09T17:28:15Z

What

Resolves #16307

This change updates the rendering of multiline + secret connector field with a customized SecretTextArea component that handles the text more securely:

Screen.Recording.2022-09-09.at.12.12.55.mov

How

SecretTextArea stores the value inside a hidden <input type="password" /> field until it becomes visible. The data is then moved to a textarea for editing.

The component is wrapped around a TextInputContainer element which applies the correct styles to make it like the other fields. This new component could also be used for the Input and TextArea components.

WIP - TODO

Finalize design
Fix rendering glitches
Unit testing for SecretTextArea

krishnaglick · 2022-09-23T18:07:30Z

airbyte-webapp/src/components/base/SecretTextArea/SecretTextArea.tsx

+            onClick={() => {
+              toggleIsContentVisible();
+            }}


Nit/Optional:

Suggested change

onClick={() => {

toggleIsContentVisible();

}}

onClick={toggleIsContentVisible}

krishnaglick · 2022-09-23T18:10:36Z

airbyte-webapp/src/components/base/TextInputContainer/TextInputContainer.tsx

+  onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}
+
+export const TextInputContainer: React.FC<TextInputContainerProps> = ({


Are you planning to extend this component's usage? Because the secret text area only uses some of these props and it looks like it isn't used elsewhere.

Yes, this will eventually be shared by the input component but the change will be done separately.

krishnaglick · 2022-09-23T18:13:54Z

Tested functionality locally in OSS: Postgres source, SSH setting at the bottom

timroes · 2022-09-23T18:39:18Z

airbyte-webapp/src/components/base/Input/Input.tsx

@@ -89,6 +89,7 @@ export const Input: React.FC<InputProps> = ({ light, error, ...props }) => {
          {
            [styles.disabled]: props.disabled,
            [styles.password]: isPassword,
+            "fs-exclude": isPassword,


Could we maybe make this class an export from some (ts) file, to have it more verbose in those places what it does? Alternatively I'd suggest we add a comment here, so that if we read that in the future, won't need to google what that class does :)

timroes · 2022-09-23T18:42:01Z

airbyte-webapp/src/components/base/SecretTextArea/SecretTextArea.module.scss

@@ -0,0 +1,21 @@
+@use "../../../scss/colors";
+
+button.toggleVisibilityButton {


Since we usually have classNames only, is there a specific reason we're going with button.toggleVisibilityButton here?

No good reason. I may have done this during the early commits and forgot to remove it.

timroes · 2022-09-23T18:43:51Z

airbyte-webapp/src/components/base/SecretTextArea/SecretTextArea.tsx

+  extends Omit<TextInputContainerProps, "onFocus" | "onBlur">,
+    React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+export const SecretTextArea: React.VFC<SecretTextAreaProps> = ({


Suggested change

export const SecretTextArea: React.VFC<SecretTextAreaProps> = ({

export const SecretTextArea: React.FC<SecretTextAreaProps> = ({

So we're not introducing new deprecated API with the React 8 upgrade please (also see this Slack message).

timroes · 2022-09-23T18:46:38Z

airbyte-webapp/src/components/base/SecretTextArea/SecretTextArea.tsx

+            className={styles.passwordInput}
+            readOnly
+            aria-hidden
+            data-testid="input"


Could we maybe make those testids a bit more verbose, e.g. data-testid="secretTextArea-input", that would help us later to better target them (in any tool) if we'd need to. (And similar for the testid above)

timroes · 2022-09-23T18:53:33Z

I ❤️ this approach. I think this will really improve this component significantly.

airbyte-webapp/src/components/base/SecretTextArea/SecretTextArea.tsx

* Add TextInputContainer to manage the look and feel of inputs and text area * Update multiline + secret controls to use it

…component (airbytehq#16539) * Add SecretTextArea component * Add TextInputContainer to manage the look and feel of inputs and text area * Update multiline + secret controls to use it * Fix SecretTextArea story * Add .fs-exclude class to SecretTextArea and Password input * Use scss color * Add tests for SecretTextArea component * Update SecretTextArea testIds * Remove specificity in secrettextarea rule * Update type to be compatible with React 18 * Move SecretTextArea and TextInputContainer to components/ui

github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Sep 9, 2022

edmundito force-pushed the edmundito/secret-textarea branch from 42929d4 to 3a75361 Compare September 16, 2022 20:25

edmundito marked this pull request as ready for review September 20, 2022 14:44

edmundito requested a review from a team as a code owner September 20, 2022 14:44

krishnaglick approved these changes Sep 23, 2022

View reviewed changes

timroes reviewed Sep 23, 2022

View reviewed changes

airbyte-webapp/src/components/base/SecretTextArea/SecretTextArea.tsx Outdated Show resolved Hide resolved

edmundito force-pushed the edmundito/secret-textarea branch from 3a75361 to 83e1048 Compare September 23, 2022 20:45

edmundito requested a review from timroes September 26, 2022 18:31

edmundito force-pushed the edmundito/secret-textarea branch from 83e1048 to 61c76ec Compare September 28, 2022 13:04

edmundito added 9 commits October 5, 2022 11:46

Add SecretTextArea component

4cc61e4

* Add TextInputContainer to manage the look and feel of inputs and text area * Update multiline + secret controls to use it

Fix SecretTextArea story

64eee34

Add .fs-exclude class to SecretTextArea and Password input

ef7f95f

Use scss color

f5f910c

Add tests for SecretTextArea component

1ea6004

Update SecretTextArea testIds

8d83cf1

Remove specificity in secrettextarea rule

51215c9

Update type to be compatible with React 18

0f545f0

Move SecretTextArea and TextInputContainer to components/ui

d8e60d6

edmundito force-pushed the edmundito/secret-textarea branch from 09ba793 to d8e60d6 Compare October 5, 2022 09:48

edmundito merged commit dfaf7d8 into master Oct 5, 2022

edmundito deleted the edmundito/secret-textarea branch October 5, 2022 10:14

octavia-squidington-iii mentioned this pull request Oct 5, 2022

Bump Airbyte version from 0.40.10 to 0.40.11 #17610

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟 🎉 Replace multiline + hidden connector field with `SecretTextArea` component #16539

🪟 🎉 Replace multiline + hidden connector field with `SecretTextArea` component #16539

edmundito commented Sep 9, 2022 •

edited

krishnaglick Sep 23, 2022

krishnaglick Sep 23, 2022

edmundito Sep 23, 2022

krishnaglick commented Sep 23, 2022

timroes Sep 23, 2022

timroes Sep 23, 2022

edmundito Sep 23, 2022

timroes Sep 23, 2022

timroes Sep 23, 2022 •

edited

timroes commented Sep 23, 2022

		@@ -0,0 +1,21 @@
		@use "../../../scss/colors";

		button.toggleVisibilityButton {

	export const SecretTextArea: React.VFC<SecretTextAreaProps> = ({
	export const SecretTextArea: React.FC<SecretTextAreaProps> = ({

🪟 🎉 Replace multiline + hidden connector field with SecretTextArea component #16539

🪟 🎉 Replace multiline + hidden connector field with SecretTextArea component #16539

Conversation

edmundito commented Sep 9, 2022 • edited

What

How

Recommended reading order

WIP - TODO

krishnaglick Sep 23, 2022

Choose a reason for hiding this comment

krishnaglick Sep 23, 2022

Choose a reason for hiding this comment

edmundito Sep 23, 2022

Choose a reason for hiding this comment

krishnaglick commented Sep 23, 2022

timroes Sep 23, 2022

Choose a reason for hiding this comment

timroes Sep 23, 2022

Choose a reason for hiding this comment

edmundito Sep 23, 2022

Choose a reason for hiding this comment

timroes Sep 23, 2022

Choose a reason for hiding this comment

timroes Sep 23, 2022 • edited

Choose a reason for hiding this comment

timroes commented Sep 23, 2022

🪟 🎉 Replace multiline + hidden connector field with `SecretTextArea` component #16539

🪟 🎉 Replace multiline + hidden connector field with `SecretTextArea` component #16539

edmundito commented Sep 9, 2022 •

edited

timroes Sep 23, 2022 •

edited