normalize header for list

web/src/app/app/datasets/[datasetId]/permissions/PermissionsAppContainer.tsx

@@ -25,8 +25,6 @@ export const PermissionsAppContainer: React.FC<{
     setSelectedApp(routeToApp[currentRoute] || PermissionApps.OVERVIEW);
   }, [currentRoute]);
 
-  console.log(currentRoute, routeToApp[currentRoute]);
-
   return (
     <>
       <PermissionAppSegments selectedApp={selectedApp} datasetId={datasetId as string} />

web/src/app/app/settings/users/ListUsersComponent.tsx

@@ -1,16 +1,25 @@
 import { OrganizationUser } from '@/api/buster-rest/organizations/responseInterfaces';
-import { BusterInfiniteList, BusterListColumn, BusterListRowItem } from '@/components/list';
+import {
+  BusterInfiniteList,
+  BusterListColumn,
+  BusterListRowItem,
+  BusterListSelectedOptionPopupContainer,
+  InfiniteListContainer
+} from '@/components/list';
 import { Card } from 'antd';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Text } from '@/components/text';
 import { OrganizationUserRoleText } from './config';
 import { BusterRoutes, createBusterRoute } from '@/routes';
 import { ListUserItem } from '../../_components/ListContent';
+import { UserListPopupContainer } from './UserListPopupContainer';
 
 export const ListUsersComponent: React.FC<{
   users: OrganizationUser[];
   isFetched: boolean;
 }> = React.memo(({ users, isFetched }) => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
+
   const columns: BusterListColumn[] = useMemo(
     () => [
       {
@@ -86,15 +95,27 @@ export const ListUsersComponent: React.FC<{
     [activeUsers, inactiveUsers]
   );
 
+  // <BusterListSelectedOptionPopupContainer />;
   return (
-    <BusterInfiniteList
-      columns={columns}
-      rows={rows}
-      showHeader={true}
-      columnRowVariant="default"
-      rowClassName="!pl-[30px]"
-      emptyState={<EmptyState isFetched={isFetched} />}
-    />
+    <InfiniteListContainer
+      showContainerBorder={false}
+      popupNode={
+        <UserListPopupContainer
+          selectedRowKeys={selectedRowKeys}
+          onSelectChange={setSelectedRowKeys}
+        />
+      }>
+      <BusterInfiniteList
+        columns={columns}
+        rows={rows}
+        showHeader={true}
+        showSelectAll={false}
+        onSelectChange={setSelectedRowKeys}
+        selectedRowKeys={selectedRowKeys}
+        columnRowVariant="default"
+        emptyState={<EmptyState isFetched={isFetched} />}
+      />
+    </InfiniteListContainer>
   );
 });
 

web/src/app/app/settings/users/UserListPopupContainer.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const UserListPopupContainer = React.memo(
+  ({
+    selectedRowKeys,
+    onSelectChange
+  }: {
+    selectedRowKeys: string[];
+    onSelectChange: (selectedRowKeys: string[]) => void;
+  }) => {
+    return <div>UserListPopupContainer</div>;
+  }
+);
+
+UserListPopupContainer.displayName = 'UserListPopupContainer';

web/src/app/app/settings/users/page.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { SettingsPageHeader } from '../_SettingsPageHeader';
 import { SearchUsers } from './SearchUsers';
 import { useDebounceSearch } from '@/hooks/useDebounceSearch';
 import { useGetOrganizationUsers } from '@/api/buster-rest';
 import { useUserConfigContextSelector } from '@/context/Users';
 import { ListUsersComponent } from './ListUsersComponent';
+import { UserListPopupContainer } from './UserListPopupContainer';
 
 export default function Page() {
   const userOrganization = useUserConfigContextSelector((x) => x.userOrganizations);

web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx

@@ -51,11 +51,12 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
   });
 
   const onSelectChangePreflight = useMemoizedFn((v: boolean, id: string) => {
-    if (!onSelectChange || !selectedRowKeys) return;
+    if (!onSelectChange) return;
+
     if (v === false) {
-      onSelectChange(selectedRowKeys?.filter((d) => d !== id));
+      onSelectChange((selectedRowKeys || []).filter((d) => d !== id));
     } else {
-      onSelectChange(selectedRowKeys?.concat(id) || []);
+      onSelectChange((selectedRowKeys || []).concat(id));
     }
   });
 

web/src/components/list/BusterList/BusterListHeader.tsx

@@ -28,7 +28,7 @@ export const BusterListHeader: React.FC<{
 
     return (
       <div
-        className={cx(styles.header, 'group', rowClassName, 'mr-[12px]', {
+        className={cx(styles.header, 'group', rowClassName, 'pr-[24px]', {
           'pl-3.5': !onGlobalSelectChange
         })}>
         {showCheckboxColumn && (
@@ -49,8 +49,7 @@ export const BusterListHeader: React.FC<{
             key={column.dataIndex}
             style={{
               width: column.width || '100%',
-              flex: column.width ? 'none' : 1,
-              marginRight: index === columns.length - 1 ? '' : undefined //24px
+              flex: column.width ? 'none' : 1
             }}>
             {column.headerRender ? (
               column.headerRender(column.title)

web/src/components/list/InfiniteListContainer/InfiniteListContainer.tsx

@@ -4,11 +4,12 @@ import React from 'react';
 export const InfiniteListContainer: React.FC<{
   children: React.ReactNode;
   popupNode?: React.ReactNode;
-}> = React.memo(({ children, popupNode }) => {
+  showContainerBorder?: boolean;
+}> = React.memo(({ children, popupNode, showContainerBorder = true }) => {
   const { styles, cx } = useStyles();
 
   return (
-    <div className={cx('overflow-hidden', styles.container)}>
+    <div className={cx('overflow-hidden', showContainerBorder && styles.container)}>
       {children}
 
       {popupNode && (