Skip to content

[dashboard] update document title on setup #17603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 15, 2023
Merged

[dashboard] update document title on setup #17603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions components/dashboard/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
}
Expand All @@ -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>
) : (
Expand Down
3 changes: 2 additions & 1 deletion components/dashboard/src/components/UsageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions components/dashboard/src/dedicated-setup/DedicatedSetup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would we want to swap the ordering? The more tabs I have open, the fewer characters I will see and as such showing Gitpod instead of Welcome may be preferrable.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're setting the title here, do we need to also reset it elsewhere such that after you complete the setup, we no longer show this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is set elsewhere using the pattern " - Gitpod"

const currentOrg = useCurrentOrg();
const oidcClients = useOIDCClientsQuery();

Expand Down
15 changes: 15 additions & 0 deletions components/dashboard/src/hooks/use-document-title.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]);
}
Comment on lines +9 to +15
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are many occurences of something like

    useEffect(() => {
        document.title = "New Organization — Gitpod";
    }, []);

Could you update these to use the effect?

20 changes: 8 additions & 12 deletions components/dashboard/src/projects/Prebuild.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 || "") ? (
Expand Down
10 changes: 4 additions & 6 deletions components/dashboard/src/start/StartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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">
Expand Down
5 changes: 2 additions & 3 deletions components/dashboard/src/teams/JoinTeam.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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> : <></>;
}
7 changes: 3 additions & 4 deletions components/dashboard/src/teams/NewTeam.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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">
Expand Down