Type fix - remove comments

src/plugins/dashboard/public/application/_dashboard_app.scss

@@ -4,6 +4,12 @@
   flex: 1;
 }
 
+#dashboardViewport {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .dshStartScreen {
   text-align: center;
 }
@@ -26,9 +32,3 @@
   margin-left: $euiSizeS;
   text-align: center;
 }
-
-#dashboardViewport {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}

src/plugins/dashboard/public/application/dashboard_app.tsx

@@ -77,12 +77,7 @@ import {
 import { DashboardPanelState, DASHBOARD_CONTAINER_TYPE } from '.';
 import { convertSavedDashboardPanelToPanelState } from '../../common/embeddable/embeddable_saved_object_converters';
 import { DashboardTopNav } from './top_nav/dashboard_top_nav';
-import {
-  dashboardBreadcrumb,
-  dashboardReadonlyBadge,
-  getDashboardTitle,
-  leaveConfirmStrings,
-} from './dashboard_strings';
+import { dashboardBreadcrumb, getDashboardTitle, leaveConfirmStrings } from './dashboard_strings';
 import type { TagDecoratedSavedObject } from '../../../saved_objects_tagging_oss/public';
 import { DashboardEmptyScreen } from './empty_screen/dashboard_empty_screen';
 import {
@@ -190,13 +185,16 @@ const getDashboardContainerInput = ({
   };
 };
 
-const getInputSubscription = (props: {
+const getInputSubscription = ({
+  dashboardContainer,
+  dashboardStateManager,
+  filterManager,
+}: {
   dashboardContainer: DashboardContainer;
   dashboardStateManager: DashboardStateManager;
   filterManager: FilterManager;
-}) => {
-  const { dashboardContainer, dashboardStateManager, filterManager } = props;
-  return dashboardContainer.getInput$().subscribe(() => {
+}) =>
+  dashboardContainer.getInput$().subscribe(() => {
     // This has to be first because handleDashboardContainerChanges causes
     // appState.save which will cause refreshDashboardContainer to be called.
 
@@ -218,15 +216,16 @@ const getInputSubscription = (props: {
 
     dashboardStateManager.handleDashboardContainerChanges(dashboardContainer);
   });
-};
 
-const getOutputSubscription = (props: {
+const getOutputSubscription = ({
+  dashboardContainer,
+  indexPatterns,
+  onUpdateIndexPatterns,
+}: {
   dashboardContainer: DashboardContainer;
   indexPatterns: IndexPatternsContract;
   onUpdateIndexPatterns: (newIndexPatterns: IndexPattern[]) => void;
 }) => {
-  const { dashboardContainer, indexPatterns, onUpdateIndexPatterns } = props;
-
   const updateIndexPatternsOperator = pipe(
     filter((container: DashboardContainer) => !!container && !isErrorEmbeddable(container)),
     map((container: DashboardContainer): IndexPattern[] => {
@@ -286,12 +285,13 @@ const getOutputSubscription = (props: {
     .subscribe();
 };
 
-const getFiltersSubscription = (props: {
+const getFiltersSubscription = ({
+  query,
+  dashboardStateManager,
+}: {
   query: QueryStart;
-  dashboardContainer: DashboardContainer;
   dashboardStateManager: DashboardStateManager;
 }) => {
-  const { dashboardStateManager, query } = props;
   return merge(query.filterManager.getUpdates$(), query.queryString.getUpdates$())
     .pipe(debounceTime(100))
     .subscribe(() => {
@@ -305,14 +305,9 @@ const getFiltersSubscription = (props: {
 const getSearchSessionIdFromURL = (history: History): string | undefined =>
   getQueryParams(history.location)[DashboardConstants.SEARCH_SESSION_ID] as string | undefined;
 
-const isActiveState = (
-  testState: DashboardAppComponentState
-): testState is DashboardAppComponentActiveState => {
+const isActiveState = (s: DashboardAppComponentState): s is DashboardAppComponentActiveState => {
   return Boolean(
-    testState.dashboardContainer &&
-      testState.dashboardStateManager &&
-      testState.indexPatterns &&
-      testState.savedDashboard
+    s.dashboardContainer && s.dashboardStateManager && s.indexPatterns && s.savedDashboard
   );
 };
 
@@ -364,7 +359,6 @@ export function DashboardApp({
 
         state.dashboardContainer.updateInput({
           ...changes,
-          searchSessionId: data.search.session.start(),
         });
       }
     },
@@ -641,6 +635,7 @@ export function DashboardApp({
 
     const dashboardStateManager = state.dashboardStateManager;
     const dashboardContainer = state.dashboardContainer;
+    const timeFilter = data.query.timefilter.timefilter;
     const subscriptions = new Subscription();
 
     subscriptions.add(
@@ -661,10 +656,14 @@ export function DashboardApp({
     subscriptions.add(
       getFiltersSubscription({
         query: data.query,
-        dashboardContainer,
         dashboardStateManager,
       })
     );
+    subscriptions.add(
+      merge(timeFilter.getRefreshIntervalUpdate$(), timeFilter.getTimeUpdate$()).subscribe(() =>
+        refreshDashboardContainer()
+      )
+    );
     dashboardStateManager.registerChangeListener(() => {
       // we aren't checking dirty state because there are changes the container needs to know about
       // that won't make the dashboard "dirty" - like a view mode change.
@@ -710,18 +709,11 @@ export function DashboardApp({
     state.dashboardStateManager,
   ]);
 
-  // Sync breadcrumbs & badge when Dashboard State Manager changes
+  // Sync breadcrumbs when Dashboard State Manager changes
   useEffect(() => {
     if (!state.dashboardStateManager) {
       return;
     }
-    if (!dashboardCapabilities.showWriteControls) {
-      chrome.setBadge({
-        text: dashboardReadonlyBadge.text,
-        tooltip: dashboardReadonlyBadge.tooltip,
-        iconType: 'glasses',
-      });
-    }
     chrome.setBreadcrumbs([
       {
         text: dashboardBreadcrumb,
@@ -800,11 +792,12 @@ export function DashboardApp({
           dashboardContainer={state.dashboardContainer}
           dashboardStateManager={state.dashboardStateManager}
           onQuerySubmit={(_payload, isUpdate) => {
-            // The user can still request a reload in the query bar, even if the
-            // query is the same, and in that case, we have to explicitly ask for
-            // a reload, since no state changes will cause it.
-            const reloadRequest = isUpdate ? undefined : new Date().getTime();
-            refreshDashboardContainer(reloadRequest);
+            if (isUpdate === false) {
+              // The user can still request a reload in the query bar, even if the
+              // query is the same, and in that case, we have to explicitly ask for
+              // a reload, since no state changes will cause it.
+              refreshDashboardContainer(new Date().getTime());
+            }
           }}
         />
       )}

src/plugins/dashboard/public/application/dashboard_router.tsx

@@ -40,6 +40,7 @@ import {
 } from './types';
 import { DashboardApp } from './dashboard_app';
 import { createDashboardListingFilterUrl } from '../dashboard_constants';
+import { dashboardReadonlyBadge } from './dashboard_strings';
 import { createDashboardEditUrl, DashboardConstants } from '..';
 
 export enum UrlParams {
@@ -146,7 +147,18 @@ export async function mountApp({
     };
   };
 
+  const setBadge = () => {
+    if (!coreStart.application.capabilities.dashboard.showWriteControls) {
+      coreStart.chrome.setBadge({
+        text: dashboardReadonlyBadge.text,
+        tooltip: dashboardReadonlyBadge.tooltip,
+        iconType: 'glasses',
+      });
+    }
+  };
+
   const renderDashboard = (routeProps: RouteComponentProps<{ id?: string }>) => {
+    setBadge();
     const routeParams = parse(routeProps.history.location.search);
     const embedSettings = getDashboardEmbedSettings(routeParams);
     return (
@@ -160,6 +172,7 @@ export async function mountApp({
   };
 
   const renderListingPage = (routeProps: RouteComponentProps) => {
+    setBadge();
     coreStart.chrome.docTitle.change(
       i18n.translate('dashboard.dashboardPageTitle', { defaultMessage: 'Dashboards' })
     );

src/plugins/dashboard/public/application/listing/dashboard_listing.tsx

@@ -17,13 +17,13 @@
  * under the License.
  */
 
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { EuiLink, EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import { DashboardAppServices, DashboardListingProps } from '../types';
 import { TableListView, useKibana } from '../../../../kibana_react/public';
-import { ApplicationStart } from '../../../../../core/public';
+import { ApplicationStart, SavedObjectsFindOptionsReference } from '../../../../../core/public';
 import { DashboardSavedObject } from '../../saved_dashboards';
 import { syncQueryStateWithUrl } from '../../../../data/public';
 import { SavedObjectsTaggingApi } from '../../../../saved_objects_tagging_oss/public';
@@ -54,6 +54,7 @@ export const DashboardListing = ({
     },
   } = useKibana<DashboardAppServices>();
 
+  // Set breadcrumbs useEffect
   useEffect(() => {
     chrome.setBreadcrumbs([
       {
@@ -64,6 +65,7 @@ export const DashboardListing = ({
     ]);
   }, [chrome]);
 
+  // Load by Title useEffect
   useEffect(() => {
     // syncs `_g` portion of url with query services
     const { stop: stopSyncingQueryServiceStateWithUrl } = syncQueryStateWithUrl(
@@ -89,12 +91,6 @@ export const DashboardListing = ({
               id: matchingDashboards[0].id,
               useReplace: true,
             });
-          } else {
-            redirectTo({
-              destination: 'listing',
-              useReplace: true,
-              filter: title,
-            });
           }
         });
     }
@@ -106,40 +102,74 @@ export const DashboardListing = ({
 
   const hideWriteControls = dashboardCapabilities.hideWriteControls;
   const listingLimit = savedObjects.settings.getListingLimit();
+  const defaultFilter = title ? `"${title}"` : '';
+
+  const tableColumns = useMemo(
+    () =>
+      getTableColumns((id) => redirectTo({ destination: 'dashboard', id }), savedObjectsTagging),
+    [savedObjectsTagging, redirectTo]
+  );
+
+  const noItemsFragment = useMemo(
+    () =>
+      getNoItemsMessage(hideWriteControls, core.application, () =>
+        redirectTo({ destination: 'dashboard' })
+      ),
+    [redirectTo, core.application, hideWriteControls]
+  );
+
+  const fetchItems = useCallback(
+    (filter: string) => {
+      let searchTerm = filter;
+      let references: SavedObjectsFindOptionsReference[] | undefined;
+
+      if (savedObjectsTagging) {
+        const parsed = savedObjectsTagging.ui.parseSearchQuery(filter, {
+          useName: true,
+        });
+        searchTerm = parsed.searchTerm;
+        references = parsed.tagReferences;
+      }
+
+      return savedDashboards.find(searchTerm, {
+        size: listingLimit,
+        hasReference: references,
+      });
+    },
+    [listingLimit, savedDashboards, savedObjectsTagging]
+  );
 
-  const tableColumns = getTableColumns(
-    (id) => redirectTo({ destination: 'dashboard', id }),
-    savedObjectsTagging
+  const deleteItems = useCallback(
+    (dashboards: Array<{ id: string }>) => savedDashboards.delete(dashboards.map((d) => d.id)),
+    [savedDashboards]
   );
-  const noItemsFragment = getNoItemsMessage(hideWriteControls, core.application, () =>
-    redirectTo({ destination: 'dashboard' })
+
+  const editItem = useCallback(
+    ({ id }: { id: string | undefined }) => redirectTo({ destination: 'dashboard', id }),
+    [redirectTo]
   );
 
+  const searchFilters = useMemo(() => {
+    return savedObjectsTagging
+      ? [savedObjectsTagging.ui.getSearchBarFilter({ useName: true })]
+      : [];
+  }, [savedObjectsTagging]);
+
   return (
     <TableListView
-      headingId="dashboardListingHeading"
-      rowHeader="title"
       createItem={hideWriteControls ? undefined : () => redirectTo({ destination: 'dashboard' })}
-      findItems={(search) => savedDashboards.find(search, listingLimit)}
-      deleteItems={
-        hideWriteControls
-          ? undefined
-          : (dashboards: Array<{ id: string }>) =>
-              savedDashboards.delete(dashboards.map((d) => d.id))
-      }
-      editItem={
-        hideWriteControls
-          ? undefined
-          : ({ id }: { id: string | undefined }) => redirectTo({ destination: 'dashboard', id })
-      }
-      searchFilters={
-        savedObjectsTagging ? [savedObjectsTagging.ui.getSearchBarFilter({ useName: true })] : []
-      }
-      tableColumns={tableColumns}
-      listingLimit={listingLimit}
+      deleteItems={hideWriteControls ? undefined : deleteItems}
       initialPageSize={savedObjects.settings.getPerPage()}
-      initialFilter={initialFilter ?? ''}
+      editItem={hideWriteControls ? undefined : editItem}
+      initialFilter={initialFilter ?? defaultFilter}
+      toastNotifications={core.notifications.toasts}
+      headingId="dashboardListingHeading"
       noItemsFragment={noItemsFragment}
+      searchFilters={searchFilters}
+      tableColumns={tableColumns}
+      listingLimit={listingLimit}
+      findItems={fetchItems}
+      rowHeader="title"
       entityName={i18n.translate('dashboard.listing.table.entityName', {
         defaultMessage: 'dashboard',
       })}
@@ -152,7 +182,6 @@ export const DashboardListing = ({
       tableCaption={i18n.translate('dashboard.listing.dashboardsTitle', {
         defaultMessage: 'Dashboards',
       })}
-      toastNotifications={core.notifications.toasts}
     />
   );
 };

src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx

@@ -23,7 +23,6 @@ import { EuiCheckboxGroupIdToSelectedMap } from '@elastic/eui/src/components/for
 import { i18n } from '@kbn/i18n';
 import angular from 'angular';
 import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
-import { createDashboardEditUrl, DashboardConstants } from '../..';
 import { SavedQuery } from '../../../../data/public';
 
 import { ViewMode } from '../../../../embeddable/public';
@@ -113,17 +112,7 @@ export function DashboardTopNav({
           dashboardStateManager.syncTimefilterWithDashboardTime(timefilter);
           dashboardStateManager.syncTimefilterWithDashboardRefreshInterval(timefilter);
         }
-
-        // Angular's $location skips this update because of history updates from syncState which happen simultaneously
-        // when calling kbnUrl.change() angular schedules url update and when angular finally starts to process it,
-        // the update is considered outdated and angular skips it
-        // so have to use implementation of dashboardStateManager.changeDashboardUrl, which workarounds those issues
         redirectTo({ destination: 'dashboard', id: savedDashboard.id });
-        // dashboardStateManager.changeDashboardUrl(
-        //   savedDashboard.id
-        //     ? createDashboardEditUrl(savedDashboard.id)
-        //     : DashboardConstants.CREATE_NEW_DASHBOARD_URL
-        // );
       }
 
       core.overlays