🪟 🔧 UI Table migration to v8 (#21109)

* Starts migration of react-table to v8 * Fixes react-table v8 types * Removes inline styles; Adds SCSS custom styles for th in NextTable component * Migrate ConnectorsView, ImplementationTable and UserSettingsView Table to NextTable * Adds usage of createColumnHelper utility to get rid of additional typing (createColumnHelper() itself add types to the specific column); Fixes styles to use SCSS variables; Removes collapse property on column meta data * Removes unnecessary cell props type definitions * Fixes styles issues * Fix stream fields table to remove box-shadow * Removes headerHighlighted from column meta; Removes erroredRows prop from NextTable component; Renames ITableDataItem -> ConnectionTableDataItem; Renames timeInSecond -> timeInSeconds; Fixes sorting and styling for UsagePerConnection table; * Adds responsive property for column meta * Fixes styles for StreamsFieldTable * Update airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx Co-authored-by: Vladimir <volodymyr.s.petrov@globallogic.com> * Fixes ConnectionTable interface name * Fixes StreamsFieldsTable textCell to have min-width: 140px --------- Co-authored-by: Vladimir <volodymyr.s.petrov@globallogic.com>
airbytehq · Feb 1, 2023 · c6d8f28 · c6d8f28
1 parent ee00fcc
commit c6d8f28
Show file tree

Hide file tree

Showing 24 changed files with 432 additions and 293 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.module.scss b/airbyte-webapp/src/components/EntityTable/ConnectionTable.module.scss
@@ -1,10 +1,11 @@
-.tableHeaderButton {
-  background-color: inherit;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font-size: inherit;
-  font-weight: inherit;
-  text-transform: inherit;
-  white-space: nowrap;
+th.width30 {
+  width: 30%;
+}
+
+.thEnabled {
+  width: 1%;
+}
+
+.thConnectionSettings {
+  width: 1%;
 }
diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx
@@ -1,10 +1,10 @@
+import { createColumnHelper } from "@tanstack/react-table";
 import queryString from "query-string";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { CellProps } from "react-table";
 
-import { Table, SortableTableHeader } from "components/ui/Table";
+import { SortableTableHeader } from "components/ui/Table";
 
 import { ConnectionScheduleType, SchemaChange } from "core/request/AirbyteClient";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
@@ -16,15 +16,17 @@ import { ConnectorNameCell } from "./components/ConnectorNameCell";
 import { FrequencyCell } from "./components/FrequencyCell";
 import { LastSyncCell } from "./components/LastSyncCell";
 import { StatusCell } from "./components/StatusCell";
-import { ITableDataItem, SortOrderEnum } from "./types";
+import styles from "./ConnectionTable.module.scss";
+import { ConnectionTableDataItem, SortOrderEnum } from "./types";
+import { NextTable } from "../ui/NextTable";
 
-interface IProps {
-  data: ITableDataItem[];
+interface ConnectionTableProps {
+  data: ConnectionTableDataItem[];
   entity: "source" | "destination" | "connection";
-  onClickRow?: (data: ITableDataItem) => void;
+  onClickRow?: (data: ConnectionTableDataItem) => void;
 }
 
-const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
+const ConnectionTable: React.FC<ConnectionTableProps> = ({ data, entity, onClickRow }) => {
   const navigate = useNavigate();
   const query = useQuery<{ sortBy?: string; order?: SortOrderEnum }>();
   const allowAutoDetectSchema = useFeature(FeatureItem.AllowAutoDetectSchema);
@@ -70,10 +72,12 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
 
   const sortingData = React.useMemo(() => data.sort(sortData), [sortData, data]);
 
+  const columnHelper = createColumnHelper<ConnectionTableDataItem>();
+
   const columns = React.useMemo(
     () => [
-      {
-        Header: (
+      columnHelper.accessor("name", {
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("name")}
             isActive={sortBy === "name"}
@@ -82,20 +86,20 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
             <FormattedMessage id="tables.name" />
           </SortableTableHeader>
         ),
-        headerHighlighted: true,
-        accessor: "name",
-        customWidth: 30,
-        responsive: true,
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
+        meta: {
+          thClassName: styles.width30,
+          responsive: true,
+        },
+        cell: (props) => (
           <ConnectionStatusCell
-            status={row.original.lastSyncStatus}
-            value={cell.value}
-            enabled={row.original.enabled}
+            status={props.row.original.lastSyncStatus}
+            value={props.cell.getValue()}
+            enabled={props.row.original.enabled}
           />
         ),
-      },
-      {
-        Header: (
+      }),
+      columnHelper.accessor("entityName", {
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("entityName")}
             isActive={sortBy === "entityName"}
@@ -106,16 +110,20 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
             />
           </SortableTableHeader>
         ),
-        headerHighlighted: true,
-        accessor: "entityName",
-        customWidth: 30,
-        responsive: true,
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <ConnectorNameCell value={cell.value} icon={row.original.entityIcon} enabled={row.original.enabled} />
+        meta: {
+          thClassName: styles.width30,
+          responsive: true,
+        },
+        cell: (props) => (
+          <ConnectorNameCell
+            value={props.cell.getValue()}
+            icon={props.row.original.entityIcon}
+            enabled={props.row.original.enabled}
+          />
         ),
-      },
-      {
-        Header: (
+      }),
+      columnHelper.accessor("connectorName", {
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("connectorName")}
             isActive={sortBy === "connectorName"}
@@ -124,22 +132,30 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
             <FormattedMessage id={entity === "connection" ? "tables.sourceConnectionToName" : "tables.connector"} />
           </SortableTableHeader>
         ),
-        accessor: "connectorName",
-        customWidth: 30,
-        responsive: true,
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <ConnectorNameCell value={cell.value} icon={row.original.connectorIcon} enabled={row.original.enabled} />
+        meta: {
+          thClassName: styles.width30,
+          responsive: true,
+        },
+        cell: (props) => (
+          <ConnectorNameCell
+            value={props.cell.getValue()}
+            icon={props.row.original.connectorIcon}
+            enabled={props.row.original.enabled}
+          />
         ),
-      },
-      {
-        Header: <FormattedMessage id="tables.frequency" />,
-        accessor: "scheduleData",
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <FrequencyCell value={cell.value} enabled={row.original.enabled} scheduleType={row.original.scheduleType} />
+      }),
+      columnHelper.accessor("scheduleData", {
+        header: () => <FormattedMessage id="tables.frequency" />,
+        cell: (props) => (
+          <FrequencyCell
+            value={props.cell.getValue()}
+            enabled={props.row.original.enabled}
+            scheduleType={props.row.original.scheduleType}
+          />
         ),
-      },
-      {
-        Header: (
+      }),
+      columnHelper.accessor("lastSync", {
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("lastSync")}
             isActive={sortBy === "lastSync"}
@@ -148,38 +164,37 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
             <FormattedMessage id="tables.lastSync" />
           </SortableTableHeader>
         ),
-        accessor: "lastSync",
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <LastSyncCell timeInSecond={cell.value} enabled={row.original.enabled} />
-        ),
-      },
-      {
-        Header: <FormattedMessage id="tables.enabled" />,
-        accessor: "enabled",
-        customWidth: 1,
-        Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
+        cell: (props) => <LastSyncCell timeInSeconds={props.cell.getValue()} enabled={props.row.original.enabled} />,
+      }),
+      columnHelper.accessor("enabled", {
+        header: () => <FormattedMessage id="tables.enabled" />,
+        meta: {
+          thClassName: styles.thEnabled,
+        },
+        cell: (props) => (
           <StatusCell
-            schemaChange={row.original.schemaChange}
-            enabled={cell.value}
-            id={row.original.connectionId}
-            isSyncing={row.original.isSyncing}
-            isManual={row.original.scheduleType === ConnectionScheduleType.manual}
-            hasBreakingChange={allowAutoDetectSchema && row.original.schemaChange === SchemaChange.breaking}
+            schemaChange={props.row.original.schemaChange}
+            enabled={props.cell.getValue()}
+            id={props.row.original.connectionId}
+            isSyncing={props.row.original.isSyncing}
+            isManual={props.row.original.scheduleType === ConnectionScheduleType.manual}
+            hasBreakingChange={allowAutoDetectSchema && props.row.original.schemaChange === SchemaChange.breaking}
             allowSync={allowSync}
           />
         ),
-      },
-      {
-        Header: "",
-        accessor: "connectionId",
-        customWidth: 1,
-        Cell: ({ cell }: CellProps<ITableDataItem>) => <ConnectionSettingsCell id={cell.value} />,
-      },
+      }),
+      columnHelper.accessor("connectionId", {
+        header: "",
+        meta: {
+          thClassName: styles.thConnectionSettings,
+        },
+        cell: (props) => <ConnectionSettingsCell id={props.cell.getValue()} />,
+      }),
     ],
