🪟 🎨 Show Source-defined cursor and primary key fields on new Stream Details panel

airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap

@@ -424,7 +424,7 @@ exports[`CreateConnectionForm should render 1`] = `
                         class="<removed-for-snapshot-test>"
                       >
                         <input
-                          class="<removed-for-snapshot-test>"
+                          aria-checked="false"
                           type="checkbox"
                         />
                       </label>
@@ -638,7 +638,7 @@ exports[`CreateConnectionForm should render 1`] = `
                             class="<removed-for-snapshot-test>"
                           >
                             <input
-                              class="<removed-for-snapshot-test>"
+                              aria-checked="false"
                               type="checkbox"
                             />
                           </label>

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

@@ -175,6 +175,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

@@ -0,0 +1,44 @@
+@use "scss/colors";
+@use "scss/variables" as vars;
+
+$default-size: 18px;
+$small-size: 14px;
+
+.container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: $default-size;
+  width: $default-size;
+  padding: vars.$border-thin 0;
+  border: vars.$border-thin solid colors.$grey-100;
+  border-radius: vars.$border-radius-2xs;
+  color: colors.$white;
+  background-color: colors.$white;
+  cursor: pointer;
+
+  input {
+    display: none;
+  }
+
+  &.disabled {
+    border-color: colors.$grey-30;
+    cursor: not-allowed;
+  }
+}
+
+.checked,
+.indeterminate {
+  border: 1px solid colors.$blue;
+  background: colors.$blue;
+
+  &.disabled {
+    background-color: colors.$blue-200;
+    border-color: colors.$blue-200;
+  }
+}
+
+.small {
+  height: $small-size;
+  width: $small-size;
+}

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

@@ -1,49 +1,38 @@
 import { faCheck, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
-import styled from "styled-components";
+import classNames from "classnames";
+import React, { InputHTMLAttributes } from "react";
 
-const CheckBoxInput = styled.input`
-  opacity: 0;
-  width: 0;
-  height: 0;
-  margin: 0;
-  position: absolute;
-`;
+import styles from "./CheckBox.module.scss";
 
-const CheckBoxContainer = styled.label<{
-  checked?: boolean;
+export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
   indeterminate?: boolean;
-}>`
-  height: 18px;
-  min-width: 18px;
-  border: 1px solid
-    ${({ theme, checked, indeterminate }) => (checked || indeterminate ? theme.primaryColor : theme.greyColor20)};
-  background: ${({ theme, checked, indeterminate }) =>
-    checked || indeterminate ? theme.primaryColor : theme.whiteColor};
-  color: ${({ theme }) => theme.whiteColor};
-  text-align: center;
-  border-radius: 4px;
-  font-size: 13px;
-  line-height: 13px;
-  display: inline-block;
-  padding: 1px 0;
-  cursor: pointer;
-  vertical-align: top;
-  position: relative;
-`;
+  small?: boolean;
+}
 
-export const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean }> = ({
-  indeterminate,
-  ...props
-}) => (
-  <CheckBoxContainer
-    onClick={(event: React.SyntheticEvent) => event.stopPropagation()}
-    className={props.className}
-    checked={props.checked}
-    indeterminate={indeterminate}
-  >
-    <CheckBoxInput {...props} type="checkbox" />
-    {indeterminate ? <FontAwesomeIcon icon={faMinus} /> : props.checked && <FontAwesomeIcon icon={faCheck} />}
-  </CheckBoxContainer>
-);
+export const CheckBox: React.FC<CheckBoxProps> = ({ indeterminate, small, ...inputProps }) => {
+  const { checked, disabled, className } = inputProps;
+  const iconSize = small ? "sm" : "lg";
+
+  return (
+    <label
+      className={classNames(
+        styles.container,
+        {
+          [styles.checked]: checked,
+          [styles.indeterminate]: indeterminate,
+          [styles.disabled]: disabled,
+          [styles.small]: small,
+        },
+        className
+      )}
+    >
+      <input type="checkbox" aria-checked={checked} {...inputProps} />
+      {indeterminate ? (
+        <FontAwesomeIcon size={iconSize} icon={faMinus} />
+      ) : (
+        checked && <FontAwesomeIcon size={iconSize} icon={faCheck} />
+      )}
+    </label>
+  );
+};