🪟 🐛 Long source and destination names make the connection list table scroll horizontally #21759

matter-q · 2023-01-23T23:55:15Z

What

How

Added responsive columns
Created new cell components
Removed styled-components
Refactored Table component

Note: This PR is a temporary solution that fixes some bugs for this moment before we can start using the new Table component

Loom

https://www.loom.com/share/a442f62c9dd1406691b7e4af19d89c40

airbyte-webapp/src/components/EntityTable/components/EntityNameCell.tsx

dizel852 · 2023-01-25T12:33:17Z

airbyte-webapp/src/components/ui/Table/Table.tsx

+                style={{
+                  paddingLeft: column.customPadding?.left ?? SPACING_LG,
+                  paddingRight: column.customPadding?.right ?? SPACING_LG,
+                  width: column.customWidth ? `${column.customWidth}%` : column.collapse ? "0.0000000001%" : "auto",
+                }}


Hmm.. just out of curiosity - why do we apply styling in the style prop instead of className?

Table is a shared component, just saved original logic (the same as we had with styled-components). The table supports those custom styles...

Removed padding parameters since we do not use them at all

dizel852 · 2023-01-25T12:34:02Z

airbyte-webapp/src/components/ui/Table/Table.tsx

+                    style={{
+                      paddingLeft: cell.column.customPadding?.left ?? SPACING_LG,
+                      paddingRight: cell.column.customPadding?.right ?? SPACING_LG,
+                      width: cell.column.customWidth
+                        ? `${cell.column.customWidth}%`
+                        : cell.column.collapse
+                        ? "0.0000000001%"
+                        : "auto",
+                    }}


The same question here

The same answer from above 🙂

dizel852

Did a review: changes looks great 🔥
Left some comments.
Also noticed some minor issues, would be great to fix them in scope o this PR:

font-weight is changed from 500 to 400. By design - we need 500.

Status icon stretches:

matter-q · 2023-01-26T15:14:02Z

Did a review: changes looks great 🔥 Left some comments. Also noticed some minor issues, would be great to fix them in scope o this PR:

font-weight is changed from 500 to 400. By design - we need 500.

Status icon stretches:

Thanks for the detailed review. Fixed with font-weight 500 and width of icon 😉

dizel852

LGTM 👍

Passing to @edmundito and @tealjulia for another review

@tealjulia I think you will be interested to look, since pretty close issue was created recently - https://github.com/airbytehq/airbyte/issues/21941

edmundito

Changes look good. Tested connections, sources, and destinations lists, and resized windows. Noted a couple of nits that may be nice to fix but no need for re-approval.

airbyte-webapp/src/components/EntityTable/components/ConnectionStatusCell.module.scss

airbyte-webapp/src/components/EntityTable/components/ConnectorNameCell.module.scss

teallarson

Looks like there is a small visual regression on the Credits Page in the CreditConsumptionPerConnectionTable:

(there is now a double card)

teallarson · 2023-01-27T15:45:14Z

@tealjulia I think you will be interested to look, since pretty close issue was created recently - https://github.com/airbytehq/airbyte-internal-issues/issues/1316

This mismatch in padding/alignment of the headers and the inconsistent header highlighting were the main two things I was getting at in that issue. I don't think that should be part of this PR.

…ll horizontally - Removed styled-components - Refactored Table component - Added responsive columns - Created new cell components

teallarson

Retested the credits and connections pages locally. LGTM.

octavia-squidington-iv added the area/frontend Related to the Airbyte webapp label Jan 23, 2023

matter-q requested review from YatsukBogdan1 and dizel852 January 23, 2023 23:55

matter-q force-pushed the mark/long-source-and-destination-names-make-the-connection-list-table-scroll-horizontally branch 2 times, most recently from 5a441d5 to a6cccc1 Compare January 24, 2023 03:40

dizel852 changed the title ~~Mark/long source and destination names make the connection list table scroll horizontally~~ 🪟 🐛 Long source and destination names make the connection list table scroll horizontally Jan 24, 2023

dizel852 reviewed Jan 25, 2023

View reviewed changes

airbyte-webapp/src/components/EntityTable/components/EntityNameCell.tsx Outdated Show resolved Hide resolved

dizel852 reviewed Jan 25, 2023

View reviewed changes

dizel852 requested changes Jan 25, 2023

View reviewed changes

