fix: remove emoji edit for uneditable pages (#2093)

web/app/[workspaceSlug]/(pages)/pages/[pageId]/header.tsx

@@ -30,7 +30,7 @@ export const PageDetailsHeader = observer(() => {
   // params
   const { workspaceSlug, pageId } = useParams();
   // store hooks
-  const { anchor, isCurrentUserOwner, name, logo_props, updatePageLogo } = useWorkspacePageDetails(
+  const { anchor, isCurrentUserOwner, name, logo_props, updatePageLogo, isContentEditable } = useWorkspacePageDetails(
     pageId?.toString() ?? ""
   );
   const { fetchWorkspacePagePublishSettings, getPagePublishSettings, publishWorkspacePage, unpublishWorkspacePage } =
@@ -130,6 +130,7 @@ export const PageDetailsHeader = observer(() => {
                             ? EmojiIconPickerTypes.EMOJI
                             : EmojiIconPickerTypes.ICON
                         }
+                        disabled={!isContentEditable}
                       />
                     }
                   />

web/app/[workspaceSlug]/(projects)/teams/(detail)/[teamId]/pages/(detail)/header.tsx

@@ -1,10 +1,24 @@
 "use client";
 
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { FileText } from "lucide-react";
+// plane types
+import { TLogoProps } from "@plane/types";
 // ui
-import { Breadcrumbs, Header, Loader, TeamsIcon } from "@plane/ui";
+import {
+  Breadcrumbs,
+  EmojiIconPicker,
+  EmojiIconPickerTypes,
+  Header,
+  Loader,
+  setToast,
+  TeamsIcon,
+  TOAST_TYPE,
+} from "@plane/ui";
+// plane uitls
+import { convertHexEmojiToDecimal } from "@plane/utils";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { PageEditInformationPopover } from "@/components/pages";
@@ -14,16 +28,38 @@ import { getPageName } from "@/helpers/page.helper";
 import { useTeams, useTeamPages } from "@/plane-web/hooks/store";
 
 export const TeamPageDetailHeader: React.FC = observer(() => {
+  // states
+  const [isOpen, setIsOpen] = useState(false);
   // router
   const { workspaceSlug, teamId, pageId } = useParams();
   // store hooks
   const { loader, getTeamById } = useTeams();
-  const { getTeamPagesLoader, getPageById } = useTeamPages();
+  const { getPageById } = useTeamPages();
   // derived values
   const team = getTeamById(teamId?.toString());
-  const teamPageLoader = getTeamPagesLoader(teamId?.toString());
   const page = team && pageId ? getPageById(team.id, pageId.toString()) : null;
 
+  const handlePageLogoUpdate = async (data: TLogoProps) => {
+    if (data) {
+      page
+        ?.updatePageLogo(data)
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: "Logo Updated successfully.",
+          });
+        })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+        });
+    }
+  };
+
   if (!workspaceSlug) return;
   return (
     <Header>
@@ -70,22 +106,52 @@ export const TeamPageDetailHeader: React.FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <>
-                  {teamPageLoader === "init-loader" && !page ? (
-                    <Loader.Item height="20px" width="140px" />
-                  ) : page ? (
-                    <BreadcrumbLink
-                      label={getPageName(page.name)}
-                      icon={
-                        page.logo_props?.in_use ? (
-                          <Logo logo={page.logo_props} />
-                        ) : (
-                          <FileText className="h-4 w-4 text-custom-text-200" />
-                        )
+                <BreadcrumbLink
+                  label={getPageName(page?.name)}
+                  icon={
+                    <EmojiIconPicker
+                      isOpen={isOpen}
+                      handleToggle={(val: boolean) => setIsOpen(val)}
+                      className="flex items-center justify-center"
+                      buttonClassName="flex items-center justify-center"
+                      label={
+                        <>
+                          {page?.logo_props?.in_use ? (
+                            <Logo logo={page.logo_props} size={16} type="lucide" />
+                          ) : (
+                            <FileText className="size-4 text-custom-text-300" />
+                          )}
+                        </>
                       }
+                      onChange={(val) => {
+                        let logoValue = {};
+
+                        if (val?.type === "emoji")
+                          logoValue = {
+                            value: convertHexEmojiToDecimal(val.value.unified),
+                            url: val.value.imageUrl,
+                          };
+                        else if (val?.type === "icon") logoValue = val.value;
+
+                        handlePageLogoUpdate({
+                          in_use: val?.type,
+                          [val?.type]: logoValue,
+                        }).finally(() => setIsOpen(false));
+                      }}
+                      defaultIconColor={
+                        page?.logo_props?.in_use && page.logo_props.in_use === "icon"
+                          ? page.logo_props?.icon?.color
+                          : undefined
+                      }
+                      defaultOpen={
+                        page?.logo_props?.in_use && page.logo_props?.in_use === "emoji"
+                          ? EmojiIconPickerTypes.EMOJI
+                          : EmojiIconPickerTypes.ICON
+                      }
+                      disabled={!page?.isContentEditable}
                     />
-                  ) : null}
-                </>
+                  }
+                />
               }
             />
           </Breadcrumbs>