From 849d9891d26676841bba125d0985d3be8b019d26 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Tue, 3 Dec 2024 13:28:28 +0530
Subject: [PATCH] chore: community edition product updates link (#6132)

* chore: community edition product updates link

* fix: iframe embed for changelog

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
---
 packages/types/src/instance/base.d.ts         |  1 +
 web/core/components/common/logo.tsx           | 12 ++--
 .../global/product-updates/modal.tsx          | 55 +++----------------
 .../workspace/sidebar/help-section.tsx        | 16 +++---
 4 files changed, 23 insertions(+), 61 deletions(-)

diff --git a/packages/types/src/instance/base.d.ts b/packages/types/src/instance/base.d.ts
index 41198b27c..33d0734ad 100644
--- a/packages/types/src/instance/base.d.ts
+++ b/packages/types/src/instance/base.d.ts
@@ -57,6 +57,7 @@ export interface IInstanceConfig {
   // intercom
   is_intercom_enabled: boolean;
   intercom_app_id: string | undefined;
+  instance_changelog_url?: string;
 }
 
 export interface IInstanceAdmin {
diff --git a/web/core/components/common/logo.tsx b/web/core/components/common/logo.tsx
index 02b26a10b..0638b8410 100644
--- a/web/core/components/common/logo.tsx
+++ b/web/core/components/common/logo.tsx
@@ -1,14 +1,14 @@
 "use client";
 
 import { FC } from "react";
-// emoji-picker-react
 import { Emoji } from "emoji-picker-react";
-import { TLogoProps } from "@plane/types";
-// helpers
-import { LUCIDE_ICONS_LIST } from "@plane/ui";
-import { emojiCodeToUnicode } from "@/helpers/emoji.helper";
-// import { icons } from "lucide-react";
 import useFontFaceObserver from "use-font-face-observer";
+// types
+import { TLogoProps } from "@plane/types";
+// ui
+import { LUCIDE_ICONS_LIST } from "@plane/ui";
+// helpers
+import { emojiCodeToUnicode } from "@/helpers/emoji.helper";
 
 type Props = {
   logo: TLogoProps;
diff --git a/web/core/components/global/product-updates/modal.tsx b/web/core/components/global/product-updates/modal.tsx
index 6bdacc947..4288d68ee 100644
--- a/web/core/components/global/product-updates/modal.tsx
+++ b/web/core/components/global/product-updates/modal.tsx
@@ -1,19 +1,13 @@
-import { FC, useRef } from "react";
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
-// editor
-import { DocumentReadOnlyEditorWithRef, EditorRefApi } from "@plane/editor";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
-// helpers
-import { LogoSpinner } from "@/components/common";
+// components
 import { ProductUpdatesFooter } from "@/components/global";
+// hooks
+import { useInstance } from "@/hooks/store";
 // plane web components
 import { ProductUpdatesHeader } from "@/plane-web/components/global";
-// services
-import { InstanceService } from "@/services/instance.service";
-
-const instanceService = new InstanceService();
 
 export type ProductUpdatesModalProps = {
   isOpen: boolean;
@@ -22,20 +16,16 @@ export type ProductUpdatesModalProps = {
 
 export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props) => {
   const { isOpen, handleClose } = props;
-  // refs
-  const editorRef = useRef<EditorRefApi>(null);
-  // swr
-  const { data, isLoading, error } = useSWR(`INSTANCE_CHANGELOG`, () => instanceService.getInstanceChangeLog(), {
-    shouldRetryOnError: false,
-    revalidateIfStale: false,
-    revalidateOnFocus: false,
-  });
+
+  const { config } = useInstance();
 
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
       <ProductUpdatesHeader />
       <div className="flex flex-col h-[60vh] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5">
-        {!isLoading && !!error ? (
+        {config?.instance_changelog_url && config?.instance_changelog_url !== "" ? (
+          <iframe src={config?.instance_changelog_url} className="w-full h-full" />
+        ) : (
           <div className="flex flex-col items-center justify-center w-full h-full mb-8">
             <div className="text-lg font-medium">We are having trouble fetching the updates.</div>
             <div className="text-sm text-custom-text-200">
@@ -50,33 +40,6 @@ export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props
               for the latest updates.
             </div>
           </div>
-        ) : isLoading ? (
-          <div className="flex items-center justify-center w-full h-full">
-            <LogoSpinner />
-          </div>
-        ) : (
-          <div className="ml-5">
-            {data?.id && (
-              <DocumentReadOnlyEditorWithRef
-                ref={editorRef}
-                disabledExtensions={[]}
-                id={data.id}
-                initialValue={data.description_html ?? "<p></p>"}
-                containerClassName="p-0 border-none"
-                mentionHandler={{
-                  highlights: () => Promise.resolve([]),
-                }}
-                embedHandler={{
-                  issue: {
-                    widgetCallback: () => <></>,
-                  },
-                }}
-                fileHandler={{
-                  getAssetSrc: () => Promise.resolve(""),
-                }}
-              />
-            )}
-          </div>
         )}
       </div>
       <ProductUpdatesFooter />
diff --git a/web/core/components/workspace/sidebar/help-section.tsx b/web/core/components/workspace/sidebar/help-section.tsx
index e15c4fb75..7f67e4083 100644
--- a/web/core/components/workspace/sidebar/help-section.tsx
+++ b/web/core/components/workspace/sidebar/help-section.tsx
@@ -32,7 +32,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
   const { canUseLocalDB, toggleLocalDB } = useUserSettings();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-  const [isChangeLogOpen, setIsChangeLogOpen] = useState(false);
+  const [isProductUpdatesModalOpen, setProductUpdatesModalOpen] = useState(false);
 
   const handleCrispWindowShow = () => {
     toggleIntercom(!isIntercomToggle);
@@ -42,7 +42,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
 
   return (
     <>
-      <ProductUpdatesModal isOpen={isChangeLogOpen} handleClose={() => setIsChangeLogOpen(false)} />
+      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
       <div
         className={cn(
           "flex w-full items-center justify-between px-2 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12 flex-shrink-0",
@@ -56,8 +56,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
         >
           <CustomMenu
             customButton={
-              <button
-                type="button"
+              <div
                 className={cn(
                   "grid place-items-center rounded-md p-1 outline-none text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90",
                   {
@@ -68,7 +67,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 <Tooltip tooltipContent="Help" isMobile={isMobile} disabled={isNeedHelpOpen}>
                   <HelpCircle className="h-[18px] w-[18px] outline-none" />
                 </Tooltip>
-              </button>
+              </div>
             }
             customButtonClassName={`relative grid place-items-center rounded-md p-1.5 outline-none ${isCollapsed ? "w-full" : ""}`}
             menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
@@ -135,14 +134,13 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
               </button>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem>
-              <a
-                target="_blank"
+              <button
                 type="button"
-                href="https://plane.so/changelog/community"
+                onClick={() => setProductUpdatesModalOpen(true)}
                 className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
               >
                 <span className="text-xs">What&apos;s new</span>
-              </a>
+              </button>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem>
               <a