preliminary ssh host structs, api, ui

frontend/src/context/ProjectPermissionContext/types.ts

@@ -139,6 +139,7 @@ export enum ProjectPermissionSub {
   SshCertificateAuthorities = "ssh-certificate-authorities",
   SshCertificateTemplates = "ssh-certificate-templates",
   SshCertificates = "ssh-certificates",
+  SshHosts = "ssh-hosts",
   PkiAlerts = "pki-alerts",
   PkiCollections = "pki-collections",
   Kms = "kms",
@@ -224,6 +225,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.SshCertificateAuthorities]
   | [ProjectPermissionActions, ProjectPermissionSub.SshCertificateTemplates]
   | [ProjectPermissionActions, ProjectPermissionSub.SshCertificates]
+  | [ProjectPermissionActions, ProjectPermissionSub.SshHosts]
   | [ProjectPermissionActions, ProjectPermissionSub.PkiAlerts]
   | [ProjectPermissionActions, ProjectPermissionSub.PkiCollections]
   | [ProjectPermissionSecretSyncActions, ProjectPermissionSub.SecretSyncs]

frontend/src/hooks/api/index.tsx

@@ -41,6 +41,7 @@ export * from "./serverDetails";
 export * from "./serviceTokens";
 export * from "./sshCa";
 export * from "./sshCertificateTemplates";
+export * from "./sshHost";
 export * from "./ssoConfig";
 export * from "./subscriptions";
 export * from "./tags";

frontend/src/hooks/api/sshHost/index.tsx

@@ -0,0 +1,2 @@
+export { useCreateSshHost, useDeleteSshHost, useUpdateSshHost } from "./mutations";
+export { useGetSshHostById } from "./queries";

frontend/src/hooks/api/sshHost/mutations.tsx

@@ -0,0 +1,45 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { workspaceKeys } from "../workspace/query-keys";
+import { TCreateSshHostDTO, TDeleteSshHostDTO, TSshHost, TUpdateSshHostDTO } from "./types";
+
+export const useCreateSshHost = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshHost, object, TCreateSshHostDTO>({
+    mutationFn: async (body) => {
+      const { data: host } = await apiRequest.post("/api/v1/ssh/hosts", body);
+      return host;
+    },
+    onSuccess: ({ projectId }) => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.getWorkspaceSshHosts(projectId) });
+    }
+  });
+};
+
+export const useUpdateSshHost = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshHost, object, TUpdateSshHostDTO>({
+    mutationFn: async ({ sshHostId, ...body }) => {
+      const { data: host } = await apiRequest.patch(`/api/v1/ssh/hosts/${sshHostId}`, body);
+      return host;
+    },
+    onSuccess: ({ projectId }) => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.getWorkspaceSshHosts(projectId) });
+    }
+  });
+};
+
+export const useDeleteSshHost = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshHost, object, TDeleteSshHostDTO>({
+    mutationFn: async ({ sshHostId }) => {
+      const { data: host } = await apiRequest.delete(`/api/v1/ssh/hosts/${sshHostId}`);
+      return host;
+    },
+    onSuccess: ({ projectId }) => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.getWorkspaceSshHosts(projectId) });
+    }
+  });
+};

frontend/src/hooks/api/sshHost/queries.tsx

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TSshHost } from "./types";
+
+export const sshHostKeys = {
+  getSshHostById: (sshHostId: string) => [{ sshHostId }, "ssh-host"]
+};
+
+export const useGetSshHostById = (sshHostId: string) => {
+  return useQuery({
+    queryKey: sshHostKeys.getSshHostById(sshHostId),
+    queryFn: async () => {
+      const { data: sshHost } = await apiRequest.get<TSshHost>(`/api/v1/ssh/hosts/${sshHostId}`);
+      return sshHost;
+    },
+    enabled: Boolean(sshHostId)
+  });
+};

frontend/src/hooks/api/sshHost/types.ts

