From b8ee40953a3589f771845ab976834eb07ee38b69 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 30 Jun 2023 09:55:46 +0200
Subject: [PATCH] fix(ui): fix fonts for flags

---
 frontend/app/components/FFlags/FFlagsList.tsx | 10 ++---
 .../app/components/FFlags/NewFFlag/HowTo.tsx  | 37 ++++++++++++-------
 .../FFlags/NewFFlag/Multivariant.tsx          |  2 +-
 .../shared/Filters/FilterItem/FilterItem.tsx  |  4 +-
 frontend/app/mstore/featureFlagsStore.ts      |  2 +-
 frontend/app/mstore/types/FeatureFlag.ts      |  3 ++
 6 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/frontend/app/components/FFlags/FFlagsList.tsx b/frontend/app/components/FFlags/FFlagsList.tsx
index 50028a701..0febf8016 100644
--- a/frontend/app/components/FFlags/FFlagsList.tsx
+++ b/frontend/app/components/FFlags/FFlagsList.tsx
@@ -1,3 +1,4 @@
+import {numberWithCommas} from "App/utils";
 import React from 'react';
 import FFlagsListHeader from 'Components/FFlags/FFlagsListHeader';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@@ -91,12 +92,9 @@ function FFlagsList({ siteId }: { siteId: string }) {
             </div>
             <div className="w-full flex items-center justify-between pt-4 px-6">
               <div>
-                {'Showing '}
-                <span className="font-semibold">
-                  {Math.min(featureFlagsStore.total, featureFlagsStore.pageSize)}
-                </span>
-                {' out of '}
-                <span className="font-semibold">{featureFlagsStore.total}</span> Feature Flags
+                Showing <span className="font-medium">{(featureFlagsStore.page - 1) * featureFlagsStore.pageSize + 1}</span> to{' '}
+                <span className="font-medium">{(featureFlagsStore.page - 1) * featureFlagsStore.pageSize + featureFlagsStore.flags.length}</span> of{' '}
+                <span className="font-medium">{numberWithCommas(featureFlagsStore.total)}</span> Feature Flags.
               </div>
               <Pagination
                 page={featureFlagsStore.page}
diff --git a/frontend/app/components/FFlags/NewFFlag/HowTo.tsx b/frontend/app/components/FFlags/NewFFlag/HowTo.tsx
index 0602b254b..02284c71b 100644
--- a/frontend/app/components/FFlags/NewFFlag/HowTo.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/HowTo.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React from 'react';
 // @ts-ignore
-import Highlight from 'react-highlight'
-import { PageTitle } from 'UI'
+import Highlight from 'react-highlight';
+import { PageTitle } from 'UI';
 
 function HowTo() {
   return (
@@ -10,16 +10,16 @@ function HowTo() {
 
       <div className={'my-2'}>
         <Highlight className={'js'}>
-          {
-            `
-type FeatureFlag = { 
-  key: string; 
-  is_persist: boolean; 
-  value: string | boolean; 
-  payload: string 
+          {`
+// can be imported from @openreplay/tracker
+interface IFeatureFlag {
+  key: string
+  is_persist: boolean
+  value: string | boolean
+  payload: string
 }
 
-tracker.onFlagsLoad((flags: FeatureFlag) => {
+tracker.onFlagsLoad((flags: IFeatureFlag[]) => {
  /* run code */
 })
             
@@ -27,12 +27,21 @@ tracker.onFlagsLoad((flags: FeatureFlag) => {
             
 if (openreplay.isFlagEnabled('my_flag')) {
   // run your activation code here
-}`}
+}
+
+// or 
+// returns FeatureFlag if exists
+tracker.getFeatureFlag('my_flag') 
+
+// reload flags from server 
+// (in case if any user data changed during the session)
+tracker.reloadFlags() 
+`}
         </Highlight>
       </div>
       <a className={'link'}>Documentation</a>
     </div>
-  )
+  );
 }
 
-export default HowTo;
\ No newline at end of file
+export default HowTo;
diff --git a/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx b/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
index ceccd46a8..dde352620 100644
--- a/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
+++ b/frontend/app/components/FFlags/NewFFlag/Multivariant.tsx
@@ -137,7 +137,7 @@ function Multivariant() {
         })}
       </div>
       <div className={'mt-2 flex justify-between w-full'}>
-        {featureFlagsStore.currentFflag!.variants.length <= 10 ? (
+        {featureFlagsStore.currentFflag!.variants.length < 10 ? (
           <Button variant={'text-primary'} onClick={featureFlagsStore.currentFflag!.addVariant}>
             + Add Variant
           </Button>
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index 8a023911d..c26b8fbad 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -60,7 +60,7 @@ function FilterItem(props: Props) {
   };
 
   return (
-    <div className="flex items-center hover:bg-active-blue -mx-5 px-5 h-10">
+    <div className="flex items-center hover:bg-active-blue -mx-5 px-5 py-2">
       <div className="flex items-start w-full">
         {!isFilter && (
           <div
@@ -107,7 +107,7 @@ function FilterItem(props: Props) {
                   >
                     {filter.value.map((val: string) => {
                       return filter.options && filter.options.length
-                        ? filter.options[filter.options.findIndex((i: any) => i.value === val)]?.label
+                        ? filter.options[filter.options.findIndex((i: any) => i.value === val)]?.label ?? val
                         : val
                     }).join(', ')}
                   </div>
diff --git a/frontend/app/mstore/featureFlagsStore.ts b/frontend/app/mstore/featureFlagsStore.ts
index 120cb0e6a..7f892b30b 100644
--- a/frontend/app/mstore/featureFlagsStore.ts
+++ b/frontend/app/mstore/featureFlagsStore.ts
@@ -112,7 +112,7 @@ export default class FeatureFlagsStore {
     if (!this.currentFflag.isSingleOption && this.currentFflag?.variants.findIndex((v) => v.value === '') !== -1) {
       return 'All variants must include unique key'
     }
-    if (this.currentFflag?.isRedDistribution) {
+    if (!this.currentFflag?.isSingleOption && this.currentFflag?.isRedDistribution) {
       return 'Variants rollout percentage must add up to 100%'
     }
     return null;
diff --git a/frontend/app/mstore/types/FeatureFlag.ts b/frontend/app/mstore/types/FeatureFlag.ts
index 9b6f689c2..90293cc4b 100644
--- a/frontend/app/mstore/types/FeatureFlag.ts
+++ b/frontend/app/mstore/types/FeatureFlag.ts
@@ -187,6 +187,9 @@ export default class FeatureFlag {
 
   setIsSingleOption = (isSingleOption: boolean) => {
     this.isSingleOption = isSingleOption;
+    if (isSingleOption) {
+      this.variants = []
+    }
     this.setHasChanged(true)
   }