merge main

2026-10-18 00:51:15 +00:00 · 2025-06-02 16:24:55 -07:00
parent d924580599 739ef8e05a
commit 8730d14104
722 changed files with 30947 additions and 13097 deletions
@@ -34,6 +34,11 @@ import {
  Tr
 } from "@app/components/v2";
 import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -103,7 +108,14 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
    setOrderBy,
    setOrderDirection,
    toggleOrderDirection
-  } = usePagination<GroupsOrderBy>(GroupsOrderBy.Name, { initPerPage: 20 });
+  } = usePagination<GroupsOrderBy>(GroupsOrderBy.Name, {
+    initPerPage: getUserTablePreference("orgGroupsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("orgGroupsTable", PreferenceKey.PerPage, newPerPage);
+  };

  const filteredGroups = useMemo(() => {
    const filtered = search
@@ -376,7 +388,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isPending && !filteredGroups?.length && (
@@ -138,7 +138,8 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
          accessTokenTTL: 2592000,
          accessTokenMaxTTL: 2592000,
-          accessTokenNumUsesLimit: 0
+          accessTokenNumUsesLimit: 0,
+          accessTokenPeriod: 0
        });

        handlePopUpToggle("identity", false);
@@ -42,6 +42,11 @@ import {
  Tr
 } from "@app/components/v2";
 import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetOrgRoles, useSearchIdentities, useUpdateIdentity } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -76,7 +81,15 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
    perPage,
    page,
    setPerPage
-  } = usePagination<OrgIdentityOrderBy>(OrgIdentityOrderBy.Name);
+  } = usePagination<OrgIdentityOrderBy>(OrgIdentityOrderBy.Name, {
+    initPerPage: getUserTablePreference("identityTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("identityTable", PreferenceKey.PerPage, newPerPage);
+  };
+
  const [filteredRoles, setFilteredRoles] = useState<string[]>([]);

  const organizationId = currentOrg?.id || "";
@@ -379,7 +392,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
            page={page}
            perPage={perPage}
            onChangePage={(newPage) => setPage(newPage)}
-            onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isPending && data && data?.identities.length === 0 && (
@@ -41,6 +41,13 @@ const schema = z
        (value) => Number(value) <= 315360000,
        "Access Max Token TTL cannot be greater than 315360000"
      ),
+    accessTokenPeriod: z
+      .string()
+      .optional()
+      .refine(
+        (value) => !value || Number(value) <= 315360000,
+        "Access Token Period cannot be greater than 315360000"
+      ),
    accessTokenNumUsesLimit: z.string(),
    clientSecretTrustedIps: z
      .object({
@@ -90,7 +97,8 @@ export const IdentityUniversalAuthForm = ({
    control,
    handleSubmit,
    reset,
-    formState: { isSubmitting }
+    formState: { isSubmitting },
+    watch
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
@@ -98,10 +106,13 @@ export const IdentityUniversalAuthForm = ({
      accessTokenMaxTTL: "2592000",
      accessTokenNumUsesLimit: "0",
      clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+      accessTokenPeriod: "0"
    }
  });

+  const accessTokenPeriodValue = Number(watch("accessTokenPeriod"));
+
  const {
    fields: clientSecretTrustedIpsFields,
    append: appendClientSecretTrustedIp,
@@ -119,6 +130,7 @@ export const IdentityUniversalAuthForm = ({
        accessTokenTTL: String(data.accessTokenTTL),
        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenPeriod: String(data.accessTokenPeriod),
        clientSecretTrustedIps: data.clientSecretTrustedIps.map(
          ({ ipAddress, prefix }: IdentityTrustedIp) => {
            return {
@@ -139,6 +151,7 @@ export const IdentityUniversalAuthForm = ({
        accessTokenTTL: "2592000",
        accessTokenMaxTTL: "2592000",
        accessTokenNumUsesLimit: "0",
+        accessTokenPeriod: "0",
        clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
      });
@@ -150,7 +163,8 @@ export const IdentityUniversalAuthForm = ({
    accessTokenMaxTTL,
    accessTokenNumUsesLimit,
    clientSecretTrustedIps,
-    accessTokenTrustedIps
+    accessTokenTrustedIps,
+    accessTokenPeriod
  }: FormData) => {
    try {
      if (!identityId) return;
@@ -164,7 +178,8 @@ export const IdentityUniversalAuthForm = ({
          accessTokenTTL: Number(accessTokenTTL),
          accessTokenMaxTTL: Number(accessTokenMaxTTL),
          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
-          accessTokenTrustedIps
+          accessTokenTrustedIps,
+          accessTokenPeriod: Number(accessTokenPeriod)
        });
      } else {
        // create new universal auth configuration
@@ -176,7 +191,8 @@ export const IdentityUniversalAuthForm = ({
          accessTokenTTL: Number(accessTokenTTL),
          accessTokenMaxTTL: Number(accessTokenMaxTTL),
          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
-          accessTokenTrustedIps
+          accessTokenTrustedIps,
+          accessTokenPeriod: Number(accessTokenPeriod)
        });
      }

@@ -214,34 +230,42 @@ export const IdentityUniversalAuthForm = ({
          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
        </TabList>
        <TabPanel value={IdentityFormTab.Configuration}>
-          <Controller
-            control={control}
-            defaultValue="2592000"
-            name="accessTokenTTL"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token TTL (seconds)"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            defaultValue="2592000"
-            name="accessTokenMaxTTL"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token Max TTL (seconds)"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
+          {accessTokenPeriodValue > 0 ? (
+            <div className="mb-4 text-xs text-bunker-400">
+              When Access Token Period is set, TTL and Max TTL are ignored.
+            </div>
+          ) : (
+            <>
+              <Controller
+                control={control}
+                defaultValue="2592000"
+                name="accessTokenTTL"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Access Token TTL (seconds)"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                defaultValue="2592000"
+                name="accessTokenMaxTTL"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Access Token Max TTL (seconds)"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+                  </FormControl>
+                )}
+              />
+            </>
+          )}
          <Controller
            control={control}
            defaultValue="0"
@@ -256,6 +280,21 @@ export const IdentityUniversalAuthForm = ({
              </FormControl>
            )}
          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenPeriod"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Period (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                helperText="For periodic tokens: set a period (in seconds) to allow indefinite renewal. Set to 0 to disable periodic tokens and use TTL-based expiration."
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
        </TabPanel>
        <TabPanel value={IdentityFormTab.Advanced}>
          {clientSecretTrustedIpsFields.map(({ id }, index) => (
@@ -42,6 +42,11 @@ import {
  useSubscription,
  useUser
 } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import {
  useFetchServerStatus,
@@ -170,7 +175,14 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
    setOrderBy,
    setOrderDirection,
    toggleOrderDirection
-  } = usePagination<OrgMembersOrderBy>(OrgMembersOrderBy.Name, { initPerPage: 20 });
+  } = usePagination<OrgMembersOrderBy>(OrgMembersOrderBy.Name, {
+    initPerPage: getUserTablePreference("orgMembersTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("orgMembersTable", PreferenceKey.PerPage, newPerPage);
+  };

  const filteredUsers = useMemo(
    () =>
@@ -513,7 +525,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isMembersLoading && !filteredUsers?.length && (
@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
-import { Button, Checkbox, Modal, ModalContent } from "@app/components/v2";
+import { Button, Checkbox, Modal, ModalContent, Tooltip } from "@app/components/v2";
 import { useOrgPermission } from "@app/context";
 import { useUpgradePrivilegeSystem } from "@app/hooks/api";

@@ -262,7 +262,6 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                </div>
              </div>
            </div>
-
            <form onSubmit={handleSubmit(handlePrivilegeSystemUpgrade)}>
              <div className="mt-6 flex items-center justify-end gap-4">
                <button
@@ -272,17 +271,27 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                >
                  Cancel
                </button>
-                <Button
-                  type="submit"
-                  variant="solid"
-                  colorSchema="primary"
-                  size="md"
-                  className="w-[120px] bg-primary hover:bg-primary-600"
-                  isDisabled={!isAllChecksCompleted || !isAdmin}
-                  isLoading={isSubmitting}
+                <Tooltip
+                  content={
+                    !isAdmin
+                      ? `You cannot perform this upgrade because you are not an organization admin. (Your current role: ${membership?.role ?? "Unknown"})`
+                      : undefined
+                  }
                >
-                  Upgrade
-                </Button>
+                  <div>
+                    <Button
+                      type="submit"
+                      variant="solid"
+                      colorSchema="primary"
+                      size="md"
+                      className="w-[120px] bg-primary hover:bg-primary-600"
+                      isDisabled={!isAllChecksCompleted || !isAdmin}
+                      isLoading={isSubmitting}
+                    >
+                      Upgrade
+                    </Button>
+                  </div>
+                </Tooltip>
              </div>
            </form>
          </div>
@@ -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 { OnePassConnectionMethod, TOnePassConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TOnePassConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.OnePass)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(OnePassConnectionMethod.ApiToken),
+    credentials: z.object({
+      apiToken: z.string().trim().min(1, "API Token required"),
+      instanceUrl: z.string().trim().url("Invalid Connect Server instance URL")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const OnePassConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.OnePass,
+      method: OnePassConnectionMethod.ApiToken
+    }
+  });
+
+  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.OnePass].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(OnePassConnectionMethod).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 of the 1Password Connect Server instance to authenticate with."
+            >
+              <Input {...field} placeholder="https://1pass.example.com" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.apiToken"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="API 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 1Password"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -9,6 +9,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { DiscriminativePick } from "@app/types";

 import { AppConnectionHeader } from "../AppConnectionHeader";
+import { OnePassConnectionForm } from "./1PasswordConnectionForm";
 import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
 import { AwsConnectionForm } from "./AwsConnectionForm";
 import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
@@ -23,6 +24,7 @@ import { HCVaultConnectionForm } from "./HCVaultConnectionForm";
 import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
 import { LdapConnectionForm } from "./LdapConnectionForm";
 import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
+import { MySqlConnectionForm } from "./MySqlConnectionForm";
 import { OCIConnectionForm } from "./OCIConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
 import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
@@ -91,6 +93,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <PostgresConnectionForm onSubmit={onSubmit} />;
    case AppConnection.MsSql:
      return <MsSqlConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.MySql:
+      return <MySqlConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Camunda:
      return <CamundaConnectionForm onSubmit={onSubmit} />;
    case AppConnection.AzureClientSecrets:
@@ -107,6 +111,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <TeamCityConnectionForm onSubmit={onSubmit} />;
    case AppConnection.OCI:
      return <OCIConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.OnePass:
+      return <OnePassConnectionForm onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled App ${app}`);
  }
@@ -167,6 +173,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <PostgresConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.MsSql:
      return <MsSqlConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.MySql:
+      return <MySqlConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Camunda:
      return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.AzureClientSecrets:
@@ -183,6 +191,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <TeamCityConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.OCI:
      return <OCIConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.OnePass:
+      return <OnePassConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    default:
      throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
  }
@@ -5,7 +5,7 @@ import { FormControl, Input, TextArea } from "@app/components/v2";
 import { slugSchema } from "@app/lib/schemas";

 export const genericAppConnectionFieldsSchema = z.object({
-  name: slugSchema({ min: 1, max: 32, field: "Name" }),
+  name: slugSchema({ min: 1, max: 64, field: "Name" }),
  description: z.string().trim().max(256, "Description cannot exceed 256 characters").nullish()
 });

@@ -19,7 +19,7 @@ import {
  Tooltip
 } from "@app/components/v2";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
-import { DistinguishedNameRegex } from "@app/helpers/string";
+import { DistinguishedNameRegex, UserPrincipalNameRegex } from "@app/helpers/string";
 import {
  LdapConnectionMethod,
  LdapConnectionProvider,
@@ -55,8 +55,13 @@ const formSchema = z.discriminatedUnion("method", [
      dn: z
        .string()
        .trim()
-        .regex(DistinguishedNameRegex, "Invalid Distinguished Name format")
-        .min(1, "Distinguished Name (DN) required"),
+        .min(1, "DN/UPN required")
+        .refine(
+          (value) => DistinguishedNameRegex.test(value) || UserPrincipalNameRegex.test(value),
+          {
+            message: "Invalid DN/UPN format"
+          }
+        ),
      password: z.string().trim().min(1, "Password required"),
      sslRejectUnauthorized: z.boolean(),
      sslCertificate: z
@@ -223,7 +228,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
                    <FormControl
                      errorText={error?.message}
                      isError={Boolean(error?.message)}
-                      label="Binding Distinguished Name (DN)"
+                      label="Binding DN/UPN"
                    >
                      <Input {...field} placeholder="CN=John,OU=Users,DC=example,DC=com" />
                    </FormControl>
@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { MySqlConnectionMethod, TMySqlConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { PlatformManagedConfirmationModal } from "@app/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/shared/PlatformManagedConfirmationModal";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+import {
+  BaseSqlUsernameAndPasswordConnectionSchema,
+  PlatformManagedNoticeBanner,
+  SqlConnectionFields
+} from "./shared";
+
+type Props = {
+  appConnection?: TMySqlConnection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.MySql),
+  isPlatformManagedCredentials: z.boolean().optional()
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(MySqlConnectionMethod.UsernameAndPassword),
+    credentials: BaseSqlUsernameAndPasswordConnectionSchema
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.MySql,
+      method: MySqlConnectionMethod.UsernameAndPassword,
+      credentials: {
+        host: "",
+        port: 3306,
+        database: "default",
+        username: "",
+        password: "",
+        sslEnabled: true,
+        sslRejectUnauthorized: true,
+        sslCertificate: undefined
+      }
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  const isPlatformManagedCredentials = appConnection?.isPlatformManagedCredentials ?? false;
+
+  const confirmSubmit = async (formData: FormData) => {
+    if (formData.isPlatformManagedCredentials) {
+      setShowConfirmation(true);
+      return;
+    }
+
+    await onSubmit(formData);
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={(e) => {
+          setSelectedTabIndex(0);
+          handleSubmit(confirmSubmit)(e);
+        }}
+      >
+        {!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.MySql].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(MySqlConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <SqlConnectionFields
+          isPlatformManagedCredentials={isPlatformManagedCredentials}
+          selectedTabIndex={selectedTabIndex}
+          setSelectedTabIndex={setSelectedTabIndex}
+        />
+        {isPlatformManagedCredentials ? (
+          <PlatformManagedNoticeBanner />
+        ) : (
+          <div className="mt-6 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              colorSchema="secondary"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting || !isDirty}
+            >
+              {isUpdate ? "Update Credentials" : "Connect to Database"}
+            </Button>
+            <ModalClose asChild>
+              <Button colorSchema="secondary" variant="plain">
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        )}
+      </form>
+      <PlatformManagedConfirmationModal
+        onConfirm={() => handleSubmit(onSubmit)()}
+        onOpenChange={setShowConfirmation}
+        isOpen={showConfirmation}
+      />
+    </FormProvider>
+  );
+};
@@ -1,8 +1,11 @@
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { Spinner, Tooltip } from "@app/components/v2";
+import { useSubscription } from "@app/context";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
+import { usePopUp } from "@app/hooks";
 import { useAppConnectionOptions } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

@@ -11,8 +14,11 @@ type Props = {
 };

 export const AppConnectionsSelect = ({ onSelect }: Props) => {
+  const { subscription } = useSubscription();
  const { isPending, data: appConnectionOptions } = useAppConnectionOptions();

+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+
  if (isPending) {
    return (
      <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -23,81 +29,86 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
  }

  return (
-    <>
-      <div className="grid grid-cols-4 gap-2">
-        {appConnectionOptions?.map((option) => {
-          const { image, name, size = 50, icon } = APP_CONNECTION_MAP[option.app];
+    <div className="grid grid-cols-4 gap-2">
+      {appConnectionOptions?.map((option) => {
+        const { image, name, size = 50, enterprise = false, icon } = APP_CONNECTION_MAP[option.app];

-          return (
-            <button
-              type="button"
-              key={option.app}
-              onClick={() => onSelect(option.app)}
-              className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-            >
-              <div className="relative">
-                <img
-                  src={`/images/integrations/${image}`}
-                  style={{
-                    width: `${size}px`
-                  }}
-                  className="mt-auto"
-                  alt={`${name} logo`}
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              enterprise && !subscription.enterpriseAppConnections
+                ? handlePopUpOpen("upgradePlan")
+                : onSelect(option.app)
+            }
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+          >
+            <div className="relative">
+              <img
+                src={`/images/integrations/${image}`}
+                style={{
+                  width: `${size}px`
+                }}
+                className="mt-auto"
+                alt={`${name} logo`}
+              />
+              {icon && (
+                <FontAwesomeIcon
+                  className="-right- absolute -bottom-1.5 -right-1.5 text-primary-700"
+                  size="xl"
+                  icon={icon}
                />
-                {icon && (
-                  <FontAwesomeIcon
-                    className="-right- absolute -bottom-1.5 -right-1.5 text-primary-700"
-                    size="xl"
-                    icon={icon}
-                  />
-                )}
-              </div>
-              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-                {name}
-              </div>
-            </button>
-          );
-        })}
-      </div>
-
-      <div className="mt-2 flex items-center gap-1">
-        <div className="max-w-xs text-center text-sm font-medium text-mineshaft-400 duration-200">
-          Don&#39;t see the connection you&#39;re looking for?
-        </div>
-        <Tooltip
-          side="bottom"
-          className="max-w-sm py-4"
-          content={
-            <>
-              <p className="mb-2">Infisical is constantly adding support for more connections.</p>
-              <p>
-                {`If you don't see the third-party
+              )}
+            </div>
+            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              {name}
+            </div>
+          </button>
+        );
+      })}
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can use every App Connection if you switch to Infisical's Enterprise plan."
+      />
+      <Tooltip
+        side="bottom"
+        className="max-w-sm py-4"
+        content={
+          <>
+            <p className="mb-2">Infisical is constantly adding support for more connections.</p>
+            <p>
+              {`If you don't see the third-party
            app you're looking for,`}{" "}
-                <a
-                  target="_blank"
-                  className="underline hover:text-mineshaft-300"
-                  href="https://infisical.com/slack"
-                  rel="noopener noreferrer"
-                >
-                  let us know on Slack
-                </a>{" "}
-                or{" "}
-                <a
-                  target="_blank"
-                  className="underline hover:text-mineshaft-300"
-                  href="https://github.com/Infisical/infisical/discussions"
-                  rel="noopener noreferrer"
-                >
-                  make a request on GitHub
-                </a>
-                .
-              </p>
-            </>
-          }
-        >
-          <FontAwesomeIcon className="text-mineshaft-400" size="xs" icon={faInfoCircle} />
-        </Tooltip>
-      </div>
-    </>
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://infisical.com/slack"
+                rel="noopener noreferrer"
+              >
+                let us know on Slack
+              </a>{" "}
+              or{" "}
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://github.com/Infisical/infisical/discussions"
+                rel="noopener noreferrer"
+              >
+                make a request on GitHub
+              </a>
+              .
+            </p>
+          </>
+        }
+      >
+        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4">
+          <FontAwesomeIcon className="mt-auto text-xl" icon={faWrench} />
+          <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+            Coming Soon
+          </div>
+        </div>
+      </Tooltip>
+    </div>
  );
 };
@@ -30,6 +30,11 @@ import {
  Tr
 } from "@app/components/v2";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { TAppConnection, useListAppConnections } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
@@ -76,7 +81,14 @@ export const AppConnectionsTable = () => {
    orderBy,
    setOrderDirection,
    setOrderBy
-  } = usePagination<AppConnectionsOrderBy>(AppConnectionsOrderBy.App, { initPerPage: 20 });
+  } = usePagination<AppConnectionsOrderBy>(AppConnectionsOrderBy.App, {
+    initPerPage: getUserTablePreference("appConnectionsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("appConnectionsTable", PreferenceKey.PerPage, newPerPage);
+  };

  const filteredAppConnections = useMemo(
    () =>
@@ -282,7 +294,7 @@ export const AppConnectionsTable = () => {
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isPending && !filteredAppConnections?.length && (
@@ -2,7 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

 import { OrgPermissionCan } from "@app/components/permissions";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";

 import { BillingTabGroup } from "./components";

@@ -24,7 +24,7 @@ export const BillingPage = () => {
          </div>
          <OrgPermissionCan
            passThrough={false}
-            I={OrgPermissionActions.Read}
+            I={OrgPermissionBillingActions.Read}
            a={OrgPermissionSubjects.Billing}
          >
            <BillingTabGroup />
@@ -1,4 +1,9 @@
-import { faCircleCheck, faCircleXmark, faFileInvoice } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCircleCheck,
+  faCircleXmark,
+  faFileInvoice,
+  faInfoCircle
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import {
@@ -10,6 +15,7 @@ import {
  Td,
  Th,
  THead,
+  Tooltip,
  Tr
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
@@ -48,9 +54,26 @@ export const CurrentPlanSection = () => {
              data &&
              data?.rows?.length > 0 &&
              data.rows.map(({ name, allowed, used }) => {
+                let toolTipText = null;
+                if (name === "Organization identity limit") {
+                  toolTipText =
+                    "Identity count is calculated by the total number of user identities and machine identities.";
+                }
+
                return (
                  <Tr key={`current-plan-row-${name}`} className="h-12">
-                    <Td>{name}</Td>
+                    <Td>
+                      {name}
+                      {toolTipText && (
+                        <Tooltip content={toolTipText}>
+                          <FontAwesomeIcon
+                            icon={faInfoCircle}
+                            className="relative bottom-2 left-2"
+                            size="xs"
+                          />
+                        </Tooltip>
+                      )}
+                    </Td>
                    <Td>{displayCell(allowed)}</Td>
                    <Td>{used}</Td>
                  </Tr>
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
 import {
-  OrgPermissionActions,
+  OrgPermissionBillingActions,
  OrgPermissionSubjects,
  useOrganization,
  useSubscription
@@ -112,7 +112,10 @@ export const PreviewSection = () => {
                  Get unlimited members, projects, RBAC, smart alerts, and so much more.
                </p>
              </div>
-              <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
+              <OrgPermissionCan
+                I={OrgPermissionBillingActions.ManageBilling}
+                a={OrgPermissionSubjects.Billing}
+              >
                {(isAllowed) => (
                  <Button
                    onClick={() => handleUpgradeBtnClick()}
@@ -156,7 +159,10 @@ export const PreviewSection = () => {
              }`}
            </p>
            {isInfisicalCloud() && (
-              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+              <OrgPermissionCan
+                I={OrgPermissionBillingActions.ManageBilling}
+                a={OrgPermissionSubjects.Billing}
+              >
                {(isAllowed) => (
                  <button
                    type="button"
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetOrgBillingDetails, useUpdateOrgBillingDetails } from "@app/hooks/api";

 const schema = z
@@ -74,7 +74,10 @@ export const CompanyNameSection = () => {
          name="name"
        />
      </div>
-      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+      <OrgPermissionCan
+        I={OrgPermissionBillingActions.ManageBilling}
+        a={OrgPermissionSubjects.Billing}
+      >
        {(isAllowed) => (
          <Button
            type="submit"
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetOrgBillingDetails, useUpdateOrgBillingDetails } from "@app/hooks/api";

 const schema = z
@@ -75,7 +75,10 @@ export const InvoiceEmailSection = () => {
          name="email"
        />
      </div>
-      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+      <OrgPermissionCan
+        I={OrgPermissionBillingActions.ManageBilling}
+        a={OrgPermissionSubjects.Billing}
+      >
        {(isAllowed) => (
          <Button
            type="submit"
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useAddOrgPmtMethod } from "@app/hooks/api";

 import { PmtMethodsTable } from "./PmtMethodsTable";
@@ -27,7 +27,10 @@ export const PmtMethodsSection = () => {
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-8 flex items-center">
        <h2 className="flex-1 text-xl font-semibold text-white">Payment methods</h2>
-        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
+        <OrgPermissionCan
+          I={OrgPermissionBillingActions.ManageBilling}
+          a={OrgPermissionSubjects.Billing}
+        >
          {(isAllowed) => (
            <Button
              onClick={handleAddPmtMethodBtnClick}
@@ -16,7 +16,7 @@ import {
  THead,
  Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api";

@@ -75,7 +75,7 @@ export const PmtMethodsTable = () => {
                  <Td>{`${exp_month}/${exp_year}`}</Td>
                  <Td>
                    <OrgPermissionCan
-                      I={OrgPermissionActions.Delete}
+                      I={OrgPermissionBillingActions.ManageBilling}
                      a={OrgPermissionSubjects.Billing}
                    >
                      {(isAllowed) => (
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";
 import { usePopUp } from "@app/hooks/usePopUp";

 import { TaxIDModal } from "./TaxIDModal";
@@ -18,7 +18,10 @@ export const TaxIDSection = () => {
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-8 flex items-center">
        <h2 className="flex-1 text-xl font-semibold text-white">Tax ID</h2>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+        <OrgPermissionCan
+          I={OrgPermissionBillingActions.ManageBilling}
+          a={OrgPermissionSubjects.Billing}
+        >
          {(isAllowed) => (
            <Button
              onClick={() => handlePopUpOpen("addTaxID")}
@@ -14,7 +14,7 @@ import {
  THead,
  Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteOrgTaxId, useGetOrgTaxIds } from "@app/hooks/api";

 const taxIDTypeLabelMap: { [key: string]: string } = {
@@ -103,7 +103,7 @@ export const TaxIDTable = () => {
                <Td>{value}</Td>
                <Td>
                  <OrgPermissionCan
-                    I={OrgPermissionActions.Delete}
+                    I={OrgPermissionBillingActions.ManageBilling}
                    a={OrgPermissionSubjects.Billing}
                  >
                    {(isAllowed) => (
@@ -1,5 +1,5 @@
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";
 import { isInfisicalCloud } from "@app/helpers/platform";
 import { withPermission } from "@app/hoc";

@@ -47,5 +47,5 @@ export const BillingTabGroup = withPermission(
      </Tabs>
    );
  },
-  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Billing }
+  { action: OrgPermissionBillingActions.Read, subject: OrgPermissionSubjects.Billing }
 );
@@ -25,6 +25,11 @@ import {
  Tr
 } from "@app/components/v2";
 import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useListGroupUsers, useOidcManageGroupMembershipsEnabled } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -57,7 +62,14 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props
    offset,
    orderDirection,
    toggleOrderDirection
-  } = usePagination(GroupMembersOrderBy.Name, { initPerPage: 10 });
+  } = usePagination(GroupMembersOrderBy.Name, {
+    initPerPage: getUserTablePreference("groupMembersTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("groupMembersTable", PreferenceKey.PerPage, newPerPage);
+  };

  const { currentOrg } = useOrganization();

@@ -163,7 +175,7 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isPending && !filteredGroupMemberships?.length && (
@@ -21,6 +21,11 @@ import {
  THead,
  Tr
 } from "@app/components/v2";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetIdentityProjectMemberships } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -53,7 +58,14 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) =>
    offset,
    orderDirection,
    toggleOrderDirection
-  } = usePagination(IdentityProjectsOrderBy.Name, { initPerPage: 10 });
+  } = usePagination(IdentityProjectsOrderBy.Name, {
+    initPerPage: getUserTablePreference("identityProjectsTable", PreferenceKey.PerPage, 20)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("identityProjectsTable", PreferenceKey.PerPage, newPerPage);
+  };

  const filteredProjectMemberships = useMemo(
    () =>
@@ -132,7 +144,7 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) =>
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isPending && !filteredProjectMemberships?.length && (
@@ -62,12 +62,20 @@ export const ViewIdentityUniversalAuthContent = ({
      onEdit={() => handlePopUpOpen("identityAuthMethod")}
      onDelete={onDelete}
    >
-      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
+      {Number(data.accessTokenPeriod) > 0 ? (
+        <IdentityAuthFieldDisplay label="Access Token Period (seconds)">
+          {data.accessTokenPeriod}
+        </IdentityAuthFieldDisplay>
+      ) : (
+        <>
+          <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
+            {data.accessTokenTTL}
+          </IdentityAuthFieldDisplay>
+          <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
+            {data.accessTokenMaxTTL}
+          </IdentityAuthFieldDisplay>
+        </>
+      )}
      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
        {data.accessTokenNumUsesLimit}
      </IdentityAuthFieldDisplay>
@@ -5,6 +5,7 @@ import { OrgPermissionSubjects } from "@app/context";
 import {
  OrgGatewayPermissionActions,
  OrgPermissionAppConnectionActions,
+  OrgPermissionBillingActions,
  OrgPermissionGroupActions,
  OrgPermissionIdentityActions,
  OrgPermissionKmipActions,
@@ -21,6 +22,13 @@ const generalPermissionSchema = z
  })
  .optional();

+const billingPermissionSchema = z
+  .object({
+    [OrgPermissionBillingActions.Read]: z.boolean().optional(),
+    [OrgPermissionBillingActions.ManageBilling]: z.boolean().optional()
+  })
+  .optional();
+
 const appConnectionsPermissionSchema = z
  .object({
    [OrgPermissionAppConnectionActions.Read]: z.boolean().optional(),
@@ -113,7 +121,7 @@ export const formSchema = z.object({
      scim: generalPermissionSchema,
      [OrgPermissionSubjects.GithubOrgSync]: generalPermissionSchema,
      ldap: generalPermissionSchema,
-      billing: generalPermissionSchema,
+      billing: billingPermissionSchema,
      identity: identityPermissionSchema,
      "organization-admin-console": adminConsolePermissionSchmea,
      [OrgPermissionSubjects.Kms]: generalPermissionSchema,
@@ -0,0 +1,174 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { OrgPermissionBillingActions } from "@app/context/OrgPermissionContext/types";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+const PERMISSION_ACTIONS = [
+  { action: OrgPermissionBillingActions.Read, label: "View bills" },
+  { action: OrgPermissionBillingActions.ManageBilling, label: "Manage billing" }
+] as const;
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-access",
+  Custom = "custom"
+}
+
+export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.billing"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const totalActions = PERMISSION_ACTIONS.length;
+    const score = actions.map((key) => (rule?.[key] ? 1 : 0)).reduce((a, b) => a + b, 0 as number);
+
+    if (isCustom) return Permission.Custom;
+    if (score === 0) return Permission.NoAccess;
+    if (score === totalActions) return Permission.FullAccess;
+    if (score === 1 && rule?.[OrgPermissionBillingActions.Read]) return Permission.ReadOnly;
+    return Permission.Custom;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: false,
+            [OrgPermissionBillingActions.ManageBilling]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: true,
+            [OrgPermissionBillingActions.ManageBilling]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.FullAccess:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: true,
+            [OrgPermissionBillingActions.ManageBilling]: true
+          },
+          { shouldDirty: true }
+        );
+        break;
+      default:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: false,
+            [OrgPermissionBillingActions.ManageBilling]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>Billing</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.billing.${action}`}
+                    key={`permissions.billing.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={field.value}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.billing.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};
@@ -38,13 +38,6 @@ const MEMBERS_PERMISSIONS = [
  { action: "delete", label: "Remove members" }
 ] as const;

-const BILLING_PERMISSIONS = [
-  { action: "read", label: "View bills" },
-  { action: "create", label: "Add payment methods" },
-  { action: "edit", label: "Edit payments" },
-  { action: "delete", label: "Remove payments" }
-] as const;
-
 const PROJECT_TEMPLATES_PERMISSIONS = [
  { action: "read", label: "View & Apply" },
  { action: "create", label: "Create" },
@@ -52,18 +45,16 @@ const PROJECT_TEMPLATES_PERMISSIONS = [
  { action: "delete", label: "Remove" }
 ] as const;

-const getPermissionList = (option: string) => {
-  switch (option) {
-    case "secret-scanning":
-      return SECRET_SCANNING_PERMISSIONS;
-    case "billing":
-      return BILLING_PERMISSIONS;
-    case "incident-contact":
-      return INCIDENT_CONTACTS_PERMISSIONS;
+const getPermissionList = (formName: Props["formName"]) => {
+  switch (formName) {
    case "member":
      return MEMBERS_PERMISSIONS;
    case OrgPermissionSubjects.ProjectTemplates:
      return PROJECT_TEMPLATES_PERMISSIONS;
+    case "secret-scanning":
+      return SECRET_SCANNING_PERMISSIONS;
+    case "incident-contact":
+      return INCIDENT_CONTACTS_PERMISSIONS;
    default:
      return PERMISSIONS;
  }
@@ -74,7 +65,7 @@ type Props = {
  title: string;
  formName: keyof Omit<
    Exclude<TFormSchema["permissions"], undefined>,
-    "workspace" | "organization-admin-console" | "kmip" | "gateway" | "secret-share"
+    "workspace" | "organization-admin-console" | "kmip" | "gateway" | "secret-share" | "billing"
  >;
  setValue: UseFormSetValue<TFormSchema>;
  control: Control<TFormSchema>;
@@ -14,6 +14,7 @@ import {
  TFormSchema
 } from "../OrgRoleModifySection.utils";
 import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
+import { OrgPermissionBillingRow } from "./OrgPermissionBillingRow";
 import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
 import { OrgPermissionGroupRow } from "./OrgPermissionGroupRow";
 import { OrgPermissionIdentityRow } from "./OrgPermissionIdentityRow";
@@ -27,10 +28,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
    title: "User Management",
    formName: "member"
  },
-  {
-    title: "Usage & Billing",
-    formName: "billing"
-  },
  {
    title: "Role Management",
    formName: "role"
@@ -186,6 +183,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                setValue={setValue}
                isEditable={isCustomRole}
              />
+              <OrgPermissionBillingRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
              <OrgPermissionSecretShareRow
                control={control}
                setValue={setValue}
@@ -28,6 +28,11 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { getProjectHomePage } from "@app/helpers/project";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import { useRequestProjectAccess, useSearchProjects } from "@app/hooks/api";
 import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
@@ -104,7 +109,15 @@ export const AllProjectView = ({
    limit,
    toggleOrderDirection,
    orderDirection
-  } = usePagination("name", { initPerPage: 50 });
+  } = usePagination("name", {
+    initPerPage: getUserTablePreference("allProjectsTable", PreferenceKey.PerPage, 50)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("allProjectsTable", PreferenceKey.PerPage, newPerPage);
+  };
+
  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp([
    "requestAccessConfirmation"
  ] as const);
@@ -274,7 +287,7 @@ export const AllProjectView = ({
          count={searchedProjects?.totalCount || 0}
          page={page}
          onChangePage={setPage}
-          onChangePerPage={setPerPage}
+          onChangePerPage={handlePerPageChange}
        />
      )}
      {!isProjectLoading && !searchedProjects?.totalCount && (
@@ -19,6 +19,11 @@ import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, IconButton, Input, Pagination, Skeleton, Tooltip } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { getProjectHomePage } from "@app/helpers/project";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -63,7 +68,15 @@ export const MyProjectView = ({
    limit,
    toggleOrderDirection,
    orderDirection
-  } = usePagination(ProjectOrderBy.Name, { initPerPage: 24 });
+  } = usePagination(ProjectOrderBy.Name, {
+    initPerPage: getUserTablePreference("myProjectsTable", PreferenceKey.PerPage, 24)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("myProjectsTable", PreferenceKey.PerPage, newPerPage);
+  };
+
  const { data: projectFavorites, isPending: isProjectFavoritesLoading } =
    useGetUserProjectFavorites(currentOrg?.id);

@@ -415,7 +428,7 @@ export const MyProjectView = ({
          count={filteredWorkspaces.length}
          page={page}
          onChangePage={setPage}
-          onChangePerPage={setPerPage}
+          onChangePerPage={handlePerPageChange}
        />
      )}
      {isWorkspaceEmpty && (
@@ -30,6 +30,8 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
          allowSecretSharingOutsideOrganization={
            currentOrg?.allowSecretSharingOutsideOrganization ?? true
          }
+          maxSharedSecretLifetime={currentOrg?.maxSharedSecretLifetime}
+          maxSharedSecretViewLimit={currentOrg?.maxSharedSecretViewLimit}
        />
      </ModalContent>
    </Modal>
@@ -17,11 +17,11 @@ export const SecretSharingSettingsPage = withPermission(
    return (
      <>
        <Helmet>
-          <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+          <title>{t("common.head-title", { title: "Secret Share Settings" })}</title>
        </Helmet>
        <div className="flex w-full justify-center bg-bunker-800 text-white">
          <div className="w-full max-w-7xl">
-            <PageHeader title={t("settings.org.title")} />
+            <PageHeader title="Secret Share Settings" />
            <SecretSharingSettingsTabGroup />
          </div>
        </div>
@@ -0,0 +1,294 @@
+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 { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+
+const MAX_SHARED_SECRET_LIFETIME_SECONDS = 30 * 24 * 60 * 60; // 30 days in seconds
+const MIN_SHARED_SECRET_LIFETIME_SECONDS = 5 * 60; // 5 minutes in seconds
+
+// Helper function to convert duration to seconds
+const durationToSeconds = (value: number, unit: "m" | "h" | "d"): number => {
+  switch (unit) {
+    case "m":
+      return value * 60;
+    case "h":
+      return value * 60 * 60;
+    case "d":
+      return value * 60 * 60 * 24;
+    default:
+      return 0;
+  }
+};
+
+// Helper function to convert seconds to form lifetime value and unit
+const getFormLifetimeFromSeconds = (
+  totalSeconds: number | null | undefined
+): { maxLifetimeValue: number; maxLifetimeUnit: "m" | "h" | "d" } => {
+  const DEFAULT_LIFETIME_VALUE = 30;
+  const DEFAULT_LIFETIME_UNIT = "d" as "m" | "h" | "d";
+
+  if (totalSeconds == null || totalSeconds <= 0) {
+    return {
+      maxLifetimeValue: DEFAULT_LIFETIME_VALUE,
+      maxLifetimeUnit: DEFAULT_LIFETIME_UNIT
+    };
+  }
+
+  const secondsInDay = 24 * 60 * 60;
+  const secondsInHour = 60 * 60;
+  const secondsInMinute = 60;
+
+  if (totalSeconds % secondsInDay === 0) {
+    const value = totalSeconds / secondsInDay;
+    if (value >= 1) return { maxLifetimeValue: value, maxLifetimeUnit: "d" };
+  }
+
+  if (totalSeconds % secondsInHour === 0) {
+    const value = totalSeconds / secondsInHour;
+    if (value >= 1) return { maxLifetimeValue: value, maxLifetimeUnit: "h" };
+  }
+
+  if (totalSeconds % secondsInMinute === 0) {
+    const value = totalSeconds / secondsInMinute;
+    if (value >= 1) return { maxLifetimeValue: value, maxLifetimeUnit: "m" };
+  }
+
+  return {
+    maxLifetimeValue: DEFAULT_LIFETIME_VALUE,
+    maxLifetimeUnit: DEFAULT_LIFETIME_UNIT
+  };
+};
+
+const formSchema = z
+  .object({
+    maxLifetimeValue: z.number().min(1, "Value must be at least 1"),
+    maxLifetimeUnit: z.enum(["m", "h", "d"], {
+      invalid_type_error: "Please select a valid time unit"
+    }),
+    maxViewLimit: z.string()
+  })
+  .superRefine((data, ctx) => {
+    const { maxLifetimeValue, maxLifetimeUnit } = data;
+
+    const durationInSeconds = durationToSeconds(maxLifetimeValue, maxLifetimeUnit);
+
+    // Check max limit
+    if (durationInSeconds > MAX_SHARED_SECRET_LIFETIME_SECONDS) {
+      let message = "Duration exceeds maximum allowed limit";
+
+      if (maxLifetimeUnit === "m") {
+        message = `Maximum allowed minutes is ${MAX_SHARED_SECRET_LIFETIME_SECONDS / 60} (30 days)`;
+      } else if (maxLifetimeUnit === "h") {
+        message = `Maximum allowed hours is ${MAX_SHARED_SECRET_LIFETIME_SECONDS / (60 * 60)} (30 days)`;
+      } else if (maxLifetimeUnit === "d") {
+        message = `Maximum allowed days is ${MAX_SHARED_SECRET_LIFETIME_SECONDS / (24 * 60 * 60)}`;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message,
+        path: ["maxLifetimeValue"]
+      });
+    }
+
+    // Check min limit
+    if (durationInSeconds < MIN_SHARED_SECRET_LIFETIME_SECONDS) {
+      const message = `Duration must be at least ${MIN_SHARED_SECRET_LIFETIME_SECONDS / 60} minutes`; // 5 minutes
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message,
+        path: ["maxLifetimeValue"]
+      });
+    }
+  });
+
+type TForm = z.infer<typeof formSchema>;
+
+const viewLimitOptions = [
+  { label: "1", value: 1 },
+  { label: "Unlimited", value: -1 }
+];
+
+export const OrgSecretShareLimitSection = () => {
+  const { mutateAsync } = useUpdateOrg();
+  const { currentOrg } = useOrganization();
+
+  const getDefaultFormValues = () => {
+    const initialLifetime = getFormLifetimeFromSeconds(currentOrg?.maxSharedSecretLifetime);
+    return {
+      maxLifetimeValue: initialLifetime.maxLifetimeValue,
+      maxLifetimeUnit: initialLifetime.maxLifetimeUnit,
+      maxViewLimit: currentOrg?.maxSharedSecretViewLimit?.toString() || "-1"
+    };
+  };
+
+  const {
+    control,
+    formState: { isSubmitting, isDirty },
+    handleSubmit,
+    reset
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultFormValues()
+  });
+
+  useEffect(() => {
+    if (currentOrg) {
+      reset(getDefaultFormValues());
+    }
+  }, [currentOrg, reset]);
+
+  const handleFormSubmit = async (formData: TForm) => {
+    try {
+      const maxSharedSecretLifetimeSeconds = durationToSeconds(
+        formData.maxLifetimeValue,
+        formData.maxLifetimeUnit
+      );
+
+      await mutateAsync({
+        orgId: currentOrg.id,
+        maxSharedSecretViewLimit:
+          formData.maxViewLimit === "-1" ? null : Number(formData.maxViewLimit),
+        maxSharedSecretLifetime: maxSharedSecretLifetimeSeconds
+      });
+
+      createNotification({
+        text: "Successfully updated secret share limits",
+        type: "success"
+      });
+
+      reset(formData);
+    } catch {
+      createNotification({
+        text: "Failed to update secret share limits",
+        type: "error"
+      });
+    }
+  };
+
+  // Units for the dropdown with readable labels
+  const timeUnits = [
+    { value: "m", label: "Minutes" },
+    { value: "h", label: "Hours" },
+    { value: "d", label: "Days" }
+  ];
+
+  return (
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex w-full items-center justify-between">
+        <p className="text-xl font-semibold">Secret Share Limits</p>
+      </div>
+      <p className="mb-4 mt-2 text-sm text-gray-400">
+        These settings establish the maximum limits for all Shared Secret parameters within this
+        organization. Shared secrets cannot be created with values exceeding these limits.
+      </p>
+      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+        {(isAllowed) => (
+          <form onSubmit={handleSubmit(handleFormSubmit)} autoComplete="off">
+            <div className="flex max-w-sm gap-4">
+              <Controller
+                control={control}
+                name="maxLifetimeValue"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    tooltipText="The max amount of time that can be set before the secret share link expires."
+                    label="Max Lifetime"
+                    className="w-full"
+                  >
+                    <Input
+                      {...field}
+                      type="number"
+                      min={1}
+                      step={1}
+                      value={field.value}
+                      onChange={(e) => {
+                        const val = e.target.value;
+                        field.onChange(val === "" ? "" : parseInt(val, 10));
+                      }}
+                      disabled={!isAllowed}
+                    />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="maxLifetimeUnit"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    label="Time unit"
+                  >
+                    <Select
+                      value={field.value}
+                      className="pr-2"
+                      onValueChange={field.onChange}
+                      placeholder="Select time unit"
+                      isDisabled={!isAllowed}
+                    >
+                      {timeUnits.map(({ value, label }) => (
+                        <SelectItem
+                          key={value}
+                          value={value}
+                          className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
+                        >
+                          <div className="ml-3 font-medium">{label}</div>
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="flex max-w-sm">
+              <Controller
+                control={control}
+                name="maxViewLimit"
+                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                  <FormControl
+                    label="Max Views"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    className="w-full"
+                  >
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                      isDisabled={!isAllowed}
+                    >
+                      {viewLimitOptions.map(({ label, value: viewLimitValue }) => (
+                        <SelectItem value={String(viewLimitValue || "")} key={label}>
+                          {label}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+            </div>
+            <Button
+              colorSchema="secondary"
+              type="submit"
+              isLoading={isSubmitting}
+              disabled={!isDirty || !isAllowed}
+              className="mt-4"
+            >
+              Save
+            </Button>
+          </form>
+        )}
+      </OrgPermissionCan>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { OrgSecretShareLimitSection } from "./OrgSecretShareLimitSection";
@@ -1,9 +1,11 @@
+import { OrgSecretShareLimitSection } from "../OrgSecretShareLimitSection";
 import { SecretSharingAllowShareToAnyone } from "../SecretSharingAllowShareToAnyone";

 export const SecretSharingSettingsGeneralTab = () => {
  return (
    <div className="w-full">
      <SecretSharingAllowShareToAnyone />
+      <OrgSecretShareLimitSection />
    </div>
  );
 };
@@ -80,7 +80,7 @@ export const OrgProductSelectSection = () => {

  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-6 py-5">
-      <h2 className="text-xl font-semibold text-mineshaft-100">Organization Products</h2>
+      <h2 className="text-xl font-semibold text-mineshaft-100">Enabled Products</h2>
      <p className="mb-4 text-gray-400">
        Select which products are available for your organization.
      </p>
@@ -96,61 +96,59 @@ export const OrgUserAccessTokenLimitSection = () => {
      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
        {(isAllowed) => (
          <form onSubmit={handleSubmit(handleUserTokenExpirationSubmit)} autoComplete="off">
-            <div className="flex max-w-md gap-4">
-              <div className="flex-1">
-                <Controller
-                  control={control}
-                  name="expirationValue"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                      label="Expiration value"
+            <div className="flex max-w-sm gap-4">
+              <Controller
+                control={control}
+                name="expirationValue"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    label="Expiration value"
+                    className="w-full"
+                  >
+                    <Input
+                      {...field}
+                      type="number"
+                      min={1}
+                      step={1}
+                      value={field.value}
+                      onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
+                      disabled={!isAllowed}
+                    />
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                control={control}
+                name="expirationUnit"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                    label="Time unit"
+                  >
+                    <Select
+                      value={field.value}
+                      className="pr-2"
+                      onValueChange={field.onChange}
+                      placeholder="Select time unit"
+                      isDisabled={!isAllowed}
                    >
-                      <Input
-                        {...field}
-                        type="number"
-                        min={1}
-                        step={1}
-                        value={field.value}
-                        onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
-                        disabled={!isAllowed}
-                      />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex-1">
-                <Controller
-                  control={control}
-                  name="expirationUnit"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                      label="Time unit"
-                    >
-                      <Select
-                        value={field.value}
-                        className="pr-2"
-                        onValueChange={field.onChange}
-                        placeholder="Select time unit"
-                        isDisabled={!isAllowed}
-                      >
-                        {timeUnits.map(({ value, label }) => (
-                          <SelectItem
-                            key={value}
-                            value={value}
-                            className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
-                          >
-                            <div className="ml-3 font-medium">{label}</div>
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
+                      {timeUnits.map(({ value, label }) => (
+                        <SelectItem
+                          key={value}
+                          value={value}
+                          className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
+                        >
+                          <div className="ml-3 font-medium">{label}</div>
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
            </div>
            <Button
              colorSchema="secondary"
@@ -129,7 +129,16 @@ export const OrgGeneralAuthSection = () => {
                      level.
                    </span>
                    <p className="mt-4">
-                      In case of a lockout, admins can use the admin login portal at{" "}
+                      In case of a lockout, admins can use the{" "}
+                      <a
+                        target="_blank"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href="https://infisical.com/docs/documentation/platform/sso/overview#admin-login-portal"
+                        rel="noreferrer"
+                      >
+                        Admin Login Portal
+                      </a>{" "}
+                      at{" "}
                      <a
                        target="_blank"
                        rel="noopener noreferrer"
@@ -212,7 +212,16 @@ export const OrgOIDCSection = (): JSX.Element => {
                      level.
                    </span>
                    <p className="mt-4">
-                      In case of a lockout, admins can use the admin login portal at{" "}
+                      In case of a lockout, admins can use the{" "}
+                      <a
+                        target="_blank"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href="https://infisical.com/docs/documentation/platform/sso/overview#admin-login-portal"
+                        rel="noreferrer"
+                      >
+                        Admin Login Portal
+                      </a>{" "}
+                      at{" "}
                      <a
                        target="_blank"
                        rel="noopener noreferrer"
@@ -20,6 +20,11 @@ import {
  THead,
  Tr
 } from "@app/components/v2";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { OrgUser } from "@app/hooks/api/types";
@@ -52,7 +57,14 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
    offset,
    orderDirection,
    toggleOrderDirection
-  } = usePagination(UserGroupsOrderBy.Name, { initPerPage: 10 });
+  } = usePagination(UserGroupsOrderBy.Name, {
+    initPerPage: getUserTablePreference("userGroupsTable", PreferenceKey.PerPage, 10)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("userGroupsTable", PreferenceKey.PerPage, newPerPage);
+  };

  const filteredGroupMemberships = useMemo(
    () =>
@@ -119,7 +131,7 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isPending && !filteredGroupMemberships?.length && (
@@ -22,6 +22,11 @@ import {
  Tr
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetOrgMembershipProjectMemberships } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -54,7 +59,14 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
    offset,
    orderDirection,
    toggleOrderDirection
-  } = usePagination(UserProjectsOrderBy.Name, { initPerPage: 10 });
+  } = usePagination(UserProjectsOrderBy.Name, {
+    initPerPage: getUserTablePreference("userProjectsTable", PreferenceKey.PerPage, 10)
+  });
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("userProjectsTable", PreferenceKey.PerPage, newPerPage);
+  };

  const { data: projectMemberships = [], isPending } = useGetOrgMembershipProjectMemberships(
    orgId,
@@ -136,7 +148,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
            page={page}
            perPage={perPage}
            onChangePage={setPage}
-            onChangePerPage={setPerPage}
+            onChangePerPage={handlePerPageChange}
          />
        )}
        {!isPending && !filteredProjectMemberships?.length && (
				`@@ -0,0 +1 @@`
				`export { OrgSecretShareLimitSection } from "./OrgSecretShareLimitSection";`