feat: useUiFlag shorthand hook (#4566)

## About the changes
Instead of this:
```ts
const { uiConfig } = useUiConfig();
const myFlag = Boolean(uiConfig?.flags?.myFlag)
```
we can have this:
```ts
const myFlag = useUiFlag("myFlag")
```
With the same type safety, less verbose and more purposeful code.

### Important files
- `frontend/src/hooks/useUiFlag.ts`


## Discussion points
Can we in the future share flags between frontend and backend? Right now
adding a new flag has to be done in 4 different places (backend flag
keys list, backend flags defaults config, backend experimental server
options, frontend type).

Most ergonomic option is to pull config directly from Unleash. 
Issue, based on previous user feedback:
https://github.com/Unleash/unleash/issues/4565
Internal feature request document:
[docs.google.com/document/d/1Sx0q...](https://docs.google.com/document/d/1Sx0qKZXUVUCjuY5F4MOh1ieOM1A2_jE58zEA7jaM_1g/edit?usp=sharing)

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,5 +1,5 @@
 import { VoidFunctionComponent } from 'react';
-import { IFlags, IUiConfig } from 'interfaces/uiConfig';
+import { UiFlags, IUiConfig } from 'interfaces/uiConfig';
 
 export interface IRoute {
     path: string;
@@ -7,7 +7,7 @@ export interface IRoute {
     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;