🪟 🎨 Connector Field UX Improvements #16152

lmossman · 2022-08-30T23:47:37Z

What

Relates to #12204

This PR addresses the following parts of the above ticket:

Moves field descriptions and examples into InfoTooltips (open to feedback on the tooltip/examples styling here!):
Changes invalid input behavior so that instead of just highlighting the description, it adds the actual form error text below the input and uses the existing error prop logic on the inputs to make their border red:
Removes the confusing * or lack-thereof after property labels which was meant to indicate optionality, and instead adds an Optional text to the right of the label for any optional fields.
- Note 1: Some field names in the connector specs themselves contain * or (Optional) at the end - the connectors should be updated to remove these redundant suffixes now that we have logic in place to add the Optional text after the field. Should I programmatically try to filter these strings out of the field names in the meantime?
- Note 2: I have explicitly set the optional flag on the PropertyLabel to false for the LabeledSwitch, ConditionSection, and ArraySection components, because it felt confusing as a user to have Optional on each of these when there is not really a way to not use them -- the switch is always on or off, condition always has some dropdown value selected, and even if the array is empty it is still submitted as a value. So to me, optional only really seemed to make sense on the basic text input components.
Removes the logic to use the first field example as the placeholder text for its input, as suggested by Tim since he felt that it was confusing, making users think that they had to use the example value.

TODO: modify the styling on Condition and Array section components to more closely match the styling in the original design, with the label being fully left-justified. This will allow us to hide the bounding line when there are no children in the condition group, since that case currently looks a bit strange now that the description has been moved into the InfoTooltip, e.g.:
Currently just waiting on a final confirmation of the design from Nico before implementing this. This could also be done in a follow-up PR if the current state in this PR is acceptable.
The styling of grouped fields has been updated to match the design provided by Nico:

NOTE: This PR also does not do any of the field grouping / optional fields hidden behind an expandable dropdown changes present in the design. Field grouping will require some more changes to connector specs, and hiding optional fields can be done in a follow-up PR.

How

There are several places that I have tried to refactor or simplify some components to reduce duplication and remove unneeded logic.

I also tried to make sure that the changes I've made here won't affect other views that are using the same components that I've touched, such as the connection Replication view. Though, the changes I've made here should hopefully make it easy to update those places to use the new styling as well (e.g. use the PropertyLabel class I have introduced to get the description-in-tooltip and Optional flag styling)

🚨 User Impact 🚨

Just visual changes to the connector page, but with all of the same functionality kept the same.

Upmitt · 2022-09-02T09:03:04Z

@lmossman I updated Figma with a new component for the group of fields : https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=1107%3A1880 - and here: https://www.figma.com/file/AxqFXuHo2BoTY0QY12hxm1/00_02_WEB-APP-COMPONENTS?node-id=446%3A8860 (you can change the width of this group of fields on Figma)

edmundito · 2022-09-02T14:24:43Z

@lmossman would it be possible to add storybooks for the areas impacted?

krishnaglick · 2022-09-07T15:34:02Z

Looks like there's a conflict!

krishnaglick · 2022-09-07T15:38:28Z

airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx

