add titles

metlo-labs · Aug 14, 2022 · 254e582 · 254e582
1 parent b5f8cc9
commit 254e582
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 7 deletions.
diff --git a/frontend/src/components/SidebarLayoutShell.tsx b/frontend/src/components/SidebarLayoutShell.tsx
@@ -1,18 +1,25 @@
 import React from "react";
+import Head from "next/head";
 import { Box, HStack } from "@chakra-ui/react";
 import SideNavBar from "./Sidebar";
 import { SideNavLinkDestination } from "components/Sidebar/NavLinkUtils";
 import { DarkModeSwitch } from "components/utils/DarkModeSwitch";
 
 interface SidebarLayoutShellProps {
+  title?: string;
   currentTab?: SideNavLinkDestination;
   children?: React.ReactNode;
 }
 
 export const SidebarLayoutShell: React.FC<SidebarLayoutShellProps> = React.memo(
-  ({ currentTab, children }) => {
+  ({ title, currentTab, children }) => {
     return (
       <HStack spacing={0}>
+        {title ? (
+          <Head>
+            <title>{title}</title>
+          </Head>
+        ) : null}
         <SideNavBar currentTab={currentTab} />
         <Box h="100vh" flex="1" overflowY="auto">
           {children}

diff --git a/frontend/src/pages/alerts.tsx b/frontend/src/pages/alerts.tsx
@@ -30,7 +30,10 @@ const Alerts = () => {
     fetchAlerts();
   }, [params]);
   return (
-    <SidebarLayoutShell currentTab={SideNavLinkDestination.Alerts}>
+    <SidebarLayoutShell
+      title="Alerts"
+      currentTab={SideNavLinkDestination.Alerts}
+    >
       <ContentContainer>
         <VStack w="full" alignItems="flex-start">
           <Heading fontWeight="medium" size="xl" mb="8">

diff --git a/frontend/src/pages/connections.tsx b/frontend/src/pages/connections.tsx
@@ -9,7 +9,7 @@ import { testConnections } from "testData";
 import { Connection } from "@common/types";
 
 const Connections = ({ connections }) => (
-  <SidebarLayoutShell currentTab={SideNavLinkDestination.Connections}>
+  <SidebarLayoutShell title="Connections" currentTab={SideNavLinkDestination.Connections}>
     <ContentContainer>
       <VStack w="full" alignItems="flex-start">
         <Heading fontWeight="medium" size="xl" mb="8">

diff --git a/frontend/src/pages/endpoint/[endpointUUID].tsx b/frontend/src/pages/endpoint/[endpointUUID].tsx
@@ -16,7 +16,10 @@ const Endpoint = ({ endpoint, usage }) => {
     return <ErrorPage statusCode={404} />;
   }
   return (
-    <SidebarLayoutShell currentTab={SideNavLinkDestination.Endpoints}>
+    <SidebarLayoutShell
+      title="Endpoint"
+      currentTab={SideNavLinkDestination.Endpoints}
+    >
       <EndpointPage endpoint={parsedEndpoint} usage={parsedUsage} />
     </SidebarLayoutShell>
   );

diff --git a/frontend/src/pages/endpoints.tsx b/frontend/src/pages/endpoints.tsx
@@ -36,7 +36,7 @@ const Endpoints = () => {
     fetchEndpoints();
   }, [params]);
   return (
-    <SidebarLayoutShell currentTab={SideNavLinkDestination.Endpoints}>
+    <SidebarLayoutShell title="Endpoints" currentTab={SideNavLinkDestination.Endpoints}>
       <ContentContainer>
         <VStack w="full" alignItems="flex-start">
           <Heading fontWeight="medium" size="xl" mb="8">

diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -12,7 +12,7 @@ const Index = ({ summary, topAlerts }) => {
   const parsedSummary = superjson.parse<Summary>(summary);
   const parsedTopAlerts = superjson.parse<Alert[]>(topAlerts);
   return (
-    <SidebarLayoutShell currentTab={SideNavLinkDestination.Home}>
+    <SidebarLayoutShell title="Home" currentTab={SideNavLinkDestination.Home}>
       <ContentContainer>
         <VStack w="full" alignItems="flex-start">
           <Heading fontWeight="medium" size="xl" mb="8">

diff --git a/frontend/src/pages/specs.tsx b/frontend/src/pages/specs.tsx
@@ -9,7 +9,7 @@ import { OpenApiSpec } from "@common/types";
 import { getSpecs } from "api/apiSpecs";
 
 const Specs = ({ apiSpecs }) => (
-  <SidebarLayoutShell currentTab={SideNavLinkDestination.Specs}>
+  <SidebarLayoutShell title="API Specs" currentTab={SideNavLinkDestination.Specs}>
     <ContentContainer>
       <VStack w="full" alignItems="flex-start">
         <Heading fontWeight="medium" size="xl" mb="8">