BACKLOG-23160 Preload and map areas (#1317)

* BACKLOG-23160 Preload and map areas * BACKLOG-23160 Preload and map areas * BACKLOG-23160 Remove log * BACKLOG-23160 Fix lint * BACKLOG-23160 Cast bool * BACKLOG-23160 Use block move mixin * BACKLOG-23160 Don't get content unless can show in edit frame
Jahia · Oct 8, 2024 · 353c120 · 353c120
1 parent 3bb7b26
commit 353c120
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 14 deletions.
diff --git a/src/javascript/JContent/ContentRoute/ContentRoute.jsx b/src/javascript/JContent/ContentRoute/ContentRoute.jsx
@@ -11,27 +11,64 @@ import {EditFrame} from '../EditFrame';
 import {registry} from '@jahia/ui-extender';
 import {setTableViewMode} from '~/JContent/redux/JContent.redux';
 import {isInSearchMode} from './ContentLayout/ContentLayout.utils';
+import {JahiaAreasUtil} from '../JContent.utils';
 
 export const ContentRoute = () => {
     const {t} = useTranslation('jcontent');
-    const {path, mode, tableView, viewMode} = useSelector(state => ({
+    const {path, mode, tableView, viewMode, template, language} = useSelector(state => ({
+        language: state.language,
         path: state.jcontent.path,
         mode: state.jcontent.mode,
         tableView: state.jcontent.tableView,
-        viewMode: state.jcontent.tableView.viewMode
+        viewMode: state.jcontent.tableView.viewMode,
+        template: state.jcontent.template
     }), shallowEqual);
     const dispatch = useDispatch();
     const nodeTypes = ['jnt:page', 'jmix:mainResource'];
     const res = useNodeInfo({path}, {getIsNodeTypes: nodeTypes});
     const {FLAT, STRUCTURED, PAGE_BUILDER} = JContentConstants.tableView.viewMode;
     const accordionItem = registry.get('accordionItem', mode);
+    const isPageBuilderView = viewMode === PAGE_BUILDER;
+    const canShowEditFrame = res?.node && nodeTypes.some(nt => res.node[nt]);
 
     useEffect(() => {
         if (accordionItem.tableConfig?.availableModes?.indexOf?.(viewMode) === -1) {
             dispatch(setTableViewMode(accordionItem.tableConfig.defaultViewMode || FLAT));
         }
     }, [dispatch, mode, viewMode, FLAT, accordionItem]);
 
+    // Captured area information is used to block delete/move/copy/cut actions on areas
+    useEffect(() => {
+        if (path && language && canShowEditFrame) {
+            loadPageAndCaptureJahiaAreas(path, language, template);
+        }
+    }, [path, language, template, canShowEditFrame]);
+
+    const loadPageAndCaptureJahiaAreas = (path, language, template) => {
+        const renderMode = 'editframe';
+        const encodedPath = path.replace(/[^/]/g, encodeURIComponent) + (template === '' ? '' : `.${template}`);
+        const url = `${window.contextJsParameters.contextPath}/cms/${renderMode}/default/${language}${encodedPath}.html?redirect=false`;
+
+        fetch(url, {
+            method: 'get'
+        }).then(resp => {
+            return resp.text();
+        }).then(resp => {
+            const dom = new DOMParser().parseFromString(resp, 'text/html');
+            dom.querySelectorAll('[jahiatype]').forEach((element => {
+                const jahiatype = element.getAttribute('jahiatype');
+                const modulePath = element.getAttribute('path');
+                const type = element.getAttribute('type');
+
+                if (jahiatype === 'module' && modulePath !== '*' && modulePath !== path && (type === 'area' || type === 'absoluteArea')) {
+                    JahiaAreasUtil.addArea(modulePath);
+                }
+            }));
+        }).catch(e => {
+            console.error('Failed to capture areas for page', e);
+        });
+    };
+
     if (res.loading) {
         return <LoaderOverlay/>;
     }
@@ -44,9 +81,6 @@ export const ContentRoute = () => {
         return <Error404 label={t('jcontent:label.contentManager.error.missingFolder')}/>;
     }
 
-    const isPageBuilderView = viewMode === PAGE_BUILDER;
-    const canShowEditFrame = nodeTypes.some(nt => res.node[nt]);
-
     // Update viewMode if page builder is selected but content cannot be displayed
     if (!isInSearchMode(mode) && (res.node.path === path) && isPageBuilderView && !canShowEditFrame) {
         const {queryHandler, availableModes} = accordionItem?.tableConfig || {};

diff --git a/src/javascript/JContent/JContent.actions.jsx b/src/javascript/JContent/JContent.actions.jsx
@@ -226,7 +226,7 @@ export const jContentActions = registry => {
         buttonLabel: 'jcontent:label.contentManager.copyPaste.copy',
         targets: ['contentActions:3.8', 'selectedContentActions:3.8', 'narrowHeaderSelectionMenu:3.8'],
         copyCutType: 'copy',
-        hideOnNodeTypes: ['jnt:virtualsite', 'jnt:page', 'jmix:systemNameReadonly'],
+        hideOnNodeTypes: ['jnt:virtualsite', 'jnt:page', 'jmix:isAreaList'],
         hideForPaths: [PATH_FILES_ITSELF, PATH_CONTENTS_ITSELF],
         component: CopyCutActionComponent
     });
@@ -260,7 +260,7 @@ export const jContentActions = registry => {
         buttonLabel: 'jcontent:label.contentManager.copyPaste.cut',
         targets: ['contentActions:3.9', 'selectedContentActions:3.9', 'narrowHeaderSelectionMenu:3.9'],
         copyCutType: 'cut',
-        hideOnNodeTypes: ['jnt:virtualsite', 'jmix:hideDeleteAction', 'jmix:systemNameReadonly'],
+        hideOnNodeTypes: ['jnt:virtualsite', 'jmix:hideDeleteAction', 'jmix:isAreaList'],
         hideForPaths: [PATH_FILES_ITSELF, PATH_CONTENTS_ITSELF],
         component: CopyCutActionComponent
     });
@@ -282,7 +282,7 @@ export const jContentActions = registry => {
         buttonIcon: <Delete/>,
         buttonLabel: 'jcontent:label.contentManager.contentPreview.delete',
         targets: ['contentActions:4', 'selectedContentActions:4', 'narrowHeaderMenu:12', 'narrowHeaderSelectionMenu:4'],
-        hideOnNodeTypes: ['jnt:virtualsite', 'jmix:hideDeleteAction', 'jmix:systemNameReadonly'],
+        hideOnNodeTypes: ['jnt:virtualsite', 'jmix:hideDeleteAction', 'jmix:isAreaList'],
         component: DeleteActionComponent
     });
     registry.add('action', 'deletePermanently', {

diff --git a/src/javascript/JContent/JContent.utils.js b/src/javascript/JContent/JContent.utils.js
@@ -323,3 +323,13 @@ export const findAvailableBoxConfig = node => {
 export const getTitle = (t, item, prefix = 'jContent') => {
     return item.label ? `${prefix} - ${t(item.label)}` : `${prefix} - ${item.key}`;
 };
+
+export const JahiaAreasUtil = {
+    jahiaAreas: {},
+    addArea: function (path) {
+        this.jahiaAreas[path] = true;
+    },
+    isJahiaArea: function (path) {
+        return Boolean(this.jahiaAreas[path]);
+    }
+};
diff --git a/src/javascript/JContent/actions/copyPaste/CopyCutActionComponent.jsx b/src/javascript/JContent/actions/copyPaste/CopyCutActionComponent.jsx
@@ -10,6 +10,7 @@ import React from 'react';
 import {ACTION_PERMISSIONS} from '../actions.constants';
 import {withNotifications} from '@jahia/react-material';
 import {useTranslation} from 'react-i18next';
+import {JahiaAreasUtil} from '../../JContent.utils';
 
 export const CopyCutActionComponent = withNotifications()(({
     path,
@@ -49,7 +50,7 @@ export const CopyCutActionComponent = withNotifications()(({
         return (Loading && <Loading {...others}/>) || false;
     }
 
-    const isVisible = res.checksResult &&
+    const isVisible = res.checksResult && !JahiaAreasUtil.isJahiaArea(path) &&
         (res.node ?
             !hasMixin(res.node, 'jmix:markedForDeletionRoot') :
             res.nodes.reduce((acc, node) => acc && !hasMixin(node, 'jmix:markedForDeletionRoot'), true)

diff --git a/src/javascript/JContent/actions/deleteActions/deleteAction.jsx b/src/javascript/JContent/actions/deleteActions/deleteAction.jsx
@@ -1,4 +1,4 @@
-import {isMarkedForDeletion} from '../../JContent.utils';
+import {isMarkedForDeletion, JahiaAreasUtil} from '../../JContent.utils';
 import {useSelector} from 'react-redux';
 import {useNodeChecks} from '@jahia/data-helper';
 import PropTypes from 'prop-types';
@@ -39,7 +39,7 @@ export const DeleteActionComponent = ({path, paths, buttonProps, onDeleted, rend
         return (Loading && <Loading {...others}/>) || false;
     }
 
-    const isVisible = res.checksResult && (res.node ? checkAction(res.node) : res.nodes.reduce((acc, node) => acc && checkAction(node), true));
+    const isVisible = res.checksResult && !JahiaAreasUtil.isJahiaArea(path) && (res.node ? checkAction(res.node) : res.nodes.reduce((acc, node) => acc && checkAction(node), true));
 
     return (
         <Render

diff --git a/src/javascript/JContent/dnd/useNodeDrag.jsx b/src/javascript/JContent/dnd/useNodeDrag.jsx
@@ -5,6 +5,7 @@ import {getEmptyImage} from 'react-dnd-html5-backend';
 import {shallowEqual, useSelector} from 'react-redux';
 import {useNodeChecks} from '@jahia/data-helper';
 import {PATH_CONTENTS_ITSELF, PATH_FILES_ITSELF} from '~/JContent/actions/actions.constants';
+import {JahiaAreasUtil} from '../JContent.utils';
 
 export function useNodeDrag({dragSource}) {
     const {selection, language, displayLanguage} = useSelector(state => ({
@@ -19,7 +20,7 @@ export function useNodeDrag({dragSource}) {
         {
             getPrimaryNodeType: true,
             requiredPermission: ['jcr:removeNode'],
-            hideOnNodeTypes: ['jnt:virtualsite', 'jmix:hideDeleteAction', 'jmix:systemNameReadonly'],
+            hideOnNodeTypes: ['jnt:virtualsite', 'jmix:hideDeleteAction', 'jmix:blockMove'],
             hideForPaths: [PATH_FILES_ITSELF, PATH_CONTENTS_ITSELF],
             getLockInfo: true
         }
@@ -28,14 +29,14 @@ export function useNodeDrag({dragSource}) {
     const [props, drag, dragPreview] = useDrag(() => selection.length === 0 ? ({
         type: 'node',
         item: dragSource,
-        canDrag: () => Boolean(res.checksResult) && !res.node?.lockOwner,
+        canDrag: () => Boolean(res.checksResult) && !JahiaAreasUtil.isJahiaArea(dragSource?.path) && !res.node?.lockOwner,
         collect: monitor => ({
             dragging: monitor.isDragging()
         })
     }) : ({
         type: 'nodes',
         item: res.nodes,
-        canDrag: () => res.checksResult && !res.nodes?.some(n => n.lockOwner) && selection.indexOf(dragSource.path) > -1,
+        canDrag: () => res.checksResult && !JahiaAreasUtil.isJahiaArea(dragSource?.path) && !res.nodes?.some(n => n.lockOwner) && selection.indexOf(dragSource.path) > -1,
         collect: monitor => ({
             dragClasses: monitor.isDragging() ? [styles.drag] : []
         })