From 6b0c516500a5ad19504fee94115ecc75ddf533cf Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 14 Jan 2025 11:09:56 -0700
Subject: [PATCH] containerized class should be white with no border at bottom

---
 .../BusterInfiniteList/BusterInfiniteList.tsx |  17 ++-
 .../BusterList/BusterListRowComponent.tsx     | 113 +++++++++---------
 .../BusterListRowComponentSelector.tsx        |   7 +-
 .../components/list/BusterList/interfaces.ts  |   2 +-
 4 files changed, 78 insertions(+), 61 deletions(-)

diff --git a/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx b/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
index 990b2530f..f628f3033 100644
--- a/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
+++ b/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMemoizedFn, useUpdateEffect } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import { BusterListProps } from '../BusterList';
 import { getAllIdsInSection } from '../BusterList/helpers';
 import { useEffect, useMemo, useRef, useCallback } from 'react';
@@ -19,8 +19,8 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
   onSelectChange,
   emptyState,
   showHeader = true,
-  columnHeaderVariant,
   contextMenu,
+  columnRowVariant = 'containerized',
   showSelectAll = true,
   onScrollEnd,
   loadingNewContent,
@@ -68,9 +68,18 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
       selectedRowKeys,
       onSelectChange: onSelectChange ? onSelectChangePreflight : undefined,
       onSelectSectionChange: onSelectChange ? onSelectSectionChange : undefined,
-      onContextMenuClick: undefined
+      onContextMenuClick: undefined,
+      columnRowVariant
     };
-  }, [columns, rows, onSelectChange, onSelectSectionChange, contextMenu, selectedRowKeys]);
+  }, [
+    columns,
+    rows,
+    onSelectChange,
+    columnRowVariant,
+    onSelectSectionChange,
+    contextMenu,
+    selectedRowKeys
+  ]);
 
   // Add scroll handler
   const handleScroll = useCallback(() => {
diff --git a/web/src/components/list/BusterList/BusterListRowComponent.tsx b/web/src/components/list/BusterList/BusterListRowComponent.tsx
index d7e43ed71..a37fcccea 100644
--- a/web/src/components/list/BusterList/BusterListRowComponent.tsx
+++ b/web/src/components/list/BusterList/BusterListRowComponent.tsx
@@ -1,7 +1,7 @@
 import { useMemoizedFn } from 'ahooks';
 import get from 'lodash/get';
 import React, { useMemo } from 'react';
-import { BusterListRow, BusterListColumn, BusterListRowItem } from './interfaces';
+import { BusterListRow, BusterListColumn, BusterListRowItem, BusterListProps } from './interfaces';
 import Link from 'next/link';
 import { CheckboxColumn } from './CheckboxColumn';
 import { createStyles } from 'antd-style';
@@ -17,63 +17,60 @@ export const BusterListRowComponent = React.memo(
       onSelectChange?: (v: boolean, id: string) => void;
       onContextMenuClick?: (e: React.MouseEvent<HTMLDivElement>, id: string) => void;
       style?: React.CSSProperties;
+      columnRowVariant: BusterListProps['columnRowVariant'];
     }
-  >(({ style, row, columns, onSelectChange, checked, onContextMenuClick }, ref) => {
-    const { styles, cx } = useStyles();
-    const link = row.link;
-    // const router = useRouter();
+  >(
+    (
+      { style, columnRowVariant, row, columns, onSelectChange, checked, onContextMenuClick },
+      ref
+    ) => {
+      const { styles, cx } = useStyles();
+      const link = row.link;
 
-    const onClick = useMemoizedFn(() => {
-      // if (link) {
-      //   const isLocalLink = link.startsWith('/');
-      //   if (isLocalLink) {
-      //     router.push(link);
-      //   } else {
-      //     window.open(link, '_blank');
-      //   }
-      // }
-      row.onClick?.();
-    });
+      const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
+        onContextMenuClick?.(e, row.id);
+      });
 
-    const onContextMenu = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
-      onContextMenuClick?.(e, row.id);
-    });
+      const onChange = useMemoizedFn((checked: boolean) => {
+        onSelectChange?.(checked, row.id);
+      });
 
-    const onChange = useMemoizedFn((checked: boolean) => {
-      onSelectChange?.(checked, row.id);
-    });
-
-    return (
-      <LinkWrapper href={link}>
-        <div
-          onClick={onClick}
-          style={style}
-          onContextMenu={onContextMenu}
-          className={cx(styles.row, 'group flex items-center', checked ? 'checked' : '', {
-            clickable: !!(link || row.onClick)
-          })}
-          ref={ref}>
-          {!!onSelectChange ? (
-            <CheckboxColumn checkStatus={checked ? 'checked' : 'unchecked'} onChange={onChange} />
-          ) : (
-            <div className="pl-2.5"></div>
-          )}
-          {columns.map((column, columnIndex) => (
-            <BusterListCellComponent
-              key={column.dataIndex}
-              data={get(row.data, column.dataIndex)}
-              row={row}
-              render={column.render}
-              isFirstCell={columnIndex === 0}
-              isLastCell={columnIndex === columns.length - 1}
-              width={column.width}
-              onSelectChange={onSelectChange}
-            />
-          ))}
-        </div>
-      </LinkWrapper>
-    );
-  }),
+      return (
+        <LinkWrapper href={link}>
+          <div
+            onClick={row.onClick}
+            style={style}
+            onContextMenu={onContextMenu}
+            className={cx(
+              styles.row,
+              'group flex items-center',
+              checked ? 'checked' : '',
+              columnRowVariant,
+              { clickable: !!(link || row.onClick) }
+            )}
+            ref={ref}>
+            {!!onSelectChange ? (
+              <CheckboxColumn checkStatus={checked ? 'checked' : 'unchecked'} onChange={onChange} />
+            ) : (
+              <div className="pl-2.5"></div>
+            )}
+            {columns.map((column, columnIndex) => (
+              <BusterListCellComponent
+                key={column.dataIndex}
+                data={get(row.data, column.dataIndex)}
+                row={row}
+                render={column.render}
+                isFirstCell={columnIndex === 0}
+                isLastCell={columnIndex === columns.length - 1}
+                width={column.width}
+                onSelectChange={onSelectChange}
+              />
+            ))}
+          </div>
+        </LinkWrapper>
+      );
+    }
+  ),
   (prevProps, nextProps) => {
     return prevProps.checked === nextProps.checked && prevProps.row.id === nextProps.row.id;
   }
