feat: show more context in document title for pipes and tiles

Author: pregnantboy

package-lock.json

@@ -46,6 +46,7 @@
     "luxon": "^2.3.1",
     "node-html-parser": "6.1.13",
     "papaparse": "5.4.1",
+    "react-helmet": "6.1.0",
     "react-hook-form": "^7.17.2",
     "react-icons": "^4.12.0",
     "react-json-tree": "^0.18.0",
@@ -68,6 +69,7 @@
     "@types/papaparse": "^5.3.14",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
     "@vitejs/plugin-react": "^4.5.1",

packages/frontend/package.json

@@ -1,6 +1,7 @@
 import type { IFlow } from '@plumber/types'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Helmet } from 'react-helmet'
 import { BiChevronLeft, BiCog, BiInfoCircle } from 'react-icons/bi'
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { ApolloError, useMutation, useQuery } from '@apollo/client'
@@ -190,6 +191,9 @@ export default function EditorLayout() {
 
   return (
     <>
+      <Helmet>
+        <title>{flow?.name} | Pipe</title>
+      </Helmet>
       <Flex h="100vh" flexDirection="column">
         <HStack
           position="fixed"

packages/frontend/src/components/EditorLayout/index.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react'
+import { Helmet } from 'react-helmet'
 import {
   BiBookOpen,
   BiBookReader,
@@ -97,6 +98,9 @@ export default function Layout({ children }: PublicLayoutProps): JSX.Element {
   return (
     <>
       <SiteWideBanner />
+      <Helmet>
+        <title>Plumber</title>
+      </Helmet>
       <LayoutNavigationProvider value={layoutNavigationProviderData}>
         <AppBar />
         <Box display="flex" flex="1">

packages/frontend/src/components/Layout/index.tsx

@@ -1,3 +1,4 @@
+import { Helmet } from 'react-helmet'
 import { Navigate } from 'react-router-dom'
 import { Box, Flex } from '@chakra-ui/react'
 import { RestrictedGovtMasthead } from '@opengovsg/design-system-react'
@@ -22,6 +23,9 @@ export default function Layout({ children }: LayoutProps): React.ReactElement {
     <Flex minH="100vh" flexDir="column">
       <SiteWideBanner />
       <RestrictedGovtMasthead />
+      <Helmet>
+        <title>Plumber</title>
+      </Helmet>
       <Box
         sx={{
           display: 'flex',

packages/frontend/src/components/PublicLayout/index.tsx

@@ -1,6 +1,7 @@
 import { ITableMetadata } from '@plumber/types'
 
 import { useEffect } from 'react'
+import { Helmet } from 'react-helmet'
 import { useParams } from 'react-router-dom'
 import { ApolloError, useQuery } from '@apollo/client'
 import { Center, Flex } from '@chakra-ui/react'
@@ -96,6 +97,9 @@ export default function Tile(): JSX.Element | null {
       isThroughputError={isThroughputError}
       refetch={refetch}
     >
+      <Helmet>
+        <title>{name} | Tile</title>
+      </Helmet>
       <Flex
         flexDir={{ base: 'column' }}
         justifyContent="space-between"

packages/frontend/src/pages/Tile/index.tsx

@@ -1,3 +1,4 @@
+import { Helmet } from 'react-helmet'
 import { Box } from '@chakra-ui/react'
 
 import AppBar from '@/components/AppBar'
@@ -20,6 +21,9 @@ export default function TransfersLayout(props: TransfersLayoutProps) {
   return (
     <>
       <SiteWideBanner />
+      <Helmet>
+        <title>Plumber</title>
+      </Helmet>
       <AppBar />
       <Box>{children}</Box>
     </>