[Visualizations] legacy vis behavior on serverless (#176935)

## Summary

Close https://github.com/elastic/kibana/issues/176536
Close https://github.com/elastic/kibana/issues/176742

### Links to legacy visualization editors are once again disabled
<img width="208" alt="Screenshot 2024-02-14 at 10 19 52 AM"
src="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="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 <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>

examples/content_management_examples/public/examples/msearch/msearch_table.tsx

@@ -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})`);
       }}
     />

packages/content-management/table_list_view/src/table_list_view.tsx

@@ -31,7 +31,7 @@ export type TableListViewProps<T extends UserContentCommonSchema = UserContentCo
   | 'editItem'
   | 'deleteItems'
   | 'getDetailViewLink'
-  | 'onClickTitle'
+  | 'getOnClickTitle'
   | 'id'
   | 'rowItemActions'
   | 'contentEditor'
@@ -65,7 +65,7 @@ export const TableListView = <T extends UserContentCommonSchema>({
   editItem,
   deleteItems,
   getDetailViewLink,
-  onClickTitle,
+  getOnClickTitle,
   rowItemActions,
   id: listingId,
   contentEditor,
@@ -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}

packages/content-management/table_list_view_table/src/components/item_details.tsx

@@ -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;
@@ -39,7 +39,7 @@ export function ItemDetails<T extends UserContentCommonSchema>({
   item,
   searchTerm = '',
   getDetailViewLink,
-  onClickTitle,
+  getOnClickTitle,
   onClickTag,
 }: Props<T>) {
   const {
@@ -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>;
     }
@@ -93,9 +94,9 @@ export function ItemDetails<T extends UserContentCommonSchema>({
     );
   }, [
     getDetailViewLink,
+    getOnClickTitle,
     id,
     item,
-    onClickTitle,
     onClickTitleHandler,
     redirectAppLinksCoreStart,
     searchTerm,

packages/content-management/table_list_view_table/src/table_list_view_table.tsx

@@ -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>;
   /**
@@ -256,7 +256,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
   editItem,
   deleteItems,
   getDetailViewLink,
-  onClickTitle,
+  getOnClickTitle,
   id: listingId = 'userContent',
   contentEditor = { enabled: false },
   titleColumnName,
@@ -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.`
     );
   }
 
@@ -443,6 +443,12 @@ 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,
@@ -450,12 +456,6 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
               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.',
-            }),
-          },
         };
       }
 
@@ -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);
@@ -623,7 +623,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
     contentEditor.enabled,
     listingId,
     getDetailViewLink,
-    onClickTitle,
+    getOnClickTitle,
     searchQuery.text,
     addOrRemoveExcludeTagFilter,
     addOrRemoveIncludeTagFilter,

src/plugins/event_annotation_listing/public/components/table_list.test.tsx

@@ -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));

src/plugins/event_annotation_listing/public/components/table_list.tsx

@@ -239,7 +239,7 @@ export const EventAnnotationGroupTableList = ({
         entityNamePlural={i18n.translate('eventAnnotationListing.tableList.entityNamePlural', {
           defaultMessage: 'annotation groups',
         })}
-        onClickTitle={editItem}
+        getOnClickTitle={(item) => () => editItem(item)}
         {...parentProps}
       />
       {flyout}

src/plugins/files_management/public/app.tsx

@@ -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) });
         }}

src/plugins/visualizations/public/visualize_app/components/visualize_listing.tsx

@@ -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;
@@ -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

x-pack/plugins/maps/public/routes/list_page/maps_list_view.tsx

@@ -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))}
     />
   );
 }