Add ssh host endpoint for issuing ssh host cert

frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx

@@ -65,7 +65,7 @@ const formatDescription = (type: ProjectType) => {
     return "Manage your PKI infrastructure and issue digital certificates for services, applications, and devices.";
   if (type === ProjectType.KMS)
     return "Centralize the management of keys for cryptographic operations, such as encryption and decryption.";
-  return "Generate SSH credentials to provide secure and centralized SSH access control for your infrastructure.";
+  return "Infisical SSH lets you issue SSH credentials to users for short-lived, secure SSH access to infrastructure.";
 };
 
 type Props = {

frontend/src/pages/ssh/OverviewPage/OverviewPage.tsx

@@ -1,77 +0,0 @@
-import { Helmet } from "react-helmet";
-import { useTranslation } from "react-i18next";
-import { motion } from "framer-motion";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-
-import { SshCaSection, SshCertificatesSection } from "./components";
-
-enum TabSections {
-  SshCa = "ssh-certificate-authorities",
-  SshCertificates = "ssh-certificates"
-}
-
-export const OverviewPage = () => {
-  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."
-            />
-            <Tabs defaultValue={TabSections.SshCertificates}>
-              <TabList>
-                <Tab value={TabSections.SshCertificates}>SSH Certificates</Tab>
-                <Tab value={TabSections.SshCa}>Certificate Authorities</Tab>
-              </TabList>
-              <TabPanel value={TabSections.SshCertificates}>
-                <motion.div
-                  key="panel-ssh-certificate-s"
-                  transition={{ duration: 0.15 }}
-                  initial={{ opacity: 0, translateX: 30 }}
-                  animate={{ opacity: 1, translateX: 0 }}
-                  exit={{ opacity: 0, translateX: 30 }}
-                >
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Read}
-                    a={ProjectPermissionSub.SshCertificates}
-                    renderGuardBanner
-                    passThrough={false}
-                  >
-                    <SshCertificatesSection />
-                  </ProjectPermissionCan>
-                </motion.div>
-              </TabPanel>
-              <TabPanel value={TabSections.SshCa}>
-                <motion.div
-                  key="panel-ssh-certificate-authorities"
-                  transition={{ duration: 0.15 }}
-                  initial={{ opacity: 0, translateX: 30 }}
-                  animate={{ opacity: 1, translateX: 0 }}
-                  exit={{ opacity: 0, translateX: 30 }}
-                >
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Read}
-                    a={ProjectPermissionSub.SshCertificateAuthorities}
-                    renderGuardBanner
-                    passThrough={false}
-                  >
-                    <SshCaSection />
-                  </ProjectPermissionCan>
-                </motion.div>
-              </TabPanel>
-            </Tabs>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx

@@ -20,7 +20,7 @@ import { useDeleteSshCa, useGetSshCaById } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { SshCaModal } from "../OverviewPage/components/SshCaModal";
+import { SshCaModal } from "../SshCasPage/components/SshCaModal";
 import { SshCaDetailsSection, SshCertificateTemplatesSection } from "./components";
 
 const Page = () => {

frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx

@@ -0,0 +1,28 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { SshCaSection } from "./components";
+
+export const SshCasPage = () => {
+  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="SSH Certificate Authorities"
+              description="Manage the SSH certificate authorities used to sign user and host certificates, including custom and default CAs."
+            />
+            <SshCaSection />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

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

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

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

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

frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx

@@ -0,0 +1,28 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { SshCertificatesSection } from "./components";
+
+export const SshCertsPage = () => {
+  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="SSH Certificates"
+              description="View and audit all issued SSH certificates, including validity and associated access metadata."
+            />
+            <SshCertificatesSection />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/ssh/SshCertsPage/components/SshCertificatesSection.tsx

@@ -1,21 +1,15 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { SshCertificateModal } from "../../SshCaByIDPage/components/SshCertificateModal";
 import { SshCertificatesTable } from "./SshCertificatesTable";
 
 export const SshCertificatesSection = () => {
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["sshCertificate"] as const);
+  const { popUp, handlePopUpToggle } = usePopUp(["sshCertificate"] as const);
   return (
     <div className="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">Certificates</p>
-        <ProjectPermissionCan
+        {/* <ProjectPermissionCan
           I={ProjectPermissionActions.Create}
           a={ProjectPermissionSub.SshCertificates}
         >
@@ -30,7 +24,7 @@ export const SshCertificatesSection = () => {
               Request
             </Button>
           )}
-        </ProjectPermissionCan>
+        </ProjectPermissionCan> */}
       </div>
       <SshCertificatesTable />
       <SshCertificateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />

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

@@ -1,2 +1 @@
-export { SshCaSection } from "./SshCaSection";
 export { SshCertificatesSection } from "./SshCertificatesSection";

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

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

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

@@ -17,7 +17,7 @@ export const SshHostsPage = () => {
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
               title="Hosts"
-              description="Infisical SSH lets you issue SSH credentials to clients to provide short-lived, secure SSH access to infrastructure."
+              description="Manage your SSH hosts, configure access policies, and define login behavior for secure connections."
             />
             <SshHostsSection />
           </div>

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

@@ -217,11 +217,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </div>
                 <div className="flex-grow">
                   {i === 0 && (
-                    <FormLabel
-                      label="Allowed Principals"
-                      className="text-xs text-mineshaft-400"
-                      isOptional
-                    />
+                    <FormLabel label="Allowed Principals" className="text-xs text-mineshaft-400" />
                   )}
                   <Controller
                     control={control}

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

@@ -21,9 +21,7 @@ export const SshHostsSection = () => {
 
   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}`,

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

@@ -3,7 +3,7 @@ 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"
+  "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/overview"
 )({
   component: SshHostsPage
 });