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

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupHostsModal.tsx

@@ -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>
-  );
-};

frontend/src/pages/ssh/SshHostsPage/components/SshHostGroupsTable.tsx

@@ -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>