Merge pull request #7450 from tinyspeck/sarabee-vtadmin-document-title

[vtadmin-web] Set document.title from route components

web/vtadmin/src/components/routes/Clusters.tsx

@@ -16,8 +16,10 @@
 import { orderBy } from 'lodash-es';
 import * as React from 'react';
 import { useClusters } from '../../hooks/api';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 
 export const Clusters = () => {
+    useDocumentTitle('Clusters');
     const { data } = useClusters();
 
     const rows = React.useMemo(() => {

web/vtadmin/src/components/routes/Debug.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import { Theme, useTheme } from '../../hooks/useTheme';
 import { Button } from '../Button';
 import { Icon, Icons } from '../Icon';
 import { TextInput } from '../TextInput';
 import style from './Debug.module.scss';
 
 export const Debug = () => {
+    useDocumentTitle('Debug');
     const [theme, setTheme] = useTheme();
 
     return (

web/vtadmin/src/components/routes/Gates.tsx

@@ -16,8 +16,10 @@
 import { orderBy } from 'lodash-es';
 import * as React from 'react';
 import { useGates } from '../../hooks/api';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 
 export const Gates = () => {
+    useDocumentTitle('Gates');
     const { data } = useGates();
 
     const rows = React.useMemo(() => {

web/vtadmin/src/components/routes/Keyspaces.tsx

@@ -16,8 +16,10 @@
 import { orderBy } from 'lodash-es';
 import * as React from 'react';
 import { useKeyspaces } from '../../hooks/api';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 
 export const Keyspaces = () => {
+    useDocumentTitle('Keyspaces');
     const { data } = useKeyspaces();
 
     const rows = React.useMemo(() => {

web/vtadmin/src/components/routes/Schemas.tsx

@@ -16,8 +16,10 @@
 import { orderBy } from 'lodash-es';
 import * as React from 'react';
 import { useTableDefinitions } from '../../hooks/api';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 
 export const Schemas = () => {
+    useDocumentTitle('Schemas');
     const { data = [] } = useTableDefinitions();
 
     const rows = React.useMemo(() => {

web/vtadmin/src/components/routes/Tablets.tsx

@@ -18,8 +18,10 @@ import * as React from 'react';
 import { useTablets } from '../../hooks/api';
 import { vtadmin as pb, topodata } from '../../proto/vtadmin';
 import { orderBy } from 'lodash-es';
+import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 
 export const Tablets = () => {
+    useDocumentTitle('Tablets');
     const { data = [] } = useTablets();
 
     const rows = React.useMemo(() => {

web/vtadmin/src/hooks/useDocumentTitle.ts

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+
+// useDocumentTitle is a simple hook to set the document.title of the page.
+//
+// Note that there's a noticeable delay, around ~500ms, between
+// when the parent component renders and when the document.title
+// is updated. It's not terrible... but it is a little bit annoying.
+//
+// Unfortunately, neither React hooks nor react-router offer
+// a mechanism to hook into the "componentWillMount" stage before the
+// first render. This problem seems to be common even in libraries
+// like react-helmet; see https://github.com/nfl/react-helmet/issues/189.
+//
+// Other approaches that still, unfortunately, exhibit the lag:
+//
+//  - Setting document.title directly in component functions
+//  - Setting document.title in a Route component's render prop
+//  - Setting document.title on history.listen events
+//
+export const useDocumentTitle = (title: string) => {
+    // Update document.title whenever the `title` argument changes.
+    useEffect(() => {
+        document.title = `${title} | VTAdmin`;
+    }, [title]);
+
+    // Restore the default document title on unmount.
+    // (While one may think this might be the source of the aforementioned delay
+    // (and that idea wouldn't be far off since this indeed double-updates the title)
+    // that is not the case as the lag happens even without this.)
+    useEffect(() => {
+        return () => {
+            document.title = 'VTAdmin';
+        };
+    }, []);
+};