chore: modified functionality and placement for live button (#6400)

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -15,11 +15,11 @@ import { Breadcrumbs, Button, CustomMenu, Tooltip, Header } from "@plane/ui";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
+import { ViewQuickActions } from "@/components/views";
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 import { EViewAccess } from "@/constants/views";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
-import { getPublishViewLink } from "@/helpers/project-views.helpers";
 import { truncateText } from "@/helpers/string.helper";
 // hooks
 import {
@@ -38,6 +38,8 @@ import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const ProjectViewIssuesHeader: React.FC = observer(() => {
+  // refs
+  const parentRef = useRef(null);
   // router
   const { workspaceSlug, projectId, viewId } = useParams();
   // store hooks
@@ -133,7 +135,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.PROJECT
   );
-  const publishLink = getPublishViewLink(viewDetails?.anchor);
+
+  if (!viewDetails) return;
 
   return (
     <Header>
@@ -203,19 +206,14 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           <></>
         )}
 
-        {viewDetails?.anchor && publishLink ? (
+        <div className="hidden md:block">
-          <a
+          <ViewQuickActions
-            href={publishLink}
+            parentRef={parentRef}
-            className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5"
+            projectId={projectId.toString()}
-            target="_blank"
+            view={viewDetails}
-            rel="noopener noreferrer"
+            workspaceSlug={workspaceSlug.toString()}
-          >
+          />
-            <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
+        </div>
-            Live
-          </a>
-        ) : (
-          <></>
-        )}
       </Header.LeftItem>
       <Header.RightItem>
         {!viewDetails?.is_locked ? (

web/core/components/views/delete-view-modal.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 // types
 import { IProjectView } from "@plane/types";
 // ui
@@ -22,6 +22,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   // router
   const { workspaceSlug, projectId } = useParams();
+  const router = useRouter();
   // store hooks
   const { deleteView } = useProjectView();
 
@@ -38,7 +39,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
     await deleteView(workspaceSlug.toString(), projectId.toString(), data.id)
       .then(() => {
         handleClose();
-
+        router.push(`/${workspaceSlug}/projects/${projectId}/views`);
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",

web/core/components/views/view-list-item-action.tsx

@@ -12,8 +12,10 @@ import { DeleteProjectViewModal, CreateUpdateProjectViewModal, ViewQuickActions
 import { EViewAccess } from "@/constants/views";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { getPublishViewLink } from "@/helpers/project-views.helpers";
 // hooks
 import { useMember, useProjectView, useUserPermissions } from "@/hooks/store";
+import { PublishViewModal } from "@/plane-web/components/views/publish";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { ButtonAvatars } from "../dropdowns/member/avatar";
 
@@ -27,6 +29,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
   // states
   const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
   const [deleteViewModal, setDeleteViewModal] = useState(false);
+  const [isPublishModalOpen, setPublishModalOpen] = useState<boolean>(false);
   // router
   const { workspaceSlug, projectId } = useParams();
   // store
@@ -45,6 +48,8 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
 
   const access = view.access;
 
+  const publishLink = getPublishViewLink(view?.anchor);
+
   // handlers
   const handleAddToFavorites = () => {
     if (!workspaceSlug || !projectId) return;
@@ -62,6 +67,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
 
   return (
     <>
+      <PublishViewModal isOpen={isPublishModalOpen} onClose={() => setPublishModalOpen(false)} view={view} />
       {workspaceSlug && projectId && view && (
         <CreateUpdateProjectViewModal
           isOpen={createUpdateViewModal}
@@ -82,6 +88,18 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
         </Tooltip>
       </div>
 
+      {view?.anchor && publishLink ? (
+        <div
+          className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5 cursor-pointer"
+          onClick={() => setPublishModalOpen(true)}
+        >
+          <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
+          Live
+        </div>
+      ) : (
+        <></>
+      )}
+
       {/* created by */}
       {<ButtonAvatars showTooltip={false} userIds={ownedByDetails?.id ?? []} />}