LPS-101063 add vocabulary selector opt-in

modules/apps/segments/segments-web/src/main/java/com/liferay/segments/web/internal/field/customizer/FreeformTextSegmentsFieldCustomizer.java

@@ -0,0 +1,130 @@
+package com.liferay.segments.web.internal.field.customizer;
+
+import com.liferay.asset.kernel.model.AssetVocabulary;
+import com.liferay.asset.kernel.service.AssetCategoryLocalService;
+import com.liferay.asset.kernel.service.AssetVocabularyLocalService;
+import com.liferay.portal.kernel.log.Log;
+import com.liferay.portal.kernel.log.LogFactoryUtil;
+import com.liferay.portal.kernel.model.ClassedModel;
+import com.liferay.portal.kernel.portlet.LiferayWindowState;
+import com.liferay.portal.kernel.portlet.PortletProvider;
+import com.liferay.portal.kernel.portlet.PortletProviderUtil;
+import com.liferay.portal.kernel.util.GetterUtil;
+import com.liferay.portal.kernel.util.Portal;
+import com.liferay.segments.context.Context;
+import com.liferay.segments.field.Field;
+import com.liferay.segments.field.customizer.SegmentsFieldCustomizer;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.Locale;
+
+import javax.portlet.PortletRequest;
+import javax.portlet.PortletURL;
+
+import org.osgi.service.component.annotations.Component;
+import org.osgi.service.component.annotations.Reference;
+
+@Component(
+	immediate = true,
+	property = {
+		"segments.field.customizer.entity.name=User",
+		"segments.field.customizer.entity.name=Organization",
+		"segments.field.customizer.entity.name=Context",
+		"segments.field.customizer.key=" + FreeformTextSegmentsFieldCustomizer.KEY,
+		"segments.field.customizer.priority:Integer=50"
+	},
+	service = SegmentsFieldCustomizer.class
+)
+public class FreeformTextSegmentsFieldCustomizer
+	extends BaseSegmentsFieldCustomizer {
+
+	public static final String KEY = "freeform";
+
+	@Override
+	public ClassedModel getClassedModel(String fieldValue) {
+		return _getAssetVocabulary(fieldValue);
+	}
+
+	@Override
+	public String getClassName() {
+		return AssetVocabulary.class.getName();
+	}
+
+	@Override
+	public List<String> getFieldNames() {
+		return _fieldNames;
+	}
+
+	@Override
+	public String getFieldValueName(String fieldValue, Locale locale) {
+		AssetVocabulary assetVocabulary = _getAssetVocabulary(fieldValue);
+
+		if (assetVocabulary == null) {
+			return fieldValue;
+		}
+
+		return assetVocabulary.getName();
+	}
+
+	@Override
+	public String getKey() {
+		return KEY;
+	}
+
+	@Override
+	public Field.SelectEntity getSelectEntity(PortletRequest portletRequest) {
+		try {
+			PortletURL portletURL = PortletProviderUtil.getPortletURL(
+				portletRequest, AssetVocabulary.class.getName(),
+				PortletProvider.Action.BROWSE);
+
+			portletURL.setParameter("eventName", "selectEntity");
+			portletURL.setWindowState(LiferayWindowState.POP_UP);
+
+			return new Field.SelectEntity(
+				"selectEntity",
+				getSelectEntityTitle(
+					_portal.getLocale(portletRequest),
+					AssetVocabulary.class.getName()),
+				portletURL.toString(), true);
+		}
+		catch (Exception e) {
+			if (_log.isWarnEnabled()) {
+				_log.warn("Unable to get select entity", e);
+			}
+
+			return null;
+		}
+	}
+
+	private AssetVocabulary _getAssetVocabulary(String fieldValue) {
+		long _vocabularyId = GetterUtil.getLong(fieldValue);
+
+		if (_vocabularyId == 0) {
+			return null;
+		}
+
+		return _assetVocabularyLocalService.fetchAssetVocabulary(_vocabularyId);
+	}
+
+	private static final Log _log = LogFactoryUtil.getLog(
+		FreeformTextSegmentsFieldCustomizer.class);
+
+	private static final List<String> _fieldNames = Arrays.asList(
+		"emailAddress", "firstName", "jobTitle", "lastName", "screenName",
+		"userName", "country", "region", "name", "nameTreePath", "type",
+		Context.BROWSER, Context.DEVICE_BRAND, Context.DEVICE_MODEL,
+		Context.HOSTNAME, Context.REFERRER_URL, Context.URL, Context.USER_AGENT,
+		Context.COOKIES, Context.REQUEST_PARAMETERS);
+
+	@Reference
+	private AssetCategoryLocalService _assetCategoryLocalService;
+
+	@Reference
+	private AssetVocabularyLocalService _assetVocabularyLocalService;
+
+	@Reference
+	private Portal _portal;
+
+}

modules/apps/segments/segments-web/src/main/resources/META-INF/resources/js/components/inputs/CollectionInput.es.js

@@ -26,6 +26,12 @@ class CollectionInput extends React.Component {
 	static propTypes = {
 		disabled: propTypes.bool,
 		onChange: propTypes.func.isRequired,
+		selectEntity: propTypes.shape({
+			id: propTypes.string,
+			multiple: propTypes.bool,
+			title: propTypes.string,
+			uri: propTypes.string
+		}),
 		value: propTypes.string
 	};
 
@@ -75,22 +81,97 @@ class CollectionInput extends React.Component {
 		};
 	};
 
