[WEB-1516] refactor: publish project modal and types (#4716)

* refacotr: project publish

* chore: rename service names

* chore: is_deployed changed to anchor

* chore: update is_deployed key

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

apiserver/plane/app/serializers/project.py

@@ -114,7 +114,7 @@ class ProjectListSerializer(DynamicBaseSerializer):
     is_member = serializers.BooleanField(read_only=True)
     sort_order = serializers.FloatField(read_only=True)
     member_role = serializers.IntegerField(read_only=True)
-    is_deployed = serializers.BooleanField(read_only=True)
+    anchor = serializers.CharField(read_only=True)
     members = serializers.SerializerMethodField()
 
     def get_members(self, obj):
@@ -148,7 +148,7 @@ class ProjectDetailSerializer(BaseSerializer):
     is_member = serializers.BooleanField(read_only=True)
     sort_order = serializers.FloatField(read_only=True)
     member_role = serializers.IntegerField(read_only=True)
-    is_deployed = serializers.BooleanField(read_only=True)
+    anchor = serializers.CharField(read_only=True)
 
     class Meta:
         model = Project

apiserver/plane/app/views/project/base.py

@@ -137,12 +137,11 @@ class ProjectViewSet(BaseViewSet):
                 ).values("role")
             )
             .annotate(
-                is_deployed=Exists(
+                anchor=DeployBoard.objects.filter(
-                    DeployBoard.objects.filter(
+                    entity_name="project",
-                        project_id=OuterRef("pk"),
+                    entity_identifier=OuterRef("pk"),
                     workspace__slug=self.kwargs.get("slug"),
-                    )
+                ).values("anchor")
-                )
             )
             .annotate(sort_order=Subquery(sort_order))
             .prefetch_related(

packages/types/src/index.d.ts

@@ -27,3 +27,4 @@ export * from "./webhook";
 export * from "./workspace-views";
 export * from "./common";
 export * from "./pragmatic";
+export * from "./publish";

packages/types/src/project/projects.d.ts

@@ -32,7 +32,7 @@ export interface IProject {
   estimate: string | null;
   id: string;
   identifier: string;
-  is_deployed: boolean;
+  anchor: string | null;
   is_favorite: boolean;
   is_member: boolean;
   logo_props: TLogoProps;

packages/types/src/publish.d.ts

@@ -1,8 +1,25 @@
-import { IWorkspaceLite } from "@plane/types";
+import { IProject, IProjectLite, IWorkspaceLite } from "@plane/types";
-import { TProjectDetails, TViewDetails } from "@/types/project";
 
 export type TPublishEntityType = "project";
 
+export type TProjectPublishLayouts =
+  | "calendar"
+  | "gantt"
+  | "kanban"
+  | "list"
+  | "spreadsheet";
+
+export type TPublishViewProps = {
+  calendar?: boolean;
+  gantt?: boolean;
+  kanban?: boolean;
+  list?: boolean;
+  spreadsheet?: boolean;
+};
+
+export type TProjectDetails = IProjectLite &
+  Pick<IProject, "cover_image" | "logo_props" | "description">;
+
 export type TPublishSettings = {
   anchor: string | undefined;
   is_comments_enabled: boolean;
@@ -17,7 +34,7 @@ export type TPublishSettings = {
   is_reactions_enabled: boolean;
   updated_at: string | undefined;
   updated_by: string | undefined;
-  view_props: TViewDetails | undefined;
+  view_props: TViewProps | undefined;
   is_votes_enabled: boolean;
   workspace: string | undefined;
   workspace_detail: IWorkspaceLite | undefined;

space/app/[workspaceSlug]/[projectId]/page.ts

@@ -1,8 +1,8 @@
 import { notFound, redirect } from "next/navigation";
+// types
+import { TPublishSettings } from "@plane/types";
 // services
 import PublishService from "@/services/publish.service";
-// types
-import { TPublishSettings } from "@/types/publish";
 
 const publishService = new PublishService();
 
@@ -29,8 +29,8 @@ export default async function IssuesPage(props: Props) {
   }
 
   let url = "";
-  if (response.entity_name === "project") {
+  if (response?.entity_name === "project") {
-    url = `/issues/${response.anchor}`;
+    url = `/issues/${response?.anchor}`;
     const params = new URLSearchParams();
     if (board) params.append("board", board);
     if (peekId) params.append("peekId", peekId);

space/services/publish.service.ts

@@ -1,8 +1,9 @@
+// types
+import { TPublishSettings } from "@plane/types";
+// helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
-// types
-import { TPublishSettings } from "@/types/publish";
 
 class PublishService extends APIService {
   constructor() {

space/store/publish/publish.store.ts

@@ -1,11 +1,8 @@
 import { observable, makeObservable, computed } from "mobx";
 // types
-import { IWorkspaceLite } from "@plane/types";
+import { IWorkspaceLite, TProjectDetails, TPublishEntityType, TPublishSettings, TPublishViewProps } from "@plane/types";
 // store types
 import { RootStore } from "@/store/root.store";
-// types
-import { TProjectDetails, TViewDetails } from "@/types/project";
-import { TPublishEntityType, TPublishSettings } from "@/types/publish";
 
 export interface IPublishStore extends TPublishSettings {
   // computed
@@ -30,7 +27,7 @@ export class PublishStore implements IPublishStore {
   is_reactions_enabled: boolean;
   updated_at: string | undefined;
   updated_by: string | undefined;
-  view_props: TViewDetails | undefined;
+  view_props: TPublishViewProps | undefined;
   is_votes_enabled: boolean;
   workspace: string | undefined;
   workspace_detail: IWorkspaceLite | undefined;

space/store/publish/publish_list.store.ts

@@ -1,11 +1,12 @@
 import set from "lodash/set";
 import { makeObservable, observable, runInAction, action } from "mobx";
+// types
+import { TPublishSettings } from "@plane/types";
 // services
 import PublishService from "@/services/publish.service";
 // store
 import { PublishStore } from "@/store/publish/publish.store";
 // store
-import { TPublishSettings } from "@/types/publish";
 import { RootStore } from "../root.store";
 
 export interface IPublishListStore {

space/types/project.d.ts

@@ -1,18 +0,0 @@
-import { TLogoProps } from "@plane/types";
-
-export type TViewDetails = {
-  list: boolean;
-  gantt: boolean;
-  kanban: boolean;
-  calendar: boolean;
-  spreadsheet: boolean;
-};
-
-export type TProjectDetails = {
-  id: string;
-  identifier: string;
-  name: string;
-  cover_image: string | undefined;
-  logo_props: TLogoProps;
-  description: string;
-};

web/components/headers/project-issues.tsx

@@ -15,7 +15,7 @@ import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelect
 import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 import { EUserProjectRoles } from "@/constants/project";
 // helpers
-import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper";
+import { SPACE_BASE_URL } from "@/helpers/common.helper";
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import {
@@ -100,7 +100,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
     [workspaceSlug, projectId, updateFilters]
   );
 
-  const DEPLOY_URL = SPACE_BASE_URL + SPACE_BASE_PATH;
+  const publishedURL = `${SPACE_BASE_URL}/issues/${currentProjectDetails?.anchor}`;
 
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -159,9 +159,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               </Tooltip>
             ) : null}
           </div>
-          {currentProjectDetails?.is_deployed && DEPLOY_URL && (
+          {currentProjectDetails?.anchor && (
             <a
-              href={`${DEPLOY_URL}/${workspaceSlug}/${currentProjectDetails?.id}`}
+              href={publishedURL}
               className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
               target="_blank"
               rel="noopener noreferrer"

web/components/issues/issue-detail/issue-activity/root.tsx

@@ -141,7 +141,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
                 workspaceSlug={workspaceSlug}
                 issueId={issueId}
                 activityOperations={activityOperations}
-                showAccessSpecifier={project.is_deployed}
+                showAccessSpecifier={!!project.anchor}
                 disabled={disabled}
               />
               {!disabled && (
@@ -150,7 +150,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
                   projectId={projectId}
                   workspaceSlug={workspaceSlug}
                   activityOperations={activityOperations}
-                  showAccessSpecifier={project.is_deployed}
+                  showAccessSpecifier={!!project.anchor}
                 />
               )}
             </div>
@@ -161,7 +161,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
                 workspaceSlug={workspaceSlug}
                 issueId={issueId}
                 activityOperations={activityOperations}
-                showAccessSpecifier={project.is_deployed}
+                showAccessSpecifier={!!project.anchor}
                 disabled={disabled}
               />
               {!disabled && (
@@ -170,7 +170,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
                   projectId={projectId}
                   workspaceSlug={workspaceSlug}
                   activityOperations={activityOperations}
-                  showAccessSpecifier={project.is_deployed}
+                  showAccessSpecifier={!!project.anchor}
                 />
               )}
             </div>

web/components/project/publish-project/index.ts

@@ -0,0 +1 @@
+export * from "./modal";

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

@@ -1,2 +0,0 @@
-export * from "./modal";
-export * from "./popover";

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

@@ -1,22 +1,19 @@
-import { Fragment, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
+import { Check, ExternalLink, Globe2 } from "lucide-react";
+// types
+import { IProject, TProjectPublishLayouts, TPublishSettings } from "@plane/types";
 // ui
-import { Check, CircleDot, Globe2 } from "lucide-react";
+import { Button, Loader, ToggleSwitch, TOAST_TYPE, setToast, CustomSelect } from "@plane/ui";
-import { Dialog, Transition } from "@headlessui/react";
+// components
-// icons
+import { EModalWidth, ModalCore } from "@/components/core";
-import { IProject } from "@plane/types";
-// ui
-import { Button, Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper";
+import { SPACE_BASE_URL } from "@/helpers/common.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useProjectPublish } from "@/hooks/store";
-// store
-import { IProjectPublishSettings, TProjectPublishViews } from "@/store/project/project-publish.store";
-// local components
-import { CustomPopover } from "./popover";
 
 type Props = {
   isOpen: boolean;
@@ -24,28 +21,19 @@ type Props = {
   onClose: () => void;
 };
 
-type FormData = {
+const defaultValues: Partial<TPublishSettings> = {
-  anchor: string;
-  id: string | null;
-  is_comments_enabled: boolean;
-  is_reactions_enabled: boolean;
-  is_votes_enabled: boolean;
-  inbox: string | null;
-  views: TProjectPublishViews[];
-};
-
-const defaultValues: FormData = {
-  anchor: "",
-  id: null,
   is_comments_enabled: false,
   is_reactions_enabled: false,
   is_votes_enabled: false,
   inbox: null,
-  views: ["list", "kanban"],
+  view_props: {
+    list: true,
+    kanban: true,
+  },
 };
 
 const VIEW_OPTIONS: {
-  key: TProjectPublishViews;
+  key: TProjectPublishLayouts;
   label: string;
 }[] = [
   { key: "list", label: "List" },
@@ -56,7 +44,6 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
   const { isOpen, project, onClose } = props;
   // states
   const [isUnPublishing, setIsUnPublishing] = useState(false);
-  const [isUpdateRequired, setIsUpdateRequired] = useState(false);
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -74,8 +61,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
   // form info
   const {
     control,
-    formState: { isSubmitting },
+    formState: { isDirty, isSubmitting },
-    getValues,
     handleSubmit,
     reset,
     watch,
@@ -85,43 +71,8 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
 
   const handleClose = () => {
     onClose();
-
-    setIsUpdateRequired(false);
-    reset({ ...defaultValues });
   };
 
-  // prefill form with the saved settings if the project is already published
-  useEffect(() => {
-    if (!projectPublishSettings?.anchor) return;
-
-    let userBoards: TProjectPublishViews[] = [];
-
-    if (projectPublishSettings?.view_props) {
-      const savedViews = projectPublishSettings?.view_props;
-
-      if (!savedViews) return;
-
-      if (savedViews.list) userBoards.push("list");
-      if (savedViews.kanban) userBoards.push("kanban");
-      if (savedViews.calendar) userBoards.push("calendar");
-      if (savedViews.gantt) userBoards.push("gantt");
-      if (savedViews.spreadsheet) userBoards.push("spreadsheet");
-
-      userBoards = userBoards && userBoards.length > 0 ? userBoards : ["list"];
-    }
-
-    const updatedData = {
-      id: projectPublishSettings?.id || null,
-      is_comments_enabled: !!projectPublishSettings?.is_comments_enabled,
-      is_reactions_enabled: !!projectPublishSettings?.is_reactions_enabled,
-      is_votes_enabled: !!projectPublishSettings?.is_votes_enabled,
-      inbox: projectPublishSettings?.inbox || null,
-      views: userBoards,
-    };
-
-    reset({ ...updatedData });
-  }, [reset, projectPublishSettings, isOpen]);
-
   // fetch publish settings
   useEffect(() => {
     if (!workspaceSlug || !isOpen) return;
@@ -131,17 +82,15 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
     }
   }, [fetchPublishSettings, isOpen, project, projectPublishSettings, workspaceSlug]);
 
-  const handlePublishProject = async (payload: IProjectPublishSettings) => {
+  const handlePublishProject = async (payload: Partial<TPublishSettings>) => {
     if (!workspaceSlug) return;
-
+    await publishProject(workspaceSlug.toString(), project.id, payload);
-    return publishProject(workspaceSlug.toString(), project.id, payload);
   };
 
-  const handleUpdatePublishSettings = async (payload: IProjectPublishSettings) => {
+  const handleUpdatePublishSettings = async (payload: Partial<TPublishSettings>) => {
-    if (!workspaceSlug) return;
+    if (!workspaceSlug || !payload.id) return;
 
-    await updatePublishSettings(workspaceSlug.toString(), project.id, payload.id ?? "", payload)
+    await updatePublishSettings(workspaceSlug.toString(), project.id, payload.id, payload).then((res) => {
-      .then((res) => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
@@ -150,10 +99,6 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
 
       handleClose();
       return res;
-      })
-      .catch((error) => {
-        console.error("error", error);
-        return error;
     });
   };
 
@@ -173,29 +118,15 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
       .finally(() => setIsUnPublishing(false));
   };
 
-  const CopyLinkToClipboard = ({ copy_link }: { copy_link: string }) => {
+  const selectedLayouts = Object.entries(watch("view_props") ?? {})
-    const [status, setStatus] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    .filter(([key, value]) => value)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    .map(([key, value]) => key)
+    .filter((l) => VIEW_OPTIONS.find((o) => o.key === l));
 
-    const copyText = () => {
+  const handleFormSubmit = async (formData: Partial<TPublishSettings>) => {
-      navigator.clipboard.writeText(copy_link);
+    if (!selectedLayouts || selectedLayouts.length === 0) {
-      setStatus(true);
-      setTimeout(() => {
-        setStatus(false);
-      }, 1000);
-    };
-
-    return (
-      <div
-        className="flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded border border-custom-border-100 bg-custom-background-100 px-2 text-xs hover:bg-custom-background-90"
-        onClick={() => copyText()}
-      >
-        {status ? "Copied" : "Copy Link"}
-      </div>
-    );
-  };
-
-  const handleFormSubmit = async (formData: FormData) => {
-    if (!formData.views || formData.views.length === 0) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
@@ -204,97 +135,46 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
       return;
     }
 
-    const payload = {
+    const payload: Partial<TPublishSettings> = {
+      id: formData.id,
       is_comments_enabled: formData.is_comments_enabled,
       is_reactions_enabled: formData.is_reactions_enabled,
       is_votes_enabled: formData.is_votes_enabled,
-      inbox: formData.inbox,
+      view_props: formData.view_props,
-      view_props: {
-        list: formData.views.includes("list"),
-        kanban: formData.views.includes("kanban"),
-        calendar: formData.views.includes("calendar"),
-        gantt: formData.views.includes("gantt"),
-        spreadsheet: formData.views.includes("spreadsheet"),
-      },
     };
 
-    if (project.is_deployed)
+    if (formData.id && project.anchor) await handleUpdatePublishSettings(payload);
-      await handleUpdatePublishSettings({
-        anchor: watch("anchor") ?? "",
-        id: watch("id") ?? "",
-        ...payload,
-      });
     else await handlePublishProject(payload);
   };
 
-  // check if an update is required or not
+  // prefill form values for already published projects
-  const checkIfUpdateIsRequired = () => {
+  useEffect(() => {
-    if (!projectPublishSettings || !projectPublishSettings) return;
+    if (!projectPublishSettings?.anchor) return;
 
-    const currentSettings = projectPublishSettings;
+    reset({
-    const newSettings = getValues();
+      ...defaultValues,
-
+      ...projectPublishSettings,
-    if (
-      currentSettings.is_comments_enabled !== newSettings.is_comments_enabled ||
-      currentSettings.is_reactions_enabled !== newSettings.is_reactions_enabled ||
-      currentSettings.is_votes_enabled !== newSettings.is_votes_enabled
-    ) {
-      setIsUpdateRequired(true);
-      return;
-    }
-
-    let viewCheckFlag = 0;
-    VIEW_OPTIONS.forEach((option) => {
-      if (currentSettings.view_props?.[option.key] !== newSettings.views.includes(option.key)) viewCheckFlag++;
     });
+  }, [projectPublishSettings, reset]);
 
-    if (viewCheckFlag !== 0) {
+  const publishLink = `${SPACE_BASE_URL}/issues/${projectPublishSettings?.anchor}`;
-      setIsUpdateRequired(true);
-      return;
-    }
 
-    setIsUpdateRequired(false);
+  const handleCopyLink = () =>
-  };
+    copyTextToClipboard(publishLink).then(() =>
-
+      setToast({
-  const SPACE_URL = (SPACE_BASE_URL === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH;
+        type: TOAST_TYPE.SUCCESS,
+        title: "",
+        message: "Published page link copied successfully.",
+      })
+    );
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.XXL}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
-        <Transition.Child
+        <div className="flex items-center justify-between gap-2 p-5">
-          as={Fragment}
+          <h5 className="text-xl font-medium text-custom-text-200">Publish page</h5>
-          enter="ease-out duration-200"
+          {project.anchor && (
-          enterFrom="opacity-0"
+            <Button variant="danger" onClick={() => handleUnPublishProject(watch("id") ?? "")} loading={isUnPublishing}>
-          enterTo="opacity-100"
-          leave="ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-200"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-100"
-              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="w-full transform rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:w-3/5 lg:w-1/2 xl:w-2/5">
-                <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
-                  {/* heading */}
-                  <div className="flex items-center justify-between gap-2 px-6 pt-4">
-                    <h5 className="inline-block text-xl font-semibold">Publish</h5>
-                    {project.is_deployed && (
-                      <Button
-                        variant="danger"
-                        onClick={() => handleUnPublishProject(watch("id") ?? "")}
-                        loading={isUnPublishing}
-                      >
               {isUnPublishing ? "Unpublishing" : "Unpublish"}
             </Button>
           )}
@@ -302,81 +182,85 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
 
         {/* content */}
         {fetchSettingsLoader ? (
-                    <Loader className="space-y-4 px-6">
+          <Loader className="space-y-4 px-5">
             <Loader.Item height="30px" />
             <Loader.Item height="30px" />
             <Loader.Item height="30px" />
             <Loader.Item height="30px" />
           </Loader>
         ) : (
-                    <div className="px-6">
+          <div className="px-5 space-y-4">
-                      {project.is_deployed && projectPublishSettings && (
+            {project.anchor && projectPublishSettings && (
               <>
-                          <div className="relative flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 px-3 py-2">
+                <div className="bg-custom-background-80 border border-custom-border-300 rounded-md py-1.5 pl-4 pr-1 flex items-center justify-between gap-2">
-                            <div className="flex-grow truncate text-sm">{`${SPACE_URL}/issues/${projectPublishSettings.anchor}`}</div>
+                  <a
-                            <div className="relative flex flex-shrink-0 items-center gap-1">
+                    href={publishLink}
-                              <CopyLinkToClipboard copy_link={`${SPACE_URL}/issues/${projectPublishSettings.anchor}`} />
+                    className="text-sm text-custom-text-200 truncate"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {publishLink}
+                  </a>
+                  <div className="flex-shrink-0 flex items-center gap-1">
+                    <a
+                      href={publishLink}
+                      className="size-8 grid place-items-center bg-custom-background-90 hover:bg-custom-background-100 rounded"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <ExternalLink className="size-4" />
+                    </a>
+                    <button
+                      type="button"
+                      className="h-8 bg-custom-background-90 hover:bg-custom-background-100 rounded text-xs font-medium py-2 px-3"
+                      onClick={handleCopyLink}
+                    >
+                      Copy link
+                    </button>
                   </div>
                 </div>
-                          <div className="mt-3 flex items-center gap-1 text-custom-primary-100">
+                <p className="text-sm font-medium text-custom-primary-100 flex items-center gap-1 mt-3">
-                            <div className="flex h-5 w-5 items-center overflow-hidden">
+                  <span className="relative grid place-items-center size-2.5">
-                              <CircleDot className="h-5 w-5" />
+                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-custom-primary-100 opacity-75" />
-                            </div>
+                    <span className="relative inline-flex rounded-full size-1.5 bg-custom-primary-100" />
-                            <div className="text-sm">This project is live on web</div>
+                  </span>
-                          </div>
+                  This project is now live on web
+                </p>
               </>
             )}
-
+            <div className="space-y-4">
-                      <div className="mt-6 space-y-4">
               <div className="relative flex items-center justify-between gap-2">
                 <div className="text-sm">Views</div>
                 <Controller
                   control={control}
-                            name="views"
+                  name="view_props"
                   render={({ field: { onChange, value } }) => (
-                              <CustomPopover
+                    <CustomSelect
-                                label={
+                      value={value}
-                                  value.length > 0
+                      label={VIEW_OPTIONS.filter((o) => selectedLayouts.includes(o.key))
-                                    ? VIEW_OPTIONS.filter((v) => value.includes(v.key))
+                        .map((o) => o.label)
-                                        .map((v) => v.label)
+                        .join(", ")}
-                                        .join(", ")
+                      onChange={(val: TProjectPublishLayouts) => {
-                                    : ``
+                        if (selectedLayouts.length === 1 && selectedLayouts[0] === val) return;
-                                }
+                        onChange({
-                                placeholder="Select views"
+                          ...value,
-                              >
+                          [val]: !value?.[val],
-                                <>
+                        });
-                                  {VIEW_OPTIONS.map((option) => (
-                                    <div
-                                      key={option.key}
-                                      className={`relative m-1 flex cursor-pointer items-center justify-between gap-2 rounded-sm p-1 px-2 text-custom-text-200 ${
-                                        value.includes(option.key)
-                                          ? "bg-custom-background-80 text-custom-text-100"
-                                          : "hover:bg-custom-background-80 hover:text-custom-text-100"
-                                      }`}
-                                      onClick={() => {
-                                        const optionViews =
-                                          value.length > 0
-                                            ? value.includes(option.key)
-                                              ? value.filter((_o: string) => _o !== option.key)
-                                              : [...value, option.key]
-                                            : [option.key];
-
-                                        if (optionViews.length === 0) return;
-
-                                        onChange(optionViews);
-                                        checkIfUpdateIsRequired();
                       }}
+                      buttonClassName="border-none"
+                      placement="bottom-end"
                     >
-                                      <div className="text-sm">{option.label}</div>
+                      {VIEW_OPTIONS.map((option) => (
-                                      <div className={`relative flex h-4 w-4 items-center justify-center`}>
+                        <CustomSelect.Option
-                                        {value.length > 0 && value.includes(option.key) && (
+                          key={option.key}
-                                          <Check className="h-5 w-5" />
+                          value={option.key}
-                                        )}
+                          className="flex items-center justify-between gap-2"
-                                      </div>
+                        >
-                                    </div>
+                          {option.label}
+                          {selectedLayouts.includes(option.key) && <Check className="size-3.5 flex-shrink-0" />}
+                        </CustomSelect.Option>
                       ))}
-                                </>
+                    </CustomSelect>
-                              </CustomPopover>
                   )}
                 />
               </div>
@@ -386,14 +270,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                   control={control}
                   name="is_comments_enabled"
                   render={({ field: { onChange, value } }) => (
-                              <ToggleSwitch
+                    <ToggleSwitch value={!!value} onChange={onChange} size="sm" />
-                                value={value}
-                                onChange={(val) => {
-                                  onChange(val);
-                                  checkIfUpdateIsRequired();
-                                }}
-                                size="sm"
-                              />
                   )}
                 />
               </div>
@@ -403,14 +280,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                   control={control}
                   name="is_reactions_enabled"
                   render={({ field: { onChange, value } }) => (
-                              <ToggleSwitch
+                    <ToggleSwitch value={!!value} onChange={onChange} size="sm" />
-                                value={value}
-                                onChange={(val) => {
-                                  onChange(val);
-                                  checkIfUpdateIsRequired();
-                                }}
-                                size="sm"
-                              />
                   )}
                 />
               </div>
@@ -420,37 +290,18 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                   control={control}
                   name="is_votes_enabled"
                   render={({ field: { onChange, value } }) => (
-                              <ToggleSwitch
+                    <ToggleSwitch value={!!value} onChange={onChange} size="sm" />
-                                value={value}
-                                onChange={(val) => {
-                                  onChange(val);
-                                  checkIfUpdateIsRequired();
-                                }}
-                                size="sm"
-                              />
                   )}
                 />
               </div>
-
-                        {/* toggle inbox */}
-                        {/* <div className="relative flex justify-between items-center gap-2">
-                      <div className="text-sm">Allow issue proposals</div>
-                      <Controller
-                        control={control}
-                        name="inbox"
-                        render={({ field: { onChange, value } }) => (
-                          <ToggleSwitch value={value} onChange={onChange} size="sm" />
-                        )}
-                      />
-                    </div> */}
             </div>
           </div>
         )}
 
         {/* modal handlers */}
-                  <div className="relative flex items-center justify-between border-t border-custom-border-200 px-6 py-5">
+        <div className="relative flex items-center justify-between border-t border-custom-border-200 px-5 py-4 mt-4">
           <div className="flex items-center gap-1 text-sm text-custom-text-400">
-                      <Globe2 className="h-4 w-4" />
+            <Globe2 className="size-3.5" />
             <div className="text-sm">Anyone with the link can access</div>
           </div>
           {!fetchSettingsLoader && (
@@ -458,28 +309,21 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
               <Button variant="neutral-primary" size="sm" onClick={handleClose}>
                 Cancel
               </Button>
-                        {project.is_deployed ? (
+              {project.anchor ? (
-                          <>
+                isDirty && (
-                            {isUpdateRequired && (
                   <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                                {isSubmitting ? "Updating..." : "Update settings"}
+                    {isSubmitting ? "Updating" : "Update settings"}
                   </Button>
-                            )}
+                )
-                          </>
               ) : (
                 <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                            {isSubmitting ? "Publishing..." : "Publish"}
+                  {isSubmitting ? "Publishing" : "Publish"}
                 </Button>
               )}
             </div>
           )}
         </div>
       </form>
-              </Dialog.Panel>
+    </ModalCore>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
   );
 });

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

@@ -1,47 +0,0 @@
-import React, { Fragment } from "react";
-
-// headless ui
-import { ChevronDown, ChevronUp } from "lucide-react";
-import { Popover, Transition } from "@headlessui/react";
-// icons
-
-export const CustomPopover = ({
-  children,
-  label,
-  placeholder = "Select",
-}: {
-  children: React.ReactNode;
-  label?: string;
-  placeholder?: string;
-}) => (
-  <div className="relative">
-    <Popover className="relative">
-      {({ open }) => (
-        <>
-          <Popover.Button className={`${open ? "" : ""}  relative flex items-center gap-1 outline-none ring-0`}>
-            <div className="text-sm">{label ?? placeholder}</div>
-            <div className="grid h-5 w-5 place-items-center">
-              {!open ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
-            </div>
-          </Popover.Button>
-
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Popover.Panel className="absolute right-0 z-10 mt-1 min-w-[150px]">
-              <div className="mt-1 overflow-hidden overflow-y-auto rounded border border-custom-border-300 bg-custom-background-90 shadow-custom-shadow-2xs focus:outline-none">
-                {children}
-              </div>
-            </Popover.Panel>
-          </Transition>
-        </>
-      )}
-    </Popover>
-  </div>
-);

web/components/project/sidebar-list-item.tsx

@@ -396,7 +396,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                         <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-custom-sidebar-text-200 transition-all duration-300 hover:bg-custom-sidebar-background-80">
                           <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
                         </div>
-                        <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
+                        <div>{project.anchor ? "Publish settings" : "Publish"}</div>
                       </div>
                     </CustomMenu.MenuItem>
                   )}

web/services/project/project-publish.service.ts

@@ -1,15 +1,16 @@
+// types
+import { TPublishSettings } from "@plane/types";
+// helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
-// types
-import { IProjectPublishSettings } from "@/store/project/project-publish.store";
 
 export class ProjectPublishService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async getProjectSettingsAsync(workspaceSlug: string, projectID: string): Promise<IProjectPublishSettings> {
+  async fetchPublishSettings(workspaceSlug: string, projectID: string): Promise<TPublishSettings> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -17,11 +18,11 @@ export class ProjectPublishService extends APIService {
       });
   }
 
-  async createProjectSettingsAsync(
+  async publishProject(
     workspaceSlug: string,
     projectID: string,
-    data: IProjectPublishSettings
+    data: Partial<TPublishSettings>
-  ): Promise<IProjectPublishSettings> {
+  ): Promise<TPublishSettings> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -29,12 +30,12 @@ export class ProjectPublishService extends APIService {
       });
   }
 
-  async updateProjectSettingsAsync(
+  async updatePublishSettings(
     workspaceSlug: string,
     projectID: string,
     project_publish_id: string,
-    data: IProjectPublishSettings
+    data: Partial<TPublishSettings>
-  ): Promise<IProjectPublishSettings> {
+  ): Promise<TPublishSettings> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/${project_publish_id}/`,
       data
@@ -45,7 +46,7 @@ export class ProjectPublishService extends APIService {
       });
   }
 
-  async deleteProjectSettingsAsync(workspaceSlug: string, projectID: string, project_publish_id: string): Promise<any> {
+  async unpublishProject(workspaceSlug: string, projectID: string, project_publish_id: string): Promise<any> {
     return this.delete(
       `/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/${project_publish_id}/`
     )

web/store/project/project-publish.store.ts

@@ -2,48 +2,33 @@ import set from "lodash/set";
 import unset from "lodash/unset";
 import { observable, action, makeObservable, runInAction } from "mobx";
 // types
-import { ProjectPublishService } from "@/services/project";
+import { TPublishSettings } from "@plane/types";
-import { ProjectRootStore } from "./";
 // services
-
+import { ProjectPublishService } from "@/services/project";
-export type TProjectPublishViews = "list" | "gantt" | "kanban" | "calendar" | "spreadsheet";
+// store
-
+import { ProjectRootStore } from "@/store/project";
-export type TProjectPublishViewsSettings = {
-  [key in TProjectPublishViews]: boolean;
-};
-
-export interface IProjectPublishSettings {
-  anchor?: string;
-  id?: string;
-  project?: string;
-  is_comments_enabled: boolean;
-  is_reactions_enabled: boolean;
-  is_votes_enabled: boolean;
-  view_props: TProjectPublishViewsSettings;
-  inbox: string | null;
-}
 
 export interface IProjectPublishStore {
   // states
   generalLoader: boolean;
   fetchSettingsLoader: boolean;
   // observables
-  publishSettingsMap: Record<string, IProjectPublishSettings>; // projectID => IProjectPublishSettings
+  publishSettingsMap: Record<string, TPublishSettings>; // projectID => TPublishSettings
   // helpers
-  getPublishSettingsByProjectID: (projectID: string) => IProjectPublishSettings | undefined;
+  getPublishSettingsByProjectID: (projectID: string) => TPublishSettings | undefined;
   // actions
-  fetchPublishSettings: (workspaceSlug: string, projectID: string) => Promise<IProjectPublishSettings>;
+  fetchPublishSettings: (workspaceSlug: string, projectID: string) => Promise<TPublishSettings>;
   updatePublishSettings: (
     workspaceSlug: string,
     projectID: string,
     projectPublishId: string,
-    data: IProjectPublishSettings
+    data: Partial<TPublishSettings>
-  ) => Promise<IProjectPublishSettings>;
+  ) => Promise<TPublishSettings>;
   publishProject: (
     workspaceSlug: string,
     projectID: string,
-    data: IProjectPublishSettings
+    data: Partial<TPublishSettings>
-  ) => Promise<IProjectPublishSettings>;
+  ) => Promise<TPublishSettings>;
   unPublishProject: (workspaceSlug: string, projectID: string, projectPublishId: string) => Promise<void>;
 }
 
@@ -52,7 +37,7 @@ export class ProjectPublishStore implements IProjectPublishStore {
   generalLoader: boolean = false;
   fetchSettingsLoader: boolean = false;
   // observables
-  publishSettingsMap: Record<string, IProjectPublishSettings> = {};
+  publishSettingsMap: Record<string, TPublishSettings> = {};
   // root store
   projectRootStore: ProjectRootStore;
   // services
@@ -80,9 +65,9 @@ export class ProjectPublishStore implements IProjectPublishStore {
   /**
    * @description returns the publish settings of a particular project
    * @param {string} projectID
-   * @returns {IProjectPublishSettings | undefined}
+   * @returns {TPublishSettings | undefined}
    */
-  getPublishSettingsByProjectID = (projectID: string): IProjectPublishSettings | undefined =>
+  getPublishSettingsByProjectID = (projectID: string): TPublishSettings | undefined =>
     this.publishSettingsMap?.[projectID] ?? undefined;
 
   /**
@@ -96,7 +81,7 @@ export class ProjectPublishStore implements IProjectPublishStore {
       runInAction(() => {
         this.fetchSettingsLoader = true;
       });
-      const response = await this.projectPublishService.getProjectSettingsAsync(workspaceSlug, projectID);
+      const response = await this.projectPublishService.fetchPublishSettings(workspaceSlug, projectID);
 
       runInAction(() => {
         set(this.publishSettingsMap, [projectID], response);
@@ -118,15 +103,15 @@ export class ProjectPublishStore implements IProjectPublishStore {
    * @param data
    * @returns
    */
-  publishProject = async (workspaceSlug: string, projectID: string, data: IProjectPublishSettings) => {
+  publishProject = async (workspaceSlug: string, projectID: string, data: Partial<TPublishSettings>) => {
     try {
       runInAction(() => {
         this.generalLoader = true;
       });
-      const response = await this.projectPublishService.createProjectSettingsAsync(workspaceSlug, projectID, data);
+      const response = await this.projectPublishService.publishProject(workspaceSlug, projectID, data);
       runInAction(() => {
         set(this.publishSettingsMap, [projectID], response);
-        set(this.projectRootStore.project.projectMap, [projectID, "is_deployed"], true);
+        set(this.projectRootStore.project.projectMap, [projectID, "anchor"], response.anchor);
         this.generalLoader = false;
       });
       return response;
@@ -150,13 +135,13 @@ export class ProjectPublishStore implements IProjectPublishStore {
     workspaceSlug: string,
     projectID: string,
     projectPublishId: string,
-    data: IProjectPublishSettings
+    data: Partial<TPublishSettings>
   ) => {
     try {
       runInAction(() => {
         this.generalLoader = true;
       });
-      const response = await this.projectPublishService.updateProjectSettingsAsync(
+      const response = await this.projectPublishService.updatePublishSettings(
         workspaceSlug,
         projectID,
         projectPublishId,
@@ -187,14 +172,10 @@ export class ProjectPublishStore implements IProjectPublishStore {
       runInAction(() => {
         this.generalLoader = true;
       });
-      const response = await this.projectPublishService.deleteProjectSettingsAsync(
+      const response = await this.projectPublishService.unpublishProject(workspaceSlug, projectID, projectPublishId);
-        workspaceSlug,
-        projectID,
-        projectPublishId
-      );
       runInAction(() => {
         unset(this.publishSettingsMap, [projectID]);
-        set(this.projectRootStore.project.projectMap, [projectID, "is_deployed"], false);
+        set(this.projectRootStore.project.projectMap, [projectID, "anchor"], null);
         this.generalLoader = false;
       });
       return response;