Add a default sort to the dashboard listing page (asc by title). (#29102)

Add a default sort to the dashboard listing page (asc by title).
Order dashboards by Elasticsearch relevance when the user searches

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

@@ -445,7 +445,14 @@ exports[`after fetch renders table rows 1`] = `
               "onSelectionChange": [Function],
             }
           }
-          sorting={Object {}}
+          sorting={
+            Object {
+              "sort": Object {
+                "direction": "asc",
+                "field": "title",
+              },
+            }
+          }
         />
       </div>
     </EuiPageContent>
@@ -657,7 +664,14 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
               "onSelectionChange": [Function],
             }
           }
-          sorting={Object {}}
+          sorting={
+            Object {
+              "sort": Object {
+                "direction": "asc",
+                "field": "title",
+              },
+            }
+          }
         />
       </div>
     </EuiPageContent>

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

@@ -56,6 +56,7 @@ class DashboardListingUi extends React.Component {
     super(props);
 
     this.state = {
+      ...defaultSortOrder(this.props.initialFilter),
       hasInitialFetchReturned: false,
       isFetchingItems: false,
       showDeleteModal: false,
@@ -136,6 +137,15 @@ class DashboardListingUi extends React.Component {
     this.setState({ showDeleteModal: true });
   };
 
+  setFilter(filter) {
+    // If the user is searching, we want to clear the sort order so that
+    // results are ordered by Elasticsearch's relevance.
+    this.setState({
+      ...defaultSortOrder(filter),
+      filter,
+    }, this.fetchItems);
+  }
+
   onTableChange = ({ page, sort = {} }) => {
     const {
       index: pageIndex,
@@ -147,13 +157,17 @@ class DashboardListingUi extends React.Component {
       direction: sortDirection,
     } = sort;
 
-    // 3rd sorting state that is not captured by sort - native order (no sort)
-    // when switching from desc to asc for the same field - use native order
+    // 3rd sorting state that is not captured by sort - default order (asc by title)
+    // when switching from desc to asc for the same, non-default field - use default order,
+    // unless we have a filter, in which case, we want to use Elasticsearch's ranking order.
     if (this.state.sortField === sortField
       && this.state.sortDirection === 'desc'
       && sortDirection === 'asc') {
-      sortField = null;
-      sortDirection = null;
+
+      const defaultSort = defaultSortOrder(this.state.filter);
+
+      sortField = defaultSort.sortField;
+      sortDirection = defaultSort.sortDirection;
     }
 
     this.setState({
@@ -402,11 +416,7 @@ class DashboardListingUi extends React.Component {
             })}
             fullWidth
             value={this.state.filter}
-            onChange={(e) => {
-              this.setState({
-                filter: e.target.value
-              }, this.fetchItems);
-            }}
+            onChange={(e) => this.setFilter(e.target.value)}
             data-test-subj="searchFilter"
           />
         </EuiFlexItem>
@@ -599,3 +609,22 @@ DashboardListingUi.defaultProps = {
 };
 
 export const DashboardListing = injectI18n(DashboardListingUi);
+
+// The table supports three sort states:
+// field-asc, field-desc, and default.
+//
+// If you click a non-default sort header three times,
+// the sort returns to the default sort, described here.
+function defaultSortOrder(filter) {
+  // If the user has searched for something, we want our
+  // default sort to be by Elasticsearch's relevance, so
+  // we clear out our overriding sort options.
+  if (filter.length > 0) {
+    return { sortField: undefined, sortDirection: undefined };
+  }
+
+  return {
+    sortField: 'title',
+    sortDirection: 'asc',
+  };
+}

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

@@ -26,6 +26,7 @@ jest.mock('ui/notify',
 
 jest.mock('lodash',
   () => ({
+    ...require.requireActual('lodash'),
     // mock debounce to fire immediately with no internal timer
     debounce: function (func) {
       function debounced(...args) {