refactor: make uiFlags typesafe (#4996)

This should add some typesafety to our usage of uiFlags.
Unleash · Oct 11, 2023 · c3575c7 · c3575c7
1 parent 4e8c047
commit c3575c7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
@@ -39,6 +39,7 @@ import { IMPORT_BUTTON } from 'utils/testIds';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import { Badge } from 'component/common/Badge/Badge';
 import { ProjectDoraMetrics } from './ProjectDoraMetrics/ProjectDoraMetrics';
+import { UiFlags } from 'interfaces/uiConfig';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -49,6 +50,15 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
     },
 }));
 
+interface ITab {
+    title: string;
+    path: string;
+    name: string;
+    flag?: keyof UiFlags;
+    new?: boolean;
+    isEnterprise?: boolean;
+}
+
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
     const params = useQueryParams();
@@ -65,35 +75,27 @@ export const Project = () => {
 
     const [showDelDialog, setShowDelDialog] = useState(false);
 
-    const tabs = [
+    const tabs: ITab[] = [
         {
             title: 'Overview',
             path: basePath,
             name: 'overview',
-            flag: undefined,
-            new: false,
         },
         {
             title: 'Health',
             path: `${basePath}/health`,
             name: 'health',
-            flag: undefined,
-            new: false,
         },
         {
             title: 'Archive',
             path: `${basePath}/archive`,
             name: 'archive',
-            flag: undefined,
-            new: false,
         },
         {
             title: 'Change requests',
             path: `${basePath}/change-requests`,
             name: 'change-request',
             isEnterprise: true,
-            flag: undefined,
-            new: false,
         },
         {
             title: 'Metrics',
@@ -106,17 +108,15 @@ export const Project = () => {
             title: 'Event log',
             path: `${basePath}/logs`,
             name: 'logs',
-            flag: undefined,
-            new: false,
         },
         {
             title: 'Project settings',
             path: `${basePath}/settings${isOss() ? '/environments' : ''}`,
             name: 'settings',
-            flag: undefined,
-            new: false,
         },
-    ]
+    ];
+
+    const filteredTabs = tabs
         .filter((tab) => {
             if (tab.flag) {
                 return uiConfig.flags[tab.flag];
@@ -125,7 +125,7 @@ export const Project = () => {
         })
         .filter((tab) => !(isOss() && tab.isEnterprise));
 
-    const activeTab = [...tabs]
+    const activeTab = [...filteredTabs]
         .reverse()
         .find((tab) => pathname.startsWith(tab.path));
 
@@ -221,7 +221,7 @@ export const Project = () => {
                         variant='scrollable'
                         allowScrollButtonsMobile
                     >
-                        {tabs.map((tab) => {
+                        {filteredTabs.map((tab) => {
                             return (
                                 <StyledTab
                                     key={tab.title}
@@ -235,7 +235,7 @@ export const Project = () => {
                                     icon={
                                         <>
                                             <ConditionallyRender
-                                                condition={tab.new}
+                                                condition={Boolean(tab.new)}
                                                 show={
                                                     <StyledBadge color='success'>
                                                         New

diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
@@ -40,6 +40,7 @@ export type UiFlags = {
     P: boolean;
     RE: boolean;
     EEA?: boolean;
+    SE?: boolean;
     T?: boolean;
     UNLEASH_CLOUD?: boolean;
     UG?: boolean;
@@ -65,9 +66,9 @@ export type UiFlags = {
     variantTypeNumber?: boolean;
     privateProjects?: boolean;
     accessOverview?: boolean;
+    datadogJsonTemplate?: boolean;
     dependentFeatures?: boolean;
     internalMessageBanners?: boolean;
-    [key: string]: boolean | Variant | undefined;
 };
 
 export interface IVersionInfo {