From 89199d0eaae071d01a7aee0e2edad6530d1edcf4 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 21 Feb 2020 16:51:54 +0300 Subject: [PATCH] Migrate kbn_top_nav.js to kibana_legacy --- .../kibana/public/dashboard/legacy_imports.ts | 3 +- .../public/dashboard/np_ready/application.ts | 11 +- .../public/discover/get_inner_angular.ts | 9 +- .../kibana/public/visualize/legacy_imports.ts | 2 - .../public/visualize/np_ready/application.ts | 9 +- .../ui/public/kbn_top_nav/kbn_top_nav.js | 107 ++-------------- .../kibana_legacy/public/angular/index.ts | 2 + .../public/angular/kbn_top_nav.js | 115 ++++++++++++++++++ .../plugins/graph/public/application.ts | 9 +- .../plugins/graph/public/legacy_imports.ts | 3 +- .../public/np_imports/angular/modules.ts | 9 +- .../public/np_imports/legacy_imports.ts | 3 +- 12 files changed, 159 insertions(+), 123 deletions(-) create mode 100644 src/plugins/kibana_legacy/public/angular/kbn_top_nav.js diff --git a/src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts b/src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts index c1f679e9eb7ac..593a6a4b3da32 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts +++ b/src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts @@ -28,8 +28,6 @@ export { npSetup, npStart } from 'ui/new_platform'; export { subscribeWithScope } from 'ui/utils/subscribe_with_scope'; export { KbnUrl } from 'ui/url/kbn_url'; // @ts-ignore -export { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav'; -// @ts-ignore export { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url/index'; export { IInjector } from 'ui/chrome'; export { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url'; @@ -41,3 +39,4 @@ export { PrivateProvider, PromiseServiceCreator, } from '../../../../../plugins/kibana_legacy/public'; +export { wrapInI18nContext } from 'ui/i18n'; diff --git a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts index 7239d8f2258a7..5145dd5404cc7 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts +++ b/src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts @@ -31,13 +31,12 @@ import { import { Storage } from '../../../../../../plugins/kibana_utils/public'; import { configureAppAngularModule, - createTopNavDirective, - createTopNavHelper, IPrivate, KbnUrlProvider, PrivateProvider, PromiseServiceCreator, RedirectWhenMissingProvider, + wrapInI18nContext, } from '../legacy_imports'; // @ts-ignore import { initDashboardApp } from './legacy_app'; @@ -45,7 +44,11 @@ import { IEmbeddableStart } from '../../../../../../plugins/embeddable/public'; import { NavigationPublicPluginStart as NavigationStart } from '../../../../../../plugins/navigation/public'; import { DataPublicPluginStart } from '../../../../../../plugins/data/public'; import { SharePluginStart } from '../../../../../../plugins/share/public'; -import { KibanaLegacyStart } from '../../../../../../plugins/kibana_legacy/public'; +import { + KibanaLegacyStart, + createTopNavDirective, + createTopNavHelper, +} from '../../../../../../plugins/kibana_legacy/public'; import { SavedObjectLoader } from '../../../../../../plugins/saved_objects/public'; export interface RenderDeps { @@ -166,7 +169,7 @@ function createLocalTopNavModule(navigation: NavigationStart) { angular .module('app/dashboard/TopNav', ['react']) .directive('kbnTopNav', createTopNavDirective) - .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui)); + .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui, wrapInI18nContext)); } function createLocalI18nModule() { diff --git a/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts b/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts index 373395c86636c..9ca84461a8281 100644 --- a/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts +++ b/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts @@ -22,6 +22,7 @@ // They can stay even after NP cutover import angular from 'angular'; import { EuiIcon } from '@elastic/eui'; +import { wrapInI18nContext } from 'ui/i18n'; // @ts-ignore import { StateProvider } from 'ui/state_management/state'; // @ts-ignore @@ -37,8 +38,6 @@ import { GlobalStateProvider } from 'ui/state_management/global_state'; import { StateManagementConfigProvider } from 'ui/state_management/config_provider'; // @ts-ignore import { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url'; -// @ts-ignore -import { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav'; import { DataPublicPluginStart } from '../../../../../plugins/data/public'; import { Storage } from '../../../../../plugins/kibana_utils/public'; import { NavigationPublicPluginStart as NavigationStart } from '../../../../../plugins/navigation/public'; @@ -63,7 +62,6 @@ import { createFieldChooserDirective } from './np_ready/components/field_chooser import { createDiscoverFieldDirective } from './np_ready/components/field_chooser/discover_field'; import { CollapsibleSidebarProvider } from './np_ready/angular/directives/collapsible_sidebar/collapsible_sidebar'; import { DiscoverStartPlugins } from './plugin'; -import { initAngularBootstrap } from '../../../../../plugins/kibana_legacy/public'; import { createCssTruncateDirective } from './np_ready/angular/directives/css_truncate'; // @ts-ignore import { FixedScrollProvider } from './np_ready/angular/directives/fixed_scroll'; @@ -71,6 +69,7 @@ import { FixedScrollProvider } from './np_ready/angular/directives/fixed_scroll' import { DebounceProviderTimeout } from './np_ready/angular/directives/debounce/debounce'; import { createRenderCompleteDirective } from './np_ready/angular/directives/render_complete'; import { + initAngularBootstrap, configureAppAngularModule, IPrivate, KbnAccessibleClickProvider, @@ -78,6 +77,8 @@ import { PromiseServiceCreator, registerListenEventListener, watchMultiDecorator, + createTopNavDirective, + createTopNavHelper, } from '../../../../../plugins/kibana_legacy/public'; /** @@ -244,7 +245,7 @@ function createLocalTopNavModule(navigation: NavigationStart) { angular .module('discoverTopNav', ['react']) .directive('kbnTopNav', createTopNavDirective) - .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui)); + .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui, wrapInI18nContext)); } function createLocalI18nModule() { diff --git a/src/legacy/core_plugins/kibana/public/visualize/legacy_imports.ts b/src/legacy/core_plugins/kibana/public/visualize/legacy_imports.ts index 8b1bb0fda8c84..a9b42a387a5db 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/legacy_imports.ts +++ b/src/legacy/core_plugins/kibana/public/visualize/legacy_imports.ts @@ -34,8 +34,6 @@ export { PersistedState } from 'ui/persisted_state'; export { subscribeWithScope } from 'ui/utils/subscribe_with_scope'; // @ts-ignore export { EventsProvider } from 'ui/events'; -// @ts-ignore -export { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav'; export { registerTimefilterWithGlobalStateFactory } from 'ui/timefilter/setup_router'; // @ts-ignore export { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url'; diff --git a/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts b/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts index 6a8d9ce106f9d..b2985b9228a27 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts +++ b/src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts @@ -23,8 +23,6 @@ import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular'; import { AppMountContext } from 'kibana/public'; import { configureAppAngularModule, - createTopNavDirective, - createTopNavHelper, EventsProvider, GlobalStateProvider, KbnUrlProvider, @@ -34,8 +32,13 @@ import { PrivateProvider, PromiseServiceCreator, StateManagementConfigProvider, + wrapInI18nContext, } from '../legacy_imports'; import { NavigationPublicPluginStart as NavigationStart } from '../../../../../../plugins/navigation/public'; +import { + createTopNavDirective, + createTopNavHelper, +} from '../../../../../../plugins/kibana_legacy/public'; // @ts-ignore import { initVisualizeApp } from './legacy_app'; @@ -164,7 +167,7 @@ function createLocalTopNavModule(navigation: NavigationStart) { angular .module('app/visualize/TopNav', ['react']) .directive('kbnTopNav', createTopNavDirective) - .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui)); + .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui, wrapInI18nContext)); } function createLocalI18nModule() { diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js index 12c3ca2acc3cd..66027da40e42c 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js @@ -17,108 +17,19 @@ * under the License. */ -import 'ngreact'; -import { wrapInI18nContext } from 'ui/i18n'; import { uiModules } from 'ui/modules'; import { npStart } from 'ui/new_platform'; +import { wrapInI18nContext } from 'ui/i18n'; +import { + createTopNavDirective, + createTopNavHelper, +} from '../../../../plugins/kibana_legacy/public'; const module = uiModules.get('kibana'); -export function createTopNavDirective() { - return { - restrict: 'E', - template: '', - compile: elem => { - const child = document.createElement('kbn-top-nav-helper'); - - // Copy attributes to the child directive - for (const attr of elem[0].attributes) { - child.setAttribute(attr.name, attr.value); - } - - // Add a special attribute that will change every time that one - // of the config array's disableButton function return value changes. - child.setAttribute('disabled-buttons', 'disabledButtons'); - - // Append helper directive - elem.append(child); - - const linkFn = ($scope, _, $attr) => { - // Watch config changes - $scope.$watch( - () => { - const config = $scope.$eval($attr.config) || []; - return config.map(item => { - // Copy key into id, as it's a reserved react propery. - // This is done for Angular directive backward compatibility. - // In React only id is recognized. - if (item.key && !item.id) { - item.id = item.key; - } - - // Watch the disableButton functions - if (typeof item.disableButton === 'function') { - return item.disableButton(); - } - return item.disableButton; - }); - }, - newVal => { - $scope.disabledButtons = newVal; - }, - true - ); - }; - - return linkFn; - }, - }; -} - module.directive('kbnTopNav', createTopNavDirective); -export const createTopNavHelper = ({ TopNavMenu }) => reactDirective => { - return reactDirective(wrapInI18nContext(TopNavMenu), [ - ['config', { watchDepth: 'value' }], - ['disabledButtons', { watchDepth: 'reference' }], - - ['query', { watchDepth: 'reference' }], - ['savedQuery', { watchDepth: 'reference' }], - ['intl', { watchDepth: 'reference' }], - - ['onQuerySubmit', { watchDepth: 'reference' }], - ['onFiltersUpdated', { watchDepth: 'reference' }], - ['onRefreshChange', { watchDepth: 'reference' }], - ['onClearSavedQuery', { watchDepth: 'reference' }], - ['onSaved', { watchDepth: 'reference' }], - ['onSavedQueryUpdated', { watchDepth: 'reference' }], - ['onSavedQueryIdChange', { watchDepth: 'reference' }], - - ['indexPatterns', { watchDepth: 'collection' }], - ['filters', { watchDepth: 'collection' }], - - // All modifiers default to true. - // Set to false to hide subcomponents. - 'showSearchBar', - 'showFilterBar', - 'showQueryBar', - 'showQueryInput', - 'showDatePicker', - 'showSaveQuery', - - 'appName', - 'screenTitle', - 'dateRangeFrom', - 'dateRangeTo', - 'savedQueryId', - 'isRefreshPaused', - 'refreshInterval', - 'disableAutoFocus', - 'showAutoRefreshOnly', - - // temporary flag to use the stateful components - 'useDefaultBehaviors', - ]); -}; - -module.directive('kbnTopNavHelper', createTopNavHelper(npStart.plugins.navigation.ui)); +module.directive( + 'kbnTopNavHelper', + createTopNavHelper(npStart.plugins.navigation.ui, wrapInI18nContext) +); diff --git a/src/plugins/kibana_legacy/public/angular/index.ts b/src/plugins/kibana_legacy/public/angular/index.ts index 0e18869f1c08b..cfac10178ed80 100644 --- a/src/plugins/kibana_legacy/public/angular/index.ts +++ b/src/plugins/kibana_legacy/public/angular/index.ts @@ -22,3 +22,5 @@ export { PromiseServiceCreator } from './promises'; export { watchMultiDecorator } from './watch_multi'; export * from './angular_config'; export { ensureDefaultIndexPattern } from './ensure_default_index_pattern'; +// @ts-ignore +export { createTopNavDirective, createTopNavHelper } from './kbn_top_nav'; diff --git a/src/plugins/kibana_legacy/public/angular/kbn_top_nav.js b/src/plugins/kibana_legacy/public/angular/kbn_top_nav.js new file mode 100644 index 0000000000000..2cbfac442639d --- /dev/null +++ b/src/plugins/kibana_legacy/public/angular/kbn_top_nav.js @@ -0,0 +1,115 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import 'ngreact'; + +export function createTopNavDirective() { + return { + restrict: 'E', + template: '', + compile: elem => { + const child = document.createElement('kbn-top-nav-helper'); + + // Copy attributes to the child directive + for (const attr of elem[0].attributes) { + child.setAttribute(attr.name, attr.value); + } + + // Add a special attribute that will change every time that one + // of the config array's disableButton function return value changes. + child.setAttribute('disabled-buttons', 'disabledButtons'); + + // Append helper directive + elem.append(child); + + const linkFn = ($scope, _, $attr) => { + // Watch config changes + $scope.$watch( + () => { + const config = $scope.$eval($attr.config) || []; + return config.map(item => { + // Copy key into id, as it's a reserved react propery. + // This is done for Angular directive backward compatibility. + // In React only id is recognized. + if (item.key && !item.id) { + item.id = item.key; + } + + // Watch the disableButton functions + if (typeof item.disableButton === 'function') { + return item.disableButton(); + } + return item.disableButton; + }); + }, + newVal => { + $scope.disabledButtons = newVal; + }, + true + ); + }; + + return linkFn; + }, + }; +} + +export const createTopNavHelper = ({ TopNavMenu }, wrapInI18nContext) => reactDirective => { + return reactDirective(wrapInI18nContext(TopNavMenu), [ + ['config', { watchDepth: 'value' }], + ['disabledButtons', { watchDepth: 'reference' }], + + ['query', { watchDepth: 'reference' }], + ['savedQuery', { watchDepth: 'reference' }], + ['intl', { watchDepth: 'reference' }], + + ['onQuerySubmit', { watchDepth: 'reference' }], + ['onFiltersUpdated', { watchDepth: 'reference' }], + ['onRefreshChange', { watchDepth: 'reference' }], + ['onClearSavedQuery', { watchDepth: 'reference' }], + ['onSaved', { watchDepth: 'reference' }], + ['onSavedQueryUpdated', { watchDepth: 'reference' }], + ['onSavedQueryIdChange', { watchDepth: 'reference' }], + + ['indexPatterns', { watchDepth: 'collection' }], + ['filters', { watchDepth: 'collection' }], + + // All modifiers default to true. + // Set to false to hide subcomponents. + 'showSearchBar', + 'showFilterBar', + 'showQueryBar', + 'showQueryInput', + 'showDatePicker', + 'showSaveQuery', + + 'appName', + 'screenTitle', + 'dateRangeFrom', + 'dateRangeTo', + 'savedQueryId', + 'isRefreshPaused', + 'refreshInterval', + 'disableAutoFocus', + 'showAutoRefreshOnly', + + // temporary flag to use the stateful components + 'useDefaultBehaviors', + ]); +}; diff --git a/x-pack/legacy/plugins/graph/public/application.ts b/x-pack/legacy/plugins/graph/public/application.ts index 80a797b7f0724..82e7e9dac78c3 100644 --- a/x-pack/legacy/plugins/graph/public/application.ts +++ b/x-pack/legacy/plugins/graph/public/application.ts @@ -22,9 +22,8 @@ import { } from 'kibana/public'; import { configureAppAngularModule, - createTopNavDirective, - createTopNavHelper, addAppRedirectMessageToUrl, + wrapInI18nContext, } from './legacy_imports'; // @ts-ignore import { initGraphApp } from './app'; @@ -37,6 +36,10 @@ import { checkLicense } from '../../../../plugins/graph/common/check_license'; import { NavigationPublicPluginStart as NavigationStart } from '../../../../../src/plugins/navigation/public'; import { createSavedWorkspacesLoader } from './services/persistence/saved_workspace_loader'; import { Storage } from '../../../../../src/plugins/kibana_utils/public'; +import { + createTopNavDirective, + createTopNavHelper, +} from '../../../../../src/plugins/kibana_legacy/public'; /** * These are dependencies of the Graph app besides the base dependencies @@ -132,7 +135,7 @@ function createLocalTopNavModule(navigation: NavigationStart) { angular .module('graphTopNav', ['react']) .directive('kbnTopNav', createTopNavDirective) - .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui)); + .directive('kbnTopNavHelper', createTopNavHelper(navigation.ui, wrapInI18nContext)); } function createLocalI18nModule() { diff --git a/x-pack/legacy/plugins/graph/public/legacy_imports.ts b/x-pack/legacy/plugins/graph/public/legacy_imports.ts index ac518d34551db..978c1b0bcc35b 100644 --- a/x-pack/legacy/plugins/graph/public/legacy_imports.ts +++ b/x-pack/legacy/plugins/graph/public/legacy_imports.ts @@ -6,8 +6,7 @@ import 'ace'; -// @ts-ignore -export { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav'; // @ts-ignore export { addAppRedirectMessageToUrl } from 'ui/notify'; export { configureAppAngularModule } from '../../../../../src/plugins/kibana_legacy/public'; +export { wrapInI18nContext } from 'ui/i18n'; diff --git a/x-pack/legacy/plugins/monitoring/public/np_imports/angular/modules.ts b/x-pack/legacy/plugins/monitoring/public/np_imports/angular/modules.ts index 2acb6031c6773..6c6a26f855654 100644 --- a/x-pack/legacy/plugins/monitoring/public/np_imports/angular/modules.ts +++ b/x-pack/legacy/plugins/monitoring/public/np_imports/angular/modules.ts @@ -9,6 +9,10 @@ import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular'; import { AppMountContext } from 'kibana/public'; import { Storage } from '../../../../../../../src/plugins/kibana_utils/public'; +import { + createTopNavDirective, + createTopNavHelper, +} from '../../../../../../../src/plugins/kibana_legacy/public'; import { GlobalStateProvider, @@ -16,11 +20,10 @@ import { AppStateProvider, EventsProvider, PersistedState, - createTopNavDirective, - createTopNavHelper, KbnUrlProvider, RedirectWhenMissingProvider, npStart, + wrapInI18nContext, } from '../legacy_imports'; // @ts-ignore @@ -132,7 +135,7 @@ function createLocalTopNavModule({ ui }: any) { angular .module('monitoring/TopNav', ['react']) .directive('kbnTopNav', createTopNavDirective) - .directive('kbnTopNavHelper', createTopNavHelper(ui)); + .directive('kbnTopNavHelper', createTopNavHelper(ui, wrapInI18nContext)); } function createLocalI18nModule() { diff --git a/x-pack/legacy/plugins/monitoring/public/np_imports/legacy_imports.ts b/x-pack/legacy/plugins/monitoring/public/np_imports/legacy_imports.ts index 012cbc77ce9c8..8ded6f56d2482 100644 --- a/x-pack/legacy/plugins/monitoring/public/np_imports/legacy_imports.ts +++ b/x-pack/legacy/plugins/monitoring/public/np_imports/legacy_imports.ts @@ -19,7 +19,6 @@ export { AppStateProvider } from 'ui/state_management/app_state'; export { EventsProvider } from 'ui/events'; export { PersistedState } from 'ui/persisted_state'; // @ts-ignore -export { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav'; -// @ts-ignore export { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url'; export { registerTimefilterWithGlobalStateFactory } from 'ui/timefilter/setup_router'; +export { wrapInI18nContext } from 'ui/i18n';