Merge branch 'main' into feat/secretsBatchUI

2026-10-14 07:30:20 +00:00 · 2025-07-18 15:40:07 -03:00
parent a064fae94e e4a28ab0f4
commit 8f77a3ae0b
124 changed files with 2049 additions and 158 deletions
@@ -31,10 +31,10 @@ enum TimeUnit {

 const schema = z.object({
  name: z.string().trim().min(1),
-  pkiCollectionId: z.string(),
-  alertBefore: z.string(),
+  pkiCollectionId: z.string().min(1),
+  alertBefore: z.string().min(1),
  alertUnit: z.nativeEnum(TimeUnit),
-  emails: z.string().trim()
+  emails: z.string().trim().min(1)
 });

 const convertToDays = (unit: TimeUnit, value: number) => {
@@ -37,6 +37,7 @@ import { OracleDBConnectionForm } from "./OracleDBConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
 import { RailwayConnectionForm } from "./RailwayConnectionForm";
 import { RenderConnectionForm } from "./RenderConnectionForm";
+import { SupabaseConnectionForm } from "./SupabaseConnectionForm";
 import { TeamCityConnectionForm } from "./TeamCityConnectionForm";
 import { TerraformCloudConnectionForm } from "./TerraformCloudConnectionForm";
 import { VercelConnectionForm } from "./VercelConnectionForm";
@@ -146,6 +147,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <RailwayConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Checkly:
      return <ChecklyConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Supabase:
+      return <SupabaseConnectionForm onSubmit={onSubmit} />;
    default:
      throw new Error(`Unhandled App ${app}`);
  }
@@ -248,6 +251,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <RailwayConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Checkly:
      return <ChecklyConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Supabase:
+      return <SupabaseConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    default:
      throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
  }
