From 5c90579d8e89c7d1337495ee55a5a6aff2ba4c7f Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Tue, 27 Jul 2021 08:43:43 +0200
Subject: [PATCH] FEATURE: Support preview uris in datasource selectboxeditor

---
 .../DataSourceBasedSelectBoxEditor.js         |  4 ++
 .../src/Editors/SelectBox/index.spec.js       | 38 ++++++++++++++++++-
 .../src/Library/PreviewOption.js              | 22 +++++++++++
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 packages/neos-ui-editors/src/Library/PreviewOption.js

diff --git a/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js b/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js
index e08b6cebf3..ee0f8fa61d 100644
--- a/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js
+++ b/packages/neos-ui-editors/src/Editors/SelectBox/DataSourceBasedSelectBoxEditor.js
@@ -7,6 +7,7 @@ import MultiSelectBox from '@neos-project/react-ui-components/src/MultiSelectBox
 import {selectors} from '@neos-project/neos-ui-redux-store';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {shouldDisplaySearchBox, searchOptions, processSelectBoxOptions} from './SelectBoxHelpers';
+import PreviewOption from '../../Library/PreviewOption';
 
 const getDataLoaderOptionsForProps = props => ({
     contextNodePath: props.focusedNodePath,
@@ -49,6 +50,7 @@ export default class DataSourceBasedSelectBoxEditor extends PureComponent {
                 PropTypes.shape({
                     label: PropTypes.string,
                     icon: PropTypes.string,
+                    preview: PropTypes.string,
 
                     // TODO
                     group: PropTypes.string
@@ -116,6 +118,7 @@ export default class DataSourceBasedSelectBoxEditor extends PureComponent {
                 values={value || []}
                 onValuesChange={commit}
                 loadingLabel={loadingLabel}
+                ListPreviewElement={PreviewOption}
                 displayLoadingIndicator={this.state.isLoading}
                 placeholder={placeholder}
                 allowEmpty={options.allowEmpty}
@@ -136,6 +139,7 @@ export default class DataSourceBasedSelectBoxEditor extends PureComponent {
             value={value}
             onValueChange={commit}
             loadingLabel={loadingLabel}
+            ListPreviewElement={PreviewOption}
             displayLoadingIndicator={this.state.isLoading}
             placeholder={placeholder}
             allowEmpty={options.allowEmpty}
diff --git a/packages/neos-ui-editors/src/Editors/SelectBox/index.spec.js b/packages/neos-ui-editors/src/Editors/SelectBox/index.spec.js
index eb134e056c..9118180513 100644
--- a/packages/neos-ui-editors/src/Editors/SelectBox/index.spec.js
+++ b/packages/neos-ui-editors/src/Editors/SelectBox/index.spec.js
@@ -15,8 +15,23 @@ const optionValues = {
         label: 'barLabel'
     }
 };
+
+const optionValuesWithPreview = {
+    foo: {
+        label: 'fooLabel',
+        preview: 'foo.png'
+    },
+    bar: {
+        label: 'barLabel',
+        preview: 'bar.png'
+    }
+};
+
 const dropdownElementLabels = component =>
-    component.find('SelectBox_ListPreview').find('SelectBox_Option_SingleLine').map(node => node.text());
+    component.find('SelectBox_ListPreview').find('ListPreviewElement').map(node => node.text());
+
+const dropdownElementPreviews = component =>
+    component.find('SelectBox_ListPreview').find('ListPreviewElement').find('img').map(node => node.prop('src'));
 
 const dropdownHeader = component =>
     component.find('ShallowDropDownHeader');
@@ -144,6 +159,27 @@ test(`SelectBox > single, dataSource, preselected value`, () => {
     });
 });
 
+test(`SelectBox > single, dataSource, preview`, () => {
+    MockDataSourceDataLoader.reset();
+    const component = mount(
+        <DragDropContextProvider backend={TestBackend}>
+            <WrapWithMockGlobalRegistry>
+                <Provider store={store}>
+                    <SelectBoxEditor commit={commit} options={{dataSourceIdentifier: 'ds1'}}/>
+                </Provider>
+            </WrapWithMockGlobalRegistry>
+        </DragDropContextProvider>
+    );
+
+    dropdownHeader(component).simulate('click');
+
+    return MockDataSourceDataLoader.resolveCurrentPromise(optionValuesWithPreview).then(() => {
+        const expectedDropdownElementPreviews = ['foo.png', 'bar.png'];
+        component.update();
+        expect(dropdownElementPreviews(component)).toEqual(expectedDropdownElementPreviews);
+    });
+});
+
 test(`SelectBox > multi, dataSource, no preselected value`, () => {
     MockDataSourceDataLoader.reset();
     const component = mount(
diff --git a/packages/neos-ui-editors/src/Library/PreviewOption.js b/packages/neos-ui-editors/src/Library/PreviewOption.js
new file mode 100644
index 0000000000..936a42d847
--- /dev/null
+++ b/packages/neos-ui-editors/src/Library/PreviewOption.js
@@ -0,0 +1,22 @@
+/* eslint-disable camelcase, react/jsx-pascal-case */
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import SelectBox_Option_MultiLineWithThumbnail from '@neos-project/react-ui-components/src/SelectBox_Option_MultiLineWithThumbnail';
+
+export default class PreviewOption extends PureComponent {
+    static propTypes = {
+        option: PropTypes.shape({
+            label: PropTypes.string.isRequired,
+            icon: PropTypes.string,
+            preview: PropTypes.string
+        })
+    };
+
+    render() {
+        const {option} = this.props;
+
+        return (
+            <SelectBox_Option_MultiLineWithThumbnail {...this.props} imageUri={option.preview} icon={option.icon} label={option.label}/>
+        );
+    }
+}