🪟 🎨 New stream details panel

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

@@ -0,0 +1,68 @@
+@use "scss/colors";
+
+// ------- <table/> --------
+.table {
+  border-spacing: 0;
+  width: 100%;
+  max-width: 100%;
+  border-radius: 10px;
+}
+
+// --------- <th/> ---------
+.th {
+  background: colors.$grey-50;
+  color: colors.$grey;
+  text-transform: uppercase;
+  border-bottom: none;
+  text-align: left;
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 600;
+
+  &:first-child {
+    padding-left: 45px;
+    border-radius: 10px 0 0;
+  }
+
+  &:last-child {
+    padding-left: 15px;
+    border-radius: 0 10px 0 0;
+  }
+}
+
+// --------- <tr/> ---------
+.tr {
+  background: colors.$white;
+  cursor: auto;
+
+  &:hover {
+    background-color: colors.$grey-50;
+  }
+}
+
+// --------- <td/> ---------
+
+.td {
+  padding: 16px 13px;
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: normal;
+  color: colors.$dark-blue;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid colors.$grey-100;
+  width: auto;
+
+  tr:last-child > & {
+    border-bottom: none;
+
+    &:first-child {
+      border-radius: 0 0 0 10px;
+    }
+
+    &:last-child {
+      border-radius: 0 0 10px;
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import { render } from "@testing-library/react";
+import { CellProps } from "react-table";
+
+import { NextTable } from "./NextTable";
+
+interface Item {
+  name: string;
+  value: number;
+}
+
+describe("<NextTable>", () => {
+  it("should should render the table with passed data", () => {
+    const data: Item[] = [
+      { name: "2017", value: 100 },
+      { name: "2018", value: 300 },
+      { name: "2019", value: 500 },
+      { name: "2020", value: 400 },
+      { name: "2021", value: 200 },
+    ];
+
+    const columns = [
+      {
+        Header: "Name",
+        accessor: "name",
+        Cell: ({ cell }: CellProps<Item>) => <strong>{cell.value}</strong>,
+      },
+      {
+        Header: "Value",
+        accessor: "value",
+        Cell: ({ cell }: CellProps<Item>) => <>{cell.value}</>,
+      },
+    ];
+
+    const { getByText, container } = render(<NextTable columns={columns} data={data} />);
+    expect(getByText(/2019/)).toBeInTheDocument();
+    expect(getByText(/500/)).toBeInTheDocument();
+
+    expect(container.querySelectorAll("thead tr")).toHaveLength(1);
+    expect(container.querySelectorAll("tbody tr")).toHaveLength(data.length);
+  });
+});

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

@@ -0,0 +1,96 @@
+import classNames from "classnames";
+import React, { memo, useMemo } from "react";
+import { Column, SortingRule, useSortBy, useTable } from "react-table";
+
+import styles from "./NextTable.module.scss";
+
+interface TableProps {
+  columns: ReadonlyArray<Column<Record<string, unknown>>>;
+  erroredRows?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onClickRow?: (data: any) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sortBy?: Array<SortingRule<any>>;
+}
+
+export const NextTable: React.FC<TableProps> = memo(({ columns, data, onClickRow, sortBy }) => {
+  const [plugins, config] = useMemo(() => {
+    const pl = [];
+    const plConfig: Record<string, unknown> = {};
+
+    if (sortBy) {
+      pl.push(useSortBy);
+      plConfig.initialState = { sortBy };
+    }
+    return [pl, plConfig];
+  }, [sortBy]);
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      ...config,
+      columns,
+      data,
+    },
+    ...plugins
+  );
+
+  return (
+    <table className={styles.table} {...getTableProps()}>
+      <thead>
+        {headerGroups.map((headerGroup, key) => (
+          <tr {...headerGroup.getHeaderGroupProps()} key={`table-header-${key}`}>
+            {headerGroup.headers.map((column, columnKey) => (
+              <th
+                {...column.getHeaderProps([
+                  {
+                    className: classNames(
+                      styles.th,
+                      // @ts-expect-error will be fixed when with typings
+                      column.thClassName
+                    ),
+                  },
+                ])}
+                key={`table-column-${key}-${columnKey}`}
+              >
+                {column.render("Header")}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody {...getTableBodyProps()}>
+        {rows.map((row) => {
+          prepareRow(row);
+          return (
+            <tr
+              {...row.getRowProps()}
+              className={styles.tr}
+              key={`table-row-${row.id}`}
+              onClick={() => onClickRow?.(row.original)}
+            >
+              {row.cells.map((cell, key) => {
+                return (
+                  <td
+                    {...cell.getCellProps([
+                      {
+                        className: classNames(
+                          styles.td,
+                          // @ts-expect-error will be fixed when with typings
+                          cell.column.tdClassName
+                        ),
+                      },
+                    ])}
+                    key={`table-cell-${row.id}-${key}`}
+                  >
+                    {cell.render("Cell")}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+});

airbyte-webapp/src/components/connection/CatalogTree/next/NextTable/index.stories.tsx

@@ -0,0 +1,44 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { CellProps } from "react-table";
+
+import { NextTable } from "./NextTable";
+
+export default {
+  title: "UI/NextTable",
+  component: NextTable,
+  argTypes: {},
+} as ComponentMeta<typeof NextTable>;
+
+const Template: ComponentStory<typeof NextTable> = (args) => <NextTable {...args} />;
+
+interface Item {
+  name: string;
+  value: number;
+}
+
+const data: Item[] = [
+  { name: "2017", value: 100 },
+  { name: "2018", value: 300 },
+  { name: "2019", value: 500 },
+  { name: "2020", value: 400 },
+  { name: "2021", value: 200 },
+];
+
+const columns = [
+  {
+    Header: "Name",
+    accessor: "name",
+    Cell: ({ cell }: CellProps<Item>) => <strong>{cell.value}</strong>,
+  },
+  {
+    Header: "Value",
+    accessor: "value",
+    Cell: ({ cell }: CellProps<Item>) => <>{cell.value}</>,
+  },
+];
+
+export const Primary = Template.bind({});
+Primary.args = {
+  data,
+  columns,
+};

airbyte-webapp/src/components/connection/CatalogTree/next/NextTable/index.ts

@@ -0,0 +1 @@
+export * from "./NextTable";

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

@@ -6,7 +6,7 @@ $icon-size: 15px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: variables.$spacing-lg calc(variables.$spacing-lg * 2);
+  padding: variables.$spacing-lg calc(#{variables.$spacing-lg} * 2);
 }
 
 .connector {

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

@@ -1,12 +1,12 @@
 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 { StreamFieldsTable, StreamFieldsTableProps } from "./StreamFieldsTable/StreamFieldsTable";
 import { StreamPanelHeader } from "./StreamPanelHeader";
 
 interface StreamDetailsPanelProps extends StreamFieldsTableProps {
@@ -39,7 +39,6 @@ export const StreamDetailsPanel: React.FC<StreamDetailsPanelProps> = ({
           onClose={onClose}
           onSelectedChange={onSelectedChange}
         />
-        <StreamConnectionHeader />
         <StreamFieldsTable
           config={config}
           syncSchemaFields={syncSchemaFields}