metlo-labs · akshay288 · Dec 3, 2022 · Dec 3, 2022
diff --git a/frontend/src/components/PageWrapper.tsx b/frontend/src/components/PageWrapper.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import Head from "next/head"
+
+interface PageWrapperProps {
+  title?: string
+  children?: React.ReactNode
+}
+
+export const PageWrapper: React.FC<PageWrapperProps> = React.memo(
+  ({ title, children }) => {
+    return (
+      <>
+        {title ? (
+          <Head>
+            <title>{title}</title>
+          </Head>
+        ) : null}
+        {children}
+      </>
+    )
+  },
+)
diff --git a/frontend/src/components/SidebarLayoutShell.tsx b/frontend/src/components/SidebarLayoutShell.tsx
@@ -3,15 +3,37 @@ import Head from "next/head"
 import { Box, HStack } from "@chakra-ui/react"
 import SideNavBar from "./Sidebar"
 import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
+import { useRouter } from "next/router"
 
 interface SidebarLayoutShellProps {
   title?: string
   currentTab?: SideNavLinkDestination
   children?: React.ReactNode
 }
 
+const itemToNavLink = {
+  "": SideNavLinkDestination.Home,
+  connections: SideNavLinkDestination.Connections,
+  endpoint: SideNavLinkDestination.Endpoints,
+  protection: SideNavLinkDestination.Protection,
+  spec: SideNavLinkDestination.Specs,
+  alerts: SideNavLinkDestination.Alerts,
+  endpoints: SideNavLinkDestination.Endpoints,
+  hosts: SideNavLinkDestination.Hosts,
+  "sensitive-data": SideNavLinkDestination.SensitiveData,
+  settings: SideNavLinkDestination.Settings,
+  specs: SideNavLinkDestination.Specs,
+  vulnerabilities: SideNavLinkDestination.Vulnerabilities,
+}
+
 export const SidebarLayoutShell: React.FC<SidebarLayoutShellProps> = React.memo(
   ({ title, currentTab, children }) => {
+    const router = useRouter()
+    const path = router.pathname
+    if (!currentTab) {
+      const firstItem = path.split("/")[1]
+      currentTab = itemToNavLink[firstItem]
+    }
     return (
       <HStack spacing="0" w="100vw">
         {title ? (

diff --git a/frontend/src/enterprise/pages/protection.tsx b/frontend/src/enterprise/pages/protection.tsx
@@ -1,6 +1,5 @@
 import superjson from "superjson"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import { ContentContainer } from "components/utils/ContentContainer"
 import { ProtectionEmptyView } from "enterprise/components/Protection/ProtectionEmptyView"
 import { ProtectionPage } from "enterprise/components/Protection"
@@ -19,14 +18,7 @@ const Protection = ({ attacksResponse, hosts }) => {
       </ContentContainer>
     )
   }
-  return (
-    <SidebarLayoutShell
-      title="Protection"
-      currentTab={SideNavLinkDestination.Protection}
-    >
-      {page}
-    </SidebarLayoutShell>
-  )
+  return <PageWrapper title="Protection">{page}</PageWrapper>
 }
 
 export default Protection
diff --git a/frontend/src/enterprise/pages/protection/AttackDetail.tsx b/frontend/src/enterprise/pages/protection/AttackDetail.tsx
@@ -2,8 +2,7 @@ import React from "react"
 import superjson from "superjson"
 import ErrorPage from "next/error"
 import { AttackDetailResponse } from "@common/types"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
+import { PageWrapper } from "components/PageWrapper"
 import { AttackDetailPage } from "enterprise/components/Protection/AttackDetail"
 
 const AttackDetail = ({ attackDetail }) => {
@@ -17,12 +16,9 @@ const AttackDetail = ({ attackDetail }) => {
   }
 
   return (
-    <SidebarLayoutShell
-      title="Protection"
-      currentTab={SideNavLinkDestination.Protection}
-    >
+    <PageWrapper title="Protection">
       <AttackDetailPage initialAttack={attack} traces={traces} />
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -3,11 +3,14 @@ import { ChakraProvider } from "@chakra-ui/react"
 import theme from "../theme"
 import "../main.css"
 import { AppProps } from "next/app"
+import { SidebarLayoutShell } from "components/SidebarLayoutShell"
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={theme}>
-      <Component {...pageProps} />
+      <SidebarLayoutShell>
+        <Component {...pageProps} />
+      </SidebarLayoutShell>
     </ChakraProvider>
   )
 }

diff --git a/frontend/src/pages/alerts.tsx b/frontend/src/pages/alerts.tsx
@@ -9,9 +9,8 @@ import {
 } from "@chakra-ui/react"
 import superjson from "superjson"
 import React, { useState } from "react"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
 import { Alert, GetAlertParams, UpdateAlertParams } from "@common/types"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import { AlertList } from "components/Alert/AlertList"
 import { ALERT_PAGE_LIMIT } from "~/constants"
 import { getAlerts, updateAlert } from "api/alerts"
@@ -93,10 +92,7 @@ const Alerts = ({ initParams, initAlerts, initTotalCount, initHosts }) => {
   }
 
   return (
-    <SidebarLayoutShell
-      title="Alerts"
-      currentTab={SideNavLinkDestination.Alerts}
-    >
+    <PageWrapper title="Alerts">
       <VStack
         mx="auto"
         maxW="100rem"
@@ -147,7 +143,7 @@ const Alerts = ({ initParams, initAlerts, initTotalCount, initHosts }) => {
           />
         </Box>
       </VStack>
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/connections/index.tsx b/frontend/src/pages/connections/index.tsx
@@ -1,16 +1,12 @@
 import { Heading, Text, VStack, Link } from "@chakra-ui/react"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import { ContentContainer } from "components/utils/ContentContainer"
 import ConnectionDocsList from "components/ConnectionDocs"
 
 const Connections = () => {
   return (
-    <SidebarLayoutShell
-      title="Connections"
-      currentTab={SideNavLinkDestination.Connections}
-    >
-      <ContentContainer  maxContentW="100rem" px="8" py="8">
+    <PageWrapper title="Connections">
+      <ContentContainer maxContentW="100rem" px="8" py="8">
         <VStack w="full" alignItems="flex-start">
           <Heading fontWeight="medium" size="xl" mb="2">
             Connections
@@ -22,7 +18,7 @@ const Connections = () => {
           <ConnectionDocsList />
         </VStack>
       </ContentContainer>
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/connections/new/aws.tsx b/frontend/src/pages/connections/new/aws.tsx
@@ -1,5 +1,4 @@
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import { ContentContainer } from "components/utils/ContentContainer"
 import { Flex, Heading, VStack } from "@chakra-ui/react"
 import { useState } from "react"
@@ -12,7 +11,7 @@ const ConfigureAWS = dynamic(
 const Connections = ({}) => {
   const [selectedIndex, updateIndex] = useState(1)
   return (
-    <SidebarLayoutShell currentTab={SideNavLinkDestination.Connections}>
+    <PageWrapper>
       <ContentContainer height="full">
         <VStack w="full" alignItems="flex-start" h={"full"}>
           <Heading fontWeight="medium" size="xl" mb="8">
@@ -26,7 +25,7 @@ const Connections = ({}) => {
           </Flex>
         </VStack>
       </ContentContainer>
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/connections/new/gcp.tsx b/frontend/src/pages/connections/new/gcp.tsx
@@ -1,5 +1,4 @@
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import { ContentContainer } from "components/utils/ContentContainer"
 import { Flex, Heading, VStack } from "@chakra-ui/react"
 import { useState } from "react"
@@ -8,7 +7,7 @@ import ConfigureGCP from "components/ConnectionConfiguration/GCP/configureGcp"
 const Connections = ({}) => {
   const [selectedIndex, updateIndex] = useState(1)
   return (
-    <SidebarLayoutShell currentTab={SideNavLinkDestination.Connections}>
+    <PageWrapper>
       <ContentContainer height="full">
         <VStack w="full" alignItems="flex-start" h={"full"}>
           <Heading fontWeight="medium" size="xl" mb="8">
@@ -22,7 +21,7 @@ const Connections = ({}) => {
           </Flex>
         </VStack>
       </ContentContainer>
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/endpoint/[endpointUUID]/index.tsx b/frontend/src/pages/endpoint/[endpointUUID]/index.tsx
@@ -1,8 +1,7 @@
 import { GetServerSideProps } from "next"
 import ErrorPage from "next/error"
 import superjson from "superjson"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import EndpointPage from "components/Endpoint"
 import { getEndpoint, getUsage } from "api/endpoints"
 import { ApiEndpointDetailed, Usage, Alert } from "@common/types"
@@ -24,18 +23,15 @@ const Endpoint = ({
     return <ErrorPage statusCode={404} />
   }
   return (
-    <SidebarLayoutShell
-      title="Endpoint"
-      currentTab={SideNavLinkDestination.Endpoints}
-    >
+    <PageWrapper title="Endpoint">
       <EndpointPage
         endpoint={parsedEndpoint}
         usage={parsedUsage}
         alerts={parsedAlerts}
         initAlertParams={initAlertParams}
         totalAlertsCount={totalAlertsCount}
       />
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/endpoint/[endpointUUID]/test/[testUUID].tsx b/frontend/src/pages/endpoint/[endpointUUID]/test/[testUUID].tsx
@@ -1,8 +1,7 @@
 import { GetServerSideProps } from "next"
 import ErrorPage from "next/error"
 import superjson from "superjson"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import TestEditor from "components/TestEditor"
 import { ApiEndpointDetailed } from "@common/types"
 import { getTest } from "api/tests"
@@ -16,16 +15,13 @@ const NewTest = ({ endpoint, test }) => {
     return <ErrorPage statusCode={404} />
   }
   return (
-    <SidebarLayoutShell
-      title={parsedTest.name}
-      currentTab={SideNavLinkDestination.Endpoints}
-    >
+    <PageWrapper title={parsedTest.name}>
       <TestEditor
         endpoint={parsedEndpoint}
         initTest={parsedTest}
         isNewTest={false}
       />
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/endpoint/[endpointUUID]/test/new.tsx b/frontend/src/pages/endpoint/[endpointUUID]/test/new.tsx
@@ -1,8 +1,7 @@
 import { GetServerSideProps } from "next"
 import ErrorPage from "next/error"
 import superjson from "superjson"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import TestEditor from "components/TestEditor"
 import { getEndpoint } from "api/endpoints"
 import { ApiEndpointDetailed } from "@common/types"
@@ -15,10 +14,7 @@ const NewTest = ({ endpoint }) => {
     return <ErrorPage statusCode={404} />
   }
   return (
-    <SidebarLayoutShell
-      title="New Test"
-      currentTab={SideNavLinkDestination.Endpoints}
-    >
+    <PageWrapper title="New Test">
       <TestEditor
         endpoint={parsedEndpoint}
         initTest={{
@@ -29,7 +25,7 @@ const NewTest = ({ endpoint }) => {
         }}
         isNewTest={true}
       />
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/endpoints.tsx b/frontend/src/pages/endpoints.tsx
@@ -5,8 +5,7 @@ import { GetServerSideProps } from "next"
 import { ApiEndpoint, GetEndpointParams } from "@common/types"
 import { DataClass, RiskScore } from "@common/enums"
 import EndpointList from "components/EndpointList"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
+import { PageWrapper } from "components/PageWrapper"
 import { ContentContainer } from "components/utils/ContentContainer"
 import { getEndpoints, getHosts } from "api/endpoints"
 import { ENDPOINT_PAGE_LIMIT } from "~/constants"
@@ -39,10 +38,7 @@ const Endpoints = ({ initParams, initEndpoints, initTotalCount, hosts }) => {
   }
 
   return (
-    <SidebarLayoutShell
-      title="Endpoints"
-      currentTab={SideNavLinkDestination.Endpoints}
-    >
+    <PageWrapper title="Endpoints">
       <ContentContainer maxContentW="100rem" px="8" py="8">
         <VStack w="full" alignItems="flex-start" spacing="0">
           <Heading fontWeight="medium" size="lg" mb="4">
@@ -58,7 +54,7 @@ const Endpoints = ({ initParams, initEndpoints, initTotalCount, hosts }) => {
           />
         </VStack>
       </ContentContainer>
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }
 

diff --git a/frontend/src/pages/hosts.tsx b/frontend/src/pages/hosts.tsx
@@ -5,8 +5,7 @@ import { Heading, VStack } from "@chakra-ui/react"
 import { getHostsList } from "api/endpoints"
 import { GetHostParams, HostResponse } from "@common/types"
 import { HOST_PAGE_LIMIT } from "~/constants"
-import { SidebarLayoutShell } from "components/SidebarLayoutShell"
-import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils"
+import { PageWrapper } from "components/PageWrapper"
 import { ContentContainer } from "components/utils/ContentContainer"
 import HostList from "components/HostList"
 
@@ -39,7 +38,7 @@ const Hosts = ({ initHosts, initTotalCount }) => {
   }
 
   return (
-    <SidebarLayoutShell title="Hosts" currentTab={SideNavLinkDestination.Hosts}>
+    <PageWrapper title="Hosts">
       <ContentContainer maxContentW="100rem" px="8" py="8">
         <VStack w="full" alignItems="flex-start" spacing="0">
           <Heading fontWeight="medium" size="lg" mb="4">
@@ -54,7 +53,7 @@ const Hosts = ({ initHosts, initTotalCount }) => {
           />
         </VStack>
       </ContentContainer>
-    </SidebarLayoutShell>
+    </PageWrapper>
   )
 }