From 7e9daac4772d8417ada7667e5ed959736a652b03 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 16 Jan 2025 17:24:15 -0700
Subject: [PATCH] add a popup for permissions

---
 .../PermissionGroupSelectedPopup.tsx          | 31 +++++++++++++++++++
 ...PermissionListPermissionGroupContainer.tsx | 15 +++++++--
 .../PermissionPermissionGroup.tsx             |  6 ++--
 .../datasets/[datasetId]/permissions/page.tsx |  2 +-
 .../BusterInfiniteList/BusterInfiniteList.tsx |  6 ++--
 ...BusterListSelectedOptionPopupContainer.tsx |  8 +++--
 6 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionGroupSelectedPopup.tsx

diff --git a/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionGroupSelectedPopup.tsx b/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionGroupSelectedPopup.tsx
new file mode 100644
index 000000000..70e5c979f
--- /dev/null
+++ b/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>;
+};
diff --git a/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionListPermissionGroupContainer.tsx b/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionListPermissionGroupContainer.tsx
index 1b92bb39d..af6598322 100644
--- a/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionListPermissionGroupContainer.tsx
+++ b/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;
   `
 }));
 
diff --git a/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionPermissionGroup.tsx b/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionPermissionGroup.tsx
index 9d289b9cd..1c1d8cc3a 100644
--- a/web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionPermissionGroup.tsx
+++ b/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>
   );
 });
 
diff --git a/web/src/app/app/datasets/[datasetId]/permissions/page.tsx b/web/src/app/app/datasets/[datasetId]/permissions/page.tsx
index 8a276e95b..a3fc30a79 100644
--- a/web/src/app/app/datasets/[datasetId]/permissions/page.tsx
+++ b/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>
diff --git a/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx b/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
index f628f3033..6d2410b15 100644
--- a/web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
+++ b/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 && (
diff --git a/web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx b/web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx
index 14b5bdef9..546438f21 100644
--- a/web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx
+++ b/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[];
-  show: boolean;
-}> = ({ selectedRowKeys, onSelectChange, buttons = [], show }) => {
+  buttons?: React.ReactNode[];
+  show?: boolean;
+}> = ({ selectedRowKeys, onSelectChange, buttons = [], show: showProp }) => {
   const token = useAntToken();
 
+  const show = showProp ?? selectedRowKeys.length > 0;
+
   return (
     <AnimatePresence mode="wait">
       {show && (