feat: refactor view and title components

Signed-off-by: Antonette Caldwell <[email protected]>

Author: nebula-aac

examples/next-14/components/Dashboard/View.jsx

@@ -46,7 +46,7 @@ export function View(props) {
           return (
             <>
               <div style={{ position: 'relative', height: '20px' }}>
-              <ParentStyle>
+                <ParentStyle>
                   <CellStyle>
                     {typeof value === 'object' && value !== null ? JSON.stringify(value) : value}
                   </CellStyle>

examples/next-14/components/Dashboard/index.jsx

@@ -1,19 +1,22 @@
 import { ResourcesConfig } from './resources/config';
 import TextTooltip from '../MesheryMeshInterface/TextTooltip';
 import { KubernetesIcon } from '@layer5/sistent';
-import MesheryIcon from './MesheryIcon';
+import MesheryIcon from '../../icons/MesheryIcon';
 import { TabPanel } from './TabPanel';
 import Overview from './Overview';
 import ResourcesSubMenu from './resources/ResourcesSubMenu';
 import ResourcesTable from './resources/ResourcesTable';
 import { withRouter } from 'next/router';
 import { DashboardTab } from '@/styles/DashboardTab';
 import { DashboardTabs } from '@/styles/DashboardTabs';
+import { DashboardLayout } from '@/styles/DashboardLayout';
+import { PaperSquare } from '@/styles/PaperSquare';
 import useDashboardRouter from '@/lib/hooks/useDashboardRouter';
 
 const ResourceCategoryTabs = ['Overview', ...Object.keys(ResourcesConfig)];
 
-function Dashboard() {
+/*
+export function Dashboard({ k8sconfig, selectedK8sContexts, updateProgress }) {
   const { resourceCategory, changeResourceTab, selectedResource, handleChangeSelectedResource } =
     useDashboardRouter();
 
@@ -91,3 +94,80 @@ function Dashboard() {
 }
 
 export default withRouter(Dashboard);
+*/
+
+export function Dashboard({ k8sconfig, selectedK8sContexts, updateProgress }) {
+  const { resourceCategory, changeResourceTab, selectedResource, handleChangeSelectedResource } =
+    useDashboardRouter();
+
+  const getResourceCategoryIndex = (resourceCategory) => {
+    return ResourceCategoryTabs.findIndex((resource) => resource === resourceCategory);
+  };
+
+  const getResourceCategory = (index) => {
+    return ResourceCategoryTabs[index];
+  };
+
+  return (
+    <DashboardLayout>
+      <PaperSquare>
+        <DashboardTabs
+          indicatorColor="primary"
+          variant="fullWidth"
+          textColor="primary"
+          allowScrollButtonsMobile
+          scrollButtons="auto"
+          value={getResourceCategoryIndex(resourceCategory)}
+          onChange={(_e, val) => {
+            changeResourceTab(getResourceCategory(val));
+          }}
+        >
+          {ResourceCategoryTabs.map((resource, idx) => {
+            return (
+              <TextTooltip key={idx} title={`View ${resource}`} placement="top">
+                <DashboardTab
+                  value={idx}
+                  key={resource}
+                  icon={
+                    resource === 'Overview' ? (
+                      <MesheryIcon width="28px" height="28px" />
+                    ) : (
+                      <KubernetesIcon width="28px" height="28px" />
+                    )
+                  }
+                />
+              </TextTooltip>
+            );
+          })}
+        </DashboardTabs>
+      </PaperSquare>
+      {Object.keys(ResourcesConfig).map((resource, idx) => (
+        <TabPanel value={resourceCategory} index={resource} key={resource}>
+          {ResourcesConfig[resource].submenu ? (
+            <ResourcesSubMenu
+              key={idx}
+              resource={ResourcesConfig[resource]}
+              selectedResource={selectedResource}
+              handleChangeSelectedResource={handleChangeSelectedResource}
+              updateProgress={updateProgress}
+              k8sConfig={k8sconfig}
+              selectedK8sContexts={selectedK8sContexts}
+            />
+          ) : (
+            <ResourcesTable
+              key={idx}
+              workloadType={resource}
+              k8sConfig={k8sconfig}
+              selectedK8sContexts={selectedK8sContexts}
+              resourceConfig={ResourcesConfig[resource].tableConfig}
+              menu={ResourcesConfig[resource].submenu}
+              updateProgress={updateProgress}
+            />
+          )}
+        </TabPanel>
+      ))}
+    </DashboardLayout>
+  );
+}
+
+export default Dashboard;

examples/next-14/components/Dashboard/resources/ResourcesTable.jsx

@@ -21,12 +21,10 @@ export function ResourcesTable(props) {
   const { updateProgress, k8sConfig, resourceConfig, submenu, workloadType, selectedK8sContexts } =
     props;
 
-    const { width } = useWindowDimensions();
+  const { width } = useWindowDimensions();
   const { notify } = useNotification();
 
-  const connectionMetadataState = useSelector(
-    (state) => state.connection.connectionMetadataState,
-  );
+  const connectionMetadataState = useSelector((state) => state.connection.connectionMetadataState);
 
   const [meshSyncResources, setMeshSyncResources] = useState([]);
   const [loading, setLoading] = useState(false);