fix(ui): flags style fixes

frontend/app/components/FFlags/FFlagItem/FFlagItem.tsx

@@ -44,7 +44,7 @@ function FFlagItem({ flag }: { flag: FeatureFlag }) {
                 <TextEllipsis
                   hintText={flag.description}
                   text={flag.description}
-                  style={{ color: 'rgba(0,0,0, 0.6)' }}
+                  style={{ color: 'rgba(0,0,0, 0.6)', fontSize: 12 }}
                 />
               ) : null}
             </div>

frontend/app/components/FFlags/FFlagsList.tsx

@@ -90,7 +90,7 @@ function FFlagsList({ siteId }: { siteId: string }) {
               ))}
             </div>
             <div className="w-full flex items-center justify-between pt-4 px-6">
-              <div className="text-disabled-text">
+              <div>
                 {'Showing '}
                 <span className="font-semibold">
                   {Math.min(featureFlagsStore.total, featureFlagsStore.pageSize)}

frontend/app/components/FFlags/FlagView/FlagView.tsx

@@ -58,7 +58,7 @@ function FlagView({ siteId, fflagId }: { siteId: string; fflagId: string }) {
 
       <div className={'w-full bg-white rounded p-4 widget-wrapper'}>
         <div className={'flex items-center gap-2'}>
-          <div className={'text-xl font-semibold'}>{current.flagKey}</div>
+          <div className={'text-2xl'}>{current.flagKey}</div>
           <Button
             className={'ml-auto'}
             variant={'text-primary'}
@@ -72,7 +72,7 @@ function FlagView({ siteId, fflagId }: { siteId: string; fflagId: string }) {
           </Button>
           <ItemMenu bold items={menuItems} />
         </div>
-        <div className={'text-disabled-text border-b'}>
+        <div className={'border-b'} style={{ color: 'rgba(0,0,0, 0.6)' }}>
           {current.description || 'There is no description for this feature flag.'}
         </div>
 
@@ -90,7 +90,7 @@ function FlagView({ siteId, fflagId }: { siteId: string; fflagId: string }) {
           <div>
             {current.isPersist
               ? 'This flag maintains its state through successive authentication events.'
-              : 'This flag is not persistent.'}
+              : 'This flag is not persistent across authentication events.'}
           </div>
         </div>
       {current.conditions.length > 0 ? (

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

@@ -57,8 +57,8 @@ function RolloutCondition({ set, conditions, removeCondition, index, readonly }:
           </div>
         )}
       </div>
-      <div className={readonly ? 'p-2' : 'p-2 border-b'}>
-        <div className={conditions.filter.filters.length > 0 ? 'p-2 border-b mb-2' : ''}>
+      <div className={'p-2'}>
+        <div className={conditions.filter.filters.length > 0 ? 'p-2 mb-2' : ''}>
           <FilterList
             filter={conditions.filter}
             onUpdateFilter={onUpdateFilter}
@@ -66,7 +66,7 @@ function RolloutCondition({ set, conditions, removeCondition, index, readonly }:
             onChangeEventsOrder={onChangeEventsOrder}
             hideEventsOrder
             excludeFilterKeys={nonFlagFilters}
-            readonly
+            readonly={readonly}
           />
           {readonly && !conditions.filter?.filters?.length ? (
             <div className={'p-2'}>No conditions</div>
@@ -84,10 +84,10 @@ function RolloutCondition({ set, conditions, removeCondition, index, readonly }:
           </FilterSelection>
         )}
       </div>
-      <div className={'px-4 py-2 flex items-center gap-2'}>
+      <div className={'px-4 py-2 flex items-center gap-2 border-t'}>
         <span>Rollout to</span>
         {readonly ? (
-          <div>{conditions.rolloutPercentage}%</div>
+          <div className={'font-semibold'}>{conditions.rolloutPercentage}%</div>
         ) : (
           <Input
             type="text"

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

@@ -6,7 +6,7 @@ import Breadcrumb from 'Shared/Breadcrumb';
 import { useModal } from 'App/components/Modal';
 import HowTo from 'Components/FFlags/NewFFlag/HowTo';
 import {Prompt, useHistory} from 'react-router';
-import { withSiteId, fflags } from 'App/routes';
+import {withSiteId, fflags, fflagRead} from 'App/routes';
 import Description from './Description';
 import Header from './Header';
 import RolloutCondition from './Conditions';
@@ -61,6 +61,7 @@ function NewFFlag({ siteId, fflagId }: { siteId: string; fflagId?: string }) {
     if (fflagId) {
       featureFlagsStore.updateFlag().then(() => {
         toast.success('Feature flag updated.');
+        history.push(withSiteId(fflagRead(fflagId), siteId));
       })
         .catch((e) => {
           e.json().then((body: Record<string, any>) => onError(body.errors.join(',')))

frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx

@@ -59,7 +59,6 @@ function FilterItem(props: Props) {
     });
   };
 
-  console.log('FilterItem', toJS(filter))
   return (
     <div className="flex items-center hover:bg-active-blue -mx-5 px-5">
       <div className="flex items-start w-full">

tracker/tracker/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 8.1.0
+
+- Console and network are now using proxy objects to capture calls (opt in for network)
+- Added feature flags module and methods
+
 # 8.0.0
 
 - **[breaking]** support for multi-tab sessions