LPD-24670 Mark invalid items without mutating the original ones

Author: chestofwonders

modules/apps/frontend-data-set/frontend-data-set-admin-web/src/main/resources/META-INF/resources/item/selector/FDSAdminItemSelector.tsx

@@ -25,28 +25,36 @@ const views = [
 		name: 'list',
 		schema: {
 			description: 'description',
+			isItemValid: 'isItemValid',
 			symbol: 'symbol',
 			title: 'label',
+			tooltipText: 'tooltipText',
 		},
 		setItemComponentProps: ({item, props}: {item: any; props: any}) => {
 			if (
 				!item.dataSetToDataSetCardsSections.length &&
 				!item.dataSetToDataSetTableSections.length &&
 				!item.dataSetToDataSetListSections.length
 			) {
-
 				return {
-					...props, // we need to avoid item mutation
+					...props,
 					item: {
 						...item,
-						symbol: 'warning',
-						tooltip: 'perico'
-					}
-				}
-
+						isItemValid: false,
+						tooltipText: Liferay.Language.get(
+							'no-visualization-modes-has-been-defined'
+						),
+					},
+				};
+			} else {
+				return {
+					...props,
+					item: {
+						...item,
+						isItemValid: true,
+					},
+				};
 			}
-
-			return props;
 		},
 	},
 ];

modules/apps/frontend-data-set/frontend-data-set-web/src/main/resources/META-INF/resources/utils/types.ts

@@ -244,10 +244,12 @@ export interface IListTitleRenderer {
 export interface IListSchema {
 	description: string;
 	image?: string;
+	isItemValid?: string;
 	sticker?: string;
 	symbol: string;
 	title: string;
 	titleRenderer: IListTitleRenderer;
+	tooltipText?: string;
 }
 
 export type ISchema = ITableSchema | ICardSchema | IListSchema;

modules/apps/frontend-data-set/frontend-data-set-web/src/main/resources/META-INF/resources/views/list/List.tsx

@@ -8,6 +8,7 @@ import ClayIcon from '@clayui/icon';
 import ClayLayout from '@clayui/layout';
 import ClayList from '@clayui/list';
 import ClaySticker from '@clayui/sticker';
+import {ClayTooltipProvider} from '@clayui/tooltip';
 import classNames from 'classnames';
 import {getObjectValueFromPath} from 'frontend-js-web';
 import React, {forwardRef, useContext} from 'react';
@@ -25,7 +26,6 @@ import {
 	IView,
 } from '../../utils/types';
 import ViewsContext from '../ViewsContext';
-import Tooltip, { ClayTooltipProvider } from '@clayui/tooltip';
 
 const Title = ({
 	item,
@@ -57,12 +57,14 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 	(
 		{
 			className,
+			clayListItemProps,
 			item,
 			items,
 			onItemSelectionChange,
 			schema,
 		}: {
 			className: string;
+			clayListItemProps: Object;
 			item: any;
 			items: any[];
 			onItemSelectionChange: Function;
@@ -78,8 +80,16 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 			selectionType,
 		} = useContext(FrontendDataSetContext);
 
-		const {description, image, sticker, symbol, title, titleRenderer} =
-			schema;
+		const {
+			description,
+			image,
+			isItemValid,
+			sticker,
+			symbol,
+			title,
+			titleRenderer,
+			tooltipText,
+		} = schema;
 
 		const SelectionInput =
 			selectionType === 'single' ? ClayRadio : ClayCheckbox;
@@ -94,14 +104,14 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 				active: selectedItemsValue?.includes(itemId),
 			}),
 			flex: true,
+			...clayListItemProps,
 		};
 
+		const itemValid = isItemValid && item[isItemValid] === true;
+
 		return (
-			<ClayList.Item
-				{...props}
-				ref={ref}
-			>
-				{!selectable ? (
+			<ClayList.Item {...props} ref={ref}>
+				{selectable && (
 					<ClayList.ItemField className="justify-content-center selection-control">
 						<SelectionInput
 							checked={
@@ -117,9 +127,29 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 							value={itemId}
 						/>
 					</ClayList.ItemField>
-				):
-				<ClayList.ItemField className="justify-content-center selection-control"></ClayList.ItemField>
-				}
+				)}
+
+				{isItemValid && item[isItemValid] === false && tooltipText && (
+					<ClayList.ItemField>
+						<ClayTooltipProvider>
+							<span title={item[tooltipText]}>
+								<ClaySticker displayType="warning">
+									<ClayIcon symbol="exclamation-circle" />
+								</ClaySticker>
+							</span>
+						</ClayTooltipProvider>
+					</ClayList.ItemField>
+				)}
+
+				{isItemValid && item[isItemValid] === true && (
+					<ClayList.ItemField>
+						<ClayTooltipProvider>
+							<ClaySticker displayType="unstyled">
+								<ClayIcon symbol="catalog" />
+							</ClaySticker>
+						</ClayTooltipProvider>
+					</ClayList.ItemField>
+				)}
 
 				{image && item[image] ? (
 					<ClayList.ItemField>
@@ -133,25 +163,22 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 					item[symbol] && (
 						<ClayList.ItemField>
 							<ClayTooltipProvider>
-									<span
-										className="ml-1 text-secondary"
-										data-tooltip-align="top"
-										title={Liferay.Language.get(
-											'no-visualization-modes-has-been-defined'
-										)}
+								<span
+									className="ml-1 text-secondary"
+									data-tooltip-align="top"
+									title={Liferay.Language.get(
+										'no-visualization-modes-has-been-defined'
+									)}
+								>
+									<ClaySticker
+										{...(sticker && item[sticker])}
 									>
-									<ClaySticker {...(sticker && item[sticker])}>
-								{item[symbol] && (
-									<ClayIcon symbol={item[symbol]} />
-								)}
-		
-							</ClaySticker>
-									</span>
-
-									
-								</ClayTooltipProvider>
-						
-			
+										{item[symbol] && (
+											<ClayIcon symbol={item[symbol]} />
+										)}
+									</ClaySticker>
+								</span>
+							</ClayTooltipProvider>
 						</ClayList.ItemField>
 					)
 				)}
@@ -178,28 +205,30 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 					)}
 				</ClayList.ItemField>
 
-				<ClayList.ItemField>
-					{(itemsActions || item.actionDropdownItems) && (
+				{(itemsActions || item.actionDropdownItems) && (
+					<ClayList.ItemField>
 						<Actions
 							actions={itemsActions || item.actionDropdownItems}
 							itemData={item}
 							itemId={itemId}
 							items={items}
 							onItemSelectionChange={onItemSelectionChange}
 						/>
-					)}
-				</ClayList.ItemField>
+					</ClayList.ItemField>
+				)}
 			</ClayList.Item>
 		);
 	}
 );
 
 const ListItemOptionalDropTarget = ({
+	clayListItemProps,
 	item,
 	items,
 	onItemSelectionChange,
 	schema,
 }: {
+	clayListItemProps?: object;
 	item: any;
 	items: any[];
 	onItemSelectionChange: Function;
@@ -213,10 +242,11 @@ const ListItemOptionalDropTarget = ({
 
 	const props = {
 		className,
+		clayListItemProps,
 		item,
 		items,
 		onItemSelectionChange,
-		ref:dropRef,
+		ref: dropRef,
 		schema,
 	};