WIP: Isolate Drawer menu from the rest of the UI

Classes/Controller/BackendController.php

@@ -21,16 +21,17 @@
 use Neos\Neos\Domain\Repository\DomainRepository;
 use Neos\Neos\Domain\Repository\SiteRepository;
 use Neos\Neos\Domain\Service\NodeTypeNameFactory;
+use Neos\Neos\Domain\Service\UserService;
 use Neos\Neos\Domain\Service\WorkspaceService;
 use Neos\Neos\FrontendRouting\NodeUriBuilderFactory;
 use Neos\Neos\FrontendRouting\SiteDetection\SiteDetectionResult;
-use Neos\Neos\Service\UserService;
 use Neos\Neos\Ui\Domain\InitialData\ConfigurationProviderInterface;
 use Neos\Neos\Ui\Domain\InitialData\FrontendConfigurationProviderInterface;
 use Neos\Neos\Ui\Domain\InitialData\InitialStateProviderInterface;
 use Neos\Neos\Ui\Domain\InitialData\MenuProviderInterface;
 use Neos\Neos\Ui\Domain\InitialData\NodeTypeGroupsAndRolesProviderInterface;
 use Neos\Neos\Ui\Domain\InitialData\RoutesProviderInterface;
+use Neos\Neos\Ui\Domain\InitialData\UserProviderInterface;
 use Neos\Neos\Ui\Presentation\ApplicationView;
 
 /**
@@ -45,12 +46,6 @@ class BackendController extends ActionController
 
     protected $defaultViewObjectName = ApplicationView::class;
 
-    /**
-     * @Flow\Inject
-     * @var UserService
-     */
-    protected $userService;
-
     /**
      * @Flow\Inject
      * @var DomainRepository
@@ -105,6 +100,18 @@ class BackendController extends ActionController
      */
     protected $menuProvider;
 
+    /**
+     * @Flow\Inject
+     * @var UserProviderInterface
+     */
+    protected $userProvider;
+
+    /**
+     * @Flow\Inject
+     * @var UserService
+     */
+    protected $userService;
+
     /**
      * @Flow\Inject
      * @var InitialStateProviderInterface
@@ -135,7 +142,7 @@ public function indexAction(string $node = null)
         $contentRepository = $this->contentRepositoryRegistry->get($siteDetectionResult->contentRepositoryId);
 
         $nodeAddress = $node !== null ? NodeAddress::fromJsonString($node) : null;
-        $user = $this->userService->getBackendUser();
+        $user = $this->userService->getCurrentUser();
 
         if ($user === null) {
             $this->redirectToUri($this->uriBuilder->uriFor('index', [], 'Login', 'Neos.Neos'));
@@ -175,6 +182,12 @@ public function indexAction(string $node = null)
             $node = $subgraph->findNodeById($nodeAddress->aggregateId);
         }
 
+        // todo duplicate user logic see above $this->userService->getBackendUser() is never null here ... pass the user instead to the method?
+        $user = $this->userProvider->getUser();
+        if (!$user) {
+            $this->redirectToUri($this->uriBuilder->uriFor('index', [], 'Login', 'Neos.Neos'));
+        }
+
         $this->view->setOption('title', 'Neos CMS');
         $this->view->assign('initialData', [
             'configuration' =>
@@ -196,12 +209,12 @@ public function indexAction(string $node = null)
                 $this->menuProvider->getMenu(
                     actionRequest: $this->request,
                 ),
+            'user' => $user,
             'initialState' =>
                 $this->initialStateProvider->getInitialState(
                     actionRequest: $this->request,
                     documentNode: $node,
                     site: $siteNode,
-                    user: $user,
                 ),
         ]);
     }

Classes/Domain/InitialData/InitialStateProviderInterface.php

@@ -32,6 +32,5 @@ public function getInitialState(
         ActionRequest $actionRequest,
         ?Node $documentNode,
         ?Node $site,
-        User $user,
     ): array;
 }

Classes/Domain/InitialData/MenuProviderInterface.php

@@ -25,7 +25,7 @@
 interface MenuProviderInterface
 {
     /**
-     * @return array<int,array{label:string,icon:string,uri:string,target:string,children:array<int,array{icon:string,label:string,uri:string,position?:string,isActive:bool,target:string,skipI18n:bool}>}>
+     * @return array<int,array{label:string,icon:string,uri:string,children:array<int,array{icon:string,label:string,uri:string,position?:string,isActive:bool,skipI18n:bool}>}>
      */
     public function getMenu(ActionRequest $actionRequest): array;
 }

Classes/Domain/InitialData/UserProviderInterface.php

@@ -0,0 +1,29 @@
+<?php
+
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+
+declare(strict_types=1);
+
+namespace Neos\Neos\Ui\Domain\InitialData;
+
+/**
+ * Retrieves all data needed to render the user panel at the bottom
+ * of the drawer menu
+ *
+ * @internal
+ */
+interface UserProviderInterface
+{
+    /**
+     * @return array{name:array{title:string,firstName:string,middleName:string,lastName:string,otherName:string,fullName:string},preferences:array{interfaceLanguage:null|string}}
+     */
+    public function getUser(): ?array;
+}

