deconflict merge

frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx

@@ -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>
+  );
+};

frontend/src/pages/cert-manager/AlertingPage/route.tsx

@@ -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"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx

@@ -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,

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/route.tsx

@@ -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
             }

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx

@@ -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>
+  );
+};

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/components/CaCertModal.tsx

@@ -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"]>;

frontend/src/pages/cert-manager/CertificateAuthoritiesPage/route.tsx

@@ -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"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx

@@ -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>
   );

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/CaTab.tsx

@@ -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>
-  );
-};

frontend/src/pages/cert-manager/CertificatesPage/components/CaTab/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/CertificatesTab.tsx

@@ -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>
-  );
-};

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/components/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/CertificatesTab/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/PkiAlertsTab.tsx

@@ -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>
-  );
-};

frontend/src/pages/cert-manager/CertificatesPage/components/PkiAlertsTab/index.tsx

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

frontend/src/pages/cert-manager/CertificatesPage/components/index.tsx

@@ -1,3 +1 @@
-export { CaTab } from "./CaTab";
-export { CertificatesTab } from "./CertificatesTab";
-export { PkiAlertsTab } from "./PkiAlertsTab";
+export { CertificatesSection } from "./CertificatesSection";

frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx

@@ -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 = () => {

frontend/src/pages/kms/KmipPage/components/KmipClientCertificateModal.tsx

@@ -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;

frontend/src/pages/middlewares/authenticate.tsx

@@ -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"
         });

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -21,6 +21,7 @@ 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";
@@ -92,6 +93,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       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}`);
   }
@@ -158,6 +161,9 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       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}`);
   }

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/TeamCityConnectionForm.tsx

@@ -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>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/OrgEncryptionTab/ExternalKmsItem.tsx

@@ -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>
+  );
+};

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

@@ -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>

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx

@@ -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 && (

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/SecretSyncDestinationCol.tsx

@@ -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}`

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/TeamCitySyncDestinationCol.tsx

@@ -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} />;
+};

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts

@@ -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}`);
   }

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx

@@ -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}`);
   }

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/TeamCitySyncDestinationSection.tsx

@@ -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>
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx

@@ -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:

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -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 && (

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/pages/user/PersonalSettingsPage/components/SessionsSection/SessionsTable.tsx

@@ -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>
+    </>
   );
 };