From aae42738886d9814815ee7395a52801d1fd9824f Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 2 Nov 2020 12:07:46 +0200
Subject: [PATCH] [Visualize] Vis listing page breaks on unknown vis type
 (#82018) (#82241)

* [Visualize] Vis listing page breaks on unknown vis type

* Display a warning badge in case of an error

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../table_list_view/table_list_view.tsx       |  1 +
 .../vis_types/vis_type_alias_registry.ts      |  1 +
 .../components/visualize_listing.tsx          |  4 +-
 .../application/utils/get_table_columns.tsx   | 53 +++++++++++--------
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
index e0e295723a69d..b6efa40c5e40b 100644
--- a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
+++ b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
@@ -427,6 +427,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
         ),
         icon: 'pencil',
         type: 'icon',
+        enabled: ({ error }: { error: string }) => !error,
         onClick: this.props.editItem,
       },
     ];
diff --git a/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts b/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
index f6d27b54c7c64..9733e9fd68549 100644
--- a/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
+++ b/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
@@ -21,6 +21,7 @@ import { TriggerContextMapping } from '../../../ui_actions/public';
 export interface VisualizationListItem {
   editUrl: string;
   editApp?: string;
+  error?: string;
   icon: string;
   id: string;
   stage: 'experimental' | 'beta' | 'production';
diff --git a/src/plugins/visualize/public/application/components/visualize_listing.tsx b/src/plugins/visualize/public/application/components/visualize_listing.tsx
index cbfbd6e0e3ab6..c514c9337d940 100644
--- a/src/plugins/visualize/public/application/components/visualize_listing.tsx
+++ b/src/plugins/visualize/public/application/components/visualize_listing.tsx
@@ -104,7 +104,9 @@ export const VisualizeListing = () => {
         .findListItems(filter, listingLimit)
         .then(({ total, hits }: { total: number; hits: object[] }) => ({
           total,
-          hits: hits.filter((result: any) => isLabsEnabled || result.type.stage !== 'experimental'),
+          hits: hits.filter(
+            (result: any) => isLabsEnabled || result.type?.stage !== 'experimental'
+          ),
         }));
     },
     [listingLimit, savedVisualizations, uiSettings]
diff --git a/src/plugins/visualize/public/application/utils/get_table_columns.tsx b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
index 805c039d9773b..3541c0dc31db2 100644
--- a/src/plugins/visualize/public/application/utils/get_table_columns.tsx
+++ b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { History } from 'history';
-import { EuiBetaBadge, EuiButton, EuiEmptyPrompt, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiBetaBadge, EuiButton, EuiEmptyPrompt, EuiIcon, EuiLink, EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -87,20 +87,24 @@ export const getTableColumns = (application: ApplicationStart, history: History)
       defaultMessage: 'Title',
     }),
     sortable: true,
-    render: (field: string, { editApp, editUrl, title }: VisualizationListItem) => (
-      <EuiLink
-        onClick={() => {
-          if (editApp) {
-            application.navigateToApp(editApp, { path: editUrl });
-          } else if (editUrl) {
-            history.push(editUrl);
-          }
-        }}
-        data-test-subj={`visListingTitleLink-${title.split(' ').join('-')}`}
-      >
-        {field}
-      </EuiLink>
-    ),
+    render: (field: string, { editApp, editUrl, title, error }: VisualizationListItem) =>
+      // In case an error occurs i.e. the vis has wrong type, we render the vis but without the link
+      !error ? (
+        <EuiLink
+          onClick={() => {
+            if (editApp) {
+              application.navigateToApp(editApp, { path: editUrl });
+            } else if (editUrl) {
+              history.push(editUrl);
+            }
+          }}
+          data-test-subj={`visListingTitleLink-${title.split(' ').join('-')}`}
+        >
+          {field}
+        </EuiLink>
+      ) : (
+        field
+      ),
   },
   {
     field: 'typeTitle',
@@ -108,13 +112,18 @@ export const getTableColumns = (application: ApplicationStart, history: History)
       defaultMessage: 'Type',
     }),
     sortable: true,
-    render: (field: string, record: VisualizationListItem) => (
-      <span>
-        {renderItemTypeIcon(record)}
-        {record.typeTitle}
-        {getBadge(record)}
-      </span>
-    ),
+    render: (field: string, record: VisualizationListItem) =>
+      !record.error ? (
+        <span>
+          {renderItemTypeIcon(record)}
+          {record.typeTitle}
+          {getBadge(record)}
+        </span>
+      ) : (
+        <EuiBadge iconType="alert" color="warning">
+          {record.error}
+        </EuiBadge>
+      ),
   },
   {
     field: 'description',