Merge branch 'main' into feat/assume-role

2026-10-15 05:19:49 +00:00 · 2025-04-28 06:33:26 -07:00
parent 7b42f666f9 8a0cfa34d2
commit e9aa8b317b
410 changed files with 8559 additions and 1184 deletions
@@ -0,0 +1,29 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { PageHeader } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { PkiAlertsSection } from "./components";
+
+export const AlertingPage = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Alerting" })}</title>
+      </Helmet>
+      <div className="mx-auto mb-6 w-full max-w-7xl">
+        <PageHeader title="Alerting" />
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionActions.Read}
+          a={ProjectPermissionSub.PkiAlerts}
+        >
+          <PkiAlertsSection />
+        </ProjectPermissionCan>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AlertingPage } from "./AlertingPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/alerting"
+)({
+  component: AlertingPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Alerting"
+        }
+      ]
+    };
+  }
+});
@@ -20,9 +20,9 @@ import { useDeleteCa, useGetCaById } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";

-import { CaInstallCertModal } from "../CertificatesPage/components/CaTab/components/CaInstallCertModal";
-import { CaModal } from "../CertificatesPage/components/CaTab/components/CaModal";
-import { CertificateTemplatesSection } from "../CertificatesPage/components/CertificatesTab/components/CertificateTemplatesSection";
+import { CaInstallCertModal } from "../CertificateAuthoritiesPage/components/CaInstallCertModal";
+import { CaModal } from "../CertificateAuthoritiesPage/components/CaModal";
+import { CertificateTemplatesSection } from "../CertificatesPage/components/CertificateTemplatesSection";
 import {
  CaCertificatesSection,
  CaCrlsSection,
@@ -13,7 +13,7 @@ export const Route = createFileRoute(
        {
          label: "Certificate Authorities",
          link: linkOptions({
-            to: "/cert-manager/$projectId/overview",
+            to: "/cert-manager/$projectId/certificate-authorities",
            params: {
              projectId: params.projectId
            }
@@ -0,0 +1,29 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { PageHeader } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+
+import { CaSection } from "./components";
+
+export const CertificateAuthoritiesPage = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Certificate Authorities" })}</title>
+      </Helmet>
+      <div className="mx-auto mb-6 w-full max-w-7xl">
+        <PageHeader title="Certificate Authorities" />
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionActions.Read}
+          a={ProjectPermissionSub.CertificateAuthorities}
+        >
+          <CaSection />
+        </ProjectPermissionCan>
+      </div>
+    </div>
+  );
+};
@@ -2,7 +2,7 @@ import { Modal, ModalContent } from "@app/components/v2";
 import { useGetCaCert } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

-import { CertificateContent } from "../../CertificatesTab/components/CertificateContent";
+import { CertificateContent } from "../../CertificatesPage/components/CertificateContent";

 type Props = {
  popUp: UsePopUpState<["caCert"]>;
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { CertificateAuthoritiesPage } from "./CertificateAuthoritiesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-authorities"
+)({
+  component: CertificateAuthoritiesPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Certificate Authorities"
+        }
+      ]
+    };
+  }
+});
@@ -2,63 +2,49 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { PageHeader } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";

-import { CaTab, CertificatesTab, PkiAlertsTab } from "./components";
-
-enum TabSections {
-  Ca = "certificate-authorities",
-  Certificates = "certificates",
-  Alerting = "alerting"
-}
+import { PkiCollectionSection } from "../AlertingPage/components";
+import { CertificatesSection } from "./components";

 export const CertificatesPage = () => {
  const { t } = useTranslation();
+  const { permission } = useProjectPermission();
+
+  const canAccessPkiColl = permission.can(
+    ProjectPermissionActions.Read,
+    ProjectPermissionSub.PkiCollections
+  );
+  const canAccessCerts = permission.can(
+    ProjectPermissionActions.Read,
+    ProjectPermissionSub.Certificates
+  );
+
  return (
    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: "Certificates" })}</title>
      </Helmet>
      <div className="mx-auto mb-6 w-full max-w-7xl">
-        <PageHeader title="Overview" />
-        <Tabs defaultValue={TabSections.Certificates}>
-          <TabList>
-            <Tab value={TabSections.Certificates}>Certificates</Tab>
-            <Tab value={TabSections.Ca}>Certificate Authorities</Tab>
-            <Tab value={TabSections.Alerting}>Alerting</Tab>
-          </TabList>
-          <TabPanel value={TabSections.Certificates}>
-            <ProjectPermissionCan
-              renderGuardBanner
-              passThrough={false}
-              I={ProjectPermissionActions.Read}
-              a={ProjectPermissionSub.Certificates}
-            >
-              <CertificatesTab />
-            </ProjectPermissionCan>
-          </TabPanel>
-          <TabPanel value={TabSections.Ca}>
-            <ProjectPermissionCan
-              renderGuardBanner
-              passThrough={false}
-              I={ProjectPermissionActions.Read}
-              a={ProjectPermissionSub.CertificateAuthorities}
-            >
-              <CaTab />
-            </ProjectPermissionCan>
-          </TabPanel>
-          <TabPanel value={TabSections.Alerting}>
-            <ProjectPermissionCan
-              renderGuardBanner
-              passThrough={false}
-              I={ProjectPermissionActions.Read}
-              a={ProjectPermissionSub.PkiAlerts}
-            >
-              <PkiAlertsTab />
-            </ProjectPermissionCan>
-          </TabPanel>
-        </Tabs>
+        <PageHeader title="Certificates" />
+        {/* If both are false, the section does not render. This is to prevent duplicate banners. */}
+        {(canAccessCerts || canAccessPkiColl) && (
+          <ProjectPermissionCan
+            renderGuardBanner
+            I={ProjectPermissionActions.Read}
+            a={ProjectPermissionSub.PkiCollections}
+          >
+            <PkiCollectionSection />
+          </ProjectPermissionCan>
+        )}
+        <ProjectPermissionCan
+          renderGuardBanner
+          I={ProjectPermissionActions.Read}
+          a={ProjectPermissionSub.Certificates}
+        >
+          <CertificatesSection />
+        </ProjectPermissionCan>
      </div>
    </div>
  );
