feat: move status details to dedicated route

Author: saisanthoshpentakota

src/pages/sidepanel/SidePanel.tsx

@@ -1,34 +1,22 @@
 import '@pages/sidepanel/SidePanel.css';
 
-import {
-  useEffect,
-  useState,
-} from 'react';
+import { useEffect, useState } from 'react';
 
-import {
-  Route,
-  Routes,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 
-import {
-  Box,
-  CircularProgress,
-} from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import BottomNavigation from '@root/src/pages/sidepanel/components/BottomNavigation';
 import Configuration from '@root/src/pages/sidepanel/sections/Configuration';
 import Debugger from '@root/src/pages/sidepanel/sections/Debugger';
 import Personalization from '@root/src/pages/sidepanel/sections/Personalization';
 import Profile from '@root/src/pages/sidepanel/sections/Profile';
-import {
-  TagConfigModel,
-  TagConfigPathforaCandidates,
-} from '@root/src/shared/models/tagConfigModel';
+import { TagConfigModel, TagConfigPathforaCandidates } from '@root/src/shared/models/tagConfigModel';
 import { EmitLog } from '@src/shared/components/EmitLog';
 import entityStorage from '@src/shared/storages/entityStorage';
 import tagConfigStore from '@src/shared/storages/tagConfigStorage';
 
+import TagStatus from './sections/TagStatus';
+
 interface SidePanelProps {
   key: any;
   isEnabled: boolean;
@@ -215,12 +203,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ key, isEnabled }) => {
         </Box>
       ) : (
         <>
-          <Box
-            minHeight={`calc(100vh - 56px)`}
-            justifyContent={'center'}
-            alignItems={'flex-start'}
-            display="flex"
-            flexDirection="column">
+          <Box justifyContent={'center'} alignItems={'flex-start'} display="flex" flexDirection="column">
             <Routes>
               <Route path="/settings" element={<Configuration />} />
               <Route
@@ -241,7 +224,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ key, isEnabled }) => {
                 }
               />
               <Route
-                path="*"
+                path="/debug"
                 element={
                   <Debugger
                     tagIsInstalled={tagIsInstalled}
@@ -251,12 +234,10 @@ const SidePanel: React.FC<SidePanelProps> = ({ key, isEnabled }) => {
                   />
                 }
               />
+              <Route path="*" element={<TagStatus tagIsInstalled={tagIsInstalled} tagConfig={tagConfig} />} />
             </Routes>
           </Box>
-          <BottomNavigation
-            value={activePath}
-            onChange={newValue => handleNavigation(newValue)}
-          />
+          <BottomNavigation value={activePath} onChange={newValue => handleNavigation(newValue)} />
         </>
       )}
     </>

src/pages/sidepanel/components/BottomNavigation.test.tsx

@@ -28,6 +28,7 @@ describe('BottomNav', () => {
   it('renders all navigation sections', () => {
     renderWithTheme(<BottomNav {...defaultProps} />);
 
+    expect(screen.getByLabelText('Status')).toBeInTheDocument();
     expect(screen.getByLabelText('Debug')).toBeInTheDocument();
     expect(screen.getByLabelText('Profile')).toBeInTheDocument();
     expect(screen.getByLabelText('Personalization')).toBeInTheDocument();

src/pages/sidepanel/components/BottomNavigation.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { AutoFixHighOutlined, Person, PestControlOutlined } from '@mui/icons-material';
+import { AutoFixHighOutlined, MonitorHeart, Person, PestControlOutlined } from '@mui/icons-material';
 import { BottomNavigation, BottomNavigationAction } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { appColors } from '@root/src/theme/palette';
@@ -49,6 +49,11 @@ const StyledBottomNavigationAction = styled(BottomNavigationAction)<{
 const navigationSections: NavigationSection[] = [
   {
     route: '/',
+    icon: <MonitorHeart />,
+    ariaLabel: 'Status',
+  },
+  {
+    route: '/debug',
     icon: <PestControlOutlined />,
     ariaLabel: 'Debug',
   },

src/pages/sidepanel/sections/Debugger.tsx

@@ -1,10 +1,10 @@
 import React, { Dispatch, SetStateAction } from 'react';
+
 import { Box, Stack, Tab, Tabs } from '@mui/material';
-import TagStatus from '@root/src/pages/sidepanel/sections/TagStatus';
-import TagConfig from '@root/src/pages/sidepanel/sections/TagConfig';
+import CustomTabPanel from '@root/src/pages/sidepanel/components/CustomTabPanel';
 import TagActivity from '@root/src/pages/sidepanel/sections/TagActivity';
+import TagConfig from '@root/src/pages/sidepanel/sections/TagConfig';
 import { TagConfigModel } from '@root/src/shared/models/tagConfigModel';
-import CustomTabPanel from '@root/src/pages/sidepanel/components/CustomTabPanel';
 
 interface DebuggerProps {
   tagIsInstalled: boolean;
@@ -22,19 +22,15 @@ const Debugger: React.FC<DebuggerProps> = ({ tagIsInstalled, tagConfig, getter,
     <Stack alignItems={'flex-start'} justifyContent={'center'} height={'100%'} width={'100%'}>
       <Box borderBottom={1} borderColor={'divider'} width={'100%'}>
         <Tabs value={getter} onChange={handleSetTab} textColor="secondary" indicatorColor="secondary">
-          <Tab id="status" label="Status" />
           <Tab id="configuration" disabled={!tagIsInstalled} label="Configuration" />
           <Tab id="activity" disabled={!tagIsInstalled} label="Activity" />
         </Tabs>
       </Box>
       <Box flexGrow={1} width={'100%'} overflow={'auto'}>
         <CustomTabPanel value={getter} index={0}>
-          <TagStatus tagIsInstalled={tagIsInstalled} tagConfig={tagConfig} />
-        </CustomTabPanel>
-        <CustomTabPanel value={getter} index={1}>
           <TagConfig tagConfig={tagConfig} />
         </CustomTabPanel>
-        <CustomTabPanel value={getter} index={2}>
+        <CustomTabPanel value={getter} index={1}>
           <TagActivity />
         </CustomTabPanel>
       </Box>