From dbff25713e82b87efa97d47e3f54147951e6a435 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 23 Jun 2023 12:30:49 +0200
Subject: [PATCH] fix(ui): fix rollout min value, fix empty conditions text

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

diff --git a/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx b/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
index 8e3f45173..f8ed98651 100644
--- a/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
@@ -58,7 +58,7 @@ function Multivariant() {
         <div style={{ flex: 4 }} className={'flex items-center'}>
           <Rollout />
           <div
-            className={"ml-auto text-blue font-normal cursor-pointer mr-10"}
+            className={"ml-auto text-main font-normal cursor-pointer mr-10 hover:underline"}
             onClick={featureFlagsStore.currentFflag!.redistributeVariants}
           >
             Distribute Equally
@@ -108,9 +108,10 @@ function Multivariant() {
                   wrapperClassName={'flex-1'}
                   placeholder={avg}
                   value={variant.rolloutPercentage}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    variant.setRollout(parseInt(e.target.value.replace(/\D/g, ''), 10))
-                  }
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    if (e.target.value === '') variant.setRollout(0);
+                    variant.setRollout(parseInt(e.target.value.replace(/\D/g, ''), 10));
+                  }}
                 />
                 <div
                   className={cn(
diff --git a/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx b/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
index aad7f9691..23936c307 100644
--- a/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx
@@ -195,11 +195,11 @@ function NewFFlag({ siteId, fflagId }: { siteId: string; fflagId?: string }) {
           )}
           <NoContent
             show={current.conditions.length === 0}
-            title={'100% of sessions will get this feature flag'}
+            title={'The flag will be available for 100% of the user sessions.'}
             subtext={
               <div className={'flex flex-col items-center'}>
                 <div className={'text-sm mb-1'}>
-                  Indicate the users for whom you intend to make this flag available.
+                  Set up condition sets to restrict the rollout.
                 </div>
                 <Button onClick={() => current!.addCondition()} variant={'text-primary'}>
                   + Create Condition Set