From f9ce134f44bf1beb9e5d6b4d41755807565d944b Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 6 Jul 2023 16:32:00 +0200
Subject: [PATCH] fix(ui): max length for variant and flag key

---
 frontend/app/components/FFlags/NewFFlag/Multivariant.tsx | 5 +++--
 frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx     | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx b/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
index dde352620..aca69094a 100644
--- a/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
@@ -78,9 +78,10 @@ function Multivariant() {
                 <Input
                   placeholder={`buy-btn-variant-${ind + 1}`}
                   value={variant.value}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    if (e.target.value?.length > 25) return;
                     variant.setKey(e.target.value)
-                  }
+                  }}
                 />
               </div>
               <div style={{ flex: 4 }}>
diff --git a/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx b/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
index 1240c0dd4..2a9b5d024 100644
--- a/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
@@ -103,6 +103,7 @@ function NewFFlag({ siteId, fflagId }: { siteId: string; fflagId?: string }) {
           placeholder={'new-unique-key'}
           value={current.flagKey}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            if (e.target.value?.length > 60) return;
             current.setFlagKey(e.target.value.replace(/\s/g, '-'));
           }}
         />