Merge pull request #3446 from Infisical/ssh-non-interactive

Improvements to Infisical V2: Support for Non-Interactive Mode, Updating Default SSH CAs.

frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx

@@ -1,11 +1,12 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 
 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
-
-const tabs = [{ name: "General", key: "tab-project-general", Component: ProjectGeneralTab }];
+import { ProjectSshTab } from "./components/ProjectSshTab";
 
 export const SettingsPage = () => {
   const { t } = useTranslation();
@@ -17,19 +18,28 @@ export const SettingsPage = () => {
       </Helmet>
       <div className="w-full max-w-7xl">
         <PageHeader title={t("settings.project.title")} />
-        <Tabs defaultValue={tabs[0].key}>
+        <Tabs defaultValue="tab-project-general">
           <TabList>
-            {tabs.map((tab) => (
-              <Tab value={tab.key} key={tab.key}>
-                {tab.name}
-              </Tab>
-            ))}
+            <Tab value="tab-project-general">General</Tab>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.Project}
+            >
+              {(isAllowed) => isAllowed && <Tab value="tab-project-ssh">SSH Settings</Tab>}
+            </ProjectPermissionCan>
           </TabList>
-          {tabs.map(({ key, Component }) => (
-            <TabPanel value={key} key={key}>
-              <Component />
-            </TabPanel>
-          ))}
+          <TabPanel value="tab-project-general">
+            <ProjectGeneralTab />
+          </TabPanel>
+          <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Project}>
+            {(isAllowed) =>
+              isAllowed && (
+                <TabPanel value="tab-project-ssh">
+                  <ProjectSshTab />
+                </TabPanel>
+              )
+            }
+          </ProjectPermissionCan>
         </Tabs>
       </div>
     </div>

frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/ProjectSshTab.tsx

@@ -0,0 +1,9 @@
+import { ProjectSshConfigCasSection } from "./components";
+
+export const ProjectSshTab = () => {
+  return (
+    <div>
+      <ProjectSshConfigCasSection />
+    </div>
+  );
+};

frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/components/ProjectSshConfigCasSection.tsx

@@ -0,0 +1,139 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Select, SelectItem } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import {
+  useGetProjectSshConfig,
+  useListWorkspaceSshCas,
+  useUpdateProjectSshConfig
+} from "@app/hooks/api";
+
+const schema = z
+  .object({
+    defaultUserSshCaId: z.string(),
+    defaultHostSshCaId: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+export const ProjectSshConfigCasSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: sshConfig } = useGetProjectSshConfig(currentWorkspace.id);
+  const { data: sshCas } = useListWorkspaceSshCas(currentWorkspace.id);
+  const { mutate: updateProjectSshConfig } = useUpdateProjectSshConfig();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  useEffect(() => {
+    if (sshConfig) {
+      reset({
+        defaultUserSshCaId: sshConfig.defaultUserSshCaId || "",
+        defaultHostSshCaId: sshConfig.defaultHostSshCaId || ""
+      });
+    }
+  }, [sshConfig]);
+
+  const onFormSubmit = async ({ defaultUserSshCaId, defaultHostSshCaId }: FormData) => {
+    try {
+      await updateProjectSshConfig({
+        projectId: currentWorkspace.id,
+        defaultUserSshCaId: defaultUserSshCaId || undefined,
+        defaultHostSshCaId: defaultHostSshCaId || undefined
+      });
+
+      createNotification({
+        text: "Successfully updated SSH project settings",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update SSH project settings",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-8 text-xl font-semibold">Certificate Authorities</p>
+      <form onSubmit={handleSubmit(onFormSubmit)}>
+        <Controller
+          control={control}
+          name="defaultUserSshCaId"
+          defaultValue=""
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl
+              label="Default User CA"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Select
+                defaultValue={field.value}
+                {...field}
+                onValueChange={(e) => onChange(e)}
+                className="min-w-[20rem]"
+              >
+                {sshCas?.map(({ id, friendlyName }) => (
+                  <SelectItem value={String(id || "")} key={friendlyName}>
+                    {friendlyName}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="defaultHostSshCaId"
+          defaultValue=""
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl
+              label="Default Host CA"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Select
+                defaultValue={field.value}
+                {...field}
+                onValueChange={(e) => onChange(e)}
+                className="min-w-[20rem]"
+              >
+                {sshCas?.map(({ id, friendlyName }) => (
+                  <SelectItem value={String(id || "")} key={friendlyName}>
+                    {friendlyName}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Project}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="secondary"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting || !isAllowed}
+            >
+              Save
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </form>
+    </div>
+  );
+};

frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/components/index.tsx

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

frontend/src/pages/ssh/SettingsPage/components/ProjectSshTab/index.tsx

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

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

@@ -23,6 +23,7 @@ import {
   useCreateSshHost,
   useGetSshHostById,
   useGetWorkspaceUsers,
+  useListWorkspaceSshHosts,
   useUpdateSshHost
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -58,6 +59,7 @@ export type FormData = z.infer<typeof schema>;
 export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace?.id || "";
+  const { data: sshHosts } = useListWorkspaceSshHosts(currentWorkspace.id);
   const { data: members = [] } = useGetWorkspaceUsers(projectId);
   const [expandedMappings, setExpandedMappings] = useState<Record<number, boolean>>({});
 
@@ -116,6 +118,18 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
     try {
       if (!projectId) return;
 
+      // check if there is already a different host with the same hostname
+      const existingHostnames =
+        sshHosts?.filter((h) => h.id !== sshHost?.id).map((h) => h.hostname) || [];
+
+      if (existingHostnames.includes(hostname)) {
+        createNotification({
+          text: "A host with this hostname already exists.",
+          type: "error"
+        });
+        return;
+      }
+
       if (sshHost) {
         await updateMutateAsync({
           sshHostId: sshHost.id,