Improvement on admin visibility UI components

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -30,6 +30,8 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
+  Modal,
+  ModalContent,
   Tooltip
 } from "@app/components/v2";
 import { envConfig } from "@app/config/env";
@@ -78,6 +80,11 @@ export const INFISICAL_SUPPORT_OPTIONS = [
     <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
     "Email Support",
     "mailto:support@infisical.com"
+  ],
+  [
+    <FontAwesomeIcon key={5} className="pr-4 text-sm" icon={faUsers} />,
+    "Instance Admins",
+    "server-admins"
   ]
 ];
 
@@ -90,7 +97,7 @@ export const MinimizedOrgSidebar = () => {
   const [openSupport, setOpenSupport] = useState(false);
   const [openUser, setOpenUser] = useState(false);
   const [openOrg, setOpenOrg] = useState(false);
-  const [openAdmins, setOpenAdmins] = useState(false);
+  const [showAdminsModal, setShowAdminsModal] = useState(false);
 
   const { user } = useUser();
   const { mutateAsync } = useGetOrgTrialUrl();
@@ -394,31 +401,6 @@ export const MinimizedOrgSidebar = () => {
                 : "mb-4"
             } flex w-full cursor-default flex-col items-center px-1 text-sm text-mineshaft-400`}
           >
-            <DropdownMenu open={openAdmins} onOpenChange={setOpenAdmins}>
-              <DropdownMenuTrigger
-                onMouseEnter={() => setOpenAdmins(true)}
-                onMouseLeave={() => setOpenAdmins(false)}
-                asChild
-              >
-                <div className="w-full">
-                  <MenuIconButton lottieIconMode="reverse" icon="groups" isSelected={openAdmins}>
-                    Admins
-                  </MenuIconButton>
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                onMouseEnter={() => setOpenAdmins(true)}
-                onMouseLeave={() => setOpenAdmins(false)}
-                align="start"
-                side="right"
-                className="mb-2 w-[60vh] p-1"
-              >
-                <DropdownMenuLabel>Server Administrators</DropdownMenuLabel>
-                <div className="h-[30vh]">
-                  <ServerAdminsPanel />
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
             <DropdownMenu open={openSupport} onOpenChange={setOpenSupport}>
               <DropdownMenuTrigger
                 onMouseEnter={() => setOpenSupport(true)}
@@ -439,17 +421,30 @@ export const MinimizedOrgSidebar = () => {
               >
                 {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
                   <DropdownMenuItem key={url as string}>
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      href={String(url)}
-                      className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
-                    >
-                      <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
-                        {icon}
-                        <div className="text-sm">{text}</div>
-                      </div>
-                    </a>
+                    {url === "server-admins" ? (
+                      <button
+                        type="button"
+                        onClick={() => setShowAdminsModal(true)}
+                        className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+                      >
+                        <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                          {icon}
+                          <div className="text-sm">{text}</div>
+                        </div>
+                      </button>
+                    ) : (
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={String(url)}
+                        className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+                      >
+                        <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                          {icon}
+                          <div className="text-sm">{text}</div>
+                        </div>
+                      </a>
+                    )}
                   </DropdownMenuItem>
                 ))}
                 {envConfig.PLATFORM_VERSION && (
@@ -567,6 +562,17 @@ export const MinimizedOrgSidebar = () => {
           </div>
         </nav>
       </aside>
+      <Modal isOpen={showAdminsModal} onOpenChange={setShowAdminsModal}>
+        <ModalContent
+          title="Server Administrators"
+          subTitle="View all server administrators"
+          className="max-w-[50%]"
+        >
+          <div className="mb-2 max-h-[70vh]">
+            <ServerAdminsPanel />
+          </div>
+        </ModalContent>
+      </Modal>
       <CreateOrgModal
         isOpen={popUp?.createOrg?.isOpen}
         onClose={() => handlePopUpToggle("createOrg", false)}

frontend/src/layouts/OrganizationLayout/components/ServerAdminsPanel/ServerAdminsPanel.tsx

@@ -37,7 +37,7 @@ export const ServerAdminsPanel = () => {
   const isEmpty = !isPending && (!adminUsers || adminUsers.length === 0);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex h-full flex-col">
       <div className="mb-4 px-4">
         <Input
           value={searchUserFilter}
@@ -47,16 +47,16 @@ export const ServerAdminsPanel = () => {
           className="w-full"
         />
       </div>
-      <div className="mb-2 w-full px-2">
-        <TableContainer>
-          <Table>
-            <THead>
+      <div className="flex-1 px-2">
+        <TableContainer className="flex max-h-[500px] flex-col overflow-auto">
+          <Table className="w-full table-fixed">
+            <THead className="sticky top-0 bg-bunker-800">
               <Tr>
                 <Th className="w-1/2">Name</Th>
                 <Th className="w-1/2">Email</Th>
               </Tr>
             </THead>
-            <TBody className="h-full">
+            <TBody>
               {isPending && <TableSkeleton columns={2} innerKey="admins" />}
               {!isPending &&
                 adminUsers?.map(({ user }) => {
@@ -65,9 +65,9 @@ export const ServerAdminsPanel = () => {
                       ? `${user.firstName} ${user.lastName}`
                       : user.username;
                   return (
-                    <Tr key={`admin-${user.id}`} className="w-full">
-                      <Td className="w-1/2 truncate">{name}</Td>
-                      <Td className="w-1/2 truncate">{user.email}</Td>
+                    <Tr key={`admin-${user.id}`}>
+                      <Td className="w-1/2 break-words">{name}</Td>
+                      <Td className="w-1/2 break-words">{user.email}</Td>
                     </Tr>
                   );
                 })}

frontend/src/pages/admin/OverviewPage/components/UserPanel.tsx

@@ -4,7 +4,8 @@ import {
   faEllipsis,
   faFilter,
   faMagnifyingGlass,
-  faUsers
+  faUsers,
+  faUserShield
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
@@ -23,7 +24,6 @@ import {
   EmptyState,
   IconButton,
   Input,
-  Switch,
   Table,
   TableContainer,
   TableSkeleton,
@@ -97,24 +97,19 @@ const UserPanelTable = ({
               <FontAwesomeIcon icon={faFilter} />
             </IconButton>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel>Filter Users</DropdownMenuLabel>
+          <DropdownMenuContent align="end" className="p-0">
+            <DropdownMenuLabel>Filter By</DropdownMenuLabel>
             <DropdownMenuItem
               onClick={(e) => {
                 e.preventDefault();
                 setAdminsOnly(!adminsOnly);
               }}
-              icon={adminsOnly && <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />}
+              icon={adminsOnly && <FontAwesomeIcon icon={faCheckCircle} />}
               iconPos="right"
             >
-              <div className="flex w-full items-center justify-between">
-                <span>Admins Only</span>
-                <Switch
-                  id="admins-only"
-                  isChecked={adminsOnly}
-                  onCheckedChange={(checked) => setAdminsOnly(checked)}
-                  className="data-[state=checked]:bg-primary-400"
-                />
+              <div className="flex items-center gap-2">
+                <FontAwesomeIcon icon={faUserShield} className="text-yellow-700" />
+                <span>Server Admins</span>
               </div>
             </DropdownMenuItem>
           </DropdownMenuContent>