chore: adding page titles using project title. (#3692)

* chore: adding page titles * chore: added title to remaining pages * fix: added observer at required places --------- Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
makeplane · Feb 20, 2024 · cf3b888 · cf3b888
1 parent 07a4cb1
commit cf3b888
Show file tree

Hide file tree

Showing 60 changed files with 1,675 additions and 1,206 deletions.
diff --git a/web/components/core/index.ts b/web/components/core/index.ts
@@ -4,3 +4,4 @@ export * from "./sidebar";
 export * from "./theme";
 export * from "./activity";
 export * from "./image-picker-popover";
+export * from "./page-title";
diff --git a/web/components/core/page-title.tsx b/web/components/core/page-title.tsx
@@ -0,0 +1,18 @@
+import Head from "next/head";
+
+type PageHeadTitleProps = {
+  title?: string;
+  description?: string;
+};
+
+export const PageHead: React.FC<PageHeadTitleProps> = (props) => {
+  const { title } = props;
+
+  if (!title) return null;
+
+  return (
+    <Head>
+      <title>{title}</title>
+    </Head>
+  );
+};
diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx
@@ -6,6 +6,7 @@ import { useApplication, useUser } from "hooks/store";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import { SignInRoot } from "components/account";
+import { PageHead } from "components/core";
 // ui
 import { Spinner } from "@plane/ui";
 // images
@@ -34,19 +35,22 @@ export const SignInView = observer(() => {
     );
 
   return (
-    <div className="h-full w-full bg-onboarding-gradient-100">
-      <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
-        <div className="flex items-center gap-x-2 py-10">
-          <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
-          <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+    <>
+      <PageHead title="Sign In" />
+      <div className="h-full w-full bg-onboarding-gradient-100">
+        <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
+          <div className="flex items-center gap-x-2 py-10">
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+          </div>
         </div>
-      </div>
 
-      <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
-        <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
-          <SignInRoot />
+        <div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
+          <div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
+            <SignInRoot />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 });
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
@@ -2,7 +2,8 @@ import React from "react";
 
 import Link from "next/link";
 import Image from "next/image";
-
+// components
+import { PageHead } from "components/core";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
@@ -14,6 +15,7 @@ import type { NextPage } from "next";
 
 const PageNotFound: NextPage = () => (
   <DefaultLayout>
+    <PageHead title="404 - Page Not Found" />
     <div className="grid h-full place-items-center p-4">
       <div className="space-y-8 text-center">
         <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">

diff --git a/web/pages/[workspaceSlug]/active-cycles.tsx b/web/pages/[workspaceSlug]/active-cycles.tsx
@@ -1,13 +1,28 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 // components
+import { PageHead } from "components/core";
 import { WorkspaceActiveCycleHeader } from "components/headers";
 import { WorkspaceActiveCyclesUpgrade } from "components/workspace";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // types
 import { NextPageWithLayout } from "lib/types";
+// hooks
+import { useWorkspace } from "hooks/store";
 
-const WorkspaceActiveCyclesPage: NextPageWithLayout = () => <WorkspaceActiveCyclesUpgrade />;
+const WorkspaceActiveCyclesPage: NextPageWithLayout = observer(() => {
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Active Cycles` : undefined;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <WorkspaceActiveCyclesUpgrade />
+    </>
+  );
+});
 
 WorkspaceActiveCyclesPage.getLayout = function getLayout(page: ReactElement) {
   return <AppLayout header={<WorkspaceActiveCycleHeader />}>{page}</AppLayout>;

diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
@@ -1,22 +1,23 @@
 import React, { Fragment, ReactElement } from "react";
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Tab } from "@headlessui/react";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser, useWorkspace } from "hooks/store";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
+import { PageHead } from "components/core";
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 import { WorkspaceAnalyticsHeader } from "components/headers";
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // constants
 import { ANALYTICS_TABS } from "constants/analytics";
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { WORKSPACE_EMPTY_STATE_DETAILS } from "constants/empty-state";
 // type
 import { NextPageWithLayout } from "lib/types";
-import { useRouter } from "next/router";
-import { WORKSPACE_EMPTY_STATE_DETAILS } from "constants/empty-state";
 
 const AnalyticsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
@@ -33,13 +34,16 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
     currentUser,
   } = useUser();
   const { workspaceProjectIds } = useProject();
-
+  const { currentWorkspace } = useWorkspace();
+  // derived values
   const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
   const EmptyStateImagePath = getEmptyStateImagePath("onboarding", "analytics", isLightMode);
   const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Analytics` : undefined;
 
   return (
     <>
+      <PageHead title={pageTitle} />
       {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
         <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
           <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>

diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/pages/[workspaceSlug]/index.tsx
@@ -1,13 +1,28 @@
 import { ReactElement } from "react";
+import { observer } from "mobx-react";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
+import { PageHead } from "components/core";
 import { WorkspaceDashboardView } from "components/page-views";
 import { WorkspaceDashboardHeader } from "components/headers/workspace-dashboard";
 // types
 import { NextPageWithLayout } from "lib/types";
+// hooks
+import { useWorkspace } from "hooks/store";
 
-const WorkspacePage: NextPageWithLayout = () => <WorkspaceDashboardView />;
+const WorkspacePage: NextPageWithLayout = observer(() => {
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Dashboard` : undefined;
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <WorkspaceDashboardView />
+    </>
+  );
+});
 
 WorkspacePage.getLayout = function getLayout(page: ReactElement) {
   return <AppLayout header={<WorkspaceDashboardHeader />}>{page}</AppLayout>;

diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@@ -4,11 +4,17 @@ import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
+import { PageHead } from "components/core";
 // types
 import { NextPageWithLayout } from "lib/types";
 import { ProfileIssuesPage } from "components/profile/profile-issues";
 
-const ProfileAssignedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="assigned" />;
+const ProfileAssignedIssuesPage: NextPageWithLayout = () => (
+  <>
+    <PageHead title="Profile - Assigned" />
+    <ProfileIssuesPage type="assigned" />
+  </>
+);
 
 ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (

diff --git a/web/pages/[workspaceSlug]/profile/[userId]/created.tsx b/web/pages/[workspaceSlug]/profile/[userId]/created.tsx
@@ -6,11 +6,17 @@ import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
+import { PageHead } from "components/core";
 // types
 import { NextPageWithLayout } from "lib/types";
 import { ProfileIssuesPage } from "components/profile/profile-issues";
 
-const ProfileCreatedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="created" />;
+const ProfileCreatedIssuesPage: NextPageWithLayout = () => (
+  <>
+    <PageHead title="Profile - Created" />
+    <ProfileIssuesPage type="created" />
+  </>
+);
 
 ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (

diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
@@ -8,6 +8,7 @@ import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
+import { PageHead } from "components/core";
 import {
   ProfileActivity,
   ProfilePriorityDistribution,
@@ -42,21 +43,24 @@ const ProfileOverviewPage: NextPageWithLayout = () => {
   });
 
   return (
-    <div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9">
-      <ProfileStats userProfile={userProfile} />
-      <ProfileWorkload stateDistribution={stateDistribution} />
-      <div className="grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2">
-        <ProfilePriorityDistribution userProfile={userProfile} />
-        <ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
+    <>
+      <PageHead title="Profile - Summary" />
+      <div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9">
+        <ProfileStats userProfile={userProfile} />
+        <ProfileWorkload stateDistribution={stateDistribution} />
+        <div className="grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2">
+          <ProfilePriorityDistribution userProfile={userProfile} />
+          <ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
+        </div>
+        <ProfileActivity />
       </div>
-      <ProfileActivity />
-    </div>
+    </>
   );
 };
 
 ProfileOverviewPage.getLayout = function getLayout(page: ReactElement) {
   return (
-    <AppLayout header={<UserProfileHeader type='Summary' />}>
+    <AppLayout header={<UserProfileHeader type="Summary" />}>
       <ProfileAuthWrapper>{page}</ProfileAuthWrapper>
     </AppLayout>
   );

diff --git a/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx b/web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
@@ -6,11 +6,17 @@ import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
+import { PageHead } from "components/core";
 // types
 import { NextPageWithLayout } from "lib/types";
 import { ProfileIssuesPage } from "components/profile/profile-issues";
 
-const ProfileSubscribedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="subscribed" />;
+const ProfileSubscribedIssuesPage: NextPageWithLayout = () => (
+  <>
+    <PageHead title="Profile - Subscribed" />
+    <ProfileIssuesPage type="subscribed" />
+  </>
+);
 
 ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (

diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -1,5 +1,6 @@
 import { useState, ReactElement } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
 import useToast from "hooks/use-toast";
@@ -9,6 +10,7 @@ import { AppLayout } from "layouts/app-layout";
 // components
 import { IssueDetailRoot } from "components/issues";
 import { ProjectArchivedIssueDetailsHeader } from "components/headers";
+import { PageHead } from "components/core";
 // ui
 import { ArchiveIcon, Loader } from "@plane/ui";
 // icons
@@ -18,7 +20,7 @@ import { NextPageWithLayout } from "lib/types";
 // constants
 import { EIssuesStoreType } from "constants/issue";
 
-const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
+const ArchivedIssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, archivedIssueId } = router.query;
@@ -45,6 +47,9 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
   );
 
   const issue = getIssueById(archivedIssueId?.toString() || "") || undefined;
+  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
+  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
+
   if (!issue) return <></>;
 
   const handleUnArchive = async () => {
@@ -79,6 +84,7 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
 
   return (
     <>
+      <PageHead title={pageTitle} />
       {issueLoader ? (
         <Loader className="flex h-full gap-5 p-5">
           <div className="basis-2/3 space-y-2">
@@ -126,7 +132,7 @@ const ArchivedIssueDetailsPage: NextPageWithLayout = () => {
       )}
     </>
   );
-};
+});
 
 ArchivedIssueDetailsPage.getLayout = function getLayout(page: ReactElement) {
   return (