🪟 🎨 Row highlighting for new streams table #19449
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
octavia-squidington-iv
added
area/platform
teallarson
commented
Nov 15, 2022
| @@ -46,38 +49,74 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({ | |||
| [syncMode, destinationSyncMode] | |||
| ); | |||
|
|
|||
| const { initialValues } = useConnectionFormService(); | |||
There was a problem hiding this comment.
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 💥
teallarson
force-pushed
the
teal/row-highlighting-sync-catalog
branch
from
197fe09
to
1dd9e0f
Compare
edmundito
reviewed
Nov 21, 2022
airbyte-webapp/src/components/connection/CatalogTree/next/useRowStatus.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useRowStatus.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.module.scss
Show resolved
Hide resolved
teallarson
force-pushed
the
teal/row-highlighting-sync-catalog
branch
from
b559c35
to
724c8c8
Compare
teallarson
commented
Nov 22, 2022
| @@ -52,6 +52,8 @@ $orange-800: #d83c24; | |||
| $orange-900: #bf2f1b; | |||
| $orange: $orange-400; | |||
|
|
|||
| $green-30: #f4fcfd; | |||
There was a problem hiding this comment.
added these as labeled in Figma
teallarson
commented
Nov 22, 2022
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx
Outdated
Show resolved
Hide resolved
edmundito
reviewed
Nov 22, 2022
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx
Outdated
Show resolved
Hide resolved
krishnaglick
reviewed
Dec 1, 2022
airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx
Outdated
Show resolved
Hide resolved
airbyte-webapp/src/components/connection/CatalogTree/next/useCatalogTreeTableRowProps.test.tsx
Outdated
Show resolved
Hide resolved
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.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>
…atalogTreeTableRowProps.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>
…atalogTreeTableRowProps.test.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>
…atalogTreeTableRowProps.test.tsx Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>
teallarson
force-pushed
the
teal/row-highlighting-sync-catalog
branch
from
7bfed5d
to
e9cb95f
Compare
teallarson
commented
Dec 5, 2022
| @@ -4,6 +4,10 @@ | |||
| white-space: nowrap; | |||
| } | |||
|
|
|||
| .pillSelect { | |||
| .streamPathSelect { | |||
There was a problem hiding this comment.
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
commented
Dec 5, 2022
| 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} |
There was a problem hiding this comment.
again, adjusting this to be full column-width. not related to the main purpose of this PR, but a small, quick fix.
krishnaglick
approved these changes
Dec 5, 2022
This was referenced Dec 6, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
closes #19092
Addresses row highlighting functionality for new sync catalog table
How
Creates a hook
useCatalogTreeTableRowPropsthat generates the custom styling forCatalogTreeTableRowincluding: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
useCatalogTreeTableRowPropsfiles... starting with the tests will help outline expected functionalityCatalogTreeTableRow_colors.scss,SyncModeSelect,StreamPathSelect,ModificationIcon)