🪟 🎨 Show Source-defined cursor and primary key fields on new Stre…

…am Details panel (#20366)

* add storybook for CheckBox component
add disabled state style

* just checking how to extend current implementation of storybook

* remove experimental changes

* replace styled components with css modules
add disabled state style
add small size style
add storybook

* update test snapshots

* fix checkbox cursor in disabled state

* fix overflow issue with table header

* create separate Cursor cell component

* create separate PK cell component

* update links

* update translations

* update stream details table: optionally show cursor and PK fields and disable them if they are source-defined

* add "not-allowed" cursor to disabled radio button

airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx

@@ -203,6 +203,8 @@ const CatalogSectionInner: React.FC<CatalogSectionInnerProps> = ({
             onSelectedChange={onSelectStream}
             shouldDefinePk={shouldDefinePk}
             shouldDefineCursor={shouldDefineCursor}
+            isCursorDefinitionSupported={cursorRequired}
+            isPKDefinitionSupported={pkRequired}
             stream={stream}
           />
         ) : (

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

@@ -17,6 +17,7 @@ interface StreamDetailsPanelProps extends StreamFieldsTableProps {
 }
 
 export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
+  stream,
   config,
   disabled,
   onPkSelect,
@@ -25,7 +26,8 @@ export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
   onSelectedChange,
   shouldDefinePk,
   shouldDefineCursor,
-  stream,
+  isCursorDefinitionSupported,
+  isPKDefinitionSupported,
   syncSchemaFields,
 }) => {
   return (
@@ -47,6 +49,8 @@ export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
             onPkSelect={onPkSelect}
             shouldDefinePk={shouldDefinePk}
             shouldDefineCursor={shouldDefineCursor}
+            isCursorDefinitionSupported={isCursorDefinitionSupported}
+            isPKDefinitionSupported={isPKDefinitionSupported}
           />
         </div>
       </Dialog.Panel>

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/CursorCell/CursorCell.module.scss

@@ -0,0 +1,4 @@
+.tooltip {
+  display: flex;
+  align-items: center;
+}

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/CursorCell/CursorCell.tsx

@@ -0,0 +1,44 @@
+import { CellContext } from "@tanstack/react-table";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { RadioButton } from "components/ui/RadioButton";
+import { Tooltip, TooltipLearnMoreLink } from "components/ui/Tooltip";
+
+import { links } from "utils/links";
+
+import { TableStream } from "../StreamFieldsTable";
+import styles from "./CursorCell.module.scss";
+
+interface CursorCellProps extends CellContext<TableStream, boolean | undefined> {
+  isCursorDefinitionSupported: boolean;
+  isCursor: (path: string[]) => boolean;
+  onCursorSelect: (cursorPath: string[]) => void;
+}
+
+export const CursorCell: React.FC<CursorCellProps> = ({
+  getValue,
+  row,
+  isCursorDefinitionSupported,
+  isCursor,
+  onCursorSelect,
+}) => {
+  if (!isCursorDefinitionSupported) {
+    return null;
+  }
+
+  const isCursorChecked = isCursor(row.original.path);
+
+  const radioButton = (
+    <RadioButton checked={isCursorChecked} onChange={() => onCursorSelect(row.original.path)} disabled={!getValue()} />
+  );
+
+  return !getValue() && isCursorChecked ? (
+    <Tooltip placement="bottom" control={radioButton} containerClassName={styles.tooltip}>
+      <FormattedMessage id="form.field.sourceDefinedCursor" />
+      <TooltipLearnMoreLink url={links.sourceDefinedCursorLink} />
+    </Tooltip>
+  ) : (
+    radioButton
+  );
+};

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/CursorCell/index.tsx

@@ -0,0 +1 @@
+export { CursorCell } from "./CursorCell";

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/PKCell/PKCell.tsx

@@ -0,0 +1,37 @@
+import { CellContext } from "@tanstack/react-table";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { CheckBox } from "components/ui/CheckBox";
+import { Tooltip, TooltipLearnMoreLink } from "components/ui/Tooltip";
+
+import { links } from "utils/links";
+
+import { TableStream } from "../StreamFieldsTable";
+
+interface PKCellProps extends CellContext<TableStream, boolean | undefined> {
+  isPKDefinitionSupported: boolean;
+  isPrimaryKey: (path: string[]) => boolean;
+  onPkSelect: (pkPath: string[]) => void;
+}
+
+export const PKCell: React.FC<PKCellProps> = ({ getValue, row, isPKDefinitionSupported, isPrimaryKey, onPkSelect }) => {
+  if (!isPKDefinitionSupported) {
+    return null;
+  }
+
+  const isPKChecked = isPrimaryKey(row.original.path);
+
+  const checkbox = (
+    <CheckBox checked={isPKChecked} onChange={() => onPkSelect(row.original.path)} disabled={!getValue()} />
+  );
+
+  return !getValue() && isPKChecked ? (
+    <Tooltip placement="bottom" control={checkbox}>
+      <FormattedMessage id="form.field.sourceDefinedPK" />
+      <TooltipLearnMoreLink url={links.sourceDefinedPKLink} />
+    </Tooltip>
+  ) : (
+    checkbox
+  );
+};

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/PKCell/index.tsx

@@ -0,0 +1 @@
+export { PKCell } from "./PKCell";

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

@@ -79,15 +79,10 @@ $cell-left-padding: variables.$spacing-xl + variables.$spacing-sm;
   }
 }
 
-.checkboxCell {
+.radioBtnCell {
   display: flex;
   align-items: center;
   height: $cell-height;
   overflow: unset;
   padding-left: 0;
 }
-
-// need to fix styled-component z-index issue
-.checkbox {
-  position: unset !important;
-}

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/StreamFieldsTable.tsx

@@ -4,9 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { pathDisplayName } from "components/connection/CatalogTree/PathPopout";
 import { ArrowRightIcon } from "components/icons/ArrowRightIcon";
-import { CheckBox } from "components/ui/CheckBox";
 import { NextTable } from "components/ui/NextTable";
-import { RadioButton } from "components/ui/RadioButton";
 
 import { SyncSchemaField, SyncSchemaFieldObject } from "core/domain/catalog";
 import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
@@ -17,9 +15,11 @@ import { equal } from "utils/objects";
 import { getDataType } from "utils/useTranslateDataType";
 
 import { ConnectorHeaderGroupIcon } from "./ConnectorHeaderGroupIcon";
+import { CursorCell } from "./CursorCell";
+import { PKCell } from "./PKCell";
 import styles from "./StreamFieldsTable.module.scss";
 
-interface TableStream {
+export interface TableStream {
   path: string[];
   dataType: string;
   cursorDefined?: boolean;
@@ -32,6 +32,8 @@ export interface StreamFieldsTableProps {
   onPkSelect: (pkPath: string[]) => void;
   shouldDefinePk: boolean;
   shouldDefineCursor: boolean;
+  isCursorDefinitionSupported: boolean;
+  isPKDefinitionSupported: boolean;
   syncSchemaFields: SyncSchemaField[];
 }
 
@@ -41,6 +43,8 @@ export const StreamFieldsTable: React.FC<StreamFieldsTableProps> = ({
   onCursorSelect,
   shouldDefineCursor,
   shouldDefinePk,
+  isCursorDefinitionSupported,
+  isPKDefinitionSupported,
   syncSchemaFields,
 }) => {
   const { formatMessage } = useIntl();
@@ -97,33 +101,47 @@ export const StreamFieldsTable: React.FC<StreamFieldsTableProps> = ({
       columnHelper.accessor("cursorDefined", {
         id: "sourceCursorDefined",
         header: () => <FormattedMessage id="form.field.cursorField" />,
-        cell: ({ getValue, row }) =>
-          getValue() && (
-            <RadioButton checked={isCursor(row.original.path)} onChange={() => onCursorSelect(row.original.path)} />
-          ),
+        cell: (props) => (
+          <CursorCell
+            isCursor={isCursor}
+            isCursorDefinitionSupported={isCursorDefinitionSupported}
+            onCursorSelect={onCursorSelect}
+            {...props}
+          />
+        ),
         meta: {
           thClassName: styles.headerCell,
-          tdClassName: styles.checkboxCell,
+          tdClassName: styles.radioBtnCell,
         },
       }),
       columnHelper.accessor("primaryKeyDefined", {
         id: "sourcePrimaryKeyDefined",
         header: () => <FormattedMessage id="form.field.primaryKey" />,
-        cell: ({ getValue, row }) =>
-          getValue() && (
-            <CheckBox
-              checked={isPrimaryKey(row.original.path)}
-              onChange={() => onPkSelect(row.original.path)}
-              className={styles.checkbox}
-            />
-          ),
+        cell: (props) => (
+          <PKCell
+            isPKDefinitionSupported={isPKDefinitionSupported}
+            isPrimaryKey={isPrimaryKey}
+            onPkSelect={onPkSelect}
+            {...props}
+          />
+        ),
+
         meta: {
           thClassName: styles.headerCell,
           tdClassName: styles.textCell,
         },
       }),
     ],
-    [columnHelper, formatMessage, isCursor, isPrimaryKey, onCursorSelect, onPkSelect]
+    [
+      columnHelper,
+      formatMessage,
+      isCursor,
+      isPrimaryKey,
+      isCursorDefinitionSupported,
+      isPKDefinitionSupported,
+      onCursorSelect,
+      onPkSelect,
+    ]
   );
 
   const destinationColumns = useMemo(

airbyte-webapp/src/components/ui/CheckBox/CheckBox.module.scss

@@ -19,8 +19,9 @@ $sm-size: 14px;
     display: none;
   }
 
-  .disabled {
+  &.disabled {
     border-color: colors.$grey-30;
+    cursor: not-allowed;
   }
 }
 

airbyte-webapp/src/components/ui/NextTable/NextTable.module.scss

@@ -1,5 +1,6 @@
 @use "scss/colors";
 @use "scss/variables" as vars;
+@use "scss/z-indices";
 
 // ------- <table/> --------
 .table {
@@ -12,6 +13,7 @@
 .thead {
   position: sticky;
   top: 0;
+  z-index: z-indices.$tableScroll;
 }
 
 // --------- <th/> ---------

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

@@ -26,7 +26,7 @@ const RadioButtonContainer = styled.label<{ checked?: boolean; disabled?: boolea
   border-radius: 50%;
   display: inline-block;
   padding: 4px;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
 `;
 
 export const RadioButton: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = (props) => {

airbyte-webapp/src/locales/en.json

@@ -223,6 +223,8 @@
   "form.field.destinationName": "Destination name",
   "form.field.primaryKey": "Primary key",
   "form.field.cursorField": "Cursor field",
+  "form.field.sourceDefinedCursor": "Source-Defined Cursor",
+  "form.field.sourceDefinedPK": "Source-Defined Primary key",
 
   "preferences.headTitle": "Preferences",
   "preferences.title": "Specify your preferences",

airbyte-webapp/src/scss/_z-indices.scss

@@ -8,3 +8,4 @@ $notification: 20;
 $schemaChangesBackdrop: 3;
 $schemaChangesBackdropContent: 4;
 $switchSliderBefore: 1;
+$tableScroll: 1;

airbyte-webapp/src/utils/links.ts

@@ -23,6 +23,8 @@ export const links = {
   statusLink: "https://status.airbyte.io/",
   tutorialsLink: "https://airbyte.com/tutorials",
   syncModeLink: `${BASE_DOCS_LINK}/understanding-airbyte/connections`,
+  sourceDefinedCursorLink: `${BASE_DOCS_LINK}/understanding-airbyte/connections/incremental-deduped-history/#source-defined-cursor`,
+  sourceDefinedPKLink: `${BASE_DOCS_LINK}/understanding-airbyte/connections/incremental-deduped-history/#source-defined-primary-key`,
   demoLink: "https://demo.airbyte.io",
   contactSales: "https://airbyte.com/talk-to-sales",
   webpageLink: "https://airbyte.com",