@@ -0,0 +1,159 @@
+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 { AppConnection } from "@app/hooks/api/appConnections/enums";
+import {
+  SupabaseConnectionMethod,
+  TSupabaseConnection
+} from "@app/hooks/api/appConnections/types/supabase-connection";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TSupabaseConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Supabase)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(SupabaseConnectionMethod.AccessToken),
+    credentials: z.object({
+      accessKey: z.string().trim().min(1, "Access Key required"),
+      instanceUrl: z.string().url().optional()
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const SupabaseConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Supabase,
+      method: SupabaseConnectionMethod.AccessToken
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="credentials.instanceUrl"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              isOptional
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Instance URL"
+              tooltipClassName="max-w-sm"
+              tooltipText="Will default to Supabase Cloud if not specified."
+            >
+              <Input
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder="https://api.supabase.com"
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The type of token you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.Supabase].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Token Type"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(SupabaseConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.accessKey"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Access Key Value"
+            >
+              <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 Supabase"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -79,10 +79,14 @@ type TSecretPermissionForm = z.infer<typeof secretPermissionSchema>;
 export const SpecificPrivilegeSecretForm = ({
  privilege,
  policies,
-  onClose
+  onClose,
+  selectedActions = [],
+  secretPath: initialSecretPath
 }: {
  privilege?: TProjectUserPrivilege;
  policies?: TAccessApprovalPolicy[];
+  selectedActions?: ProjectPermissionActions[];
+  secretPath?: string;
  onClose?: () => void;
 }) => {
  const { currentWorkspace } = useWorkspace();
@@ -126,10 +130,11 @@ export const SpecificPrivilegeSecretForm = ({
          }
        : {
            environmentSlug: currentWorkspace.environments?.[0]?.slug,
-            read: false,
-            edit: false,
-            create: false,
-            delete: false,
+            secretPath: initialSecretPath,
+            read: selectedActions.includes(ProjectPermissionActions.Read),
+            edit: selectedActions.includes(ProjectPermissionActions.Edit),
+            create: selectedActions.includes(ProjectPermissionActions.Create),
+            delete: selectedActions.includes(ProjectPermissionActions.Delete),
            temporaryAccess: {
              isTemporary: false
            }
@@ -281,6 +286,8 @@ export const SpecificPrivilegeSecretForm = ({
                  isDisabled={isMemberEditDisabled}
                  className="w-full bg-mineshaft-900 hover:bg-mineshaft-800"
                  onValueChange={(e) => onChange(e)}
+                  position="popper"
+                  dropdownContainerClassName="max-w-none"
                >
                  {currentWorkspace?.environments?.map(({ slug, id, name }) => (
                    <SelectItem value={slug} key={id}>
@@ -309,6 +316,8 @@ export const SpecificPrivilegeSecretForm = ({
                          className="w-full hover:bg-mineshaft-800"
                          placeholder="Select a secret path"
                          onValueChange={(e) => field.onChange(e)}
+                          position="popper"
+                          dropdownContainerClassName="max-w-none"
                        >
                          {selectablePaths.map((path) => (
                            <SelectItem value={path} key={path}>
@@ -636,6 +645,7 @@ export const SpecificPrivilegeSecretForm = ({
        {!!policies && (
          <Button
            type="submit"
+            variant="outline_bg"
            isLoading={privilegeForm.formState.isSubmitting || requestAccess.isPending}
            isDisabled={
              isMemberEditDisabled ||
@@ -647,7 +657,7 @@ export const SpecificPrivilegeSecretForm = ({
            className="mt-4"
            leftIcon={<FontAwesomeIcon icon={faLockOpen} />}
          >
-            Request access
+            Request Access
          </Button>
        )}
      </form>
@@ -21,6 +21,7 @@ import { HumanitecSyncDestinationCol } from "./HumanitecSyncDestinationCol";
 import { OCIVaultSyncDestinationCol } from "./OCIVaultSyncDestinationCol";
 import { RailwaySyncDestinationCol } from "./RailwaySyncDestinationCol";
 import { RenderSyncDestinationCol } from "./RenderSyncDestinationCol";
+import { SupabaseSyncDestinationCol } from "./SupabaseSyncDestinationCol";
 import { TeamCitySyncDestinationCol } from "./TeamCitySyncDestinationCol";
 import { TerraformCloudSyncDestinationCol } from "./TerraformCloudSyncDestinationCol";
 import { VercelSyncDestinationCol } from "./VercelSyncDestinationCol";
@@ -85,6 +86,8 @@ export const SecretSyncDestinationCol = ({ secretSync }: Props) => {
      return <RailwaySyncDestinationCol secretSync={secretSync} />;
    case SecretSync.Checkly:
      return <ChecklySyncDestinationCol secretSync={secretSync} />;
+    case SecretSync.Supabase:
+      return <SupabaseSyncDestinationCol secretSync={secretSync} />;
    default:
      throw new Error(
        `Unhandled Secret Sync Destination Col: ${(secretSync as TSecretSync).destination}`
@@ -0,0 +1,14 @@
+import { TSupabaseSync } from "@app/hooks/api/secretSyncs/types/supabase";
+
+import { getSecretSyncDestinationColValues } from "../helpers";
+import { SecretSyncTableCell } from "../SecretSyncTableCell";
+
+type Props = {
+  secretSync: TSupabaseSync;
+};
+
+export const SupabaseSyncDestinationCol = ({ secretSync }: Props) => {
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+
+  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};
@@ -170,6 +170,10 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
      primaryText = destinationConfig.accountName;
      secondaryText = "Checkly Account";
      break;
+    case SecretSync.Supabase:
+      primaryText = destinationConfig.projectName;
+      secondaryText = "Supabase Project";
+      break;
    default:
      throw new Error(`Unhandled Destination Col Values ${destination}`);
  }
@@ -1,15 +1,19 @@
 import { Modal, ModalContent } from "@app/components/v2";
+import { ProjectPermissionActions } from "@app/context";
 import { TAccessApprovalPolicy } from "@app/hooks/api/types";
 import { SpecificPrivilegeSecretForm } from "@app/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection";

 export const RequestAccessModal = ({
  isOpen,
  onOpenChange,
-  policies
+  policies,
+  ...props
 }: {
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  policies: TAccessApprovalPolicy[];
+  selectedActions?: ProjectPermissionActions[];
+  secretPath?: string;
 }) => {
  return (
    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -18,7 +22,11 @@ export const RequestAccessModal = ({
        title="Request Access"
        subTitle="Request access to any secrets and resources based on the predefined policies."
      >
-        <SpecificPrivilegeSecretForm onClose={() => onOpenChange(false)} policies={policies} />
+        <SpecificPrivilegeSecretForm
+          onClose={() => onOpenChange(false)}
+          policies={policies}
+          {...props}
+        />
      </ModalContent>
    </Modal>
  );
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { subject } from "@casl/ability";
-import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowUp, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
@@ -11,10 +11,12 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner } from "@app/components/permissions";
 import {
+  Button,
  Checkbox,
  ContentLoader,
  Modal,
  ModalContent,
+  PageHeader,
  Pagination,
  Tooltip
 } from "@app/components/v2";
@@ -50,7 +52,9 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
 import { useCreateCommit } from "@app/hooks/api/secrets/mutations";
 import { SecretV3RawSanitized } from "@app/hooks/api/types";
+import { usePathAccessPolicies } from "@app/hooks/usePathAccessPolicies";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
+import { RequestAccessModal } from "@app/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal";
 import { SecretRotationListView } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView";

 import { SecretTableResourceCount } from "../OverviewPage/components/SecretTableResourceCount";
@@ -125,7 +129,10 @@ const Page = () => {

  const [snapshotId, setSnapshotId] = useState<string | null>(null);
  const isRollbackMode = Boolean(snapshotId);
-  const { popUp, handlePopUpClose, handlePopUpToggle } = usePopUp(["snapshots"] as const);
+  const { popUp, handlePopUpClose, handlePopUpToggle, handlePopUpOpen } = usePopUp([
+    "snapshots",
+    "requestAccess"
+  ] as const);

  // env slug
  const workspaceId = currentWorkspace?.id || "";
@@ -149,6 +156,26 @@ const Page = () => {
    }
  );

+  const canEditSecrets = permission.can(
+    ProjectPermissionSecretActions.Edit,
+    subject(ProjectPermissionSub.Secrets, {
+      environment,
+      secretPath,
+      secretName: "*",
+      secretTags: ["*"]
+    })
+  );
+
+  const canDeleteSecrets = permission.can(
+    ProjectPermissionSecretActions.Delete,
+    subject(ProjectPermissionSub.Secrets, {
+      environment,
+      secretPath,
+      secretName: "*",
+      secretTags: ["*"]
+    })
+  );
+
  const canReadSecretValue = hasSecretReadValueOrDescribePermission(
    permission,
    ProjectPermissionSecretActions.ReadValue,
@@ -274,6 +301,8 @@ const Page = () => {
    permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags) ? workspaceId : ""
  );

+  const { pathPolicies, hasPathPolicies } = usePathAccessPolicies({ secretPath, environment });
+
  const { data: boardPolicy } = useGetSecretApprovalPolicyOfABoard({
    workspaceId,
    environment,
@@ -666,6 +695,52 @@ const Page = () => {
  const mergedFolders = getMergedFoldersWithPending();
  return (
    <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:[color-scheme:dark]">
+      <PageHeader
+        title={
+          currentWorkspace.environments.find((env) => env.slug === environment)?.name ?? environment
+        }
+        description={
+          <p className="text-md text-bunker-300">
+            Inject your secrets using
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/cli/overview"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Infisical CLI
+            </a>
+            ,
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/documentation/getting-started/api"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Infisical API
+            </a>
+            ,
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/sdks/overview"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Infisical SDKs
+            </a>
+            , and
+            <a
+              className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+              href="https://infisical.com/docs/documentation/getting-started/introduction"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              more
+            </a>
+            .
+          </p>
+        }
+      />
      <SecretV2MigrationSection />
      {!isRollbackMode ? (
        <>
@@ -689,8 +764,15 @@ const Page = () => {
            importedBy={importedBy}
            usedBySecretSyncs={usedBySecretSyncs}
            isPITEnabled={isPITEnabled}
+            hasPathPolicies={hasPathPolicies}
+            onRequestAccess={(params) => handlePopUpOpen("requestAccess", params)}
          />
-          <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md rounded-b-none bg-mineshaft-800 text-left text-sm text-bunker-300">
+          <div
+            className={twMerge(
+              "thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300",
+              isNotEmpty && "rounded-b-none"
+            )}
+          >
            <div className="flex flex-col" id="dashboard">
              {isNotEmpty && (
                <div
@@ -737,6 +819,62 @@ const Page = () => {
                  <div className="flex-grow px-4 py-2">Value</div>
                </div>
              )}
+              {hasPathPolicies &&
+                // eslint-disable-next-line no-nested-ternary
+                (!canReadSecret ? (
+                  <div
+                    className={twMerge(
+                      "flex border-l-2 border-l-primary bg-mineshaft-700 px-4 py-2",
+                      isNotEmpty ? "border-b border-b-mineshaft-600" : ""
+                    )}
+                  >
+                    <div className="flex items-center text-sm">
+                      <FontAwesomeIcon
+                        icon={faInfoCircle}
+                        className="ml-[0.15rem] mr-[1.65rem] text-primary"
+                      />
+                      <span>You do not have permission to read secrets in this folder</span>
+                    </div>
+                    <Button
+                      variant="outline_bg"
+                      size="xs"
+                      className="ml-auto"
+                      onClick={() =>
+                        handlePopUpOpen("requestAccess", [ProjectPermissionActions.Read])
+                      }
+                    >
+                      Request Access
+                    </Button>
+                  </div>
+                ) : !canEditSecrets || !canDeleteSecrets ? (
+                  <div className="flex border-b border-l-2 border-b-mineshaft-600 border-l-primary bg-mineshaft-700 px-4 py-2">
+                    <div className="flex items-center text-sm">
+                      <FontAwesomeIcon
+                        icon={faInfoCircle}
+                        className="ml-[0.15rem] mr-[1.65rem] text-primary"
+                      />
+                      <span>
+                        You do not have permission to {!canEditSecrets ? "edit" : ""}
+                        {!canEditSecrets && !canDeleteSecrets ? " or " : ""}
+                        {!canDeleteSecrets ? "delete" : ""} secrets in this folder
+                      </span>
+                    </div>
+                    <Button
+                      variant="outline_bg"
+                      size="xs"
+                      className="ml-auto"
+                      onClick={() =>
+                        handlePopUpOpen("requestAccess", [
+                          ...(!canEditSecrets ? [ProjectPermissionActions.Edit] : []),
+                          ...(!canDeleteSecrets ? [ProjectPermissionActions.Delete] : [])
+                        ])
+                      }
+                    >
+                      Request Access
+                    </Button>
+                  </div>
+                ) : null)}
+
              {canReadSecretImports && Boolean(imports?.length) && (
                <SecretImportListView
                  searchTerm={debouncedSearchFilter}
@@ -835,6 +973,17 @@ const Page = () => {
              />
            </ModalContent>
          </Modal>
+          {!!pathPolicies && (
+            <RequestAccessModal
+              policies={pathPolicies}
+              isOpen={popUp.requestAccess.isOpen}
+              onOpenChange={() => {
+                handlePopUpClose("requestAccess");
+              }}
+              selectedActions={popUp.requestAccess.data}
+              secretPath={pathPolicies?.[0]?.secretPath}
+            />
+          )}
          <SecretDropzone
            environment={environment}
            workspaceId={workspaceId}
@@ -46,6 +46,7 @@ import {
  DropdownSubMenuTrigger,
  IconButton,
  Modal,
+  ModalClose,
  ModalContent,
  Tooltip
 } from "@app/components/v2";
@@ -53,11 +54,13 @@ import {
  ProjectPermissionActions,
  ProjectPermissionDynamicSecretActions,
  ProjectPermissionSub,
+  useProjectPermission,
  useSubscription,
  useWorkspace
 } from "@app/context";
 import {
  ProjectPermissionCommitsActions,
+  ProjectPermissionSecretActions,
  ProjectPermissionSecretRotationActions
 } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
@@ -131,6 +134,8 @@ type Props = {
    }[];
  }[];
  isPITEnabled: boolean;
+  onRequestAccess: (actions: ProjectPermissionActions[]) => void;
+  hasPathPolicies: boolean;
 };

 export const ActionBar = ({
@@ -152,7 +157,9 @@ export const ActionBar = ({
  protectedBranchPolicyName,
  importedBy,
  isPITEnabled = false,
-  usedBySecretSyncs
+  usedBySecretSyncs,
+  onRequestAccess,
+  hasPathPolicies
 }: Props) => {
  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
    "addFolder",
@@ -164,7 +171,8 @@ export const ActionBar = ({
    "misc",
    "upgradePlan",
    "replicateFolder",
-    "confirmUpload"
+    "confirmUpload",
+    "requestAccess"
  ] as const);
  const isProtectedBranch = Boolean(protectedBranchPolicyName);
  const { subscription } = useSubscription();
@@ -186,6 +194,7 @@ export const ActionBar = ({
  const isMultiSelectActive = Boolean(Object.keys(selectedSecrets).length);

  const { currentWorkspace } = useWorkspace();
+  const { permission } = useProjectPermission();

  const handleFolderCreate = async (folderName: string, description: string | null) => {
    try {
@@ -835,27 +844,50 @@ export const ActionBar = ({
          </ProjectPermissionCan>
        </div>
        <div className="flex items-center">
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
-            a={subject(ProjectPermissionSub.Secrets, {
-              environment,
-              secretPath,
-              secretName: "*",
-              secretTags: ["*"]
-            })}
-          >
-            {(isAllowed) => (
-              <Button
-                variant="outline_bg"
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => openPopUp(PopUpNames.CreateSecretForm)}
-                className="h-10 rounded-r-none"
-                isDisabled={!isAllowed}
-              >
-                Add Secret
-              </Button>
-            )}
-          </ProjectPermissionCan>
+          {hasPathPolicies ? (
+            <Button
+              variant="outline_bg"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() =>
+                permission.can(
+                  ProjectPermissionSecretActions.Create,
+                  subject(ProjectPermissionSub.Secrets, {
+                    environment,
+                    secretPath,
+                    secretName: "*",
+                    secretTags: ["*"]
+                  })
+                )
+                  ? openPopUp(PopUpNames.CreateSecretForm)
+                  : handlePopUpOpen("requestAccess", [ProjectPermissionActions.Create])
+              }
+              className="h-10 rounded-r-none"
+            >
+              Add Secret
+            </Button>
+          ) : (
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Create}
+              a={subject(ProjectPermissionSub.Secrets, {
+                environment,
+                secretPath,
+                secretName: "*",
+                secretTags: ["*"]
+              })}
+            >
+              {(isAllowed) => (
+                <Button
+                  variant="outline_bg"
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  onClick={() => openPopUp(PopUpNames.CreateSecretForm)}
+                  className="h-10 rounded-r-none"
+                  isDisabled={!isAllowed}
+                >
+                  Add Secret
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          )}
          <DropdownMenu
            open={popUp.misc.isOpen}
            onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
@@ -1194,6 +1226,27 @@ export const ActionBar = ({
          )}
        </ModalContent>
      </Modal>
+      <Modal
+        isOpen={popUp?.requestAccess?.isOpen}
+        onOpenChange={(open) => handlePopUpToggle("requestAccess", open)}
+      >
+        <ModalContent title="Access Restricted">
+          <p className="mb-2 text-bunker-300">You do not have permission to perform this action.</p>
+          <p className="text-bunker-300">Request access to perform this action in this folder.</p>
+          <div className="mt-8 flex items-center gap-4">
+            <ModalClose asChild>
+              <Button onClick={() => onRequestAccess(popUp?.requestAccess.data)}>
+                Request Access
+              </Button>
+            </ModalClose>
+            <ModalClose asChild>
+              <Button variant="plain" colorSchema="secondary">
+                Cancel
+              </Button>
+            </ModalClose>
+          </div>
+        </ModalContent>
+      </Modal>
    </>
  );
 };
@@ -262,7 +262,7 @@ export const SecretDropzone = ({
        className={twMerge(
          "relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 px-2 py-4 text-sm text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100",
          isDragActive && "opacity-100",
-          !isSmaller && "mx-auto w-full max-w-3xl flex-col space-y-4 py-20",
+          !isSmaller && "mx-auto mt-40 w-full max-w-3xl flex-col space-y-4 py-20",
          isLoading && "bg-bunker-800"
        )}
      >
@@ -32,6 +32,7 @@ import { HumanitecSyncDestinationSection } from "./HumanitecSyncDestinationSecti
 import { OCIVaultSyncDestinationSection } from "./OCIVaultSyncDestinationSection";
 import { RailwaySyncDestinationSection } from "./RailwaySyncDestinationSection";
 import { RenderSyncDestinationSection } from "./RenderSyncDestinationSection";
+import { SupabaseSyncDestinationSection } from "./SupabaseSyncDestinationSection";
 import { TeamCitySyncDestinationSection } from "./TeamCitySyncDestinationSection";
 import { TerraformCloudSyncDestinationSection } from "./TerraformCloudSyncDestinationSection";
 import { VercelSyncDestinationSection } from "./VercelSyncDestinationSection";
@@ -130,6 +131,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
    case SecretSync.Checkly:
      DestinationComponents = <ChecklySyncDestinationSection secretSync={secretSync} />;
      break;
+    case SecretSync.Supabase:
+      DestinationComponents = <SupabaseSyncDestinationSection secretSync={secretSync} />;
+      break;
    default:
      throw new Error(`Unhandled Destination Section components: ${destination}`);
  }
@@ -0,0 +1,12 @@
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { TSupabaseSync } from "@app/hooks/api/secretSyncs/types/supabase";
+
+type Props = {
+  secretSync: TSupabaseSync;
+};
+
+export const SupabaseSyncDestinationSection = ({ secretSync }: Props) => {
+  const { destinationConfig } = secretSync;
+
+  return <GenericFieldLabel label="Project">{destinationConfig.projectName}</GenericFieldLabel>;
+};
@@ -63,6 +63,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
    case SecretSync.CloudflareWorkers:
    case SecretSync.Zabbix:
    case SecretSync.Railway:
+    case SecretSync.Supabase:
    case SecretSync.Checkly:
      AdditionalSyncOptionsComponent = null;
      break;