fix(ui): fix fonts for flags

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}

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;
+export default HowTo;

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>

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>

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;

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)
   }