[WEB-1310] chore: page title can be blank (#4486)

* chore: page title can be blank

* chore: handle undefined page name in the helper function

web/components/pages/editor/title.tsx

@@ -38,7 +38,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
             style={{
               lineHeight: "1.2",
             }}
-            placeholder="Untitled Page"
+            placeholder="Untitled"
             onKeyDown={(e) => {
               if (e.key === "Enter") {
                 e.preventDefault();
@@ -60,7 +60,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
           >
             <span
               className={cn({
-                "text-red-500": title.length === 0 || title.length > 255,
+                "text-red-500": title.length > 255,
               })}
             >
               {title.length}

web/components/pages/list/block.tsx

@@ -3,6 +3,8 @@ import { observer } from "mobx-react";
 // components
 import { ListItem } from "@/components/core/list";
 import { BlockItemAction } from "@/components/pages/list";
+// helpers
+import { getPageName } from "@/helpers/page.helper";
 // hooks
 import { usePage } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -23,9 +25,11 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
 
   return (
     <ListItem
-      title={name ?? ""}
+      title={getPageName(name)}
       itemLink={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`}
-      actionableItems={<BlockItemAction workspaceSlug={workspaceSlug} projectId={projectId} pageId={pageId} parentRef={parentRef} />}
+      actionableItems={
+        <BlockItemAction workspaceSlug={workspaceSlug} projectId={projectId} pageId={pageId} parentRef={parentRef} />
+      }
       isMobile={isMobile}
       parentRef={parentRef}
     />

web/helpers/page.helper.ts

@@ -72,3 +72,14 @@ export const shouldFilterPage = (page: TPage, filters: TPageFilterProps | undefi
 
   return fallsInFilters;
 };
+
+/**
+ * @description returns the name of the project after checking for untitled page
+ * @param {string | undefined} name
+ * @returns {string}
+ */
+export const getPageName = (name: string | undefined) => {
+  if (name === undefined) return "";
+  if (!name || name.trim() === "") return "Untitled";
+  return name;
+};

web/store/pages/project-page.store.ts

@@ -5,7 +5,7 @@ import { computedFn } from "mobx-utils";
 // types
 import { TPage, TPageFilters, TPageNavigationTabs } from "@plane/types";
 // helpers
-import { filterPagesByPageType, orderPages, shouldFilterPage } from "@/helpers/page.helper";
+import { filterPagesByPageType, getPageName, orderPages, shouldFilterPage } from "@/helpers/page.helper";
 // services
 import { PageService } from "@/services/page.service";
 // store
@@ -105,7 +105,7 @@ export class ProjectPageStore implements IProjectPageStore {
     let filteredPages = pagesByType.filter(
       (p) =>
         p.project === projectId &&
-        p.name?.toLowerCase().includes(this.filters.searchQuery.toLowerCase()) &&
+        getPageName(p.name).toLowerCase().includes(this.filters.searchQuery.toLowerCase()) &&
         shouldFilterPage(p, this.filters.filters)
     );
     filteredPages = orderPages(filteredPages, this.filters.sortKey, this.filters.sortBy);