FEATURE: Mark inherited disabled nodes in document and content tree

Classes/Fusion/Helper/NodeInfoHelper.php

@@ -103,6 +103,7 @@ public function renderNodeWithMinimalPropertiesAndChildrenInformation(
             // ensure _isHidden is sent to hidden nodes are correctly shown in the tree.
             // TODO: we should export this correctly named, but that needs changes throughout the JS code as well.
             '_hidden' => $node->tags->withoutInherited()->contain(SubtreeTag::disabled()),
+            '_hiddenByAncestors' => $node->tags->onlyInherited()->contain(SubtreeTag::disabled()),
             '_hiddenInIndex' => $node->getProperty('hiddenInMenu'),
             '_hasTimeableNodeVisibility' =>
                 $node->getProperty('enableAfterDateTime') instanceof \DateTimeInterface
@@ -145,6 +146,14 @@ public function renderNodeWithPropertiesAndChildrenInformation(
         $nodeInfo['properties'] = $this->nodePropertyConverterService->getPropertiesArray($node);
         $nodeInfo['tags'] = $node->tags;
         $nodeInfo['isFullyLoaded'] = true;
+        $nodeInfo['properties'] = array_merge($nodeInfo['properties'], [
+            // TODO: we should export this correctly named, but that needs changes throughout the JS code as well.
+            '_hidden' => $node->tags->withoutInherited()->contain(SubtreeTag::disabled()),
+            '_hiddenByAncestors' => $node->tags->onlyInherited()->contain(SubtreeTag::disabled()),
+            '_hasTimeableNodeVisibility' =>
+                $node->getProperty('enableAfterDateTime') instanceof \DateTimeInterface
+                || $node->getProperty('disableAfterDateTime') instanceof \DateTimeInterface,
+        ]);
 
         if ($actionRequest !== null) {
             $nodeInfo = array_merge($nodeInfo, $this->getUriInformation($node, $actionRequest));
@@ -217,7 +226,6 @@ protected function getBasicNodeInformation(Node $node): array
      */
     protected function renderChildrenInformation(Node $node, string $nodeTypeFilterString): array
     {
-        $contentRepository = $this->contentRepositoryRegistry->get($node->contentRepositoryId);
         $subgraph = $this->contentRepositoryRegistry->subgraphForNode($node);
 
         $documentChildNodes = $subgraph->findChildNodes(
@@ -235,7 +243,6 @@ protected function renderChildrenInformation(Node $node, string $nodeTypeFilterS
 
         $infos = [];
         foreach ($childNodes as $childNode) {
-            $contentRepository = $this->contentRepositoryRegistry->get($childNode->contentRepositoryId);
             $infos[] = [
                 'contextPath' => NodeAddress::fromNode($childNode)->toJson(),
                 'nodeType' => $childNode->nodeTypeName->value
@@ -329,9 +336,6 @@ public function defaultNodesForBackend(
         Node $documentNode,
         ActionRequest $actionRequest
     ): array {
-        // does not support multiple CRs here yet
-        $contentRepository = $this->contentRepositoryRegistry->get($site->contentRepositoryId);
-
         return [
             (NodeAddress::fromNode($site)->toJson())
             => $this->renderNodeWithPropertiesAndChildrenInformation($site, $actionRequest),
@@ -404,7 +408,6 @@ protected function buildContentChildNodeFilterString(): string
 
     public function serializedNodeAddress(Node $node): string
     {
-        $contentRepository = $this->contentRepositoryRegistry->get($node->contentRepositoryId);
         return NodeAddress::fromNode($node)->toJson();
     }
 

packages/neos-ui/src/Containers/LeftSideBar/NodeTree/Node/index.js

@@ -169,6 +169,7 @@ export default class Node extends PureComponent {
         const {node} = this.props;
 
         const isDisabled = node?.properties?._hidden;
+        const isDisabledByAncestors = node?.properties?._hiddenByAncestors;
         const hasTimeableNodeVisibility = node?.properties?._hasTimeableNodeVisibility;
 
         if (hasTimeableNodeVisibility) {
@@ -192,6 +193,16 @@ export default class Node extends PureComponent {
             );
         }
 
+        if (isDisabledByAncestors) {
+            return (
+                <span className="fa-layers fa-fw">
+                    <Icon icon={this.getIcon()} />
+                    <Icon icon="circle" color="contrastDark" transform="shrink-3 down-6 right-4" />
+                    <Icon icon="times" transform="shrink-7 down-6 right-4" />
+                </span>
+            );
+        }
+
         return null;
     }
 

packages/react-ui-components/src/Icon/__snapshots__/icon.spec.tsx.snap

@@ -10,6 +10,7 @@ exports[`<Icon/> should render correctly. 1`] = `
     Object {
       "icon": "iconClassName",
       "icon--big": "bigClassName",
+      "icon--color-contrastDark": "color-contrastDarkClassName",
       "icon--color-error": "color-errorClassName",
       "icon--color-primaryBlue": "color-primaryBlueClassName",
       "icon--color-warn": "color-warnClassName",

packages/react-ui-components/src/Icon/fontAwesomeIcon.spec.tsx

@@ -21,6 +21,7 @@ describe('<FontAwesomeIcon/>', () => {
             'icon--big': 'bigClassName',
             'icon--color-error': 'color-errorClassName',
             'icon--color-primaryBlue': 'color-primaryBlueClassName',
+            'icon--color-contrastDark': 'color-contrastDarkClassName',
             'icon--color-warn': 'color-warnClassName',
             'icon--paddedLeft': 'paddedLeftClassName',
             'icon--paddedRight': 'paddedRightClassName',

packages/react-ui-components/src/Icon/fontAwesomeIcon.tsx

@@ -22,7 +22,8 @@ class FontAwesomeIcon extends PureComponent<IconProps> {
                 [theme!['icon--paddedRight']]: padded === 'right',
                 [theme!['icon--color-warn']]: color === 'warn',
                 [theme!['icon--color-error']]: color === 'error',
-                [theme!['icon--color-primaryBlue']]: color === 'primaryBlue'
+                [theme!['icon--color-primaryBlue']]: color === 'primaryBlue',
+                [theme!['icon--color-contrastDark']]: color === 'contrastDark'
             }
         );
 

packages/react-ui-components/src/Icon/icon.spec.tsx

@@ -13,6 +13,7 @@ describe('<Icon/>', () => {
             'icon--big': 'bigClassName',
             'icon--color-error': 'color-errorClassName',
             'icon--color-primaryBlue': 'color-primaryBlueClassName',
+            'icon--color-contrastDark': 'color-contrastDarkClassName',
             'icon--color-warn': 'color-warnClassName',
             'icon--paddedLeft': 'paddedLeftClassName',
             'icon--paddedRight': 'paddedRightClassName',

packages/react-ui-components/src/Icon/icon.tsx

@@ -7,7 +7,7 @@ import {defaultProps} from './iconDefaultProps';
 
 type IconSize = 'xs' | 'sm' | 'lg' | '2x' | '3x';
 type IconPadding = 'none' | 'left' | 'right';
-type IconColor = 'default' | 'warn' | 'error' | 'primaryBlue';
+type IconColor = 'default' | 'warn' | 'error' | 'primaryBlue' | 'contrastDark';
 
 export interface IconTheme {
     readonly icon: string;
@@ -22,6 +22,7 @@ export interface IconTheme {
     readonly 'icon--color-warn': string;
     readonly 'icon--color-error': string;
     readonly 'icon--color-primaryBlue': string;
+    readonly 'icon--color-contrastDark': string;
 }
 
 export interface IconProps extends Omit<FontAwesomeIconProps, 'icon' | 'ref'> {

packages/react-ui-components/src/Icon/resourceIcon.tsx

@@ -39,6 +39,7 @@ class ResourceIcon extends PureComponent<ResourceIconProps> {
                 [theme!['icon--color-warn']]: color === 'warn',
                 [theme!['icon--color-error']]: color === 'error',
                 [theme!['icon--color-primaryBlue']]: color === 'primaryBlue',
+                [theme!['icon--color-contrastDark']]: color === 'contrastDark',
                 [theme!['icon--huge']]: size === '3x',
                 [theme!['icon--large']]: size === '2x',
                 [theme!['icon--big']]: size === 'lg',

packages/react-ui-components/src/Icon/style.module.css

@@ -26,6 +26,10 @@
     color: var(--colors-PrimaryBlue);
 }
 
+.icon--color-contrastDark {
+    color: var(--colors-ContrastDark);
+}
+
 .icon--huge {
     & svg {
         height: 3em;