@@ -0,0 +1,37 @@
+export type TSshHost = {
+  id: string;
+  projectId: string;
+  hostname: string;
+  userCertTtl: string;
+  hostCertTtl: string;
+  loginMappings: {
+    loginUser: string;
+    allowedPrincipals: string[];
+  }[];
+};
+
+export type TCreateSshHostDTO = {
+  projectId: string;
+  hostname: string;
+  userCertTtl?: string;
+  hostCertTtl?: string;
+  loginMappings: {
+    loginUser: string;
+    allowedPrincipals: string[];
+  }[];
+};
+
+export type TUpdateSshHostDTO = {
+  sshHostId: string;
+  hostname?: string;
+  userCertTtl?: string;
+  hostCertTtl?: string;
+  loginMappings?: {
+    loginUser: string;
+    allowedPrincipals: string[];
+  }[];
+};
+
+export type TDeleteSshHostDTO = {
+  sshHostId: string;
+};

frontend/src/hooks/api/workspace/index.tsx

@@ -35,6 +35,7 @@ export {
   useListWorkspaceSshCas,
   useListWorkspaceSshCertificates,
   useListWorkspaceSshCertificateTemplates,
+  useListWorkspaceSshHosts,
   useNameWorkspaceSecrets,
   useToggleAutoCapitalization,
   useUpdateIdentityWorkspaceRole,

frontend/src/hooks/api/workspace/queries.tsx

@@ -17,6 +17,7 @@ import { TPkiCollection } from "../pkiCollections/types";
 import { EncryptedSecret } from "../secrets/types";
 import { TSshCertificate, TSshCertificateAuthority } from "../sshCa/types";
 import { TSshCertificateTemplate } from "../sshCertificateTemplates/types";
+import { TSshHost } from "../sshHost/types";
 import { userKeys } from "../users/query-keys";
 import { TWorkspaceUser } from "../users/types";
 import { ProjectSlackConfig } from "../workflowIntegrations/types";
@@ -809,6 +810,19 @@ export const useListWorkspaceSshCas = (projectId: string) => {
   });
 };
 
+export const useListWorkspaceSshHosts = (projectId: string) => {
+  return useQuery({
+    queryKey: workspaceKeys.getWorkspaceSshHosts(projectId),
+    queryFn: async () => {
+      const {
+        data: { hosts }
+      } = await apiRequest.get<{ hosts: TSshHost[] }>(`/api/v2/workspace/${projectId}/ssh-hosts`);
+      return hosts;
+    },
+    enabled: Boolean(projectId)
+  });
+};
+
 export const useListWorkspaceSshCertificateTemplates = (projectId: string) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceSshCertificateTemplates(projectId),

frontend/src/hooks/api/workspace/query-keys.tsx

