[maps] convert top nav config to TS (#73851)

* [maps] convert top nav config to TS

* tslint

* one more tslint change

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/maps/public/routing/page_elements/top_nav_menu/index.js

@@ -1,50 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { connect } from 'react-redux';
-import { MapsTopNavMenu } from './top_nav_menu';
-import {
-  enableFullScreen,
-  openMapSettings,
-  removePreviewLayers,
-  setSelectedLayer,
-  updateFlyout,
-} from '../../../actions';
-import { FLYOUT_STATE } from '../../../reducers/ui';
-import { getInspectorAdapters } from '../../../reducers/non_serializable_instances';
-import { getFlyoutDisplay } from '../../../selectors/ui_selectors';
-import {
-  getQuery,
-  getRefreshConfig,
-  getTimeFilters,
-  hasDirtyState,
-} from '../../../selectors/map_selectors';
-
-function mapStateToProps(state = {}) {
-  return {
-    isOpenSettingsDisabled: getFlyoutDisplay(state) !== FLYOUT_STATE.NONE,
-    inspectorAdapters: getInspectorAdapters(state),
-    isSaveDisabled: hasDirtyState(state),
-    query: getQuery(state),
-    refreshConfig: getRefreshConfig(state),
-    timeFilters: getTimeFilters(state),
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    closeFlyout: () => {
-      dispatch(setSelectedLayer(null));
-      dispatch(updateFlyout(FLYOUT_STATE.NONE));
-      dispatch(removePreviewLayers());
-    },
-    enableFullScreen: () => dispatch(enableFullScreen()),
-    openMapSettings: () => dispatch(openMapSettings()),
-  };
-}
-
-const connectedMapsTopNavMenu = connect(mapStateToProps, mapDispatchToProps)(MapsTopNavMenu);
-export { connectedMapsTopNavMenu as MapsTopNavMenu };

x-pack/plugins/maps/public/routing/routes/maps_app/index.js

@@ -13,6 +13,7 @@ import {
   getQueryableUniqueIndexPatternIds,
   getRefreshConfig,
   getTimeFilters,
+  hasDirtyState,
   hasUnsavedChanges,
 } from '../../../selectors/map_selectors';
 import {
@@ -26,13 +27,20 @@ import {
   setRefreshConfig,
   setSelectedLayer,
   updateFlyout,
+  enableFullScreen,
+  openMapSettings,
+  removePreviewLayers,
 } from '../../../actions';
 import { FLYOUT_STATE } from '../../../reducers/ui';
 import { getMapsCapabilities } from '../../../kibana_services';
+import { getInspectorAdapters } from '../../../reducers/non_serializable_instances';
 
 function mapStateToProps(state = {}) {
   return {
     isFullScreen: getIsFullScreen(state),
+    isOpenSettingsDisabled: getFlyoutDisplay(state) !== FLYOUT_STATE.NONE,
+    isSaveDisabled: hasDirtyState(state),
+    inspectorAdapters: getInspectorAdapters(state),
     nextIndexPatternIds: getQueryableUniqueIndexPatternIds(state),
     flyoutDisplay: getFlyoutDisplay(state),
     refreshConfig: getRefreshConfig(state),
@@ -68,6 +76,13 @@ function mapDispatchToProps(dispatch) {
       dispatch(updateFlyout(FLYOUT_STATE.NONE));
       dispatch(setReadOnly(!getMapsCapabilities().save));
     },
+    closeFlyout: () => {
+      dispatch(setSelectedLayer(null));
+      dispatch(updateFlyout(FLYOUT_STATE.NONE));
+      dispatch(removePreviewLayers());
+    },
+    enableFullScreen: () => dispatch(enableFullScreen()),
+    openMapSettings: () => dispatch(openMapSettings()),
   };
 }
 

x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js

@@ -9,13 +9,17 @@ import { i18n } from '@kbn/i18n';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import _ from 'lodash';
 import { DEFAULT_IS_LAYER_TOC_OPEN } from '../../../reducers/ui';
-import { getData, getCoreChrome } from '../../../kibana_services';
+import {
+  getData,
+  getCoreChrome,
+  getMapsCapabilities,
+  getNavigation,
+} from '../../../kibana_services';
 import { copyPersistentState } from '../../../reducers/util';
 import { getInitialLayers, getInitialLayersFromUrlParam } from '../../bootstrap/get_initial_layers';
 import { getInitialTimeFilters } from '../../bootstrap/get_initial_time_filters';
 import { getInitialRefreshConfig } from '../../bootstrap/get_initial_refresh_config';
 import { getInitialQuery } from '../../bootstrap/get_initial_query';
-import { MapsTopNavMenu } from '../../page_elements/top_nav_menu';
 import {
   getGlobalState,
   updateGlobalState,
@@ -27,6 +31,7 @@ import { esFilters } from '../../../../../../../src/plugins/data/public';
 import { MapContainer } from '../../../connected_components/map_container';
 import { goToSpecifiedPath } from '../../maps_router';
 import { getIndexPatternsFromIds } from '../../../index_pattern_util';
+import { getTopNavConfig } from './top_nav_config';
 
 const unsavedChangesWarning = i18n.translate('xpack.maps.breadCrumbs.unsavedChangesWarning', {
   defaultMessage: 'Your map has unsaved changes. Are you sure you want to leave?',
@@ -58,7 +63,10 @@ export class MapsAppView extends React.Component {
       this._updateFromGlobalState
     );
 
-    this._updateStateFromSavedQuery(this._appStateManager.getAppState().savedQuery);
+    const initialSavedQuery = this._appStateManager.getAppState().savedQuery;
+    if (initialSavedQuery) {
+      this._updateStateFromSavedQuery(initialSavedQuery);
+    }
 
     this._initMap();
 
@@ -237,18 +245,10 @@ export class MapsAppView extends React.Component {
     );
   }
 
-  _onTopNavRefreshConfig = ({ isPaused, refreshInterval }) => {
-    this._onRefreshConfigChange({
-      isPaused,
-      interval: refreshInterval,
-    });
-  };
+  _updateStateFromSavedQuery = (savedQuery) => {
+    this.setState({ savedQuery: { ...savedQuery } });
+    this._appStateManager.setQueryAndFilters({ savedQuery });
 
-  _updateStateFromSavedQuery(savedQuery) {
-    if (!savedQuery) {
-      this.setState({ savedQuery: '' });
-      return;
-    }
     const { filterManager } = getData().query;
     const savedQueryFilters = savedQuery.attributes.filters || [];
     const globalFilters = filterManager.getGlobalFilters();
@@ -266,7 +266,7 @@ export class MapsAppView extends React.Component {
       query: savedQuery.attributes.query,
       time: savedQuery.attributes.timefilter,
     });
-  }
+  };
 
   _initMap() {
     this._initMapAndLayerSettings();
@@ -295,27 +295,65 @@ export class MapsAppView extends React.Component {
   }
 
   _renderTopNav() {
-    return !this.props.isFullScreen ? (
-      <MapsTopNavMenu
-        savedMap={this.props.savedMap}
-        savedQuery={this.state.savedQuery}
-        onQueryChange={this._onQueryChange}
-        onRefreshConfigChange={this._onTopNavRefreshConfig}
+    if (this.props.isFullScreen) {
+      return null;
+    }
+
+    const topNavConfig = getTopNavConfig({
+      savedMap: this.props.savedMap,
+      isOpenSettingsDisabled: this.props.isOpenSettingsDisabled,
+      isSaveDisabled: this.props.isSaveDisabled,
+      closeFlyout: this.props.closeFlyout,
+      enableFullScreen: this.props.enableFullScreen,
+      openMapSettings: this.props.openMapSettings,
+      inspectorAdapters: this.props.inspectorAdapters,
+      setBreadcrumbs: this._setBreadcrumbs,
+    });
+
+    const { TopNavMenu } = getNavigation().ui;
+    return (
+      <TopNavMenu
+        appName="maps"
+        config={topNavConfig}
         indexPatterns={this.state.indexPatterns}
-        onFiltersChange={this._onFiltersChange}
-        onQuerySaved={(query) => {
-          this.setState({ savedQuery: query });
-          this._appStateManager.setQueryAndFilters({ savedQuery: query });
-          this._updateStateFromSavedQuery(query);
+        filters={this.props.filters}
+        query={this.props.query}
+        onQuerySubmit={({ dateRange, query }) => {
+          this._onQueryChange({
+            query,
+            time: dateRange,
+            refresh: true,
+          });
         }}
-        onSavedQueryUpdated={(query) => {
-          this.setState({ savedQuery: { ...query } });
-          this._appStateManager.setQueryAndFilters({ savedQuery: query });
-          this._updateStateFromSavedQuery(query);
+        onFiltersUpdated={this._onFiltersChange}
+        dateRangeFrom={this.props.timeFilters.from}
+        dateRangeTo={this.props.timeFilters.to}
+        isRefreshPaused={this.props.refreshConfig.isPaused}
+        refreshInterval={this.props.refreshConfig.interval}
+        onRefreshChange={({ isPaused, refreshInterval }) => {
+          this._onRefreshConfigChange({
+            isPaused,
+            interval: refreshInterval,
+          });
+        }}
+        showSearchBar={true}
+        showFilterBar={true}
+        showDatePicker={true}
+        showSaveQuery={getMapsCapabilities().saveQuery}
+        savedQuery={this.state.savedQuery}
+        onSaved={this._updateStateFromSavedQuery}
+        onSavedQueryUpdated={this._updateStateFromSavedQuery}
+        onClearSavedQuery={() => {
+          const { filterManager, queryString } = getData().query;
+          this.setState({ savedQuery: '' });
+          this._appStateManager.setQueryAndFilters({ savedQuery: '' });
+          this._onQueryChange({
+            filters: filterManager.getGlobalFilters(),
+            query: queryString.getDefaultQuery(),
+          });
         }}
-        setBreadcrumbs={this._setBreadcrumbs}
       />
-    ) : null;
+    );
   }
 
   render() {

x-pack/plugins/maps/public/routing/routes/maps_app/top_nav_config.tsx

@@ -6,109 +6,44 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { Adapters } from 'src/plugins/inspector/public';
+import { SavedObjectSaveOpts } from 'src/plugins/saved_objects/public';
 import {
-  getNavigation,
   getCoreChrome,
   getMapsCapabilities,
   getInspector,
   getToasts,
   getCoreI18n,
-  getData,
 } from '../../../kibana_services';
 import {
   SavedObjectSaveModal,
+  OnSaveProps,
   showSaveModal,
 } from '../../../../../../../src/plugins/saved_objects/public';
 import { MAP_SAVED_OBJECT_TYPE } from '../../../../common/constants';
+// @ts-expect-error
 import { goToSpecifiedPath } from '../../maps_router';
+import { ISavedGisMap } from '../../bootstrap/services/saved_gis_map';
 
-export function MapsTopNavMenu({
+export function getTopNavConfig({
   savedMap,
-  query,
-  onQueryChange,
-  onQuerySaved,
-  onSavedQueryUpdated,
-  savedQuery,
-  timeFilters,
-  refreshConfig,
-  onRefreshConfigChange,
-  indexPatterns,
-  onFiltersChange,
+  isOpenSettingsDisabled,
   isSaveDisabled,
   closeFlyout,
   enableFullScreen,
   openMapSettings,
   inspectorAdapters,
   setBreadcrumbs,
-  isOpenSettingsDisabled,
+}: {
+  savedMap: ISavedGisMap;
+  isOpenSettingsDisabled: boolean;
+  isSaveDisabled: boolean;
+  closeFlyout: () => void;
+  enableFullScreen: () => void;
+  openMapSettings: () => void;
+  inspectorAdapters: Adapters;
+  setBreadcrumbs: () => void;
 }) {
-  const { TopNavMenu } = getNavigation().ui;
-  const { filterManager, queryString } = getData().query;
-  const showSaveQuery = getMapsCapabilities().saveQuery;
-  const onClearSavedQuery = () => {
-    onQuerySaved(undefined);
-    onQueryChange({
-      filters: filterManager.getGlobalFilters(),
-      query: queryString.getDefaultQuery(),
-    });
-  };
-
-  // Nav settings
-  const config = getTopNavConfig(
-    savedMap,
-    isOpenSettingsDisabled,
-    isSaveDisabled,
-    closeFlyout,
-    enableFullScreen,
-    openMapSettings,
-    inspectorAdapters,
-    setBreadcrumbs
-  );
-
-  const submitQuery = function ({ dateRange, query }) {
-    onQueryChange({
-      query,
-      time: dateRange,
-      refresh: true,
-    });
-  };
-
-  return (
-    <TopNavMenu
-      appName="maps"
-      config={config}
-      indexPatterns={indexPatterns}
-      filters={filterManager.getFilters()}
-      query={query}
-      onQuerySubmit={submitQuery}
-      onFiltersUpdated={onFiltersChange}
-      dateRangeFrom={timeFilters.from}
-      dateRangeTo={timeFilters.to}
-      isRefreshPaused={refreshConfig.isPaused}
-      refreshInterval={refreshConfig.interval}
-      onRefreshChange={onRefreshConfigChange}
-      showSearchBar={true}
-      showFilterBar={true}
-      showDatePicker={true}
-      showSaveQuery={showSaveQuery}
-      savedQuery={savedQuery}
-      onSaved={onQuerySaved}
-      onSavedQueryUpdated={onSavedQueryUpdated}
-      onClearSavedQuery={onClearSavedQuery}
-    />
-  );
-}
-
-function getTopNavConfig(
-  savedMap,
-  isOpenSettingsDisabled,
-  isSaveDisabled,
-  closeFlyout,
-  enableFullScreen,
-  openMapSettings,
-  inspectorAdapters,
-  setBreadcrumbs
-) {
   return [
     {
       id: 'full-screen',
@@ -180,11 +115,11 @@ function getTopNavConfig(
                 newCopyOnSave,
                 isTitleDuplicateConfirmed,
                 onTitleDuplicate,
-              }) => {
+              }: OnSaveProps) => {
                 const currentTitle = savedMap.title;
                 savedMap.title = newTitle;
                 savedMap.copyOnSave = newCopyOnSave;
-                const saveOptions = {
+                const saveOptions: SavedObjectSaveOpts = {
                   confirmOverwrite: false,
                   isTitleDuplicateConfirmed,
                   onTitleDuplicate,
@@ -218,7 +153,12 @@ function getTopNavConfig(
   ];
 }
 
-async function doSave(savedMap, saveOptions, closeFlyout, setBreadcrumbs) {
+async function doSave(
+  savedMap: ISavedGisMap,
+  saveOptions: SavedObjectSaveOpts,
+  closeFlyout: () => void,
+  setBreadcrumbs: () => void
+) {
   closeFlyout();
   savedMap.syncWithStore();
   let id;