INN 2967 Create expanded rows layout

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/RunsTable.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { FunctionRunStatusIcon } from '@inngest/components/FunctionRunStatusIcon';
 import { Skeleton } from '@inngest/components/Skeleton';
 import { IDCell, StatusCell, TextCell, TimeCell } from '@inngest/components/Table';
@@ -10,8 +10,10 @@ import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
+  getExpandedRowModel,
   useReactTable,
   type OnChangeFn,
+  type Row,
   type SortingState,
 } from '@tanstack/react-table';
 
@@ -30,9 +32,18 @@ type RunsTableProps = {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   isLoading?: boolean;
+  renderSubComponent: (props: { id: string }) => React.ReactElement;
+  getRowCanExpand: (row: Row<Run>) => boolean;
 };
 
-export default function RunsTable({ data = [], isLoading, sorting, setSorting }: RunsTableProps) {
+export default function RunsTable({
+  data = [],
+  isLoading,
+  sorting,
+  setSorting,
+  getRowCanExpand,
+  renderSubComponent,
+}: RunsTableProps) {
   // Render 8 empty lines for skeletons when data is loading
   const tableData = useMemo(() => (isLoading ? Array(8).fill({}) : data), [isLoading, data]);
 
@@ -51,6 +62,8 @@ export default function RunsTable({ data = [], isLoading, sorting, setSorting }:
     data: tableData,
     columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand,
     manualSorting: true,
     onSortingChange: setSorting,
     state: {
@@ -73,7 +86,7 @@ export default function RunsTable({ data = [], isLoading, sorting, setSorting }:
             {headerGroup.headers.map((header) => (
               <th
                 key={header.id}
-                className={cn(tableColumnStyles, 'text-sm font-semibold text-slate-500 ')}
+                className={cn(tableColumnStyles, 'text-left text-sm font-semibold text-slate-500')}
               >
                 {header.isPlaceholder ? null : (
                   <div
@@ -106,13 +119,26 @@ export default function RunsTable({ data = [], isLoading, sorting, setSorting }:
         )}
         {!isEmpty &&
           table.getRowModel().rows.map((row) => (
-            <tr key={row.id} className="h-12">
-              {row.getVisibleCells().map((cell) => (
-                <td className={tableColumnStyles} key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
-            </tr>
+            <Fragment key={row.id}>
+              <tr
+                key={row.id}
+                className="h-12 cursor-pointer hover:bg-sky-50"
+                onClick={row.getToggleExpandedHandler()}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td className={tableColumnStyles} key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+              {row.getIsExpanded() && (
+                <tr>
+                  <td colSpan={row.getVisibleCells().length}>
+                    {renderSubComponent({ id: row.id })}
+                  </td>
+                </tr>
+              )}
+            </Fragment>
           ))}
       </tbody>
       <tfoot>
@@ -148,6 +174,7 @@ const columns = [
       );
     },
     header: 'Status',
+    enableSorting: false,
   }),
   columnHelper.accessor('id', {
     cell: (info) => {
@@ -160,6 +187,7 @@ const columns = [
       );
     },
     header: 'Run ID',
+    enableSorting: false,
   }),
   columnHelper.accessor('queuedAt', {
     cell: (info) => {
@@ -174,6 +202,7 @@ const columns = [
       );
     },
     header: 'Queued At',
+    enableSorting: false,
   }),
   columnHelper.accessor('endedAt', {
     cell: (info) => {
@@ -188,6 +217,7 @@ const columns = [
       );
     },
     header: 'Ended At',
+    enableSorting: false,
   }),
   columnHelper.accessor('durationMS', {
     cell: (info) => {
@@ -200,5 +230,6 @@ const columns = [
       );
     },
     header: 'Duration',
+    enableSorting: false,
   }),
 ];

ui/apps/dashboard/src/app/(organization-active)/(dashboard)/env/[environmentSlug]/functions/[slug]/runs/page.tsx

@@ -32,6 +32,11 @@ const GetRunsDocument = graphql(`
   }
 `);
 
+const renderSubComponent = ({ id }: { id: string }) => {
+  /* TODO: Render the timeline instead */
+  return <p>Subrow {id}</p>;
+};
+
 export default function RunsPage() {
   const [filteredStatus, setFilteredStatus, removeFilteredStatus] =
     useStringArraySearchParam('filterStatus');
@@ -75,8 +80,13 @@ export default function RunsPage() {
         {/* TODO: wire button */}
         <Button label="Refresh" appearance="text" btnAction={refetch} icon={<RiLoopLeftLine />} />
       </div>
-      {/* @ts-ignore */}
-      <RunsTable data={runs} isLoading={fetchingRuns} />
+      <RunsTable
+        //@ts-ignore
+        data={runs}
+        isLoading={fetchingRuns}
+        renderSubComponent={renderSubComponent}
+        getRowCanExpand={() => true}
+      />
     </main>
   );
 }