feat(frontend): add flag to toggle the analytics page (#3122)

kubeshop · Sep 5, 2023 · 2334662 · 2334662
1 parent a784025
commit 2334662
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git a/...c/components/CreateTestPlugins/Rest/steps/RequestDetails/BodyField/BodyFieldContainer.tsx b/...c/components/CreateTestPlugins/Rest/steps/RequestDetails/BodyField/BodyFieldContainer.tsx
@@ -11,14 +11,14 @@ export const BodyFieldContainer = styled.div<{$isDisplaying: boolean}>`
       border-radius: 2px;
       font-size: ${({theme}) => theme.size.md};
       outline: 1px solid grey;
-      font-family: SFPro, serif;
+      font-family: SFPro, Inter, serif;
     }
 
     .cm-line {
       padding: 0;
 
       span {
-        font-family: SFPro, serif;
+        font-family: SFPro, Inter, serif;
       }
     }
   }

diff --git a/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx b/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx
@@ -6,10 +6,11 @@ interface IProps {
 }
 
 const getComponent = <T,>(id: string, fallback: React.ComponentType<T>) => fallback;
+const getFlag = () => true;
 const getIsAllowed = () => true;
 
 const CustomizationWrapper = ({children}: IProps) => {
-  const customizationProviderValue = useMemo(() => ({getComponent, getIsAllowed}), []);
+  const customizationProviderValue = useMemo(() => ({getComponent, getFlag, getIsAllowed}), []);
 
   return <CustomizationProvider value={customizationProviderValue}>{children}</CustomizationProvider>;
 };

diff --git a/web/src/constants/Theme.constants.ts b/web/src/constants/Theme.constants.ts
@@ -29,7 +29,7 @@ export const theme: DefaultTheme = {
     xxxl: '24px',
   },
   font: {
-    family: 'SFPro',
+    family: 'SFPro, Inter',
   },
   notification: {
     success: {

diff --git a/web/src/pages/Settings/Content.tsx b/web/src/pages/Settings/Content.tsx
@@ -7,6 +7,7 @@ import Linter from 'components/Settings/Linter';
 import Polling from 'components/Settings/Polling';
 import TestRunner from 'components/Settings/TestRunner';
 import BetaBadge from 'components/BetaBadge/BetaBadge';
+import {Flag, useCustomization} from 'providers/Customization';
 import * as S from './Settings.styled';
 
 const TabsKeys = {
@@ -19,6 +20,7 @@ const TabsKeys = {
 };
 
 const Content = () => {
+  const {getFlag} = useCustomization();
   const [query, setQuery] = useSearchParams();
 
   return (
@@ -38,9 +40,11 @@ const Content = () => {
           <Tabs.TabPane key={TabsKeys.DataStore} tab="Configure Data Store">
             <DataStore />
           </Tabs.TabPane>
-          <Tabs.TabPane key={TabsKeys.Analytics} tab="Analytics">
-            <Analytics />
-          </Tabs.TabPane>
+          {getFlag(Flag.IsAnalyticsPageEnabled) && (
+            <Tabs.TabPane key={TabsKeys.Analytics} tab="Analytics">
+              <Analytics />
+            </Tabs.TabPane>
+          )}
           <Tabs.TabPane key={TabsKeys.Polling} tab="Trace Polling">
             <Polling />
           </Tabs.TabPane>

diff --git a/web/src/providers/Customization/Customization.provider.tsx b/web/src/providers/Customization/Customization.provider.tsx
@@ -6,13 +6,19 @@ export enum Operation {
   View = 'view',
 }
 
+export enum Flag {
+  IsAnalyticsPageEnabled = 'isAnalyticsPageEnabled',
+}
+
 interface IContext {
   getComponent<T>(name: string, fallback: React.ComponentType<T>): React.ComponentType<T>;
+  getFlag(flag: Flag): boolean;
   getIsAllowed(operation: Operation): boolean;
 }
 
 export const Context = createContext<IContext>({
   getComponent: (name, fallback) => fallback,
+  getFlag: () => true,
   getIsAllowed: () => true,
 });
 

diff --git a/web/src/providers/Customization/index.ts b/web/src/providers/Customization/index.ts
@@ -1,3 +1,3 @@
 // eslint-disable-next-line no-restricted-exports
-export {default, useCustomization, Operation} from './Customization.provider';
+export {default, useCustomization, Flag, Operation} from './Customization.provider';
 export {default as withCustomization} from './WithCustomization';