From 8e037a335f8e0f9247ff643a57865b09f51faa75 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 19 Sep 2024 09:59:07 +0200
Subject: [PATCH] feat: personal dashboard route (#8173)

---
 .../NavigationSidebar/NavigationList.tsx           | 14 ++++++++++++++
 .../__tests__/__snapshots__/routes.test.tsx.snap   |  9 +++++++++
 frontend/src/component/menu/routes.ts              |  9 +++++++++
 .../personalDashboard/PersonalDashboard.tsx        |  3 +++
 frontend/src/interfaces/uiConfig.ts                |  1 +
 src/lib/types/experimental.ts                      |  7 ++++++-
 6 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/component/personalDashboard/PersonalDashboard.tsx

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
index a9dea5745fb..73c333ed9a0 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
@@ -15,6 +15,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import SearchIcon from '@mui/icons-material/Search';
 import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
 import InsightsIcon from '@mui/icons-material/Insights';
+import PersonalDashboardIcon from '@mui/icons-material/DashboardOutlined';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
@@ -23,6 +24,7 @@ import FlagIcon from '@mui/icons-material/OutlinedFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledBadgeContainer = styled('div')(({ theme }) => ({
     paddingLeft: theme.spacing(2),
@@ -155,10 +157,22 @@ export const PrimaryNavigationList: FC<{
     activeItem?: string;
 }> = ({ mode, onClick, activeItem }) => {
     const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem;
+    const personalDashboardUIEnabled = useUiFlag('personalDashboardUI');
     const { isOss } = useUiConfig();
 
     return (
         <List>
+            {personalDashboardUIEnabled ? (
+                <DynamicListItem
+                    href='/personal'
+                    text='Personal Dahsboard'
+                    onClick={() => onClick('/personal')}
+                    selected={activeItem === '/personal'}
+                >
+                    <PersonalDashboardIcon />
+                </DynamicListItem>
+            ) : null}
+
             <DynamicListItem
                 href='/projects'
                 text='Projects'
diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
index e2f37b7f975..000b37c2dcc 100644
--- a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
+++ b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
@@ -10,6 +10,15 @@ exports[`returns all baseRoutes 1`] = `
     "title": "Unleash",
     "type": "protected",
   },
+  {
+    "component": [Function],
+    "menu": {
+      "mobile": true,
+    },
+    "path": "/personal",
+    "title": "Personal Dashboard",
+    "type": "protected",
+  },
   {
     "component": {
       "$$typeof": Symbol(react.lazy),
diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts
index c3ef2dc840d..566d5f696aa 100644
--- a/frontend/src/component/menu/routes.ts
+++ b/frontend/src/component/menu/routes.ts
@@ -47,6 +47,7 @@ import { FeedbackList } from '../feedbackNew/FeedbackList';
 import { Application } from 'component/application/Application';
 import { Signals } from 'component/signals/Signals';
 import { LazyCreateProject } from '../project/Project/CreateProject/LazyCreateProject';
+import { PersonalDashboard } from '../personalDashboard/PersonalDashboard';
 
 export const routes: IRoute[] = [
     // Splash
@@ -58,6 +59,14 @@ export const routes: IRoute[] = [
         menu: {},
         isStandalone: true,
     },
+    // Personal Dashboard
+    {
+        path: '/personal',
+        title: 'Personal Dashboard',
+        component: PersonalDashboard,
+        type: 'protected',
+        menu: { mobile: true },
+    },
 
     // Project
     {
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
new file mode 100644
index 00000000000..6d71910cfea
--- /dev/null
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -0,0 +1,3 @@
+export const PersonalDashboard = () => {
+    return <>Personal Dashboard</>;
+};
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 9c62909e2e0..eee1ecbf974 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -91,6 +91,7 @@ export type UiFlags = {
     projectListImprovements?: boolean;
     onboardingUI?: boolean;
     eventTimeline?: boolean;
+    personalDashboardUI?: boolean;
 };
 
 export interface IVersionInfo {
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index f72544ea73d..b087f1ed994 100644
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@@ -64,7 +64,8 @@ export type IFlagKey =
     | 'onboardingMetrics'
     | 'onboardingUI'
     | 'projectRoleAssignment'
-    | 'eventTimeline';
+    | 'eventTimeline'
+    | 'personalDashboardUI';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -317,6 +318,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_EVENT_TIMELINE,
         false,
     ),
+    personalDashboardUI: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_PERSONAL_DASHBOARD_UI,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {