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,25 +25,27 @@ const views = [
 		name: 'list',
 		schema: {
 			description: 'description',
+			isItemInvalid: 'isItemInvalid',
 			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'
-					}
-				}
-
+						isItemInvalid: true,
+						tooltipText: Liferay.Language.get(
+							'no-visualization-modes-has-been-defined'
+						),
+					},
+				};
 			}
 
 			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;
+	isItemInvalid?: 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,
+			isItemInvalid,
+			sticker,
+			symbol,
+			title,
+			titleRenderer,
+			tooltipText,
+		} = schema;
 
 		const SelectionInput =
 			selectionType === 'single' ? ClayRadio : ClayCheckbox;
@@ -94,32 +104,47 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 				active: selectedItemsValue?.includes(itemId),
 			}),
 			flex: true,
+			...clayListItemProps
 		};
 
+		const invalid =
+			isItemInvalid && item[isItemInvalid] === true && tooltipText;
+
 		return (
-			<ClayList.Item
-				{...props}
-				ref={ref}
-			>
-				{!selectable ? (
+			<ClayList.Item {...props} ref={ref}>
+				{selectable && (
 					<ClayList.ItemField className="justify-content-center selection-control">
-						<SelectionInput
-							checked={
-								selectedItemsValue
-									? selectedItemsValue
-											.map((element) => String(element))
-											.includes(String(itemId))
-									: false
-							}
-							onChange={() => {
-								onItemSelectionChange(item);
-							}}
-							value={itemId}
-						/>
+						<ClaySticker displayType="unstyled">
+							<SelectionInput
+								checked={
+									selectedItemsValue
+										? selectedItemsValue
+												.map((element) =>
+													String(element)
+												)
+												.includes(String(itemId))
+										: false
+								}
+								onChange={() => {
+									onItemSelectionChange(item);
+								}}
+								value={itemId}
+							/>
+						</ClaySticker>
+					</ClayList.ItemField>
+				)}
+
+				{invalid && (
+					<ClayList.ItemField>
+						<ClayTooltipProvider>
+							<span title={item[tooltipText]}>
+								<ClaySticker displayType="warning">
+									<ClayIcon symbol="exclamation-circle" />
+								</ClaySticker>
+							</span>
+						</ClayTooltipProvider>
 					</ClayList.ItemField>
-				):
-				<ClayList.ItemField className="justify-content-center selection-control"></ClayList.ItemField>
-				}
+				)}
 
 				{image && item[image] ? (
 					<ClayList.ItemField>
@@ -160,7 +185,7 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 					className="justify-content-center"
 					expand
 					onClick={() => {
-						if (selectable) {
+						if (selectable && !invalid) {
 							onItemSelectionChange(item, true);
 						}
 					}}
@@ -178,28 +203,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 +240,11 @@ const ListItemOptionalDropTarget = ({
 
 	const props = {
 		className,
+		clayListItemProps,
 		item,
 		items,
 		onItemSelectionChange,
-		ref:dropRef,
+		ref: dropRef,
 		schema,
 	};