Skip to content

Commit c95b3f0

Browse files
pregnantboypregnantboy
authored
feat: show more context in document title for pipes and tiles (#1117)
## Problem Right now all our tabs says "Plumber", so it's hard to navigate when user has multiple tabs open. ## Solution Show pipe/tile name in tab title. <img width="714" height="80" alt="image" src="https://github.com/user-attachments/assets/a512ece6-4d0b-47c7-bfd1-c73fbfa8dec5" /> Tests - [x] Check that exiting the pipe / tile will revert the title back to "Plumber" - [x] Check that editing the pipe / tile will change the tab title accordingly
1 parent 7bfe323 commit c95b3f0

File tree

9 files changed

+137
-71
lines changed

9 files changed

+137
-71
lines changed

‎package-lock.json‎

Lines changed: 34 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"luxon": "^2.3.1",
4747
"node-html-parser": "6.1.13",
4848
"papaparse": "5.4.1",
49+
"react-helmet": "6.1.0",
4950
"react-hook-form": "^7.17.2",
5051
"react-icons": "^4.12.0",
5152
"react-json-tree": "^0.18.0",
@@ -68,6 +69,7 @@
6869
"@types/papaparse": "^5.3.14",
6970
"@types/react": "^18.0.27",
7071
"@types/react-dom": "^18.0.10",
72+
"@types/react-helmet": "^6.1.11",
7173
"@typescript-eslint/eslint-plugin": "^5.9.1",
7274
"@typescript-eslint/parser": "^5.9.1",
7375
"@vitejs/plugin-react": "^4.5.1",

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { IFlow } from '@plumber/types'
22

33
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
4+
import { Helmet } from 'react-helmet'
45
import { BiChevronLeft, BiCog, BiInfoCircle } from 'react-icons/bi'
56
import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
67
import { ApolloError, useMutation, useQuery } from '@apollo/client'
@@ -190,6 +191,9 @@ export default function EditorLayout() {
190191

191192
return (
192193
<>
194+
<Helmet>
195+
<title>{flow?.name} | Pipe</title>
196+
</Helmet>
193197
<Flex h="100vh" flexDirection="column">
194198
<HStack
195199
position="fixed"

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useMemo, useState } from 'react'
2+
import { Helmet } from 'react-helmet'
23
import {
34
BiBookOpen,
45
BiBookReader,
@@ -97,6 +98,9 @@ export default function Layout({ children }: PublicLayoutProps): JSX.Element {
9798
return (
9899
<>
99100
<SiteWideBanner />
101+
<Helmet>
102+
<title>Plumber</title>
103+
</Helmet>
100104
<LayoutNavigationProvider value={layoutNavigationProviderData}>
101105
<AppBar />
102106
<Box display="flex" flex="1">

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Helmet } from 'react-helmet'
12
import { Navigate } from 'react-router-dom'
23
import { Box, Flex } from '@chakra-ui/react'
34
import { RestrictedGovtMasthead } from '@opengovsg/design-system-react'
@@ -22,6 +23,9 @@ export default function Layout({ children }: LayoutProps): React.ReactElement {
2223
<Flex minH="100vh" flexDir="column">
2324
<SiteWideBanner />
2425
<RestrictedGovtMasthead />
26+
<Helmet>
27+
<title>Plumber</title>
28+
</Helmet>
2529
<Box
2630
sx={{
2731
display: 'flex',

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

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Helmet } from 'react-helmet'
12
import { Box, Stack, Text, VStack } from '@chakra-ui/react'
23
import { Link } from '@opengovsg/design-system-react'
34

@@ -7,40 +8,45 @@ import styles from '@/pages/UnauthorizedTile/UnauthorizedTile.module.css'
78

89
export default function InvalidEditorPage() {
910
return (
10-
<Stack
11-
direction={{ base: 'column', md: 'row' }}
12-
maxW="1000px"
13-
margin="auto"
14-
gap={8}
15-
px={8}
16-
alignItems="center"
17-
justifyContent="center"
18-
>
19-
<Box
20-
className={styles.flicker}
21-
as={PipeIcon}
22-
color="primary.300"
23-
w="400px"
24-
h="200px"
25-
maxW="50vw"
26-
/>
27-
<VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
28-
<Text
29-
textStyle="h4"
30-
textAlign={{ base: 'center', md: 'left' }}
31-
fontWeight="normal"
32-
>
33-
Pipe not found, you may have transferred it to someone else 🤔
34-
</Text>
35-
<Link
36-
textStyle="h6"
37-
textAlign={{ base: 'center', md: 'left' }}
38-
fontWeight="normal"
39-
href={URLS.FLOWS}
40-
>
41-
Back to your Pipes
42-
</Link>
43-
</VStack>
44-
</Stack>
11+
<>
12+
<Helmet>
13+
<title>you seem lost...</title>
14+
</Helmet>
15+
<Stack
16+
direction={{ base: 'column', md: 'row' }}
17+
maxW="1000px"
18+
margin="auto"
19+
gap={8}
20+
px={8}
21+
alignItems="center"
22+
justifyContent="center"
23+
>
24+
<Box
25+
className={styles.flicker}
26+
as={PipeIcon}
27+
color="primary.300"
28+
w="400px"
29+
h="200px"
30+
maxW="50vw"
31+
/>
32+
<VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
33+
<Text
34+
textStyle="h4"
35+
textAlign={{ base: 'center', md: 'left' }}
36+
fontWeight="normal"
37+
>
38+
Pipe not found, you may have transferred it to someone else 🤔
39+
</Text>
40+
<Link
41+
textStyle="h6"
42+
textAlign={{ base: 'center', md: 'left' }}
43+
fontWeight="normal"
44+
href={URLS.FLOWS}
45+
>
46+
Back to your Pipes
47+
</Link>
48+
</VStack>
49+
</Stack>
50+
</>
4551
)
4652
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ITableMetadata } from '@plumber/types'
22

33
import { useEffect } from 'react'
4+
import { Helmet } from 'react-helmet'
45
import { useParams } from 'react-router-dom'
56
import { ApolloError, useQuery } from '@apollo/client'
67
import { Center, Flex } from '@chakra-ui/react'
@@ -97,6 +98,9 @@ export default function Tile(): JSX.Element | null {
9798
isThroughputError={isThroughputError}
9899
refetch={refetch}
99100
>
101+
<Helmet>
102+
<title>{name} | Tile</title>
103+
</Helmet>
100104
<Flex
101105
flexDir={{ base: 'column' }}
102106
justifyContent="space-between"

‎packages/frontend/src/pages/Transfers/layouts/TransfersLayout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Helmet } from 'react-helmet'
12
import { Box } from '@chakra-ui/react'
23

34
import AppBar from '@/components/AppBar'
@@ -20,6 +21,9 @@ export default function TransfersLayout(props: TransfersLayoutProps) {
2021
return (
2122
<>
2223
<SiteWideBanner />
24+
<Helmet>
25+
<title>Plumber</title>
26+
</Helmet>
2327
<AppBar />
2428
<Box>{children}</Box>
2529
</>

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

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Helmet } from 'react-helmet'
12
import { Image, Stack, Text, VStack } from '@chakra-ui/react'
23
import { Link } from '@opengovsg/design-system-react'
34

@@ -12,39 +13,44 @@ interface MissingTileProps {
1213

1314
export function MissingTile({ title }: MissingTileProps): JSX.Element {
1415
return (
15-
<Stack
16-
direction={{ base: 'column', md: 'row' }}
17-
maxW="1000px"
18-
margin="auto"
19-
gap={8}
20-
px={8}
21-
alignItems="center"
22-
justifyContent="center"
23-
>
24-
<Image
25-
className={styles.flicker}
26-
src={spreadsheetImg}
27-
alt="Spreadsheet"
28-
w="400px"
29-
maxW="50%"
30-
/>
31-
<VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
32-
<Text
33-
textStyle="h4"
34-
textAlign={{ base: 'center', md: 'left' }}
35-
fontWeight="normal"
36-
>
37-
{title}
38-
</Text>
39-
<Link
40-
textStyle="h6"
41-
textAlign={{ base: 'center', md: 'left' }}
42-
fontWeight="normal"
43-
href={URLS.TILES}
44-
>
45-
Back to your Tiles
46-
</Link>
47-
</VStack>
48-
</Stack>
16+
<>
17+
<Helmet>
18+
<title>you seem lost...</title>
19+
</Helmet>
20+
<Stack
21+
direction={{ base: 'column', md: 'row' }}
22+
maxW="1000px"
23+
margin="auto"
24+
gap={8}
25+
px={8}
26+
alignItems="center"
27+
justifyContent="center"
28+
>
29+
<Image
30+
className={styles.flicker}
31+
src={spreadsheetImg}
32+
alt="Spreadsheet"
33+
w="400px"
34+
maxW="50%"
35+
/>
36+
<VStack alignItems={{ base: 'center', md: 'start' }} gap={2}>
37+
<Text
38+
textStyle="h4"
39+
textAlign={{ base: 'center', md: 'left' }}
40+
fontWeight="normal"
41+
>
42+
{title}
43+
</Text>
44+
<Link
45+
textStyle="h6"
46+
textAlign={{ base: 'center', md: 'left' }}
47+
fontWeight="normal"
48+
href={URLS.TILES}
49+
>
50+
Back to your Tiles
51+
</Link>
52+
</VStack>
53+
</Stack>
54+
</>
4955
)
5056
}

0 commit comments

Comments
 (0)