fix: insights navigation (#6473)

What it says on the tin

Also adds the beta badge

Closes #
[1-2152](https://linear.app/unleash/issue/1-2152/adjust-insights-placement-in-navigation)

<img width="902" alt="Screenshot 2024-03-08 at 16 14 59"
src="https://github.com/Unleash/unleash/assets/104830839/3e67cba3-fb0f-438c-9e53-e51d923a373e">

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

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

@@ -39,6 +39,8 @@ import { Notifications } from 'component/common/Notifications/Notifications';
 import { useAdminRoutes } from 'component/admin/useAdminRoutes';
 import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { INavigationMenuItem } from '../../../interfaces/route';
+import { Badge } from '../../common/Badge/Badge';
 
 const StyledHeader = styled(AppBar)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
@@ -128,12 +130,38 @@ const StyledAdvancedNavButton = styled('button')(({ theme }) => ({
     cursor: 'pointer',
 }));
 
+const StyledSpan = styled('span')({
+    height: '16px',
+    paddingBottom: 16,
+});
+
+const StyledBadge = styled(Badge)({
+    height: '16px',
+    maxHeight: '16px',
+    padding: 0.25,
+    marginBottom: 0,
+});
+
 const styledIconProps = (theme: Theme) => ({
     color: theme.palette.neutral.main,
 });
 
 const StyledLink = styled(Link)(({ theme }) => focusable(theme));
 
+const StyledLinkWithBetaBagde = ({
+    title,
+    to,
+}: { title: string; to: string }) => (
+    <StyledLink to={to} sx={{ margin: 0 }}>
+        <div>
+            <span>{title}</span>{' '}
+            <StyledSpan>
+                <StyledBadge color='success'>Beta</StyledBadge>
+            </StyledSpan>
+        </div>
+    </StyledLink>
+);
+
 const StyledIconButton = styled(IconButton)<{
     component?: 'a' | 'button';
     href?: string;
@@ -248,15 +276,18 @@ const Header: VFC = () => {
 
                 <StyledNav>
                     <StyledLinks>
-                        <ConditionallyRender
-                            condition={insightsDashboard}
-                            show={
-                                <StyledLink to='/insights'>Insights</StyledLink>
-                            }
-                        />
                         <StyledLink to='/projects'>Projects</StyledLink>
                         <StyledLink to={'/search'}>Search</StyledLink>
                         <StyledLink to='/playground'>Playground</StyledLink>
+                        <ConditionallyRender
+                            condition={insightsDashboard}
+                            show={
+                                <StyledLinkWithBetaBagde
+                                    to={'/insights'}
+                                    title={'Insights'}
+                                />
+                            }
+                        />
                         <StyledAdvancedNavButton
                             onClick={(e) => setConfigRef(e.currentTarget)}
                             aria-controls={configRef ? configId : undefined}

frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap

@@ -15,7 +15,6 @@ exports[`returns all baseRoutes 1`] = `
     "enterprise": false,
     "flag": "executiveDashboard",
     "menu": {
-      "advanced": true,
       "mobile": true,
     },
     "path": "/insights",

frontend/src/component/menu/routes.ts

@@ -66,7 +66,7 @@ export const routes: IRoute[] = [
         title: 'Insights',
         component: ExecutiveDashboard,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { mobile: true },
         flag: 'executiveDashboard',
         enterprise: false,
     },