feat(admin): add ability to view machine identities

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

@@ -34,6 +34,7 @@ import { EncryptionPanel } from "./components/EncryptionPanel";
 import { IntegrationPanel } from "./components/IntegrationPanel";
 import { RateLimitPanel } from "./components/RateLimitPanel";
 import { UserPanel } from "./components/UserPanel";
+import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/IdentityPanel.tsx";
 
 enum TabSections {
   Settings = "settings",
@@ -42,6 +43,7 @@ enum TabSections {
   RateLimit = "rate-limit",
   Integrations = "integrations",
   Users = "users",
+  Identities = "identities",
   Kmip = "kmip"
 }
 
@@ -164,6 +166,7 @@ export const OverviewPage = () => {
                     <Tab value={TabSections.RateLimit}>Rate Limit</Tab>
                     <Tab value={TabSections.Integrations}>Integrations</Tab>
                     <Tab value={TabSections.Users}>Users</Tab>
+                    <Tab value={TabSections.Identities}>Identities</Tab>
                   </div>
                 </TabList>
                 <TabPanel value={TabSections.Settings}>
@@ -409,6 +412,9 @@ export const OverviewPage = () => {
                 <TabPanel value={TabSections.Users}>
                   <UserPanel />
                 </TabPanel>
+                <TabPanel value={TabSections.Identities}>
+                  <IdentityPanel />
+                </TabPanel>
               </Tabs>
             </div>
           )}

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

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { faMagnifyingGlass, faServer } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  EmptyState,
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useDebounce } from "@app/hooks";
+import { useAdminGetIdentities } from "@app/hooks/api/admin/queries.ts";
+
+const IdentityPanelTable = () => {
+  const [searchIdentityFilter, setSearchIdentityFilter] = useState("");
+  const [debouncedSearchTerm] = useDebounce(searchIdentityFilter, 500);
+
+  const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage } = useAdminGetIdentities(
+    {
+      limit: 20,
+      searchTerm: debouncedSearchTerm
+    }
+  );
+
+  const isEmpty = !isPending && !data?.pages?.[0].length;
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <Input
+          value={searchIdentityFilter}
+          onChange={(e) => setSearchIdentityFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search identities by name..."
+          className="flex-1"
+        />
+      </div>
+      <div className="mt-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th className="w-1/2">Name</Th>
+                <Th className="w-1/2">Auth Method</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={2} innerKey="identities" />}
+              {!isPending &&
+                data?.pages?.map((identities) =>
+                  identities.map(({ name, authMethod, id }) => (
+                    <Tr key={`identity-${id}`} className="w-full">
+                      <Td className="w-1/2">{name}</Td>
+                      <Td className="w-1/2">
+                        {authMethod || <span className={"italic text-mineshaft-400"}>None</span>}
+                      </Td>
+                    </Tr>
+                  ))
+                )}
+            </TBody>
+          </Table>
+          {!isPending && isEmpty && <EmptyState title="No identities found" icon={faServer} />}
+        </TableContainer>
+        {!isEmpty && (
+          <Button
+            className="mt-4 py-3 text-sm"
+            isFullWidth
+            variant="star"
+            isLoading={isFetchingNextPage}
+            isDisabled={isFetchingNextPage || !hasNextPage}
+            onClick={() => fetchNextPage()}
+          >
+            {hasNextPage ? "Load More" : "End of list"}
+          </Button>
+        )}
+      </div>
+    </>
+  );
+};
+
+export const IdentityPanel = () => (
+  <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="mb-4">
+      <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
+    </div>
+    <IdentityPanelTable />
+  </div>
+);

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

@@ -61,12 +61,12 @@ const UserPanelTable = ({
   const [adminsOnly, setAdminsOnly] = useState(false);
   const { user } = useUser();
   const userId = user?.id || "";
-  const [debounedSearchTerm] = useDebounce(searchUserFilter, 500);
+  const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
   const { subscription } = useSubscription();
 
   const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage } = useAdminGetUsers({
     limit: 20,
-    searchTerm: debounedSearchTerm,
+    searchTerm: debouncedSearchTerm,
     adminsOnly
   });