Fresh up and workaround for node variant state issue

Resources/Private/NodeVariantSelector/.nvmrc

@@ -1 +1 @@
-6.10.0
+16

Resources/Private/NodeVariantSelector/package.json

@@ -7,9 +7,12 @@
     "watch": "neos-react-scripts watch"
   },
   "devDependencies": {
-    "@neos-project/neos-ui-extensibility": "^3.1"
+    "@neos-project/build-essentials": "~8.2.0",
+    "@neos-project/neos-ui-extensibility": "~8.2.0",
+    "lodash.isequal": "^4.5.0"
   },
   "neos": {
     "buildTargetDirectory": "../../Public/JavaScript/NodeVariantSelector"
-  }
+  },
+  "dependencies": {}
 }

Resources/Private/NodeVariantSelector/src/NodeVariantSelector.js

@@ -2,6 +2,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {$get} from 'plow-js';
+import isEqual from 'lodash.isequal';
 
 import {Headline, Icon, SelectBox} from '@neos-project/react-ui-components';
 
@@ -57,46 +58,121 @@ export default class SelectedElement extends PureComponent {
             return null;
         }
 
-        const currentVariant = {
+        const matchesCurrentDimensions = $get('matchesCurrentDimensions', focusedNode);
+        const contextPath = $get('contextPath', focusedNode);
+        let uriDimensions = {};
+        if (matchesCurrentDimensions) {
+            try {
+                let uriDimensionsArray = contextPath.split(';')[1].split('&');
+                uriDimensionsArray.map((dimension) => {
+                    let dimensionValues = dimension.split('=');
+                    let retval = {};
+                    retval[dimensionValues[0]] = dimensionValues[1].split(',')[0];
+                    uriDimensions[dimensionValues[0]] = dimensionValues[1].split(',')[0];
+                    return retval;
+                });
+            } catch (e) {
+                // ignore..
+            }
+        }
+
+        let nodeVariantOptions = [];
+
+        const currentVariantOption = (state) => ({
             value: $get('dimensions', focusedNode),
             label: (
-                <div>
-                    {$get('matchesCurrentDimensions', focusedNode) ? (
-                        <Icon title={i18nRegistry.translate('Flowpack.NodeVariantSelector:Main:matchingTooltip')} icon="check-circle" padded="right" color="primaryBlue" />
-                    ) : (
-                        <Icon title={i18nRegistry.translate('Flowpack.NodeVariantSelector:Main:shinethroughTooltip')} icon="exclamation-circle" padded="right" color="warn" />
-                    )}
+                <div title={state === 'matching' ? i18nRegistry.translate('Flowpack.NodeVariantSelector:Main:matchingTooltip')
+                    : (state === 'shinethrough' ? i18nRegistry.translate('Flowpack.NodeVariantSelector:Main:shinethroughTooltip')
+                        : '')}>
+                    {state === 'matching' ? (<Icon icon="check-circle" padded="right" color="primaryBlue"/>) : ''}
+                    {state === 'shinethrough' ? (<Icon icon="exclamation-circle" padded="right" color="warn"/>) : ''}
                     {Object.keys(contentDimensions).map((dimensionName) => {
                         const dimensionValue = contentDimensions[dimensionName];
                         const dimensionPresetId = $get(['dimensions', dimensionName], focusedNode);
                         const presetLabel = $get([dimensionName, 'presets', dimensionPresetId, 'label'], contentDimensions);
-                        return (<span key={dimensionName} style={{marginRight: 20, fontWeight: 'bold'}}>
-                            <Icon title={i18nRegistry.translate($get('label', dimensionValue))} icon={$get('icon', dimensionValue)} padded="right" />
-                            <I18n id={presetLabel} />
-                        </span>);
+                        return (
+                            <span key={dimensionName} style={{marginRight: 20, fontWeight: 'bold'}}>
+                                <Icon title={i18nRegistry.translate($get('label', dimensionValue))}
+                                      icon={$get('icon', dimensionValue)} padded="right"/>
+                                <I18n id={presetLabel}/>
+                            </span>
+                            );
                     })}
                 </div>
             )
-        };
-        const otherVariants = focusedNodeVariants.map(nodeVariant => {
+        });
+
+        const currentTranslationOption = () => ({
+            value: uriDimensions,
+            label: (
+                <div title={i18nRegistry.translate('Flowpack.NodeVariantSelector:Main:translatingTooltip')}>
+                    <Icon icon="sync" padded="right" color="primaryBlue"/>
+                    {Object.keys(uriDimensions).map((dimensionName) => {
+                        const dimensionPresetId = uriDimensions[dimensionName];
+                        const presetLabel = $get([dimensionName, 'presets', dimensionPresetId, 'label'], contentDimensions);
+                        return (
+                            <span key={dimensionName} style={{marginRight: 20, fontWeight: 'bold'}}>
+                                <I18n id={presetLabel}/>
+                            </span>
+                        );
+                    })}
+                </div>
+            )
+        });
+
+        const otherVariantsOptions = () => focusedNodeVariants.map(nodeVariant => {
             return {
                 value: nodeVariant,
                 label: (
-                    <div>
+                    <div title="">
                         {Object.keys(contentDimensions).map((dimensionName) => {
                             const dimensionValue = contentDimensions[dimensionName];
                             const dimensionPresetId = $get(dimensionName, nodeVariant);
                             const presetLabel = $get([dimensionName, 'presets', dimensionPresetId, 'label'], contentDimensions);
                             return (<span key={dimensionName} style={{marginRight: 20}}>
-                                <Icon icon={$get('icon', dimensionValue)} padded="right" />
-                                <I18n id={presetLabel} />
+                                <Icon icon={$get('icon', dimensionValue)} padded="right"/>
+                                <I18n id={presetLabel}/>
                             </span>);
                         })}
                     </div>
                 )
             };
         });
-        const nodeVariantOptions = [currentVariant, ...otherVariants];
+
+        if (isEqual(uriDimensions, $get('dimensions', focusedNode))) {
+            // Dimensions are equal in URL and Node - Node is already translated
+            try {
+                nodeVariantOptions = [...nodeVariantOptions, currentVariantOption('matching')];
+            } catch (e) {
+                // ignore..
+            }
+        } else if($get('matchesCurrentDimensions', focusedNode)) {
+            // Dimensions are NOT equal in URL and Node - It's already translated but the browser is not reloaded yet
+            try {
+                nodeVariantOptions = [...nodeVariantOptions, currentTranslationOption()];
+            } catch (e) {
+                // ignore..
+            }
+            try {
+                nodeVariantOptions = [...nodeVariantOptions, currentVariantOption('matching')];
+            } catch (e) {
+                // ignore..
+            }
+        } else {
+            // Dimensions are NOT equal in URL and Node - It's a Shadow-Node and does need a Translation
+            try {
+                nodeVariantOptions = [...nodeVariantOptions, currentVariantOption('shinethrough')];
+            } catch (e) {
+                // ignore..
+            }
+        }
+
+        try {
+            // Always show otherVariantsOptions
+            nodeVariantOptions = [...nodeVariantOptions, ...otherVariantsOptions()];
+        } catch (e) {
+            // ignore..
+        }
 
         return (
             <SelectBox