Add add/remove/list hosts in ssh host groups functionality

2026-10-15 12:38:36 +00:00 · 2025-04-29 23:31:57 -07:00
parent a9a16c9bd1
commit b06eeb0d40
26 changed files with 820 additions and 376 deletions
@@ -1,9 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-import { SshGroupDetailsByIDPage } from './SshGroupDetailsByIDPage'
-
-export const Route = createFileRoute(
-  '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ssh-host-groups/$sshHostGroupId',
-)({
-  component: SshGroupDetailsByIDPage,
-})
@@ -1,6 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "@tanstack/react-router";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";

 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -20,15 +21,18 @@ import { useDeleteSshHostGroup, useGetSshHostGroupById } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";

+import { SshHostGroupModal } from "../SshHostsPage/components/SshHostGroupModal";
+import { SshHostGroupDetailsSection, SshHostGroupHostsSection } from "./components";
+
 const Page = () => {
  const { currentWorkspace } = useWorkspace();
  const navigate = useNavigate();
  const projectId = currentWorkspace?.id || "";
-  const groupId = useParams({
-    from: ROUTE_PATHS.Ssh.SshGroupDetailsByIDPage.id,
-    select: (el) => el.groupId
+  const sshHostGroupId = useParams({
+    from: ROUTE_PATHS.Ssh.SshHostGroupDetailsByIDPage.id,
+    select: (el) => el.sshHostGroupId
  });
-  const { data } = useGetSshHostGroupById(groupId);
+  const { data } = useGetSshHostGroupById(sshHostGroupId);

  const { mutateAsync: deleteSshHostGroup } = useDeleteSshHostGroup();

@@ -105,10 +109,13 @@ const Page = () => {
          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
-              <SshHostGroupDetailsSection groupId={groupId} handlePopUpOpen={handlePopUpOpen} />
+              <SshHostGroupDetailsSection
+                sshHostGroupId={sshHostGroupId}
+                handlePopUpOpen={handlePopUpOpen}
+              />
            </div>
            <div className="w-full">
-              <SshHostsSection groupId={groupId} />
+              <SshHostGroupHostsSection sshHostGroupId={sshHostGroupId} />
            </div>
          </div>
        </div>
@@ -127,7 +134,7 @@ const Page = () => {
  );
 };

-export const SshGroupDetailsByIDPage = () => {
+export const SshHostGroupDetailsByIDPage = () => {
  const { t } = useTranslation();
  return (
    <>
@@ -0,0 +1,126 @@
+import { faServer } from "@fortawesome/free-solid-svg-icons";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  EmptyState,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useAddHostToSshHostGroup, useListSshHostGroupHosts } from "@app/hooks/api";
+import { EHostGroupMembershipFilter } from "@app/hooks/api/sshHostGroup/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  popUp: UsePopUpState<["addHostGroupMembers"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["addHostGroupMembers"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const AddHostGroupMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const popUpData = popUp?.addHostGroupMembers?.data as {
+    sshHostGroupId: string;
+  };
+
+  const { data, isPending } = useListSshHostGroupHosts({
+    sshHostGroupId: popUpData?.sshHostGroupId,
+    filter: EHostGroupMembershipFilter.NON_GROUP_MEMBERS
+  });
+  const { mutateAsync: addHostToSshHostGroup } = useAddHostToSshHostGroup();
+
+  const handleAddHost = async (sshHostId: string) => {
+    try {
+      if (!popUpData?.sshHostGroupId) {
+        createNotification({
+          text: "Some data is missing, please refresh the page and try again",
+          type: "error"
+        });
+        return;
+      }
+
+      await addHostToSshHostGroup({
+        sshHostGroupId: popUpData.sshHostGroupId,
+        sshHostId
+      });
+
+      createNotification({
+        text: "Successfully added host to the group",
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed to add host to the group",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addHostGroupMembers?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addHostGroupMembers", isOpen);
+      }}
+    >
+      <ModalContent title="Add Hosts to Group">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Alias</Th>
+                <Th>Hostname</Th>
+                <Th />
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={3} innerKey="ssh-hosts" />}
+              {!isPending &&
+                data?.hosts?.map((host) => {
+                  return (
+                    <Tr className="items-center" key={`host-${host.id}`}>
+                      <Td>{host.alias ?? "-"}</Td>
+                      <Td>{host.hostname}</Td>
+                      <Td className="flex justify-end">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Edit}
+                          a={ProjectPermissionSub.SshHostGroups}
+                        >
+                          {(isAllowed) => (
+                            <Button
+                              isLoading={isPending}
+                              isDisabled={!isAllowed}
+                              colorSchema="primary"
+                              variant="outline_bg"
+                              type="submit"
+                              onClick={() => handleAddHost(host.id)}
+                            >
+                              Add
+                            </Button>
+                          )}
+                        </ProjectPermissionCan>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isPending && !data?.hosts?.length && (
+            <EmptyState title="No hosts available to add to the SSH host group" icon={faServer} />
+          )}
+        </TableContainer>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,84 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetSshHostGroupById } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  sshHostGroupId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["sshHostGroup"]>, data?: object) => void;
+};
+
+export const SshHostGroupDetailsSection = ({ sshHostGroupId, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { data: sshHostGroup } = useGetSshHostGroupById(sshHostGroupId);
+
+  return sshHostGroup ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">SSH Host Group Details</h3>
+        <ProjectPermissionCan
+          I={ProjectPermissionActions.Edit}
+          a={ProjectPermissionSub.SshHostGroups}
+        >
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit SSH Host Group">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="edit icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("sshHostGroup", {
+                      sshHostGroupId: sshHostGroup.id
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </ProjectPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">SSH Host Group ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{sshHostGroup.id}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(sshHostGroup.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{sshHostGroup.name}</p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};
@@ -0,0 +1,89 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useRemoveHostFromSshHostGroup } from "@app/hooks/api";
+
+import { AddHostGroupMemberModal } from "./AddHostGroupMemberModal";
+import { SshHostGroupHostsTable } from "./SshHostGroupHostsTable";
+
+type Props = {
+  sshHostGroupId: string;
+};
+
+export const SshHostGroupHostsSection = ({ sshHostGroupId }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "removeHostFromSshHostGroup",
+    "addHostGroupMembers"
+  ] as const);
+
+  const { mutateAsync: removeHostFromGroup } = useRemoveHostFromSshHostGroup();
+
+  const onRemoveSshHostSubmit = async (sshHostId: string) => {
+    try {
+      await removeHostFromGroup({
+        sshHostId,
+        sshHostGroupId
+      });
+
+      await createNotification({
+        text: "Successfully removed host from SSH group",
+        type: "success"
+      });
+
+      handlePopUpClose("removeHostFromSshHostGroup");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to remove host from SSH group",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">SSH Hosts</h3>
+        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.SshHosts}>
+          {(isAllowed) => (
+            <IconButton
+              ariaLabel="add host"
+              variant="plain"
+              className="group relative"
+              onClick={() =>
+                handlePopUpOpen("addHostGroupMembers", {
+                  sshHostGroupId
+                })
+              }
+              isDisabled={!isAllowed}
+            >
+              <FontAwesomeIcon icon={faPlus} />
+            </IconButton>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <div className="py-4">
+        <SshHostGroupHostsTable sshHostGroupId={sshHostGroupId} handlePopUpOpen={handlePopUpOpen} />
+      </div>
+      <AddHostGroupMemberModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.removeHostFromSshHostGroup.isOpen}
+        title={`Are you sure want to remove the host ${
+          (popUp?.removeHostFromSshHostGroup?.data as { hostname: string })?.hostname || ""
+        } from this SSH group?`}
+        onChange={(isOpen) => handlePopUpToggle("removeHostFromSshHostGroup", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveSshHostSubmit(
+            (popUp?.removeHostFromSshHostGroup?.data as { sshHostId: string })?.sshHostId
+          )
+        }
+      />
+    </div>
+  );
+};
@@ -0,0 +1,94 @@
+import { faServer, faUserMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useListSshHostGroupHosts } from "@app/hooks/api";
+import { EHostGroupMembershipFilter } from "@app/hooks/api/sshHostGroup/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  sshHostGroupId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeHostFromSshHostGroup"]>,
+    data?: object
+  ) => void;
+};
+
+export const SshHostGroupHostsTable = ({ sshHostGroupId, handlePopUpOpen }: Props) => {
+  const { data, isPending } = useListSshHostGroupHosts({
+    sshHostGroupId,
+    filter: EHostGroupMembershipFilter.GROUP_MEMBERS
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Alias</Th>
+              <Th>Hostname</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={2} innerKey="ssh-host-group-hosts" />}
+            {!isPending &&
+              data?.hosts.map((host) => {
+                return (
+                  <Tr className="h-10" key={`host-${host.id}`}>
+                    <Td>{host.alias ?? "-"}</Td>
+                    <Td>{host.hostname}</Td>
+                    <Td className="flex justify-end">
+                      <ProjectPermissionCan
+                        I={ProjectPermissionActions.Edit}
+                        a={ProjectPermissionSub.SshHostGroups}
+                      >
+                        {(isAllowed) => (
+                          <Tooltip content="Remove user from group">
+                            <IconButton
+                              isDisabled={!isAllowed}
+                              ariaLabel="Remove user from group"
+                              onClick={() =>
+                                handlePopUpOpen("removeHostFromSshHostGroup", {
+                                  sshHostId: host.id,
+                                  hostname: host.hostname
+                                })
+                              }
+                              variant="plain"
+                              colorSchema="danger"
+                            >
+                              <FontAwesomeIcon icon={faUserMinus} />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                      </ProjectPermissionCan>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && !data?.hosts?.length && (
+          <EmptyState title="No hosts have been added to this SSH host group" icon={faServer} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};
+
+export default SshHostGroupHostsTable;
@@ -0,0 +1,3 @@
+export { SshHostGroupDetailsSection } from "./SshHostGroupDetailsSection";
+export { SshHostGroupHostsSection } from "./SshHostGroupHostsSection";
+export { SshHostGroupHostsTable } from "./SshHostGroupHostsTable";
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SshHostGroupDetailsByIDPage } from "./SshHostGroupDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ssh-host-groups/$sshHostGroupId"
+)({
+  component: SshHostGroupDetailsByIDPage
+});
@@ -1,175 +0,0 @@
-import { useState } from "react";
-import { faMagnifyingGlass, faUsers } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  EmptyState,
-  Input,
-  Modal,
-  ModalContent,
-  Pagination,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
-import { useDebounce, useResetPageHelper } from "@app/hooks";
-import { useAddUserToGroup, useListGroupUsers } from "@app/hooks/api";
-import { EFilterReturnedUsers } from "@app/hooks/api/groups/types";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  popUp: UsePopUpState<["sshHostGroupHosts"]>;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["sshHostGroupHosts"]>,
-    state?: boolean
-  ) => void;
-};
-
-export const SshHostGroupHostsModal = ({ popUp, handlePopUpToggle }: Props) => {
-  const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(10);
-  const [searchMemberFilter, setSearchMemberFilter] = useState("");
-  const [debouncedSearch] = useDebounce(searchMemberFilter);
-
-  const popUpData = popUp?.addGroupMembers?.data as {
-    groupId: string;
-    slug: string;
-  };
-
-  const offset = (page - 1) * perPage;
-  const { data, isPending } = useListGroupUsers({
-    id: popUpData?.groupId,
-    groupSlug: popUpData?.slug,
-    offset,
-    limit: perPage,
-    search: debouncedSearch,
-    filter: EFilterReturnedUsers.NON_MEMBERS
-  });
-
-  const { totalCount = 0 } = data ?? {};
-
-  useResetPageHelper({
-    totalCount,
-    offset,
-    setPage
-  });
-
-  const { mutateAsync: addUserToGroupMutateAsync } = useAddUserToGroup();
-
-  const handleAddHost = async (hostId: string) => {
-    try {
-      if (!popUpData?.slug) {
-        createNotification({
-          text: "Some data is missing, please refresh the page and try again",
-          type: "error"
-        });
-        return;
-      }
-
-      //   await addUserToGroupMutateAsync({
-      //     groupId: popUpData.groupId,
-      //     username,
-      //     slug: popUpData.slug
-      //   });
-
-      createNotification({
-        text: "Successfully assigned host to the SSH host group",
-        type: "success"
-      });
-    } catch {
-      createNotification({
-        text: "Failed to assign host to the SSH host group",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <Modal
-      isOpen={popUp?.sshHostGroupHosts?.isOpen}
-      onOpenChange={(isOpen) => {
-        handlePopUpToggle("sshHostGroupHosts", isOpen);
-      }}
-    >
-      <ModalContent title="Add Hosts to Group">
-        <Input
-          value={searchMemberFilter}
-          onChange={(e) => setSearchMemberFilter(e.target.value)}
-          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search members..."
-        />
-        <TableContainer className="mt-4">
-          <Table>
-            <THead>
-              <Tr>
-                <Th>User</Th>
-                <Th />
-              </Tr>
-            </THead>
-            <TBody>
-              {isPending && <TableSkeleton columns={2} innerKey="group-users" />}
-              {!isPending &&
-                data?.users?.map(({ id, firstName, lastName, username }) => {
-                  return (
-                    <Tr className="items-center" key={`group-user-${id}`}>
-                      <Td>
-                        <p>{`${firstName ?? "-"} ${lastName ?? ""}`}</p>
-                        <p>{username}</p>
-                      </Td>
-                      <Td className="flex justify-end">
-                        <OrgPermissionCan
-                          I={OrgPermissionGroupActions.Edit}
-                          a={OrgPermissionSubjects.Groups}
-                        >
-                          {(isAllowed) => {
-                            return (
-                              <Button
-                                isLoading={isPending}
-                                isDisabled={!isAllowed}
-                                colorSchema="primary"
-                                variant="outline_bg"
-                                type="submit"
-                                onClick={() => handleAddMember(username)}
-                              >
-                                Assign
-                              </Button>
-                            );
-                          }}
-                        </OrgPermissionCan>
-                      </Td>
-                    </Tr>
-                  );
-                })}
-            </TBody>
-          </Table>
-          {!isPending && totalCount > 0 && (
-            <Pagination
-              count={totalCount}
-              page={page}
-              perPage={perPage}
-              onChangePage={(newPage) => setPage(newPage)}
-              onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
-            />
-          )}
-          {!isPending && !data?.users?.length && (
-            <EmptyState
-              title={
-                debouncedSearch ? "No users match search" : "All users are already in the group"
-              }
-              icon={faUsers}
-            />
-          )}
-        </TableContainer>
-      </ModalContent>
-    </Modal>
-  );
-};
@@ -43,7 +43,7 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
          <THead>
            <Tr>
              <Th>Name</Th>
-              <Th>Hosts</Th>
+              <Th># Hosts</Th>
              <Th>Login User - Authorized Principals Mapping</Th>
              <Th />
            </Tr>
@@ -60,16 +60,16 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
                    key={`ssh-host-group-${group.id}`}
                    onClick={() =>
                      navigate({
-                        to: `/${ProjectType.SSH}/$projectId/ssh-groups/$sshGroupId` as const,
+                        to: `/${ProjectType.SSH}/$projectId/ssh-host-groups/$sshHostGroupId` as const,
                        params: {
                          projectId: currentWorkspace.id,
-                          sshGroupId: group.id
+                          sshHostGroupId: group.id
                        }
                      })
                    }
                  >
                    <Td>{group.name}</Td>
-                    <Td>-</Td>
+                    <Td>{group.hostCount}</Td>
                    <Td>
                      {group.loginMappings.length === 0 ? (
                        <span className="italic text-mineshaft-400">None</span>