WIP: Isolate Drawer menu from the rest of the UI

.eslintrc.js

@@ -30,6 +30,9 @@ module.exports = {
         'default-case': 'off',
         'no-mixed-operators': 'off',
         'no-negated-condition': 'off',
-        'complexity': 'off'
+        'complexity': 'off',
+
+        // This rule would prevent us from implementing meaningful value objects
+        'no-useless-constructor': 'off'
     },
 }

Classes/Controller/BackendController.php

@@ -27,13 +27,13 @@
 use Neos\Neos\FrontendRouting\NodeAddressFactory;
 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;
 
 /**
@@ -48,12 +48,6 @@ class BackendController extends ActionController
 
     protected $defaultViewObjectName = ApplicationView::class;
 
-    /**
-     * @Flow\Inject
-     * @var UserService
-     */
-    protected $userService;
-
     /**
      * @Flow\Inject
      * @var DomainRepository
@@ -114,6 +108,12 @@ class BackendController extends ActionController
      */
     protected $menuProvider;
 
+    /**
+     * @Flow\Inject
+     * @var UserProviderInterface
+     */
+    protected $userProvider;
+
     /**
      * @Flow\Inject
      * @var InitialStateProviderInterface
@@ -139,11 +139,6 @@ public function indexAction(string $node = null)
 
         $nodeAddress = $node !== null ? NodeAddressFactory::create($contentRepository)->createFromUriString($node) : null;
         unset($node);
-        $user = $this->userService->getBackendUser();
-
-        if ($user === null) {
-            $this->redirectToUri($this->uriBuilder->uriFor('index', [], 'Login', 'Neos.Neos'));
-        }
 
         $currentAccount = $this->securityContext->getAccount();
         assert($currentAccount !== null);
@@ -185,6 +180,11 @@ public function indexAction(string $node = null)
             $node = $subgraph->findNodeById($nodeAddress->nodeAggregateId);
         }
 
+        $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' =>
@@ -206,12 +206,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/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),
@@ -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(),
+            ],
+        ];
+    }
+}

Classes/Presentation/ApplicationView.php

@@ -16,6 +16,8 @@
 
 use Neos\Flow\Annotations as Flow;
 use Neos\Flow\Core\Bootstrap;
+use Neos\Flow\I18n\Cldr\Reader\PluralsReader;
+use Neos\Flow\I18n\Locale;
 use Neos\Flow\Mvc\View\AbstractView;
 use Neos\Flow\ResourceManagement\ResourceManager;
 use Neos\Flow\Security\Context as SecurityContext;
@@ -49,6 +51,9 @@ final class ApplicationView extends AbstractView
     #[Flow\Inject]
     protected Bootstrap $bootstrap;
 
+    #[Flow\Inject]
+    protected PluralsReader $pluralsReader;
+
     /**
      * This contains the supported options, their default values, descriptions and types.
      *
@@ -113,6 +118,15 @@ private function renderHead(): string
             )
         );
 
+        $locale = new Locale($this->userService->getInterfaceLanguage());
+        // @TODO: All endpoints should be treated this way and be isolated from
+        //        initial data.
+        $result .= sprintf(
+            '<link id="neos-ui-uri:/neos/xliff.json" rel="prefetch" href="%s" data-locale="%s" data-locale-plural-rules="%s">',
+            $this->variables['initialData']['configuration']['endpoints']['translations'],
+            (string) $locale,
+            implode(',', $this->pluralsReader->getPluralForms($locale)),
+        );
         $result .= sprintf(
             '<script id="initialData" type="application/json">%s</script>',
             json_encode($this->variables['initialData']),

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
 

package.json

@@ -24,6 +24,7 @@
     "@neos-project/eslint-config-neos": "^2.6.1",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.44.0",
+    "cross-fetch": "^4.0.0",
     "editorconfig-checker": "^4.0.2",
     "esbuild": "~0.17.0",
     "eslint": "^8.27.0",

packages/framework-observable-react/README.md

@@ -0,0 +1,120 @@
+# @neos-project/framework-observable-react
+
+> React bindings for @neos-project/framework-observable
+
+This package provides a set of React [hooks](https://react.dev/reference/react/hooks) to let components interact with `Observable`s.
+
+## API
+
+### `useLatestValueFrom`
+
+```typescript
+// Without default value:
+function useLatestValueFrom<V>(observable$: Observable<V>): null | V;
+
+// With default value:
+function useLatestValueFrom<V, D>(
+  observable$: Observable<V>,
+  defaultValue: D
+): D | V;
+```
+
+`useLatestValueFrom` is a way to bind a react component the latest value emitted from an `Observable`.
+
+#### Parameters
+
+| Name                      | Description                                                                                    |
+| ------------------------- | ---------------------------------------------------------------------------------------------- |
+| `observable$`             | The `Observable` to subscribe to                                                               |
+| `defaultValue` (optional) | The value to default for when `observable$` hasn't emitted any values yet (defaults to `null`) |
+
+#### Return Value
+
+This hook returns the latest value from the provided `observable$`. If no value has been emitted from the observable yet, it returns `defaultValue` which itself defaults to `null`.
+
+#### Example
+
+This component will display the amount of seconds that have passed since it was first mounted:
+
+```typescript
+const clock$ = createObservable((next) => {
+  let i = 1;
+  const interval = setInterval(() => {
+    next(i++);
+  }, 1000);
+
+  return () => clearInterval(interval);
+});
+
+const MyComponent = () => {
+  const seconds = useLatestValueFrom(clock$, 0);
+
+  return <pre>{seconds} seconds passed</pre>;
+};
+```
+
+You can combine this with `React.useMemo`, if you wish to create an ad-hoc observable:
+
+```typescript
+const MyComponent = (props) => {
+  const beats = useLatestValueFrom(
+    React.useMemo(
+      () =>
+        createObservable((next) => {
+          let i = 1;
+          const interval = setInterval(() => {
+            next(i++);
+          }, props.millisecondsPerBeat);
+
+          return () => clearInterval(interval);
+        }),
+      [props.millisecondsPerBeat]
+    ),
+    0
+  );
+
+  return <pre>{beats} beats passed</pre>;
+};
+```
+
+### `useLatestState`
+
+```typescript
+function useLatestState<V>(state$: State<V>): V;
+```
+
+`useLatestState` subscribes to a given state observable and keeps track of its latest value.
+
+#### Parameters
+
+| Name     | Description                             |
+| -------- | --------------------------------------- |
+| `state$` | The `State` observable to keep track of |
+
+#### Return Value
+
+This hook returns the latest value from the given `State` observable. Initially it contains the current value of the `State` at the moment the component was first mounted.
+
+#### Example
+
+```typescript
+const count$ = createState(0);
+
+const MyComponent = () => {
+  const count = useLatestState(count$);
+  const handleInc = React.useCallback(() => {
+    count$.update((count) => count + 1);
+  }, []);
+  const handleDec = React.useCallback(() => {
+    count$.update((count) => count - 1);
+  }, []);
+
+  return (
+    <div>
+      <pre>Count {count}</pre>
+      <button onClick={handleInc}>+</button>
+      <button onClick={handleDec}>-</button>
+    </div>
+  );
+};
+```