DRAFT FEATURE: add information to dimensions menu

package.json

@@ -4,7 +4,7 @@
   "bugs": "https://github.com/neos/neos-ui/issues",
   "homepage": "https://github.com/neos/neos-ui/blob/master/README.md",
   "license": "GNU GPLv3",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "private": true,
   "resolutions": {
     "moment": "^2.20.1",

packages/debug-reason-for-rendering/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/debug-reason-for-rendering",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "React Performance Optimization Utility - Why does a component re-render?",
   "repository": "neos/neos-ui",
   "bugs": "https://github.com/neos/neos-ui/issues",

packages/jest-preset-neos-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/jest-preset-neos-ui",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "The jest preset for all packages of the neos-ui mono-repo.",
   "main": "jest-preset.json",
   "private": true,

packages/neos-ts-interfaces/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ts-interfaces",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Neos domain-related TypeScript interfaces",
   "private": true,
   "main": "src/index.ts",

packages/neos-ui-backend-connector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-backend-connector",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Endoints and fetch cals to the Neos CMS backend",
   "private": true,
   "main": "./src/index.ts",

packages/neos-ui-build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-build",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Bob der Baumeister",
   "private": true
 }

packages/neos-ui-ckeditor5-bindings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-ckeditor5-bindings",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Prepare CKEditor5 for the Neos CMS UI",
   "private": true,
   "main": "./src/manifest.js",

packages/neos-ui-constants/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-constants",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Container package to store Neos CMS UI constants",
   "private": true,
   "main": "./src/index.js",

packages/neos-ui-containers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-containers",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Smart components for Neos CMS UI.",
   "private": true,
   "main": "./src/index.js",

packages/neos-ui-contentrepository/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-contentrepository",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Bindings for the Neos ContentRepository",
   "private": true,
   "main": "./src/manifest.js",

packages/neos-ui-decorators/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-decorators",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Decorators for Neos CMS UI.",
   "private": true,
   "main": "./src/index.ts",

packages/neos-ui-editors/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-editors",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Neos CMS UI Editors for use in the inspector.",
   "main": "src/manifest.js",
   "private": true,

packages/neos-ui-extensibility-webpack-adapter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-extensibility-webpack-adapter",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Minimal configuration, highly opinionated Webpack 4 + Babel plugin build stack for the Neos CMS UI",
   "repository": "neos/neos-ui",
   "bugs": "https://github.com/neos/neos-ui/issues",

packages/neos-ui-extensibility/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-extensibility",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Core of the extensibility mechanisms for the Neos UI",
   "repository": "neos/neos-ui",
   "bugs": "https://github.com/neos/neos-ui/issues",

packages/neos-ui-guest-frame/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-guest-frame",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Guest frame initialization bindings",
   "private": true,
   "main": "./src/manifest.js",

packages/neos-ui-i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-i18n",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "I18n utilities and components for Neos CMS UI.",
   "private": true,
   "main": "./src/index.tsx",

packages/neos-ui-inspector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-inspector",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Components for integrating views and editors into the Neos CMS UI inspector.",
   "private": true,
   "main": "./src/index.js",

packages/neos-ui-redux-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-redux-store",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Redux store implementation for the Neos CMS UI",
   "private": true,
   "main": "./src/index.ts",

packages/neos-ui-sagas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-sagas",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Redux Sagas implementation for the Neos CMS UI",
   "private": true,
   "main": "src/index.js",

packages/neos-ui-validators/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-validators",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Validators for Neos CMS UI.",
   "private": true,
   "main": "./src/index.ts",

packages/neos-ui-views/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui-views",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Neos CMS UI Views for use in the inspector.",
   "main": "./src/index.js",
   "private": true,

