fix(webapp): drop the project scope from tab titles

Author: kathiekiwi

.server-changes/page-tab-titles.md

@@ -3,4 +3,4 @@ area: webapp
 type: improvement
 ---
 
-Browser tabs now show the page you're on, plus the project and environment, so several open dashboard tabs are easy to tell apart.
+Browser tabs now name the page you're on, and the run, task or queue when you're looking at one, instead of all reading "Trigger.dev".

apps/webapp/app/utils/pageTitle.test.ts

@@ -47,16 +47,14 @@ const orgRoute: Route = {
   id: ORGANIZATION_MATCH_ID,
   data: {
     organization: { title: "Acme" },
-    project: { name: "my-project" },
-    environment: { type: "PRODUCTION" },
   },
 };
 
 describe("pageMeta", () => {
   it("adds the project and environment scope to an environment page", () => {
     const title = renderTitle([rootRoute, orgRoute, { id: "routes/runs", meta: pageMeta("Runs") }]);
 
-    expect(title).toBe("Runs | my-project (Prod) | Trigger.dev");
+    expect(title).toBe("Runs | Trigger.dev");
   });
 
   it("uses the deepest declared title", () => {
@@ -67,7 +65,7 @@ describe("pageMeta", () => {
       { id: "routes/runs.$runParam", meta: pageMeta(["run_abc", "Runs"]) },
     ]);
 
-    expect(title).toBe("run_abc | Runs | my-project (Prod) | Trigger.dev");
+    expect(title).toBe("run_abc | Runs | Trigger.dev");
   });
 
   it("falls back to the nearest declared title, then the app title", () => {
@@ -78,7 +76,7 @@ describe("pageMeta", () => {
         { id: "routes/runs", meta: pageMeta("Runs") },
         { id: "routes/runs._index" },
       ])
-    ).toBe("Runs | my-project (Prod) | Trigger.dev");
+    ).toBe("Runs | Trigger.dev");
 
     expect(renderTitle([rootRoute, orgRoute, { id: "routes/runs._index" }])).toBe("Trigger.dev");
   });
@@ -95,17 +93,17 @@ describe("pageMeta", () => {
         orgRoute,
         { id: "routes/task", data: { task: { slug: "my-task" } }, meta },
       ])
-    ).toBe("my-task | Tasks | my-project (Prod) | Trigger.dev");
+    ).toBe("my-task | Tasks | Trigger.dev");
 
     expect(
       renderTitle([rootRoute, orgRoute, { id: "routes/task", meta }], {
         ...ENV_PARAMS,
         taskParam: "other",
       })
-    ).toBe("other | Tasks | my-project (Prod) | Trigger.dev");
+    ).toBe("other | Tasks | Trigger.dev");
   });
 
-  it("keeps the org name for org-scoped pages and the app env tag", () => {
+  it("keeps the app env tag", () => {
     const stagingRoot: Route = {
       id: "root",
       data: { appEnv: "staging" },
@@ -121,20 +119,7 @@ describe("pageMeta", () => {
       { organizationSlug: "acme" }
     );
 
-    expect(title).toBe("Team | Acme | Trigger.dev (staging)");
-  });
-
-  it("ignores the project the org loader resolved when the URL names none", () => {
-    // The org loader always resolves a "best" project, so an org page would otherwise
-    // advertise a project the user is not looking at.
-    const title = renderTitle(
-      [rootRoute, orgRoute, { id: "routes/team", meta: pageMeta("Team") }],
-      {
-        organizationSlug: "acme",
-      }
-    );
-
-    expect(title).toBe("Team | Acme | Trigger.dev");
+    expect(title).toBe("Team | Trigger.dev (staging)");
   });
 
   it("carries the root's non-title tags through", () => {
@@ -150,6 +135,6 @@ describe("pageMeta", () => {
     } as any) as MetaDescriptor[];
 
     expect(descriptors).toContainEqual({ name: "viewport", content: "width=1024" });
-    expect(renderTitle(routes)).toBe("Runs | my-project (Prod) | Trigger.dev");
+    expect(renderTitle(routes)).toBe("Runs | Trigger.dev");
   });
 });

apps/webapp/app/utils/pageTitle.ts

@@ -4,13 +4,12 @@ import { appEnvTitleTag } from "~/utils";
 
 /**
  * Tab titles. Every page exports `export const meta = pageMeta(...)` and only says what the page
- * is; the shared scope suffix is added here.
+ * is; the app title is added here.
  *
  * Shape (leading words carry the information, so a narrow tab still reads):
- *   env-scoped page:   `Runs | my-project (Prod) | Trigger.dev`
- *   env-scoped entity: `run_abc | Runs | my-project (Prod) | Trigger.dev`
- *   org-scoped page:   `Team | Acme | Trigger.dev`
- *   everything else:   `Login to Trigger.dev` etc. (no scope to add)
+ *   page:   `Runs | Trigger.dev`
+ *   entity: `run_abc | Runs | Trigger.dev`
+ *   else:   `Login to Trigger.dev` etc.
  *
  * Remix v2 picks the meta of the deepest route that exports one; a route without a meta export
  * inherits its nearest ancestor's. So a layout's `pageMeta` is the fallback for children that
@@ -20,9 +19,6 @@ import { appEnvTitleTag } from "~/utils";
 
 const APP_NAME = "Trigger.dev";
 
-/** The org route holds the project/environment the URL resolved to. */
-const ORGANIZATION_MATCH_ID = "routes/_app.orgs.$organizationSlug";
-
 /** One or more title segments, most specific first: `["run_abc", "Runs"]`. */
 export type TitleSegments = string | string[];
 
@@ -56,53 +52,13 @@ export function pageMeta<TLoader = unknown>(page: PageInput<TLoader>): MetaFunct
   };
 }
 
-/** Builds the full title from the page segments plus the scope found in `matches`. */
+/** Builds the full title from the page segments plus the app title. */
 export function composePageTitle(segments: string[], matches: Matches): string {
-  return [...segments, scopeFromMatches(matches), appTitle(appEnvFromMatches(matches))]
+  return [...segments, appTitle(appEnvFromMatches(matches))]
     .filter((segment): segment is string => Boolean(segment))
     .join(" | ");
 }
 
-export function scopeFromMatches(matches: Matches): string | undefined {
-  const match = matches.find((m) => m.id === ORGANIZATION_MATCH_ID);
-  const data = match?.data as
-    | {
-        organization?: { title?: string | null };
-        project?: { name?: string | null };
-        environment?: { type?: string | null; branchName?: string | null } | null;
-      }
-    | undefined;
-
-  if (!data) return undefined;
-
-  // The org loader resolves a "best" project even on org-scoped URLs that name none, so
-  // the project scope is only honest when the URL actually carries one.
-  const project = match?.params?.projectParam ? data.project?.name : undefined;
-  if (project) {
-    const environment = data.environment ? environmentLabel(data.environment) : undefined;
-    return environment ? `${project} (${environment})` : project;
-  }
-
-  return data.organization?.title ?? undefined;
-}
-
-function environmentLabel(environment: { type?: string | null; branchName?: string | null }) {
-  if (environment.branchName) return environment.branchName;
-
-  switch (environment.type) {
-    case "PRODUCTION":
-      return "Prod";
-    case "STAGING":
-      return "Staging";
-    case "DEVELOPMENT":
-      return "Dev";
-    case "PREVIEW":
-      return "Preview";
-    default:
-      return undefined;
-  }
-}
-
 function appEnvFromMatches(matches: Matches): string | undefined {
   const rootData = matches[0]?.data as { appEnv?: string } | undefined;
   return rootData?.appEnv;