Classes/Infrastructure/Configuration/InitialStateProvider.php

@@ -43,15 +43,13 @@ public function getInitialState(
         ActionRequest $actionRequest,
         ?Node $documentNode,
         ?Node $site,
-        User $user,
     ): array {
         return $this->configurationRenderingService->computeConfiguration(
             $this->initialStateBeforeProcessing,
             [
                 'request' => $actionRequest,
                 'documentNode' => $documentNode,
                 'site' => $site,
-                'user' => $user,
                 'clipboardNodes' => $this->clipboard->getSerializedNodeAddresses(),
                 'clipboardMode' => $this->clipboard->getMode(),
             ]

Classes/Infrastructure/Neos/MenuProvider.php

@@ -55,7 +55,6 @@ public function getMenu(ActionRequest $actionRequest): array
             $result[$moduleName]['label'] = $module['label'];
             $result[$moduleName]['icon'] = $module['icon'];
             $result[$moduleName]['uri'] = $module['uri'];
-            $result[$moduleName]['target'] = 'Window';
 
             $result[$moduleName]['children'] = match ($module['module']) {
                 'content' => $this->buildChildrenForSites($controllerContext),
@@ -67,7 +66,7 @@ public function getMenu(ActionRequest $actionRequest): array
     }
 
     /**
-     * @return array<int,array{icon:string,label:string,uri:string,isActive:bool,target:string,skipI18n:bool}>
+     * @return array<int,array{icon:string,label:string,uri:string,isActive:bool,skipI18n:bool}>
      */
     private function buildChildrenForSites(ControllerContext $controllerContext): array
     {
@@ -89,7 +88,6 @@ private function buildChildrenForSites(ControllerContext $controllerContext): ar
             $result[$index]['icon'] = 'globe';
             $result[$index]['label'] = $name;
             $result[$index]['uri'] = $uri;
-            $result[$index]['target'] = 'Window';
             $result[$index]['isActive'] = $active;
             $result[$index]['skipI18n'] = true;
         }
@@ -114,7 +112,6 @@ private function buildChildrenForBackendModule(array $module): array
             $result[$submoduleName]['uri'] = $submodule['uri'];
             $result[$submoduleName]['position'] = $submodule['position'];
             $result[$submoduleName]['isActive'] = true;
-            $result[$submoduleName]['target'] = 'Window';
             $result[$submoduleName]['skipI18n'] = false;
         }
 

Classes/Infrastructure/Neos/UserProvider.php

@@ -0,0 +1,55 @@
+<?php
+
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+
+declare(strict_types=1);
+
+namespace Neos\Neos\Ui\Infrastructure\Neos;
+
+use Neos\Flow\Annotations as Flow;
+use Neos\Neos\Service\UserService;
+use Neos\Neos\Ui\Domain\InitialData\UserProviderInterface;
+
+/**
+ * @internal
+ */
+#[Flow\Scope("singleton")]
+final class UserProvider implements UserProviderInterface
+{
+    #[Flow\Inject]
+    protected UserService $userService;
+
+    /**
+     * @return array{name:array{title:string,firstName:string,middleName:string,lastName:string,otherName:string,fullName:string},preferences:array{interfaceLanguage:null|string}}
+     */
+    public function getUser(): ?array
+    {
+        $user = $this->userService->getBackendUser();
+        if ($user === null) {
+            return null;
+        }
+
+        return [
+            'name' => [
+                'title' => $user->getName()->getTitle(),
+                'firstName' => $user->getName()->getFirstName(),
+                'middleName' => $user->getName()->getMiddleName(),
+                'lastName' => $user->getName()->getLastName(),
+                'otherName' => $user->getName()->getOtherName(),
+                'fullName' => $user->getName()->getFullName(),
+            ],
+            'preferences' => [
+                'interfaceLanguage' => $user->getPreferences()
+                    ->getInterfaceLanguage(),
+            ],
+        ];
+    }
+}

Configuration/Objects.yaml

@@ -16,6 +16,9 @@ Neos\Neos\Ui\Domain\InitialData\InitialStateProviderInterface:
 Neos\Neos\Ui\Domain\InitialData\MenuProviderInterface:
   className: Neos\Neos\Ui\Infrastructure\Neos\MenuProvider
 
+Neos\Neos\Ui\Domain\InitialData\UserProviderInterface:
+  className: Neos\Neos\Ui\Infrastructure\Neos\UserProvider
+
 Neos\Neos\Ui\Domain\InitialData\NodeTypeGroupsAndRolesProviderInterface:
   className: Neos\Neos\Ui\Infrastructure\ContentRepository\NodeTypeGroupsAndRolesProvider
 

packages/neos-ui-backend-connector/src/index.ts

@@ -21,7 +21,7 @@ export const define = (parent: {[propName: string]: any}) => (name: string, valu
 //
 // Initializes the Neos API
 //
-export const initializeJsAPI = (parent: {[propName: string]: any}, {alias = 'neos', systemEnv = 'Development', routes}: {alias: string, systemEnv: string, routes: Routes}) => {
+export const initializeJsAPI = (parent: {[propName: string]: any}, {alias = 'neos', systemEnv = 'Development', routes}: {alias?: string, systemEnv: string, routes: Routes}) => {
     if (parent[alias] !== undefined) {
         throw new Error(`Could not initialize Neos API, because ${alias} is already defined.`);
     }

packages/neos-ui-error/src/container/ErrorBoundary/terminateDueToFatalInitializationError.ts

@@ -1,7 +1,7 @@
 import logoSvg from '@neos-project/react-ui-components/src/Logo/resource/logo.svg';
 import styles from './style.module.css';
 
-export function terminateDueToFatalInitializationError(reason: string): void {
+export function terminateDueToFatalInitializationError(reason: string): never {
     if (!document.body) {
         throw new Error(reason);
     }

packages/neos-ui/package.json

@@ -17,6 +17,8 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@friendsofreactjs/react-css-themr": "~4.2.0",
+    "@neos-project/framework-observable": "workspace:*",
+    "@neos-project/framework-observable-react": "workspace:*",
     "@neos-project/neos-ts-interfaces": "workspace:*",
     "@neos-project/neos-ui-backend-connector": "workspace:*",
     "@neos-project/neos-ui-ckeditor5-bindings": "workspace:*",

packages/neos-ui/src/Containers/Drawer/Drawer.tsx

@@ -0,0 +1,121 @@
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+import React from 'react';
+import mergeClassNames from 'classnames';
+
+import {neos} from '@neos-project/neos-ui-decorators';
+import {SynchronousRegistry} from '@neos-project/neos-ui-extensibility';
+import {createState} from '@neos-project/framework-observable';
+import {useLatestState} from '@neos-project/framework-observable-react';
+
+import MenuItemGroup from './MenuItemGroup/index';
+import style from './style.module.css';
+import {THRESHOLD_MOUSE_LEAVE} from './constants';
+
+const withNeosGlobals = neos(globalRegistry => ({
+    containerRegistry: globalRegistry.get('containers')
+}));
+
+export const drawer$ = createState({
+    isHidden: true,
+    collapsedMenuGroups: [] as string[]
+});
+
+export function toggleDrawer() {
+    drawer$.update((state) => ({
+        ...state,
+        isHidden: !state.isHidden
+    }));
+}
+
+function hideDrawer() {
+    drawer$.update((state) => ({
+        ...state,
+        isHidden: true
+    }));
+}
+
+function toggleMenuGroup(menuGroupId: string) {
+    drawer$.update((state) => ({
+        ...state,
+        collapsedMenuGroups: state.collapsedMenuGroups.includes(menuGroupId)
+            ? state.collapsedMenuGroups.filter((m) => m !== menuGroupId)
+            : [...state.collapsedMenuGroups, menuGroupId]
+    }));
+}
+
+const StatelessDrawer: React.FC<{
+    containerRegistry: SynchronousRegistry<any>;
+
+    menuData: {
+        icon?: string;
+        label: string;
+        uri: string;
+        target?: string;
+
+        children: {
+            icon?: string;
+            label: string;
+            uri?: string;
+            isActive: boolean;
+            skipI18n: boolean;
+        }[];
+    }[];
+}> = (props) => {
+    const {isHidden, collapsedMenuGroups} = useLatestState(drawer$);
+    const mouseLeaveTimeoutRef = React.useRef<null | ReturnType<typeof setTimeout>>(null);
+    const handleMouseEnter = React.useCallback(() => {
+        if (mouseLeaveTimeoutRef.current) {
+            clearTimeout(mouseLeaveTimeoutRef.current);
+            mouseLeaveTimeoutRef.current = null;
+        }
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+        if (!mouseLeaveTimeoutRef.current) {
+            mouseLeaveTimeoutRef.current = setTimeout(() => {
+                hideDrawer();
+                mouseLeaveTimeoutRef.current = null;
+            }, THRESHOLD_MOUSE_LEAVE);
+        }
+    }, []);
+    const {menuData, containerRegistry} = props;
+    const classNames = mergeClassNames({
+        [style.drawer]: true,
+        [style['drawer--isHidden']]: isHidden
+    });
+
+    const BottomComponents = containerRegistry.getChildren('Drawer/Bottom');
+
+    return (
+        <div
+            className={classNames}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            aria-hidden={isHidden ? 'true' : 'false'}
+            >
+            <div className={style.drawer__menuItemGroupsWrapper}>
+                {Object.entries(menuData).map(([menuGroup, menuGroupConfiguration]) => (
+                    <MenuItemGroup
+                        key={menuGroup}
+                        id={menuGroup}
+                        collapsed={collapsedMenuGroups.includes(menuGroup)}
+                        onMenuGroupToggle={toggleMenuGroup}
+                        {...menuGroupConfiguration}
+                        />
+                ))}
+            </div>
+            <div className={style.drawer__bottom}>
+                {BottomComponents.map((Item, key) => <Item key={key}/>)}
+            </div>
+        </div>
+    );
+}
+
+export const Drawer = withNeosGlobals(StatelessDrawer as any);