Merge branch 'main' into feat/addGroupsToSshHosts

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx

@@ -13,6 +13,7 @@ import { IdentityAzureAuthForm } from "./IdentityAzureAuthForm";
 import { IdentityGcpAuthForm } from "./IdentityGcpAuthForm";
 import { IdentityJwtAuthForm } from "./IdentityJwtAuthForm";
 import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
+import { IdentityLdapAuthForm } from "./IdentityLdapAuthForm";
 import { IdentityOidcAuthForm } from "./IdentityOidcAuthForm";
 import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
@@ -46,6 +47,7 @@ const identityAuthMethods = [
   { label: "AWS Auth", value: IdentityAuthMethod.AWS_AUTH },
   { label: "Azure Auth", value: IdentityAuthMethod.AZURE_AUTH },
   { label: "OIDC Auth", value: IdentityAuthMethod.OIDC_AUTH },
+  { label: "LDAP Auth", value: IdentityAuthMethod.LDAP_AUTH },
   {
     label: "JWT Auth",
     value: IdentityAuthMethod.JWT_AUTH
@@ -186,6 +188,16 @@ export const IdentityAuthMethodModalContent = ({
           handlePopUpToggle={handlePopUpToggle}
         />
       )
+    },
+
+    [IdentityAuthMethod.LDAP_AUTH]: {
+      render: () => (
+        <IdentityLdapAuthForm
+          identityId={identityAuthMethodData.identityId}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
     }
   };
 

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm.tsx

@@ -0,0 +1,608 @@
+import { useEffect, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faQuestionCircle, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import {
+  useAddIdentityLdapAuth,
+  useGetIdentityLdapAuth,
+  useUpdateIdentityLdapAuth
+} from "@app/hooks/api";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { IdentityFormTab } from "./types";
+
+const schema = z
+  .object({
+    url: z.string().min(1),
+    bindDN: z.string(),
+    bindPass: z.string(),
+    searchBase: z.string(),
+    searchFilter: z.string(), // defaults to (uid={{username}})
+    ldapCaCertificate: z
+      .string()
+      .optional()
+      .transform((val) => val || undefined),
+    allowedFields: z
+      .object({
+        key: z.string().trim(),
+        value: z
+          .string()
+          .trim()
+          .transform((val) => val.replace(/\s/g, ""))
+      })
+      .array()
+      .optional(),
+
+    accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token TTL cannot be greater than 315360000"
+    }),
+    accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token Max TTL cannot be greater than 315360000"
+    }),
+    accessTokenNumUsesLimit: z.string(),
+    accessTokenTrustedIps: z
+      .array(
+        z.object({
+          ipAddress: z.string().max(50)
+        })
+      )
+      .min(1)
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  identityId?: string;
+  isUpdate?: boolean;
+};
+
+export const IdentityLdapAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityId,
+  isUpdate
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityLdapAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityLdapAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
+
+  const { data } = useGetIdentityLdapAuth(identityId ?? "", {
+    enabled: isUpdate
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      url: "",
+      bindDN: "",
+      bindPass: "",
+      searchBase: "",
+      searchFilter: "(uid={{username}})",
+      accessTokenTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
+      accessTokenNumUsesLimit: "0",
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+    }
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  const {
+    fields: allowedFieldsFields,
+    append: appendAllowedField,
+    remove: removeAllowedField
+  } = useFieldArray({ control, name: "allowedFields" });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        url: data.url,
+        bindDN: data.bindDN,
+        bindPass: data.bindPass,
+        searchBase: data.searchBase,
+        searchFilter: data.searchFilter,
+        ldapCaCertificate: data.ldapCaCertificate || undefined,
+        allowedFields: data.allowedFields,
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        url: "",
+        bindDN: "",
+        bindPass: "",
+        searchBase: "",
+        searchFilter: "(uid={{username}})",
+        ldapCaCertificate: undefined,
+        allowedFields: [],
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (!subscription?.ldap) {
+      handlePopUpOpen("upgradePlan");
+      handlePopUpToggle("identityAuthMethod", false);
+    }
+  }, [subscription]);
+
+  const onFormSubmit = async ({
+    url,
+    bindDN,
+    bindPass,
+    searchBase,
+    searchFilter,
+    ldapCaCertificate,
+    allowedFields,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps
+  }: FormData) => {
+    try {
+      if (!identityId) return;
+
+      if (data) {
+        await updateMutateAsync({
+          organizationId: orgId,
+          identityId,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          searchFilter,
+          ldapCaCertificate,
+          allowedFields,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId,
+          url,
+          bindDN,
+          bindPass,
+          searchBase,
+          searchFilter,
+          ldapCaCertificate,
+          allowedFields,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch {
+      createNotification({
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
+        setTabValue(
+          [
+            "url",
+            "bindDN",
+            "bindPass",
+            "searchBase",
+            "searchFilter",
+            "accessTokenTTL",
+            "allowedFields",
+            "accessTokenMaxTTL",
+            "accessTokenNumUsesLimit"
+          ].includes(Object.keys(fields)[0])
+            ? IdentityFormTab.Configuration
+            : IdentityFormTab.Advanced
+        );
+      })}
+    >
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
+        <TabList>
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
+        </TabList>
+        <TabPanel value={IdentityFormTab.Configuration}>
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="url"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="LDAP URL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="ldaps://domain-or-ip:636" type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="bindDN"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Bind DN"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="cn=infisical,ou=Users,dc=example,dc=com" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="bindPass"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Bind Pass"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="********" type="password" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="searchBase"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Search Base / DN"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="ou=machines,dc=acme,dc=com" />
+              </FormControl>
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="searchFilter"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="Search Filter"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="(uid={{username}})" />
+              </FormControl>
+            )}
+          />
+
+          {allowedFieldsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`allowedFields.${index}.key`}
+                render={({ field, fieldState: { error } }) => {
+                  const isFirstField = index === 0;
+
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={isFirstField ? "Required Attributes" : undefined}
+                      icon={
+                        isFirstField ? (
+                          <Tooltip
+                            className="max-w-[420px]"
+                            content={
+                              <div className="max-h-[300px] space-y-4 overflow-y-auto text-sm">
+                                <p>
+                                  Specify the fields that the user must contain in their LDAP entry
+                                  in order to authenticate with this identity. If nothing is
+                                  specified, all users in the configured LDAP directory will be able
+                                  to authenticate.
+                                  <p className="mt-2">
+                                    You can specify multiple required attributes by separating them
+                                    with a comma.
+                                  </p>
+                                </p>
+                                <div className="space-y-2">
+                                  <p>Example:</p>
+                                  <p className="text-xs text-gray-400">
+                                    &apos;uid&apos; → &apos;user1,user2,user3&apos;
+                                    <br />
+                                    &apos;mail&apos; → &apos;user@example.com&apos;
+                                  </p>
+                                </div>
+
+                                <p>
+                                  The above example would allow users with the UID user1, user2, or
+                                  user3 to authenticate but only if their emails also match
+                                  user@example.com
+                                </p>
+                              </div>
+                            }
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                          </Tooltip>
+                        ) : undefined
+                      }
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="uid"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <Controller
+                control={control}
+                name={`allowedFields.${index}.value`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="userid1,userid2,userid3"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => removeAllowedField(index)}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() =>
+                appendAllowedField({
+                  key: "",
+                  value: ""
+                })
+              }
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add Required Attribute
+            </Button>
+          </div>
+
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                tooltipText="The lifetime for an acccess token in seconds. This value will be referenced at renewal time."
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <Controller
+            control={control}
+            name="ldapCaCertificate"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                isOptional
+                errorText={error?.message}
+                isError={Boolean(error)}
+                tooltipText="An optional PEM-encoded CA cert for the LDAP server. This is used by the TLS client for secure communication with the LDAP server."
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
+
+                          handlePopUpOpen("upgradePlan");
+                        }}
+                        placeholder="123.456.789.0"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => {
+                  if (subscription?.ipAllowlisting) {
+                    removeAccessTokenTrustedIp(index);
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {isUpdate ? "Update" : "Add"}
+        </Button>
+
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+        >
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/organization/AccessManagementPage/route.tsx

@@ -30,7 +30,7 @@ export const Route = createFileRoute(
         link: linkOptions({ to: "/" })
       },
       {
-        label: "access control"
+        label: "Access Control"
       }
     ]
   })

frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx

@@ -38,7 +38,7 @@ import { useGetUserWorkspaces } from "@app/hooks/api";
 import {
   eventToNameMap,
   secretEvents,
-  userAgentTTypeoNameMap
+  userAgentTypeToNameMap
 } from "@app/hooks/api/auditLogs/constants";
 import { EventType } from "@app/hooks/api/auditLogs/enums";
 import { UserAgentType } from "@app/hooks/api/auth/types";
@@ -47,7 +47,7 @@ import { LogFilterItem } from "./LogFilterItem";
 import { AuditLogFilterFormData, Presets } from "./types";
 
 const eventTypes = Object.entries(eventToNameMap).map(([value, label]) => ({ label, value }));
-const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label]) => ({
+const userAgentTypes = Object.entries(userAgentTypeToNameMap).map(([value, label]) => ({
   label,
   value
 }));

frontend/src/pages/organization/CertManagerSettingsPage/CertManagerSettingsPage.tsx

@@ -0,0 +1,20 @@
+import { Helmet } from "react-helmet";
+
+import { ProjectSettings } from "@app/components/projects/ProjectSettings";
+import { PageHeader } from "@app/components/v2";
+
+export const CertManagerSettingsPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>Cert Management Settings</title>
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader title="Cert Management Settings" />
+          <ProjectSettings />
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/organization/CertManagerSettingsPage/route.tsx

@@ -0,0 +1,26 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { CertManagerSettingsPage } from "./CertManagerSettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/settings"
+)({
+  component: CertManagerSettingsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "Cert Management",
+        link: linkOptions({ to: "/organization/cert-manager/overview" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
+});

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityProjectsSection/IdentityProjectRow.tsx

@@ -6,9 +6,9 @@ import { format } from "date-fns";
 
 import { createNotification } from "@app/components/notifications";
 import { IconButton, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { formatProjectRoleName } from "@app/helpers/roles";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { IdentityMembership } from "@app/hooks/api/identities/types";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 export enum TabSections {
@@ -26,15 +26,6 @@ type Props = {
   ) => void;
 };
 
-const formatRoleName = (role: string, customRoleName?: string) => {
-  if (role === ProjectMembershipRole.Custom) return customRoleName;
-  if (role === ProjectMembershipRole.Admin) return "Admin";
-  if (role === ProjectMembershipRole.Member) return "Developer";
-  if (role === ProjectMembershipRole.Viewer) return "Viewer";
-  if (role === ProjectMembershipRole.NoAccess) return "No Access";
-  return role;
-};
-
 export const IdentityProjectRow = ({
   membership: { id, createdAt, identity, project, roles },
   handlePopUpOpen
@@ -80,7 +71,7 @@ export const IdentityProjectRow = ({
       <Td>
         <Tag size="xs">{project.type}</Tag>
       </Td>
-      <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
+      <Td>{`${formatProjectRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>
       <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal.tsx

@@ -11,6 +11,7 @@ import {
   useDeleteIdentityGcpAuth,
   useDeleteIdentityJwtAuth,
   useDeleteIdentityKubernetesAuth,
+  useDeleteIdentityLdapAuth,
   useDeleteIdentityOidcAuth,
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth
@@ -22,6 +23,7 @@ import { ViewIdentityAzureAuthContent } from "./ViewIdentityAzureAuthContent";
 import { ViewIdentityGcpAuthContent } from "./ViewIdentityGcpAuthContent";
 import { ViewIdentityJwtAuthContent } from "./ViewIdentityJwtAuthContent";
 import { ViewIdentityKubernetesAuthContent } from "./ViewIdentityKubernetesAuthContent";
+import { ViewIdentityLdapAuthContent } from "./ViewIdentityLdapAuthContent";
 import { ViewIdentityOidcAuthContent } from "./ViewIdentityOidcAuthContent";
 import { ViewIdentityTokenAuthContent } from "./ViewIdentityTokenAuthContent";
 import { ViewIdentityUniversalAuthContent } from "./ViewIdentityUniversalAuthContent";
@@ -61,6 +63,7 @@ export const Content = ({
   const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
   const { mutateAsync: revokeOidcAuth } = useDeleteIdentityOidcAuth();
   const { mutateAsync: revokeJwtAuth } = useDeleteIdentityJwtAuth();
+  const { mutateAsync: revokeLdapAuth } = useDeleteIdentityLdapAuth();
 
   let Component: (props: ViewAuthMethodProps) => JSX.Element;
   let revokeMethod: (revokeOptions: TRevokeOptions) => Promise<any>;
@@ -100,6 +103,10 @@ export const Content = ({
       revokeMethod = revokeJwtAuth;
       Component = ViewIdentityJwtAuthContent;
       break;
+    case IdentityAuthMethod.LDAP_AUTH:
+      revokeMethod = revokeLdapAuth;
+      Component = ViewIdentityLdapAuthContent;
+      break;
     default:
       throw new Error(`Unhandled Auth Method: ${authMethod}`);
   }

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAwsAuthContent.tsx

@@ -47,10 +47,10 @@ export const ViewIdentityAwsAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAzureAuthContent.tsx

@@ -47,10 +47,10 @@ export const ViewIdentityAzureAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityGcpAuthContent.tsx

@@ -47,10 +47,10 @@ export const ViewIdentityGcpAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx

@@ -49,10 +49,10 @@ export const ViewIdentityJwtAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx

@@ -51,10 +51,10 @@ export const ViewIdentityKubernetesAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityLdapAuthContent.tsx

@@ -0,0 +1,103 @@
+import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { useGetIdentityLdapAuth } from "@app/hooks/api";
+import { IdentityLdapAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityLdapAuthForm";
+import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
+
+import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
+import { ViewAuthMethodProps } from "./types";
+
+export const ViewIdentityLdapAuthContent = ({
+  identityId,
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
+}: ViewAuthMethodProps) => {
+  const { data, isPending } = useGetIdentityLdapAuth(identityId);
+
+  if (isPending) {
+    return (
+      <div className="flex w-full items-center justify-center">
+        <Spinner className="text-mineshaft-400" />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <EmptyState icon={faBan} title="Could not find LDAP Auth associated with this Identity." />
+    );
+  }
+
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityLdapAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
+  return (
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="LDAP URL">{data.url}</IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Bind DN">{data.bindDN}</IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Bind Pass">
+        <Tooltip
+          side="right"
+          className="max-w-xl p-2"
+          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.bindPass}</p>}
+        >
+          <div className="w-min">
+            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+              <FontAwesomeIcon icon={faEye} />
+              <span>Reveal</span>
+            </Badge>
+          </div>
+        </Tooltip>
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Search Base / DN">
+        {data.searchBase}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Search Filter">{data.searchFilter}</IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="CA Certificate">
+        {data.ldapCaCertificate && (
+          <Tooltip
+            side="right"
+            className="max-w-xl p-2"
+            content={
+              <p className="break-words rounded bg-mineshaft-600 p-2">{data.ldapCaCertificate}</p>
+            }
+          >
+            <div className="w-min">
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faEye} />
+                <span>Reveal</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
+      </IdentityAuthFieldDisplay>
+    </ViewIdentityContentWrapper>
+  );
+};

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx

@@ -48,10 +48,10 @@ export const ViewIdentityOidcAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTokenAuthContent.tsx

@@ -50,10 +50,10 @@ export const ViewIdentityTokenAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx

@@ -62,10 +62,10 @@ export const ViewIdentityUniversalAuthContent = ({
       onEdit={() => handlePopUpOpen("identityAuthMethod")}
       onDelete={onDelete}
     >
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
         {data.accessTokenMaxTTL}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">

frontend/src/pages/organization/IdentityDetailsByIDPage/route.tsx

@@ -20,7 +20,7 @@ export const Route = createFileRoute(
         link: linkOptions({ to: "/organization/access-management" })
       },
       {
-        label: "identities"
+        label: "Identities"
       }
     ]
   })

frontend/src/pages/organization/KmsSettingsPage/KmsSettingsPage.tsx

@@ -0,0 +1,20 @@
+import { Helmet } from "react-helmet";
+
+import { ProjectSettings } from "@app/components/projects/ProjectSettings";
+import { PageHeader } from "@app/components/v2";
+
+export const KmsSettingsPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>KMS Settings</title>
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader title="KMS Settings" />
+          <ProjectSettings />
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/organization/KmsSettingsPage/route.tsx

@@ -0,0 +1,26 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { KmsSettingsPage } from "./KmsSettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/kms/settings"
+)({
+  component: KmsSettingsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "KMS",
+        link: linkOptions({ to: "/organization/kms/overview" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
+});

frontend/src/pages/organization/RoleByIDPage/components/RoleModal.tsx

@@ -117,12 +117,8 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
       });
 
       reset();
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text =
-        error?.response?.data?.message ??
-        `Failed to ${popUp?.role?.data ? "update" : "create"} role`;
+    } catch {
+      const text = `Failed to ${popUp?.role?.data ? "update" : "create"} role`;
 
       createNotification({
         text,

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

@@ -27,6 +27,7 @@ export const ProjectListToggle = ({ value, onChange }: Props) => {
         value={value}
         onValueChange={onChange}
         className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
+        dropdownContainerClassName="mt-10 ml-5"
       >
         <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
         <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>

frontend/src/pages/organization/SecretManagerSettingsPage/SecretManagerSettingsPage.tsx

@@ -0,0 +1,20 @@
+import { Helmet } from "react-helmet";
+
+import { ProjectSettings } from "@app/components/projects/ProjectSettings";
+import { PageHeader } from "@app/components/v2";
+
+export const SecretManagerSettingsPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>Secret Management Settings</title>
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader title="Secret Management Settings" />
+          <ProjectSettings />
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/organization/SecretManagerSettingsPage/route.tsx

@@ -0,0 +1,26 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { SecretManagerSettingsPage } from "./SecretManagerSettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-manager/settings"
+)({
+  component: SecretManagerSettingsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "Secret Management",
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
+});

frontend/src/pages/organization/SecretScanningPage/SecretScanningPage.tsx

@@ -108,7 +108,7 @@ export const SecretScanningPage = withPermission(
 
     const generateNewIntegrationSession = async () => {
       const session = await createNewIntegrationSession({ organizationId });
-      window.location.href = `https://github.com/apps/infisical-radar/installations/new?state=${session.sessionId}`;
+      window.location.href = `https://github.com/apps/${session.gitAppSlug}/installations/new?state=${session.sessionId}`;
     };
 
     return (

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useSearch } from "@tanstack/react-router";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { ROUTE_PATHS } from "@app/const/routes";
 
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
@@ -11,7 +12,6 @@ import { OrgAuthTab } from "../OrgAuthTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
 import { OrgWorkflowIntegrationTab } from "../OrgWorkflowIntegrationTab/OrgWorkflowIntegrationTab";
-import { ProjectTemplatesTab } from "../ProjectTemplatesTab";
 
 export const OrgTabGroup = () => {
   const search = useSearch({
@@ -28,7 +28,34 @@ export const OrgTabGroup = () => {
     },
     { name: "Audit Log Streams", key: "tag-audit-log-streams", component: AuditLogStreamsTab },
     { name: "Import", key: "tab-import", component: ImportTab },
-    { name: "Project Templates", key: "project-templates", component: ProjectTemplatesTab },
+    {
+      name: "Project Templates",
+      key: "project-templates",
+      // scott: temporary, remove once users have adjusted
+      // eslint-disable-next-line react/no-unstable-nested-components
+      component: () => (
+        <div>
+          <NoticeBannerV2
+            className="mx-auto mt-10 max-w-4xl"
+            title="Project Templates New Location"
+          >
+            <p className="text-sm text-bunker-200">
+              Project templates have been moved to the Feature Settings page, under the &#34;Project
+              Templates&#34; tab.
+            </p>
+            <p className="mt-2 text-sm text-bunker-200">
+              Project templates are now product-specific, and can be configured for each project
+              type.
+            </p>
+            <img
+              src="/images/project-templates/project-templates-new-location.png"
+              className="mt-4 w-full max-w-4xl rounded"
+              alt="Project Templates New Location"
+            />
+          </NoticeBannerV2>
+        </div>
+      )
+    },
     { name: "KMIP", key: "kmip", component: KmipTab }
   ];
 

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/ProjectTemplatesTab.tsx

@@ -1,9 +0,0 @@
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { withPermission } from "@app/hoc";
-
-import { ProjectTemplatesSection } from "./components";
-
-export const ProjectTemplatesTab = withPermission(() => <ProjectTemplatesSection />, {
-  action: OrgPermissionActions.Read,
-  subject: OrgPermissionSubjects.ProjectTemplates
-});

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/DeleteProjectTemplateModal.tsx

@@ -1,49 +0,0 @@
-import { createNotification } from "@app/components/notifications";
-import { DeleteActionModal } from "@app/components/v2";
-import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
-
-type Props = {
-  template?: TProjectTemplate;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-};
-
-export const DeleteProjectTemplateModal = ({ isOpen, onOpenChange, template }: Props) => {
-  const deleteTemplate = useDeleteProjectTemplate();
-
-  if (!template) return null;
-
-  const { id: templateId, name } = template;
-
-  const handleDeleteProjectTemplate = async () => {
-    try {
-      await deleteTemplate.mutateAsync({
-        templateId
-      });
-
-      createNotification({
-        text: "Successfully removed project template",
-        type: "success"
-      });
-
-      onOpenChange(false);
-    } catch (err) {
-      console.error(err);
-
-      createNotification({
-        text: "Failed remove project template",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <DeleteActionModal
-      isOpen={isOpen}
-      onChange={onOpenChange}
-      title={`Are you sure want to delete ${name}?`}
-      deleteKey="confirm"
-      onDeleteApproved={handleDeleteProjectTemplate}
-    />
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/EditProjectTemplateSection.tsx

@@ -1,55 +0,0 @@
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Button, EmptyState, Spinner } from "@app/components/v2";
-import {
-  InfisicalProjectTemplate,
-  TProjectTemplate,
-  useGetProjectTemplateById
-} from "@app/hooks/api/projectTemplates";
-
-import { EditProjectTemplate } from "./components";
-
-type Props = {
-  template: TProjectTemplate;
-  onBack: () => void;
-};
-
-export const EditProjectTemplateSection = ({ template, onBack }: Props) => {
-  const isInfisicalTemplate = Object.values(InfisicalProjectTemplate).includes(
-    template.name as InfisicalProjectTemplate
-  );
-
-  const { data: projectTemplate, isPending } = useGetProjectTemplateById(template.id, {
-    initialData: template,
-    enabled: !isInfisicalTemplate
-  });
-
-  return (
-    <div>
-      <Button
-        variant="link"
-        type="submit"
-        leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-        onClick={onBack}
-        className="mb-4"
-      >
-        Back to Templates
-      </Button>
-      {/* eslint-disable-next-line no-nested-ternary */}
-      {isPending ? (
-        <div className="flex h-[60vh] w-full items-center justify-center p-24">
-          <Spinner />
-        </div>
-      ) : projectTemplate ? (
-        <EditProjectTemplate
-          isInfisicalTemplate={isInfisicalTemplate}
-          projectTemplate={projectTemplate}
-          onBack={onBack}
-        />
-      ) : (
-        <EmptyState title="Error: Unable to find project template." className="py-12" />
-      )}
-    </div>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx

@@ -1,119 +0,0 @@
-import { faPencil, faTrash } 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, DeleteActionModal } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
-
-import { ProjectTemplateDetailsModal } from "../../ProjectTemplateDetailsModal";
-import { ProjectTemplateEnvironmentsForm } from "./ProjectTemplateEnvironmentsForm";
-import { ProjectTemplateRolesSection } from "./ProjectTemplateRolesSection";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  onBack: () => void;
-  isInfisicalTemplate: boolean;
-};
-
-export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBack }: Props) => {
-  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "removeTemplate",
-    "editDetails"
-  ] as const);
-
-  const { id: templateId, name, description } = projectTemplate;
-
-  const deleteProjectTemplate = useDeleteProjectTemplate();
-
-  const handleRemoveTemplate = async () => {
-    try {
-      await deleteProjectTemplate.mutateAsync({
-        templateId
-      });
-      createNotification({
-        text: "Successfully removed project template",
-        type: "success"
-      });
-      onBack();
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to remove project template",
-        type: "error"
-      });
-    }
-    handlePopUpClose("removeTemplate");
-  };
-
-  return (
-    <>
-      <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
-        <div className="flex-col">
-          <h3 className="text-xl font-semibold">{name}</h3>
-          <h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2>
-        </div>
-        {!isInfisicalTemplate && (
-          <div className="flex gap-2">
-            <OrgPermissionCan
-              I={OrgPermissionActions.Edit}
-              a={OrgPermissionSubjects.ProjectTemplates}
-            >
-              {(isAllowed) => (
-                <Button
-                  isDisabled={!isAllowed}
-                  leftIcon={<FontAwesomeIcon icon={faPencil} />}
-                  size="xs"
-                  colorSchema="secondary"
-                  onClick={() => handlePopUpOpen("editDetails")}
-                >
-                  Edit Details
-                </Button>
-              )}
-            </OrgPermissionCan>
-            <OrgPermissionCan
-              I={OrgPermissionActions.Delete}
-              a={OrgPermissionSubjects.ProjectTemplates}
-            >
-              {(isAllowed) => (
-                <Button
-                  isDisabled={!isAllowed}
-                  onClick={() => {
-                    handlePopUpOpen("removeTemplate");
-                  }}
-                  leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                  size="xs"
-                  colorSchema="danger"
-                >
-                  Delete Template
-                </Button>
-              )}
-            </OrgPermissionCan>
-          </div>
-        )}
-      </div>
-      <ProjectTemplateEnvironmentsForm
-        isInfisicalTemplate={isInfisicalTemplate}
-        projectTemplate={projectTemplate}
-      />
-      <ProjectTemplateRolesSection
-        isInfisicalTemplate={isInfisicalTemplate}
-        projectTemplate={projectTemplate}
-      />
-      <ProjectTemplateDetailsModal
-        isOpen={popUp.editDetails.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("editDetails", isOpen)}
-        projectTemplate={projectTemplate}
-      />
-      <DeleteActionModal
-        isOpen={popUp.removeTemplate.isOpen}
-        title={`Are you sure want to delete ${projectTemplate.name}?`}
-        deleteKey="confirm"
-        onChange={(isOpen) => handlePopUpToggle("removeTemplate", isOpen)}
-        onDeleteApproved={handleRemoveTemplate}
-      />
-    </>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEditRoleForm.tsx

@@ -1,211 +0,0 @@
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import { faChevronLeft, faPlus, faSave } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { twMerge } from "tailwind-merge";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Modal, ModalContent, ModalTrigger } from "@app/components/v2";
-import { ProjectPermissionSub } from "@app/context";
-import { isCustomProjectRole } from "@app/helpers/roles";
-import { usePopUp } from "@app/hooks";
-import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { slugSchema } from "@app/lib/schemas";
-import { GeneralPermissionPolicies } from "@app/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies";
-import { NewPermissionRule } from "@app/pages/project/RoleDetailsBySlugPage/components/NewPermissionRule";
-import { PermissionEmptyState } from "@app/pages/project/RoleDetailsBySlugPage/components/PermissionEmptyState";
-import {
-  formRolePermission2API,
-  PROJECT_PERMISSION_OBJECT,
-  projectRoleFormSchema,
-  rolePermission2Form
-} from "@app/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils";
-import { renderConditionalComponents } from "@app/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  role?: TProjectTemplate["roles"][number];
-  onGoBack: () => void;
-  isDisabled?: boolean;
-};
-
-const formSchema = z.object({
-  slug: slugSchema(),
-  name: z.string().trim().min(1),
-  permissions: projectRoleFormSchema.shape.permissions
-});
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const ProjectTemplateEditRoleForm = ({
-  onGoBack,
-  projectTemplate,
-  role,
-  isDisabled
-}: Props) => {
-  const { popUp, handlePopUpToggle } = usePopUp(["createPolicy"] as const);
-
-  const formMethods = useForm<TFormSchema>({
-    values: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : undefined,
-    resolver: zodResolver(formSchema)
-  });
-
-  const {
-    handleSubmit,
-    control,
-    formState: { isDirty, isSubmitting }
-  } = formMethods;
-
-  const updateProjectTemplate = useUpdateProjectTemplate();
-
-  const onSubmit = async (form: TFormSchema) => {
-    try {
-      await updateProjectTemplate.mutateAsync({
-        templateId: projectTemplate.id,
-        roles: [
-          ...projectTemplate.roles.filter(
-            (r) => r.slug !== role?.slug && isCustomProjectRole(r.slug) // filter out default roles as well
-          ),
-          {
-            ...form,
-            permissions: formRolePermission2API(form.permissions)
-          }
-        ]
-      });
-      onGoBack();
-      createNotification({
-        text: "Template roles successfully updated",
-        type: "success"
-      });
-    } catch (e: any) {
-      console.error(e);
-      createNotification({
-        text: "Failed to update template roles",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
-      <FormProvider {...formMethods}>
-        <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
-          <Button
-            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            className="text-base font-semibold text-mineshaft-200"
-            variant="link"
-            onClick={onGoBack}
-          >
-            {isDisabled ? "Back" : "Cancel"}
-          </Button>
-          {!isDisabled && (
-            <div className="flex items-center space-x-4">
-              {isDirty && (
-                <Button
-                  className="mr-4 text-mineshaft-300"
-                  variant="link"
-                  isDisabled={isSubmitting}
-                  isLoading={isSubmitting}
-                  onClick={onGoBack}
-                >
-                  Discard
-                </Button>
-              )}
-              <div className="flex items-center">
-                <Button
-                  variant="outline_bg"
-                  type="submit"
-                  className={twMerge("h-10 rounded-r-none", isDirty && "bg-primary text-black")}
-                  isDisabled={isSubmitting || !isDirty || isDisabled}
-                  isLoading={isSubmitting}
-                  leftIcon={<FontAwesomeIcon icon={faSave} />}
-                >
-                  Save
-                </Button>
-                <Modal
-                  isOpen={popUp.createPolicy.isOpen}
-                  onOpenChange={(isOpen) => handlePopUpToggle("createPolicy", isOpen)}
-                >
-                  <ModalTrigger asChild>
-                    <Button
-                      className="h-10 rounded-l-none"
-                      variant="outline_bg"
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      isDisabled={isDisabled}
-                    >
-                      New Policy
-                    </Button>
-                  </ModalTrigger>
-                  <ModalContent
-                    title="New Policy"
-                    subTitle="Policies grant additional permissions."
-                  >
-                    <NewPermissionRule onClose={() => handlePopUpToggle("createPolicy")} />
-                  </ModalContent>
-                </Modal>
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
-          {isDisabled ? (
-            <div className="flex flex-col">
-              <span className="text-lg font-semibold">{role?.name}</span>
-              <span className="text-mineshaft-400">{role?.slug}</span>
-            </div>
-          ) : (
-            <div className="flex w-full gap-2">
-              <Controller
-                control={control}
-                name="name"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    label="Name"
-                    className="mb-0 flex-1"
-                  >
-                    <Input {...field} autoFocus placeholder="Role name..." />
-                  </FormControl>
-                )}
-              />
-              <Controller
-                control={control}
-                name="slug"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    label="Slug"
-                    className="mb-0 flex-1"
-                  >
-                    <Input {...field} placeholder="Role slug..." />
-                  </FormControl>
-                )}
-              />
-            </div>
-          )}
-        </div>
-        <div className="p-4">
-          <div className="mb-2 text-lg">Policies</div>
-          <PermissionEmptyState />
-          {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
-            <GeneralPermissionPolicies
-              subject={subject}
-              actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-              title={PROJECT_PERMISSION_OBJECT[subject].title}
-              key={`project-permission-${subject}`}
-              isDisabled={isDisabled}
-            >
-              {renderConditionalComponents(subject, isDisabled)}
-            </GeneralPermissionPolicies>
-          ))}
-        </div>
-      </FormProvider>
-    </form>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx

@@ -1,281 +0,0 @@
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { faArrowDown, faArrowUp, faPlus, faSave, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Table,
-  TableContainer,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { slugSchema } from "@app/lib/schemas";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  isInfisicalTemplate: boolean;
-};
-
-const formSchema = z.object({
-  environments: z
-    .object({
-      name: z.string().trim().min(1),
-      slug: slugSchema({ min: 1, max: 32 })
-    })
-    .array()
-});
-
-type TFormSchema = z.infer<typeof formSchema>;
-
-export const ProjectTemplateEnvironmentsForm = ({
-  projectTemplate,
-  isInfisicalTemplate
-}: Props) => {
-  const {
-    control,
-    handleSubmit,
-    formState: { isDirty, errors },
-    reset
-  } = useForm<TFormSchema>({
-    defaultValues: {
-      environments: projectTemplate.environments
-    },
-    resolver: zodResolver(formSchema)
-  });
-
-  const {
-    fields: environments,
-    move,
-    remove,
-    append
-  } = useFieldArray({ control, name: "environments" });
-
-  const updateProjectTemplate = useUpdateProjectTemplate();
-
-  const onFormSubmit = async (form: TFormSchema) => {
-    try {
-      const { environments: updatedEnvs } = await updateProjectTemplate.mutateAsync({
-        environments: form.environments.map((env, index) => ({
-          ...env,
-          position: index + 1
-        })),
-        templateId: projectTemplate.id
-      });
-
-      reset({ environments: updatedEnvs });
-
-      createNotification({
-        text: "Project template updated successfully",
-        type: "success"
-      });
-    } catch (e: any) {
-      console.error(e);
-      createNotification({
-        text: e.message ?? "Failed to update project template",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
-      <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <div>
-          <h2 className="text-lg font-semibold">Project Environments</h2>
-          {!isInfisicalTemplate && (
-            <p className="text-sm text-mineshaft-400">
-              Add, rename, remove and reorder environments for this project template
-            </p>
-          )}
-        </div>
-        {!isInfisicalTemplate && (
-          <OrgPermissionCan
-            I={OrgPermissionActions.Edit}
-            a={OrgPermissionSubjects.ProjectTemplates}
-          >
-            {(isAllowed) => (
-              <Button
-                type="submit"
-                colorSchema="primary"
-                className="ml-auto w-40"
-                variant={isDirty ? "solid" : "outline_bg"}
-                leftIcon={<FontAwesomeIcon icon={faSave} />}
-                isDisabled={!isAllowed || !isDirty}
-              >
-                {isDirty ? "Save" : "No"} Changes
-              </Button>
-            )}
-          </OrgPermissionCan>
-        )}
-      </div>
-      {errors.environments && (
-        <span className="my-4 text-sm text-red">{errors.environments.message}</span>
-      )}
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Friendly Name</Th>
-              <Th>Slug</Th>
-              {!isInfisicalTemplate && (
-                <Th>
-                  <div className="flex w-full justify-end normal-case">
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <Button
-                          onClick={() => append({ name: "", slug: "" })}
-                          colorSchema="secondary"
-                          className="ml-auto"
-                          variant="solid"
-                          size="xs"
-                          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                          isDisabled={!isAllowed}
-                        >
-                          Add Environment
-                        </Button>
-                      )}
-                    </OrgPermissionCan>
-                  </div>
-                </Th>
-              )}
-            </Tr>
-          </THead>
-          <TBody>
-            {environments.map(({ id, name, slug }, pos) => (
-              <Tr key={id}>
-                <Td>
-                  {isInfisicalTemplate ? (
-                    name
-                  ) : (
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <Controller
-                          control={control}
-                          name={`environments.${pos}.name`}
-                          render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                              isError={Boolean(error?.message)}
-                              errorText={error?.message}
-                              className="mb-0 flex-grow"
-                            >
-                              <Input isDisabled={!isAllowed} {...field} placeholder="Name..." />
-                            </FormControl>
-                          )}
-                        />
-                      )}
-                    </OrgPermissionCan>
-                  )}
-                </Td>
-                <Td>
-                  {isInfisicalTemplate ? (
-                    slug
-                  ) : (
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <Controller
-                          control={control}
-                          name={`environments.${pos}.slug`}
-                          render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                              isError={Boolean(error?.message)}
-                              errorText={error?.message}
-                              className="mb-0 flex-grow"
-                            >
-                              <Input isDisabled={!isAllowed} {...field} placeholder="Slug..." />
-                            </FormControl>
-                          )}
-                        />
-                      )}
-                    </OrgPermissionCan>
-                  )}
-                </Td>
-                {!isInfisicalTemplate && (
-                  <Td className="flex items-center justify-end">
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <IconButton
-                          className={`mr-3 py-2 ${
-                            pos === environments.length - 1 ? "pointer-events-none opacity-50" : ""
-                          }`}
-                          onClick={() => move(pos, pos + 1)}
-                          colorSchema="primary"
-                          variant="plain"
-                          ariaLabel="Increase position"
-                          isDisabled={pos === environments.length - 1 || !isAllowed}
-                        >
-                          <FontAwesomeIcon icon={faArrowDown} />
-                        </IconButton>
-                      )}
-                    </OrgPermissionCan>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <IconButton
-                          className={`mr-3 py-2 ${
-                            pos === 0 ? "pointer-events-none opacity-50" : ""
-                          }`}
-                          onClick={() => move(pos, pos - 1)}
-                          colorSchema="primary"
-                          variant="plain"
-                          ariaLabel="Decrease position"
-                          isDisabled={pos === 0 || !isAllowed}
-                        >
-                          <FontAwesomeIcon icon={faArrowUp} />
-                        </IconButton>
-                      )}
-                    </OrgPermissionCan>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.ProjectTemplates}
-                    >
-                      {(isAllowed) => (
-                        <IconButton
-                          onClick={() => remove(pos)}
-                          colorSchema="danger"
-                          variant="plain"
-                          ariaLabel="Remove environment"
-                          isDisabled={!isAllowed || environments.length === 1}
-                        >
-                          <FontAwesomeIcon icon={faTrash} />
-                        </IconButton>
-                      )}
-                    </OrgPermissionCan>
-                  </Td>
-                )}
-              </Tr>
-            ))}
-          </TBody>
-        </Table>
-      </TableContainer>
-    </form>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateRolesSection.tsx

@@ -1,223 +0,0 @@
-import { faPlus, faTrash, faUnlock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { AnimatePresence, motion } from "framer-motion";
-
-import { createNotification } from "@app/components/notifications";
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  IconButton,
-  Table,
-  TableContainer,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
-import { isCustomProjectRole } from "@app/helpers/roles";
-import { usePopUp } from "@app/hooks";
-import { TProjectTemplate, useUpdateProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { TProjectRole } from "@app/hooks/api/roles/types";
-
-import { ProjectTemplateEditRoleForm } from "./ProjectTemplateEditRoleForm";
-
-type Props = {
-  projectTemplate: TProjectTemplate;
-  isInfisicalTemplate: boolean;
-};
-
-export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTemplate }: Props) => {
-  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
-    "removeRole",
-    "editRole"
-  ] as const);
-
-  const { permission } = useOrgPermission();
-
-  const { roles } = projectTemplate;
-
-  const updateProjectTemplate = useUpdateProjectTemplate();
-
-  const handleRemoveRole = async (slug: string) => {
-    try {
-      await updateProjectTemplate.mutateAsync({
-        templateId: projectTemplate.id,
-        roles: projectTemplate.roles.filter(
-          (role) => role.slug !== slug && isCustomProjectRole(role.slug) // filter out default roles as well
-        )
-      });
-
-      createNotification({
-        text: "Successfully removed role from template",
-        type: "success"
-      });
-      handlePopUpClose("removeRole");
-    } catch (e) {
-      console.error(e);
-      createNotification({
-        text: "Error removing role from template",
-        type: "error"
-      });
-    }
-  };
-
-  const editRole = popUp?.editRole?.data as TProjectRole;
-  const roleToDelete = popUp?.removeRole?.data as TProjectRole;
-
-  return (
-    <div className="relative">
-      <AnimatePresence>
-        {popUp?.editRole.isOpen ? (
-          <motion.div
-            key="edit-role"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
-          >
-            <ProjectTemplateEditRoleForm
-              onGoBack={() => handlePopUpClose("editRole")}
-              projectTemplate={projectTemplate}
-              role={editRole}
-              isDisabled={
-                permission.cannot(
-                  OrgPermissionActions.Edit,
-                  OrgPermissionSubjects.ProjectTemplates
-                ) ||
-                (editRole && !isCustomProjectRole(editRole.slug))
-              }
-            />
-            <div className="h-4 w-full" />
-          </motion.div>
-        ) : (
-          <motion.div
-            key="role-list"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 0 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: -30 }}
-            className="absolute w-full"
-          >
-            <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-              <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-                <div>
-                  <h2 className="text-lg font-semibold">Project Roles</h2>
-                  <p className="text-sm text-mineshaft-400">
-                    {isInfisicalTemplate
-                      ? "Click a role to view the associated permissions"
-                      : "Add, edit and remove roles for this project template"}
-                  </p>
-                </div>
-                {!isInfisicalTemplate && (
-                  <OrgPermissionCan
-                    I={OrgPermissionActions.Edit}
-                    a={OrgPermissionSubjects.ProjectTemplates}
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        onClick={() => {
-                          handlePopUpOpen("editRole");
-                        }}
-                        colorSchema="primary"
-                        className="ml-auto"
-                        variant="outline_bg"
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        isDisabled={!isAllowed}
-                      >
-                        Add Role
-                      </Button>
-                    )}
-                  </OrgPermissionCan>
-                )}
-              </div>
-              <div className="py-4">
-                <TableContainer>
-                  <Table>
-                    <THead>
-                      <Tr>
-                        <Th>Name</Th>
-                        <Th>Slug</Th>
-                        <Th className="w-5" />
-                      </Tr>
-                    </THead>
-                    <TBody>
-                      {roles.length ? (
-                        roles.map((role) => {
-                          return (
-                            <Tr
-                              key={role.slug}
-                              className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
-                              role="button"
-                              tabIndex={0}
-                              onKeyDown={(evt) => {
-                                if (evt.key === "Enter") {
-                                  handlePopUpOpen("editRole", role);
-                                }
-                              }}
-                              onClick={() => handlePopUpOpen("editRole", role)}
-                            >
-                              <Td>{role.name}</Td>
-                              <Td>{role.slug}</Td>
-                              <Td>
-                                {isCustomProjectRole(role.slug) && (
-                                  <div className="flex space-x-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                    <OrgPermissionCan
-                                      I={OrgPermissionActions.Edit}
-                                      a={OrgPermissionSubjects.ProjectTemplates}
-                                      renderTooltip
-                                      allowedLabel="Remove Role"
-                                    >
-                                      {(isAllowed) => (
-                                        <IconButton
-                                          colorSchema="danger"
-                                          ariaLabel="delete-icon"
-                                          variant="plain"
-                                          className="group relative"
-                                          isDisabled={!isAllowed}
-                                          onClick={(e) => {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            handlePopUpOpen("removeRole", role);
-                                          }}
-                                        >
-                                          <FontAwesomeIcon icon={faTrash} />
-                                        </IconButton>
-                                      )}
-                                    </OrgPermissionCan>
-                                  </div>
-                                )}
-                              </Td>
-                            </Tr>
-                          );
-                        })
-                      ) : (
-                        <Tr>
-                          <Td colSpan={2}>
-                            <EmptyState title="No roles assigned to template" icon={faUnlock} />
-                          </Td>
-                        </Tr>
-                      )}
-                    </TBody>
-                  </Table>
-                </TableContainer>
-              </div>
-              <DeleteActionModal
-                isOpen={popUp.removeRole.isOpen}
-                deleteKey="remove"
-                title={`Are you sure you want to remove the role ${roleToDelete?.slug}?`}
-                onChange={(isOpen) => handlePopUpToggle("removeRole", isOpen)}
-                onDeleteApproved={() => handleRemoveRole(roleToDelete?.slug)}
-              />
-            </div>
-            <div className="h-4 w-full" />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/index.tsx