@@ -1,17 +0,0 @@
-import { motion } from "framer-motion";
-
-import { CaSection } from "./components";
-
-export const CaTab = () => {
-  return (
-    <motion.div
-      key="panel-certificate-authorities"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <CaSection />
-    </motion.div>
-  );
-};
@@ -1 +0,0 @@
-export { CaTab } from "./CaTab";
@@ -1,21 +0,0 @@
-import { motion } from "framer-motion";
-
-import { PkiCollectionSection } from "../PkiAlertsTab/components";
-// import { CertificateTemplatesSection } from "./components/CertificateTemplatesSection";
-import { CertificatesSection } from "./components";
-
-export const CertificatesTab = () => {
-  return (
-    <motion.div
-      key="panel-certificates"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <PkiCollectionSection />
-      {/* <CertificateTemplatesSection /> */}
-      <CertificatesSection />
-    </motion.div>
-  );
-};
@@ -1 +0,0 @@
-export { CertificatesSection } from "./CertificatesSection";
@@ -1 +0,0 @@
-export { CertificatesTab } from "./CertificatesTab";
@@ -1,17 +0,0 @@
-import { motion } from "framer-motion";
-
-import { PkiAlertsSection } from "./components";
-
-export const PkiAlertsTab = () => {
-  return (
-    <motion.div
-      key="panel-alerts"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <PkiAlertsSection />
-    </motion.div>
-  );
-};
@@ -1 +0,0 @@
-export { PkiAlertsTab } from "./PkiAlertsTab";
@@ -1,3 +1 @@
-export { CaTab } from "./CaTab";
-export { CertificatesTab } from "./CertificatesTab";
-export { PkiAlertsTab } from "./PkiAlertsTab";
+export { CertificatesSection } from "./CertificatesSection";
@@ -22,7 +22,7 @@ import { PkiItemType } from "@app/hooks/api/pkiCollections/constants";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";

