@elementor/editor-site-navigation 0.19.11 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.20.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.19.11...@elementor/editor-site-navigation@0.20.0) (2024-01-07)
+
+
+### Features
+
+* **editor-site-navigation:** add permission based UI disabling [ED-13216] ([#152](https://github.com/elementor/elementor-packages/issues/152)) ([45f3e99](https://github.com/elementor/elementor-packages/commit/45f3e9955149045487ce21db9006c703e7777006))
+
+
+
+
+
 ## [0.19.11](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.19.10...@elementor/editor-site-navigation@0.19.11) (2024-01-04)
 
 

package/dist/index.js

@@ -153,6 +153,7 @@ function PostListItem({ post, closePopup, ...props }) {
   return /* @__PURE__ */ React3.createElement(
     import_ui3.MenuItem,
     {
+      disabled: !post.user_can.edit,
       onClick: async () => {
         closePopup();
         await navigateToDocument(post.id);
@@ -208,12 +209,41 @@ async function addNewPage() {
 var import_icons3 = require("@elementor/icons");
 var import_i18n = require("@wordpress/i18n");
 var import_editor_documents2 = require("@elementor/editor-documents");
+
+// src/hooks/use-user.ts
+var import_query2 = require("@elementor/query");
+
+// src/api/user.ts
+var import_api_fetch3 = __toESM(require("@wordpress/api-fetch"));
+var getUser = () => {
+  const baseUri = "/wp/v2/users/me";
+  const keys = ["capabilities"];
+  const queryParams = new URLSearchParams({
+    _fields: keys.join(","),
+    context: "edit"
+  });
+  const uri = baseUri + "?" + queryParams.toString();
+  return (0, import_api_fetch3.default)({ path: uri });
+};
+
+// src/hooks/use-user.ts
+var userQueryKey = () => ["site-navigation", "user"];
+function useUser() {
+  return (0, import_query2.useQuery)({
+    queryKey: userQueryKey(),
+    queryFn: () => getUser()
+  });
+}
+
+// src/components/top-bar/create-post-list-item.tsx
 function CreatePostListItem({ closePopup, ...props }) {
   const { create, isLoading } = useCreatePage();
   const navigateToDocument = (0, import_editor_documents2.__useNavigateToDocument)();
+  const { data: user } = useUser();
   return /* @__PURE__ */ React4.createElement(
     import_ui4.MenuItem,
     {
+      disabled: isLoading || !user?.capabilities?.edit_pages,
       onClick: async () => {
         const { id } = await create();
         closePopup();
@@ -314,10 +344,10 @@ var import_icons15 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
 
 // src/hooks/use-posts.ts
-var import_query2 = require("@elementor/query");
+var import_query3 = require("@elementor/query");
 
 // src/api/post.ts
-var import_api_fetch3 = __toESM(require("@wordpress/api-fetch"));
+var import_api_fetch4 = __toESM(require("@wordpress/api-fetch"));
 var import_i18n3 = require("@wordpress/i18n");
 var postTypesMap = {
   page: {
@@ -330,7 +360,7 @@ var postTypesMap = {
 };
 var getRequest2 = (postTypeSlug) => {
   const baseUri = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
-  const keys = ["id", "type", "title", "link", "status"];
+  const keys = ["id", "type", "title", "link", "status", "user_can"];
   const queryParams = new URLSearchParams({
     status: "any",
     per_page: "-1",
@@ -338,11 +368,11 @@ var getRequest2 = (postTypeSlug) => {
     _fields: keys.join(",")
   });
   const uri = baseUri + "?" + queryParams.toString();
-  return (0, import_api_fetch3.default)({ path: uri });
+  return (0, import_api_fetch4.default)({ path: uri });
 };
 var createRequest = (postTypeSlug, newPost) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
-  return (0, import_api_fetch3.default)({
+  return (0, import_api_fetch4.default)({
     path,
     method: "POST",
     data: newPost
@@ -351,7 +381,7 @@ var createRequest = (postTypeSlug, newPost) => {
 var updateRequest = (postTypeSlug, updatedPost) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
   const { id, ...data } = updatedPost;
-  return (0, import_api_fetch3.default)({
+  return (0, import_api_fetch4.default)({
     path: `${path}/${id}`,
     method: "POST",
     data
@@ -359,14 +389,14 @@ var updateRequest = (postTypeSlug, updatedPost) => {
 };
 var deleteRequest = (postTypeSlug, postId) => {
   const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
-  return (0, import_api_fetch3.default)({
+  return (0, import_api_fetch4.default)({
     path: `${path}/${postId}`,
     method: "DELETE"
   });
 };
 var duplicateRequest = (originalPost) => {
   const path = `/elementor/v1/site-navigation/duplicate-post`;
-  return (0, import_api_fetch3.default)({
+  return (0, import_api_fetch4.default)({
     path,
     method: "POST",
     data: {
@@ -379,7 +409,7 @@ var duplicateRequest = (originalPost) => {
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
 function usePosts(postTypeSlug) {
-  return (0, import_query2.useQuery)({
+  return (0, import_query3.useQuery)({
     queryKey: postsQueryKey(postTypeSlug),
     queryFn: () => getRequest2(postTypeSlug)
   });
@@ -483,23 +513,23 @@ var React20 = __toESM(require("react"));
 var React9 = __toESM(require("react"));
 
 // src/hooks/use-posts-actions.ts
-var import_query3 = require("@elementor/query");
+var import_query4 = require("@elementor/query");
 function usePostActions(postTypeSlug) {
   const invalidatePosts = useInvalidatePosts(postTypeSlug);
   const onSuccess = () => invalidatePosts({ exact: true });
-  const createPost = (0, import_query3.useMutation)({
+  const createPost = (0, import_query4.useMutation)({
     mutationFn: (newPost) => createRequest(postTypeSlug, newPost),
     onSuccess
   });
-  const updatePost = (0, import_query3.useMutation)({
+  const updatePost = (0, import_query4.useMutation)({
     mutationFn: (updatedPost) => updateRequest(postTypeSlug, updatedPost),
     onSuccess
   });
-  const deletePost = (0, import_query3.useMutation)({
+  const deletePost = (0, import_query4.useMutation)({
     mutationFn: (postId) => deleteRequest(postTypeSlug, postId),
     onSuccess
   });
-  const duplicatePost = (0, import_query3.useMutation)({
+  const duplicatePost = (0, import_query4.useMutation)({
     mutationFn: (originalPost) => duplicateRequest(originalPost),
     onSuccess
   });
@@ -511,7 +541,7 @@ function usePostActions(postTypeSlug) {
   };
 }
 function useInvalidatePosts(postTypeSlug) {
-  const queryClient = (0, import_query3.useQueryClient)();
+  const queryClient = (0, import_query4.useQueryClient)();
   return (options = {}) => {
     const queryKey = postsQueryKey(postTypeSlug);
     queryClient.invalidateQueries({ queryKey: recentPostsQueryKey }, options);
@@ -779,6 +809,7 @@ function Rename({ post }) {
       title: (0, import_i18n7.__)("Rename", "elementor"),
       icon: import_icons7.EraseIcon,
       MenuItemProps: {
+        disabled: !post.user_can.edit,
         onClick: () => {
           setEditMode({
             mode: "rename",
@@ -798,6 +829,7 @@ var import_icons8 = require("@elementor/icons");
 var import_i18n8 = require("@wordpress/i18n");
 function Duplicate({ post, popupState }) {
   const { setEditMode } = usePostListContext();
+  const { data: user } = useUser();
   const onClick = () => {
     popupState.close();
     setEditMode({
@@ -808,12 +840,14 @@ function Duplicate({ post, popupState }) {
       }
     });
   };
+  const isDisabled = !user?.capabilities?.edit_pages;
   return /* @__PURE__ */ React15.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n8.__)("Duplicate", "elementor"),
       icon: import_icons8.CopyIcon,
       MenuItemProps: {
+        disabled: isDisabled,
         onClick
       }
     }
@@ -831,13 +865,15 @@ function Delete({ post }) {
   const [isDialogOpen, setIsDialogOpen] = (0, import_react6.useState)(false);
   const activeDocument = (0, import_editor_documents7.__useActiveDocument)();
   const isPostActive = activeDocument?.id === post.id;
+  const userCanDelete = post.user_can.delete;
+  const isDisabled = !userCanDelete || post.isHome || isPostActive;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n9.__)("Delete", "elementor"),
       icon: import_icons9.TrashIcon,
       MenuItemProps: {
-        disabled: post.isHome || isPostActive,
+        disabled: isDisabled,
         onClick: () => setIsDialogOpen(true),
         sx: { "&:hover": { color: "error.main" } }
       }
@@ -902,21 +938,17 @@ var import_icons11 = require("@elementor/icons");
 var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/use-homepage-actions.ts
-var import_query5 = require("@elementor/query");
+var import_query6 = require("@elementor/query");
 
 // src/api/settings.ts
-var import_api_fetch4 = __toESM(require("@wordpress/api-fetch"));
+var import_api_fetch5 = __toESM(require("@wordpress/api-fetch"));
 var getSettings = () => {
-  const baseUri = "/wp/v2/settings";
-  const keys = ["show_on_front", "page_on_front"];
-  const queryParams = new URLSearchParams({
-    _fields: keys.join(",")
-  });
-  const uri = baseUri + "?" + queryParams.toString();
-  return (0, import_api_fetch4.default)({ path: uri });
+  const baseUri = "/elementor/v1/site-navigation/homepage";
+  const uri = baseUri;
+  return (0, import_api_fetch5.default)({ path: uri });
 };
 var updateSettings = (settings) => {
-  return (0, import_api_fetch4.default)({
+  return (0, import_api_fetch5.default)({
     path: "/wp/v2/settings",
     method: "POST",
     data: settings
@@ -924,10 +956,10 @@ var updateSettings = (settings) => {
 };
 
 // src/hooks/use-homepage.ts
-var import_query4 = require("@elementor/query");
+var import_query5 = require("@elementor/query");
 var settingsQueryKey = () => ["site-navigation", "homepage"];
 function useHomepage() {
-  return (0, import_query4.useQuery)({
+  return (0, import_query5.useQuery)({
     queryKey: settingsQueryKey(),
     queryFn: () => getSettings()
   });
@@ -937,14 +969,14 @@ function useHomepage() {
 function useHomepageActions() {
   const invalidateSettings = useInvalidateSettings();
   const onSuccess = async () => invalidateSettings({ exact: true });
-  const updateSettingsMutation = (0, import_query5.useMutation)({
+  const updateSettingsMutation = (0, import_query6.useMutation)({
     mutationFn: (settings) => updateSettings(settings),
     onSuccess
   });
   return { updateSettingsMutation };
 }
 function useInvalidateSettings() {
-  const queryClient = (0, import_query5.useQueryClient)();
+  const queryClient = (0, import_query6.useQueryClient)();
   return (options = {}) => {
     const queryKey = settingsQueryKey();
     return queryClient.invalidateQueries({ queryKey }, options);
@@ -956,6 +988,7 @@ var import_ui11 = require("@elementor/ui");
 function SetHome({ post, closeMenu }) {
   const { updateSettingsMutation } = useHomepageActions();
   const { setError } = usePostListContext();
+  const { data: user } = useUser();
   const handleClick = async () => {
     try {
       await updateSettingsMutation.mutateAsync({ show_on_front: "page", page_on_front: post.id });
@@ -965,13 +998,17 @@ function SetHome({ post, closeMenu }) {
       closeMenu();
     }
   };
+  const canManageOptions = !!user?.capabilities?.manage_options;
+  const isPostPublished = post.status === "publish";
+  const isPostHomepage = !!post.isHome;
+  const isDisabled = !canManageOptions || isPostHomepage || !isPostPublished || updateSettingsMutation.isPending;
   return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n11.__)("Set as homepage", "elementor"),
       icon: !updateSettingsMutation.isPending ? import_icons11.HomeIcon : import_ui11.CircularProgress,
       MenuItemProps: {
-        disabled: !!post.isHome || post.status !== "publish" || updateSettingsMutation.isPending,
+        disabled: isDisabled,
         onClick: handleClick
       }
     }
@@ -980,6 +1017,21 @@ function SetHome({ post, closeMenu }) {
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 var import_i18n12 = require("@wordpress/i18n");
+var DisabledPostTooltip = ({ children, isDisabled }) => {
+  if (isDisabled) {
+    const title = /* @__PURE__ */ React19.createElement(import_ui12.Typography, { variant: "caption" }, "You cannot edit this page.", /* @__PURE__ */ React19.createElement("br", null), "To edit it directly, contact the site owner");
+    return /* @__PURE__ */ React19.createElement(
+      import_ui12.Tooltip,
+      {
+        title,
+        placement: "bottom",
+        arrow: false
+      },
+      children
+    );
+  }
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
+};
 function ListItemView({ post }) {
   const activeDocument = (0, import_editor_documents8.__useActiveDocument)();
   const navigateToDocument = (0, import_editor_documents8.__useNavigateToDocument)();
@@ -991,7 +1043,8 @@ function ListItemView({ post }) {
   const isActive = activeDocument?.id === post.id;
   const status = isActive ? activeDocument?.status.value : post.status;
   const title = isActive ? activeDocument?.title : post.title.rendered;
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  const isDisabled = !post.user_can.edit;
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(DisabledPostTooltip, { isDisabled }, /* @__PURE__ */ React19.createElement(
     import_ui12.ListItem,
     {
       disablePadding: true,
@@ -1009,6 +1062,7 @@ function ListItemView({ post }) {
       import_ui12.ListItemButton,
       {
         selected: isActive,
+        disabled: isDisabled,
         onClick: () => {
           if (!isActive) {
             navigateToDocument(post.id);
@@ -1016,16 +1070,10 @@ function ListItemView({ post }) {
         },
         dense: true
       },
-      /* @__PURE__ */ React19.createElement(
-        import_ui12.ListItemText,
-        {
-          disableTypography: true
-        },
-        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { title, status })
-      ),
+      /* @__PURE__ */ React19.createElement(import_ui12.ListItemText, { disableTypography: true }, /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { title, status })),
       post.isHome && /* @__PURE__ */ React19.createElement(import_icons12.HomeIcon, { titleAccess: (0, import_i18n12.__)("Homepage", "elementor"), color: "disabled" })
     )
-  ), /* @__PURE__ */ React19.createElement(
+  )), /* @__PURE__ */ React19.createElement(
     import_ui12.Menu,
     {
       PaperProps: { sx: { mt: 2, width: 200 } },
@@ -1066,11 +1114,13 @@ var import_icons13 = require("@elementor/icons");
 var import_i18n13 = require("@wordpress/i18n");
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
+  const { data: user } = useUser();
   return /* @__PURE__ */ React21.createElement(
     import_ui13.Button,
     {
       size: "small",
       startIcon: /* @__PURE__ */ React21.createElement(import_icons13.PlusIcon, null),
+      disabled: !user?.capabilities?.edit_pages,
       onClick: () => {
         setEditMode({ mode: "create", details: {} });
       },
@@ -1108,7 +1158,7 @@ function ErrorState() {
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
   const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts(type);
-  const { data: homepageSettings } = useHomepage();
+  const { data: homepageId } = useHomepage();
   if (postsError) {
     return /* @__PURE__ */ React23.createElement(ErrorState, null);
   }
@@ -1124,8 +1174,6 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
     ), /* @__PURE__ */ React23.createElement(import_ui15.Box, null, /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
   }
   const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
-  const isHomepageSet = homepageSettings?.show_on_front === "page" && !!homepageSettings?.page_on_front;
-  const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
   const mappedPosts = posts.map((post) => {
     if (post.id === homepageId) {
       return { ...post, isHome: true };