TASK: Remove plow-js from @neos-project/neos-ui

packages/neos-ui-extensibility/scripts/helpers/webpack.config.js

@@ -52,7 +52,6 @@ module.exports = function (neosPackageJson) {
                 'react-dnd': '@neos-project/neos-ui-extensibility/src/shims/vendor/react-dnd/index',
                 'react-dnd-html5-backend': '@neos-project/neos-ui-extensibility/src/shims/vendor/react-dnd-html5-backend/index',
                 'prop-types': '@neos-project/neos-ui-extensibility/src/shims/vendor/prop-types/index',
-                'plow-js': '@neos-project/neos-ui-extensibility/src/shims/vendor/plow-js/index',
                 'classnames': '@neos-project/neos-ui-extensibility/src/shims/vendor/classnames/index',
                 'react-redux': '@neos-project/neos-ui-extensibility/src/shims/vendor/react-redux/index',
                 'redux-actions': '@neos-project/neos-ui-extensibility/src/shims/vendor/redux-actions/index',

packages/neos-ui/package.json

@@ -57,7 +57,6 @@
     "monet": "^0.9.2",
     "normalize.css": "^8.0.0",
     "notosans-fontface": "^1.3.0",
-    "plow-js": "^2.2.0",
     "prop-types": "^15.5.10",
     "react": "^16.12.0",
     "react-dnd": "^10.0.0",

packages/neos-ui/src/Containers/App.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {$get, $transform} from 'plow-js';
 import mergeClassNames from 'classnames';
 import style from './style.css';
 
@@ -67,8 +66,8 @@ App.propTypes = {
     rightSidebarIsHidden: PropTypes.bool.isRequired
 };
 
-export default connect($transform({
-    isFullScreen: $get('ui.fullScreen.isFullScreen'),
-    leftSidebarIsHidden: $get('ui.leftSideBar.isHidden'),
-    rightSidebarIsHidden: $get('ui.rightSideBar.isHidden')
+export default connect(state => ({
+    isFullScreen: state?.ui?.fullScreen?.isFullScreen,
+    leftSidebarIsHidden: state?.ui?.leftSideBar?.isHidden,
+    rightSidebarIsHidden: state?.ui?.rightSideBar?.isHidden
 }))(App);

packages/neos-ui/src/Containers/ContentCanvas/index.js

@@ -2,7 +2,6 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import mergeClassNames from 'classnames';
-import {$transform, $get} from 'plow-js';
 
 import {urlWithParams} from '@neos-project/utils-helpers/src/urlWithParams';
 import {actions, selectors} from '@neos-project/neos-ui-redux-store';
@@ -12,14 +11,14 @@ import Frame from '@neos-project/react-ui-components/src/Frame/';
 
 import style from './style.css';
 
-@connect($transform({
-    isFringeLeft: $get('ui.leftSideBar.isHidden'),
-    isFringeRight: $get('ui.rightSideBar.isHidden'),
-    isFullScreen: $get('ui.fullScreen.isFullScreen'),
-    backgroundColor: $get('ui.contentCanvas.backgroundColor'),
-    src: $get('ui.contentCanvas.src'),
-    baseNodeType: $get('ui.pageTree.filterNodeType'),
-    currentEditPreviewMode: selectors.UI.EditPreviewMode.currentEditPreviewMode
+@connect(state => ({
+    isFringeLeft: state?.ui?.leftSideBar?.isHidden,
+    isFringeRight: state?.ui?.rightSideBar?.isHidden,
+    isFullScreen: state?.ui?.fullScreen?.isFullScreen,
+    backgroundColor: state?.ui?.contentCanvas?.backgroundColor,
+    src: state?.ui?.contentCanvas?.src,
+    baseNodeType: state?.ui?.pageTree?.filterNodeType,
+    currentEditPreviewMode: selectors.UI.EditPreviewMode.currentEditPreviewMode(state)
 }), {
     startLoading: actions.UI.ContentCanvas.startLoading,
     stopLoading: actions.UI.ContentCanvas.stopLoading,
@@ -88,8 +87,8 @@ export default class ContentCanvas extends PureComponent {
         const InlineUI = guestFrameRegistry.get('InlineUIComponent');
         const currentEditPreviewModeConfiguration = editPreviewModes[currentEditPreviewMode] || editPreviewModes[Object.keys(editPreviewModes)[0]];
 
-        const width = $get('width', currentEditPreviewModeConfiguration);
-        const height = $get('height', currentEditPreviewModeConfiguration);
+        const width = currentEditPreviewModeConfiguration?.width;
+        const height = currentEditPreviewModeConfiguration?.height;
 
         const canvasContentStyle = {};
         const inlineStyles = {};

packages/neos-ui/src/Containers/Drawer/index.js

@@ -2,7 +2,6 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import mergeClassNames from 'classnames';
 import {connect} from 'react-redux';
-import {$transform, $get} from 'plow-js';
 
 import {actions} from '@neos-project/neos-ui-redux-store';
 import {neos} from '@neos-project/neos-ui-decorators';
@@ -14,9 +13,9 @@ import {TARGET_WINDOW, TARGET_CONTENT_CANVAS, THRESHOLD_MOUSE_LEAVE} from './con
 @neos(globalRegistry => ({
     containerRegistry: globalRegistry.get('containers')
 }))
-@connect($transform({
-    isHidden: $get('ui.drawer.isHidden'),
-    collapsedMenuGroups: $get('ui.drawer.collapsedMenuGroups')
+@connect(state => ({
+    isHidden: state?.ui?.drawer?.isHidden,
+    collapsedMenuGroups: state?.ui?.drawer?.collapsedMenuGroups
 }), {
     hideDrawer: actions.UI.Drawer.hide,
     toggleMenuGroup: actions.UI.Drawer.toggleMenuGroup,

packages/neos-ui/src/Containers/FlashMessages/index.js

@@ -1,15 +1,14 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {$transform, $get} from 'plow-js';
 
 import {actions} from '@neos-project/neos-ui-redux-store';
 import FlashMessage from './FlashMessage/index';
 
 import style from './style.css';
 
-@connect($transform({
-    flashMessages: $get('ui.flashMessages')
+@connect(state => ({
+    flashMessages: state?.ui?.flashMessages
 }), {
     removeMessage: actions.UI.FlashMessages.remove
 })

packages/neos-ui/src/Containers/LeftSideBar/NodeTree/Node/index.js

@@ -1,6 +1,5 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {$transform, $get} from 'plow-js';
 import {connect} from 'react-redux';
 
 import flowright from 'lodash.flowright';
@@ -18,7 +17,7 @@ import hashSum from 'hash-sum';
 import moment from 'moment';
 import {urlWithParams} from '@neos-project/utils-helpers/src/urlWithParams';
 
-const getContextPath = $get('contextPath');
+const getContextPath = node => node?.contextPath;
 
 //
 // Finds the first parent element that has a scrollbar
@@ -42,8 +41,8 @@ const decodeLabel = flowright(
 );
 
 @connect(
-    $transform({
-        isWorkspaceReadOnly: selectors.CR.Workspaces.isWorkspaceReadOnlySelector
+    state => ({
+        isWorkspaceReadOnly: selectors.CR.Workspaces.isWorkspaceReadOnlySelector(state)
     })
 )
 export default class Node extends PureComponent {
@@ -159,9 +158,9 @@ export default class Node extends PureComponent {
 
     getIcon() {
         const {node, nodeTypesRegistry} = this.props;
-        const nodeType = $get('nodeType', node);
+        const nodeType = node?.nodeType;
 
-        return $get('ui.icon', nodeTypesRegistry.get(nodeType));
+        return nodeTypesRegistry.get(nodeType)?.ui?.icon;
     }
 
     /**
@@ -171,9 +170,9 @@ export default class Node extends PureComponent {
     getCustomIconComponent() {
         const {node} = this.props;
 
-        const isHidden = $get('properties._hidden', node);
-        const isHiddenBefore = $get('properties._hiddenBeforeDateTime', node);
-        const isHiddenAfter = $get('properties._hiddenAfterDateTime', node);
+        const isHidden = node?.properties?._hidden;
+        const isHiddenBefore = node?.properties?._hiddenBeforeDateTime;
+        const isHiddenAfter = node?.properties?._hiddenAfterDateTime;
 
         if (isHidden) {
             return (
@@ -205,8 +204,8 @@ export default class Node extends PureComponent {
 
     getNodeTypeLabel() {
         const {node, nodeTypesRegistry, i18nRegistry} = this.props;
-        const nodeType = $get('nodeType', node);
-        const nodeTypeLabel = $get('ui.label', nodeTypesRegistry.get(nodeType));
+        const nodeType = node?.nodeType;
+        const nodeTypeLabel = nodeTypesRegistry.get(nodeType)?.ui?.label;
         return i18nRegistry.translate(nodeTypeLabel, nodeTypeLabel);
     }
 
@@ -294,7 +293,7 @@ export default class Node extends PureComponent {
 
         const labelIdentifier = (isContentTreeNode ? 'content-' : '') + 'treeitem-' + hashSum(node.contextPath) + '-label';
 
-        const labelTitle = decodeLabel($get('label', node)) + ' (' + this.getNodeTypeLabel() + ')';
+        const labelTitle = decodeLabel(node?.label) + ' (' + this.getNodeTypeLabel() + ')';
 
         // Autocreated or we have nested nodes and the node that we are dragging belongs to the selection
         // For read only workspaces we also forbid drag and drop
@@ -314,11 +313,11 @@ export default class Node extends PureComponent {
                     isFocused={this.isFocused()}
                     isLoading={this.isLoading()}
                     isDirty={this.props.isNodeDirty}
-                    isHidden={$get('properties._hidden', node)}
-                    isHiddenInIndex={$get('properties._hiddenInIndex', node) || this.isIntermediate()}
+                    isHidden={node?.properties?._hidden}
+                    isHiddenInIndex={node?.properties?._hiddenInIndex || this.isIntermediate()}
                     isDragging={currentlyDraggedNodes.includes(node.contextPath)}
                     hasError={this.hasError()}
-                    label={decodeLabel($get('label', node))}
+                    label={decodeLabel(node?.label)}
                     icon={this.getIcon()}
                     customIconComponent={this.getCustomIconComponent()}
                     iconLabel={this.getNodeTypeLabel()}
@@ -373,9 +372,9 @@ export default class Node extends PureComponent {
 
         // Append presetBaseNodeType param to src
         const srcWithBaseNodeType = this.props.filterNodeType ? urlWithParams(
-            $get('uri', node),
+            node?.uri,
             {presetBaseNodeType: this.props.filterNodeType}
-        ) : $get('uri', node);
+        ) : node?.uri;
 
         onNodeFocus(node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed);
         onNodeClick(srcWithBaseNodeType, node.contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed);
@@ -421,7 +420,7 @@ export const PageTreeNode = withNodeTypeRegistryAndI18nRegistry(connect(
                 loadingNodeContextPaths: selectors.UI.PageTree.getLoading(state),
                 errorNodeContextPaths: selectors.UI.PageTree.getErrors(state),
                 isNodeDirty: isDocumentNodeDirtySelector(state, node.contextPath),
-                filterNodeType: $get('ui.pageTree.filterNodeType', state),
+                filterNodeType: state?.ui?.pageTree?.filterNodeType,
                 canBeInsertedAlongside,
                 canBeInsertedInto
             });

packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js

@@ -1,7 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {$get} from 'plow-js';
 import mergeClassNames from 'classnames';
 
 import {Tree, Icon} from '@neos-project/react-ui-components';
@@ -97,10 +96,10 @@ export default class NodeTree extends PureComponent {
     handleDrop = (targetNode, position) => {
         const {currentlyDraggedNodes} = this.state;
         const {moveNodes, focus} = this.props;
-        moveNodes(currentlyDraggedNodes, $get('contextPath', targetNode), position);
+        moveNodes(currentlyDraggedNodes, targetNode?.contextPath, position);
         // We need to refocus the tree, so all focus would be reset, because its context paths have changed while moving
         // Could be removed with the new CR
-        focus($get('contextPath', targetNode));
+        focus(targetNode?.contextPath);
 
         this.setState({
             currentlyDraggedNodes: []

packages/neos-ui/src/Containers/LeftSideBar/NodeTreeSearchBar/NodeTreeFilter/index.js

@@ -1,6 +1,5 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {$get} from 'plow-js';
 
 import {neos} from '@neos-project/neos-ui-decorators';
 import {SelectBox} from '@neos-project/react-ui-components';
@@ -35,13 +34,13 @@ export default class NodeTreeFilter extends PureComponent {
         const {i18nRegistry, nodeTypesRegistry, neos, onChange, value} = this.props;
         const label = i18nRegistry.translate('filter', 'Filter', {}, 'Neos.Neos', 'Main');
 
-        const presets = $get('configuration.nodeTree.presets', neos);
+        const presets = neos?.configuration?.nodeTree?.presets;
         let options = Object.keys(presets)
             .filter(presetName => (presetName !== 'default'))
             .map(presetName => ({
-                value: $get([presetName, 'baseNodeType'], presets),
-                label: $get([presetName, 'ui', 'label'], presets) || '[' + presetName + ']',
-                icon: $get([presetName, 'ui', 'icon'], presets)
+                value: presets?.[presetName]?.baseNodeType,
+                label: presets?.[presetName]?.ui?.label || '[' + presetName + ']',
+                icon: presets?.[presetName]?.ui?.icon
             }));
 
         if (options.length === 0) {
@@ -53,7 +52,7 @@ export default class NodeTreeFilter extends PureComponent {
             options = documentNodeTypes.map(nodeType => ({
                 value: nodeType.name,
                 label: i18nRegistry.translate(nodeType.label),
-                icon: $get('ui.icon', nodeType)
+                icon: nodeType?.ui?.icon
             }));
         }
 

packages/neos-ui/src/Containers/LeftSideBar/NodeTreeSearchBar/index.js

@@ -2,7 +2,6 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import debounce from 'lodash.debounce';
-import {$transform, $get} from 'plow-js';
 import mergeClassNames from 'classnames';
 
 import {neos} from '@neos-project/neos-ui-decorators';
@@ -19,8 +18,8 @@ const searchDelay = 300;
     i18nRegistry: globalRegistry.get('i18n')
 }))
 
-@connect($transform({
-    isSearchBarVisible: $get('ui.leftSideBar.searchBar.isVisible')
+@connect(state => ({
+    isSearchBarVisible: state?.ui?.leftSideBar?.searchBar?.isVisible
 }), {
     toggleSearchBar: actions.UI.LeftSideBar.toggleSearchBar
 })
@@ -48,14 +47,14 @@ class NodeTreeSearchBar extends PureComponent {
 
     handleSearchChange = query => {
         const {rootNode} = this.props;
-        const contextPath = $get('contextPath', rootNode);
+        const contextPath = rootNode?.contextPath;
         this.debouncedCommenceSearch(contextPath, {query: query.trim(), filterNodeType: this.state.filterNodeType});
         this.setState({searchValue: query});
     }
 
     handleFilterChange = filterNodeType => {
         const {rootNode, commenceSearch} = this.props;
-        const contextPath = $get('contextPath', rootNode);
+        const contextPath = rootNode?.contextPath;
         commenceSearch(contextPath, {query: this.state.searchValue.trim(), filterNodeType});
         this.setState({filterNodeType});
     }
@@ -70,7 +69,7 @@ class NodeTreeSearchBar extends PureComponent {
 
     handleClearClick = () => {
         const {commenceSearch, rootNode} = this.props;
-        const contextPath = $get('contextPath', rootNode);
+        const contextPath = rootNode?.contextPath;
         this.setState({
             searchValue: '',
             showClear: false

packages/neos-ui/src/Containers/LeftSideBar/NodeTreeToolBar/index.js

@@ -1,7 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {$transform, $get, $contains} from 'plow-js';
 
 import {isEqualSet} from '@neos-project/utils-helpers';
 import {neos} from '@neos-project/neos-ui-decorators';
@@ -22,8 +21,8 @@ import {
 import style from './style.css';
 
 @connect(
-    $transform({
-        isWorkspaceReadOnly: selectors.CR.Workspaces.isWorkspaceReadOnlySelector
+    state => ({
+        isWorkspaceReadOnly: selectors.CR.Workspaces.isWorkspaceReadOnlySelector(state)
     })
 )
 @neos(globalRegistry => ({
@@ -264,17 +263,17 @@ const withNodeTypesRegistry = neos(globalRegistry => ({
 const removeAllowed = (focusedNodesContextPaths, state) => focusedNodesContextPaths.every(contextPath => {
     const getNodeByContextPathSelector = selectors.CR.Nodes.makeGetNodeByContextPathSelector(contextPath);
     const focusedNode = getNodeByContextPathSelector(state);
-    return $get('policy.canRemove', focusedNode);
+    return focusedNode?.policy?.canRemove;
 });
 const visibilityToggleAllowed = (focusedNodesContextPaths, state) => focusedNodesContextPaths.every(contextPath => {
     const getNodeByContextPathSelector = selectors.CR.Nodes.makeGetNodeByContextPathSelector(contextPath);
     const focusedNode = getNodeByContextPathSelector(state);
-    return !$contains('_hidden', 'policy.disallowedProperties', focusedNode);
+    return !focusedNode?.policy?.disallowedProperties?.includes('_hidden');
 });
 const editingAllowed = (focusedNodesContextPaths, state) => focusedNodesContextPaths.every(contextPath => {
     const getNodeByContextPathSelector = selectors.CR.Nodes.makeGetNodeByContextPathSelector(contextPath);
     const focusedNode = getNodeByContextPathSelector(state);
-    return $get('policy.canEdit', focusedNode);
+    return focusedNode?.policy?.canEdit;
 });
 
 const makeMapStateToProps = isDocument => (state, {nodeTypesRegistry}) => {
@@ -304,17 +303,17 @@ const makeMapStateToProps = isDocument => (state, {nodeTypesRegistry}) => {
         const visibilityCanBeToggled = visibilityToggleAllowed(focusedNodesContextPaths, state);
         const canBeEdited = editingAllowed(focusedNodesContextPaths, state);
 
-        const clipboardMode = $get('cr.nodes.clipboardMode', state);
+        const clipboardMode = state?.cr?.nodes?.clipboardMode;
         const allFocusedNodesAreInClipboard = isEqualSet(focusedNodesContextPaths, clipboardNodesContextPaths);
         const isCut = allFocusedNodesAreInClipboard && clipboardMode === 'Move';
         const isCopied = allFocusedNodesAreInClipboard && clipboardMode === 'Copy';
 
-        const isHidden = $get('properties._hidden', focusedNode);
+        const isHidden = focusedNode?.properties?._hidden;
 
         const isAllowedToAddChildOrSiblingNodes = isAllowedToAddChildOrSiblingNodesSelector(state, {
             reference: focusedNodeContextPath
         });
-        const isHiddenContentTree = $get('ui.leftSideBar.contentTree.isHidden', state);
+        const isHiddenContentTree = state?.ui?.leftSideBar?.contentTree?.isHidden;
 
         const destructiveOperationsAreDisabled = (
             isDocument ?