chore: add missing tile/pipe title

Author: pregnantboy

packages/frontend/src/pages/Editor/components/InvalidEditorPage.tsx

@@ -1,3 +1,4 @@
+import { Helmet } from 'react-helmet'
 import { Box, Stack, Text, VStack } from '@chakra-ui/react'
 import { Link } from '@opengovsg/design-system-react'
 
@@ -7,40 +8,45 @@ import styles from '@/pages/UnauthorizedTile/UnauthorizedTile.module.css'
 
 export default function InvalidEditorPage() {
   return (
-    <Stack
-      direction={{ base: 'column', md: 'row' }}
-      maxW="1000px"
-      margin="auto"
-      gap={8}
-      px={8}
-      alignItems="center"
-      justifyContent="center"
-    >
-      <Box
-        className={styles.flicker}
-        as={PipeIcon}
-        color="primary.300"
-        w="400px"
-        h="200px"
-        maxW="50vw"
-      />
-      <VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
-        <Text
-          textStyle="h4"
-          textAlign={{ base: 'center', md: 'left' }}
-          fontWeight="normal"
-        >
-          Pipe not found, you may have transferred it to someone else 🤔
-        </Text>
-        <Link
-          textStyle="h6"
-          textAlign={{ base: 'center', md: 'left' }}
-          fontWeight="normal"
-          href={URLS.FLOWS}
-        >
-          Back to your Pipes
-        </Link>
-      </VStack>
-    </Stack>
+    <>
+      <Helmet>
+        <title>you seem lost...</title>
+      </Helmet>
+      <Stack
+        direction={{ base: 'column', md: 'row' }}
+        maxW="1000px"
+        margin="auto"
+        gap={8}
+        px={8}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Box
+          className={styles.flicker}
+          as={PipeIcon}
+          color="primary.300"
+          w="400px"
+          h="200px"
+          maxW="50vw"
+        />
+        <VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
+          <Text
+            textStyle="h4"
+            textAlign={{ base: 'center', md: 'left' }}
+            fontWeight="normal"
+          >
+            Pipe not found, you may have transferred it to someone else 🤔
+          </Text>
+          <Link
+            textStyle="h6"
+            textAlign={{ base: 'center', md: 'left' }}
+            fontWeight="normal"
+            href={URLS.FLOWS}
+          >
+            Back to your Pipes
+          </Link>
+        </VStack>
+      </Stack>
+    </>
   )
 }

packages/frontend/src/pages/UnauthorizedTile/MissingTile.tsx

@@ -1,3 +1,4 @@
+import { Helmet } from 'react-helmet'
 import { Image, Stack, Text, VStack } from '@chakra-ui/react'
 import { Link } from '@opengovsg/design-system-react'
 
@@ -12,39 +13,44 @@ interface MissingTileProps {
 
 export function MissingTile({ title }: MissingTileProps): JSX.Element {
   return (
-    <Stack
-      direction={{ base: 'column', md: 'row' }}
-      maxW="1000px"
-      margin="auto"
-      gap={8}
-      px={8}
-      alignItems="center"
-      justifyContent="center"
-    >
-      <Image
-        className={styles.flicker}
-        src={spreadsheetImg}
-        alt="Spreadsheet"
-        w="400px"
-        maxW="50%"
-      />
-      <VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
-        <Text
-          textStyle="h4"
-          textAlign={{ base: 'center', md: 'left' }}
-          fontWeight="normal"
-        >
-          {title}
-        </Text>
-        <Link
-          textStyle="h6"
-          textAlign={{ base: 'center', md: 'left' }}
-          fontWeight="normal"
-          href={URLS.TILES}
-        >
-          Back to your Tiles
-        </Link>
-      </VStack>
-    </Stack>
+    <>
+      <Helmet>
+        <title>you seem lost...</title>
+      </Helmet>
+      <Stack
+        direction={{ base: 'column', md: 'row' }}
+        maxW="1000px"
+        margin="auto"
+        gap={8}
+        px={8}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Image
+          className={styles.flicker}
+          src={spreadsheetImg}
+          alt="Spreadsheet"
+          w="400px"
+          maxW="50%"
+        />
+        <VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
+          <Text
+            textStyle="h4"
+            textAlign={{ base: 'center', md: 'left' }}
+            fontWeight="normal"
+          >
+            {title}
+          </Text>
+          <Link
+            textStyle="h6"
+            textAlign={{ base: 'center', md: 'left' }}
+            fontWeight="normal"
+            href={URLS.TILES}
+          >
+            Back to your Tiles
+          </Link>
+        </VStack>
+      </Stack>
+    </>
   )
 }