Skip to content

LPD-24670 | Inform about Data Sets without visualization mode when selecting Data Set #5122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

LPD-24670 | Inform about Data Sets without visualization mode when selecting Data Set #5122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
803647e
LPD-24670 Inform about Data Sets without visualization mode when sele…
chestofwonders Oct 9, 2025
0ed79ca
LPD-24670 Check selected item has no visualization modes. In the case…
dsanz Oct 7, 2025
1c6bd75
LPD-24670 Avoid mutating item by hoisting setItemComponentPropsTransf…
dsanz Oct 9, 2025
4c097b0
LPD-24670 Mark invalid items without mutating the original ones
chestofwonders Oct 9, 2025
1a6c46b
LPD-24670 Test Automation
chestofwonders Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion ...et-admin-web/src/main/resources/META-INF/resources/item/selector/FDSAdminItemSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,33 @@ const views = [
symbol: 'symbol',
title: 'label',
},
setItemComponentProps: ({item, props}: {item: any; props: any}) => {
if (
!item.dataSetToDataSetCardsSections.length &&
!item.dataSetToDataSetTableSections.length &&
!item.dataSetToDataSetListSections.length
) {
return {
...props,
item: {
...item,
_isItemValid: false,
_warningTooltipText: Liferay.Language.get(
'no-visualization-modes-have-been-defined'
),
},
};
}
else {
return {
...props,
item: {
...item,
_isItemValid: true,
},
};
}
},
},
];

