feat(dashboard): "Under Development" message

- shows "Under Development" message when "Devices" and "Labs" labels are clicked - labels change when clicked Closes #223
kernelci · Sep 9, 2024 · ee51842 · ee51842
1 parent 931a503
commit ee51842
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/dashboard/src/components/SideMenu/SideMenu.tsx b/dashboard/src/components/SideMenu/SideMenu.tsx
@@ -1,12 +1,12 @@
+import { useState, useMemo } from 'react';
+
 import { MdOutlineMonitorHeart } from 'react-icons/md';
 
 import { ImTree, ImImages } from 'react-icons/im';
 import { HiOutlineDocumentSearch } from 'react-icons/hi';
 
 import { useRouter, useSearch } from '@tanstack/react-router';
 
-import { useMemo } from 'react';
-
 import { MessagesKey } from '@/locales/messages';
 
 import { zOrigin } from '@/types/tree/Tree';
@@ -26,6 +26,7 @@ import SendFeedback from './SendFeedback';
 import NavLink from './NavLink';
 
 type RouteMenuItems = {
+  id: number;
   onClick: () => void;
   idIntl: MessagesKey;
   icon: JSX.Element;
@@ -46,9 +47,8 @@ const linkItems: LinkMenuItems[] = [
   },
 ];
 
-const emptyFunc = (): void => {};
-
 const SideMenu = (): JSX.Element => {
+  const [selectedItemId, setSelectedItemId] = useState<number>(0);
   const selectedItemClassName =
     'w-full flex pl-5 py-4 cursor-pointer text-sky-500 bg-black border-l-4 border-sky-500';
   const notSelectedItemClassName =
@@ -74,19 +74,22 @@ const SideMenu = (): JSX.Element => {
 
   const routeItems: RouteMenuItems[] = [
     {
+      id: 0,
       onClick: useNavigateTo('/'),
       idIntl: 'routes.treeMonitor',
       icon: <ImTree className="size-5" />,
       selected: true,
     },
     {
-      onClick: emptyFunc,
+      id: 1,
+      onClick: useNavigateTo('/underDevelopment'),
       idIntl: 'routes.deviceMonitor',
       icon: <MdOutlineMonitorHeart className="size-5" />,
       selected: false,
     },
     {
-      onClick: emptyFunc,
+      id: 2,
+      onClick: useNavigateTo('/underDevelopment'),
       idIntl: 'routes.labsMonitor',
       icon: <ImImages className="size-5" />,
       selected: false,
@@ -126,10 +129,15 @@ const SideMenu = (): JSX.Element => {
         {routeItems.map(item => (
           <NavigationMenuItem
             className={
-              item.selected ? selectedItemClassName : notSelectedItemClassName
+              item.id === selectedItemId
+                ? selectedItemClassName
+                : notSelectedItemClassName
             }
             key={item.idIntl}
-            onClick={item.onClick}
+            onClick={() => {
+              setSelectedItemId(item.id); // Atualizando o item selecionado
+              item.onClick(); // Navegando ao clicar
+            }}
           >
             <NavLink icon={item.icon} idIntl={item.idIntl} />
           </NavigationMenuItem>

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -124,6 +124,7 @@ export const messages = {
     'global.timing': 'Timing',
     'global.total': 'Total',
     'global.tree': 'Tree',
+    'global.underDevelopment': 'Under Development',
     'global.unknown': 'Unknown',
     'global.url': 'URL',
     'global.valid': 'Valid',

diff --git a/dashboard/src/routeTree.gen.ts b/dashboard/src/routeTree.gen.ts
@@ -11,6 +11,7 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as UnderDevelopmentImport } from './routes/underDevelopment'
 import { Route as TreeRouteImport } from './routes/tree/route'
 import { Route as IndexImport } from './routes/index'
 import { Route as TreeIndexImport } from './routes/tree/index'
@@ -23,6 +24,11 @@ import { Route as TreeTreeIdBuildBuildIdIndexImport } from './routes/tree/$treeI
 
 // Create/Update Routes
 
+const UnderDevelopmentRoute = UnderDevelopmentImport.update({
+  path: '/underDevelopment',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const TreeRouteRoute = TreeRouteImport.update({
   path: '/tree',
   getParentRoute: () => rootRoute,
@@ -87,6 +93,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TreeRouteImport
       parentRoute: typeof rootRoute
     }
+    '/underDevelopment': {
+      id: '/underDevelopment'
+      path: '/underDevelopment'
+      fullPath: '/underDevelopment'
+      preLoaderRoute: typeof UnderDevelopmentImport
+      parentRoute: typeof rootRoute
+    }
     '/tree/$treeId': {
       id: '/tree/$treeId'
       path: '/$treeId'
@@ -156,6 +169,7 @@ export const routeTree = rootRoute.addChildren({
     }),
     TreeIndexRoute,
   }),
+  UnderDevelopmentRoute,
 })
 
 /* prettier-ignore-end */
@@ -167,7 +181,8 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/tree"
+        "/tree",
+        "/underDevelopment"
       ]
     },
     "/": {
@@ -180,6 +195,9 @@ export const routeTree = rootRoute.addChildren({
         "/tree/"
       ]
     },
+    "/underDevelopment": {
+      "filePath": "underDevelopment.tsx"
+    },
     "/tree/$treeId": {
       "filePath": "tree/$treeId/route.tsx",
       "parent": "/tree",

diff --git a/dashboard/src/routes/underDevelopment.tsx b/dashboard/src/routes/underDevelopment.tsx
@@ -0,0 +1,22 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import { z } from 'zod';
+
+import { FormattedMessage } from 'react-intl';
+
+import { zOrigin } from '@/types/tree/Tree';
+
+export const HomeSearchSchema = z.object({
+  origin: zOrigin,
+});
+
+export const Route = createFileRoute('/underDevelopment')({
+  validateSearch: HomeSearchSchema,
+  component: () => {
+    return (
+      <div className="grid h-[400px] place-items-center rounded-md bg-slate-100 dark:bg-slate-800">
+        <FormattedMessage id="global.underDevelopment" />
+      </div>
+    );
+  },
+});