-import { PkiCollectionModal } from "../CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal";
+import { PkiCollectionModal } from "../AlertingPage/components/PkiCollectionModal";
 import { PkiCollectionDetailsSection, PkiCollectionItemsSection } from "./components";

 export const PkiCollectionPage = () => {
@@ -1,6 +1,6 @@
 import { Modal, ModalContent } from "@app/components/v2";
 import { KmipClientCertificate } from "@app/hooks/api/kmip/types";
-import { CertificateContent } from "@app/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/CertificateContent";
+import { CertificateContent } from "@app/pages/cert-manager/CertificatesPage/components/CertificateContent";

 type Props = {
  isOpen: boolean;
@@ -1,7 +1,9 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { AxiosError } from "axios";
+import { addSeconds, formatISO } from "date-fns";

 import { createNotification } from "@app/components/notifications";
+import { SessionStorageKeys } from "@app/const";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { userKeys } from "@app/hooks/api";
 import { authKeys, fetchAuthToken } from "@app/hooks/api/auth/queries";
@@ -24,6 +26,16 @@ export const Route = createFileRoute("/_authenticate")({
          title: "Access Restricted",
          text: " You need to log in to access this page. Please log in to continue."
        });
+
+        // persist current URL in session storage so that we can come back to this after successful login
+        sessionStorage.setItem(
+          SessionStorageKeys.ORG_LOGIN_SUCCESS_REDIRECT_URL,
+          JSON.stringify({
+            expiry: formatISO(addSeconds(new Date(), 60)),
+            data: window.location.href
+          })
+        );
+
        throw redirect({
          to: "/login"
        });
@@ -18,8 +18,10 @@ import { DatabricksConnectionForm } from "./DatabricksConnectionForm";
 import { GcpConnectionForm } from "./GcpConnectionForm";
 import { GitHubConnectionForm } from "./GitHubConnectionForm";
 import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
+import { LdapConnectionForm } from "./LdapConnectionForm";
 import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
+import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
 import { TerraformCloudConnectionForm } from "./TerraformCloudConnectionForm";
 import { VercelConnectionForm } from "./VercelConnectionForm";
 import { WindmillConnectionForm } from "./WindmillConnectionForm";
@@ -89,6 +91,10 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <WindmillConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Auth0:
      return <Auth0ConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.LDAP:
+      return <LdapConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.TeamCity:
+      return <TeamCityConnectionForm onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled App ${app}`);
  }
@@ -153,6 +159,11 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <WindmillConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Auth0:
      return <Auth0ConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.LDAP:
+      return <LdapConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.TeamCity:
+      return <TeamCityConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+
    default:
      throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
  }
@@ -0,0 +1,329 @@
+import { useState } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tab } from "@headlessui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { DistinguishedNameRegex } from "@app/helpers/string";
+import {
+  LdapConnectionMethod,
+  LdapConnectionProvider,
+  TLdapConnection
+} from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TLdapConnection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.LDAP)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(LdapConnectionMethod.SimpleBind),
+    credentials: z.object({
+      provider: z.nativeEnum(LdapConnectionProvider),
+      url: z
+        .string()
+        .regex(/^ldaps?:\/\//, 'Must start with "ldaps://" or "ldap://"')
+        .url()
+        .trim()
+        .min(1, "LDAP URL required"),
+      dn: z
+        .string()
+        .trim()
+        .regex(DistinguishedNameRegex, "Invalid Distinguished Name format")
+        .min(1, "Distinguished Name (DN) required"),
+      password: z.string().trim().min(1, "Password required"),
+      sslRejectUnauthorized: z.boolean(),
+      sslCertificate: z
+        .string()
+        .trim()
+        .transform((value) => value || undefined)
+        .optional()
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.LDAP,
+      method: LdapConnectionMethod.SimpleBind,
+      credentials: {
+        provider: LdapConnectionProvider.ActiveDirectory,
+        url: "",
+        dn: "",
+        password: "",
+        sslRejectUnauthorized: true,
+        sslCertificate: undefined
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty },
+    watch
+  } = form;
+
+  const selectedProvider = watch("credentials.provider");
+  const sslEnabled = watch("credentials.url")?.startsWith("ldaps://") ?? false;
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={(e) => {
+          setSelectedTabIndex(0);
+          handleSubmit(onSubmit)(e);
+        }}
+      >
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <div className="grid grid-cols-2 items-center gap-2">
+          <Controller
+            name="method"
+            control={control}
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <FormControl
+                tooltipText={`The method you would like to use to connect with ${
+                  APP_CONNECTION_MAP[AppConnection.LDAP].name
+                }. This field cannot be changed after creation.`}
+                errorText={error?.message}
+                isError={Boolean(error?.message)}
+                label="Method"
+              >
+                <Select
+                  isDisabled={isUpdate}
+                  value={value}
+                  onValueChange={(val) => onChange(val)}
+                  className="w-full border border-mineshaft-500"
+                  position="popper"
+                  dropdownContainerClassName="max-w-none"
+                >
+                  {Object.values(LdapConnectionMethod).map((method) => {
+                    return (
+                      <SelectItem value={method} key={method}>
+                        {getAppConnectionMethodDetails(method).name}
+                      </SelectItem>
+                    );
+                  })}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            name="credentials.provider"
+            control={control}
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <FormControl
+                errorText={error?.message}
+                isError={Boolean(error?.message)}
+                label="LDAP Provider"
+              >
+                <Select
+                  isDisabled={isUpdate}
+                  value={value}
+                  onValueChange={(val) => onChange(val)}
+                  className="w-full border border-mineshaft-500 capitalize"
+                  position="popper"
+                  dropdownContainerClassName="max-w-none"
+                >
+                  {Object.values(LdapConnectionProvider).map((provider) => {
+                    return (
+                      <SelectItem value={provider} className="capitalize" key={provider}>
+                        {provider.replace("-", " ")}
+                      </SelectItem>
+                    );
+                  })}
+                </Select>
+              </FormControl>
+            )}
+          />
+        </div>
+        <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
+          <Tab.List
+            className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
+          >
+            <Tab
+              className={({ selected }) =>
+                `w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                  selected
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    : "text-bunker-300"
+                }`
+              }
+            >
+              Configuration
+            </Tab>
+            <Tab
+              className={({ selected }) =>
+                `w-30 -mb-[0.14rem] px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                  selected
+                    ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                    : "text-bunker-300"
+                }`
+              }
+            >
+              SSL ({sslEnabled ? "Enabled" : "Disabled"})
+            </Tab>
+          </Tab.List>
+          {selectedTabIndex === 1 && (
+            <div className="mb-2 text-xs text-mineshaft-300">Requires ldaps:// URL</div>
+          )}
+          <Tab.Panels className="mb-4 rounded border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
+            <Tab.Panel>
+              <Controller
+                name="credentials.url"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    label="LDAP URL"
+                  >
+                    <Input {...field} placeholder="ldap://domain-or-ip:389" />
+                  </FormControl>
+                )}
+              />
+              <div className="grid grid-cols-2 gap-2">
+                <Controller
+                  name="credentials.dn"
+                  control={control}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error?.message)}
+                      label="Binding Distinguished Name (DN)"
+                    >
+                      <Input {...field} placeholder="CN=John,OU=Users,DC=example,DC=com" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  name="credentials.password"
+                  control={control}
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      errorText={error?.message}
+                      isError={Boolean(error?.message)}
+                      label="Binding Password"
+                    >
+                      <SecretInput
+                        containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                        value={value}
+                        onChange={(e) => onChange(e.target.value)}
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </Tab.Panel>
+            <Tab.Panel>
+              <Controller
+                name="credentials.sslCertificate"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    errorText={error?.message}
+                    isError={Boolean(error?.message)}
+                    className={sslEnabled ? "" : "opacity-50"}
+                    label="SSL Certificate"
+                    isOptional
+                  >
+                    <TextArea
+                      className="h-[3.6rem] !resize-none"
+                      {...field}
+                      isDisabled={!sslEnabled}
+                    />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                name="credentials.sslRejectUnauthorized"
+                control={control}
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    className={sslEnabled ? "" : "opacity-50"}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Switch
+                      className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                      id="ssl-reject-unauthorized"
+                      thumbClassName="bg-mineshaft-800"
+                      isChecked={sslEnabled ? value : false}
+                      onCheckedChange={onChange}
+                      isDisabled={!sslEnabled}
+                    >
+                      <p className="w-[9.5rem]">
+                        Reject Unauthorized
+                        <Tooltip
+                          className="max-w-md"
+                          content={
+                            <p>
+                              If enabled, Infisical will only connect to the server if it has a
+                              valid, trusted SSL certificate.
+                            </p>
+                          }
+                        >
+                          <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                        </Tooltip>
+                      </p>
+                    </Switch>
+                  </FormControl>
+                )}
+              />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4 capitalize"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : `Connect to ${selectedProvider.replace("-", " ")}`}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -0,0 +1,150 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { TeamCityConnectionMethod, TTeamCityConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TTeamCityConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.TeamCity)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(TeamCityConnectionMethod.AccessToken),
+    credentials: z.object({
+      accessToken: z.string().trim().min(1, "Access Token required"),
+      instanceUrl: z.string().trim().url("Invalid Instance URL")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const TeamCityConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.TeamCity,
+      method: TeamCityConnectionMethod.AccessToken
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.TeamCity].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(TeamCityConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.instanceUrl"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Instance URL"
+              tooltipClassName="max-w-sm"
+              tooltipText="The URL at which your TeamCity instance is hosted."
+            >
+              <Input {...field} placeholder="https://yourcompany.teamcity.com" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.accessToken"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Access Token"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to TeamCity"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -125,7 +125,7 @@ export const AppConnectionRow = ({
                  <FontAwesomeIcon icon={faEllipsisV} />
                </IconButton>
              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
+              <DropdownMenuContent sideOffset={2} align="end">
                <DropdownMenuItem
                  icon={<FontAwesomeIcon icon={isIdCopied ? faCheck : faCopy} />}
                  onClick={() => handleCopyId()}
@@ -45,6 +45,7 @@ export const OrgAuthTab = withPermission(
    const { data: samlConfig, isPending: isLoadingSamlConfig } = useGetSSOConfig(
      currentOrg?.id ?? ""
    );
+
    const { data: ldapConfig, isPending: isLoadingLdapConfig } = useGetLDAPConfig(
      currentOrg?.id ?? ""
    );
@@ -54,7 +55,8 @@ export const OrgAuthTab = withPermission(
      !enabledLoginMethods || enabledLoginMethods.includes(method);

    const isOidcConfigured = oidcConfig && (oidcConfig.discoveryURL || oidcConfig.issuer);
-    const isSamlConfigured = samlConfig && samlConfig.entryPoint;
+    const isSamlConfigured =
+      samlConfig && (samlConfig.entryPoint || samlConfig.issuer || samlConfig.cert);
    const isLdapConfigured = ldapConfig && ldapConfig.url;

    const shouldShowCreateIdentityProviderView =
@@ -301,6 +301,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
                      label={renderLabels(authProvider).entryPoint}
                      errorText={error?.message}
                      isError={Boolean(error)}
+                      isRequired
                    >
                      <Input
                        {...field}
@@ -0,0 +1,152 @@
+import { faAws, faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faCheck, faCopy, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions/OrgPermissionCan";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@app/components/v2/Dropdown";
+import { IconButton } from "@app/components/v2/IconButton";
+import { Td, Tr } from "@app/components/v2/Table";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context/OrgPermissionContext";
+import { useToggle } from "@app/hooks";
+import { ExternalKmsProvider, KmsListEntry } from "@app/hooks/api/kms/types";
+import { SubscriptionPlan } from "@app/hooks/api/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  kms: KmsListEntry;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["editExternalKms", "removeExternalKms", "upgradePlan"]>,
+    data?: {
+      kmsId?: string;
+      name?: string;
+      provider?: string;
+    }
+  ) => void;
+  subscription: SubscriptionPlan;
+};
+
+export const ExternalKmsItem = ({ kms, handlePopUpOpen, subscription }: Props) => {
+  const [isKmsIdCopied, { timedToggle: toggleKmsIdCopied }] = useToggle(false);
+  const [isKmsAliasCopied, { timedToggle: toggleKmsAliasCopied }] = useToggle(false);
+
+  return (
+    <Tr key={kms.id}>
+      <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
+        {kms.externalKms.provider === ExternalKmsProvider.Aws && <FontAwesomeIcon icon={faAws} />}
+        {kms.externalKms.provider === ExternalKmsProvider.Gcp && (
+          <FontAwesomeIcon icon={faGoogle} />
+        )}
+        <div className="ml-2">{kms.externalKms.provider.toUpperCase()}</div>
+      </Td>
+      <Td>
+        <div className="group flex items-center gap-2">
+          {kms.name}
+          <IconButton
+            size="xs"
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="relative rounded-md opacity-0 group-hover:opacity-100"
+            onClick={() => {
+              if (isKmsAliasCopied) {
+                return;
+              }
+              navigator.clipboard.writeText(kms.name);
+              createNotification({
+                text: "KMS alias copied to clipboard",
+                type: "success"
+              });
+              toggleKmsAliasCopied(2000);
+            }}
+          >
+            <FontAwesomeIcon icon={isKmsAliasCopied ? faCheck : faCopy} />
+          </IconButton>
+        </div>
+      </Td>
+      <Td>
+        <div className="group flex items-center gap-2">
+          {kms.id}
+          <IconButton
+            size="xs"
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="relative rounded-md opacity-0 group-hover:opacity-100"
+            onClick={() => {
+              if (isKmsIdCopied) {
+                return;
+              }
+              navigator.clipboard.writeText(kms.id);
+              createNotification({
+                text: "KMS ID copied to clipboard",
+                type: "success"
+              });
+              toggleKmsIdCopied(2000);
+            }}
+          >
+            <FontAwesomeIcon icon={isKmsIdCopied ? faCheck : faCopy} />
+          </IconButton>
+        </div>
+      </Td>
+      <Td>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="rounded-lg">
+            <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
+              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-1">
+            <OrgPermissionCan I={OrgPermissionActions.Edit} an={OrgPermissionSubjects.Kms}>
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  disabled={!isAllowed}
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (subscription && !subscription?.externalKms) {
+                      handlePopUpOpen("upgradePlan");
+                      return;
+                    }
+
+                    handlePopUpOpen("editExternalKms", {
+                      kmsId: kms.id
+                    });
+                  }}
+                >
+                  Edit
+                </DropdownMenuItem>
+              )}
+            </OrgPermissionCan>
+            <OrgPermissionCan I={OrgPermissionActions.Delete} an={OrgPermissionSubjects.Kms}>
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  disabled={!isAllowed}
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("removeExternalKms", {
+                      name: kms.name,
+                      kmsId: kms.id,
+                      provider: kms.externalKms.provider
+                    });
+                  }}
+                >
+                  Delete
+                </DropdownMenuItem>
+              )}
+            </OrgPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Td>
+    </Tr>
+  );
+};
@@ -1,7 +1,5 @@
-import { faAws, faGoogle } from "@fortawesome/free-brands-svg-icons";
-import { faEllipsis, faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faLock, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";

 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
@@ -9,10 +7,6 @@ import { OrgPermissionCan } from "@app/components/permissions";
 import {
  Button,
  DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
  EmptyState,
  Table,
  TableContainer,
@@ -31,9 +25,9 @@ import {
 import { withPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useGetExternalKmsList, useRemoveExternalKms } from "@app/hooks/api";
-import { ExternalKmsProvider } from "@app/hooks/api/kms/types";

 import { AddExternalKmsForm } from "./AddExternalKmsForm";
+import { ExternalKmsItem } from "./ExternalKmsItem";
 import { UpdateExternalKmsForm } from "./UpdateExternalKmsForm";

 export const OrgEncryptionTab = withPermission(
@@ -102,6 +96,7 @@ export const OrgEncryptionTab = withPermission(
              <Tr>
                <Td>Provider</Td>
                <Td>Alias</Td>
+                <Td>ID</Td>
              </Tr>
            </THead>
            <TBody>
@@ -115,78 +110,12 @@ export const OrgEncryptionTab = withPermission(
              )}
              {!isExternalKmsListLoading &&
                externalKmsList?.map((kms) => (
-                  <Tr key={kms.id}>
-                    <Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
-                      {kms.externalKms.provider === ExternalKmsProvider.Aws && (
-                        <FontAwesomeIcon icon={faAws} />
-                      )}
-                      {kms.externalKms.provider === ExternalKmsProvider.Gcp && (
-                        <FontAwesomeIcon icon={faGoogle} />
-                      )}
-                      <div className="ml-2">{kms.externalKms.provider.toUpperCase()}</div>
-                    </Td>
-                    <Td>{kms.name}</Td>
-                    <Td>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                          </div>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            an={OrgPermissionSubjects.Kms}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                disabled={!isAllowed}
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  if (subscription && !subscription?.externalKms) {
-                                    handlePopUpOpen("upgradePlan");
-                                    return;
-                                  }
-
-                                  handlePopUpOpen("editExternalKms", {
-                                    kmsId: kms.id
-                                  });
-                                }}
-                              >
-                                Edit
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            an={OrgPermissionSubjects.Kms}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                disabled={!isAllowed}
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("removeExternalKms", {
-                                    name: kms.name,
-                                    kmsId: kms.id,
-                                    provider: kms.externalKms.provider
-                                  });
-                                }}
-                              >
-                                Delete
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </Td>
-                  </Tr>
+                  <ExternalKmsItem
+                    key={kms.id}
+                    kms={kms}
+                    handlePopUpOpen={handlePopUpOpen}
+                    subscription={subscription}
+                  />
                ))}
            </TBody>
          </Table>
@@ -1,9 +1,12 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
  faArrowDown,
  faArrowUp,
+  faCheckCircle,
+  faChevronRight,
  faClock,
  faEllipsisV,
+  faFilter,
  faMagnifyingGlass,
  faSearch,
  faTrash,
@@ -15,6 +18,14 @@ import { twMerge } from "tailwind-merge";

 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  DropdownSubMenu,
+  DropdownSubMenuContent,
+  DropdownSubMenuTrigger,
  EmptyState,
  HoverCard,
  HoverCardContent,
@@ -40,7 +51,7 @@ import {
  useWorkspace
 } from "@app/context";
 import { usePagination, useResetPageHelper } from "@app/hooks";
-import { useGetWorkspaceUsers } from "@app/hooks/api";
+import { useGetProjectRoles, useGetWorkspaceUsers } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -65,13 +76,22 @@ enum MembersOrderBy {
  Email = "email"
 }

+type Filter = {
+  roles: string[];
+};
+
 export const MembersTable = ({ handlePopUpOpen }: Props) => {
  const { currentWorkspace } = useWorkspace();
  const { user } = useUser();
  const navigate = useNavigate();
+  const [filter, setFilter] = useState<Filter>({
+    roles: []
+  });
+  const filterRoles = useMemo(() => filter.roles, [filter.roles]);

  const userId = user?.id || "";
  const workspaceId = currentWorkspace?.id || "";
+  const { data: projectRoles } = useGetProjectRoles(workspaceId);

  const {
    search,
@@ -86,9 +106,20 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
    setOrderBy,
    setOrderDirection,
    toggleOrderDirection
-  } = usePagination<MembersOrderBy>(MembersOrderBy.Name, { initPerPage: 20 });
+  } = usePagination<MembersOrderBy>(MembersOrderBy.Name, {
+    initPerPage: parseInt(localStorage.getItem("PROJECT_MEMBERS_TABLE_PER_PAGE") || "20", 10)
+  });

-  const { data: members = [], isPending: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    localStorage.setItem("PROJECT_MEMBERS_TABLE_PER_PAGE", newPerPage.toString());
+  };
+
+  const { data: members = [], isPending: isMembersLoading } = useGetWorkspaceUsers(
+    workspaceId,
+    undefined,
+    filterRoles
+  );

  const filteredUsers = useMemo(
    () =>
@@ -142,14 +173,81 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
    setOrderDirection(OrderByDirection.ASC);
  };

+  const isTableFiltered = Boolean(filter.roles.length);
+
+  const handleRoleToggle = useCallback(
+    (roleSlug: string) =>
+      setFilter((state) => {
+        const roles = state.roles || [];
+
+        if (roles.includes(roleSlug)) {
+          return { ...state, roles: roles.filter((role) => role !== roleSlug) };
+        }
+        return { ...state, roles: [...roles, roleSlug] };
+      }),
+    []
+  );
+
  return (
    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search members..."
-      />
+      <div className="flex gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter Users"
+              variant="plain"
+              size="sm"
+              className={twMerge(
+                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-0">
+            <DropdownMenuLabel>Filter By</DropdownMenuLabel>
+            <DropdownSubMenu>
+              <DropdownSubMenuTrigger
+                iconPos="right"
+                icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
+              >
+                Roles
+              </DropdownSubMenuTrigger>
+              <DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                  Apply Roles to Filter Users
+                </DropdownMenuLabel>
+                {projectRoles?.map(({ id, slug, name }) => (
+                  <DropdownMenuItem
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      handleRoleToggle(slug);
+                    }}
+                    key={id}
+                    icon={filter.roles.includes(slug) && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center">
+                      <div
+                        className="mr-2 h-2 w-2 rounded-full"
+                        style={{ background: "#bec2c8" }}
+                      />
+                      {name}
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownSubMenuContent>
+            </DropdownSubMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search members..."
+        />
+      </div>
      <TableContainer className="mt-4">
        <Table>
          <THead>
@@ -358,7 +456,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isMembersLoading && !filteredUsers?.length && (
@@ -9,6 +9,7 @@ import { DatabricksSyncDestinationCol } from "./DatabricksSyncDestinationCol";
 import { GcpSyncDestinationCol } from "./GcpSyncDestinationCol";
 import { GitHubSyncDestinationCol } from "./GitHubSyncDestinationCol";
 import { HumanitecSyncDestinationCol } from "./HumanitecSyncDestinationCol";
+import { TeamCitySyncDestinationCol } from "./TeamCitySyncDestinationCol";
 import { TerraformCloudSyncDestinationCol } from "./TerraformCloudSyncDestinationCol";
 import { VercelSyncDestinationCol } from "./VercelSyncDestinationCol";
 import { WindmillSyncDestinationCol } from "./WindmillSyncDestinationCol";
@@ -43,6 +44,8 @@ export const SecretSyncDestinationCol = ({ secretSync }: Props) => {
      return <VercelSyncDestinationCol secretSync={secretSync} />;
    case SecretSync.Windmill:
      return <WindmillSyncDestinationCol secretSync={secretSync} />;
+    case SecretSync.TeamCity:
+      return <TeamCitySyncDestinationCol secretSync={secretSync} />;
    default:
      throw new Error(
        `Unhandled Secret Sync Destination Col: ${(secretSync as TSecretSync).destination}`
@@ -0,0 +1,14 @@
+import { TTeamCitySync } from "@app/hooks/api/secretSyncs/types/teamcity-sync";
+
+import { getSecretSyncDestinationColValues } from "../helpers";
+import { SecretSyncTableCell } from "../SecretSyncTableCell";
+
+type Props = {
+  secretSync: TTeamCitySync;
+};
+
+export const TeamCitySyncDestinationCol = ({ secretSync }: Props) => {
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+
+  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};
@@ -94,6 +94,10 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
      primaryText = destinationConfig.workspace;
      secondaryText = destinationConfig.path;
      break;
+    case SecretSync.TeamCity:
+      primaryText = destinationConfig.project;
+      secondaryText = destinationConfig.buildConfig;
+      break;
    default:
      throw new Error(`Unhandled Destination Col Values ${destination}`);
  }
@@ -135,7 +135,6 @@ export const SecretOverviewSecretRotationRow = ({
                                <img
                                  src={`/images/integrations/${image}`}
                                  style={{
-                                    height: "11px",
                                    width: "11px"
                                  }}
                                  alt={`${rotationType} logo`}
@@ -252,8 +252,12 @@ export const SecretDetailSidebar = ({
    switch (userType) {
      case ActorType.PLATFORM:
        return "System-generated";
+      case ActorType.IDENTITY:
+        return userName || "Deleted Identity";
+      case ActorType.USER:
+        return userName || "Deleted User";
      default:
-        return userName;
+        return "Unknown";
    }
  };

@@ -55,7 +55,6 @@ export const SecretRotationItem = ({
              <img
                src={`/images/integrations/${image}`}
                style={{
-                  height: "11px",
                  width: "11px"
                }}
                alt={`${rotationType} logo`}
@@ -19,6 +19,7 @@ import { DatabricksSyncDestinationSection } from "./DatabricksSyncDestinationSec
 import { GcpSyncDestinationSection } from "./GcpSyncDestinationSection";
 import { GitHubSyncDestinationSection } from "./GitHubSyncDestinationSection";
 import { HumanitecSyncDestinationSection } from "./HumanitecSyncDestinationSection";
+import { TeamCitySyncDestinationSection } from "./TeamCitySyncDestinationSection";
 import { TerraformCloudSyncDestinationSection } from "./TerraformCloudSyncDestinationSection";
 import { VercelSyncDestinationSection } from "./VercelSyncDestinationSection";
 import { WindmillSyncDestinationSection } from "./WindmillSyncDestinationSection";
@@ -73,6 +74,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
    case SecretSync.Windmill:
      DestinationComponents = <WindmillSyncDestinationSection secretSync={secretSync} />;
      break;
+    case SecretSync.TeamCity:
+      DestinationComponents = <TeamCitySyncDestinationSection secretSync={secretSync} />;
+      break;
    default:
      throw new Error(`Unhandled Destination Section components: ${destination}`);
  }
@@ -0,0 +1,19 @@
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { TTeamCitySync } from "@app/hooks/api/secretSyncs/types/teamcity-sync";
+
+type Props = {
+  secretSync: TTeamCitySync;
+};
+
+export const TeamCitySyncDestinationSection = ({ secretSync }: Props) => {
+  const {
+    destinationConfig: { project, buildConfig }
+  } = secretSync;
+
+  return (
+    <>
+      <GenericFieldLabel label="Project">{project}</GenericFieldLabel>
+      <GenericFieldLabel label="Build Configuration">{buildConfig}</GenericFieldLabel>
+    </>
+  );
+};
@@ -52,6 +52,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
    case SecretSync.Camunda:
    case SecretSync.Vercel:
    case SecretSync.Windmill:
+    case SecretSync.TeamCity:
      AdditionalSyncOptionsComponent = null;
      break;
    default:
@@ -3,7 +3,7 @@ import { useNavigate } from "@tanstack/react-router";

 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
+import { Button, DeleteActionModal, Tooltip } from "@app/components/v2";
 import { LeaveProjectModal } from "@app/components/v2/LeaveProjectModal";
 import {
  ProjectPermissionActions,
@@ -142,16 +142,22 @@ export const DeleteProjectSection = () => {
      <div className="space-x-4">
        <ProjectPermissionCan I={ProjectPermissionActions.Delete} a={ProjectPermissionSub.Project}>
          {(isAllowed) => (
-            <Button
-              isLoading={isDeleting}
-              isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
-              colorSchema="danger"
-              variant="outline_bg"
-              type="submit"
-              onClick={() => handlePopUpOpen("deleteWorkspace")}
+            <Tooltip
+              className="max-w-sm"
+              content="This project is protected from deletion. To delete it, disable delete protection first."
+              isDisabled={!currentWorkspace?.hasDeleteProtection}
            >
-              {`Delete ${currentWorkspace?.name}`}
-            </Button>
+              <Button
+                isLoading={isDeleting}
+                isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
+                colorSchema="danger"
+                variant="outline_bg"
+                type="submit"
+                onClick={() => handlePopUpOpen("deleteWorkspace")}
+              >
+                {`Delete ${currentWorkspace?.name}`}
+              </Button>
+            </Tooltip>
          )}
        </ProjectPermissionCan>
        {!isOnlyAdminMember && (
@@ -1,11 +1,12 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

+import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";

 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
-
-const tabs = [{ name: "General", key: "tab-project-general", Component: ProjectGeneralTab }];
+import { ProjectSshTab } from "./components/ProjectSshTab";

 export const SettingsPage = () => {
  const { t } = useTranslation();
@@ -17,19 +18,28 @@ export const SettingsPage = () => {
      </Helmet>
      <div className="w-full max-w-7xl">
        <PageHeader title={t("settings.project.title")} />
-        <Tabs defaultValue={tabs[0].key}>
+        <Tabs defaultValue="tab-project-general">
          <TabList>
-            {tabs.map((tab) => (
-              <Tab value={tab.key} key={tab.key}>
-                {tab.name}
-              </Tab>
-            ))}
+            <Tab value="tab-project-general">General</Tab>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Edit}
+              a={ProjectPermissionSub.Project}
+            >
+              {(isAllowed) => isAllowed && <Tab value="tab-project-ssh">SSH Settings</Tab>}
+            </ProjectPermissionCan>
          </TabList>
-          {tabs.map(({ key, Component }) => (
-            <TabPanel value={key} key={key}>
-              <Component />
-            </TabPanel>
-          ))}
+          <TabPanel value="tab-project-general">
+            <ProjectGeneralTab />
+          </TabPanel>
+          <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Project}>
+            {(isAllowed) =>
+              isAllowed && (
+                <TabPanel value="tab-project-ssh">
+                  <ProjectSshTab />
+                </TabPanel>
+              )
+            }
+          </ProjectPermissionCan>
        </Tabs>
      </div>
    </div>
@@ -0,0 +1,9 @@
+import { ProjectSshConfigCasSection } from "./components";
+
+export const ProjectSshTab = () => {
+  return (
+    <div>
+      <ProjectSshConfigCasSection />
+    </div>
+  );
+};
@@ -0,0 +1,139 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Select, SelectItem } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import {
+  useGetProjectSshConfig,
+  useListWorkspaceSshCas,
+  useUpdateProjectSshConfig
+} from "@app/hooks/api";
+
+const schema = z
+  .object({
+    defaultUserSshCaId: z.string(),
+    defaultHostSshCaId: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+export const ProjectSshConfigCasSection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: sshConfig } = useGetProjectSshConfig(currentWorkspace.id);
+  const { data: sshCas } = useListWorkspaceSshCas(currentWorkspace.id);
+  const { mutate: updateProjectSshConfig } = useUpdateProjectSshConfig();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  useEffect(() => {
+    if (sshConfig) {
+      reset({
+        defaultUserSshCaId: sshConfig.defaultUserSshCaId || "",
+        defaultHostSshCaId: sshConfig.defaultHostSshCaId || ""
+      });
+    }
+  }, [sshConfig]);
+
+  const onFormSubmit = async ({ defaultUserSshCaId, defaultHostSshCaId }: FormData) => {
+    try {
+      await updateProjectSshConfig({
+        projectId: currentWorkspace.id,
+        defaultUserSshCaId: defaultUserSshCaId || undefined,
+        defaultHostSshCaId: defaultHostSshCaId || undefined
+      });
+
+      createNotification({
+        text: "Successfully updated SSH project settings",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update SSH project settings",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-8 text-xl font-semibold">Certificate Authorities</p>
+      <form onSubmit={handleSubmit(onFormSubmit)}>
+        <Controller
+          control={control}
+          name="defaultUserSshCaId"
+          defaultValue=""
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl
+              label="Default User CA"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Select
+                defaultValue={field.value}
+                {...field}
+                onValueChange={(e) => onChange(e)}
+                className="min-w-[20rem]"
+              >
+                {sshCas?.map(({ id, friendlyName }) => (
+                  <SelectItem value={String(id || "")} key={friendlyName}>
+                    {friendlyName}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="defaultHostSshCaId"
+          defaultValue=""
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl
+              label="Default Host CA"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Select
+                defaultValue={field.value}
+                {...field}
+                onValueChange={(e) => onChange(e)}
+                className="min-w-[20rem]"
+              >
+                {sshCas?.map(({ id, friendlyName }) => (
+                  <SelectItem value={String(id || "")} key={friendlyName}>
+                    {friendlyName}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Project}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="secondary"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting || !isAllowed}
+            >
+              Save
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </form>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { ProjectSshConfigCasSection } from "./ProjectSshConfigCasSection";
@@ -0,0 +1 @@
+export { ProjectSshTab } from "./ProjectSshTab";
@@ -23,6 +23,7 @@ import {
  useCreateSshHost,
  useGetSshHostById,
  useGetWorkspaceUsers,
+  useListWorkspaceSshHosts,
  useUpdateSshHost
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -58,6 +59,7 @@ export type FormData = z.infer<typeof schema>;
 export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
  const { currentWorkspace } = useWorkspace();
  const projectId = currentWorkspace?.id || "";
+  const { data: sshHosts } = useListWorkspaceSshHosts(currentWorkspace.id);
  const { data: members = [] } = useGetWorkspaceUsers(projectId);
  const [expandedMappings, setExpandedMappings] = useState<Record<number, boolean>>({});

@@ -116,6 +118,18 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
    try {
      if (!projectId) return;

+      // check if there is already a different host with the same hostname
+      const existingHostnames =
+        sshHosts?.filter((h) => h.id !== sshHost?.id).map((h) => h.hostname) || [];
+
+      if (existingHostnames.includes(hostname)) {
+        createNotification({
+          text: "A host with this hostname already exists.",
+          type: "error"
+        });
+        return;
+      }
+
      if (sshHost) {
        await updateMutateAsync({
          sshHostId: sshHost.id,
@@ -1,6 +1,8 @@
 import { faServer } from "@fortawesome/free-solid-svg-icons";

+import { createNotification } from "@app/components/notifications";
 import {
+  DeleteActionModal,
  EmptyState,
  Table,
  TableContainer,
@@ -9,59 +11,131 @@ import {
  Td,
  Th,
  THead,
+  Tooltip,
  Tr
 } from "@app/components/v2";
-import { useGetMySessions } from "@app/hooks/api";
+import { Button } from "@app/components/v2/Button";
+import { useGetMySessions, useRevokeMySessionById } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+import { timeAgo } from "@app/lib/fn/date";
+import { formatSessionUserAgent } from "@app/lib/fn/string";
+
+const formatLocalDateTime = (date: Date): string => {
+  return date.toLocaleString(undefined, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+};

 export const SessionsTable = () => {
  const { data, isPending } = useGetMySessions();
+  const { mutateAsync: revokeMySessionById } = useRevokeMySessionById();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteSession"
+  ] as const);

-  const formatDate = (dateToFormat: string) => {
-    const date = new Date(dateToFormat);
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
+  const handleSignOut = async (sessionId: string) => {
+    try {
+      await revokeMySessionById(sessionId);
+      createNotification({
+        text: "Session revoked successfully",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to revoke session",
+        type: "error"
+      });
+    }

-    const formattedDate = `${day}/${month}/${year}`;
-
-    return formattedDate;
+    handlePopUpClose("deleteSession");
  };

  return (
-    <TableContainer className="mt-4">
-      <Table>
-        <THead>
-          <Tr>
-            <Th>Created</Th>
-            <Th>Last active</Th>
-            <Th>IP address</Th>
-            <Th>Device</Th>
-          </Tr>
-        </THead>
-        <TBody>
-          {isPending && <TableSkeleton columns={4} innerKey="sesssions" />}
-          {!isPending &&
-            data &&
-            data.length > 0 &&
-            data.map(({ id, createdAt, lastUsed, ip, userAgent }) => {
-              return (
-                <Tr className="h-10" key={`session-${id}`}>
-                  <Td>{formatDate(createdAt)}</Td>
-                  <Td>{formatDate(lastUsed)}</Td>
-                  <Td>{ip}</Td>
-                  <Td>{userAgent}</Td>
-                </Tr>
-              );
-            })}
-          {!isPending && data && data?.length === 0 && (
+    <>
+      <DeleteActionModal
+        isOpen={popUp.deleteSession.isOpen}
+        title="Are you sure want to sign out of this session?"
+        onChange={(isOpen) => handlePopUpToggle("deleteSession", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          handleSignOut((popUp?.deleteSession?.data as { sessionId: string })?.sessionId)
+        }
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
            <Tr>
-              <Td colSpan={4}>
-                <EmptyState title="No sessions on file" icon={faServer} />
-              </Td>
+              <Th>IP & Session ID</Th>
+              <Th>OS & Browser</Th>
+              <Th>Last accessed</Th>
+              <Th>Manage</Th>
            </Tr>
-          )}
-        </TBody>
-      </Table>
-    </TableContainer>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={4} innerKey="sessions" />}
+            {!isPending &&
+              data &&
+              data.length > 0 &&
+              data.map(({ id, createdAt, lastUsed, ip, userAgent }) => {
+                const { os, browser } = formatSessionUserAgent(userAgent);
+                const lastUsedDate = new Date(lastUsed);
+                const createdAtDate = new Date(createdAt);
+
+                return (
+                  <Tr className="h-20" key={`session-${id}`}>
+                    <Td>
+                      <div className="flex flex-col">
+                        <span className="font-medium">{ip}</span>
+                        <span className="text-sm text-gray-500">ID: {id}</span>
+                      </div>
+                    </Td>
+                    <Td>
+                      <div className="flex flex-col">
+                        <span className="font-medium">{os}</span>
+                        <span className="text-sm text-gray-500">{browser}</span>
+                      </div>
+                    </Td>
+                    <Td>
+                      <div className="flex flex-col">
+                        <Tooltip content={formatLocalDateTime(lastUsedDate)}>
+                          <span className="font-medium">{timeAgo(lastUsedDate, new Date())}</span>
+                        </Tooltip>
+                        <Tooltip content={formatLocalDateTime(createdAtDate)}>
+                          <span className="text-sm text-gray-500">
+                            Created {timeAgo(createdAtDate, new Date())}
+                          </span>
+                        </Tooltip>
+                      </div>
+                    </Td>
+                    <Td>
+                      <Button
+                        variant="plain"
+                        colorSchema="danger"
+                        onClick={() => handlePopUpOpen("deleteSession", { sessionId: id })}
+                      >
+                        Sign out
+                      </Button>
+                    </Td>
+                  </Tr>
+                );
+              })}
+            {!isPending && data && data?.length === 0 && (
+              <Tr>
+                <Td colSpan={4}>
+                  <EmptyState title="No sessions on file" icon={faServer} />
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+    </>
  );
 };
				`@@ -1 +0,0 @@`
				`export { CertificatesSection } from "./CertificatesSection";`
				`@@ -1 +0,0 @@`
				`export { CertificatesTab } from "./CertificatesTab";`
				`@@ -1 +0,0 @@`
				`export { PkiAlertsTab } from "./PkiAlertsTab";`
				`@@ -0,0 +1 @@`
				`export { ProjectSshConfigCasSection } from "./ProjectSshConfigCasSection";`
				`@@ -0,0 +1 @@`
				`export { ProjectSshTab } from "./ProjectSshTab";`