refactor: publish project modal

web/components/headers/project-issues.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useState, FC } from "react";
+import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Plus } from "lucide-react";
-// hooks
+import { ArrowLeft, Circle, ExternalLink, Plus } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
@@ -17,7 +17,7 @@ import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 // helper
 import { truncateText } from "helpers/string.helper";
 
-export const ProjectIssuesHeader: FC = observer(() => {
+export const ProjectIssuesHeader: React.FC = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
 
   const router = useRouter();
@@ -93,6 +93,8 @@ export const ProjectIssuesHeader: FC = observer(() => {
 
   const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
 
+  const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
+
   return (
     <>
       <ProjectAnalyticsModal
@@ -125,6 +127,18 @@ export const ProjectIssuesHeader: FC = observer(() => {
               <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`} />
             </Breadcrumbs>
           </div>
+          {projectDetails?.is_deployed && deployUrl && (
+            <a
+              href={`${deployUrl}/${workspaceSlug}/${projectDetails?.id}`}
+              className="group bg-custom-primary-100/20 text-custom-primary-100 px-2.5 py-1 text-xs flex items-center gap-1.5 rounded font-medium"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+              Public
+              <ExternalLink className="h-3 w-3 hidden group-hover:block" strokeWidth={2} />
+            </a>
+          )}
         </div>
         <div className="flex items-center gap-2">
           <LayoutSelection

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -40,14 +40,15 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
         <CalendarHeader />
         <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
         <div className="h-full w-full overflow-y-auto">
-          {layout === "month" ? (
+          {layout === "month" && (
             <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
                   <CalendarWeekDays key={weekIndex} week={week} issues={issues} quickActions={quickActions} />
                 ))}
             </div>
-          ) : (
+          )}
+          {layout === "week" && (
             <CalendarWeekDays week={calendarStore.allDaysOfActiveWeek} issues={issues} quickActions={quickActions} />
           )}
         </div>

web/components/project/index.ts

@@ -15,3 +15,4 @@ export * from "./join-project-modal";
 export * from "./form";
 export * from "./form-loader";
 export * from "./delete-project-section";
+export * from "./publish-project";

web/components/project/publish-project/modal.tsx

@@ -1,27 +1,24 @@
 import React, { useEffect, useState } from "react";
-// next imports
 import { useRouter } from "next/router";
-// react-hook-form
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui components
 import { Button, Loader, ToggleSwitch } from "@plane/ui";
 import { Check, CircleDot, Globe2 } from "lucide-react";
 import { CustomPopover } from "./popover";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 import { IProjectPublishSettings, TProjectPublishViews } from "store/project";
 // hooks
 import useToast from "hooks/use-toast";
-import useProjectDetails from "hooks/use-project-details";
-import useUser from "hooks/use-user";
+// types
+import { IProject } from "types";
 
 type Props = {
-  // user: IUser | undefined;
+  isOpen: boolean;
+  project: IProject;
+  onClose: () => void;
 };
 
 type FormData = {
@@ -53,50 +50,52 @@ const viewOptions: {
   // { key: "spreadsheet", label: "Spreadsheet" },
 ];
 
-export const PublishProjectModal: React.FC<Props> = observer(() => {
+export const PublishProjectModal: React.FC<Props> = observer((props) => {
+  const { isOpen, project, onClose } = props;
+
   const [isUnpublishing, setIsUnpublishing] = useState(false);
   const [isUpdateRequired, setIsUpdateRequired] = useState(false);
 
   let plane_deploy_url = process.env.NEXT_PUBLIC_DEPLOY_URL;
 
-  if (typeof window !== "undefined" && !plane_deploy_url) {
+  if (typeof window !== "undefined" && !plane_deploy_url)
     plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
-  }
-  // router
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
-  // store
-  const store: RootStore = useMobxStore();
-  const { projectPublish } = store;
-  // hooks
-  const { user } = useUser();
-  const { mutateProjectDetails } = useProjectDetails();
+
+  const { projectPublish: projectPublishStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
-  // form info
+
   const {
     control,
     formState: { isSubmitting },
     getValues,
     handleSubmit,
     reset,
     watch,
-  } = useForm<FormData>({
+  } = useForm({
     defaultValues,
   });
 
   const handleClose = () => {
-    projectPublish.handleProjectModal(null);
+    onClose();
+
     setIsUpdateRequired(false);
     reset({ ...defaultValues });
   };
 
   // prefill form with the saved settings if the project is already published
   useEffect(() => {
-    if (projectPublish.projectPublishSettings && projectPublish.projectPublishSettings !== "not-initialized") {
+    if (
+      projectPublishStore.projectPublishSettings &&
+      projectPublishStore.projectPublishSettings !== "not-initialized"
+    ) {
       let userBoards: TProjectPublishViews[] = [];
 
-      if (projectPublish.projectPublishSettings?.views) {
-        const savedViews = projectPublish.projectPublishSettings?.views;
+      if (projectPublishStore.projectPublishSettings?.views) {
+        const savedViews = projectPublishStore.projectPublishSettings?.views;
 
         if (!savedViews) return;
 
@@ -110,61 +109,46 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
       }
 
       const updatedData = {
-        id: projectPublish.projectPublishSettings?.id || null,
-        comments: projectPublish.projectPublishSettings?.comments || false,
-        reactions: projectPublish.projectPublishSettings?.reactions || false,
-        votes: projectPublish.projectPublishSettings?.votes || false,
-        inbox: projectPublish.projectPublishSettings?.inbox || null,
+        id: projectPublishStore.projectPublishSettings?.id || null,
+        comments: projectPublishStore.projectPublishSettings?.comments || false,
+        reactions: projectPublishStore.projectPublishSettings?.reactions || false,
+        votes: projectPublishStore.projectPublishSettings?.votes || false,
+        inbox: projectPublishStore.projectPublishSettings?.inbox || null,
         views: userBoards,
       };
 
       reset({ ...updatedData });
     }
-  }, [reset, projectPublish.projectPublishSettings]);
+  }, [reset, projectPublishStore.projectPublishSettings]);
 
   // fetch publish settings
   useEffect(() => {
-    if (!workspaceSlug) return;
+    if (!workspaceSlug || !isOpen) return;
 
-    if (
-      projectPublish.projectPublishModal &&
-      projectPublish.project_id !== null &&
-      projectPublish?.projectPublishSettings === "not-initialized"
-    ) {
-      projectPublish.getProjectSettingsAsync(workspaceSlug.toString(), projectPublish.project_id, null);
+    if (projectPublishStore.projectPublishSettings === "not-initialized") {
+      projectPublishStore.getProjectSettingsAsync(workspaceSlug.toString(), project.id);
     }
-  }, [workspaceSlug, projectPublish, projectPublish.projectPublishModal]);
+  }, [isOpen, workspaceSlug, project, projectPublishStore]);
 
   const handlePublishProject = async (payload: IProjectPublishSettings) => {
-    if (!workspaceSlug || !user) return;
-
-    const projectId = projectPublish.project_id;
+    if (!workspaceSlug) return;
 
-    return projectPublish
-      .publishProject(workspaceSlug.toString(), projectId?.toString() ?? "", payload, user)
+    return projectPublishStore
+      .publishProject(workspaceSlug.toString(), project.id, payload)
       .then((res) => {
-        mutateProjectDetails();
         handleClose();
-        if (projectId) window.open(`${plane_deploy_url}/${workspaceSlug}/${projectId}`, "_blank");
+        // window.open(`${plane_deploy_url}/${workspaceSlug}/${project.id}`, "_blank");
         return res;
       })
       .catch((err) => err);
   };
 
   const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
-    if (!workspaceSlug || !user) return;
-
-    await projectPublish
-      .updateProjectSettingsAsync(
-        workspaceSlug.toString(),
-        projectPublish.project_id?.toString() ?? "",
-        payload.id ?? "",
-        payload,
-        user
-      )
-      .then((res) => {
-        mutateProjectDetails();
+    if (!workspaceSlug) return;
 
+    await projectPublishStore
+      .updateProjectSettingsAsync(workspaceSlug.toString(), project.id, payload.id ?? "", payload)
+      .then((res) => {
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -185,15 +169,19 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
     setIsUnpublishing(true);
 
-    projectPublish
-      .unPublishProject(workspaceSlug.toString(), projectPublish.project_id as string, publishId, null)
+    await projectPublishStore
+      .unPublishProject(workspaceSlug.toString(), project.id, publishId)
       .then((res) => {
-        mutateProjectDetails();
-
         handleClose();
         return res;
       })
-      .catch((err) => err)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong while unpublishing the project.",
+        })
+      )
       .finally(() => setIsUnpublishing(false));
   };
 
@@ -242,15 +230,16 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
       },
     };
 
-    if (watch("id")) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
+    if (project.is_deployed) await handleUpdatePublishSettings({ id: watch("id") ?? "", ...payload });
     else await handlePublishProject(payload);
   };
 
   // check if an update is required or not
   const checkIfUpdateIsRequired = () => {
-    if (!projectPublish.projectPublishSettings || projectPublish.projectPublishSettings === "not-initialized") return;
+    if (!projectPublishStore.projectPublishSettings || projectPublishStore.projectPublishSettings === "not-initialized")
+      return;
 
-    const currentSettings = projectPublish.projectPublishSettings as IProjectPublishSettings;
+    const currentSettings = projectPublishStore.projectPublishSettings as IProjectPublishSettings;
     const newSettings = getValues();
 
     if (
@@ -276,7 +265,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
   };
 
   return (
-    <Transition.Root show={projectPublish.projectPublishModal} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
@@ -301,12 +290,12 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5 ">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
                 <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
                   {/* heading */}
                   <div className="px-6 pt-4 flex items-center justify-between gap-2">
                     <h5 className="font-semibold text-xl inline-block">Publish</h5>
-                    {projectPublish.projectPublishSettings !== "not-initialized" && (
+                    {project.is_deployed && (
                       <Button
                         variant="danger"
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
@@ -318,7 +307,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   </div>
 
                   {/* content */}
-                  {projectPublish.fetchSettingsLoader ? (
+                  {projectPublishStore.fetchSettingsLoader ? (
                     <Loader className="px-6 space-y-4">
                       <Loader.Item height="30px" />
                       <Loader.Item height="30px" />
@@ -327,16 +316,14 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                     </Loader>
                   ) : (
                     <div className="px-6">
-                      {watch("id") && (
+                      {project.is_deployed && (
                         <>
                           <div className="border border-custom-border-100 bg-custom-background-80 rounded-md px-3 py-2 relative flex gap-2 items-center">
                             <div className="truncate flex-grow text-sm">
-                              {`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
+                              {`${plane_deploy_url}/${workspaceSlug}/${project.id}`}
                             </div>
                             <div className="flex-shrink-0 relative flex items-center gap-1">
-                              <CopyLinkToClipboard
-                                copy_link={`${plane_deploy_url}/${workspaceSlug}/${projectPublish.project_id}`}
-                              />
+                              <CopyLinkToClipboard copy_link={`${plane_deploy_url}/${workspaceSlug}/${project.id}`} />
                             </div>
                           </div>
                           <div className="flex items-center gap-1 text-custom-primary-100 mt-3">
@@ -454,6 +441,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                           />
                         </div>
 
+                        {/* toggle inbox */}
                         {/* <div className="relative flex justify-between items-center gap-2">
                       <div className="text-sm">Allow issue proposals</div>
                       <Controller
@@ -474,12 +462,12 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                       <Globe2 className="h-4 w-4" />
                       <div className="text-sm">Anyone with the link can access</div>
                     </div>
-                    {!projectPublish.fetchSettingsLoader && (
+                    {!projectPublishStore.fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
                         <Button variant="neutral-primary" onClick={handleClose}>
                           Cancel
                         </Button>
-                        {watch("id") ? (
+                        {project.is_deployed ? (
                           <>
                             {isUpdateRequired && (
                               <Button variant="primary" type="submit" loading={isSubmitting}>