feat: add hierarchical grouping for dotted test paths (#1885)

* feat: add hierarchical grouping for dotted test paths

* fix: disable scroll reset in TestsTab component when updating path filter

Author: Gustavo Flores

dashboard/src/components/AnimatedIcons/Chevron.tsx

@@ -2,8 +2,27 @@ import { MdChevronRight } from 'react-icons/md';
 
 import type { JSX } from 'react';
 
-export const ChevronRightAnimate = (): JSX.Element => {
+import { cn } from '@/lib/utils';
+
+interface ChevronRightAnimateProps {
+  isExpanded?: boolean;
+  animated?: boolean;
+  className?: string;
+}
+
+export const ChevronRightAnimate = ({
+  isExpanded,
+  animated = true,
+  className,
+}: ChevronRightAnimateProps): JSX.Element => {
   return (
-    <MdChevronRight className="transition group-data-[state='open']:rotate-90" />
+    <MdChevronRight
+      className={cn(
+        'transition',
+        animated && "group-data-[state='open']:rotate-90",
+        isExpanded && 'rotate-90',
+        className,
+      )}
+    />
   );
 };

dashboard/src/components/Table/BaseTable.tsx

@@ -58,11 +58,13 @@ export const DumbBaseTable = ({
 
 export const DumbTableHeader = ({
   children,
+  className,
 }: {
   children: ReactNode;
+  className?: string;
 }): JSX.Element => {
   return (
-    <TableHeader className="bg-medium-gray">
+    <TableHeader className={classNames('bg-medium-gray', className)}>
       <TableRow>{children}</TableRow>
     </TableHeader>
   );

dashboard/src/components/TestsTable/DefaultTestsColumns.tsx

@@ -1,4 +1,4 @@
-import type { ColumnDef } from '@tanstack/react-table';
+import type { CellContext, ColumnDef } from '@tanstack/react-table';
 
 import type { JSX } from 'react';
 
@@ -22,12 +22,43 @@ import {
 } from '@/components/Table/DetailsColumn';
 import { UNKNOWN_STRING } from '@/utils/constants/backend';
 
+const INDENT_WIDTH = 20;
+
+const PathCell = ({
+  row,
+  getValue,
+}: CellContext<TPathTests, unknown>): JSX.Element => {
+  const value = getValue() as string;
+  const depth = row.depth;
+  const indent = depth * INDENT_WIDTH;
+
+  const hasSubGroups =
+    row.original.sub_groups !== undefined && row.original.sub_groups.length > 0;
+  const hasIndividualTests = row.original.individual_tests.length > 0;
+  const isExpandable = hasSubGroups || hasIndividualTests;
+
+  return (
+    <div className="flex items-center" style={{ paddingLeft: `${indent}px` }}>
+      {isExpandable && (
+        <span className="mr-2">
+          <ChevronRightAnimate
+            isExpanded={row.getIsExpanded()}
+            animated={false}
+          />
+        </span>
+      )}
+      <span>{value}</span>
+    </div>
+  );
+};
+
 export const defaultColumns: ColumnDef<TPathTests>[] = [
   {
     accessorKey: 'path_group',
     header: ({ column }): JSX.Element => (
       <TableHeader column={column} intlKey="global.path" />
     ),
+    cell: PathCell,
   },
   {
     accessorKey: 'pass_tests',
@@ -52,10 +83,6 @@ export const defaultColumns: ColumnDef<TPathTests>[] = [
       );
     },
   },
-  {
-    id: 'chevron',
-    cell: (): JSX.Element => <ChevronRightAnimate />,
-  },
 ];
 
 export const defaultInnerColumns: ColumnDef<TIndividualTest>[] = [