add a popup for permissions

web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionGroupSelectedPopup.tsx

@@ -0,0 +1,31 @@
+import { BusterListSelectedOptionPopupContainer } from '@/components/list';
+import { Button } from 'antd';
+import React from 'react';
+
+export const PermissionGroupSelectedPopup: React.FC<{
+  selectedRowKeys: string[];
+  onSelectChange: (selectedRowKeys: string[]) => void;
+}> = React.memo(({ selectedRowKeys, onSelectChange }) => {
+  return (
+    <BusterListSelectedOptionPopupContainer
+      selectedRowKeys={selectedRowKeys}
+      onSelectChange={onSelectChange}
+      buttons={[
+        <PermissionGroupAssignButton
+          key="assign"
+          selectedRowKeys={selectedRowKeys}
+          onSelectChange={onSelectChange}
+        />
+      ]}
+    />
+  );
+});
+
+PermissionGroupSelectedPopup.displayName = 'PermissionGroupSelectedPopup';
+
+const PermissionGroupAssignButton: React.FC<{
+  selectedRowKeys: string[];
+  onSelectChange: (selectedRowKeys: string[]) => void;
+}> = ({ selectedRowKeys, onSelectChange }) => {
+  return <Button>Assign</Button>;
+};

web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionListPermissionGroupContainer.tsx

@@ -3,12 +3,13 @@ import {
   useDatasetUpdatePermissionGroups
 } from '@/api/busterv2/datasets';
 import { BusterListColumn, BusterListRowItem } from '@/components/list';
-import { BusterInfiniteList } from '@/components/list/BusterInfiniteList';
 import { useMemoizedFn } from 'ahooks';
 import { Select } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { useMemo, useState } from 'react';
 import { Text } from '@/components/text';
+import { PermissionGroupSelectedPopup } from './PermissionGroupSelectedPopup';
+import { BusterInfiniteList } from '@/components/list/BusterInfiniteList';
 
 export const PermissionListPermissionGroupContainer: React.FC<{
   filteredPermissionGroups: ListPermissionGroupsResponse[];
@@ -111,7 +112,7 @@ export const PermissionListPermissionGroupContainer: React.FC<{
   );
 
   return (
-    <div className={cx('', styles.container)}>
+    <div className={cx('min-h-fit overflow-hidden', styles.container)}>
       <BusterInfiniteList
         columns={columns}
         rows={rows}
@@ -121,6 +122,15 @@ export const PermissionListPermissionGroupContainer: React.FC<{
         onSelectChange={setSelectedRowKeys}
         emptyState={<EmptyState />}
       />
+
+      <div className="fixed bottom-1 left-0 right-0 w-full">
+        <div className="relative ml-[220px] mr-[55px]">
+          <PermissionGroupSelectedPopup
+            selectedRowKeys={selectedRowKeys}
+            onSelectChange={setSelectedRowKeys}
+          />
+        </div>
+      </div>
     </div>
   );
 });
@@ -131,7 +141,6 @@ const useStyles = createStyles(({ css, token }) => ({
   container: css`
     border: 0.5px solid ${token.colorBorder};
     border-radius: ${token.borderRadius}px;
-    overflow: hidden;
   `
 }));
 

web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionPermissionGroup.tsx

@@ -30,13 +30,13 @@ export const PermissionPermissionGroup: React.FC<{
   });
 
   return (
-    <>
+    <div className="flex h-full w-full flex-col">
       <HeaderExplanation
         className="mb-5"
         title="Dataset permissions"
         description="Manage who can build dashboards & metrics using this dataset"
       />
-      <div className="flex h-full flex-col space-y-3">
+      <div className="mb-12 flex h-fit flex-col space-y-3">
         <div className="flex items-center justify-between">
           <PermissionSearch
             searchText={searchText}
@@ -64,7 +64,7 @@ export const PermissionPermissionGroup: React.FC<{
         onClose={onCloseNewPermissionGroupModal}
         datasetId={datasetId}
       />
-    </>
+    </div>
   );
 });
 

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

@@ -10,7 +10,7 @@ export default async function Page({ params }: { params: { datasetId: string } }
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <div className="m-auto flex h-full max-w-[1400px] flex-col space-y-5 overflow-y-auto px-14 pb-12 pt-12">
+      <div className="m-auto flex h-full max-w-[1400px] flex-col space-y-5 overflow-y-auto px-14 pt-12">
         <PermissionTitleCard />
         <PermissionsAppContainer datasetId={datasetId} />
       </div>

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

@@ -104,7 +104,7 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
 
   return (
     <div
-      className="infinite-list-container relative flex h-full w-full flex-col overflow-auto"
+      className="infinite-list-container relative flex h-full w-full flex-col"
       ref={containerRef}>
       {showHeader && !showEmptyState && (
         <BusterListHeader
@@ -117,11 +117,11 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
       )}
 
       {!showEmptyState && (
-        <div className="relative h-full w-full">
+        <>
           {rows.map((row) => (
             <BusterListRowComponentSelector key={row.id} row={row} id={row.id} {...itemData} />
           ))}
-        </div>
+        </>
       )}
 
       {showEmptyState && (

web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx

@@ -8,11 +8,13 @@ import { AnimatePresence, motion } from 'framer-motion';
 export const BusterListSelectedOptionPopupContainer: React.FC<{
   selectedRowKeys: string[];
   onSelectChange: (selectedRowKeys: string[]) => void;
-  buttons: React.ReactNode[];
+  buttons?: React.ReactNode[];
-  show: boolean;
+  show?: boolean;
-}> = ({ selectedRowKeys, onSelectChange, buttons = [], show }) => {
+}> = ({ selectedRowKeys, onSelectChange, buttons = [], show: showProp }) => {
   const token = useAntToken();
 
+  const show = showProp ?? selectedRowKeys.length > 0;
+
   return (
     <AnimatePresence mode="wait">
       {show && (