+	/**
+	 * Opens a modal for selecting entities. Uses different methods for
+	 * selecting multiple entities versus single because of the way the event
+	 * and data is submitted.
+	 */
+	_handleSelectEntity = () => {
+		const {
+			onChange,
+			selectEntity: {id, multiple, title, uri}
+		} = this.props;
+
+		if (multiple) {
+			AUI().use('liferay-item-selector-dialog', A => {
+				const itemSelectorDialog = new A.LiferayItemSelectorDialog({
+					eventName: id,
+					on: {
+						selectedItemChange: event => {
+							const newVal = event.newVal;
+
+							if (newVal) {
+								const selectedValues = event.newVal.map(
+									item => ({
+										displayValue: item.name,
+										value: item.id
+									})
+								);
+
+								onChange(selectedValues);
+							}
+						}
+					},
+					strings: {
+						add: Liferay.Language.get('select'),
+						cancel: Liferay.Language.get('cancel')
+					},
+					title,
+					url: uri
+				});
+
+				itemSelectorDialog.open();
+			});
+		} else {
+			Liferay.Util.selectEntity(
+				{
+					dialog: {
+						constrain: true,
+						destroyOnHide: true,
+						modal: true
+					},
+					id,
+					title,
+					uri
+				},
+				event => {
+					onChange({
+						displayValue: event.entityname,
+						value: event.entityid
+					});
+				}
+			);
+		}
+	};
+
 	render() {
 		const {disabled} = this.props;
 		const {key, value} = this._stringToKeyValueObject(this.props.value);
 
 		return (
 			<>
-				<input
-					className="criterion-input form-control"
-					data-testid="collection-key-input"
-					disabled={disabled}
-					onChange={this._handleKeyChange}
-					onKeyDown={this._handleKeyDown}
-					placeholder={Liferay.Language.get('key')}
-					type="text"
-					value={key}
-				/>
+				<div className="criterion-input input-group">
+					<input
+						className="form-control"
+						data-testid="collection-key-input"
+						disabled={disabled}
+						onChange={this._handleKeyChange}
+						onKeyDown={this._handleKeyDown}
+						placeholder={Liferay.Language.get('key')}
+						type="text"
+						value={key}
+					/>
+					<div className="input-group-append">
+						<button
+							className="btn btn-secondary"
+							id="button-addon1"
+							onClick={this._handleSelectEntity}
+							type="button"
+						>
+							{Liferay.Language.get('select')}
+						</button>
+					</div>
+				</div>
 
 				<input
 					className="criterion-input form-control"

modules/apps/segments/segments-web/src/main/resources/META-INF/resources/js/components/inputs/StringInput.es.js

@@ -21,6 +21,12 @@ class StringInput extends React.Component {
 		disabled: propTypes.bool,
 		onChange: propTypes.func.isRequired,
 		options: propTypes.array,
+		selectEntity: propTypes.shape({
+			id: propTypes.string,
+			multiple: propTypes.bool,
+			title: propTypes.string,
+			uri: propTypes.string
+		}),
 		value: propTypes.oneOfType([propTypes.string, propTypes.number])
 	};
 
@@ -32,18 +38,94 @@ class StringInput extends React.Component {
 		this.props.onChange({value: event.target.value});
 	};
 
+	/**
+	 * Opens a modal for selecting entities. Uses different methods for
+	 * selecting multiple entities versus single because of the way the event
+	 * and data is submitted.
+	 */
+	_handleSelectEntity = () => {
+		const {
+			onChange,
+			selectEntity: {id, multiple, title, uri}
+		} = this.props;
+
+		if (multiple) {
+			AUI().use('liferay-item-selector-dialog', A => {
+				const itemSelectorDialog = new A.LiferayItemSelectorDialog({
+					eventName: id,
+					on: {
+						selectedItemChange: event => {
+							const newVal = event.newVal;
+
+							if (newVal) {
+								const selectedValues = event.newVal.map(
+									item => ({
+										displayValue: item.name,
+										value: item.id
+									})
+								);
+
+								onChange(selectedValues);
+							}
+						}
+					},
+					strings: {
+						add: Liferay.Language.get('select'),
+						cancel: Liferay.Language.get('cancel')
+					},
+					title,
+					url: uri
+				});
+
+				itemSelectorDialog.open();
+			});
+		} else {
+			Liferay.Util.selectEntity(
+				{
+					dialog: {
+						constrain: true,
+						destroyOnHide: true,
+						modal: true
+					},
+					id,
+					title,
+					uri
+				},
+				event => {
+					onChange({
+						displayValue: event.entityname,
+						value: event.entityid
+					});
+				}
+			);
+		}
+	};
+
 	render() {
 		const {disabled, options, value} = this.props;
 
 		return options.length === 0 ? (
-			<input
-				className="criterion-input form-control"
-				data-testid="simple-string"
-				disabled={disabled}
-				onChange={this._handleChange}
-				type="text"
-				value={value}
-			/>
+			<div className="criterion-input input-group">
+				<input
+					className="form-control"
+					data-testid="simple-string"
+					disabled={disabled}
+					onChange={this._handleChange}
+					placeholder={Liferay.Language.get('value')}
+					type="text"
+					value={value}
+				/>
+				<div className="input-group-append">
+					<button
+						className="btn btn-secondary"
+						id="button-addon1"
+						onClick={this._handleSelectEntity}
+						type="button"
+					>
+						{Liferay.Language.get('select')}
+					</button>
+				</div>
+			</div>
 		) : (
 			<ClaySelectWithOption
 				className="criterion-input form-control"