matter-q force-pushed the mark/long-source-and-destination-names-make-the-connection-list-table-scroll-horizontally branch from 2677bc6 to f0c98d7 Compare January 25, 2023 21:17

matter-q requested a review from dizel852 January 26, 2023 15:03

matter-q force-pushed the mark/long-source-and-destination-names-make-the-connection-list-table-scroll-horizontally branch from f0c98d7 to 6f0de4d Compare January 26, 2023 15:10

dizel852 removed the request for review from YatsukBogdan1 January 27, 2023 10:26

dizel852 approved these changes Jan 27, 2023

View reviewed changes

dizel852 requested review from edmundito and teallarson January 27, 2023 10:30

edmundito approved these changes Jan 27, 2023

View reviewed changes

airbyte-webapp/src/components/EntityTable/components/ConnectionStatusCell.module.scss Outdated Show resolved Hide resolved

airbyte-webapp/src/components/EntityTable/components/ConnectorNameCell.module.scss Outdated Show resolved Hide resolved

teallarson requested changes Jan 27, 2023

View reviewed changes

Mark Berger added 4 commits January 29, 2023 22:33

Long source and destination names make the connection list table scro…

39557e5

…ll horizontally - Removed styled-components - Refactored Table component - Added responsive columns - Created new cell components

Long source and destination names make the connection list table scro…

40910c0

…ll horizontally - Removed styled-components - Refactored Table component - Added responsive columns - Created new cell components

Long source and destination names make the connection list table scro…

0379732

…ll horizontally - Removed styled-components - Refactored Table component - Added responsive columns - Created new cell components

Long source and destination names make the connection list table scro…

7376885

…ll horizontally - Removed styled-components - Refactored Table component - Added responsive columns - Created new cell components

matter-q force-pushed the mark/long-source-and-destination-names-make-the-connection-list-table-scroll-horizontally branch from 8691621 to 7376885 Compare January 29, 2023 20:33

edmundito mentioned this pull request Jan 30, 2023

🪟 🐛 Fix loading state of "Launch" button in connection table #22002

Merged

matter-q requested a review from teallarson January 30, 2023 14:32

teallarson approved these changes Jan 30, 2023

View reviewed changes

matter-q merged commit 98054d6 into master Jan 30, 2023

matter-q deleted the mark/long-source-and-destination-names-make-the-connection-list-table-scroll-horizontally branch January 30, 2023 17:27

octavia-squidington-iii mentioned this pull request Jan 30, 2023

Bump Airbyte version from 0.40.30 to 0.40.31 #22085

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟 🐛 Long source and destination names make the connection list table scroll horizontally #21759

🪟 🐛 Long source and destination names make the connection list table scroll horizontally #21759

matter-q commented Jan 23, 2023

dizel852 Jan 25, 2023

matter-q Jan 25, 2023 •

edited

Loading

matter-q Jan 25, 2023

dizel852 Jan 25, 2023

matter-q Jan 25, 2023

dizel852 left a comment •

edited

Loading

matter-q commented Jan 26, 2023 •

edited

Loading

dizel852 left a comment

edmundito left a comment

teallarson left a comment

teallarson commented Jan 27, 2023 •

edited

Loading

teallarson left a comment

🪟 🐛 Long source and destination names make the connection list table scroll horizontally #21759

🪟 🐛 Long source and destination names make the connection list table scroll horizontally #21759

Conversation

matter-q commented Jan 23, 2023

What

How

Loom

dizel852 Jan 25, 2023

Choose a reason for hiding this comment

matter-q Jan 25, 2023 • edited Loading

Choose a reason for hiding this comment

matter-q Jan 25, 2023

Choose a reason for hiding this comment

dizel852 Jan 25, 2023

Choose a reason for hiding this comment

matter-q Jan 25, 2023

Choose a reason for hiding this comment

dizel852 left a comment • edited Loading

Choose a reason for hiding this comment

matter-q commented Jan 26, 2023 • edited Loading

dizel852 left a comment

Choose a reason for hiding this comment

edmundito left a comment

Choose a reason for hiding this comment

teallarson left a comment

Choose a reason for hiding this comment

teallarson commented Jan 27, 2023 • edited Loading

teallarson left a comment

Choose a reason for hiding this comment

matter-q Jan 25, 2023 •

edited

Loading

dizel852 left a comment •

edited

Loading

matter-q commented Jan 26, 2023 •

edited

Loading

teallarson commented Jan 27, 2023 •

edited

Loading