Skip to content

Commit

Permalink
Migrate kbn_top_nav.js to kibana_legacy
Browse files Browse the repository at this point in the history
  • Loading branch information
maryia-lapata committed Feb 21, 2020
1 parent cdda82e commit 89199d0
Show file tree
Hide file tree
Showing 12 changed files with 159 additions and 123 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -41,3 +39,4 @@ export {
PrivateProvider,
PromiseServiceCreator,
} from '../../../../../plugins/kibana_legacy/public';
export { wrapInI18nContext } from 'ui/i18n';
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,24 @@ 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';
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 {
Expand Down Expand Up @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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';
Expand All @@ -63,21 +62,23 @@ 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';
// @ts-ignore
import { DebounceProviderTimeout } from './np_ready/angular/directives/debounce/debounce';
import { createRenderCompleteDirective } from './np_ready/angular/directives/render_complete';
import {
initAngularBootstrap,
configureAppAngularModule,
IPrivate,
KbnAccessibleClickProvider,
PrivateProvider,
PromiseServiceCreator,
registerListenEventListener,
watchMultiDecorator,
createTopNavDirective,
createTopNavHelper,
} from '../../../../../plugins/kibana_legacy/public';

/**
Expand Down Expand Up @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
import { AppMountContext } from 'kibana/public';
import {
configureAppAngularModule,
createTopNavDirective,
createTopNavHelper,
EventsProvider,
GlobalStateProvider,
KbnUrlProvider,
Expand All @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down
107 changes: 9 additions & 98 deletions src/legacy/ui/public/kbn_top_nav/kbn_top_nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
);
2 changes: 2 additions & 0 deletions src/plugins/kibana_legacy/public/angular/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
115 changes: 115 additions & 0 deletions src/plugins/kibana_legacy/public/angular/kbn_top_nav.js
Original file line number Diff line number Diff line change
@@ -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',
]);
};
Loading

0 comments on commit 89199d0

Please sign in to comment.