Address greptile suggestions

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

@@ -10,7 +10,7 @@ export const SshCasPage = () => {
   return (
     <>
       <Helmet>
-        <title>{t("common.head-title", { title: "Certificates" })}</title>
+        <title>{t("common.head-title", { title: "SSH" })}</title>
       </Helmet>
       <div className="h-full bg-bunker-800">
         <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">

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

@@ -144,7 +144,7 @@ export const SshCaModal = ({ popUp, handlePopUpToggle }: Props) => {
     } catch (err) {
       console.error(err);
       createNotification({
-        text: "Failed to create SSH CA",
+        text: `Failed to ${ca ? "update" : "create"} SSH CA`,
         type: "error"
       });
     }

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

@@ -1,15 +1,21 @@
+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, handlePopUpToggle } = usePopUp(["sshCertificate"] as const);
+  const { popUp, handlePopUpToggle, handlePopUpOpen } = 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}
         >
@@ -24,7 +30,7 @@ export const SshCertificatesSection = () => {
               Request
             </Button>
           )}
-        </ProjectPermissionCan> */}
+        </ProjectPermissionCan>
       </div>
       <SshCertificatesTable />
       <SshCertificateModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />

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

@@ -152,7 +152,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
     } catch (err) {
       console.error(err);
       createNotification({
-        text: "Failed to add SSH host",
+        text: `Failed to ${sshHost ? "update" : "add"} SSH host`,
         type: "error"
       });
     }
@@ -206,7 +206,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                 errorText={error?.message}
                 isRequired
               >
-                <Input {...field} placeholder="host.example.com" />
+                <Input {...field} placeholder="8h" />
               </FormControl>
             )}
           />
@@ -328,7 +328,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
                             {(value.length === 0 ? [""] : value).map(
                               (principal: string, principalIndex: number) => (
                                 <div
-                                  key={`${metadataFieldId}-principal-${principal}`}
+                                  key={`${metadataFieldId}-principal-${principal || principalIndex}`}
                                   className="flex items-center space-x-2"
                                 >
                                   <div className="flex-1">

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

@@ -1,4 +1,4 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
@@ -42,27 +42,44 @@ export const SshHostsSection = () => {
     <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) =>
-            isAllowed && (
+        <div className="flex w-full justify-end">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://infisical.com/docs/documentation/platform/ssh"
+          >
+            <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+              Documentation{" "}
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.06rem] ml-1 text-xs"
+              />
+            </span>
+          </a>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.SshHosts}
+          >
+            {(isAllowed) => (
               <Button
                 colorSchema="primary"
                 type="submit"
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => handlePopUpOpen("sshHost")}
                 isDisabled={!isAllowed}
+                className="ml-4"
               >
                 Add Host
               </Button>
-            )
-          }
-        </ProjectPermissionCan>
+            )}
+          </ProjectPermissionCan>
+        </div>
       </div>
       <SshHostsTable handlePopUpOpen={handlePopUpOpen} />
       <SshHostModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteSshHost.isOpen}
-        title="Are you sure want to remove the SSH host?"
+        title="Are you sure you want to remove the SSH host?"
         onChange={(isOpen) => handlePopUpToggle("deleteSshHost", isOpen)}
         deleteKey="confirm"
         onDeleteApproved={() =>