Visualization list eui (#31686)

* Fixing bugs from #31599
* Make listing item links instead of buttons
* restore dashboard edit button behavior

Author: lizozom

src/legacy/core_plugins/kibana/public/dashboard/index.js

@@ -70,8 +70,11 @@ uiRoutes
       $scope.find = (search) => {
         return services.dashboards.find(search, $scope.listingLimit);
       };
-      $scope.edit = ({ id }) => {
-        kbnUrl.redirect(createDashboardEditUrl(id));
+      $scope.editItem = ({ id }) => {
+        kbnUrl.redirect(`${createDashboardEditUrl(id)}?_a=(viewMode:edit)`);
+      };
+      $scope.getViewUrl = ({ id }) => {
+        return chrome.addBasePath(`#${createDashboardEditUrl(id)}`);
       };
       $scope.delete = (ids) => {
         return services.dashboards.delete(ids);

src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js

@@ -160,7 +160,7 @@ class DashboardListingUi extends React.Component {
         sortable: true,
         render: (field, record) => (
           <EuiLink
-            onClick={() => this.props.editItem(record)}
+            href={this.props.getViewUrl(record)}
             data-test-subj={`dashboardListingTitleLink-${record.title.split(' ').join('-')}`}
           >
             {field}
@@ -185,6 +185,7 @@ DashboardListingUi.propTypes = {
   findItems: PropTypes.func.isRequired,
   deleteItems: PropTypes.func.isRequired,
   editItem: PropTypes.func.isRequired,
+  getViewUrl: PropTypes.func.isRequired,
   listingLimit: PropTypes.number.isRequired,
   hideWriteControls: PropTypes.bool.isRequired,
   initialFilter: PropTypes.string,

src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing.test.js

@@ -64,6 +64,7 @@ test('renders empty page in before initial fetch to avoid flickering', () => {
     deleteItems={() => {}}
     createItem={() => {}}
     editItem={() => {}}
+    getViewUrl={() => {}}
     listingLimit={1000}
     hideWriteControls={false}
   />);
@@ -77,6 +78,7 @@ describe('after fetch', () => {
       deleteItems={() => {}}
       createItem={() => {}}
       editItem={() => {}}
+      getViewUrl={() => {}}
       listingLimit={1000}
       hideWriteControls={false}
       initialFilter="my dashboard"
@@ -96,6 +98,7 @@ describe('after fetch', () => {
       deleteItems={() => {}}
       createItem={() => {}}
       editItem={() => {}}
+      getViewUrl={() => {}}
       listingLimit={1000}
       hideWriteControls={false}
     />);
@@ -114,6 +117,7 @@ describe('after fetch', () => {
       deleteItems={() => {}}
       createItem={() => {}}
       editItem={() => {}}
+      getViewUrl={() => {}}
       listingLimit={1}
       hideWriteControls={false}
     />);
@@ -132,6 +136,7 @@ describe('after fetch', () => {
       deleteItems={() => {}}
       createItem={() => {}}
       editItem={() => {}}
+      getViewUrl={() => {}}
       listingLimit={1}
       hideWriteControls={true}
     />);
@@ -150,6 +155,7 @@ describe('after fetch', () => {
       deleteItems={() => {}}
       createItem={() => {}}
       editItem={() => {}}
+      getViewUrl={() => {}}
       listingLimit={1}
       hideWriteControls={false}
     />);

src/legacy/core_plugins/kibana/public/dashboard/listing/dashboard_listing_ng_wrapper.html

@@ -1,6 +1,7 @@
 <dashboard-listing
   create-item="create"
-  edit-item="edit"
+  get-view-url="getViewUrl"
+  edit-item="editItem"
   find-items="find"
   delete-items="delete"
   listing-limit="listingLimit"

src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.html

@@ -34,7 +34,8 @@
     find-items="listingController.fetchItems"
     delete-items="listingController.deleteSelectedItems"
     create-item="listingController.createNewVis"
-    edit-item="listingController.edit"
+    get-view-url="listingController.getViewUrl"
+    edit-item="listingController.editItem"
   ></visualize-listing-table>
 
   <new-vis-modal

src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.js

@@ -53,10 +53,15 @@ export function VisualizeListingController($injector, createNewVis) {
     this.showNewVisModal = true;
   };
 
-  this.edit = ({ id }) => {
+  this.editItem = ({ id }) => {
+    // for visualizations the edit and view URLs are the same
     kbnUrl.change(createVisualizeEditUrl(id));
   };
 
+  this.getViewUrl = ({ id }) => {
+    return chrome.addBasePath(`#${createVisualizeEditUrl(id)}`);
+  };
+
   this.closeNewVisModal = () => {
     this.showNewVisModal = false;
     // In case the user came via a URL to this page, change the URL to the regular landing page URL after closing the modal

src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js

@@ -85,7 +85,7 @@ class VisualizeListingTableUi extends Component {
         sortable: true,
         render: (field, record) => (
           <EuiLink
-            onClick={() => this.props.editItem(record)}
+            href={this.props.getViewUrl(record)}
             data-test-subj={`visListingTitleLink-${record.title.split(' ').join('-')}`}
           >
             {field}
@@ -219,6 +219,7 @@ VisualizeListingTableUi.propTypes = {
   deleteItems: PropTypes.func.isRequired,
   findItems: PropTypes.func.isRequired,
   createItem: PropTypes.func.isRequired,
+  getViewUrl: PropTypes.func.isRequired,
   editItem: PropTypes.func.isRequired,
 };
 

test/functional/page_objects/visualize_page.js

@@ -799,7 +799,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
 
     async clickVisualizationByName(vizName) {
       log.debug('clickVisualizationByLinkText(' + vizName + ')');
-      return find.clickByButtonText(vizName);
+      return find.clickByPartialLinkText(vizName);
     }
 
     async loadSavedVisualization(vizName, { navigateToVisualize = true } = {}) {