@@ -1 +0,0 @@
-export * from "./EditProjectTemplate";

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/index.tsx

@@ -1 +0,0 @@
-export * from "./EditProjectTemplateSection";

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplateDetailsModal.tsx

@@ -1,143 +0,0 @@
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  Input,
-  Modal,
-  ModalClose,
-  ModalContent,
-  TextArea
-} from "@app/components/v2";
-import {
-  TProjectTemplate,
-  useCreateProjectTemplate,
-  useUpdateProjectTemplate
-} from "@app/hooks/api/projectTemplates";
-import { slugSchema } from "@app/lib/schemas";
-
-const formSchema = z.object({
-  name: slugSchema({ min: 1, max: 32, field: "Name" }),
-  description: z.string().max(500).optional()
-});
-
-export type FormData = z.infer<typeof formSchema>;
-
-type Props = {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onComplete?: (template: TProjectTemplate) => void;
-  projectTemplate?: TProjectTemplate;
-};
-
-type FormProps = {
-  projectTemplate?: TProjectTemplate;
-  onComplete: (template: TProjectTemplate) => void;
-};
-
-const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
-  const createProjectTemplate = useCreateProjectTemplate();
-  const updateProjectTemplate = useUpdateProjectTemplate();
-
-  const {
-    handleSubmit,
-    register,
-    formState: { isSubmitting, errors }
-  } = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: projectTemplate?.name,
-      description: projectTemplate?.description
-    }
-  });
-
-  const onFormSubmit = async (data: FormData) => {
-    const mutation = projectTemplate
-      ? updateProjectTemplate.mutateAsync({ templateId: projectTemplate.id, ...data })
-      : createProjectTemplate.mutateAsync(data);
-    try {
-      const template = await mutation;
-      createNotification({
-        text: `Successfully ${
-          projectTemplate ? "updated template details" : "created project template"
-        }`,
-        type: "success"
-      });
-
-      onComplete(template);
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: `Failed to ${
-          projectTemplate ? "update template details" : "create project template"
-        }`,
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
-      <FormControl
-        helperText="Name must be slug-friendly"
-        errorText={errors.name?.message}
-        isError={Boolean(errors.name?.message)}
-        label="Name"
-      >
-        <Input autoFocus placeholder="my-project-template" {...register("name")} />
-      </FormControl>
-      <FormControl
-        label="Description (optional)"
-        errorText={errors.description?.message}
-        isError={Boolean(errors.description?.message)}
-      >
-        <TextArea
-          className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
-          {...register("description")}
-        />
-      </FormControl>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {projectTemplate ? "Update" : "Add"} Template
-        </Button>
-        <ModalClose asChild>
-          <Button colorSchema="secondary" variant="plain">
-            Cancel
-          </Button>
-        </ModalClose>
-      </div>
-    </form>
-  );
-};
-
-export const ProjectTemplateDetailsModal = ({
-  isOpen,
-  onOpenChange,
-  projectTemplate,
-  onComplete
-}: Props) => {
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent
-        title={projectTemplate ? "Edit Project Template Details" : "Create Project Template"}
-      >
-        <ProjectTemplateForm
-          projectTemplate={projectTemplate}
-          onComplete={(template) => {
-            if (onComplete) onComplete(template);
-            onOpenChange(false);
-          }}
-        />
-      </ModalContent>
-    </Modal>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesSection.tsx

@@ -1,117 +0,0 @@
-import { useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { AnimatePresence, motion } from "framer-motion";
-
-import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { OrgPermissionCan } from "@app/components/permissions";
-import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { TProjectTemplate } from "@app/hooks/api/projectTemplates";
-import { usePopUp } from "@app/hooks/usePopUp";
-
-import { EditProjectTemplateSection } from "./EditProjectTemplateSection";
-import { ProjectTemplateDetailsModal } from "./ProjectTemplateDetailsModal";
-import { ProjectTemplatesTable } from "./ProjectTemplatesTable";
-
-export const ProjectTemplatesSection = () => {
-  const { subscription } = useSubscription();
-  const [editTemplate, setEditTemplate] = useState<TProjectTemplate | null>(null);
-
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-    "upgradePlan",
-    "addTemplate"
-  ] as const);
-
-  return (
-    <div className="relative">
-      <AnimatePresence>
-        {editTemplate ? (
-          <motion.div
-            key="edit-project-template"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
-          >
-            <EditProjectTemplateSection
-              template={editTemplate}
-              onBack={() => setEditTemplate(null)}
-            />
-          </motion.div>
-        ) : (
-          <motion.div
-            key="project-templates-list"
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-            className="absolute min-h-[10rem] w-full"
-          >
-            <div>
-              <p className="mb-6 text-bunker-300">
-                Create and configure templates with predefined roles and environments to streamline
-                project setup
-              </p>
-              <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-                <div className="mb-4 flex items-start">
-                  <p className="text-xl font-semibold text-mineshaft-100">Project Templates</p>
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://infisical.com/docs/documentation/platform/project-templates"
-                  >
-                    <div className="ml-2 mt-[0.32rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                      <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                      <span>Docs</span>
-                      <FontAwesomeIcon
-                        icon={faArrowUpRightFromSquare}
-                        className="mb-[0.07rem] ml-1.5 text-[10px]"
-                      />
-                    </div>
-                  </a>
-                  <OrgPermissionCan
-                    I={OrgPermissionActions.Create}
-                    a={OrgPermissionSubjects.ProjectTemplates}
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        colorSchema="secondary"
-                        type="submit"
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        onClick={() => {
-                          if (!subscription?.projectTemplates) {
-                            handlePopUpOpen("upgradePlan");
-                            return;
-                          }
-
-                          handlePopUpOpen("addTemplate");
-                        }}
-                        isDisabled={!isAllowed}
-                        className="ml-auto"
-                      >
-                        Add Template
-                      </Button>
-                    )}
-                  </OrgPermissionCan>
-                </div>
-                <ProjectTemplatesTable onEdit={setEditTemplate} />
-                <ProjectTemplateDetailsModal
-                  onComplete={(template) => setEditTemplate(template)}
-                  isOpen={popUp.addTemplate.isOpen}
-                  onOpenChange={(isOpen) => handlePopUpToggle("addTemplate", isOpen)}
-                />
-                <UpgradePlanModal
-                  isOpen={popUp.upgradePlan.isOpen}
-                  onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                  text="You can create project templates if you switch to Infisical's Enterprise plan."
-                />
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx

@@ -1,191 +0,0 @@
-import { useMemo, useState } from "react";
-import {
-  faCircleInfo,
-  faClone,
-  faMagnifyingGlass,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { OrgPermissionCan } from "@app/components/permissions";
-import {
-  EmptyState,
-  IconButton,
-  Input,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr
-} from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { usePopUp } from "@app/hooks";
-import { TProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
-
-import { DeleteProjectTemplateModal } from "./DeleteProjectTemplateModal";
-
-type Props = {
-  onEdit: (projectTemplate: TProjectTemplate) => void;
-};
-
-export const ProjectTemplatesTable = ({ onEdit }: Props) => {
-  const { subscription } = useSubscription();
-
-  const { isPending, data: projectTemplates = [] } = useListProjectTemplates({
-    enabled: subscription?.projectTemplates
-  });
-  const [search, setSearch] = useState("");
-
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteTemplate"] as const);
-
-  const filteredTemplates = useMemo(
-    () =>
-      projectTemplates?.filter((template) =>
-        template.name.toLowerCase().includes(search.toLowerCase().trim())
-      ) ?? [],
-    [search, projectTemplates]
-  );
-
-  return (
-    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search templates..."
-      />
-      <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Name</Th>
-              <Th>Roles</Th>
-              <Th>Environments</Th>
-              <Th />
-            </Tr>
-          </THead>
-          <TBody>
-            {isPending && (
-              <TableSkeleton
-                innerKey="project-templates-table"
-                columns={4}
-                key="project-templates"
-              />
-            )}
-            {filteredTemplates.map((template) => {
-              const { id, name, roles, environments, description } = template;
-              return (
-                <Tr
-                  onClick={() => onEdit(template)}
-                  className="cursor-pointer hover:bg-mineshaft-700"
-                  key={id}
-                >
-                  <Td>
-                    {name}
-                    {description && (
-                      <Tooltip content={description}>
-                        <FontAwesomeIcon
-                          size="sm"
-                          className="ml-2 text-mineshaft-400"
-                          icon={faCircleInfo}
-                        />
-                      </Tooltip>
-                    )}
-                  </Td>
-                  <Td className="pl-8">
-                    {roles.length}
-                    {roles.length > 0 && (
-                      <Tooltip
-                        content={
-                          <ul className="ml-2 list-disc">
-                            {roles.map((role) => (
-                              <li key={role.name}>{role.name}</li>
-                            ))}
-                          </ul>
-                        }
-                      >
-                        <FontAwesomeIcon
-                          size="sm"
-                          className="ml-2 text-mineshaft-400"
-                          icon={faCircleInfo}
-                        />
-                      </Tooltip>
-                    )}
-                  </Td>
-                  <Td className="pl-14">
-                    {environments.length}
-                    {environments.length > 0 && (
-                      <Tooltip
-                        content={
-                          <ul className="ml-2 list-disc">
-                            {environments
-                              .sort((a, b) => (a.position > b.position ? 1 : -1))
-                              .map((env) => (
-                                <li key={env.slug}>{env.name}</li>
-                              ))}
-                          </ul>
-                        }
-                      >
-                        <FontAwesomeIcon
-                          size="sm"
-                          className="ml-2 text-mineshaft-400"
-                          icon={faCircleInfo}
-                        />
-                      </Tooltip>
-                    )}
-                  </Td>
-                  <Td className="w-5">
-                    {name !== "default" && (
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Delete}
-                        a={OrgPermissionSubjects.ProjectTemplates}
-                      >
-                        {(isAllowed) => (
-                          <IconButton
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handlePopUpOpen("deleteTemplate", template);
-                            }}
-                            variant="plain"
-                            colorSchema="danger"
-                            ariaLabel="Delete template"
-                            isDisabled={!isAllowed}
-                          >
-                            <FontAwesomeIcon icon={faTrash} />
-                          </IconButton>
-                        )}
-                      </OrgPermissionCan>
-                    )}
-                  </Td>
-                </Tr>
-              );
-            })}
-            {!isPending && filteredTemplates?.length === 0 && (
-              <Tr>
-                <Td colSpan={5}>
-                  <EmptyState
-                    title={
-                      search.trim()
-                        ? "No project templates match search"
-                        : "No project templates found"
-                    }
-                    icon={faClone}
-                  />
-                </Td>
-              </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <DeleteProjectTemplateModal
-        isOpen={popUp.deleteTemplate.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("deleteTemplate", isOpen)}
-        template={popUp.deleteTemplate.data}
-      />
-    </div>
-  );
-};

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/components/index.tsx

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

frontend/src/pages/organization/SettingsPage/components/ProjectTemplatesTab/index.tsx

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

frontend/src/pages/organization/SshSettingsPage/SshSettingsPage.tsx

@@ -0,0 +1,20 @@
+import { Helmet } from "react-helmet";
+
+import { ProjectSettings } from "@app/components/projects/ProjectSettings";
+import { PageHeader } from "@app/components/v2";
+
+export const SshSettingsPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>SSH Settings</title>
+      </Helmet>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader title="SSH Settings" />
+          <ProjectSettings />
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/pages/organization/SshSettingsPage/route.tsx

@@ -0,0 +1,26 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { SshSettingsPage } from "./SshSettingsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/ssh/settings"
+)({
+  component: SshSettingsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "SSH",
+        link: linkOptions({ to: "/organization/ssh/overview" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
+});

frontend/src/pages/organization/UserDetailsByIDPage/components/UserProjectsSection/UserProjectRow.tsx

@@ -5,8 +5,8 @@ import { useNavigate } from "@tanstack/react-router";
 
 import { createNotification } from "@app/components/notifications";
 import { IconButton, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { formatProjectRoleName } from "@app/helpers/roles";
 import { useGetUserWorkspaces } from "@app/hooks/api";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { TWorkspaceUser } from "@app/hooks/api/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 import { OrgAccessControlTabSections } from "@app/types/org";
@@ -19,15 +19,6 @@ type Props = {
   ) => void;
 };
 
-const formatRoleName = (role: string, customRoleName?: string) => {
-  if (role === ProjectMembershipRole.Custom) return customRoleName;
-  if (role === ProjectMembershipRole.Admin) return "Admin";
-  if (role === ProjectMembershipRole.Member) return "Developer";
-  if (role === ProjectMembershipRole.Viewer) return "Viewer";
-  if (role === ProjectMembershipRole.NoAccess) return "No Access";
-  return role;
-};
-
 export const UserProjectRow = ({
   membership: { id, project, user, roles },
   handlePopUpOpen
@@ -73,7 +64,7 @@ export const UserProjectRow = ({
       <Td>
         <Tag size="xs">{project.type}</Tag>
       </Td>
-      <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
+      <Td>{`${formatProjectRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>
       <Td>