FEATURE: Configuration UI

Neos.Neos/Classes/Controller/Module/Administration/ConfigurationController.php

@@ -18,6 +18,7 @@
 use Neos\Flow\Configuration\ConfigurationManager;
 use Neos\Flow\Configuration\ConfigurationSchemaValidator;
 use Neos\Flow\Configuration\Exception\SchemaValidationException;
+use Neos\Fusion\View\FusionView;
 use Neos\Neos\Controller\Module\ModuleTranslationTrait;
 use Neos\Utility\SchemaGenerator;
 use Neos\Neos\Controller\Module\AbstractModuleController;
@@ -30,6 +31,8 @@ class ConfigurationController extends AbstractModuleController
 {
     use ModuleTranslationTrait;
 
+    protected $defaultViewObjectName = FusionView::class;
+
     /**
      * @Flow\Inject
      * @var ConfigurationManager

Neos.Neos/Classes/ViewHelpers/Backend/ColorOfStringViewHelper.php

@@ -18,6 +18,7 @@
 
 /**
  * Generates a color code for a given string
+ * @deprecated will be removed in Neos 10.0
  */
 class ColorOfStringViewHelper extends AbstractViewHelper
 {

Neos.Neos/Classes/ViewHelpers/Backend/ConfigurationTreeViewHelper.php

@@ -20,6 +20,7 @@
  * Render HTML markup for the full configuration tree in the Neos Administration -> Configuration Module.
  *
  * For performance reasons, this is done inside a ViewHelper instead of Fluid itself.
+ * @deprecated will be removed in Neos 10.0
  */
 class ConfigurationTreeViewHelper extends AbstractViewHelper
 {

Neos.Neos/Configuration/Settings.Configuration.Ui.yaml

@@ -0,0 +1,27 @@
+Neos:
+  Flow:
+    mvc:
+      flashMessages:
+        containers:
+          # FIXME: This is a temporary solution to make the Configuration.UI flash messages work with HTMX.
+          # The 'htmx' request pattern should be provided by a common package for all modules like Neos.Neos.
+          'Neos.Workspace.Ui:httpHeaderFlashMessages':
+            requestPatterns:
+              'htmx':
+                options:
+                  matchingPackageKeys:
+                    'Neos.Neos': true
+
+  Neos:
+    modules:
+      administration:
+        submodules:
+          configuration:
+            additionalResources:
+              # FIXME: This is a temporary solution to make the Configuration.UI work with HTMX.
+              # The common HTMX related resources should be provided by a common package for all modules like Neos.Neos.
+              javaScripts:
+                'HtmxLibrary': 'resource://Neos.Workspace.Ui/Public/Scripts/htmx.min.js'
+                'Module': 'resource://Neos.Workspace.Ui/Public/Scripts/Module.js'
+              styleSheets:
+                'Module': 'resource://Neos.Neos/Public/Styles/Module.Configuration.Ui.css'

Neos.Neos/Configuration/Views.yaml

@@ -4,3 +4,8 @@
   options:
     fusionPathPatterns:
       - 'resource://Neos.Neos/Private/Fusion/Backend'
+
+- requestFilter: 'isPackage("Neos.Neos") && isController("Module\Administration\Configuration")'
+  options:
+    fusionPathPatterns:
+      - 'resource://Neos.Neos/Private/Fusion/Backend'

Neos.Neos/Resources/Private/Fusion/Backend/Configuration.Ui/Actions/Index.fusion

@@ -0,0 +1,54 @@
+Neos.Neos.Module.Administration.ConfigurationController.index = Neos.Fusion:Component {
+  /// array
+  flashMessages = ${flashMessages}
+
+  /// Neos\Flow\I18n\EelHelper\TranslationParameterToken
+  i18n = ${I18n.id('').source('Main').package('Neos.Workspace.Ui')}
+
+  /// string
+  type = ${type}
+
+  /// string[]
+  availableConfigurationTypes = ${availableConfigurationTypes}
+
+  // array
+  configuration = ${configuration}
+
+  // array
+  validationResult = ${validationResult}
+
+  renderer = afx`
+    <Neos.Workspace.Ui:Component.ModuleWrapper
+      flashMessages={props.flashMessages}
+    >
+      <main class="neos-content neos-container-fluid">
+        <div class="neos-row-fluid">
+          <Neos.Neos:Common.SubNavigation>
+            <Neos.Fusion:Loop items={props.availableConfigurationTypes} @if={request.format != 'htmx'}>
+              <Neos.Neos:Component.LinkButton
+                label={item}
+                isActive={item == props.type ? 'page' : null}
+              >
+                <Neos.Fusion:ActionUri
+                  @path="attributes.href"
+                  controller="Module\\Administration\\Configuration"
+                  action="index"
+                  format="html"
+                  arguments.type={item}
+                />
+              </Neos.Neos:Component.LinkButton>
+            </Neos.Fusion:Loop>
+          </Neos.Neos:Common.SubNavigation>
+          <Neos.Neos:Common.Container>
+            <Neos.Configuration.Ui:Component.Tabs.Caches
+              configuration={props.configuration}
+              @if={props.type == 'Caches'}
+            />
+          </Neos.Neos:Common.Container>
+        </div>
+      </main>
+      <Neos.Workspace.Ui:Component.Footer>
+      </Neos.Workspace.Ui:Component.Footer>
+    </Neos.Workspace.Ui:Component.ModuleWrapper>
+  `
+}

Neos.Neos/Resources/Private/Fusion/Backend/Configuration.Ui/Common/Container.fusion

@@ -0,0 +1,10 @@
+prototype(Neos.Neos:Common.Container) < prototype(Neos.Fusion:Component) {
+  content = ''
+  id = ''
+
+  renderer = afx`
+    <div class="neos-py-2" id={props.id}>
+      {props.content}
+    </div>
+  `
+}

Neos.Neos/Resources/Private/Fusion/Backend/Configuration.Ui/Common/LinkButton.fusion

@@ -0,0 +1,47 @@
+prototype(Neos.Neos:Component.LinkButton) < prototype(Neos.Fusion:Component) {
+  /// string
+  title = ''
+  /// string
+  label = ''
+  /// string
+  href = ''
+  /// boolean
+  isDanger = false
+  /// boolean
+  isWarning = false
+  /// boolean
+  isPrimary = false
+  ///boolean
+  isSuccess = false
+  ///boolean
+  isActive = false
+  /// string
+  icon = ''
+  /// array<string,mixed>
+  attributes = Neos.Fusion:DataStructure
+
+  @private {
+    classNames = Neos.Fusion:DataStructure {
+      main = 'neos-button'
+      danger = ${props.isDanger && 'neos-button-danger'}
+      warning = ${props.isWarning && 'neos-button-warning'}
+      primarry = ${props.isPrimary && 'neos-button-primary'}
+      success = ${props.isSuccess && 'neos-button-success'}
+      active = ${props.isActive && 'neos-active'}
+    }
+  }
+
+  renderer = afx`
+    <a
+      type="button"
+      title={props.title}
+      class={private.classNames}
+      href={props.href}
+      aria-current={props.isActive ? 'page' : null}
+      {...props.attributes}
+    >
+      <Neos.Workspace.Ui:Component.Icon icon={props.icon} @if={props.icon}/>
+      {props.icon ? ' ' : ''}{props.label}
+    </a>
+  `
+}

Neos.Neos/Resources/Private/Fusion/Backend/Configuration.Ui/Common/SubNavigation.fusion

@@ -0,0 +1,9 @@
+prototype(Neos.Neos:Common.SubNavigation) < prototype(Neos.Fusion:Component) {
+  content = ''
+
+  renderer = afx`
+    <nav class="neos-flex-row">
+      {props.content}
+    </nav>
+  `
+}

Neos.Neos/Resources/Private/Fusion/Backend/Configuration.Ui/Common/Tree.fusion

@@ -0,0 +1,22 @@
+prototype(Neos.Neos:Component.Tree) < prototype(Neos.Fusion:Component) {
+  configuration = ${[]}
+
+  renderer = afx`
+    <ul class="neos-tree-root">
+      <Neos.Fusion:Loop items={props.configuration}>
+        <li class={['neos-tree-node', Type.isArray(item)? ' neos-tree-folder' : '']}>
+          <span class="node-tree-title">{itemKey}
+            <Neos.Fusion:Fragment @if.isString={!Type.isArray(item)}>{": "}</Neos.Fusion:Fragment>
+            <span @if.isArray={Type.isArray(item)}>{" "}({Array.length(item)})</span>
+          </span>
+          <Neos.Neos:Component.Tree
+            @if.isArray={Type.isArray(item)}
+            configuration={item}/>
+          <span @if.isString={!Type.isArray(item)} class={'value -is-' + Type.getType(item)}>
+            {Type.isBoolean(item) ? (item ? 'true' : 'false') : item}
+          </span>
+        </li>
+      </Neos.Fusion:Loop>
+    </ul>
+  `
+}

Neos.Neos/Resources/Private/Fusion/Backend/Configuration.Ui/Tabs/Caches/Caches.fusion

@@ -0,0 +1,11 @@
+prototype(Neos.Configuration.Ui:Component.Tabs.Caches) < prototype(Neos.Fusion:Component) {
+  configuration = ${{}}
+
+  renderer = afx`
+    <div class="neos-configuration-tab neos-configuration-tab--caches">
+      <Neos.Neos:Component.Tree
+          configuration={props.configuration}
+      />
+    </div>
+  `
+}

Neos.Neos/Resources/Private/Fusion/Backend/Views/Login.fusion → Neos.Neos/Resources/Private/Fusion/Backend/Login/Login.fusion

@@ -146,3 +146,10 @@ prototype(Neos.Neos:Component.Login.Form) < prototype(Neos.Fusion:Component) {
     </Neos.Fusion.Form:Form>
   `
 }
+
+Neos.Neos.LoginController.index = Neos.Neos:View.Login {
+  site = ${site}
+  styles = ${styles}
+  username = ${username}
+  flashMessages = ${flashMessages}
+}

Neos.Neos/Resources/Private/Fusion/Backend/Root.fusion

@@ -1,11 +1,6 @@
 include: resource://Neos.Fusion/Private/Fusion/Root.fusion
 include: resource://Neos.Fusion.Form/Private/Fusion/Root.fusion
 include: resource://Neos.Neos/Private/Fusion/SharedCoreComponents/*
-include: Views/*.fusion
-
-Neos.Neos.LoginController.index = Neos.Neos:View.Login {
-  site = ${site}
-  styles = ${styles}
-  username = ${username}
-  flashMessages = ${flashMessages}
-}
+include: resource://Neos.Neos/Private/Fusion/*
+include: resource://Neos.Workspace.Ui/Private/Fusion/*
+include: **/*

Neos.Neos/Resources/Private/Styles/Modules/_Modules.scss

@@ -1,8 +1,7 @@
 &.neos-module {
-  @import "Administration/Configuration";
   @import "Administration/Packages";
   @import "Administration/Sites";
-	@import "Administration/Users";
+  @import "Administration/Users";
   @import "Management/Workspaces";
   @include font;
 

Neos.Neos/Resources/Public/Styles/Module.Configuration.Ui.css

@@ -0,0 +1,70 @@
+.neos-flex-row {
+  display: flex;
+}
+
+.neos-py-1 {
+  padding-block: 1rem;
+}
+
+.neos-py-2 {
+  padding-block: 2rem;
+}
+
+.neos-module-administration-configuration {
+  .neos-configuration-tab {
+    > ul {
+      display: block;
+
+      ul {
+        padding-left: 1rem;
+      }
+
+      .neos-tree-node {
+        cursor: pointer;
+        height: auto;
+
+        &.neos-tree-folder .neos-tree-title {
+          user-select: none;
+        }
+
+        .neos-tree-icon {
+          display: none;
+        }
+
+        .neos-tree-title {
+          width: calc(100% - 24px);
+          height: auto;
+          white-space: normal;
+          text-align: left;
+          word-break: break-word;
+          word-wrap: break-word;
+        }
+      }
+    }
+
+    .key,
+    .value {
+      display: inline;
+    }
+
+    .value {
+      &.-is-boolean,
+      &.-is-NULL {
+        color: var(--warningText);
+      }
+
+      &.-is-integer,
+      &.-is-double {
+        color: var(--warningText);
+      }
+
+      &.-is-string {
+        color: var(--warningText);
+      }
+
+      &.-is-string {
+        color: var(--infoText);
+      }
+    }
+  }
+}