[WEB-4852]chore: views refactor

apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx

@@ -191,7 +191,7 @@ export const GlobalIssuesHeader = observer(() => {
           </Breadcrumbs>
         </Header.LeftItem>
 
-        <Header.RightItem>
+        <Header.RightItem className="items-center">
           {!isLocked ? (
             <>
               <GlobalViewLayoutSelection

apps/web/ce/components/views/helper.tsx

@@ -1,4 +1,7 @@
-import { EIssueLayoutTypes } from "@plane/types";
+import { ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { EIssueLayoutTypes, IProjectView } from "@plane/types";
+import { TContextMenuItem } from "@plane/ui";
 import { TWorkspaceLayoutProps } from "@/components/views/helper";
 
 export type TLayoutSelectionProps = {
@@ -10,3 +13,68 @@ export type TLayoutSelectionProps = {
 export const GlobalViewLayoutSelection = (props: TLayoutSelectionProps) => <></>;
 
 export const WorkspaceAdditionalLayouts = (props: TWorkspaceLayoutProps) => <></>;
+
+export type TMenuItemsFactoryProps = {
+  isOwner: boolean;
+  isAdmin: boolean;
+  setDeleteViewModal: (open: boolean) => void;
+  setCreateUpdateViewModal: (open: boolean) => void;
+  handleOpenInNewTab: () => void;
+  handleCopyText: () => void;
+  isLocked: boolean;
+  workspaceSlug: string;
+  projectId?: string;
+  viewId: string;
+};
+
+export const useMenuItemsFactory = (props: TMenuItemsFactoryProps) => {
+  const { isOwner, isAdmin, setDeleteViewModal, setCreateUpdateViewModal, handleOpenInNewTab, handleCopyText } = props;
+
+  const { t } = useTranslation();
+
+  const editMenuItem = () => ({
+    key: "edit",
+    action: () => setCreateUpdateViewModal(true),
+    title: t("edit"),
+    icon: Pencil,
+    shouldRender: isOwner,
+  });
+
+  const openInNewTabMenuItem = () => ({
+    key: "open-new-tab",
+    action: handleOpenInNewTab,
+    title: t("open_in_new_tab"),
+    icon: ExternalLink,
+  });
+
+  const copyLinkMenuItem = () => ({
+    key: "copy-link",
+    action: handleCopyText,
+    title: t("copy_link"),
+    icon: Link,
+  });
+
+  const deleteMenuItem = () => ({
+    key: "delete",
+    action: () => setDeleteViewModal(true),
+    title: t("delete"),
+    icon: Trash2,
+    shouldRender: isOwner || isAdmin,
+  });
+
+  return {
+    editMenuItem,
+    openInNewTabMenuItem,
+    copyLinkMenuItem,
+    deleteMenuItem,
+  };
+};
+
+export const useViewMenuItems = (props: TMenuItemsFactoryProps): TContextMenuItem[] => {
+  const factory = useMenuItemsFactory(props);
+
+  return [factory.editMenuItem(), factory.openInNewTabMenuItem(), factory.copyLinkMenuItem(), factory.deleteMenuItem()];
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const AdditionalHeaderItems = (view: IProjectView) => <></>;

apps/web/ce/services/index.ts

@@ -1,2 +1,2 @@
 export * from "./project";
-export * from "./workspace.service";
+export * from "@/services/workspace.service";

apps/web/ce/services/project/index.ts

@@ -1,2 +1,2 @@
 export * from "./estimate.service";
-export * from "./view.service";
+export * from "@/services/view.service";

apps/web/ce/store/global-view.store.ts

@@ -0,0 +1 @@
+export * from "@/store/global-view.store";

apps/web/ce/store/project-view.store.ts

@@ -0,0 +1 @@
+export * from "@/store/project-view.store";

apps/web/core/components/views/quick-actions.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
 // types
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { IProjectView } from "@plane/types";
@@ -13,6 +12,7 @@ import { copyUrlToClipboard, cn } from "@plane/utils";
 import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useViewMenuItems } from "@/plane-web/components/views/helper";
 import { PublishViewModal, useViewPublish } from "@/plane-web/components/views/publish";
 // local imports
 import { DeleteProjectViewModal } from "./delete-view-modal";
@@ -54,34 +54,18 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
     });
   const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
 
-  const MENU_ITEMS: TContextMenuItem[] = [
-    {
-      key: "edit",
-      action: () => setCreateUpdateViewModal(true),
-      title: "Edit",
-      icon: Pencil,
-      shouldRender: isOwner,
-    },
-    {
-      key: "open-new-tab",
-      action: handleOpenInNewTab,
-      title: "Open in new tab",
-      icon: ExternalLink,
-    },
-    {
-      key: "copy-link",
-      action: handleCopyText,
-      title: "Copy link",
-      icon: Link,
-    },
-    {
-      key: "delete",
-      action: () => setDeleteViewModal(true),
-      title: "Delete",
-      icon: Trash2,
-      shouldRender: isOwner || isAdmin,
-    },
-  ];
+  const MENU_ITEMS: TContextMenuItem[] = useViewMenuItems({
+    isOwner,
+    isAdmin,
+    setDeleteViewModal,
+    setCreateUpdateViewModal,
+    handleOpenInNewTab,
+    handleCopyText,
+    isLocked: view.is_locked,
+    workspaceSlug,
+    projectId,
+    viewId: view.id,
+  });
 
   if (publishContextMenu) MENU_ITEMS.splice(2, 0, publishContextMenu);
 

apps/web/core/components/views/update-view-component.tsx

@@ -1,6 +1,5 @@
 import { SetStateAction, useEffect, useState } from "react";
 import { Button } from "@plane/ui";
-import { LockedComponent } from "../icons/locked-component";
 
 type Props = {
   isLocked: boolean;
@@ -14,16 +13,8 @@ type Props = {
 };
 
 export const UpdateViewComponent = (props: Props) => {
-  const {
-    isLocked,
-    areFiltersEqual,
-    isOwner,
-    isAuthorizedUser,
-    setIsModalOpen,
-    handleUpdateView,
-    lockedTooltipContent,
-    trackerElement,
-  } = props;
+  const { isLocked, areFiltersEqual, isOwner, isAuthorizedUser, setIsModalOpen, handleUpdateView, trackerElement } =
+    props;
 
   const [isUpdating, setIsUpdating] = useState(false);
 
@@ -54,24 +45,19 @@ export const UpdateViewComponent = (props: Props) => {
 
   return (
     <div className="flex gap-2 h-fit">
-      {isLocked ? (
-        <LockedComponent toolTipContent={lockedTooltipContent} />
-      ) : (
-        !areFiltersEqual &&
-        isAuthorizedUser && (
-          <>
-            <Button
-              variant="outline-primary"
-              size="md"
-              className="flex-shrink-0"
-              data-ph-element={trackerElement}
-              onClick={() => setIsModalOpen(true)}
-            >
-              Save as
-            </Button>
-            {isOwner && <>{updateButton}</>}
-          </>
-        )
+      {!isLocked && !areFiltersEqual && isAuthorizedUser && (
+        <>
+          <Button
+            variant="outline-primary"
+            size="md"
+            className="flex-shrink-0"
+            data-ph-element={trackerElement}
+            onClick={() => setIsModalOpen(true)}
+          >
+            Save as
+          </Button>
+          {isOwner && <>{updateButton}</>}
+        </>
       )}
     </div>
   );

apps/web/core/components/workspace/views/quick-action.tsx

@@ -2,10 +2,8 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, GLOBAL_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
 import { IWorkspaceView } from "@plane/types";
 import { CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 import { copyUrlToClipboard, cn } from "@plane/utils";
@@ -14,6 +12,7 @@ import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useUser, useUserPermissions } from "@/hooks/store/user";
 // local imports
+import { useViewMenuItems } from "@/plane-web/components/views/helper";
 import { DeleteGlobalViewModal } from "./delete-view-modal";
 import { CreateUpdateWorkspaceViewModal } from "./modal";
 
@@ -30,7 +29,6 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
   // store hooks
   const { data } = useUser();
   const { allowPermissions } = useUserPermissions();
-  const { t } = useTranslation();
   // auth
   const isOwner = view?.owned_by === data?.id;
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
@@ -46,34 +44,17 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
     });
   const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
 
-  const MENU_ITEMS: TContextMenuItem[] = [
-    {
-      key: "edit",
-      action: () => setUpdateViewModal(true),
-      title: t("edit"),
-      icon: Pencil,
-      shouldRender: isOwner,
-    },
-    {
-      key: "open-new-tab",
-      action: handleOpenInNewTab,
-      title: t("open_in_new_tab"),
-      icon: ExternalLink,
-    },
-    {
-      key: "copy-link",
-      action: handleCopyText,
-      title: t("copy_link"),
-      icon: LinkIcon,
-    },
-    {
-      key: "delete",
-      action: () => setDeleteViewModal(true),
-      title: t("delete"),
-      icon: Trash2,
-      shouldRender: isOwner || isAdmin,
-    },
-  ];
+  const MENU_ITEMS: TContextMenuItem[] = useViewMenuItems({
+    isOwner,
+    isAdmin,
+    setDeleteViewModal,
+    setCreateUpdateViewModal: setUpdateViewModal,
+    handleOpenInNewTab,
+    handleCopyText,
+    isLocked: view.is_locked,
+    workspaceSlug,
+    viewId: view.id,
+  });
 
   return (
     <>

apps/web/core/hooks/store/use-global-view.ts

@@ -2,7 +2,7 @@ import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
 // types
-import type { IGlobalViewStore } from "@/store/global-view.store";
+import type { IGlobalViewStore } from "@/plane-web/store/global-view.store";
 
 export const useGlobalView = (): IGlobalViewStore => {
   const context = useContext(StoreContext);