🪟 🎨 New stream details panel (#19219)

* move all stream details table related components to separate folder;
create the first version of table powered by current implementation of react-table;

* init a copy of existing <Table /> component - <NextTable />

* fixed calc error

* first implementation of NextTable:
- use css modules instead of styled cmp
- extracted base table styles
- remove props used just for styling(customPadding, light, etc.)
- no typings

* remove StreamDetailsHeader

* updated StreamFieldsTable

* fix typings error

* update NextTable cells classnames

* remove last styled component from NextTable

* add base tests for NextTable component

* remove comments

* replace "any" type with "unknown" where possible

* add react-table v8 package

* update NextTable component

* update NextTable component

* extend react-table ColumnMeta interface

* update StreamFieldsTable component

* update NextTable tests

* update NextTable storybook

* fixed crashed StreamConnectionHeader during connection creation

* replace useConnectionEditService with useConnectionFormService hook

* remove getIcon wrap function and combine all parts in separate component

* update styles

* extract common logic to separate function

* fix performance

* fix not capitalized table header cell

* fix checkbox style issue

* make thead sticky by default

* fix not scrollable table

* fixed top bar overflow during scrolling table

* fix top bar overflow during scrolling table - second try

* fix hidden cursor and pk columns

* fix hidden cursor and pk columns

* fix PR comments: replace css values with variables

* remove unnecessary hook dependencies

* fix relative import component path

* add space around panel;
add 100px top gap height

* fix arrow color

* align table padding with toggle

* add ArrowRight icon from design
replace faArrowRight with ArrowRight

* move NextTable component to ui folder

* move StreamDetailsPanel component to separate folder

* move StreamPanelHeader component to separate folder

* remove obsolete DetailsPanel components

* move all DetailsPanel related components to separate folder

* fix when no namespace

* fixed details panel header sync mode label

* fix relative import path

* move react-table.d.ts to src/types

* remove fake destination data type column

* add FormattedMessage to ConnectorHeaderGroupIcon

* fix StreamPanelHeader style to match Figma

* change td color from grey-100 to grey-50
fix relative path

* temporary remove @tanstack/react-table package

* add @tanstack/react-table back to package.json

* fix cross icon color
fix items alignment in flex container

Author: dizel852

airbyte-webapp/package-lock.json

@@ -38,6 +38,7 @@
     "@monaco-editor/react": "^4.4.5",
     "@sentry/react": "^6.19.6",
     "@sentry/tracing": "^6.19.6",
+    "@tanstack/react-table": "^8.7.0",
     "@types/segment-analytics": "^0.0.34",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",

airbyte-webapp/package.json

@@ -19,7 +19,7 @@ import { ConnectionFormValues, SUPPORTED_MODES } from "views/Connection/Connecti
 
 import styles from "./CatalogSection.module.scss";
 import { CatalogTreeTableRow } from "./next/CatalogTreeTableRow";
-import { StreamDetailsPanel } from "./next/StreamDetailsPanel";
+import { StreamDetailsPanel } from "./next/StreamDetailsPanel/StreamDetailsPanel";
 import { StreamFieldTable } from "./StreamFieldTable";
 import { StreamHeader } from "./StreamHeader";
 import { flatten, getPathType } from "./utils";

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

@@ -12,7 +12,7 @@ import { getIcon } from "utils/imageUtils";
 
 import styles from "./StreamConnectionHeader.module.scss";
 
-const renderIcon = (icon?: string): JSX.Element => <div className={styles.icon}>{getIcon(icon)}</div>;
+export const renderIcon = (icon?: string): JSX.Element => <div className={styles.icon}>{getIcon(icon)}</div>;
 
 export const StreamConnectionHeader: React.FC = () => {
   const {

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

@@ -0,0 +1,27 @@
+@use "scss/colors";
+@use "scss/variables" as vars;
+@use "scss/z-indices";
+
+$container-left-space: vars.$spacing-xl;
+$container-right-space: vars.$spacing-xl * 2;
+
+.dialog {
+  z-index: z-indices.$modal;
+}
+
+.container {
+  position: fixed;
+  bottom: 0;
+  left: vars.$width-size-menu + $container-left-space;
+  width: calc(100% - (vars.$width-size-menu + $container-right-space));
+  z-index: 1000;
+  height: calc(100vh - 100px);
+  background: colors.$white;
+  border-radius: vars.$border-radius-2xl vars.$border-radius-2xl 0 0;
+  box-shadow: 0 0 22px rgba(colors.$dark-blue-900, 12%);
+}
+
+.tableContainer {
+  height: calc(100% - 64px);
+  overflow: scroll;
+}

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

@@ -1,13 +1,13 @@
 import { Dialog } from "@headlessui/react";
+import React from "react";
 
 import { Overlay } from "components/ui/Overlay";
 
 import { AirbyteStream } from "core/request/AirbyteClient";
 
-import { StreamConnectionHeader } from "./StreamConnectionHeader";
 import styles from "./StreamDetailsPanel.module.scss";
-import { StreamFieldsTable, StreamFieldsTableProps } from "./StreamFieldsTable";
-import { StreamPanelHeader } from "./StreamPanelHeader";
+import { StreamFieldsTable, StreamFieldsTableProps } from "./StreamFieldsTable/StreamFieldsTable";
+import { StreamPanelHeader } from "./StreamPanelHeader/StreamPanelHeader";
 
 interface StreamDetailsPanelProps extends StreamFieldsTableProps {
   disabled?: boolean;
@@ -39,15 +39,16 @@ export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
           onClose={onClose}
           onSelectedChange={onSelectedChange}
         />
-        <StreamConnectionHeader />
-        <StreamFieldsTable
-          config={config}
-          syncSchemaFields={syncSchemaFields}
-          onCursorSelect={onCursorSelect}
-          onPkSelect={onPkSelect}
-          shouldDefinePk={shouldDefinePk}
-          shouldDefineCursor={shouldDefineCursor}
-        />
+        <div className={styles.tableContainer}>
+          <StreamFieldsTable
+            config={config}
+            syncSchemaFields={syncSchemaFields}
+            onCursorSelect={onCursorSelect}
+            onPkSelect={onPkSelect}
+            shouldDefinePk={shouldDefinePk}
+            shouldDefineCursor={shouldDefineCursor}
+          />
+        </div>
       </Dialog.Panel>
     </Dialog>
   );

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

@@ -0,0 +1,13 @@
+$connector-icon-size: 28px;
+
+.connectorIconContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.icon {
+  height: $connector-icon-size;
+  width: $connector-icon-size;
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { getIcon } from "utils/imageUtils";
+
+import styles from "./ConnectorHeaderGroupIcon.module.scss";
+
+interface StreamHeaderGroupIconProps {
+  type: "source" | "destination";
+  icon?: string;
+}
+
+export const ConnectorHeaderGroupIcon: React.FC<StreamHeaderGroupIconProps> = ({ type, icon }) => {
+  return (
+    <span className={styles.connectorIconContainer}>
+      <div className={styles.icon}>{getIcon(icon)}</div>
+      <FormattedMessage id={`connector.${type}`} />
+    </span>
+  );
+};

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

@@ -0,0 +1,93 @@
+@use "scss/colors";
+@use "scss/variables";
+
+$cell-height: 28px;
+$cell-left-padding: variables.$spacing-xl + variables.$spacing-sm;
+
+.customTableStyle {
+  td {
+    border-bottom-color: colors.$grey-50;
+  }
+}
+
+.headerGroupCell {
+  height: 58px;
+  background-color: colors.$white;
+  color: colors.$dark-blue;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: $cell-height;
+  text-transform: capitalize;
+
+  &:first-child {
+    padding-left: $cell-left-padding;
+    border-radius: 0;
+  }
+
+  &:last-child {
+    padding-left: 0;
+  }
+}
+
+.headerCell {
+  color: colors.$grey;
+  background-color: colors.$grey-50;
+  height: $cell-height;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  text-transform: capitalize;
+
+  &:first-child {
+    padding-left: $cell-left-padding;
+    border-radius: 0;
+  }
+
+  &:last-child {
+    padding-left: 0;
+    border-radius: 0;
+  }
+}
+
+%bodyCell {
+  height: $cell-height;
+  padding: 0;
+
+  &:first-child {
+    padding-left: $cell-left-padding;
+    border-radius: 0;
+  }
+}
+
+.textCell {
+  @extend %bodyCell;
+
+  color: colors.$dark-blue;
+}
+
+.dataTypeCell {
+  @extend %bodyCell;
+
+  color: colors.$grey-400;
+}
+
+.arrowCell {
+  @extend %bodyCell;
+
+  svg {
+    color: colors.$grey-200;
+  }
+}
+
+.checkboxCell {
+  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;
+}