1498-users-table-action-menu-rendered-inside-cell

src/components/UserList/index.tsx

@@ -8,8 +8,10 @@ import { tables } from "../../context/UserAccessContext/permissions";
 import { withAccessCheck } from "../AccessCheck/AccessCheck";
 import { DataTable } from "../DataTable";
 import { IconButton } from "../IconButton";
-import { Menu } from "../Menu";
 import { Age } from "../../ui/Age";
+import { Menu } from "@headlessui/react";
+import { DotsVerticalIcon } from "@heroicons/react/solid";
+import { Float } from "@headlessui-float/react";
 
 type UserListProps = {
   data: any[];
@@ -84,31 +86,39 @@ function ActionMenu({ deleteUser }: { deleteUser: () => void }) {
   return withAccessCheck(
     <div className="relative">
       <Menu>
-        <Menu.VerticalIconButton />
-        <Menu.Items className="w-48 right-16">
-          <Menu.Item
-            onClick={() => {
-              deleteUser();
-            }}
-          >
-            <IconButton
-              className="bg-transparent group-hover:inline-block z-5 mr-2"
-              ovalProps={{
-                stroke: "blue",
-                height: "18px",
-                width: "18px",
-                fill: "transparent"
+        <Float placement="bottom-start" offset={10} portal>
+          <Menu.Button className="p-0.5 min-w-7 rounded-full text-gray-400 hover:text-gray-500">
+            <DotsVerticalIcon className="h-6 w-6" />
+          </Menu.Button>
+          <Menu.Items className="w-48 bg-white divide-y divide-gray-100 rounded-md shadow-card  focus:outline-none z-10 ">
+            <Menu.Item
+              as="div"
+              className="flex items-center w-full text-gray-700 hover:bg-gray-200 p-3 cursor-pointer"
+              onClick={() => {
+                deleteUser();
               }}
-              icon={
-                <BsTrash
-                  className="text-gray-600 border-0 border-gray-200 border-l-1"
-                  size={18}
+            >
+              <>
+                <IconButton
+                  className="bg-transparent group-hover:inline-block z-5 mr-2"
+                  ovalProps={{
+                    stroke: "blue",
+                    height: "18px",
+                    width: "18px",
+                    fill: "transparent"
+                  }}
+                  icon={
+                    <BsTrash
+                      className="text-gray-600 border-0 border-gray-200 border-l-1"
+                      size={18}
+                    />
+                  }
                 />
-              }
-            />
-            Delete
-          </Menu.Item>
-        </Menu.Items>
+                Delete
+              </>
+            </Menu.Item>
+          </Menu.Items>
+        </Float>
       </Menu>
     </div>,
     tables.identities,
@@ -132,11 +142,11 @@ export function UserList({
       const result = await hasResourceAccess(tables.identities, "write");
       setCanDeleteUser(result);
     })();
-  }, [roles]);
+  }, [hasResourceAccess, roles]);
 
   const columns = useMemo(() => {
     return getColumns(deleteUser, canDeleteUser);
-  }, [canDeleteUser]);
+  }, [canDeleteUser, deleteUser]);
 
   return (
     <div className={clsx(className)} {...rest} ref={containerRef}>

src/pages/UsersPage.tsx

@@ -1,58 +1,68 @@
-import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useRef, useState } from "react";
 import { ImUserPlus } from "react-icons/im";
+import { MdAdminPanelSettings } from "react-icons/md";
 import {
+  deleteUser,
   getRegisteredUsers,
   inviteUser,
-  deleteUser,
   updateUserRole
 } from "../api/services/users";
 import { Modal } from "../components";
+import { AccessCheck } from "../components/AccessCheck/AccessCheck";
+import { BreadcrumbNav, BreadcrumbRoot } from "../components/BreadcrumbNav";
 import { ConfirmationPromptDialog } from "../components/Dialogs/ConfirmationPromptDialog";
 import { Head } from "../components/Head/Head";
 import {
   InviteUserForm,
   InviteUserFormValue
 } from "../components/InviteUserForm/InviteUserForm";
 import { SearchLayout } from "../components/Layout";