@@ -57,6 +57,7 @@ export const workspaceKeys = {
   getWorkspaceSshCas: (projectId: string) => [{ projectId }, "workspace-ssh-cas"] as const,
   allWorkspaceSshCertificates: (projectId: string) =>
     [{ projectId }, "workspace-ssh-certificates"] as const,
+  getWorkspaceSshHosts: (projectId: string) => [{ projectId }, "workspace-ssh-hosts"] as const,
   specificWorkspaceSshCertificates: ({
     offset,
     limit,

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -120,18 +120,32 @@ export const ProjectLayout = () => {
                         </Link>
                       )}
                       {isSSH && (
-                        <Link
-                          to={`/${ProjectType.SSH}/$projectId/overview` as const}
-                          params={{
-                            projectId: currentWorkspace.id
-                          }}
-                        >
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="lock-closed">
-                              Overview
-                            </MenuItem>
-                          )}
-                        </Link>
+                        <>
+                          <Link
+                            to={`/${ProjectType.SSH}/$projectId/overview` as const}
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="lock-closed">
+                                Overview
+                              </MenuItem>
+                            )}
+                          </Link>
+                          <Link
+                            to={`/${ProjectType.SSH}/$projectId/hosts` as const}
+                            params={{
+                              projectId: currentWorkspace.id
+                            }}
+                          >
+                            {({ isActive }) => (
+                              <MenuItem isSelected={isActive} icon="server" iconMode="reverse">
+                                Hosts
+                              </MenuItem>
+                            )}
+                          </Link>
+                        </>
                       )}
                       {isSecretManager && (
                         <Link

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

@@ -0,0 +1,28 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { SshHostsSection } from "./components";
+
+export const SshHostsPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificates" })}</title>
+      </Helmet>
+      <div className="h-full bg-bunker-800">
+        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title="Overview"
+              description="Infisical SSH lets you issue SSH credentials to clients to provide short-lived, secure SSH access to infrastructure."
+            />
+            <SshHostsSection />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,285 @@
+import { useEffect } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "@tanstack/react-router";
+import ms from "ms";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateSshHost, useGetSshHostById, useUpdateSshHost } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  popUp: UsePopUpState<["sshHost"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["sshHost"]>, state?: boolean) => void;
+};
+
+const schema = z
+  .object({
+    hostname: z.string(),
+    userCertTtl: z
+      .string()
+      .trim()
+      .refine(
+        (val) => ms(val) > 0,
+        "TTL must be a valid time string such as 2 days, 1d, 2h 1y, ..."
+      )
+      .default("8h"),
+    loginMappings: z
+      .object({
+        loginUser: z.string().trim().min(1),
+        allowedPrincipals: z.string().trim().min(1)
+      })
+      .array()
+      .default([])
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const projectId = currentWorkspace?.id || "";
+  const { data: sshHost } = useGetSshHostById(
+    (popUp?.sshHost?.data as { sshHostId: string })?.sshHostId || ""
+  );
+
+  const { mutateAsync: createMutateAsync } = useCreateSshHost();
+  const { mutateAsync: updateMutateAsync } = useUpdateSshHost();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      hostname: "",
+      userCertTtl: "8h",
+      loginMappings: []
+    }
+  });
+
+  const loginMappingsFormFields = useFieldArray({
+    control,
+    name: "loginMappings"
+  });
+
+  useEffect(() => {
+    if (sshHost) {
+      reset({
+        hostname: sshHost.hostname,
+        userCertTtl: sshHost.userCertTtl,
+        loginMappings: sshHost.loginMappings.map(({ loginUser, allowedPrincipals }) => ({
+          loginUser,
+          allowedPrincipals: allowedPrincipals.join(",")
+        }))
+      });
+    } else {
+      reset({
+        hostname: "",
+        userCertTtl: "8h",
+        loginMappings: []
+      });
+    }
+  }, [sshHost]);
+
+  const onFormSubmit = async ({ hostname, userCertTtl, loginMappings }: FormData) => {
+    try {
+      if (!projectId) return;
+
+      if (sshHost) {
+        await updateMutateAsync({
+          sshHostId: sshHost.id,
+          hostname,
+          userCertTtl,
+          loginMappings: loginMappings.map(({ loginUser, allowedPrincipals }) => ({
+            loginUser,
+            allowedPrincipals: allowedPrincipals.split(",")
+          }))
+        });
+      } else {
+        await createMutateAsync({
+          projectId,
+          hostname,
+          userCertTtl,
+          loginMappings: loginMappings.map(({ loginUser, allowedPrincipals }) => ({
+            loginUser,
+            allowedPrincipals: allowedPrincipals.split(",")
+          }))
+        });
+
+        // navigate({
+        //   to: `/${ProjectType.SSH}/$projectId/ca/$caId` as const,
+        //   params: {
+        //     projectId,
+        //     caId: newCaId
+        //   }
+        // });
+      }
+
+      reset();
+      handlePopUpToggle("sshHost", false);
+
+      createNotification({
+        text: `Successfully ${sshHost ? "updated" : "added"} SSH host`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to add SSH host",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.sshHost?.isOpen}
+      onOpenChange={(isOpen) => {
+        reset();
+        handlePopUpToggle("sshHost", isOpen);
+      }}
+    >
+      <ModalContent title={`${sshHost ? "View" : "Add"} SSH host`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {sshHost && (
+            <FormControl label="SSH Host ID">
+              <Input value={sshHost.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            defaultValue=""
+            name="hostname"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Hostname"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="host.example.com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="userCertTtl"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="User Certificate TTL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="host.example.com" />
+              </FormControl>
+            )}
+          />
+          <div>
+            <FormLabel label="Login Mappings" />
+          </div>
+          <div className="mb-3 flex flex-col space-y-2">
+            {loginMappingsFormFields.fields.map(({ id: metadataFieldId }, i) => (
+              <div key={metadataFieldId} className="flex items-end space-x-2">
+                <div className="flex-grow">
+                  {i === 0 && <span className="text-xs text-mineshaft-400">Login User</span>}
+                  <Controller
+                    control={control}
+                    name={`loginMappings.${i}.loginUser`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0"
+                      >
+                        <Input {...field} placeholder="ec2-user" />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <div className="flex-grow">
+                  {i === 0 && (
+                    <FormLabel
+                      label="Allowed Principals"
+                      className="text-xs text-mineshaft-400"
+                      isOptional
+                    />
+                  )}
+                  <Controller
+                    control={control}
+                    name={`loginMappings.${i}.allowedPrincipals`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0"
+                      >
+                        <Input {...field} placeholder="[email protected], [email protected]" />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <IconButton
+                  ariaLabel="delete key"
+                  className="bottom-0.5 h-9"
+                  variant="outline_bg"
+                  onClick={() => loginMappingsFormFields.remove(i)}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            ))}
+          </div>
+          <div className="mt-2 flex justify-end">
+            <Button
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+              variant="outline_bg"
+              onClick={() =>
+                loginMappingsFormFields.append({ loginUser: "", allowedPrincipals: "" })
+              }
+            >
+              Add Login Mapping
+            </Button>
+          </div>
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.sshHost?.data ? "Update" : "Add"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("sshHost", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,74 @@
+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 { Button, DeleteActionModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useDeleteSshHost } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { SshHostModal } from "./SshHostModal";
+import { SshHostsTable } from "./SshHostsTable";
+
+export const SshHostsSection = () => {
+  const { mutateAsync: deleteSshHost } = useDeleteSshHost();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "sshHost",
+    "deleteSshHost"
+  ] as const);
+
+  const onRemoveSshHostSubmit = async (sshHostId: string) => {
+    try {
+      console.log("pre onRemoveSshHostSubmit");
+      const host = await deleteSshHost({ sshHostId });
+      console.log("post onRemoveSshHostSubmit deleted host: ", host);
+
+      createNotification({
+        text: `Successfully deleted SSH host: ${host.hostname}`,
+        type: "success"
+      });
+
+      handlePopUpClose("deleteSshHost");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete SSH host",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Hosts</p>
+        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.SshHosts}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("sshHost")}
+              isDisabled={!isAllowed}
+            >
+              Add Host
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <SshHostsTable handlePopUpOpen={handlePopUpOpen} />
+      <SshHostModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteSshHost.isOpen}
+        title="Are you sure want to remove the SSH host?"
+        onChange={(isOpen) => handlePopUpToggle("deleteSshHost", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveSshHostSubmit((popUp?.deleteSshHost?.data as { sshHostId: string })?.sshHostId)
+        }
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,140 @@
+import { faEllipsis, faPencil, faServer, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useListWorkspaceSshHosts } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteSshHost", "sshHost"]>,
+    data?: object
+  ) => void;
+};
+
+// TODO: something to do with allowed principals
+
+export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isPending } = useListWorkspaceSshHosts(currentWorkspace?.id || "");
+
+  console.log("hosts data: ", data);
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Hostname</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={3} innerKey="org-ssh-cas" />}
+            {!isPending &&
+              data &&
+              data.length > 0 &&
+              data.map((host) => {
+                return (
+                  <Tr
+                    className="h-10"
+                    key={`ssh-host-${host.id}`}
+                    // onClick={() =>
+                    //   navigate({
+                    //     to: `/${ProjectType.SSH}/$projectId/ca/$caId` as const,
+                    //     params: {
+                    //       projectId: currentWorkspace.id,
+                    //       caId: ca.id
+                    //     }
+                    //   })
+                    // }
+                  >
+                    <Td>{host.hostname}</Td>
+                    <Td className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Edit}
+                            a={ProjectPermissionSub.SshHosts}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("sshHost", {
+                                    sshHostId: host.id
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faPencil} />}
+                              >
+                                Edit SSH host
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.SshHosts}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteSshHost", {
+                                    sshHostId: host.id
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
+                              >
+                                Delete SSH host
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isPending && data?.length === 0 && (
+          <EmptyState title="No SSH hosts have been added" icon={faServer} />
+        )}
+      </TableContainer>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { SshHostsSection } from "./SshHostsSection";

frontend/src/pages/ssh/SshHostsPage/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { SshHostsPage } from "./SshHostsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/hosts"
+)({
+  component: SshHostsPage
+});

frontend/src/routeTree.gen.ts

@@ -79,6 +79,7 @@ import { Route as secretManagerIntegrationsRouteAzureAppConfigurationsOauthRedir
 import { Route as projectAccessControlPageRouteCertManagerImport } from './pages/project/AccessControlPage/route-cert-manager'
 import { Route as sshSettingsPageRouteImport } from './pages/ssh/SettingsPage/route'
 import { Route as sshOverviewPageRouteImport } from './pages/ssh/OverviewPage/route'
+import { Route as sshSshHostsPageRouteImport } from './pages/ssh/SshHostsPage/route'
 import { Route as secretManagerSettingsPageRouteImport } from './pages/secret-manager/SettingsPage/route'
 import { Route as secretManagerSecretRotationPageRouteImport } from './pages/secret-manager/SecretRotationPage/route'
 import { Route as secretManagerOverviewPageRouteImport } from './pages/secret-manager/OverviewPage/route'
@@ -806,6 +807,12 @@ const sshOverviewPageRouteRoute = sshOverviewPageRouteImport.update({
   getParentRoute: () => sshLayoutRoute,
 } as any)
 
+const sshSshHostsPageRouteRoute = sshSshHostsPageRouteImport.update({
+  id: '/hosts',
+  path: '/hosts',
+  getParentRoute: () => sshLayoutRoute,
+} as any)
+
 const secretManagerSettingsPageRouteRoute =
   secretManagerSettingsPageRouteImport.update({
     id: '/settings',
@@ -2146,6 +2153,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof secretManagerSettingsPageRouteImport
       parentRoute: typeof secretManagerLayoutImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/hosts': {
+      id: '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/hosts'
+      path: '/hosts'
+      fullPath: '/ssh/$projectId/hosts'
+      preLoaderRoute: typeof sshSshHostsPageRouteImport
+      parentRoute: typeof sshLayoutImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/overview': {
       id: '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/overview'
       path: '/overview'
@@ -3463,6 +3477,7 @@ const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdRouteWithChildr
   )
 
 interface sshLayoutRouteChildren {
+  sshSshHostsPageRouteRoute: typeof sshSshHostsPageRouteRoute
   sshOverviewPageRouteRoute: typeof sshOverviewPageRouteRoute
   sshSettingsPageRouteRoute: typeof sshSettingsPageRouteRoute
   projectAccessControlPageRouteSshRoute: typeof projectAccessControlPageRouteSshRoute
@@ -3473,6 +3488,7 @@ interface sshLayoutRouteChildren {
 }
 
 const sshLayoutRouteChildren: sshLayoutRouteChildren = {
+  sshSshHostsPageRouteRoute: sshSshHostsPageRouteRoute,
   sshOverviewPageRouteRoute: sshOverviewPageRouteRoute,
   sshSettingsPageRouteRoute: sshSettingsPageRouteRoute,
   projectAccessControlPageRouteSshRoute: projectAccessControlPageRouteSshRoute,
@@ -3755,6 +3771,7 @@ export interface FileRoutesByFullPath {
   '/secret-manager/$projectId/overview': typeof secretManagerOverviewPageRouteRoute
   '/secret-manager/$projectId/secret-rotation': typeof secretManagerSecretRotationPageRouteRoute
   '/secret-manager/$projectId/settings': typeof secretManagerSettingsPageRouteRoute
+  '/ssh/$projectId/hosts': typeof sshSshHostsPageRouteRoute
   '/ssh/$projectId/overview': typeof sshOverviewPageRouteRoute
   '/ssh/$projectId/settings': typeof sshSettingsPageRouteRoute
   '/cert-manager/$projectId/access-management': typeof projectAccessControlPageRouteCertManagerRoute
@@ -3927,6 +3944,7 @@ export interface FileRoutesByTo {
   '/secret-manager/$projectId/overview': typeof secretManagerOverviewPageRouteRoute
   '/secret-manager/$projectId/secret-rotation': typeof secretManagerSecretRotationPageRouteRoute
   '/secret-manager/$projectId/settings': typeof secretManagerSettingsPageRouteRoute
+  '/ssh/$projectId/hosts': typeof sshSshHostsPageRouteRoute
   '/ssh/$projectId/overview': typeof sshOverviewPageRouteRoute
   '/ssh/$projectId/settings': typeof sshSettingsPageRouteRoute
   '/cert-manager/$projectId/access-management': typeof projectAccessControlPageRouteCertManagerRoute
@@ -4115,6 +4133,7 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/overview': typeof secretManagerOverviewPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secret-rotation': typeof secretManagerSecretRotationPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/settings': typeof secretManagerSettingsPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/hosts': typeof sshSshHostsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/overview': typeof sshOverviewPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/settings': typeof sshSettingsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/access-management': typeof projectAccessControlPageRouteCertManagerRoute
@@ -4296,6 +4315,7 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/overview'
     | '/secret-manager/$projectId/secret-rotation'
     | '/secret-manager/$projectId/settings'
+    | '/ssh/$projectId/hosts'
     | '/ssh/$projectId/overview'
     | '/ssh/$projectId/settings'
     | '/cert-manager/$projectId/access-management'
@@ -4467,6 +4487,7 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/overview'
     | '/secret-manager/$projectId/secret-rotation'
     | '/secret-manager/$projectId/settings'
+    | '/ssh/$projectId/hosts'
     | '/ssh/$projectId/overview'
     | '/ssh/$projectId/settings'
     | '/cert-manager/$projectId/access-management'
@@ -4653,6 +4674,7 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/overview'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secret-rotation'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/settings'
+    | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/hosts'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/overview'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/settings'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/access-management'
@@ -5195,6 +5217,7 @@ export const routeTree = rootRoute
       "filePath": "ssh/layout.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId",
       "children": [
+        "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/hosts",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/overview",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/settings",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/access-management",
@@ -5244,6 +5267,10 @@ export const routeTree = rootRoute
       "filePath": "secret-manager/SettingsPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout"
     },
+    "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/hosts": {
+      "filePath": "ssh/SshHostsPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout"
+    },
     "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/overview": {
       "filePath": "ssh/OverviewPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout"

frontend/src/routes.ts

@@ -307,6 +307,7 @@ const kmsRoutes = route("/kms/$projectId", [
 const sshRoutes = route("/ssh/$projectId", [
   layout("ssh-layout", "ssh/layout.tsx", [
     route("/overview", "ssh/OverviewPage/route.tsx"),
+    route("/hosts", "ssh/SshHostsPage/route.tsx"),
     route("/ca/$caId", "ssh/SshCaByIDPage/route.tsx"),
     route("/settings", "ssh/SettingsPage/route.tsx"),
     route("/access-management", "project/AccessControlPage/route-ssh.tsx"),