+      )}
+      {props.optional && (
+        <Text size="sm" className={styles.optionalText}>
+          Optional


Should we put this into a translatable string?

krishnaglick · 2022-09-07T15:39:27Z

airbyte-webapp/src/components/TextWithHTML/TextWithHTML.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import sanitizeHtml from "sanitize-html";

-interface IProps {
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {


Two nits:

We should change this to just Props

Could we get rid of the default export while you're in here?

airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelInfo.module.scss

krishnaglick · 2022-09-07T17:49:18Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelInfo.tsx

+
+import styles from "./LabelInfo.module.scss";
+
+interface IProps {


Suggested change

interface IProps {

interface Props {

krishnaglick · 2022-09-07T17:49:28Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelInfo.tsx

+  description?: string;
+}
+
+const LabelInfo: React.FC<IProps> = ({ label, examples, description }) => {


Suggested change

const LabelInfo: React.FC<IProps> = ({ label, examples, description }) => {

export const LabelInfo: React.FC<Props> = ({ label, examples, description }) => {

krishnaglick · 2022-09-07T17:49:34Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelInfo.tsx

+  );
+};
+
+export { LabelInfo };


Suggested change

export { LabelInfo };

krishnaglick · 2022-09-07T17:51:12Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Property/LabelInfo.tsx

+}
+
+const LabelInfo: React.FC<IProps> = ({ label, examples, description }) => {
+  const constructExamples = () => {


This should be a component. I'd argue for moving it above this one, renaming to Examples perhaps, and passing it the props so the use should look like:
<Examples examples={examples} />

I like that suggestion, thanks!

krishnaglick · 2022-09-07T17:53:53Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ArraySection.tsx

@@ -64,13 +65,12 @@ export const ArraySection: React.FC<ArraySectionProps> = ({ formField, path, dis
    };
  }, [items, formField.properties]);

+  const label = (


Nit: I'd either move this down into title={<Property... or call this groupTitle or something.

krishnaglick · 2022-09-07T17:54:52Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.tsx

      fullWidthTitle
      title={
        <div className={styles.sectionTitle}>
-          {label ? <GroupLabel>{label}:</GroupLabel> : null}
+          {label ? <GroupLabel>{label}</GroupLabel> : null}


Could label ever be undefined now?

Doesn't seem like it -- I've removed the conditional here

krishnaglick · 2022-09-07T17:55:31Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.tsx

@@ -24,7 +25,7 @@ const GroupLabel = styled(Label)`
 `;

 const ConditionControls = styled.div`
-  padding-top: 25px;
+  padding-top: 20px;
 `;


Since we have a styles folder, we should get rid of ConditionControls and just use a style.

krishnaglick

Really great work here Lake!

krishnaglick · 2022-09-19T14:19:08Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Property/PropertyLabel.tsx

+  className?: string;
+}
+
+const PropertyLabel: React.FC<React.PropsWithChildren<PropertyLabelProps>> = ({


Should export here, not below.

…l styling

* use Source name and Destination name * move label messages into info tooltips * pass tooltip props through IntoTooltip and set placement * add error message to ControlLabels * refactor to reduce duplication and add optional indicator * add label as header in info tooltip and fix tooltip word wrapping * remove placeholders and style tooltip a bit better * make example background darker * remove unnecessary style * put examples in flex box * use property label in labeled switch * use info tool tip for condition section * remove unused class name * remove colon * add styling to lists inside of tooltip * move errors below inputs and add error flag to control input * remove label css * use new property label for array section as well * fix css * make examples a bit more circular * put optional text into translatable string * fix TextWithHTML props and export * simplify CSS selector * rename IProps to Props * fix export * move examples into its own component * remove unnecessary var * conditionSection feedback * update design of group sections * fix empty group control styling * add comment * fix position and sizing of group control sections * adjust margin * add main changed components to storybook * linting fixes * fix group section styling and clean up storybook * fix stylelint errors * wrap storybook components in cards * use card prop to fix build error * fix info tooltip positioning and prevent wrapping on group label * adjust infotooltip styling again * fix info tooltip position on safari as well * fix styling of condition section dropdown * small spacing adjustment * another small padding adjustment * switch display to block * simplify scss classes * rename props class * fix casing of scss variables * use scss variables in some places * move PropertyError to Property folder * replace displayError with hasError * rename infoMessage to infoTooltipContent * move stories to other folders * fix display and local var * update snapshots * properly set htmlFor on group control label and fix nest group control styling * fix tooltip border radius * fix group controls border radius * fix spacing of field forms * fix input border and background colors * fix display types in property section * update snapshot classes

lmossman added 4 commits August 30, 2022 11:53

use Source name and Destination name

9c5beef

move label messages into info tooltips

dfc60fc

pass tooltip props through IntoTooltip and set placement

66fb5d0

add error message to ControlLabels

772a91a

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

lmossman added 17 commits August 30, 2022 17:36

refactor to reduce duplication and add optional indicator

743e594

add label as header in info tooltip and fix tooltip word wrapping

32dfffb

remove placeholders and style tooltip a bit better

502f5d8

make example background darker

fddf2bb

remove unnecessary style

47cf7ff

put examples in flex box

89a3549

use property label in labeled switch

d1da153

use info tool tip for condition section

cc196b0

remove unused class name

df1db5c

remove colon

3fca492

add styling to lists inside of tooltip

d6be25b

move errors below inputs and add error flag to control input

943d026

remove label css

d4e21d2

use new property label for array section as well

97a18a2

Merge branch 'master' into lmossman/connector-field-improvements

4ad9337

fix css

b0372c3

make examples a bit more circular

efc3a5c

lmossman marked this pull request as ready for review September 2, 2022 01:50

lmossman requested a review from a team as a code owner September 2, 2022 01:50

krishnaglick reviewed Sep 7, 2022

View reviewed changes

merge with master

d009ed4

lmossman added 6 commits September 16, 2022 14:58

replace displayError with hasError

1e0c387

rename infoMessage to infoTooltipContent

58149f7

move stories to other folders

f309b44

merge with master

a8cd863

fix display and local var

a9525d4

update snapshots

2369639

krishnaglick reviewed Sep 19, 2022

View reviewed changes

properly set htmlFor on group control label and fix nest group contro…

e022b58

…l styling

lmossman temporarily deployed to more-secrets September 22, 2022 07:25 Inactive

Merge branch 'master' into lmossman/connector-field-improvements

5276a56

lmossman temporarily deployed to more-secrets September 22, 2022 14:31 Inactive

Merge branch 'master' into lmossman/connector-field-improvements

a9946d0

lmossman temporarily deployed to more-secrets September 23, 2022 04:58 Inactive

lmossman added 7 commits September 26, 2022 09:30

fix tooltip border radius

50d2b45

fix group controls border radius

946bd77

fix spacing of field forms

a0c69a8

fix input border and background colors

caecc87

fix display types in property section

5c261a0

merge with master

44c61e4

update snapshot classes

b7c365d

lmossman merged commit c4fb6b7 into master Sep 26, 2022

lmossman deleted the lmossman/connector-field-improvements branch September 26, 2022 20:19

This was referenced Sep 27, 2022

Bump Airbyte version from 0.40.9 to 0.40.10 #17285

Closed

Bump Airbyte version from 0.40.9 to 0.40.10 #17359

Merged

lmossman mentioned this pull request Sep 29, 2022

UX improvements for connector input fields #12204

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟 🎨 Connector Field UX Improvements #16152

🪟 🎨 Connector Field UX Improvements #16152

lmossman commented Aug 30, 2022 •

edited

Loading

Upmitt commented Sep 2, 2022

edmundito commented Sep 2, 2022

krishnaglick commented Sep 7, 2022

krishnaglick Sep 7, 2022

krishnaglick Sep 7, 2022

krishnaglick Sep 7, 2022

krishnaglick Sep 7, 2022

krishnaglick Sep 7, 2022

krishnaglick Sep 7, 2022

lmossman Sep 9, 2022

krishnaglick Sep 7, 2022

krishnaglick Sep 7, 2022

lmossman Sep 9, 2022

krishnaglick Sep 7, 2022

krishnaglick left a comment

krishnaglick Sep 19, 2022


		import styles from "./LabelInfo.module.scss";

		interface IProps {

	const LabelInfo: React.FC<IProps> = ({ label, examples, description }) => {
	export const LabelInfo: React.FC<Props> = ({ label, examples, description }) => {

🪟 🎨 Connector Field UX Improvements #16152

🪟 🎨 Connector Field UX Improvements #16152

Conversation

lmossman commented Aug 30, 2022 • edited Loading

What

How

Recommended reading order

🚨 User Impact 🚨

Upmitt commented Sep 2, 2022

edmundito commented Sep 2, 2022

krishnaglick commented Sep 7, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

krishnaglick left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmossman commented Aug 30, 2022 •

edited

Loading