entando · ichalagashvili · May 23, 2023 · May 15, 2023 · May 19, 2023
diff --git a/sass/pages/common/PageTreeCompact.scss b/sass/pages/common/PageTreeCompact.scss
@@ -47,6 +47,10 @@
     width: 40px;
   }
 
+  &__virtual-root {
+    cursor: not-allowed !important; // sass-lint:disable-line no-important
+  }
+
   // sass-lint:disable force-element-nesting nesting-depth no-qualifying-elements class-name-format
   &.table > tbody > &__row--selected {
     &,

diff --git a/src/state/pages/actions.js b/src/state/pages/actions.js
@@ -21,6 +21,7 @@ import {
   MOVE_PAGE, SET_FREE_PAGES, SET_SELECTED_PAGE, REMOVE_PAGE, UPDATE_PAGE, SEARCH_PAGES,
   CLEAR_SEARCH, SET_REFERENCES_SELECTED_PAGE, CLEAR_TREE, BATCH_TOGGLE_EXPANDED, COLLAPSE_ALL,
   SET_DASHBOARD_PAGES,
+  SET_VIRTUAL_ROOT,
 } from 'state/pages/types';
 import { HOMEPAGE_CODE, PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED, SEO_ENABLED } from 'state/pages/const';
 import { history, ROUTE_PAGE_TREE, ROUTE_PAGE_CLONE, ROUTE_PAGE_ADD } from 'app-init/router';
@@ -167,6 +168,11 @@ export const setDashboardPages = pages => ({
   },
 });
 
+export const setVirtualRoot = virtualRoot => ({
+  type: SET_VIRTUAL_ROOT,
+  payload: virtualRoot,
+});
+
 const wrapApiCall = apiFunc => (...args) => async (dispatch) => {
   const response = await apiFunc(...args);
   const json = await response.json();
@@ -222,6 +228,9 @@ export const fetchPageTree = pageCode => async (dispatch) => {
       fetchPage(pageCode)(dispatch),
       fetchPageChildren(pageCode)(dispatch),
     ]);
+    const rootMetadata = responses[1] ? responses[1].metaData : {};
+    const { virtualRoot } = rootMetadata;
+    dispatch(setVirtualRoot(virtualRoot));
     return [responses[0].payload].concat(responses[1].payload);
   }
   const response = await fetchPageChildren(pageCode)(dispatch);

diff --git a/src/state/pages/reducer.js b/src/state/pages/reducer.js
@@ -18,6 +18,7 @@ import {
   BATCH_TOGGLE_EXPANDED,
   COLLAPSE_ALL,
   SET_DASHBOARD_PAGES,
+  SET_VIRTUAL_ROOT,
 } from 'state/pages/types';
 
 // creates a map from an array
@@ -285,6 +286,14 @@ export const dashboard = (state = [], action = {}) => {
   }
 };
 
