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

@@ -34,19 +34,26 @@ const views = [
 				!item.dataSetToDataSetTableSections.length &&
 				!item.dataSetToDataSetListSections.length
 			) {
-
 				return {
-					...props, // we need to avoid item mutation
+					...props,
 					item: {
 						...item,
-						symbol: 'warning',
-						tooltip: 'perico'
-					}
-				}
-
+						_isItemValid: false,
+						_warningTooltipText: Liferay.Language.get(
+							'no-visualization-modes-have-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;
@@ -94,14 +96,12 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 				active: selectedItemsValue?.includes(itemId),
 			}),
 			flex: true,
+			...clayListItemProps,
 		};
 
 		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 +117,30 @@ const ListItem = forwardRef<HTMLLIElement, any>(
 							value={itemId}
 						/>
 					</ClayList.ItemField>
-				):
-				<ClayList.ItemField className="justify-content-center selection-control"></ClayList.ItemField>
-				}
+				)}
+
+				{item['_isItemValid'] === false &&
+					item['_warningTooltipText'] && (
+						<ClayList.ItemField>
+							<ClayTooltipProvider>
+								<span title={item['_warningTooltipText']}>
+									<ClaySticker displayType="warning">
+										<ClayIcon symbol="exclamation-circle" />
+									</ClaySticker>
+								</span>
+							</ClayTooltipProvider>
+						</ClayList.ItemField>
+					)}
+
+				{item['_isItemValid'] === true && (
+					<ClayList.ItemField>
+						<ClayTooltipProvider>
+							<ClaySticker displayType="unstyled">
+								<ClayIcon symbol="catalog" />
+							</ClaySticker>
+						</ClayTooltipProvider>
+					</ClayList.ItemField>
+				)}
 
 				{image && item[image] ? (
 					<ClayList.ItemField>
@@ -133,25 +154,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,54 +196,48 @@ 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;
 	schema: IListSchema;
 }) => {
 	const {className, dropRef} = useFDSDrop({item});
 
-	const [viewsContext] = useContext(ViewsContext);
-
-	const activeView: IView = viewsContext.activeView;
-
 	const props = {
 		className,
+		clayListItemProps,
 		item,
 		items,
 		onItemSelectionChange,
-		ref:dropRef,
+		ref: dropRef,
 		schema,
 	};
 
-	return (
-		<ListItem
-			{...props}
-			{...(activeView.setItemComponentProps?.({item, props}) ?? {})}
-		/>
-	);
+	return <ListItem {...props} />;
 };
 
 const List = ({
@@ -241,10 +253,20 @@ const List = ({
 }) => {
 	const {selectedItemsKey} = useContext(FrontendDataSetContext);
 
+	const [viewsContext] = useContext(ViewsContext);
+
 	if (!items?.length) {
 		return null;
 	}
 
+	const activeView: IView = viewsContext.activeView;
+
+	const props = {
+		items,
+		onItemSelectionChange,
+		schema,
+	};
+
 	return (
 		<ClayLayout.Sheet
 			className={classNames('list-sheet', {
@@ -262,7 +284,6 @@ const List = ({
 					{items.map((item: any, index: number) => (
 						<ListItemOptionalDropTarget
 							item={item}
-							items={items}
 							key={
 								selectedItemsKey
 									? getObjectValueFromPath({
@@ -271,8 +292,11 @@ const List = ({
 										})
 									: index
 							}
-							onItemSelectionChange={onItemSelectionChange}
-							schema={schema}
+							{...props}
+							{...(activeView.setItemComponentProps?.({
+								item,
+								props,
+							}) ?? {})}
 						/>
 					))}
 				</ClayList>

modules/apps/portal-language/portal-language-lang/src/main/resources/content/Language.properties

@@ -12832,7 +12832,7 @@ no-variations=No Variations
 no-version-was-found=No version was found.
 no-video-preview-available=No video preview available.
 no-views-created=No Views Created
-no-visualization-modes-has-been-defined=No visualization modes has been defined. The Data Set will not be displayed.
+no-visualization-modes-have-been-defined=No visualization modes have been defined. The Data Set will not be displayed.
 no-vocabularies=No Vocabularies
 no-vocabularies-yet=No Vocabularies Yet
 no-warehouses-were-found=No warehouses were found.