IBX-9449: Product Picker base object selection with variants

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_search.scss

@@ -1,5 +1,6 @@
 .c-search {
     height: 100%;
+    width: 100%;
 
     &__top-bar {
         display: flex;

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.items.panel.item.scss

@@ -1,3 +1,19 @@
 .c-selected-items-panel-item {
     @include c-selected-items-panel-item;
+
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+
+    &__main-content,
+    &__extra-content {
+        width: 100%;
+    }
+
+    &__main-content {
+        display: flex;
+        align-items: center;
+        padding: calculateRem(8px);
+        margin-bottom: calculateRem(8px);
+    }
 }

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_selected.items.panel.scss

@@ -1,3 +1,5 @@
 .c-selected-items-panel {
     @include c-selected-items-panel;
+
+    width: calculateRem(400px);
 }

src/bundle/ui-dev/src/modules/common/middle-ellipsis/middle.ellipsis.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { parse as parseMiddleEllipsis } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis';
+
+const MiddleEllipsis = ({ name }) => {
+    return (
+        <span className="ibexa-middle-ellipsis" title={name} ref={(node) => parseMiddleEllipsis(node)}>
+            <span className="ibexa-middle-ellipsis__name ibexa-middle-ellipsis__name--start">
+                <span className="ibexa-middle-ellipsis__name-ellipsized">{name}</span>
+            </span>
+            <span className="ibexa-middle-ellipsis__separator">...</span>
+            <span className="ibexa-middle-ellipsis__name ibexa-middle-ellipsis__name--end">
+                <span className="ibexa-middle-ellipsis__name-ellipsized">{name}</span>
+            </span>
+        </span>
+    );
+};
+
+MiddleEllipsis.propTypes = {
+    name: PropTypes.string.isRequired,
+};
+
+export default MiddleEllipsis;

src/bundle/ui-dev/src/modules/common/popup/popup.component.js

@@ -32,6 +32,7 @@ const Popup = ({
     actionBtnsConfig,
     size,
     noHeader,
+    noFooter,
     noCloseBtn,
     extraClasses,
     showTooltip,
@@ -122,20 +123,24 @@ const Popup = ({
                               </div>
                           )}
                     <div className="modal-body c-popup__body">{children}</div>
-                    <div className="modal-footer c-popup__footer">
-                        {actionBtnsConfig.map(({ className, onClick, disabled = false, preventClose = false, label, ...extraProps }) => (
-                            <button
-                                key={label}
-                                type="button"
-                                className={`btn ibexa-btn ${className}`}
-                                onClick={onClick ? (event) => handleOnClick(event, onClick, preventClose) : hidePopup}
-                                disabled={disabled}
-                                {...extraProps}
-                            >
-                                {label}
-                            </button>
-                        ))}
-                    </div>
+                    {!noFooter && (
+                        <div className="modal-footer c-popup__footer">
+                            {actionBtnsConfig.map(
+                                ({ className, onClick, disabled = false, preventClose = false, label, ...extraProps }) => (
+                                    <button
+                                        key={label}
+                                        type="button"
+                                        className={`btn ibexa-btn ${className}`}
+                                        onClick={onClick ? (event) => handleOnClick(event, onClick, preventClose) : hidePopup}
+                                        disabled={disabled}
+                                        {...extraProps}
+                                    >
+                                        {label}
+                                    </button>
+                                ),
+                            )}
+                        </div>
+                    )}
                 </div>
             </div>
         </div>
@@ -160,6 +165,7 @@ Popup.propTypes = {
     hasFocus: PropTypes.bool,
     size: PropTypes.string,
     noHeader: PropTypes.bool,
+    noFooter: PropTypes.bool,
     noCloseBtn: PropTypes.bool,
     noKeyboard: PropTypes.bool,
     extraClasses: PropTypes.string,
@@ -172,6 +178,7 @@ Popup.defaultProps = {
     onClose: null,
     size: 'large',
     noHeader: false,
+    noFooter: false,
     noCloseBtn: false,
     extraClasses: '',
     title: null,

src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js

@@ -13,7 +13,7 @@ import { SelectedItemsContext } from '../../universal.discovery.module';
 
 import { REMOVE_SELECTED_ITEMS } from '../../hooks/useSelectedItemsReducer';
 
-const SelectedItemsPanelItem = ({ item, thumbnailData, name, description }) => {
+const SelectedItemsPanelItem = ({ item, thumbnailData, name, description, extraContent }) => {
     const adminUiConfig = getAdminUiConfig();
     const Translator = getTranslator();
     const refSelectedLocationsItem = useRef(null);
@@ -25,7 +25,7 @@ const SelectedItemsPanelItem = ({ item, thumbnailData, name, description }) => {
     );
     const removeFromSelection = () => {
         hideAllTooltips(refSelectedLocationsItem.current);
-        dispatchSelectedItemsAction({ type: REMOVE_SELECTED_ITEMS, ids: [{ id: item.id, type: item.type }] });
+        dispatchSelectedItemsAction({ type: REMOVE_SELECTED_ITEMS, itemsIdsWithTypes: [{ id: item.id, type: item.type }] });
     };
     const sortedActions = useMemo(() => {
         const { universalSelectItemActions } = adminUiConfig.universalDiscoveryWidget;
@@ -44,29 +44,32 @@ const SelectedItemsPanelItem = ({ item, thumbnailData, name, description }) => {
                 parseTooltip(node);
             }}
         >
-            <div className="c-selected-items-panel-item__image-wrapper">
-                <Thumbnail thumbnailData={thumbnailData} iconExtraClasses="ibexa-icon--small" />
-            </div>
-            <div className="c-selected-items-panel-item__info">
-                <span className="c-selected-items-panel-item__info-name">{name}</span>
-                <span className="c-selected-items-panel-item__info-description">{description}</span>
-            </div>
-            <div className="c-selected-items-panel-item__actions-wrapper">
-                {sortedActions.map((action) => {
-                    const Component = action.component;
+            <div className="c-selected-items-panel-item__main-content">
+                <div className="c-selected-items-panel-item__image-wrapper">
+                    <Thumbnail thumbnailData={thumbnailData} iconExtraClasses="ibexa-icon--small" />
+                </div>
+                <div className="c-selected-items-panel-item__info">
+                    <span className="c-selected-items-panel-item__info-name">{name}</span>
+                    <span className="c-selected-items-panel-item__info-description">{description}</span>
+                </div>
+                <div className="c-selected-items-panel-item__actions-wrapper">
+                    {sortedActions.map((action) => {
+                        const Component = action.component;
 
-                    return <Component key={action.id} item={item} />;
-                })}
-                <button
-                    type="button"
-                    className="c-selected-items-panel-item__remove-button btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text"
-                    onClick={removeFromSelection}
-                    title={removeItemLabel}
-                    data-tooltip-container-selector=".c-udw-tab"
-                >
-                    <Icon name="discard" extraClasses="ibexa-icon--tiny-small" />
-                </button>
+                        return <Component key={action.id} item={item} />;
+                    })}
+                    <button
+                        type="button"
+                        className="c-selected-items-panel-item__remove-button btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text"
+                        onClick={removeFromSelection}
+                        title={removeItemLabel}
+                        data-tooltip-container-selector=".c-udw-tab"
+                    >
+                        <Icon name="discard" extraClasses="ibexa-icon--tiny-small" />
+                    </button>
+                </div>
             </div>
+            <div className="c-selected-items-panel-item__extra-content">{extraContent}</div>
         </div>
     );
 };
@@ -78,7 +81,12 @@ SelectedItemsPanelItem.propTypes = {
         resource: PropTypes.string.isRequired,
     }).isRequired,
     name: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
+    description: PropTypes.node.isRequired,
+    extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+};
+
+SelectedItemsPanelItem.defaultProps = {
+    extraContent: null,
 };
 
 export default SelectedItemsPanelItem;

src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js

@@ -1,12 +1,13 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import { MultipleConfigContext, SelectedItemsContext } from '../../universal.discovery.module';
 
-const ToggleItemSelection = ({ item, isDisabled, isHidden }) => {
+const ToggleItemSelection = ({ item, isDisabled, isPreselected, isHidden, isIndeterminate }) => {
     const { selectedItems } = useContext(SelectedItemsContext);
     const [multiple, multipleItemsLimit] = useContext(MultipleConfigContext);
+    const inputRef = useRef(null);
     const isSelected = selectedItems.some((selectedItem) => selectedItem.type === item.type && selectedItem.id === item.id);
     const isSelectionBlocked = multipleItemsLimit !== 0 && selectedItems.length >= multipleItemsLimit && !isSelected;
     const className = createCssClassNames({
@@ -17,11 +18,20 @@ const ToggleItemSelection = ({ item, isDisabled, isHidden }) => {
     });
     const inputType = multiple ? 'checkbox' : 'radio';
 
+    useEffect(() => {
+        if (!inputRef.current) {
+            return;
+        }
+
+        inputRef.current.indeterminate = isIndeterminate;
+    }, [isIndeterminate]);
+
     return (
         <input
+            ref={inputRef}
             type={inputType}
             className={className}
-            checked={isSelected}
+            checked={isPreselected || isSelected}
             disabled={isSelectionBlocked || isDisabled || isHidden}
             readOnly={true}
         />
@@ -32,11 +42,15 @@ ToggleItemSelection.propTypes = {
     item: PropTypes.object.isRequired,
     isHidden: PropTypes.bool,
     isDisabled: PropTypes.bool,
+    isPreselected: PropTypes.bool,
+    isIndeterminate: PropTypes.bool,
 };
 
 ToggleItemSelection.defaultProps = {
     isHidden: false,
     isDisabled: false,
+    isPreselected: false,
+    isIndeterminate: false,
 };
 
 export default ToggleItemSelection;

src/bundle/ui-dev/src/modules/universal-discovery/hooks/usePaginableFetch.js

@@ -1,6 +1,4 @@
-import { useEffect, useContext, useReducer } from 'react';
-
-import { RestInfoContext } from '../universal.discovery.module';
+import { useEffect, useReducer } from 'react';
 
 const fetchInitialState = {
     isLoading: false,
@@ -40,8 +38,7 @@ const fetchReducer = (state, action) => {
     }
 };
 
-export const usePaginableFetch = ({ itemsPerPage, extraFetchParams }, fetchFunction) => {
-    const restInfo = useContext(RestInfoContext);
+export const usePaginableFetch = ({ restInfo, itemsPerPage, extraFetchParams }, fetchFunction) => {
     const [state, dispatch] = useReducer(fetchReducer, fetchInitialState);
     const changePage = (pageIndex) => dispatch({ type: CHANGE_PAGE, pageIndex });
 

src/bundle/ui-dev/src/modules/universal-discovery/hooks/useSelectedItemsReducer.js

@@ -1,6 +1,7 @@
 import { useReducer } from 'react';
 
 export const ADD_SELECTED_ITEMS = 'ADD_SELECTED_ITEMS';
+export const UPDATE_SELECTED_ITEMS = 'UPDATE_SELECTED_ITEMS';
 export const REMOVE_SELECTED_ITEMS = 'REMOVE_SELECTED_ITEMS';
 export const TOGGLE_SELECTED_ITEMS = 'TOGGLE_SELECTED_ITEMS';
 export const CLEAR_SELECTED_ITEMS = 'CLEAR_SELECTED_ITEMS';
@@ -31,8 +32,29 @@ const selectedItemsReducer = (state, action) => {
                 items: newItems,
             };
         }
+        case UPDATE_SELECTED_ITEMS: {
+            const updatedSelectedItems = [...items];
+
+            for (const updatedItem of action.items) {
+                const updatedItemIndex = updatedSelectedItems.findIndex(
+                    (selectedItem) => selectedItem.type === updatedItem.type && selectedItem.id === updatedItem.id,
+                );
+
+                if (updatedItemIndex > -1) {
+                    updatedSelectedItems[updatedItemIndex] = updatedItem;
+                }
+            }
+
+            return {
+                ...state,
+                items: updatedSelectedItems,
+            };
+        }
         case REMOVE_SELECTED_ITEMS:
-            return filterOutSelectedItems(action.itemsIdsWithTypes, items);
+            return {
+                ...state,
+                items: filterOutSelectedItems(action.itemsIdsWithTypes, items),
+            };
         case TOGGLE_SELECTED_ITEMS: {
             const oldItemsWithoutDeselectedItems = filterOutSelectedItems(action.items, items);
             const newItemsWithoutDeselectedItems = filterOutSelectedItems(items, action.items);

src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js

@@ -260,6 +260,7 @@ const UniversalDiscoveryModule = (props) => {
         return {
             isInitLocationsDeselectionBlocked: props.isInitLocationsDeselectionBlocked,
             initSelectedLocationsIds: props.selectedLocations,
+            initSelectedItems: props.initSelectedItems,
             deselectAlertTitle: deselectAlertTitle,
         };
     }, []);
@@ -713,6 +714,7 @@ UniversalDiscoveryModule.propTypes = {
         }),
     ).isRequired,
     selectedLocations: PropTypes.array,
+    initSelectedItems: PropTypes.array,
     isInitLocationsDeselectionBlocked: PropTypes.bool,
     deselectAlertTitle: PropTypes.string,
     allowRedirects: PropTypes.bool.isRequired,
@@ -739,6 +741,7 @@ UniversalDiscoveryModule.defaultProps = {
     activeSortOrder: 'ascending',
     activeView: 'finder',
     selectedLocations: [],
+    initSelectedItems: [],
     isInitLocationsDeselectionBlocked: false,
     deselectAlertTitle: null,
     restInfo: defaultRestInfo,