-    [sortBy, sortOrder, entity, onSortClick, allowSync, allowAutoDetectSchema]
+    [columnHelper, sortBy, sortOrder, onSortClick, entity, allowAutoDetectSchema, allowSync]
   );
 
-  return <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows testId="connectionsTable" />;
+  return <NextTable columns={columns} data={sortingData} onClickRow={onClickRow} testId="connectionsTable" />;
 };
 
 export default ConnectionTable;
diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss b/airbyte-webapp/src/components/EntityTable/ImplementationTable.module.scss
@@ -3,3 +3,7 @@
     padding-left: 32px !important;
   }
 }
+
+.thEntityName {
+  width: 40%;
+}
diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx b/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx
@@ -1,10 +1,11 @@
+import { createColumnHelper } from "@tanstack/react-table";
 import queryString from "query-string";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { CellProps } from "react-table";
 
-import { Table, SortableTableHeader } from "components/ui/Table";
+import { NextTable } from "components/ui/NextTable";
+import { SortableTableHeader } from "components/ui/Table";
 
 import { useQuery } from "hooks/useQuery";
 
@@ -64,10 +65,13 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
   );
 
   const sortingData = React.useMemo(() => data.sort(sortData), [sortData, data]);
+
+  const columnHelper = createColumnHelper<EntityTableDataItem>();
+
   const columns = React.useMemo(
     () => [
-      {
-        Header: (
+      columnHelper.accessor("entityName", {
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("entity")}
             isActive={sortBy === "entity"}
@@ -76,15 +80,13 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
             <FormattedMessage id="tables.name" />
           </SortableTableHeader>
         ),
-        headerHighlighted: true,
-        accessor: "entityName",
-        customWidth: 40,
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <EntityNameCell value={cell.value} enabled={row.original.enabled} />
-        ),
-      },
-      {
-        Header: (
+        meta: {
+          thClassName: styles.thEntityName,
+        },
+        cell: (props) => <EntityNameCell value={props.cell.getValue()} enabled={props.row.original.enabled} />,
+      }),
+      columnHelper.accessor("connectorName", {
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("connector")}
             isActive={sortBy === "connector"}
@@ -93,20 +95,22 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
             <FormattedMessage id="tables.connector" />
           </SortableTableHeader>
         ),
-        accessor: "connectorName",
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <ConnectorNameCell value={cell.value} icon={row.original.connectorIcon} enabled={row.original.enabled} />
+        cell: (props) => (
+          <ConnectorNameCell
+            value={props.cell.getValue()}
+            icon={props.row.original.connectorIcon}
+            enabled={props.row.original.enabled}
+          />
         ),
-      },
-      {
-        Header: <FormattedMessage id={`tables.${entity}ConnectWith`} />,
-        accessor: "connectEntities",
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <ConnectEntitiesCell values={cell.value} entity={entity} enabled={row.original.enabled} />
+      }),
+      columnHelper.accessor("connectEntities", {
+        header: () => <FormattedMessage id={`tables.${entity}ConnectWith`} />,
+        cell: (props) => (
+          <ConnectEntitiesCell values={props.cell.getValue()} entity={entity} enabled={props.row.original.enabled} />
         ),
-      },
-      {
-        Header: (
+      }),
+      columnHelper.accessor("lastSync", {
+        header: () => (
           <SortableTableHeader
             onClick={() => onSortClick("lastSync")}
             isActive={sortBy === "lastSync"}
@@ -115,24 +119,22 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
             <FormattedMessage id="tables.lastSync" />
           </SortableTableHeader>
         ),
-        accessor: "lastSync",
-        Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <LastSyncCell timeInSecond={cell.value} enabled={row.original.enabled} />
+        cell: (props) => (
+          <LastSyncCell timeInSeconds={props.cell.getValue() || 0} enabled={props.row.original.enabled} />
         ),
-      },
-      {
-        Header: <FormattedMessage id="sources.status" />,
+      }),
+      columnHelper.accessor("connectEntities", {
+        header: () => <FormattedMessage id="sources.status" />,
         id: "status",
-        accessor: "connectEntities",
-        Cell: ({ cell }: CellProps<EntityTableDataItem>) => <AllConnectionsStatusCell connectEntities={cell.value} />,
-      },
+        cell: (props) => <AllConnectionsStatusCell connectEntities={props.cell.getValue()} />,
+      }),
     ],
-    [entity, onSortClick, sortBy, sortOrder]
+    [columnHelper, entity, onSortClick, sortBy, sortOrder]
   );
 
   return (
     <div className={styles.content}>
-      <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows testId={`${entity}sTable`} />
+      <NextTable columns={columns} data={sortingData} onClickRow={onClickRow} testId={`${entity}sTable`} />
     </div>
   );
 };

diff --git a/airbyte-webapp/src/components/EntityTable/components/AllConnectionsStatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/AllConnectionsStatusCell.tsx
@@ -17,7 +17,7 @@ interface AllConnectionStatusConnectEntity {
   name: string;
   connector: string;
   status: string;
-  lastSyncStatus: string;
+  lastSyncStatus: string | null;
 }
 
 interface AllConnectionsStatusCellProps {