From ee98992d9e7bd30ab26fd5df172bd6a91a79ec15 Mon Sep 17 00:00:00 2001
From: carlosmonastyrski <charly.monastyrski@gmail.com>
Date: Thu, 12 Jun 2025 20:56:15 -0300
Subject: [PATCH 1/2] fix(secret-sync): allow users to input custom branch
 names as Vercel only send a max of 100 with no pagination available

---
 .../VercelSyncFields.tsx                      | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx
index 5c328079d..8bf85d31a 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
 import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import {
   TVercelConnectionApp,
   useVercelConnectionListOrganizations
@@ -174,17 +175,36 @@ export const VercelSyncFields = () => {
               errorText={error?.message}
               label="Vercel Preview Branch (Optional)"
             >
-              <FilterableSelect
-                menuPlacement="top"
+              <CreatableSelect
+                className="w-full"
+                placeholder="Select a branch..."
                 isLoading={isProjectsLoading && Boolean(connectionId) && Boolean(currentApp)}
                 isDisabled={!connectionId || !currentApp}
+                options={previewBranchOptions}
+                menuPlacement="top"
                 value={previewBranchOptions.find((branch) => branch.id === value) ?? null}
                 onChange={(option) => onChange((option as SingleValue<{ id: string }>)?.id || "")}
-                options={previewBranchOptions}
-                placeholder="Select a branch..."
+                onCreateOption={(option) => {
+                  onChange(option);
+                  if (!option || option.trim() === "") return;
+                  previewBranchOptions.push({ id: option, name: option });
+                }}
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                getNewOptionData={(inputValue, _optionLabel) => {
+                  return {
+                    id: inputValue,
+                    name: `Use custom input "${inputValue}" - press Enter`
+                  };
+                }}
                 getOptionLabel={(option) => option.name}
                 getOptionValue={(option) => option?.id || ""}
-                isClearable
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                isValidNewOption={(inputValue, _value, _options, _accessors) => {
+                  return (
+                    inputValue.trim().length > 0 &&
+                    previewBranchOptions.filter((branch) => branch.id === inputValue).length === 0
+                  );
+                }}
               />
             </FormControl>
           )}

From 4e60cff4bd6fc8466ec9d729a3bcd6be685090cb Mon Sep 17 00:00:00 2001
From: carlosmonastyrski <charly.monastyrski@gmail.com>
Date: Fri, 13 Jun 2025 13:41:34 -0300
Subject: [PATCH 2/2] feat(secret-sync): Improve Vercel custom option label

---
 .../forms/SecretSyncDestinationFields/VercelSyncFields.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx
index 8bf85d31a..61013483f 100644
--- a/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx
+++ b/frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/VercelSyncFields.tsx
@@ -193,7 +193,7 @@ export const VercelSyncFields = () => {
                 getNewOptionData={(inputValue, _optionLabel) => {
                   return {
                     id: inputValue,
-                    name: `Use custom input "${inputValue}" - press Enter`
+                    name: `${inputValue} - press Enter`
                   };
                 }}
                 getOptionLabel={(option) => option.name}