EZP-31408: 'This Location has no Sub-items' msg is displayed above location

Author: dew326

Resources/public/scss/modules/content-tree/_list.scss

@@ -2,6 +2,13 @@
     margin: 0;
     padding: 0 0 0 calculateRem(12px);
     list-style: none;
+
+    &__no-items-message {
+        padding: calculateRem(10px);
+        font-size: calculateRem(12px);
+        font-style: italic;
+        color: $ez-color-base-dark;
+    }
 }
 
 .m-tree__scrollable-wrapper {

Resources/public/scss/modules/content-tree/_main.scss

@@ -41,11 +41,4 @@
         color: $ez-color-base-light;
         cursor: pointer;
     }
-
-    &__no-items-message {
-        padding: calculateRem(10px);
-        font-size: calculateRem(12px);
-        font-style: italic;
-        color: $ez-color-base-dark;
-    }
 }

src/modules/content-tree/components/content-tree/content.tree.js

@@ -61,19 +61,6 @@ export default class ContentTree extends Component {
         window.document.body.classList.remove(CLASS_IS_TREE_RESIZING);
     }
 
-    renderNoSubitemMessage() {
-        const { items } = this.props;
-        const rootLocation = items[0];
-        const isRootLoaded = rootLocation;
-        const noSubitemsMessage = Translator.trans(/*@Desc("This location has no sub-items")*/ 'no_subitems', {}, 'content_tree');
-
-        if (!isRootLoaded || (rootLocation.subitems && rootLocation.subitems.length)) {
-            return;
-        }
-
-        return <div className="m-tree__no-items-message">{noSubitemsMessage}</div>;
-    }
-
     renderCollapseAllBtn() {
         const collapseAllLabel = Translator.trans(/*@Desc("Collapse all")*/ 'collapse_all', {}, 'content_tree');
 
@@ -137,7 +124,6 @@ export default class ContentTree extends Component {
 
         return (
             <div {...containerAttrs}>
-                {this.renderNoSubitemMessage()}
                 {this.renderList()}
                 {this.renderLoadingSpinner()}
                 {this.renderCollapseAllBtn()}

src/modules/content-tree/components/list/list.component.js

@@ -2,10 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ListItem from '../list-item/list.item.component';
 
-const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle, isRoot }) => {
+const List = ({
+    items,
+    loadMoreSubitems,
+    currentLocationId,
+    path,
+    subitemsLoadLimit,
+    subitemsLimit,
+    treeMaxDepth,
+    afterItemToggle,
+    isRoot,
+}) => {
     const commonAttrs = { loadMoreSubitems, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle };
     const listAttrs = { ...commonAttrs, currentLocationId };
     const listItemAttrs = commonAttrs;
+    const renderNoSubitemMessage = () => {
+        const rootLocation = items[0];
+        const isRootLoaded = rootLocation;
+        const noSubitemsMessage = Translator.trans(/*@Desc("This location has no sub-items")*/ 'no_subitems', {}, 'content_tree');
+
+        if (!isRoot || !isRootLoaded || (rootLocation.subitems && rootLocation.subitems.length)) {
+            return null;
+        }
+
+        return <div className="c-list__no-items-message">{noSubitemsMessage}</div>;
+    };
 
     return (
         <ul className="c-list">
@@ -24,7 +45,11 @@ const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLi
                         href={locationHref}
                         isRootItem={isRoot}
                         path={itemPath}>
-                        {subitems.length ? <List path={itemPath} items={subitems} isRoot={false} {...listAttrs} /> : null}
+                        {subitems.length ? (
+                            <List path={itemPath} items={subitems} isRoot={false} {...listAttrs} />
+                        ) : (
+                            renderNoSubitemMessage()
+                        )}
                     </ListItem>
                 );
             })}