@@ -151,6 +148,14 @@ export const useStyles = createStyles(({ css, token }) => ({
         background-color: ${token.colorPrimaryBgHover};
       }
     }
+
+    &.containerized {
+      background-color: ${token.colorBgContainer};
+
+      &:last-child {
+        border-bottom: 0px;
+      }
+    }
   `,
   cell: css`
     color: ${token.colorText};
diff --git a/web/src/components/list/BusterList/BusterListRowComponentSelector.tsx b/web/src/components/list/BusterList/BusterListRowComponentSelector.tsx
index ed7a4b577..6acf22005 100644
--- a/web/src/components/list/BusterList/BusterListRowComponentSelector.tsx
+++ b/web/src/components/list/BusterList/BusterListRowComponentSelector.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BusterListRow, BusterListColumn } from './interfaces';
+import { BusterListRow, BusterListColumn, BusterListProps } from './interfaces';
 import { BusterListSectionComponent } from './BusterListSectionComponent';
 import { BusterListRowComponent } from './BusterListRowComponent';
 
@@ -15,6 +15,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
     selectedRowKeys?: string[];
     rows: BusterListRow[];
     style?: React.CSSProperties;
+    columnRowVariant: BusterListProps['columnRowVariant'];
   }
 >(
   (
@@ -26,7 +27,8 @@ export const BusterListRowComponentSelector = React.forwardRef<
       onSelectChange,
       onSelectSectionChange,
       selectedRowKeys,
-      onContextMenuClick
+      onContextMenuClick,
+      columnRowVariant
     },
     ref
   ) => {
@@ -55,6 +57,7 @@ export const BusterListRowComponentSelector = React.forwardRef<
         checked={!!selectedRowKeys?.includes(row.id)}
         ref={ref}
         onContextMenuClick={onContextMenuClick}
+        columnRowVariant={columnRowVariant}
       />
     );
   }
diff --git a/web/src/components/list/BusterList/interfaces.ts b/web/src/components/list/BusterList/interfaces.ts
index 7e085eeac..1f88ea301 100644
--- a/web/src/components/list/BusterList/interfaces.ts
+++ b/web/src/components/list/BusterList/interfaces.ts
@@ -8,7 +8,7 @@ import type {
 import React from 'react';
 export interface BusterListProps {
   columns: BusterListColumn[];
-  columnHeaderVariant?: 'default' | 'gray';
+  columnRowVariant?: 'default' | 'containerized';
   rows: BusterListRow[];
   onSelectChange?: (selectedRowKeys: string[]) => void;
   emptyState?: undefined | React.ReactNode;