packages/neos-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/neos-ui",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Neos CMS UI written in ReactJS and a ton of other fun technology.",
   "private": true,
   "devDependencies": {

packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelector.js

@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import SelectBox from '@neos-project/react-ui-components/src/SelectBox/';
 import style from './style.module.css';
-import {$get, $transform} from 'plow-js';
+import {$transform} from 'plow-js';
 import mapValues from 'lodash.mapvalues';
 import sortBy from 'lodash.sortby';
 import {neos} from '@neos-project/neos-ui-decorators';
@@ -48,9 +48,11 @@ export default class DimensionSelector extends PureComponent {
             (presetConfiguration, presetName) => {
                 return $transform(
                     {
-                        label: $get('label'),
+                        label: presetConfiguration?.label,
                         value: presetName,
-                        disallowed: $get('disallowed')
+                        disallowed: presetConfiguration?.disallowed,
+                        existing: presetConfiguration?.existing,
+                        url: presetConfiguration?.url
                     },
                     presetConfiguration
                 );

packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/DimensionSelectorOption.js

@@ -1,25 +1,51 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import style from './style.module.css';
-// eslint-disable-next-line camelcase
+import SelectBox_Option_SingleLineLink from '@neos-project/react-ui-components/src/SelectBox_Option_SingleLineLink/index';
 import SelectBox_Option_SingleLine from '@neos-project/react-ui-components/src/SelectBox_Option_SingleLine/index';
+import mergeClassNames from 'classnames';
 
 export default class DimensionSelectorOption extends PureComponent {
     static propTypes = {
         option: PropTypes.shape({
             label: PropTypes.string.isRequired,
-            disallowed: PropTypes.bool
+            disallowed: PropTypes.bool,
+            existing: PropTypes.bool,
+            url: PropTypes.string
         })
     };
 
     render() {
         const {option} = this.props;
 
+        const className = mergeClassNames({
+            [style.lighter]: !option.existing,
+            [style.strikethrough]: option.disallowed
+        });
+
+        if (option.existing) {
+            const linkOptions = {
+                className: style.whiteLink,
+                href: option.url,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+                onClick: (event) => event.preventDefault()
+            }
+
+            return (
+                <SelectBox_Option_SingleLineLink
+                    {...this.props}
+                    className={className}
+                    label={option.label}
+                    linkOptions={linkOptions}
+                />
+            );
+        }
+
         return (
-            // eslint-disable-next-line camelcase
             <SelectBox_Option_SingleLine
                 {...this.props}
-                className={option.disallowed ? style.dimmed : ''}
+                className={className}
                 label={option.label}
             />
         );

packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/index.js

@@ -33,7 +33,9 @@ SelectedPreset.propTypes = {
 @connect($transform({
     contentDimensions: selectors.CR.ContentDimensions.byName,
     allowedPresets: selectors.CR.ContentDimensions.allowedPresets,
-    activePresets: selectors.CR.ContentDimensions.activePresets
+    activePresets: selectors.CR.ContentDimensions.activePresets,
+    getNodeByContextPath: selectors.CR.Nodes.nodeByContextPath,
+    documentNode: selectors.CR.Nodes.documentNodeSelector
 }), {
     selectPreset: actions.CR.ContentDimensions.selectPreset,
     setAllowed: actions.CR.ContentDimensions.setAllowed
@@ -255,15 +257,58 @@ export default class DimensionSwitcher extends PureComponent {
         return null;
     }
 
+    getExistingDimensions() {
+        const allowed = this.props.allowedPresets
+        const currentDocumentNode = this.props.getNodeByContextPath(this.props.documentNode.contextPath)
+        const dimensionsWithVariants = currentDocumentNode?.otherNodeVariants;
+        if (!dimensionsWithVariants) {
+            return [currentDocumentNode.dimensions]
+        }
+
+        const existingDimensions = {};
+        Object.keys(allowed).forEach((dimensionName) => {
+            const dimensionValues = allowed[dimensionName];
+
+            existingDimensions[dimensionName] = [];
+            Array.from(dimensionValues).forEach((dimensionValue) => {
+                const result = [...dimensionsWithVariants, currentDocumentNode.dimensions].find((dimension) => {
+                    return dimension[dimensionName] === dimensionValue;
+                });
+                if (result) {
+                    existingDimensions[dimensionName].push(dimensionValue);
+                }
+            });
+        });
+
+        return existingDimensions;
+    }
+
     presetsForDimension(dimensionName) {
         const {contentDimensions, allowedPresets, i18nRegistry} = this.props;
         const dimensionConfiguration = $get(dimensionName, contentDimensions);
+        const existingDimensions = this.getExistingDimensions();
 
         return mapValues(dimensionConfiguration.presets,
             (presetConfiguration, presetName) => {
+                // if we do not know which dimensions exist, show all as existing
+                let existing = existingDimensions.length === 1 && existingDimensions[0] === undefined;
+                for (const value of presetConfiguration.values) {
+                    if (existingDimensions[dimensionName]?.includes(value)) {
+                        existing = true;
+                    }
+                }
+
+                const uri = new URL(window.location.href);
+                const contextPathWithoutDimensions = this.props.documentNode.contextPath.split(';')[0];
+                const uriDimension = ';' + dimensionName + '=' + presetConfiguration.values.join(',')
+                uri.searchParams.set('node', contextPathWithoutDimensions + uriDimension);
+                const url = uri.toString();
+
                 return Object.assign({}, presetConfiguration, {
                     label: i18nRegistry.translate(presetConfiguration.label),
-                    disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName))
+                    disallowed: !(allowedPresets[dimensionName] && allowedPresets[dimensionName].includes(presetName)),
+                    existing,
+                    url
                 });
             });
     }

packages/neos-ui/src/Containers/PrimaryToolbar/DimensionSwitcher/style.module.css

@@ -60,8 +60,16 @@
     }
 }
 
-.dimmed {
-    filter: opacity(50%);
+.strikethrough {
+    text-decoration: line-through;
+}
+
+.lighter {
+    filter: opacity(75%);
+}
+
+.whiteLink {
+    color: white;
 }
 
 .selectPreset + .selectPreset {

packages/positional-array-sorter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/positional-array-sorter",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Flexible array sorter that sorts an array according to a 'position' meta data.",
   "repository": "neos/neos-ui",
   "bugs": "https://github.com/neos/neos-ui/issues",

packages/react-proptypes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/react-proptypes",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Neos CMS specific proptypes for react",
   "private": true,
   "main": "./src/index.js",

packages/react-ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neos-project/react-ui-components",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "The UI components which power the Neos backend application.",
   "repository": "neos/neos-ui",
   "bugs": "https://github.com/neos/neos-ui/issues",

packages/react-ui-components/src/SelectBox_Option_SingleLineLink/index.js

@@ -0,0 +1,4 @@
+/* eslint-disable camelcase, react/jsx-pascal-case */
+import SelectBox_Option_SingleLineLink from './selectBox_Option_SingleLineLink';
+
+export default SelectBox_Option_SingleLineLink;