Set useful page titles

src/App.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 import { Routes, Route } from "react-router-dom";
+import { Helmet } from "react-helmet";
 
 import AppBar from "./components/AppBar";
 import Drawer from "./components/Drawer";
@@ -20,6 +21,9 @@ function App(props: AppProps) {
   const [drawerOpen, setDrawerOpen] = useState(false);
   return (
     <div className="App">
+      <Helmet>
+        <title>Pulpito</title>
+      </Helmet>
       <header className="App-header">
         <AppBar
           setDrawerOpen={setDrawerOpen}

src/components/AppBar/index.js

@@ -1,6 +1,6 @@
 import { Link as RouterLink } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
-import makeStyles from '@mui/styles/makeStyles';
+import makeStyles from "@mui/styles/makeStyles";
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
 import Brightness4Icon from "@mui/icons-material/Brightness4";
@@ -42,7 +42,8 @@ export default function AppBar(props) {
           onClick={() => {
             props.setDrawerOpen(true);
           }}
-          size="large">
+          size="large"
+        >
           <MenuIcon />
         </IconButton>
         <Typography

src/pages/Job/index.js

@@ -16,6 +16,7 @@ import Editor from "react-simple-code-editor";
 import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-yaml";
 import "prismjs/themes/prism-tomorrow.css";
+import { Helmet } from "react-helmet";
 
 import YAML from "json-to-pretty-yaml";
 
@@ -128,6 +129,9 @@ export default function Job() {
   const query = useJob(name, job_id);
   return (
     <Grid container spacing={2}>
+      <Helmet>
+        <title>{`Job ${job_id} - Pulpito`}</title>
+      </Helmet>
       <Grid item xs={12} style={{ display: "flex" }}>
         <StatusIcon status={query.data?.status} />
         <Typography variant="h5">

src/pages/Queue/index.js

@@ -1,11 +1,15 @@
 import Typography from "@mui/material/Typography";
+import { Helmet } from "react-helmet";
 
 import RunList from "../../components/RunList";
 
 export default function Queue() {
   const state = { queued: true };
   return (
     <div>
+      <Helmet>
+        <title>Queue - Pulpito</title>
+      </Helmet>
       <Typography variant="h5" style={{ margin: "20px" }}>
         Queue
       </Typography>

src/pages/Run/index.tsx

@@ -6,12 +6,15 @@ import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import { format } from "date-fns";
 import SourceBranch from "mdi-material-ui/SourceBranch";
+import { Helmet } from "react-helmet";
 
-import { useRun } from "../../lib/paddles";
 import type { Job, RunParams } from "../../lib/paddles.d";
+
+import { useRun } from "../../lib/paddles";
 import JobList from "../../components/JobList";
 import Link from "../../components/Link";
 
+
 const useStyles = makeStyles(() => ({
   root: {
     "& .MuiButton-root": {
@@ -73,6 +76,9 @@ export default function Run() {
     : null;
   return (
     <div className={classes.root}>
+      <Helmet>
+        <title>{ `${name} - Pulpito` }</title>
+      </Helmet>
       <Typography variant="h5" style={{ margin: "20px 0px" }}>
         {name}
       </Typography>

src/pages/Runs/index.tsx

@@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
 import { createBrowserHistory } from "history";
 import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
+import { Helmet } from "react-helmet";
 
 import FilterMenu from "../../components/FilterMenu";
 import RunList from "../../components/RunList";
@@ -98,6 +99,9 @@ export default function Runs() {
   }, [history, params, state]);
   return (
     <div>
+      <Helmet>
+        <title>Runs - Pulpito</title>
+      </Helmet>
       <Typography variant="h5" style={{ margin: "20px" }}>
         Runs
       </Typography>