[dashboard] update document title on setup (#17603)

Author: svenefftinge

components/dashboard/src/components/Header.tsx

@@ -4,14 +4,15 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useEffect } from "react";
 import { useLocation } from "react-router";
+import { useDocumentTitle } from "../hooks/use-document-title";
 import { Separator } from "./Separator";
 import TabMenuItem from "./TabMenuItem";
 import { Heading1, Subheading } from "./typography/headings";
 
 export interface HeaderProps {
-    title: string | React.ReactElement;
+    title: string;
+    complexTitle?: React.ReactElement;
     subtitle: string | React.ReactElement;
     tabs?: TabEntry[];
 }
@@ -24,17 +25,12 @@ export interface TabEntry {
 
 export default function Header(p: HeaderProps) {
     const location = useLocation();
-    useEffect(() => {
-        if (typeof p.title !== "string") {
-            return;
-        }
-        document.title = `${p.title} — Gitpod`;
-    }, [p.title]);
+    useDocumentTitle(`${p.title} — Gitpod`);
     return (
         <div className="app-container border-gray-200 dark:border-gray-800">
             <div className="flex pb-8 pt-6">
                 <div className="">
-                    {typeof p.title === "string" ? <Heading1 tracking="tight">{p.title}</Heading1> : p.title}
+                    {p.complexTitle ? p.complexTitle : <Heading1 tracking="tight">{p.title}</Heading1>}
                     {typeof p.subtitle === "string" ? (
                         <Subheading tracking="wide">{p.subtitle}</Subheading>
                     ) : (

components/dashboard/src/components/UsageView.tsx

@@ -186,7 +186,8 @@ function UsageView({ attributionId }: UsageViewProps) {
     return (
         <>
             <Header
-                title={
+                title="Usage"
+                complexTitle={
                     <div className="flex items-baseline">
                         <Heading1 tracking="tight">Usage</Heading1>
                         <Subheading className="ml-3">(updated every 15 minutes).</Subheading>

components/dashboard/src/dedicated-setup/DedicatedSetup.tsx

@@ -21,11 +21,13 @@ import { UserContext } from "../user-context";
 import { OIDCClientConfig } from "@gitpod/public-api/lib/gitpod/experimental/v1/oidc_pb";
 import { useQueryParams } from "../hooks/use-query-params";
 import { forceDedicatedSetupParam } from "./use-check-dedicated-setup";
+import { useDocumentTitle } from "../hooks/use-document-title";
 
 type Props = {
     onComplete: () => void;
 };
 const DedicatedSetup: FC<Props> = ({ onComplete }) => {
+    useDocumentTitle("Welcome - Gitpod");
     const currentOrg = useCurrentOrg();
     const oidcClients = useOIDCClientsQuery();
 

components/dashboard/src/hooks/use-document-title.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useEffect } from "react";
+
+export function useDocumentTitle(title?: string) {
+    useEffect(() => {
+        if (title && title.length > 0) {
+            document.title = title;
+        }
+    }, [title]);
+}

components/dashboard/src/projects/Prebuild.tsx

@@ -4,17 +4,17 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import dayjs from "dayjs";
 import { PrebuildWithStatus, Project } from "@gitpod/gitpod-protocol";
-import { useEffect, useState } from "react";
+import dayjs from "dayjs";
+import { useEffect, useMemo, useState } from "react";
 import { Redirect, useHistory, useParams } from "react-router";
 import Header from "../components/Header";
 import PrebuildLogs from "../components/PrebuildLogs";
+import { Subheading } from "../components/typography/headings";
 import Spinner from "../icons/Spinner.svg";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
-import { shortCommitMessage } from "./render-utils";
 import { useCurrentProject } from "./project-context";
-import { Heading1, Subheading } from "../components/typography/headings";
+import { shortCommitMessage } from "./render-utils";
 
 export default function PrebuildPage() {
     const history = useHistory();
@@ -49,12 +49,12 @@ export default function PrebuildPage() {
         }).dispose;
     }, [prebuildId, project]);
 
-    const renderTitle = () => {
+    const title = useMemo(() => {
         if (!prebuild) {
             return "unknown prebuild";
         }
-        return <Heading1>{prebuild.info.branch} </Heading1>;
-    };
+        return prebuild.info.branch;
+    }, [prebuild]);
 
     const renderSubtitle = () => {
         if (!prebuild) {
@@ -130,17 +130,13 @@ export default function PrebuildPage() {
         }
     };
 
-    useEffect(() => {
-        document.title = "Prebuild — Gitpod";
-    }, []);
-
     if (!loading && !project) {
         return <Redirect to={"/projects"} />;
     }
 
     return (
         <>
-            <Header title={renderTitle()} subtitle={renderSubtitle()} />
+            <Header title={title} subtitle={renderSubtitle()} />
             <div className="app-container mt-8">
                 <PrebuildLogs workspaceId={prebuild?.info?.buildWorkspaceId}>
                     {["building", "queued"].includes(prebuild?.status || "") ? (

components/dashboard/src/start/StartPage.tsx

@@ -5,14 +5,14 @@
  */
 
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
-import { useEffect } from "react";
 import Alert from "../components/Alert";
-import { Heading2 } from "../components/typography/headings";
 import { UsageLimitReachedModal } from "../components/UsageLimitReachedModal";
+import { Heading2 } from "../components/typography/headings";
+import { useDocumentTitle } from "../hooks/use-document-title";
 import gitpodIcon from "../icons/gitpod.svg";
+import CDEUniverseLogo from "../images/cdeuniverse.svg";
 import { gitpodHostUrl } from "../service/service";
 import { VerifyModal } from "./VerifyModal";
-import CDEUniverseLogo from "../images/cdeuniverse.svg";
 
 export enum StartPhase {
     Checking = 0,
@@ -93,9 +93,7 @@ export interface StartWorkspaceError {
 export function StartPage(props: StartPageProps) {
     const { phase, error } = props;
     let title = props.title || getPhaseTitle(phase, error);
-    useEffect(() => {
-        document.title = "Starting — Gitpod";
-    }, []);
+    useDocumentTitle("Starting — Gitpod");
     return (
         <div className="w-screen h-screen align-middle">
             <div className="flex flex-col mx-auto items-center text-center h-screen">

components/dashboard/src/teams/JoinTeam.tsx

@@ -7,6 +7,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import { useOrganizationsInvalidator } from "../data/organizations/orgs-query";
+import { useDocumentTitle } from "../hooks/use-document-title";
 import { publicApiTeamToProtocol, teamsService } from "../service/public-api";
 
 export default function JoinTeamPage() {
@@ -34,9 +35,7 @@ export default function JoinTeamPage() {
         })();
     }, [history, inviteId, orgInvalidator]);
 
-    useEffect(() => {
-        document.title = "Joining Organization — Gitpod";
-    }, []);
+    useDocumentTitle("Joining Organization — Gitpod");
 
     return joinError ? <div className="mt-16 text-center text-gitpod-red">{String(joinError)}</div> : <></>;
 }

components/dashboard/src/teams/NewTeam.tsx

@@ -5,10 +5,11 @@
  */
 
 import { ConnectError } from "@bufbuild/connect-web";
-import { FormEvent, useEffect, useState } from "react";
+import { FormEvent, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { Heading1, Heading3, Subheading } from "../components/typography/headings";
 import { useOrganizationsInvalidator } from "../data/organizations/orgs-query";
+import { useDocumentTitle } from "../hooks/use-document-title";
 import { publicApiTeamToProtocol, teamsService } from "../service/public-api";
 
 export default function NewTeamPage() {
@@ -36,9 +37,7 @@ export default function NewTeamPage() {
         }
     };
 
-    useEffect(() => {
-        document.title = "New Organization — Gitpod";
-    }, []);
+    useDocumentTitle("New Organization — Gitpod");
 
     return (
         <div className="flex flex-col w-96 mt-24 mx-auto items-center">