🪟 🎨 Row highlighting for new streams table #19449

teallarson · 2022-11-15T21:01:44Z

What

closes #19092

Addresses row highlighting functionality for new sync catalog table

How

Creates a hook useCatalogTreeTableRowProps that generates the custom styling for CatalogTreeTableRow including:

returning the relevant className for the row
returning the relevant icon for the row
returning the pill button variant for a row to display

Also adds testing for the hook. Handles cases where a user may satisfy one or more state (ie: how to handle a row that has been both enabled and changed, how to handle a row that has been both enabled and selected for bulk mode, etc.)

Note: Disabled rows can still be edited and selected for BulkEdit. This should likely be addressed, but was not in scope of this PR.

Recommended reading order

useCatalogTreeTableRowProps files... starting with the tests will help outline expected functionality
CatalogTreeTableRow
others (_colors.scss, SyncModeSelect, StreamPathSelect, ModificationIcon)

teallarson · 2022-11-15T21:10:46Z

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx

@@ -46,38 +49,74 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
    [syncMode, destinationSyncMode]
  );

+  const { initialValues } = useConnectionFormService();


No more prop drilling to find out if the row changed! We can do this at the row level now that we have our context.

This will also make it relatively straightforward to grab the diff from the context and apply it to some of the conditional logic below when we get to the point where we want to integrate the diff on here 💥

airbyte-webapp/src/components/connection/CatalogTree/next/useRowStatus.tsx

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss

teallarson · 2022-11-22T19:19:11Z

airbyte-webapp/src/scss/_colors.scss

@@ -52,6 +52,8 @@ $orange-800: #d83c24;
 $orange-900: #bf2f1b;
 $orange: $orange-400;

+$green-30: #f4fcfd;


added these as labeled in Figma

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx

Co-authored-by: Krishna (kc) Glick <krishnaglick@users.noreply.github.com>

…atalogTreeTableRowProps.test.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>

…atalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

…atalogTreeTableRowProps.test.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

teallarson · 2022-12-05T16:56:14Z

airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.module.scss

@@ -4,6 +4,10 @@
  white-space: nowrap;
 }

-.pillSelect {
+.streamPathSelect {


not an essential piece of this PR, but while digging around in the rows, I saw that the streamPathSelect did not stay the full width of its column like on Figma. Adjusted that.

teallarson · 2022-12-05T16:56:49Z

airbyte-webapp/src/components/connection/CatalogTree/next/StreamPathSelect.tsx

      options={options}
      value={props.path}
      isMulti={props.isMulti}
      onChange={(options: PathPopoutProps["isMulti"] extends true ? Array<{ value: Path }> : { value: Path }) => {
        const finalValues = Array.isArray(options) ? options.map((op) => op.value) : options.value;
        props.onPathChange(finalValues);
      }}
+      className={styles.streamPathSelect}


again, adjusting this to be full column-width. not related to the main purpose of this PR, but a small, quick fix.

octavia-squidington-iv added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Nov 15, 2022

teallarson commented Nov 15, 2022

View reviewed changes

teallarson force-pushed the teal/row-highlighting-sync-catalog branch from 197fe09 to 1dd9e0f Compare November 16, 2022 17:25

edmundito reviewed Nov 21, 2022

View reviewed changes

teallarson force-pushed the teal/row-highlighting-sync-catalog branch from b559c35 to 724c8c8 Compare November 21, 2022 22:27

teallarson marked this pull request as ready for review November 22, 2022 18:53

teallarson requested a review from a team as a code owner November 22, 2022 18:53

teallarson commented Nov 22, 2022

View reviewed changes

airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx Outdated Show resolved Hide resolved

teallarson requested a review from edmundito November 22, 2022 19:23

edmundito reviewed Nov 22, 2022

View reviewed changes

teallarson requested a review from edmundito November 28, 2022 14:45

edmundito requested a review from krishnaglick November 30, 2022 01:06

krishnaglick reviewed Dec 1, 2022

View reviewed changes

teallarson and others added 15 commits December 5, 2022 11:26

initial pass and cleanup

09c1d57

merge cleanup

c41f4d4

get dropdowns colored correctly also

6c61f99

colors for modificationIcon

958b6c0

icon alignment

9b17e01

testing skeleton

12f4fa3

move calculation to a hook

a05b465

update hover styles on rows with changes

e2d76e7

add testing

6f3ce6e

Co-authored-by: Krishna (kc) Glick <krishnaglick@users.noreply.github.com>

clarify naming

425845f

add mixin, fix selected added/removed rows

f967831

WIP test icons using snapshots

aeabaf8

fix snapshots, tests for catalog tree table row hook

e8049d0

fix order of logic for disabled rows (disabled trumps everything)

31c481f

Update airbyte-webapp/src/components/connection/CatalogTree/next/useC…

9d8d520

…atalogTreeTableRowProps.test.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>

teallarson and others added 9 commits December 5, 2022 11:30

move icon to its own component, clean up tests

0a3656b

tidy up test linting disables

41042ea

Update airbyte-webapp/src/components/connection/CatalogTree/next/useC…

68a4527

…atalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

Update airbyte-webapp/src/components/connection/CatalogTree/next/useC…

91c5825

…atalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

Update airbyte-webapp/src/components/connection/CatalogTree/next/useC…

202687f

…atalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

Update airbyte-webapp/src/components/connection/CatalogTree/next/useC…

da64e4a

…atalogTreeTableRowProps.test.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

Update airbyte-webapp/src/components/connection/CatalogTree/next/useC…

b5e3b87

…atalogTreeTableRowProps.test.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

clean up tests

31a94ce

make path-select dropdown full column width

e9cb95f

teallarson force-pushed the teal/row-highlighting-sync-catalog branch from 7bfed5d to e9cb95f Compare December 5, 2022 16:31

cleanup from rebase

749d257

teallarson commented Dec 5, 2022

View reviewed changes

teallarson requested a review from krishnaglick December 5, 2022 17:00

Merge branch 'master' into teal/row-highlighting-sync-catalog

5939b74

krishnaglick approved these changes Dec 5, 2022

View reviewed changes

teallarson merged commit 7810c92 into master Dec 5, 2022

teallarson deleted the teal/row-highlighting-sync-catalog branch December 5, 2022 22:28

This was referenced Dec 6, 2022

Bump Airbyte version from 0.40.23 to 0.40.24 #20161

Closed

Bump Airbyte version from 0.40.23 to 0.40.24 #20206

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🪟 🎨 Row highlighting for new streams table #19449

🪟 🎨 Row highlighting for new streams table #19449

teallarson commented Nov 15, 2022 •

edited

Loading

teallarson Nov 15, 2022

teallarson Nov 22, 2022

teallarson Dec 5, 2022

teallarson Dec 5, 2022

🪟 🎨 Row highlighting for new streams table #19449

🪟 🎨 Row highlighting for new streams table #19449

Conversation

teallarson commented Nov 15, 2022 • edited Loading

What

How

Recommended reading order

teallarson Nov 15, 2022

Choose a reason for hiding this comment

teallarson Nov 22, 2022

Choose a reason for hiding this comment

teallarson Dec 5, 2022

Choose a reason for hiding this comment

teallarson Dec 5, 2022

Choose a reason for hiding this comment

teallarson commented Nov 15, 2022 •

edited

Loading