Skip to content

Commit

Permalink
[Visualizations] legacy vis behavior on serverless (#176935)
Browse files Browse the repository at this point in the history
## Summary

Close #176536
Close #176742

### Links to legacy visualization editors are once again disabled
<img width="208" alt="Screenshot 2024-02-14 at 10 19 52 AM"
src="https://github.com/elastic/kibana/assets/315764/711f5372-d7f6-4f0d-88c6-605e528d6f13">

### A better message in the inspector
<img width="685" alt="Screenshot 2024-02-14 at 10 23 25 AM"
src="https://github.com/elastic/kibana/assets/315764/734a8f6a-0f00-46c7-8d27-2a86a24cf7ab">


### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
  • Loading branch information
3 people authored Feb 22, 2024
1 parent 5a3f0a0 commit 880f793
Show file tree
Hide file tree
Showing 9 changed files with 52 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const MSearchTable = () => {
title={`MSearch Demo`}
urlStateEnabled={false}
emptyPrompt={<>No data found. Try to install some sample data first.</>}
onClickTitle={(item) => {
getOnClickTitle={(item) => () => {
alert(`Clicked item ${item.attributes.title} (${item.id})`);
}}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export type TableListViewProps<T extends UserContentCommonSchema = UserContentCo
| 'editItem'
| 'deleteItems'
| 'getDetailViewLink'
| 'onClickTitle'
| 'getOnClickTitle'
| 'id'
| 'rowItemActions'
| 'contentEditor'
Expand Down Expand Up @@ -65,7 +65,7 @@ export const TableListView = <T extends UserContentCommonSchema>({
editItem,
deleteItems,
getDetailViewLink,
onClickTitle,
getOnClickTitle,
rowItemActions,
id: listingId,
contentEditor,
Expand Down Expand Up @@ -114,7 +114,7 @@ export const TableListView = <T extends UserContentCommonSchema>({
deleteItems={deleteItems}
rowItemActions={rowItemActions}
getDetailViewLink={getDetailViewLink}
onClickTitle={onClickTitle}
getOnClickTitle={getOnClickTitle}
id={listingId}
contentEditor={contentEditor}
titleColumnName={titleColumnName}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { TagBadge } from './tag_badge';

type InheritedProps<T extends UserContentCommonSchema> = Pick<
TableListViewTableProps<T>,
'onClickTitle' | 'getDetailViewLink' | 'id'
'getOnClickTitle' | 'getDetailViewLink' | 'id'
>;
interface Props<T extends UserContentCommonSchema> extends InheritedProps<T> {
item: T;
Expand All @@ -39,7 +39,7 @@ export function ItemDetails<T extends UserContentCommonSchema>({
item,
searchTerm = '',
getDetailViewLink,
onClickTitle,
getOnClickTitle,
onClickTag,
}: Props<T>) {
const {
Expand All @@ -59,20 +59,21 @@ export function ItemDetails<T extends UserContentCommonSchema>({
);

const onClickTitleHandler = useMemo(() => {
const onClickTitle = getOnClickTitle?.(item);
if (!onClickTitle || getDetailViewLink?.(item)) {
return undefined;
}

return ((e) => {
e.preventDefault();
onClickTitle(item);
onClickTitle();
}) as React.MouseEventHandler<HTMLAnchorElement>;
}, [item, onClickTitle, getDetailViewLink]);
}, [getOnClickTitle, item, getDetailViewLink]);

const renderTitle = useCallback(() => {
const href = getDetailViewLink ? getDetailViewLink(item) : undefined;

if (!href && !onClickTitle) {
if (!href && !getOnClickTitle?.(item)) {
// This item is not clickable
return <span>{title}</span>;
}
Expand All @@ -93,9 +94,9 @@ export function ItemDetails<T extends UserContentCommonSchema>({
);
}, [
getDetailViewLink,
getOnClickTitle,
id,
item,
onClickTitle,
onClickTitleHandler,
redirectAppLinksCoreStart,
searchTerm,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export interface TableListViewTableProps<
/** Handler to set the item title "href" value. If it returns undefined there won't be a link for this item. */
getDetailViewLink?: (entity: T) => string | undefined;
/** Handler to execute when clicking the item title */
onClickTitle?: (item: T) => void;
getOnClickTitle?: (item: T) => (() => void) | undefined;
createItem?(): void;
deleteItems?(items: T[]): Promise<void>;
/**
Expand Down Expand Up @@ -256,7 +256,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
editItem,
deleteItems,
getDetailViewLink,
onClickTitle,
getOnClickTitle,
id: listingId = 'userContent',
contentEditor = { enabled: false },
titleColumnName,
Expand All @@ -269,9 +269,9 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
setPageDataTestSubject(`${entityName}LandingPage`);
}, [entityName, setPageDataTestSubject]);

if (!getDetailViewLink && !onClickTitle) {
if (!getDetailViewLink && !getOnClickTitle) {
throw new Error(
`[TableListView] One o["getDetailViewLink" or "onClickTitle"] prop must be provided.`
`[TableListView] One o["getDetailViewLink" or "getOnClickTitle"] prop must be provided.`
);
}

Expand Down Expand Up @@ -443,19 +443,19 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({

if (item.managed) {
ret[item.id] = {
edit: {
enabled: false,
reason: i18n.translate('contentManagement.tableList.managedItemNoEdit', {
defaultMessage: 'This item is managed by Elastic. Clone it before making changes.',
}),
},
...ret[item.id],
delete: {
enabled: false,
reason: i18n.translate('contentManagement.tableList.managedItemNoDelete', {
defaultMessage: 'This item is managed by Elastic. It cannot be deleted.',
}),
},
edit: {
enabled: false,
reason: i18n.translate('contentManagement.tableList.managedItemNoEdit', {
defaultMessage: 'This item is managed by Elastic. Clone it before making changes.',
}),
},
};
}

Expand Down Expand Up @@ -517,7 +517,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
id={listingId}
item={record}
getDetailViewLink={getDetailViewLink}
onClickTitle={onClickTitle}
getOnClickTitle={getOnClickTitle}
onClickTag={(tag, withModifierKey) => {
if (withModifierKey) {
addOrRemoveExcludeTagFilter(tag);
Expand Down Expand Up @@ -623,7 +623,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
contentEditor.enabled,
listingId,
getDetailViewLink,
onClickTitle,
getOnClickTitle,
searchQuery.text,
addOrRemoveExcludeTagFilter,
addOrRemoveIncludeTagFilter,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -235,9 +235,9 @@ describe('annotation list view', () => {

it('opens editor when title is clicked', async () => {
act(() => {
wrapper.find(TableListViewTable).prop('onClickTitle')!({
wrapper.find(TableListViewTable).prop('getOnClickTitle')!({
id: '1234',
} as UserContentCommonSchema);
} as UserContentCommonSchema)!();
});

await new Promise((resolve) => setTimeout(resolve, 0));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export const EventAnnotationGroupTableList = ({
entityNamePlural={i18n.translate('eventAnnotationListing.tableList.entityNamePlural', {
defaultMessage: 'annotation groups',
})}
onClickTitle={editItem}
getOnClickTitle={(item) => () => editItem(item)}
{...parentProps}
/>
{flyout}
Expand Down
4 changes: 3 additions & 1 deletion src/plugins/files_management/public/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ export const App: FunctionComponent = () => {
initialFilter=""
initialPageSize={50}
listingLimit={1000}
onClickTitle={({ attributes }) => setSelectedFile(attributes as unknown as FileJSON)}
getOnClickTitle={({ attributes }) =>
() =>
setSelectedFile(attributes as unknown as FileJSON)}
deleteItems={async (items) => {
await filesClient.bulkDelete({ ids: items.map(({ id }) => id) });
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -261,8 +261,23 @@ const useTableListViewProps = (
editItem,
emptyPrompt: noItemsFragment,
createItem: createNewVis,
rowItemActions: ({ attributes: { readOnly } }) =>
!visualizeCapabilities.save || readOnly ? { edit: { enabled: false } } : undefined,
rowItemActions: ({ managed, attributes: { readOnly } }) =>
!visualizeCapabilities.save || readOnly
? {
edit: {
enabled: false,
reason: managed
? i18n.translate('visualizations.managedLegacyVisMessage', {
defaultMessage:
'This visualization is managed by Elastic and cannot be changed.',
})
: i18n.translate('visualizations.readOnlyLegacyVisMessage', {
defaultMessage:
"These details can't be edited because this visualization is no longer supported.",
}),
},
}
: undefined,
};

return props;
Expand Down Expand Up @@ -388,9 +403,9 @@ export const VisualizeListing = () => {
entityNamePlural={i18n.translate('visualizations.listing.table.entityNamePlural', {
defaultMessage: 'visualizations',
})}
onClickTitle={(item) => {
tableViewProps.editItem?.(item);
}}
getOnClickTitle={(item) =>
item.attributes.readOnly ? undefined : () => tableViewProps.editItem?.(item)
}
getDetailViewLink={({ editor, attributes: { error, readOnly } }) =>
readOnly || (editor && 'onEdit' in editor)
? undefined
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,9 @@ function MapsListViewComp({ history }: Props) {
defaultMessage: 'maps',
})}
title={APP_NAME}
onClickTitle={({ id }) => history.push(getEditPath(id))}
getOnClickTitle={({ id }) =>
() =>
history.push(getEditPath(id))}
/>
);
}
Expand Down

0 comments on commit 880f793

Please sign in to comment.