fix(ui): some flag fixes

frontend/app/components/FFlags/NewFFlag/Conditions.tsx

@@ -6,6 +6,7 @@ import { nonFlagFilters } from 'Types/filter/newFilter';
 import { observer } from 'mobx-react-lite';
 import { Conditions } from "App/mstore/types/FeatureFlag";
 import FilterSelection from 'Shared/Filters/FilterSelection';
+import { toast } from 'react-toastify';
 
 interface Props {
   set: number;
@@ -17,7 +18,10 @@ interface Props {
 
 function RolloutCondition({ set, conditions, removeCondition, index, readonly }: Props) {
   const [forceRender, forceRerender] = React.useState(false);
-  const onAddFilter = (filter = {}) => {
+  const onAddFilter = (filter: Record<string, any> = {}) => {
+    if (conditions.filter.filters.findIndex(f => f.key === filter.key) !== -1) {
+      return toast.error('Filter already exists')
+    }
     conditions.filter.addFilter(filter);
     forceRerender(!forceRender);
   };

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-main font-normal cursor-pointer mr-10 hover:underline"}
+            className={'ml-auto text-main font-normal cursor-pointer mr-10 hover:underline'}
             onClick={featureFlagsStore.currentFflag!.redistributeVariants}
           >
             Distribute Equally
@@ -76,7 +76,7 @@ function Multivariant() {
               </div>
               <div style={{ flex: 4 }}>
                 <Input
-                  placeholder={`buy-btn-variant-${ind+1}`}
+                  placeholder={`buy-btn-variant-${ind + 1}`}
                   value={variant.value}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     variant.setKey(e.target.value)
@@ -137,9 +137,11 @@ function Multivariant() {
         })}
       </div>
       <div className={'mt-2 flex justify-between w-full'}>
-        <Button variant={'text-primary'} onClick={featureFlagsStore.currentFflag!.addVariant}>
-          + Add Variant
-        </Button>
+        {featureFlagsStore.currentFflag!.variants.length <= 10 ? (
+          <Button variant={'text-primary'} onClick={featureFlagsStore.currentFflag!.addVariant}>
+            + Add Variant
+          </Button>
+        ) : null}
         {featureFlagsStore.currentFflag!.isRedDistribution ? (
           <div className={'text-red mr-10'}>Total distribution is less than 100%.</div>
         ) : null}

frontend/app/components/FFlags/NewFFlag/NewFFlag.tsx

@@ -50,7 +50,7 @@ function NewFFlag({ siteId, fflagId }: { siteId: string; fflagId?: string }) {
   };
 
   const onCancel = () => {
-    history.push(withSiteId(fflags(), siteId));
+    history.goBack()
   };
 
   const onError = (e: string) => toast.error(`Failed to update flag: ${e}`)