feat: useUiFlag shorthand hook

frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx

@@ -8,7 +8,6 @@ import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
 import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
 import NavigationLink from '../NavigationLink/NavigationLink';
 import { basePath } from 'utils/formatPath';
-import { IFlags } from 'interfaces/uiConfig';
 import { INavigationMenuItem } from 'interfaces/route';
 import styles from './DrawerMenu.module.scss'; // FIXME: useStyle - theme
 import theme from 'themes/theme';
@@ -36,7 +35,6 @@ interface IDrawerMenuProps {
         href: string;
         title: string;
     }>;
-    flags?: IFlags;
     routes: {
         mainNavRoutes: INavigationMenuItem[];
         mobileRoutes: INavigationMenuItem[];
@@ -46,7 +44,6 @@ interface IDrawerMenuProps {
 
 export const DrawerMenu: VFC<IDrawerMenuProps> = ({
     links = [],
-    flags = {},
     open = false,
     toggleDrawer,
     routes,

frontend/src/component/menu/Header/Header.tsx

@@ -147,7 +147,6 @@ const Header: VFC = () => {
                         </IconButton>
                     </Tooltip>
                     <DrawerMenu
-                        flags={uiConfig.flags}
                         links={uiConfig.links}
                         open={openDrawer}
                         toggleDrawer={toggleDrawer}

frontend/src/hooks/useUiFlag.ts

@@ -0,0 +1,9 @@
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+
+type flags = ReturnType<typeof useUiConfig>['uiConfig']['flags'];
+
+export const useUiFlag = <K extends keyof flags>(flag: K) => {
+    const { uiConfig } = useUiConfig();
+
+    return uiConfig?.flags?.[flag] || false;
+};

frontend/src/interfaces/route.ts

@@ -1,13 +1,13 @@
 import { VoidFunctionComponent } from 'react';
-import { IFlags, IUiConfig } from 'interfaces/uiConfig';
+import { UiFlags, IUiConfig } from 'interfaces/uiConfig';
 
 export interface IRoute {
     path: string;
     title: string;
     type: 'protected' | 'unprotected';
     layout?: string;
     parent?: string;
-    flag?: keyof IFlags;
+    flag?: keyof UiFlags;
     configFlag?: keyof IUiConfig;
     hidden?: boolean;
     enterprise?: boolean;
@@ -20,7 +20,7 @@ export interface INavigationMenuItem {
     path: string;
     title: string;
     menu: IRouteMenu;
-    flag?: keyof IFlags;
+    flag?: keyof UiFlags;
     configFlag?: keyof IUiConfig;
     group?: string;
 }

frontend/src/interfaces/uiConfig.ts

@@ -4,7 +4,14 @@ import { Variant } from 'utils/variants';
 export interface IUiConfig {
     authenticationType?: string;
     baseUriPath?: string;
-    flags: IFlags;
+    /**
+     * @deprecated `useUiFlags` can be used instead
+     * @example
+     * ```ts
+     *   const yourFlag = useUiFlags("yourFlag")
+     * ```
+     */
+    flags: UiFlags;
     name: string;
     slogan: string;
     environment?: string;
@@ -29,7 +36,7 @@ export interface IProclamationToast {
     link: string;
 }
 
-export interface IFlags {
+export type UiFlags = {
     P: boolean;
     RE: boolean;
     EEA?: boolean;
@@ -59,7 +66,7 @@ export interface IFlags {
     featureNamingPattern?: boolean;
     doraMetrics?: boolean;
     [key: string]: boolean | Variant | undefined;
-}
+};
 
 export interface IVersionInfo {
     instanceId: string;