From 5bb320b0f533f229fabd3d089732422748dc12a7 Mon Sep 17 00:00:00 2001 From: Akshay Shekhawat Date: Sat, 3 Dec 2022 01:04:15 -0800 Subject: [PATCH] move sidebar to app level --- frontend/src/components/PageWrapper.tsx | 22 +++++++++++++++++++ .../src/components/SidebarLayoutShell.tsx | 22 +++++++++++++++++++ frontend/src/enterprise/pages/protection.tsx | 12 ++-------- .../pages/protection/AttackDetail.tsx | 10 +++------ frontend/src/pages/_app.tsx | 5 ++++- frontend/src/pages/alerts.tsx | 10 +++------ frontend/src/pages/connections/index.tsx | 12 ++++------ frontend/src/pages/connections/new/aws.tsx | 7 +++--- frontend/src/pages/connections/new/gcp.tsx | 7 +++--- .../pages/endpoint/[endpointUUID]/index.tsx | 10 +++------ .../[endpointUUID]/test/[testUUID].tsx | 10 +++------ .../endpoint/[endpointUUID]/test/new.tsx | 10 +++------ frontend/src/pages/endpoints.tsx | 10 +++------ frontend/src/pages/hosts.tsx | 7 +++--- frontend/src/pages/index.tsx | 9 ++------ frontend/src/pages/protection.tsx | 2 -- frontend/src/pages/sensitive-data.tsx | 10 +++------ frontend/src/pages/settings.tsx | 10 +++------ frontend/src/pages/spec/[name].tsx | 7 +++--- frontend/src/pages/specs.tsx | 10 +++------ frontend/src/pages/vulnerabilities.tsx | 10 +++------ 21 files changed, 98 insertions(+), 114 deletions(-) create mode 100644 frontend/src/components/PageWrapper.tsx diff --git a/frontend/src/components/PageWrapper.tsx b/frontend/src/components/PageWrapper.tsx new file mode 100644 index 00000000..5354917b --- /dev/null +++ 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 = React.memo( + ({ title, children }) => { + return ( + <> + {title ? ( + + {title} + + ) : null} + {children} + + ) + }, +) diff --git a/frontend/src/components/SidebarLayoutShell.tsx b/frontend/src/components/SidebarLayoutShell.tsx index 94237c6d..81c5294a 100644 --- a/frontend/src/components/SidebarLayoutShell.tsx +++ b/frontend/src/components/SidebarLayoutShell.tsx @@ -3,6 +3,7 @@ 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 @@ -10,8 +11,29 @@ interface SidebarLayoutShellProps { 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 = React.memo( ({ title, currentTab, children }) => { + const router = useRouter() + const path = router.pathname + if (!currentTab) { + const firstItem = path.split("/")[1] + currentTab = itemToNavLink[firstItem] + } return ( {title ? ( diff --git a/frontend/src/enterprise/pages/protection.tsx b/frontend/src/enterprise/pages/protection.tsx index 5519e850..0a7ad473 100644 --- 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 }) => { ) } - return ( - - {page} - - ) + return {page} } export default Protection diff --git a/frontend/src/enterprise/pages/protection/AttackDetail.tsx b/frontend/src/enterprise/pages/protection/AttackDetail.tsx index 5282c4c1..083ec547 100644 --- 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 ( - + - + ) } diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index 471325e3..2d3a5e73 100644 --- 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 ( - + + + ) } diff --git a/frontend/src/pages/alerts.tsx b/frontend/src/pages/alerts.tsx index 1f0e0a3c..e06fba16 100644 --- 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 ( - + { /> - + ) } diff --git a/frontend/src/pages/connections/index.tsx b/frontend/src/pages/connections/index.tsx index 8f2b4317..5a79e3da 100644 --- 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 ( - - + + Connections @@ -22,7 +18,7 @@ const Connections = () => { - + ) } diff --git a/frontend/src/pages/connections/new/aws.tsx b/frontend/src/pages/connections/new/aws.tsx index 03c80b35..dc44a95f 100644 --- 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 ( - + @@ -26,7 +25,7 @@ const Connections = ({}) => { - + ) } diff --git a/frontend/src/pages/connections/new/gcp.tsx b/frontend/src/pages/connections/new/gcp.tsx index da5e28ce..d87d6ba4 100644 --- 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 ( - + @@ -22,7 +21,7 @@ const Connections = ({}) => { - + ) } diff --git a/frontend/src/pages/endpoint/[endpointUUID]/index.tsx b/frontend/src/pages/endpoint/[endpointUUID]/index.tsx index c89f02e8..7a7055f9 100644 --- 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,10 +23,7 @@ const Endpoint = ({ return } return ( - + - + ) } diff --git a/frontend/src/pages/endpoint/[endpointUUID]/test/[testUUID].tsx b/frontend/src/pages/endpoint/[endpointUUID]/test/[testUUID].tsx index 5d12efcc..8b43628a 100644 --- 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 } return ( - + - + ) } diff --git a/frontend/src/pages/endpoint/[endpointUUID]/test/new.tsx b/frontend/src/pages/endpoint/[endpointUUID]/test/new.tsx index d6b6bbad..22884b64 100644 --- 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 } return ( - + { }} isNewTest={true} /> - + ) } diff --git a/frontend/src/pages/endpoints.tsx b/frontend/src/pages/endpoints.tsx index 985c7185..05c1d161 100644 --- 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 ( - + @@ -58,7 +54,7 @@ const Endpoints = ({ initParams, initEndpoints, initTotalCount, hosts }) => { /> - + ) } diff --git a/frontend/src/pages/hosts.tsx b/frontend/src/pages/hosts.tsx index a0303a86..bd4d3f3a 100644 --- 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 ( - + @@ -54,7 +53,7 @@ const Hosts = ({ initHosts, initTotalCount }) => { /> - + ) } diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 76907d09..93a4d9f4 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -3,8 +3,7 @@ import superjson from "superjson" import { getInstanceSettings, getSummary } from "api/home" import { Summary, InstanceSettings } from "@common/types" import Error from "next/error" -import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils" -import { SidebarLayoutShell } from "components/SidebarLayoutShell" +import { PageWrapper } from "components/PageWrapper" import { ContentContainer } from "components/utils/ContentContainer" import HomePage from "components/Home" import { HomeOnboardingView } from "components/Onboarding/HomeOnboardingView" @@ -40,11 +39,7 @@ const Index = ({ summary, instanceSettings }) => { ) } - return ( - - {page} - - ) + return {page} } export const getServerSideProps: GetServerSideProps = async context => { diff --git a/frontend/src/pages/protection.tsx b/frontend/src/pages/protection.tsx index 53b551ce..50749894 100644 --- a/frontend/src/pages/protection.tsx +++ b/frontend/src/pages/protection.tsx @@ -1,7 +1,5 @@ import superjson from "superjson" import { GetServerSideProps } from "next" -import { getAttacks } from "api/attacks" -import { getHosts } from "api/endpoints" import ProtectionContent from "enterprise/pages/protection" const Protection = ({ attacksResponse, hosts }) => ( diff --git a/frontend/src/pages/sensitive-data.tsx b/frontend/src/pages/sensitive-data.tsx index ad1bc2df..11bc8403 100644 --- a/frontend/src/pages/sensitive-data.tsx +++ b/frontend/src/pages/sensitive-data.tsx @@ -2,8 +2,7 @@ import { GetServerSideProps } from "next" import Error from "next/error" import superjson from "superjson" import SensitiveDataPage from "components/SensitiveData" -import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils" -import { SidebarLayoutShell } from "components/SidebarLayoutShell" +import { PageWrapper } from "components/PageWrapper" import { getSensitiveDataSummary } from "api/sensitiveData" import { SensitiveDataSummary } from "@common/types" import { getHosts } from "api/endpoints" @@ -14,12 +13,9 @@ const SensitiveData = ({ summary, hosts }) => { return } return ( - + - + ) } diff --git a/frontend/src/pages/settings.tsx b/frontend/src/pages/settings.tsx index c9a578da..a6ca8a83 100644 --- a/frontend/src/pages/settings.tsx +++ b/frontend/src/pages/settings.tsx @@ -20,8 +20,7 @@ import { getMetloConfig, updateMetloConfig } from "api/metlo-config" import KeyAddedModal from "components/Keys/keyAddedPrompt" import NewKeys from "components/Keys/newKeys" import ListKeys from "components/Keys/list" -import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils" -import { SidebarLayoutShell } from "components/SidebarLayoutShell" +import { PageWrapper } from "components/PageWrapper" import { ContentContainer } from "components/utils/ContentContainer" import { GetServerSideProps } from "next" import { useState } from "react" @@ -120,10 +119,7 @@ const Settings = ({ keys: _keysString, metloConfig }) => { } return ( - + @@ -214,7 +210,7 @@ const Settings = ({ keys: _keysString, metloConfig }) => { - + ) } diff --git a/frontend/src/pages/spec/[name].tsx b/frontend/src/pages/spec/[name].tsx index 9b477ca2..8f5701e4 100644 --- a/frontend/src/pages/spec/[name].tsx +++ b/frontend/src/pages/spec/[name].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 { getSpec } from "api/apiSpecs" import SpecPage from "components/Spec" import { OpenApiSpec } from "@common/types" @@ -14,11 +13,11 @@ const Spec = ({ spec }) => { return } return ( - + - + ) } diff --git a/frontend/src/pages/specs.tsx b/frontend/src/pages/specs.tsx index d52a2721..53e3f22a 100644 --- a/frontend/src/pages/specs.tsx +++ b/frontend/src/pages/specs.tsx @@ -2,18 +2,14 @@ import superjson from "superjson" import { GetServerSideProps } from "next" import { HiOutlineExclamationCircle } from "icons/hi/HiOutlineExclamationCircle" import { Box, Heading, HStack, Icon, VStack, Tooltip } 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 SpecList from "components/SpecList" import { OpenApiSpec } from "@common/types" import { getSpecs } from "api/apiSpecs" const Specs = ({ apiSpecs }) => ( - + @@ -38,7 +34,7 @@ const Specs = ({ apiSpecs }) => ( (apiSpecs)} /> - + ) export const getServerSideProps: GetServerSideProps = async context => { diff --git a/frontend/src/pages/vulnerabilities.tsx b/frontend/src/pages/vulnerabilities.tsx index 070d907e..7a9e08d2 100644 --- a/frontend/src/pages/vulnerabilities.tsx +++ b/frontend/src/pages/vulnerabilities.tsx @@ -1,8 +1,7 @@ import { GetServerSideProps } from "next" import Error from "next/error" import superjson from "superjson" -import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils" -import { SidebarLayoutShell } from "components/SidebarLayoutShell" +import { PageWrapper } from "components/PageWrapper" import { VulnerabilitySummary } from "@common/types" import { getHosts } from "api/endpoints" import { getVulnerabilitySummary } from "api/alerts/vulnerabilities" @@ -14,12 +13,9 @@ const Vulnerabilities = ({ summary, hosts }) => { return } return ( - + - + ) }