+export const virtualRoot = (state = false, action = {}) => {
+  switch (action.type) {
+    case SET_VIRTUAL_ROOT:
+      return action.payload;
+    default: return state;
+  }
+};
+
 export default combineReducers({
   map: reducer,
   childrenMap,
@@ -295,4 +304,5 @@ export default combineReducers({
   selected,
   search,
   dashboard,
+  virtualRoot,
 });
diff --git a/src/state/pages/selectors.js b/src/state/pages/selectors.js
@@ -16,6 +16,7 @@ export const getViewPages = state => state.pages.viewPages;
 export const getSelectedPage = state => state.pages.selected;
 export const getSearchPagesRaw = state => state.pages.search;
 export const getDashboardPages = state => state.pages.dashboard;
+export const getIsVirtualRootOn = state => state.pages.virtualRoot;
 
 export const getSearchPages = createSelector(
   [getSearchPagesRaw, getChildrenMap],
@@ -103,8 +104,9 @@ const PAGE_STATUS_DEFAULTS = {
 };
 
 export const getPageTreePages = createSelector(
-  [getPagesMap, getChildrenMap, getStatusMap, getTitlesMap, getLocale, getDefaultLanguage],
-  (pages, pageChildren, pagesStatus, pagesTitles, locale, defaultLang) => (
+  [getPagesMap, getChildrenMap, getStatusMap, getTitlesMap, getLocale, getDefaultLanguage,
+    getIsVirtualRootOn],
+  (pages, pageChildren, pagesStatus, pagesTitles, locale, defaultLang, virtualRootOn) => (
     getPagesOrder(pageChildren)
       .filter(pageCode => isVisible(pageCode, pages, pagesStatus))
       .map((pageCode) => {
@@ -117,12 +119,16 @@ export const getPageTreePages = createSelector(
             .some(el => pages[el] && pages[el].status === PAGE_STATUS_PUBLISHED);
         }
 
-        const title = pagesTitles[pageCode][locale]
+        let title = pagesTitles[pageCode][locale]
           || pagesTitles[pageCode][defaultLang]
           || pagesTitles[pageCode][
             Object.keys(pagesTitles[pageCode]).find(langCode => pagesTitles[pageCode][langCode])
           ];
 
+        if (pageCode === HOMEPAGE_CODE && virtualRootOn) {
+          title = 'Root';
+        }
+
         return ({
           ...pages[pageCode],
           ...PAGE_STATUS_DEFAULTS,

diff --git a/src/state/pages/types.js b/src/state/pages/types.js
@@ -16,3 +16,4 @@ export const BATCH_TOGGLE_EXPANDED = 'pages/set-all-pages-expanded';
 export const COLLAPSE_ALL = 'pages/collapse-all-pages';
 export const SET_VIEWPAGES = 'pages/set-viewpages';
 export const SET_DASHBOARD_PAGES = 'pages/set-dashboard-pages';
+export const SET_VIRTUAL_ROOT = 'pages/set-virtual-root';
diff --git a/src/ui/pages/common/PageTree.js b/src/ui/pages/common/PageTree.js
@@ -16,13 +16,24 @@ import PublishPageModalContainer from 'ui/pages/common/PublishPageModalContainer
 import UnpublishPageModalContainer from 'ui/pages/common/UnpublishPageModalContainer';
 import PageListSearchTable from 'ui/pages/list/PageListSearchTable';
 import MovePageModalContainer from 'ui/pages/common/MovePageModalContainer';
-import { PAGE_MOVEMENT_OPTIONS } from 'state/pages/const';
+import { HOMEPAGE_CODE, PAGE_MOVEMENT_OPTIONS } from 'state/pages/const';
+
+export const getIsRootAndVirtual = (page, virtualRootOn) => {
+  if (!page) {
+    return false;
+  }
+  if (page.code === HOMEPAGE_CODE && virtualRootOn) {
+    return true;
+  }
+  return false;
+};
 
 class PageTree extends Component {
   constructor(props) {
     super(props);
     this.handleDrop = this.handleDrop.bind(this);
     this.renderActionCell = this.renderActionCell.bind(this);
+    this.renderStatusCell = this.renderStatusCell.bind(this);
   }
 
   componentDidMount() {
@@ -109,9 +120,7 @@ class PageTree extends Component {
           className: 'text-center PageTree__thead',
           style: { width: '10%' },
         },
-        Cell: ({ value }) => (
-          <PageStatusIcon status={value} />
-        ),
+        Cell: this.renderStatusCell,
         cellAttributes: {
           className: 'text-center',
         },
@@ -150,6 +159,12 @@ class PageTree extends Component {
   }
 
   renderActionCell({ original: page }) {
+    const isRootAndVirtual = getIsRootAndVirtual(page, this.props.virtualRootOn);
+
+    if (isRootAndVirtual) {
+      return null;
+    }
+
     return (
       <PageTreeActionMenu
         page={page}
@@ -170,6 +185,14 @@ class PageTree extends Component {
     );
   }
 
+  renderStatusCell(args) {
+    const isRootAndVirtual = getIsRootAndVirtual(args.row.original, this.props.virtualRootOn);
+    if (isRootAndVirtual) return null;
+    return (
+      <PageStatusIcon status={args.value} hide={isRootAndVirtual} />
+    );
+  }
+
   render() {
     const {
       searchPages,
@@ -258,6 +281,7 @@ PageTree.propTypes = {
   onSetColumnOrder: PropTypes.func,
   columnOrder: PropTypes.arrayOf(PropTypes.string),
   myGroupIds: PropTypes.arrayOf(PropTypes.string),
+  virtualRootOn: PropTypes.bool,
 };
 
 PageTree.defaultProps = {
@@ -270,6 +294,7 @@ PageTree.defaultProps = {
   onSetColumnOrder: () => {},
   columnOrder: ['title', 'status', 'displayedInMenu'],
   myGroupIds: [],
+  virtualRootOn: false,
 };
 
 export default PageTree;
diff --git a/src/ui/pages/common/PageTreeCompact.js b/src/ui/pages/common/PageTreeCompact.js
@@ -6,14 +6,15 @@ import PageStatusIcon from 'ui/pages/common/PageStatusIcon';
 import TreeNodeExpandedIcon from 'ui/common/tree-node/TreeNodeExpandedIcon';
 import RowSpinner from 'ui/pages/common/RowSpinner';
 import { PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED } from 'state/pages/const';
+import { getIsRootAndVirtual } from './PageTree';
 
 class PageTreeCompact extends Component {
   renderRows() {
     const {
       pages, onClickDetails, onClickAdd, onClickEdit, onClickConfigure,
       onClickClone, onClickDelete, onClickUnPublish, onClickPublish,
       onRowClick, onClickViewPublishedPage, onClickPreview, selectedPage,
-      domain, locale, loadOnPageSelect, myGroupIds,
+      domain, locale, loadOnPageSelect, myGroupIds, virtualRootOn,
     } = this.props;
 
     const handleClick = (handler, page) => (e) => {
@@ -95,11 +96,15 @@ class PageTreeCompact extends Component {
         </MenuItem>
       );
 
+      const isRootAndVirtual = getIsRootAndVirtual(page, virtualRootOn);
+
       return (
         <tr
           key={page.code}
-          className={`PageTreeCompact__row ${selectedPage && selectedPage.code === page.code ? 'PageTreeCompact__row--selected' : ''}`}
-          onClick={() => onRowClick(page)}
+          className={`PageTreeCompact__row ${selectedPage && selectedPage.code === page.code ? 'PageTreeCompact__row--selected' : ''}
+            ${isRootAndVirtual ? 'PageTreeCompact__virtual-root' : ''}
+          `}
+          onClick={() => (isRootAndVirtual ? null : onRowClick(page))}
         >
           <td className={className.join(' ').trim()}>
             <div className="PageTreeCompact__column-wrapper">
@@ -129,51 +134,62 @@ class PageTreeCompact extends Component {
               )}
             </div>
           </td>
-          <td className="text-center PageTreeCompact__status-col">
-            <PageStatusIcon status={page.status} />
-          </td>
+          {
+            isRootAndVirtual ? null : (
+              <td className="text-center PageTreeCompact__status-col">
+                <PageStatusIcon status={page.status} />
+              </td>
+            )
+          }
           <td className="text-center PageTreeCompact__actions-col">
-            <div onClick={e => e.stopPropagation()} role="none">
-              <DropdownKebab className="PageTreeCompact__kebab-button" key={page.code} id={page.code} pullRight>
-                <MenuItem onClick={handleClick(onClickAdd, page)}>
-                  <FormattedMessage id="pageTree.add" />
-                </MenuItem>
-                {onClickEdit && (
-                  <MenuItem
-                    onClick={!disableDueToLackOfGroupAccess ? handleClick(onClickEdit, page) : null}
-                    disabled={disableDueToLackOfGroupAccess}
-                  >
-                    <FormattedMessage id="app.edit" />
-                  </MenuItem>
+            {
+              isRootAndVirtual ? null : (
+                <div onClick={e => e.stopPropagation()} role="none">
+                  <DropdownKebab className="PageTreeCompact__kebab-button" key={page.code} id={page.code} pullRight>
+                    <MenuItem onClick={handleClick(onClickAdd, page)}>
+                      <FormattedMessage id="pageTree.add" />
+                    </MenuItem>
+                    {onClickEdit && (
+                    <MenuItem
+                      onClick={!disableDueToLackOfGroupAccess ?
+                        handleClick(onClickEdit, page) : null}
+                      disabled={disableDueToLackOfGroupAccess}
+                    >
+                      <FormattedMessage id="app.edit" />
+                    </MenuItem>
                 )}
-                {onClickConfigure && (
-                  <MenuItem
-                    onClick={!disableDueToLackOfGroupAccess ?
+                    {onClickConfigure && (
+                    <MenuItem
+                      onClick={!disableDueToLackOfGroupAccess ?
                       handleClick(onClickConfigure, page) : null}
-                    disabled={disableDueToLackOfGroupAccess}
-                  >
-                    <FormattedMessage id="app.design" />
-                  </MenuItem>
+                      disabled={disableDueToLackOfGroupAccess}
+                    >
+                      <FormattedMessage id="app.design" />
+                    </MenuItem>
                 )}
-                {onClickDetails && (
-                  <MenuItem onClick={handleClick(onClickDetails, page)}>
-                    <FormattedMessage id="app.details" />
-                  </MenuItem>
+                    {onClickDetails && (
+                    <MenuItem onClick={handleClick(onClickDetails, page)}>
+                      <FormattedMessage id="app.details" />
+                    </MenuItem>
                 )}
-                <MenuItem
-                  onClick={!disableDueToLackOfGroupAccess ? handleClick(onClickClone, page) : null}
-                  disabled={disableDueToLackOfGroupAccess}
-                >
-                  <FormattedMessage id="app.clone" />
-                </MenuItem>
-                {renderDeleteItem()}
-                {changePublishStatus}
-                <MenuItem onClick={handleClickPreview(onClickPreview, page)}>
-                  <FormattedMessage id="app.preview" />
-                </MenuItem>
-                {viewPublishedPage}
-              </DropdownKebab>
-            </div>
+                    <MenuItem
+                      onClick={!disableDueToLackOfGroupAccess ?
+                        handleClick(onClickClone, page) : null}
+                      disabled={disableDueToLackOfGroupAccess}
+                    >
+                      <FormattedMessage id="app.clone" />
+                    </MenuItem>
+                    {renderDeleteItem()}
+                    {changePublishStatus}
+                    <MenuItem onClick={handleClickPreview(onClickPreview, page)}>
+                      <FormattedMessage id="app.preview" />
+                    </MenuItem>
+                    {viewPublishedPage}
+                  </DropdownKebab>
+                </div>
+
+              )
+            }
           </td>
         </tr >
       );
@@ -222,6 +238,7 @@ PageTreeCompact.propTypes = {
   loadOnPageSelect: PropTypes.bool,
   className: PropTypes.string,
   myGroupIds: PropTypes.arrayOf(PropTypes.string),
+  virtualRootOn: PropTypes.bool,
 };
 
 PageTreeCompact.defaultProps = {
@@ -235,6 +252,7 @@ PageTreeCompact.defaultProps = {
   onRowClick: () => {},
   className: '',
   myGroupIds: [],
+  virtualRootOn: false,
 };
 
 export default PageTreeCompact;
diff --git a/src/ui/pages/common/PageTreeContainer.js b/src/ui/pages/common/PageTreeContainer.js
@@ -29,7 +29,7 @@ import {
 import { setColumnOrder } from 'state/table-column-order/actions';
 import { getColumnOrder } from 'state/table-column-order/selectors';
 
-import { getPageTreePages, getSearchPages } from 'state/pages/selectors';
+import { getIsVirtualRootOn, getPageTreePages, getSearchPages } from 'state/pages/selectors';
 import { PAGE_INIT_VALUES } from 'ui/pages/common/const';
 import { setAppTourLastStep } from 'state/app-tour/actions';
 import { getDomain } from '@entando/apimanager';
@@ -47,6 +47,7 @@ export const mapStateToProps = state => ({
   columnOrder: getColumnOrder(state, 'pageList'),
   pageSearchColumnOrder: getColumnOrder(state, 'pageSearch'),
   myGroupIds: getMyGroupsList(state),
+  virtualRootOn: getIsVirtualRootOn(state),
 });
 
 export const mapDispatchToProps = (dispatch, ownProps) => ({

diff --git a/src/ui/pages/config/ContentPages.js b/src/ui/pages/config/ContentPages.js
@@ -106,6 +106,7 @@ class ContentPages extends Component {
     const {
       loading, onExpandPage, pages, intl, searchPages,
       onClear, loadOnPageSelect, onLoadPage, myGroupIds,
+      virtualRootOn,
     } = this.props;
     const { expanded } = this.state;
 
@@ -174,6 +175,7 @@ class ContentPages extends Component {
               {...this.props}
               className={loadOnPageSelect ? 'ContentPages__pagetree--loadable' : ''}
               pages={pages}
+              virtualRootOn={virtualRootOn}
               selectedPage={selectedPage}
               onExpandPage={onExpandPage}
               onRowClick={this.handlePageSelect}
@@ -206,6 +208,7 @@ ContentPages.propTypes = {
   onLoadPage: PropTypes.func,
   onSearchPageChange: PropTypes.func.isRequired,
   myGroupIds: PropTypes.arrayOf(PropTypes.string),
+  virtualRootOn: PropTypes.bool,
 };
 ContentPages.defaultProps = {
   onWillMount: () => {},
@@ -221,6 +224,7 @@ ContentPages.defaultProps = {
   loadOnPageSelect: true,
   onLoadPage: () => {},
   myGroupIds: [],
+  virtualRootOn: false,
 };
 
 export default injectIntl(ContentPages);