@elementor/editor-site-navigation 0.19.11 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.21.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.20.0...@elementor/editor-site-navigation@0.21.0) (2024-01-29)
+
+
+### Features
+
+* **editor-site-navigation:** pagination for pages panel ([#154](https://github.com/elementor/elementor-packages/issues/154)) ([1a1e1f4](https://github.com/elementor/elementor-packages/commit/1a1e1f46006988d10e0a7af292dbbc57644ed16f))
+
+
+
+
+
+# [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: {
@@ -328,21 +358,32 @@ var postTypesMap = {
     rest_base: "pages"
   }
 };
-var getRequest2 = (postTypeSlug) => {
+var POST_PER_PAGE = 10;
+var getRequest2 = async (postTypeSlug, page) => {
   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",
     order: "asc",
+    page: page.toString(),
+    per_page: POST_PER_PAGE.toString(),
     _fields: keys.join(",")
   });
   const uri = baseUri + "?" + queryParams.toString();
-  return (0, import_api_fetch3.default)({ path: uri });
+  const result = await (0, import_api_fetch4.default)({ path: uri, parse: false });
+  const data = await result.json();
+  const totalPages = Number(result.headers.get("x-wp-totalpages"));
+  const totalPosts = Number(result.headers.get("x-wp-total"));
+  return {
+    data,
+    totalPages,
+    totalPosts,
+    currentPage: page
+  };
 };
 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 +392,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 +400,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: {
@@ -378,11 +419,26 @@ var duplicateRequest = (originalPost) => {
 
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+var flattenData = (data) => {
+  if (!data) {
+    return data;
+  }
+  const flattened = [];
+  data.pages.forEach((page) => {
+    flattened.push(...page.data);
+  });
+  return flattened;
+};
 function usePosts(postTypeSlug) {
-  return (0, import_query2.useQuery)({
+  const query = (0, import_query3.useInfiniteQuery)({
     queryKey: postsQueryKey(postTypeSlug),
-    queryFn: () => getRequest2(postTypeSlug)
+    queryFn: ({ pageParam = 1 }) => getRequest2(postTypeSlug, pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      return lastPage.currentPage < lastPage.totalPages ? lastPage.currentPage + 1 : void 0;
+    }
   });
+  return { ...query, data: { posts: flattenData(query.data), total: query.data?.pages[0]?.totalPosts ?? 0 } };
 }
 
 // src/contexts/post-list-context.tsx
@@ -473,7 +529,7 @@ function CollapsibleList({
       unmountOnExit: true
     },
     /* @__PURE__ */ React7.createElement(import_ui6.List, { dense: true }, children)
-  ), /* @__PURE__ */ React7.createElement(import_ui6.Divider, { sx: { my: 3 } }));
+  ), /* @__PURE__ */ React7.createElement(import_ui6.Divider, { sx: { mt: 1 } }));
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
@@ -483,23 +539,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 +567,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 +835,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 +855,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 +866,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 +891,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 +964,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 +982,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 +995,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 +1014,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 +1024,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 +1043,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 +1069,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 +1088,7 @@ function ListItemView({ post }) {
       import_ui12.ListItemButton,
       {
         selected: isActive,
+        disabled: isDisabled,
         onClick: () => {
           if (!isActive) {
             navigateToDocument(post.id);
@@ -1016,16 +1096,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 +1140,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: {} });
       },
@@ -1107,8 +1183,8 @@ function ErrorState() {
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
-  const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts(type);
-  const { data: homepageSettings } = useHomepage();
+  const { data: { posts, total }, isLoading: postsLoading, isError: postsError, fetchNextPage, hasNextPage, isFetchingNextPage } = usePosts(type);
+  const { data: homepageId } = useHomepage();
   if (postsError) {
     return /* @__PURE__ */ React23.createElement(ErrorState, null);
   }
@@ -1123,9 +1199,7 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
       /* @__PURE__ */ React23.createElement(import_ui15.Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
     ), /* @__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 label = `${postTypesMap[type].labels.plural_name} (${total.toString()})`;
   const mappedPosts = posts.map((post) => {
     if (post.id === homepageId) {
       return { ...post, isHome: true };
@@ -1163,7 +1237,11 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
     sortedPosts.map((post) => {
       return /* @__PURE__ */ React23.createElement(PostListItem2, { key: post.id, post });
     }),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null)
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null),
+    hasNextPage && /* @__PURE__ */ React23.createElement(import_ui15.Box, { sx: {
+      display: "flex",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React23.createElement(import_ui15.Button, { onClick: fetchNextPage, color: "secondary" }, isFetchingNextPage ? /* @__PURE__ */ React23.createElement(import_ui15.CircularProgress, null) : "Load More"))
   )));
 }