-import { toastError, toastSuccess } from "../components/Toast/toast";
-import { UserList } from "../components/UserList";
-import { useLoader } from "../hooks";
-import { BreadcrumbNav, BreadcrumbRoot } from "../components/BreadcrumbNav";
-import { MdAdminPanelSettings } from "react-icons/md";
 import {
   ManageUserRoleValue,
   ManageUserRoles
 } from "../components/ManageUserRoles/ManageUserRoles";
-import { AccessCheck } from "../components/AccessCheck/AccessCheck";
+import { toastError, toastSuccess } from "../components/Toast/toast";
+import { UserList } from "../components/UserList";
 import { tables } from "../context/UserAccessContext/permissions";
-import { RegisteredUser } from "../api/types/users";
 
 export function UsersPage() {
-  const [users, setUsers] = useState<RegisteredUser[]>([]);
   const [openDeleteConfirmDialog, setOpenDeleteConfirmDialog] =
     useState<boolean>(false);
   const [deletedUserId, setDeletedUserId] = useState<string>();
   const [isOpen, setIsOpen] = useState(false);
   const [openRoleManageModal, setOpenRoleManageModal] = useState(false);
-  const { loading, setLoading, idle } = useLoader();
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const {
+    isLoading,
+    data: users = [],
+    refetch
+  } = useQuery({
+    queryKey: ["users", "list", "settings"],
+    queryFn: () => getRegisteredUsers(),
+    select: (data) => {
+      return data.data || [];
+    },
+    cacheTime: 0
+  });
+
   const onSubmit = async (val: InviteUserFormValue) => {
     try {
       await inviteUser({
         firstName: val.firstName,
         lastName: val.lastName,
         email: val.email
       });
-      const users: RegisteredUser[] = await fetchUsersList();
       const userId = users.find((item) => item.email === val.email)?.id;
       if (userId) {
         await updateUserRole(userId, [val.role]);
+        return;
       }
       const userName = `${val.firstName} ${val.lastName}`;
       toastSuccess(`${userName} invited successfully`);
       setIsOpen(false);
-      fetchUsersList();
+      refetch();
     } catch (ex) {
       toastError(ex as any);
     }
@@ -64,33 +74,19 @@ export function UsersPage() {
       const user = users.find((item) => item.id === val.userId);
       toastSuccess(`${user!.name} role updated successfully`);
       setOpenRoleManageModal(false);
-      fetchUsersList();
+      refetch();
     } catch (ex) {
       toastError(ex as any);
     }
   };
 
-  async function fetchUsersList() {
-    let users: RegisteredUser[] = [];
-    setLoading(true);
-    try {
-      const { data } = await getRegisteredUsers();
-      users = data || [];
-      setUsers(data || []);
-    } catch (ex) {
-      toastError(ex as any);
-    }
-    setLoading(false);
-    return users;
-  }
-
   async function deleteUserAction(userId: string | undefined) {
     if (!userId) {
       return;
     }
     try {
       const { data } = await deleteUser(userId);
-      fetchUsersList();
+      refetch();
       if (data) {
         toastSuccess(`user deleted successfully`);
       }
@@ -100,27 +96,22 @@ export function UsersPage() {
     setOpenDeleteConfirmDialog(false);
   }
 
-  useEffect(() => {
-    fetchUsersList();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <>
       <Head prefix="Users" />
       <SearchLayout
         title={
           <BreadcrumbNav
             list={[
-              <BreadcrumbRoot link="/settings/users">Users</BreadcrumbRoot>
+              <BreadcrumbRoot key="setting-users" link="/settings/users">
+                Users
+              </BreadcrumbRoot>
             ]}
           />
         }
-        onRefresh={() => {
-          fetchUsersList();
-        }}
+        onRefresh={refetch}
         contentClass="p-0 h-full"
-        loading={loading}
+        loading={isLoading}
       >
         <div
           className="flex flex-col flex-1 p-6 pb-0 h-full max-w-screen-xl mx-auto"
@@ -151,7 +142,7 @@ export function UsersPage() {
           <UserList
             className="mt-6 overflow-y-hidden"
             data={users}
-            isLoading={loading || idle}
+            isLoading={isLoading}
             style={{
               height: `calc(100vh - ${
                 containerRef.current?.getBoundingClientRect()?.top ?? 0