Expand Down Expand Up @@ -67,7 +94,12 @@ const FDSAdminItemSelector = ({
<ClayModal.Body>
<FrontendDataSet
{...FDS_DEFAULT_PROPS}
apiURL={getDataSetResourceURL({})}
apiURL={getDataSetResourceURL({
params: {
nestedFields:
'dataSetToDataSetCardsSections, dataSetToDataSetTableSections, dataSetToDataSetListSections',
},
})}
id={`${namespace}FDSAdminItemSelector`}
onSelectedItemsChange={(
selectedItems: Array<ISelectedItem>
Expand Down
108 changes: 77 additions & 31 deletions ...-data-set/frontend-data-set-web/src/main/resources/META-INF/resources/views/list/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -56,12 +57,14 @@ const ListItem = forwardRef<HTMLLIElement, any>(
(
{
className,
clayListItemProps,
item,
items,
onItemSelectionChange,
schema,
}: {
className: string;
clayListItemProps: Object;
item: any;
items: any[];
onItemSelectionChange: Function;
Expand All @@ -77,10 +80,6 @@ const ListItem = forwardRef<HTMLLIElement, any>(
selectionType,
} = useContext(FrontendDataSetContext);

const [viewsContext] = useContext(ViewsContext);

const activeView: IView = viewsContext.activeView;

const {description, image, sticker, symbol, title, titleRenderer} =
schema;

Expand All @@ -97,14 +96,11 @@ const ListItem = forwardRef<HTMLLIElement, any>(
active: selectedItemsValue?.includes(itemId),
}),
flex: true,
...clayListItemProps,
};

return (
<ClayList.Item
{...props}
{...(activeView.setItemComponentProps?.({item, props}) ?? {})}
ref={ref}
>
<ClayList.Item {...props} ref={ref}>
{selectable && (
<ClayList.ItemField className="justify-content-center selection-control">
<SelectionInput
Expand All @@ -123,6 +119,29 @@ const ListItem = forwardRef<HTMLLIElement, any>(
</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>
<ImageRenderer
Expand All @@ -134,11 +153,23 @@ const ListItem = forwardRef<HTMLLIElement, any>(
symbol &&
item[symbol] && (
<ClayList.ItemField>
<ClaySticker {...(sticker && item[sticker])}>
{item[symbol] && (
<ClayIcon symbol={item[symbol]} />
)}
</ClaySticker>
<ClayTooltipProvider>
<span
className="ml-1 text-secondary"
data-tooltip-align="top"
title={Liferay.Language.get(
'no-visualization-modes-has-been-defined'
)}
>
<ClaySticker
{...(sticker && item[sticker])}
>
{item[symbol] && (
<ClayIcon symbol={item[symbol]} />
)}
</ClaySticker>
</span>
</ClayTooltipProvider>
</ClayList.ItemField>
)
)}
Expand All @@ -165,45 +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});

return (
<ListItem
className={className}
item={item}
items={items}
onItemSelectionChange={onItemSelectionChange}
ref={dropRef}
schema={schema}
/>
);
const props = {
className,
clayListItemProps,
item,
items,
onItemSelectionChange,
ref: dropRef,
schema,
};

return <ListItem {...props} />;
};

const List = ({
Expand All @@ -219,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', {
Expand All @@ -240,7 +284,6 @@ const List = ({
{items.map((item: any, index: number) => (
<ListItemOptionalDropTarget
item={item}
items={items}
key={
selectedItemsKey
? getObjectValueFromPath({
Expand All @@ -249,8 +292,11 @@ const List = ({
})
: index
}
onItemSelectionChange={onItemSelectionChange}
schema={schema}
{...props}
{...(activeView.setItemComponentProps?.({
item,
props,
}) ?? {})}
/>
))}
</ClayList>
Expand Down
1 change: 1 addition & 0 deletions .../apps/portal-language/portal-language-lang/src/main/resources/content/Language.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12832,6 +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-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.
Expand Down
24 changes: 23 additions & 1 deletion ...laywright/tests/frontend-data-set-admin-web/main/tests/data-set-fragment/dataSets.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,14 @@ test(
async ({dataSetFragmentPage, dataSetManagerApiHelpers, layout, page}) => {
const dataSetERC1 = getRandomString();
const dataSetERC2 = getRandomString();
const dataSetERC3 = getRandomString();
const dataSetLabel1 = getRandomString();
const dataSetLabel2 = getRandomString();
const dataSetLabel3 = getRandomString();

dataSetERCs.push(dataSetERC1);
dataSetERCs.push(dataSetERC2);
dataSetERCs.push(dataSetERC3);

const dataSetInput1 =
dataSetFragmentPage.selectDataSetModalFrame.locator(
Expand All @@ -104,6 +107,10 @@ test(
dataSetFragmentPage.selectDataSetModalFrame.locator(
`li:has-text("${dataSetLabel2}") input.custom-control-input`
);
const dataSetInput3 =
dataSetFragmentPage.selectDataSetModalFrame.locator(
`li:has-text("${dataSetLabel3}")`
);

await test.step('Create data sets', async () => {
await dataSetManagerApiHelpers.createDataSet({
Expand All @@ -115,6 +122,11 @@ test(
erc: dataSetERC2,
label: dataSetLabel2,
});

await dataSetManagerApiHelpers.createDataSet({
erc: dataSetERC3,
label: dataSetLabel3,
});
});

await test.step('Create sample data for data sets', async () => {
Expand All @@ -141,15 +153,25 @@ test(
await dataSetFragmentPage.addDataSetFragment(layout);
});

await test.step('Check that only one data set can be selected', async () => {
await test.step('Open Data Set selection list', async () => {
await dataSetFragmentPage.selectDataSetButton.click();

await page.getByRole('dialog').isVisible();

await page.getByRole('heading', {name: 'Select'}).isVisible();

await dataSetFragmentPage.selectionListContainer.waitFor();
});

await test.step('Check that data set without visualization views are marked', async () => {
const warningIcon = dataSetInput3.locator(
'svg.lexicon-icon-exclamation-circle'
);

await expect(warningIcon).toBeVisible();
});

await test.step('Check that only one data set can be selected', async () => {
await dataSetInput1.setChecked(true);

await expect(dataSetInput1).toBeChecked();
Expand Down