From fa7c2376870c98f995b48537c3fbe369bf22e602 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 24 Jan 2019 10:25:53 +0200 Subject: [PATCH 1/8] Refine Auth service: remove dead code and fix race condition --- client/app/services/auth.js | 91 +++++++++++++++---------------------- 1 file changed, 36 insertions(+), 55 deletions(-) diff --git a/client/app/services/auth.js b/client/app/services/auth.js index 86f7ddaabc..29a9e87a50 100644 --- a/client/app/services/auth.js +++ b/client/app/services/auth.js @@ -1,32 +1,37 @@ import debug from 'debug'; +import { includes, extend } from 'lodash'; -const logger = debug('redash:auth'); -const SESSION_ITEM = 'session'; -const session = { loaded: false }; +const currentUser = { + canEdit(object) { + const userId = object.user_id || (object.user && object.user.id); + return this.hasPermission('admin') || (userId && (userId === this.id)); + }, -function storeSession(sessionData) { - logger('Updating session to be:', sessionData); - Object.assign(session, sessionData, { loaded: true }); -} + hasPermission(permission) { + return includes(this.permissions, permission); + }, -function getLocalSessionData() { - if (session.loaded) { - return session; - } + get isAdmin() { + return this.hasPermission('admin'); + }, +}; - const sessionData = window.sessionStorage.getItem(SESSION_ITEM); - if (sessionData) { - storeSession(JSON.parse(sessionData)); - } +const clientConfig = {}; - return session; +const logger = debug('redash:auth'); +const session = { loaded: false }; + +function updateSession(sessionData) { + logger('Updating session to be:', sessionData); + extend(session, sessionData, { loaded: true }); + extend(currentUser, session.user); + extend(clientConfig, session.client_config); } function AuthService($window, $location, $q, $http) { - const Auth = { + return { isAuthenticated() { - const sessionData = getLocalSessionData(); - return sessionData.loaded && sessionData.user.id; + return session.loaded && session.user.id; }, login() { const next = encodeURI($location.url()); @@ -35,27 +40,25 @@ function AuthService($window, $location, $q, $http) { }, logout() { logger('Logout.'); - window.sessionStorage.removeItem(SESSION_ITEM); $window.location.href = 'logout'; }, loadSession() { logger('Loading session'); - const sessionData = getLocalSessionData(); - if (sessionData.loaded && sessionData.user.id) { + if (session.loaded && session.user.id) { logger('Resolving with local value.'); - return $q.resolve(sessionData); + return $q.resolve(session); } this.setApiKey(null); return $http.get('api/session').then((response) => { - storeSession(response.data); + updateSession(response.data); return session; }); }, loadConfig() { logger('Loading config'); return $http.get('/api/config').then((response) => { - storeSession({ client_config: response.data.client_config, user: { permissions: [] } }); + updateSession({ client_config: response.data.client_config, user: { permissions: [] } }); return response.data; }); }, @@ -68,14 +71,14 @@ function AuthService($window, $location, $q, $http) { }, requireSession() { logger('Requested authentication'); - if (Auth.isAuthenticated()) { - return $q.when(getLocalSessionData()); + if (this.isAuthenticated()) { + return $q.when(session); } - return Auth.loadSession() + return this.loadSession() .then(() => { - if (Auth.isAuthenticated()) { + if (this.isAuthenticated()) { logger('Loaded session'); - return getLocalSessionData(); + return session; } logger('Need to login, redirecting'); this.login(); @@ -86,33 +89,12 @@ function AuthService($window, $location, $q, $http) { }); }, }; - - return Auth; -} - -function CurrentUserService() { - const sessionData = getLocalSessionData(); - Object.assign(this, sessionData.user); - - this.canEdit = (object) => { - const userId = object.user_id || (object.user && object.user.id); - return this.hasPermission('admin') || (userId && userId === this.id); - }; - - this.hasPermission = permission => this.permissions.indexOf(permission) !== -1; - - this.isAdmin = this.hasPermission('admin'); -} - -function ClientConfigService() { - Object.assign(this, getLocalSessionData().client_config); } function apiKeyHttpInterceptor($injector) { return { request(config) { - const Auth = $injector.get('Auth'); - const apiKey = Auth.getApiKey(); + const apiKey = $injector.get('Auth').getApiKey(); if (apiKey) { config.headers.Authorization = `Key ${apiKey}`; } @@ -124,8 +106,8 @@ function apiKeyHttpInterceptor($injector) { export default function init(ngModule) { ngModule.factory('Auth', AuthService); - ngModule.service('currentUser', CurrentUserService); - ngModule.service('clientConfig', ClientConfigService); + ngModule.value('currentUser', currentUser); + ngModule.value('clientConfig', clientConfig); ngModule.factory('apiKeyHttpInterceptor', apiKeyHttpInterceptor); ngModule.config(($httpProvider) => { @@ -134,4 +116,3 @@ export default function init(ngModule) { } init.init = true; - From dd8968f3113186e0f30674e7f3e0f1e466c172c8 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 24 Jan 2019 10:48:38 +0200 Subject: [PATCH 2/8] Export services in CommonJS style --- client/app/lib/recordEvent.js | 2 +- client/app/services/alert-dialog.js | 15 +++++---- client/app/services/alert-subscription.js | 14 +++++--- client/app/services/alert.js | 15 +++++---- client/app/services/auth.js | 17 +++++++--- client/app/services/dashboard.js | 11 ++++-- client/app/services/data-source.js | 11 ++++-- client/app/services/destination.js | 16 +++++---- client/app/services/events.js | 14 +++++--- client/app/services/getTags.js | 2 +- client/app/services/group.js | 14 +++++--- client/app/services/http.js | 11 ------ client/app/services/keyboard-shortcuts.js | 10 ++++-- client/app/services/ng.js | 14 ++++++++ client/app/services/notifications.js | 10 ++++-- client/app/services/organization-status.js | 10 ++++-- client/app/services/query-snippet.js | 10 ++++-- client/app/services/query.js | 39 ++++++++++++---------- client/app/services/toastr.js | 10 ------ client/app/services/user.js | 12 +++++-- client/app/services/widget.js | 20 +++++++---- 21 files changed, 175 insertions(+), 102 deletions(-) delete mode 100644 client/app/services/http.js create mode 100644 client/app/services/ng.js delete mode 100644 client/app/services/toastr.js diff --git a/client/app/lib/recordEvent.js b/client/app/lib/recordEvent.js index f4c2e2ff51..0913fd9a09 100644 --- a/client/app/lib/recordEvent.js +++ b/client/app/lib/recordEvent.js @@ -1,5 +1,5 @@ import { debounce } from 'lodash'; -import { $http } from '@/services/http'; +import { $http } from '@/services/ng'; let events = []; diff --git a/client/app/services/alert-dialog.js b/client/app/services/alert-dialog.js index c64b48c30c..84b1c410a2 100644 --- a/client/app/services/alert-dialog.js +++ b/client/app/services/alert-dialog.js @@ -1,3 +1,5 @@ +export let AlertDialog = null; // eslint-disable-line import/no-mutable-exports + const AlertDialogComponent = { template: `
@@ -23,8 +25,8 @@ const AlertDialogComponent = { }, }; -function AlertDialog($uibModal) { - const service = { +function AlertDialogService($uibModal) { + return { open(title, message, confirm) { return $uibModal.open({ component: 'alertDialog', @@ -36,14 +38,15 @@ function AlertDialog($uibModal) { }).result; }, }; - - return service; } export default function init(ngModule) { ngModule.component('alertDialog', AlertDialogComponent); - ngModule.factory('AlertDialog', AlertDialog); + ngModule.factory('AlertDialog', AlertDialogService); + + ngModule.run(($injector) => { + AlertDialog = $injector.get('AlertDialog'); + }); } init.init = true; - diff --git a/client/app/services/alert-subscription.js b/client/app/services/alert-subscription.js index a50effa6c5..81daae1745 100644 --- a/client/app/services/alert-subscription.js +++ b/client/app/services/alert-subscription.js @@ -1,11 +1,15 @@ -function AlertSubscription($resource) { - const resource = $resource('api/alerts/:alertId/subscriptions/:subscriberId', { alertId: '@alert_id', subscriberId: '@id' }); - return resource; +export let AlertSubscription = null; // eslint-disable-line import/no-mutable-exports + +function AlertSubscriptionService($resource) { + return $resource('api/alerts/:alertId/subscriptions/:subscriberId', { alertId: '@alert_id', subscriberId: '@id' }); } export default function init(ngModule) { - ngModule.factory('AlertSubscription', AlertSubscription); + ngModule.factory('AlertSubscription', AlertSubscriptionService); + + ngModule.run(($injector) => { + AlertSubscription = $injector.get('AlertSubscription'); + }); } init.init = true; - diff --git a/client/app/services/alert.js b/client/app/services/alert.js index 0f7ff38234..cdd34865fa 100644 --- a/client/app/services/alert.js +++ b/client/app/services/alert.js @@ -1,4 +1,6 @@ -function Alert($resource, $http) { +export let Alert = null; // eslint-disable-line import/no-mutable-exports + +function AlertService($resource, $http) { const actions = { save: { method: 'POST', @@ -15,14 +17,15 @@ function Alert($resource, $http) { }].concat($http.defaults.transformRequest), }, }; - const resource = $resource('api/alerts/:id', { id: '@id' }, actions); - - return resource; + return $resource('api/alerts/:id', { id: '@id' }, actions); } export default function init(ngModule) { - ngModule.factory('Alert', Alert); + ngModule.factory('Alert', AlertService); + + ngModule.run(($injector) => { + Alert = $injector.get('Alert'); + }); } init.init = true; - diff --git a/client/app/services/auth.js b/client/app/services/auth.js index 29a9e87a50..5080bbfecc 100644 --- a/client/app/services/auth.js +++ b/client/app/services/auth.js @@ -1,10 +1,13 @@ import debug from 'debug'; import { includes, extend } from 'lodash'; -const currentUser = { +// eslint-disable-next-line import/no-mutable-exports +export let Auth = null; +// eslint-disable-next-line import/no-mutable-exports +export let currentUser = { canEdit(object) { const userId = object.user_id || (object.user && object.user.id); - return this.hasPermission('admin') || (userId && (userId === this.id)); + return this.hasPermission('admin') || (userId && userId === this.id); }, hasPermission(permission) { @@ -15,8 +18,8 @@ const currentUser = { return this.hasPermission('admin'); }, }; - -const clientConfig = {}; +// eslint-disable-next-line import/no-mutable-exports +export let clientConfig = {}; const logger = debug('redash:auth'); const session = { loaded: false }; @@ -113,6 +116,12 @@ export default function init(ngModule) { ngModule.config(($httpProvider) => { $httpProvider.interceptors.push('apiKeyHttpInterceptor'); }); + + ngModule.run(($injector) => { + Auth = $injector.get('Auth'); + currentUser = $injector.get('currentUser'); + clientConfig = $injector.get('clientConfig'); + }); } init.init = true; diff --git a/client/app/services/dashboard.js b/client/app/services/dashboard.js index bb63aea261..3898189297 100644 --- a/client/app/services/dashboard.js +++ b/client/app/services/dashboard.js @@ -1,5 +1,7 @@ import _ from 'lodash'; +export let Dashboard = null; // eslint-disable-line import/no-mutable-exports + function prepareWidgetsForDashboard(widgets) { // Default height for auto-height widgets. // Compute biggest widget size and choose between it and some magic number. @@ -44,7 +46,7 @@ function prepareWidgetsForDashboard(widgets) { return widgets; } -function Dashboard($resource, $http, $location, currentUser, Widget, dashboardGridOptions) { +function DashboardService($resource, $http, $location, currentUser, Widget, dashboardGridOptions) { function prepareDashboardWidgets(widgets) { return prepareWidgetsForDashboard(_.map(widgets, widget => new Widget(widget))); } @@ -183,8 +185,11 @@ function Dashboard($resource, $http, $location, currentUser, Widget, dashboardGr } export default function init(ngModule) { - ngModule.factory('Dashboard', Dashboard); + ngModule.factory('Dashboard', DashboardService); + + ngModule.run(($injector) => { + Dashboard = $injector.get('Dashboard'); + }); } init.init = true; - diff --git a/client/app/services/data-source.js b/client/app/services/data-source.js index 55b9697f7b..f1d69d5cbc 100644 --- a/client/app/services/data-source.js +++ b/client/app/services/data-source.js @@ -1,7 +1,9 @@ export const SCHEMA_NOT_SUPPORTED = 1; export const SCHEMA_LOAD_ERROR = 2; -function DataSource($q, $resource, $http) { +export let DataSource = null; // eslint-disable-line import/no-mutable-exports + +function DataSourceService($q, $resource, $http) { function fetchSchema(dataSourceId, refresh = false) { const params = {}; @@ -43,8 +45,11 @@ function DataSource($q, $resource, $http) { } export default function init(ngModule) { - ngModule.factory('DataSource', DataSource); + ngModule.factory('DataSource', DataSourceService); + + ngModule.run(($injector) => { + DataSource = $injector.get('DataSource'); + }); } init.init = true; - diff --git a/client/app/services/destination.js b/client/app/services/destination.js index 8225e05fda..9c3c6d2f61 100644 --- a/client/app/services/destination.js +++ b/client/app/services/destination.js @@ -1,17 +1,19 @@ -function Destination($resource) { +export let Destination = null; // eslint-disable-line import/no-mutable-exports + +function DestinationService($resource) { const actions = { get: { method: 'GET', cache: false, isArray: false }, query: { method: 'GET', cache: false, isArray: true }, }; - - const DestinationResource = $resource('api/destinations/:id', { id: '@id' }, actions); - - return DestinationResource; + return $resource('api/destinations/:id', { id: '@id' }, actions); } export default function init(ngModule) { - ngModule.factory('Destination', Destination); + ngModule.factory('Destination', DestinationService); + + ngModule.run(($injector) => { + Destination = $injector.get('Destination'); + }); } init.init = true; - diff --git a/client/app/services/events.js b/client/app/services/events.js index 18f26e6cb7..2f47160b3c 100644 --- a/client/app/services/events.js +++ b/client/app/services/events.js @@ -1,13 +1,17 @@ import recordEvent from '@/lib/recordEvent'; -function Events() { - this.record = (action, objectType, objectId, additionalProperties) => { - recordEvent(action, objectType, objectId, additionalProperties); - }; +export let Events = null; // eslint-disable-line import/no-mutable-exports + +function EventsService() { + this.record = recordEvent; } export default function init(ngModule) { - ngModule.service('Events', Events); + ngModule.service('Events', EventsService); + + ngModule.run(($injector) => { + Events = $injector.get('Events'); + }); } init.init = true; diff --git a/client/app/services/getTags.js b/client/app/services/getTags.js index d96edcb810..d5ad18e8eb 100644 --- a/client/app/services/getTags.js +++ b/client/app/services/getTags.js @@ -1,4 +1,4 @@ -import { $http } from '@/services/http'; +import { $http } from '@/services/ng'; function processTags(data) { return data.tags || []; diff --git a/client/app/services/group.js b/client/app/services/group.js index 5aab223b05..6751f9dc0a 100644 --- a/client/app/services/group.js +++ b/client/app/services/group.js @@ -1,4 +1,6 @@ -function Group($resource) { +export let Group = null; // eslint-disable-line import/no-mutable-exports + +function GroupService($resource) { const actions = { get: { method: 'GET', cache: false, isArray: false }, query: { method: 'GET', cache: false, isArray: true }, @@ -9,13 +11,15 @@ function Group($resource) { method: 'GET', cache: false, isArray: true, url: 'api/groups/:id/data_sources', }, }; - const resource = $resource('api/groups/:id', { id: '@id' }, actions); - return resource; + return $resource('api/groups/:id', { id: '@id' }, actions); } export default function init(ngModule) { - ngModule.factory('Group', Group); + ngModule.factory('Group', GroupService); + + ngModule.run(($injector) => { + Group = $injector.get('Group'); + }); } init.init = true; - diff --git a/client/app/services/http.js b/client/app/services/http.js deleted file mode 100644 index a04569294f..0000000000 --- a/client/app/services/http.js +++ /dev/null @@ -1,11 +0,0 @@ -// eslint-disable-next-line import/no-mutable-exports -export let $http = null; - -export default function init(ngModule) { - ngModule.run(($injector) => { - $http = $injector.get('$http'); - }); -} - -init.init = true; - diff --git a/client/app/services/keyboard-shortcuts.js b/client/app/services/keyboard-shortcuts.js index 7c25d33b2b..1e3b6cc2cb 100644 --- a/client/app/services/keyboard-shortcuts.js +++ b/client/app/services/keyboard-shortcuts.js @@ -2,6 +2,8 @@ import { each, trim, without } from 'lodash'; import Mousetrap from 'mousetrap'; import 'mousetrap/plugins/global-bind/mousetrap-global-bind'; +export let KeyboardShortcuts = null; // eslint-disable-line import/no-mutable-exports + const handlers = {}; function onShortcut(event, shortcut) { @@ -10,7 +12,7 @@ function onShortcut(event, shortcut) { each(handlers[shortcut], fn => fn()); } -function KeyboardShortcuts() { +function KeyboardShortcutsService() { this.modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'Cmd' : 'Ctrl'; this.bind = function bind(keymap) { @@ -44,7 +46,11 @@ function KeyboardShortcuts() { } export default function init(ngModule) { - ngModule.service('KeyboardShortcuts', KeyboardShortcuts); + ngModule.service('KeyboardShortcuts', KeyboardShortcutsService); + + ngModule.run(($injector) => { + KeyboardShortcuts = $injector.get('KeyboardShortcuts'); + }); } init.init = true; diff --git a/client/app/services/ng.js b/client/app/services/ng.js new file mode 100644 index 0000000000..9b7946798d --- /dev/null +++ b/client/app/services/ng.js @@ -0,0 +1,14 @@ +export let $http = null; // eslint-disable-line import/no-mutable-exports +export let $uibModal = null; // eslint-disable-line import/no-mutable-exports +export let toastr = null; // eslint-disable-line import/no-mutable-exports + +export default function init(ngModule) { + ngModule.run(($injector) => { + $http = $injector.get('$http'); + $uibModal = $injector.get('$uibModal'); + toastr = $injector.get('toastr'); + }); +} + +init.init = true; + diff --git a/client/app/services/notifications.js b/client/app/services/notifications.js index 0441df3362..97ac545e2f 100644 --- a/client/app/services/notifications.js +++ b/client/app/services/notifications.js @@ -1,8 +1,10 @@ import debug from 'debug'; +export let Notifications = null; // eslint-disable-line import/no-mutable-exports + const logger = debug('redash:notifications'); -function Notifications(currentUser, Events) { +function NotificationsService(currentUser, Events) { const notificationService = { pageVisible: true }; notificationService.monitorVisibility = function monitorVisibility() { @@ -79,7 +81,11 @@ function Notifications(currentUser, Events) { export default function init(ngModule) { - ngModule.factory('Notifications', Notifications); + ngModule.factory('Notifications', NotificationsService); + + ngModule.run(($injector) => { + Notifications = $injector.get('Notifications'); + }); } init.init = true; diff --git a/client/app/services/organization-status.js b/client/app/services/organization-status.js index b091e0910f..81d827e92e 100644 --- a/client/app/services/organization-status.js +++ b/client/app/services/organization-status.js @@ -1,4 +1,6 @@ -function OrganizationStatus($http) { +export let OrganizationStatus = null; // eslint-disable-line import/no-mutable-exports + +function OrganizationStatusService($http) { this.objectCounters = {}; this.refresh = () => @@ -9,7 +11,11 @@ function OrganizationStatus($http) { } export default function init(ngModule) { - ngModule.service('OrganizationStatus', OrganizationStatus); + ngModule.service('OrganizationStatus', OrganizationStatusService); + + ngModule.run(($injector) => { + OrganizationStatus = $injector.get('OrganizationStatus'); + }); } init.init = true; diff --git a/client/app/services/query-snippet.js b/client/app/services/query-snippet.js index 7fe97d0845..0d4bb7f1f2 100644 --- a/client/app/services/query-snippet.js +++ b/client/app/services/query-snippet.js @@ -1,4 +1,6 @@ -function QuerySnippet($resource) { +export let QuerySnippet = null; // eslint-disable-line import/no-mutable-exports + +function QuerySnippetService($resource) { const resource = $resource('api/query_snippets/:id', { id: '@id' }); resource.prototype.getSnippet = function getSnippet() { let name = this.trigger; @@ -17,7 +19,11 @@ function QuerySnippet($resource) { } export default function init(ngModule) { - ngModule.factory('QuerySnippet', QuerySnippet); + ngModule.factory('QuerySnippet', QuerySnippetService); + + ngModule.run(($injector) => { + QuerySnippet = $injector.get('QuerySnippet'); + }); } init.init = true; diff --git a/client/app/services/query.js b/client/app/services/query.js index 23151cc910..57ece987dd 100644 --- a/client/app/services/query.js +++ b/client/app/services/query.js @@ -8,6 +8,8 @@ import { Mustache.escape = identity; // do not html-escape values +export let Query = null; // eslint-disable-line import/no-mutable-exports + const logger = debug('redash:services:query'); const DATETIME_FORMATS = { @@ -323,7 +325,7 @@ function QueryResource( QueryResultError, QueryResult, ) { - const Query = $resource( + const QueryService = $resource( 'api/queries/:id', { id: '@id' }, { @@ -371,8 +373,8 @@ function QueryResource( }, ); - Query.newQuery = function newQuery() { - return new Query({ + QueryService.newQuery = function newQuery() { + return new QueryService({ query: '', name: 'New Query', schedule: null, @@ -381,7 +383,7 @@ function QueryResource( }); }; - Query.format = function formatQuery(syntax, query) { + QueryService.format = function formatQuery(syntax, query) { if (syntax === 'json') { try { const formatted = JSON.stringify(JSON.parse(query), ' ', 4); @@ -396,19 +398,19 @@ function QueryResource( } }; - Query.prototype.getSourceLink = function getSourceLink() { + QueryService.prototype.getSourceLink = function getSourceLink() { return `/queries/${this.id}/source`; }; - Query.prototype.isNew = function isNew() { + QueryService.prototype.isNew = function isNew() { return this.id === undefined; }; - Query.prototype.hasDailySchedule = function hasDailySchedule() { + QueryService.prototype.hasDailySchedule = function hasDailySchedule() { return this.schedule && this.schedule.match(/\d\d:\d\d/) !== null; }; - Query.prototype.scheduleInLocalTime = function scheduleInLocalTime() { + QueryService.prototype.scheduleInLocalTime = function scheduleInLocalTime() { const parts = this.schedule.split(':'); return moment .utc() @@ -418,15 +420,15 @@ function QueryResource( .format('HH:mm'); }; - Query.prototype.hasResult = function hasResult() { + QueryService.prototype.hasResult = function hasResult() { return !!(this.latest_query_data || this.latest_query_data_id); }; - Query.prototype.paramsRequired = function paramsRequired() { + QueryService.prototype.paramsRequired = function paramsRequired() { return this.getParameters().isRequired(); }; - Query.prototype.getQueryResult = function getQueryResult(maxAge, selectedQueryText) { + QueryService.prototype.getQueryResult = function getQueryResult(maxAge, selectedQueryText) { if (!this.query) { return new QueryResultError("Can't execute empty query."); } @@ -476,7 +478,7 @@ function QueryResource( return this.queryResult; }; - Query.prototype.getUrl = function getUrl(source, hash) { + QueryService.prototype.getUrl = function getUrl(source, hash) { let url = `queries/${this.id}`; if (source) { @@ -502,11 +504,11 @@ function QueryResource( return url; }; - Query.prototype.getQueryResultPromise = function getQueryResultPromise() { + QueryService.prototype.getQueryResultPromise = function getQueryResultPromise() { return this.getQueryResult().toPromise(); }; - Query.prototype.getParameters = function getParameters() { + QueryService.prototype.getParameters = function getParameters() { if (!this.$parameters) { this.$parameters = new Parameters(this, $location.search()); } @@ -514,17 +516,20 @@ function QueryResource( return this.$parameters; }; - Query.prototype.getParametersDefs = function getParametersDefs() { + QueryService.prototype.getParametersDefs = function getParametersDefs() { return this.getParameters().get(); }; - return Query; + return QueryService; } export default function init(ngModule) { ngModule.factory('QueryResultError', QueryResultErrorFactory); ngModule.factory('Query', QueryResource); + + ngModule.run(($injector) => { + Query = $injector.get('Query'); + }); } init.init = true; - diff --git a/client/app/services/toastr.js b/client/app/services/toastr.js deleted file mode 100644 index c46f3728e5..0000000000 --- a/client/app/services/toastr.js +++ /dev/null @@ -1,10 +0,0 @@ -// eslint-disable-next-line import/no-mutable-exports -export let toastr = null; - -export default function init(ngModule) { - ngModule.run(($injector) => { - toastr = $injector.get('toastr'); - }); -} - -init.init = true; diff --git a/client/app/services/user.js b/client/app/services/user.js index f020480131..a730cce2c6 100644 --- a/client/app/services/user.js +++ b/client/app/services/user.js @@ -1,5 +1,7 @@ import { isString } from 'lodash'; -import { $http } from '@/services/http'; +import { $http } from '@/services/ng'; + +export let User = null; // eslint-disable-line import/no-mutable-exports function disableResource(user) { return `api/users/${user.id}/disable`; @@ -63,7 +65,7 @@ function deleteUser(user, toastr, $sanitize) { }); } -function User($resource, $sanitize, toastr) { +function UserService($resource, $sanitize, toastr) { const actions = { get: { method: 'GET' }, save: { method: 'POST' }, @@ -83,7 +85,11 @@ function User($resource, $sanitize, toastr) { } export default function init(ngModule) { - ngModule.factory('User', User); + ngModule.factory('User', UserService); + + ngModule.run(($injector) => { + User = $injector.get('User'); + }); } init.init = true; diff --git a/client/app/services/widget.js b/client/app/services/widget.js index 9966689882..822af3dbeb 100644 --- a/client/app/services/widget.js +++ b/client/app/services/widget.js @@ -1,6 +1,8 @@ import moment from 'moment'; import { each, pick, extend, isObject, truncate, keys, difference, filter, map } from 'lodash'; +export let Widget = null; // eslint-disable-line import/no-mutable-exports + function calculatePositionOptions(Visualization, dashboardGridOptions, widget) { widget.width = 1; // Backward compatibility, user on back-end @@ -68,7 +70,7 @@ export const ParameterMappingType = { }; function WidgetFactory($http, $location, Query, Visualization, dashboardGridOptions) { - class Widget { + class WidgetService { static MappingType = ParameterMappingType; constructor(data) { @@ -171,7 +173,7 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti isStaticParam(param) { const mappings = this.getParameterMappings(); const mappingType = mappings[param.name].type; - return mappingType === Widget.MappingType.StaticValue; + return mappingType === WidgetService.MappingType.StaticValue; } getParametersDefs() { @@ -182,8 +184,8 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti const queryParams = $location.search(); const localTypes = [ - Widget.MappingType.WidgetLevel, - Widget.MappingType.StaticValue, + WidgetService.MappingType.WidgetLevel, + WidgetService.MappingType.StaticValue, ]; return map( filter(params, param => localTypes.indexOf(mappings[param.name].type) >= 0), @@ -193,7 +195,7 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti result.title = mapping.title || param.title; result.locals = [param]; result.urlPrefix = `w${this.id}_`; - if (mapping.type === Widget.MappingType.StaticValue) { + if (mapping.type === WidgetService.MappingType.StaticValue) { result.setValue(mapping.value); } else { result.fromUrlParams(queryParams); @@ -218,7 +220,7 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti // should be mapped to a dashboard-level parameter with the same name this.options.parameterMappings[param.name] = { name: param.name, - type: param.global ? Widget.MappingType.DashboardLevel : Widget.MappingType.WidgetLevel, + type: param.global ? WidgetService.MappingType.DashboardLevel : WidgetService.MappingType.WidgetLevel, mapTo: param.name, // map to param with the same name value: null, // for StaticValue title: '', // Use parameter's title @@ -239,11 +241,15 @@ function WidgetFactory($http, $location, Query, Visualization, dashboardGridOpti } } - return Widget; + return WidgetService; } export default function init(ngModule) { ngModule.factory('Widget', WidgetFactory); + + ngModule.run(($injector) => { + Widget = $injector.get('Widget'); + }); } init.init = true; From 9d116625067411ddaabdcbf2ad1415d839b4e764 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 24 Jan 2019 11:06:45 +0200 Subject: [PATCH 3/8] Refine Users, Events and OfflineListener services --- client/app/components/AutocompleteToggle.jsx | 4 +-- .../components/dynamic-form/DynamicForm.jsx | 2 +- client/app/index.js | 3 +- client/app/lib/recordEvent.js | 25 ------------- client/app/services/events.js | 25 +++++++++++-- client/app/services/ng.js | 2 ++ client/app/services/offline-listener.js | 36 +++++++++---------- client/app/services/user.js | 16 ++++----- 8 files changed, 55 insertions(+), 58 deletions(-) delete mode 100644 client/app/lib/recordEvent.js diff --git a/client/app/components/AutocompleteToggle.jsx b/client/app/components/AutocompleteToggle.jsx index e74e0a9047..940650cc67 100644 --- a/client/app/components/AutocompleteToggle.jsx +++ b/client/app/components/AutocompleteToggle.jsx @@ -2,7 +2,7 @@ import React from 'react'; import Tooltip from 'antd/lib/tooltip'; import PropTypes from 'prop-types'; import '@/redash-font/style.less'; -import recordEvent from '@/lib/recordEvent'; +import { Events } from '@/services/events'; export default function AutocompleteToggle({ state, disabled, onToggle }) { let tooltipMessage = 'Live Autocomplete Enabled'; @@ -18,7 +18,7 @@ export default function AutocompleteToggle({ state, disabled, onToggle }) { } const toggle = (newState) => { - recordEvent('toggle_autocomplete', 'screen', 'query_editor', { state: newState }); + Events.record('toggle_autocomplete', 'screen', 'query_editor', { state: newState }); onToggle(newState); }; diff --git a/client/app/components/dynamic-form/DynamicForm.jsx b/client/app/components/dynamic-form/DynamicForm.jsx index a35ede9107..329e2493a7 100644 --- a/client/app/components/dynamic-form/DynamicForm.jsx +++ b/client/app/components/dynamic-form/DynamicForm.jsx @@ -8,7 +8,7 @@ import Button from 'antd/lib/button'; import Upload from 'antd/lib/upload'; import Icon from 'antd/lib/icon'; import { react2angular } from 'react2angular'; -import { toastr } from '@/services/toastr'; +import { toastr } from '@/services/ng'; import { Field, Action, AntdForm } from '../proptypes'; import helper from './dynamicFormHelper'; diff --git a/client/app/index.js b/client/app/index.js index 11699ee39c..5b24c90750 100644 --- a/client/app/index.js +++ b/client/app/index.js @@ -13,8 +13,7 @@ ngModule.config(($locationProvider, $compileProvider, uiSelectConfig, toastrConf }); // Update ui-select's template to use Font-Awesome instead of glyphicon. -// eslint-disable-next-line no-unused-vars -ngModule.run(($templateCache, OfflineListener) => { +ngModule.run(($templateCache) => { const templateName = 'bootstrap/match.tpl.html'; let template = $templateCache.get(templateName); template = template.replace('glyphicon glyphicon-remove', 'fa fa-remove'); diff --git a/client/app/lib/recordEvent.js b/client/app/lib/recordEvent.js deleted file mode 100644 index 0913fd9a09..0000000000 --- a/client/app/lib/recordEvent.js +++ /dev/null @@ -1,25 +0,0 @@ -import { debounce } from 'lodash'; -import { $http } from '@/services/ng'; - -let events = []; - -const post = debounce(() => { - const eventsToSend = events; - events = []; - - $http.post('api/events', eventsToSend); -}, 1000); - -export default function recordEvent(action, objectType, objectId, additionalProperties) { - const event = { - action, - object_type: objectType, - object_id: objectId, - timestamp: Date.now() / 1000.0, - screen_resolution: `${window.screen.width}x${window.screen.height}`, - }; - Object.assign(event, additionalProperties); - events.push(event); - - post(); -} diff --git a/client/app/services/events.js b/client/app/services/events.js index 2f47160b3c..876d7e4d06 100644 --- a/client/app/services/events.js +++ b/client/app/services/events.js @@ -1,9 +1,30 @@ -import recordEvent from '@/lib/recordEvent'; +import { debounce, extend } from 'lodash'; +import { $http } from '@/services/ng'; export let Events = null; // eslint-disable-line import/no-mutable-exports +let events = []; + +const sendEvents = debounce(() => { + const eventsToSend = events; + events = []; + + $http.post('api/events', eventsToSend); +}, 1000); + function EventsService() { - this.record = recordEvent; + this.record = (action, objectType, objectId, additionalProperties) => { + const event = { + action, + object_type: objectType, + object_id: objectId, + timestamp: Date.now() / 1000.0, + screen_resolution: `${window.screen.width}x${window.screen.height}`, + }; + extend(event, additionalProperties); + events.push(event); + sendEvents(); + }; } export default function init(ngModule) { diff --git a/client/app/services/ng.js b/client/app/services/ng.js index 9b7946798d..ce59976f82 100644 --- a/client/app/services/ng.js +++ b/client/app/services/ng.js @@ -1,10 +1,12 @@ export let $http = null; // eslint-disable-line import/no-mutable-exports +export let $sanitize = null; // eslint-disable-line import/no-mutable-exports export let $uibModal = null; // eslint-disable-line import/no-mutable-exports export let toastr = null; // eslint-disable-line import/no-mutable-exports export default function init(ngModule) { ngModule.run(($injector) => { $http = $injector.get('$http'); + $sanitize = $injector.get('$sanitize'); $uibModal = $injector.get('$uibModal'); toastr = $injector.get('toastr'); }); diff --git a/client/app/services/offline-listener.js b/client/app/services/offline-listener.js index cf4fae5b77..a7ddad91b5 100644 --- a/client/app/services/offline-listener.js +++ b/client/app/services/offline-listener.js @@ -1,25 +1,25 @@ -function OfflineListener(toastr) { - function addOnlineListener(toast) { - function onlineStateHandler() { - toastr.remove(toast.toastId); - window.removeEventListener('online', onlineStateHandler); - } - window.addEventListener('online', onlineStateHandler); - } +import { toastr } from '@/services/ng'; - window.addEventListener('offline', () => { - const toast = toastr.warning('
Please check your Internet connection.
', '', { - allowHtml: true, - autoDismiss: false, - timeOut: false, - tapToDismiss: true, - }); - addOnlineListener(toast); - }); +function addOnlineListener(toast) { + function onlineStateHandler() { + toastr.remove(toast.toastId); + window.removeEventListener('online', onlineStateHandler); + } + window.addEventListener('online', onlineStateHandler); } export default function init(ngModule) { - ngModule.service('OfflineListener', OfflineListener); + ngModule.run(() => { + window.addEventListener('offline', () => { + const toast = toastr.warning('
Please check your Internet connection.
', '', { + allowHtml: true, + autoDismiss: false, + timeOut: false, + tapToDismiss: true, + }); + addOnlineListener(toast); + }); + }); } init.init = true; diff --git a/client/app/services/user.js b/client/app/services/user.js index a730cce2c6..9921b7adb8 100644 --- a/client/app/services/user.js +++ b/client/app/services/user.js @@ -1,5 +1,5 @@ import { isString } from 'lodash'; -import { $http } from '@/services/ng'; +import { $http, $sanitize, toastr } from '@/services/ng'; export let User = null; // eslint-disable-line import/no-mutable-exports @@ -7,7 +7,7 @@ function disableResource(user) { return `api/users/${user.id}/disable`; } -function enableUser(user, toastr, $sanitize) { +function enableUser(user) { const userName = $sanitize(user.name); return $http @@ -27,7 +27,7 @@ function enableUser(user, toastr, $sanitize) { }); } -function disableUser(user, toastr, $sanitize) { +function disableUser(user) { const userName = $sanitize(user.name); return $http .post(disableResource(user)) @@ -47,7 +47,7 @@ function disableUser(user, toastr, $sanitize) { }); } -function deleteUser(user, toastr, $sanitize) { +function deleteUser(user) { const userName = $sanitize(user.name); return $http .delete(`api/users/${user.id}`) @@ -65,7 +65,7 @@ function deleteUser(user, toastr, $sanitize) { }); } -function UserService($resource, $sanitize, toastr) { +function UserService($resource) { const actions = { get: { method: 'GET' }, save: { method: 'POST' }, @@ -77,9 +77,9 @@ function UserService($resource, $sanitize, toastr) { const UserResource = $resource('api/users/:id', { id: '@id' }, actions); - UserResource.enableUser = user => enableUser(user, toastr, $sanitize); - UserResource.disableUser = user => disableUser(user, toastr, $sanitize); - UserResource.deleteUser = user => deleteUser(user, toastr, $sanitize); + UserResource.enableUser = enableUser; + UserResource.disableUser = disableUser; + UserResource.deleteUser = deleteUser; return UserResource; } From 99519429bb18bbcad8ef054f395f9393d27e088d Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 24 Jan 2019 11:50:13 +0200 Subject: [PATCH 4/8] Refactor Notifications service - rewrite to CommonJS --- client/app/pages/queries/view.js | 2 +- client/app/services/notifications.js | 106 +++++++++++---------------- 2 files changed, 44 insertions(+), 64 deletions(-) diff --git a/client/app/pages/queries/view.js b/client/app/pages/queries/view.js index 76fc36b991..d8c4f1aacb 100644 --- a/client/app/pages/queries/view.js +++ b/client/app/pages/queries/view.js @@ -1,6 +1,7 @@ import { pick, some, find, minBy, map, intersection, isArray, isObject } from 'lodash'; import { SCHEMA_NOT_SUPPORTED, SCHEMA_LOAD_ERROR } from '@/services/data-source'; import getTags from '@/services/getTags'; +import Notifications from '@/services/notifications'; import template from './query.html'; const DEFAULT_TAB = 'table'; @@ -16,7 +17,6 @@ function QueryViewCtrl( KeyboardShortcuts, Title, AlertDialog, - Notifications, clientConfig, toastr, $uibModal, diff --git a/client/app/services/notifications.js b/client/app/services/notifications.js index 97ac545e2f..cc2e79e2ee 100644 --- a/client/app/services/notifications.js +++ b/client/app/services/notifications.js @@ -1,71 +1,63 @@ +import { find } from 'lodash'; import debug from 'debug'; - -export let Notifications = null; // eslint-disable-line import/no-mutable-exports +import { Events } from '@/services/events'; const logger = debug('redash:notifications'); -function NotificationsService(currentUser, Events) { - const notificationService = { pageVisible: true }; - - notificationService.monitorVisibility = function monitorVisibility() { - let hidden; - let visibilityChange; +const Notification = window.Notification || null; +if (!Notification) { + logger('HTML5 notifications are not supported.'); +} - if (typeof document.hidden !== 'undefined') { - hidden = 'hidden'; - visibilityChange = 'visibilitychange'; - } else if (typeof document.msHidden !== 'undefined') { - hidden = 'msHidden'; - visibilityChange = 'msvisibilitychange'; +const hidden = find( + ['hidden', 'webkitHidden', 'mozHidden', 'msHidden'], + prop => prop in document, +); +const visibilityChange = find( + ['visibilitychange', 'webkitvisibilitychange', 'mozvisibilitychange', 'msvisibilitychange'], + prop => prop in document, +); + +class NotificationsService { + constructor() { + this.pageVisible = false; + this.monitorVisibility(); + } + + // eslint-disable-next-line class-methods-use-this + getPermissions() { + if (Notification && (Notification.permission === 'default')) { + Notification.requestPermission((status) => { + if (Notification.permission !== status) { + Notification.permission = status; + } + }); } + } + monitorVisibility() { + this.pageVisible = !document[hidden]; let documentHidden = document[hidden]; document.addEventListener(visibilityChange, () => { if (documentHidden !== document[hidden]) { - if (document[hidden]) { - notificationService.pageVisible = false; - } else { - notificationService.pageVisible = true; - } - + this.pageVisible = !document[hidden]; documentHidden = document[hidden]; } }); - }; - - notificationService.monitorVisibility(); - - notificationService.isSupported = () => { - if ('Notification' in window) { - return true; - } - - logger('HTML5 notifications are not supported.'); - return false; - }; + } - notificationService.getPermissions = function getPermissions() { - if (!this.isSupported()) { - return; - } - - if (Notification.permission === 'default') { - Notification.requestPermission((status) => { - if (Notification.permission !== status) { - Notification.permission = status; - } - }); - } - }; - - notificationService.showNotification = function showNotification(title, content) { - if (!this.isSupported() || this.pageVisible || Notification.permission !== 'granted') { + showNotification(title, content) { + if (!Notification || this.pageVisible || (Notification.permission !== 'granted')) { return; } // using the 'tag' to avoid showing duplicate notifications - const notification = new Notification(title, { tag: title + content, body: content, icon: '/images/redash_icon_small.png' }); + const notification = new Notification(title, { + tag: title + content, + body: content, + icon: '/images/redash_icon_small.png', + }); setTimeout(() => { notification.close(); }, 3000); @@ -74,19 +66,7 @@ function NotificationsService(currentUser, Events) { this.close(); Events.record('click', 'notification'); }; - }; - - return notificationService; + } } - -export default function init(ngModule) { - ngModule.factory('Notifications', NotificationsService); - - ngModule.run(($injector) => { - Notifications = $injector.get('Notifications'); - }); -} - -init.init = true; - +export default new NotificationsService(); From 1303b0485673b69199b5f4977210ada8d03df365 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 24 Jan 2019 12:49:20 +0200 Subject: [PATCH 5/8] Replace Angular service injection with imports in React components --- client/app/components/DateInput.jsx | 5 +- client/app/components/DateRangeInput.jsx | 5 +- client/app/components/DateTimeInput.jsx | 5 +- client/app/components/DateTimeRangeInput.jsx | 5 +- client/app/components/Footer.jsx | 17 +----- client/app/components/ParameterValueInput.jsx | 55 +++---------------- .../components/QueryBasedParameterInput.jsx | 4 +- client/app/components/QueryEditor.jsx | 20 +++---- .../dashboards/AddTextboxDialog.jsx | 6 +- .../components/dashboards/AddWidgetDialog.jsx | 17 ++---- .../EditParameterMappingsDialog.jsx | 8 +-- .../tags-control/DashboardTagsControl.jsx | 2 +- .../tags-control/QueryTagsControl.jsx | 2 +- .../components/tags-control/TagsControl.jsx | 3 +- 14 files changed, 44 insertions(+), 110 deletions(-) diff --git a/client/app/components/DateInput.jsx b/client/app/components/DateInput.jsx index 695a2a1997..ff7812ed8e 100644 --- a/client/app/components/DateInput.jsx +++ b/client/app/components/DateInput.jsx @@ -3,12 +3,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; +import { clientConfig } from '@/services/auth'; export function DateInput({ value, onSelect, - // eslint-disable-next-line react/prop-types - clientConfig, className, }) { const format = clientConfig.dateFormat || 'YYYY-MM-DD'; @@ -46,7 +45,7 @@ DateInput.defaultProps = { }; export default function init(ngModule) { - ngModule.component('dateInput', react2angular(DateInput, null, ['clientConfig'])); + ngModule.component('dateInput', react2angular(DateInput)); } init.init = true; diff --git a/client/app/components/DateRangeInput.jsx b/client/app/components/DateRangeInput.jsx index 1b1454bbb5..d8ccef48f7 100644 --- a/client/app/components/DateRangeInput.jsx +++ b/client/app/components/DateRangeInput.jsx @@ -4,14 +4,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; +import { clientConfig } from '@/services/auth'; const { RangePicker } = DatePicker; export function DateRangeInput({ value, onSelect, - // eslint-disable-next-line react/prop-types - clientConfig, className, }) { const format = clientConfig.dateFormat || 'YYYY-MM-DD'; @@ -53,7 +52,7 @@ DateRangeInput.defaultProps = { }; export default function init(ngModule) { - ngModule.component('dateRangeInput', react2angular(DateRangeInput, null, ['clientConfig'])); + ngModule.component('dateRangeInput', react2angular(DateRangeInput)); } init.init = true; diff --git a/client/app/components/DateTimeInput.jsx b/client/app/components/DateTimeInput.jsx index d95fd60884..92fb81f104 100644 --- a/client/app/components/DateTimeInput.jsx +++ b/client/app/components/DateTimeInput.jsx @@ -3,13 +3,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; +import { clientConfig } from '@/services/auth'; export function DateTimeInput({ value, withSeconds, onSelect, - // eslint-disable-next-line react/prop-types - clientConfig, className, }) { const format = (clientConfig.dateFormat || 'YYYY-MM-DD') + @@ -51,7 +50,7 @@ DateTimeInput.defaultProps = { }; export default function init(ngModule) { - ngModule.component('dateTimeInput', react2angular(DateTimeInput, null, ['clientConfig'])); + ngModule.component('dateTimeInput', react2angular(DateTimeInput)); } init.init = true; diff --git a/client/app/components/DateTimeRangeInput.jsx b/client/app/components/DateTimeRangeInput.jsx index d0fa5ecb39..51f6c62ddc 100644 --- a/client/app/components/DateTimeRangeInput.jsx +++ b/client/app/components/DateTimeRangeInput.jsx @@ -4,6 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import DatePicker from 'antd/lib/date-picker'; +import { clientConfig } from '@/services/auth'; const { RangePicker } = DatePicker; @@ -11,8 +12,6 @@ export function DateTimeRangeInput({ value, withSeconds, onSelect, - // eslint-disable-next-line react/prop-types - clientConfig, className, }) { const format = (clientConfig.dateFormat || 'YYYY-MM-DD') + @@ -58,7 +57,7 @@ DateTimeRangeInput.defaultProps = { }; export default function init(ngModule) { - ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput, null, ['clientConfig'])); + ngModule.component('dateTimeRangeInput', react2angular(DateTimeRangeInput)); } init.init = true; diff --git a/client/app/components/Footer.jsx b/client/app/components/Footer.jsx index bd1f06efda..7e45562fe1 100644 --- a/client/app/components/Footer.jsx +++ b/client/app/components/Footer.jsx @@ -1,11 +1,10 @@ import React from 'react'; -import PropTypes from 'prop-types'; - import { react2angular } from 'react2angular'; +import { clientConfig, currentUser } from '@/services/auth'; import frontendVersion from '../version.json'; -export function Footer({ clientConfig, currentUser }) { +export function Footer() { const backendVersion = clientConfig.version; const newVersionAvailable = clientConfig.newVersionAvailable && currentUser.isAdmin; const separator = ' \u2022 '; @@ -31,18 +30,8 @@ export function Footer({ clientConfig, currentUser }) { ); } -Footer.propTypes = { - clientConfig: PropTypes.shape({ - version: PropTypes.string, - newVersionAvailable: PropTypes.bool, - }).isRequired, - currentUser: PropTypes.shape({ - isAdmin: PropTypes.bool, - }).isRequired, -}; - export default function init(ngModule) { - ngModule.component('footer', react2angular(Footer, [], ['clientConfig', 'currentUser'])); + ngModule.component('footer', react2angular(Footer)); } init.init = true; diff --git a/client/app/components/ParameterValueInput.jsx b/client/app/components/ParameterValueInput.jsx index c16edcc7af..301e83fc91 100644 --- a/client/app/components/ParameterValueInput.jsx +++ b/client/app/components/ParameterValueInput.jsx @@ -31,99 +31,69 @@ export class ParameterValueInput extends React.Component { }; renderDateTimeWithSecondsInput() { - const { - value, - onSelect, - clientConfig, // eslint-disable-line react/prop-types - } = this.props; + const { value, onSelect } = this.props; return ( ); } renderDateTimeInput() { - const { - value, - onSelect, - clientConfig, // eslint-disable-line react/prop-types - } = this.props; + const { value, onSelect } = this.props; return ( ); } renderDateInput() { - const { - value, - onSelect, - clientConfig, // eslint-disable-line react/prop-types - } = this.props; + const { value, onSelect } = this.props; return ( ); } renderDateTimeRangeWithSecondsInput() { - const { - value, - onSelect, - clientConfig, // eslint-disable-line react/prop-types - } = this.props; + const { value, onSelect } = this.props; return ( ); } renderDateTimeRangeInput() { - const { - value, - onSelect, - clientConfig, // eslint-disable-line react/prop-types - } = this.props; + const { value, onSelect } = this.props; return ( ); } renderDateRangeInput() { - const { - value, - onSelect, - clientConfig, // eslint-disable-line react/prop-types - } = this.props; + const { value, onSelect } = this.props; return ( ); } @@ -146,19 +116,13 @@ export class ParameterValueInput extends React.Component { } renderQueryBasedInput() { - const { - value, - onSelect, - queryId, - Query, // eslint-disable-line react/prop-types - } = this.props; + const { value, onSelect, queryId } = this.props; return ( ); } @@ -212,10 +176,7 @@ export default function init(ngModule) { }; }, }); - ngModule.component( - 'parameterValueInputImpl', - react2angular(ParameterValueInput, null, ['clientConfig', 'Query']), - ); + ngModule.component('parameterValueInputImpl', react2angular(ParameterValueInput)); } init.init = true; diff --git a/client/app/components/QueryBasedParameterInput.jsx b/client/app/components/QueryBasedParameterInput.jsx index f9ef4ebace..8c82bda54e 100644 --- a/client/app/components/QueryBasedParameterInput.jsx +++ b/client/app/components/QueryBasedParameterInput.jsx @@ -3,6 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; import Select from 'antd/lib/select'; +import { Query } from '@/services/query'; const { Option } = Select; @@ -79,7 +80,6 @@ export class QueryBasedParameterInput extends React.Component { _loadOptions(queryId) { if (queryId && (queryId !== this.state.queryId)) { - const Query = this.props.Query; // eslint-disable-line react/prop-types this.setState({ loading: true }); Query.resultById({ id: queryId }, (result) => { if (this.props.queryId === queryId) { @@ -117,7 +117,7 @@ export class QueryBasedParameterInput extends React.Component { } export default function init(ngModule) { - ngModule.component('queryBasedParameterInput', react2angular(QueryBasedParameterInput, null, ['Query'])); + ngModule.component('queryBasedParameterInput', react2angular(QueryBasedParameterInput)); } init.init = true; diff --git a/client/app/components/QueryEditor.jsx b/client/app/components/QueryEditor.jsx index f9e2499f8f..c86b704a1c 100644 --- a/client/app/components/QueryEditor.jsx +++ b/client/app/components/QueryEditor.jsx @@ -14,6 +14,10 @@ import 'brace/mode/sql'; import 'brace/theme/textmate'; import 'brace/ext/searchbox'; +import { Query } from '@/services/query'; +import { QuerySnippet } from '@/services/query-snippet'; +import { KeyboardShortcuts } from '@/services/keyboard-shortcuts'; + import localOptions from '@/lib/localOptions'; import AutocompleteToggle from '@/components/AutocompleteToggle'; import keywordBuilder from './keywordBuilder'; @@ -152,8 +156,7 @@ class QueryEditor extends React.Component { } }); - // eslint-disable-next-line react/prop-types - this.props.QuerySnippet.query((snippets) => { + QuerySnippet.query((snippets) => { const snippetManager = snippetsModule.snippetManager; const m = { snippetText: '', @@ -194,7 +197,7 @@ class QueryEditor extends React.Component { const selectedQueryText = (rawSelectedQueryText.length > 1) ? rawSelectedQueryText : null; this.setState({ selectedQueryText }); this.props.updateSelectedQuery(selectedQueryText); - } + }; updateQuery = (queryText) => { this.props.updateQuery(queryText); @@ -202,9 +205,7 @@ class QueryEditor extends React.Component { }; formatQuery = () => { - // eslint-disable-next-line react/prop-types - const format = this.props.Query.format; - format(this.props.dataSource.syntax || 'sql', this.props.queryText) + Query.format(this.props.dataSource.syntax || 'sql', this.props.queryText) .then(this.updateQuery) .catch(error => toastr.error(error)); }; @@ -212,11 +213,10 @@ class QueryEditor extends React.Component { toggleAutocomplete = (state) => { this.setState({ autocompleteQuery: state }); localOptions.set('liveAutocomplete', state); - } + }; render() { - // eslint-disable-next-line react/prop-types - const modKey = this.props.KeyboardShortcuts.modKey; + const modKey = KeyboardShortcuts.modKey; const isExecuteDisabled = this.props.queryExecuting || !this.props.canExecuteQuery(); @@ -320,7 +320,7 @@ class QueryEditor extends React.Component { } export default function init(ngModule) { - ngModule.component('queryEditor', react2angular(QueryEditor, null, ['QuerySnippet', 'Query', 'KeyboardShortcuts'])); + ngModule.component('queryEditor', react2angular(QueryEditor)); } init.init = true; diff --git a/client/app/components/dashboards/AddTextboxDialog.jsx b/client/app/components/dashboards/AddTextboxDialog.jsx index 97fead0cc8..6d9510ae51 100644 --- a/client/app/components/dashboards/AddTextboxDialog.jsx +++ b/client/app/components/dashboards/AddTextboxDialog.jsx @@ -3,6 +3,8 @@ import { debounce } from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import { react2angular } from 'react2angular'; +import { toastr } from '@/services/ng'; +import { Widget } from '@/services/widget'; class AddTextboxDialog extends React.Component { static propTypes = { @@ -38,8 +40,6 @@ class AddTextboxDialog extends React.Component { } saveWidget() { - const Widget = this.props.Widget; // eslint-disable-line react/prop-types - const toastr = this.props.toastr; // eslint-disable-line react/prop-types const dashboard = this.props.dashboard; this.setState({ saveInProgress: true }); @@ -148,7 +148,7 @@ export default function init(ngModule) { dismiss: '&', }, }); - ngModule.component('addTextboxDialogImpl', react2angular(AddTextboxDialog, null, ['toastr', 'Widget'])); + ngModule.component('addTextboxDialogImpl', react2angular(AddTextboxDialog)); } init.init = true; diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx index 6d51a35e90..ea351575f4 100644 --- a/client/app/components/dashboards/AddWidgetDialog.jsx +++ b/client/app/components/dashboards/AddWidgetDialog.jsx @@ -10,6 +10,10 @@ import { editableMappingsToParameterMappings, } from '@/components/ParameterMappingInput'; +import { toastr } from '@/services/ng'; +import { Widget } from '@/services/widget'; +import { Query } from '@/services/query'; + const { Option, OptGroup } = Select; class AddWidgetDialog extends React.Component { @@ -38,7 +42,6 @@ class AddWidgetDialog extends React.Component { }; // Don't show draft (unpublished) queries - const Query = this.props.Query; // eslint-disable-line react/prop-types Query.recent().$promise.then((items) => { this.setState({ recentQueries: items.filter(item => !item.is_draft), @@ -62,7 +65,6 @@ class AddWidgetDialog extends React.Component { }); if (queryId) { - const Query = this.props.Query; // eslint-disable-line react/prop-types Query.get({ id: queryId }, (query) => { if (query) { const existingParamNames = map( @@ -95,7 +97,6 @@ class AddWidgetDialog extends React.Component { return; } - const Query = this.props.Query; // eslint-disable-line react/prop-types Query.query({ q: term }, (results) => { // If user will type too quick - it's possible that there will be // several requests running simultaneously. So we need to check @@ -117,8 +118,6 @@ class AddWidgetDialog extends React.Component { } saveWidget() { - const Widget = this.props.Widget; // eslint-disable-line react/prop-types - const toastr = this.props.toastr; // eslint-disable-line react/prop-types const dashboard = this.props.dashboard; this.setState({ saveInProgress: true }); @@ -278,9 +277,6 @@ class AddWidgetDialog extends React.Component { } render() { - const clientConfig = this.props.clientConfig; // eslint-disable-line react/prop-types - const Query = this.props.Query; // eslint-disable-line react/prop-types - const existingParams = map( this.props.dashboard.getParametersDefs(), ({ name, type }) => ({ name, type }), @@ -313,8 +309,6 @@ class AddWidgetDialog extends React.Component { mappings={this.state.parameterMappings} existingParams={existingParams} onChange={mappings => this.updateParamMappings(mappings)} - clientConfig={clientConfig} - Query={Query} />, ] } @@ -358,8 +352,7 @@ export default function init(ngModule) { dismiss: '&', }, }); - ngModule.component('addWidgetDialogImpl', react2angular(AddWidgetDialog, null, [ - 'toastr', 'Widget', 'Query', 'clientConfig'])); + ngModule.component('addWidgetDialogImpl', react2angular(AddWidgetDialog)); } init.init = true; diff --git a/client/app/components/dashboards/EditParameterMappingsDialog.jsx b/client/app/components/dashboards/EditParameterMappingsDialog.jsx index 2230224933..776be76f6c 100644 --- a/client/app/components/dashboards/EditParameterMappingsDialog.jsx +++ b/client/app/components/dashboards/EditParameterMappingsDialog.jsx @@ -60,9 +60,6 @@ class EditParameterMappingsDialog extends React.Component { } render() { - const clientConfig = this.props.clientConfig; // eslint-disable-line react/prop-types - const Query = this.props.Query; // eslint-disable-line react/prop-types - const existingParams = map( this.props.dashboard.getParametersDefs(), ({ name, type }) => ({ name, type }), @@ -89,8 +86,6 @@ class EditParameterMappingsDialog extends React.Component { mappings={this.state.parameterMappings} existingParams={existingParams} onChange={mappings => this.updateParamMappings(mappings)} - clientConfig={clientConfig} - Query={Query} /> }
@@ -134,8 +129,7 @@ export default function init(ngModule) { dismiss: '&', }, }); - ngModule.component('editParameterMappingsDialogImpl', react2angular(EditParameterMappingsDialog, null, [ - 'Query', 'clientConfig'])); + ngModule.component('editParameterMappingsDialogImpl', react2angular(EditParameterMappingsDialog)); } init.init = true; diff --git a/client/app/components/tags-control/DashboardTagsControl.jsx b/client/app/components/tags-control/DashboardTagsControl.jsx index 1a535d4994..7337964308 100644 --- a/client/app/components/tags-control/DashboardTagsControl.jsx +++ b/client/app/components/tags-control/DashboardTagsControl.jsx @@ -6,7 +6,7 @@ export class DashboardTagsControl extends ModelTagsControl { } export default function init(ngModule) { - ngModule.component('dashboardTagsControl', react2angular(DashboardTagsControl, null, ['$uibModal'])); + ngModule.component('dashboardTagsControl', react2angular(DashboardTagsControl)); } init.init = true; diff --git a/client/app/components/tags-control/QueryTagsControl.jsx b/client/app/components/tags-control/QueryTagsControl.jsx index cd071e2308..9b56c26700 100644 --- a/client/app/components/tags-control/QueryTagsControl.jsx +++ b/client/app/components/tags-control/QueryTagsControl.jsx @@ -6,7 +6,7 @@ export class QueryTagsControl extends ModelTagsControl { } export default function init(ngModule) { - ngModule.component('queryTagsControl', react2angular(QueryTagsControl, null, ['$uibModal'])); + ngModule.component('queryTagsControl', react2angular(QueryTagsControl)); } init.init = true; diff --git a/client/app/components/tags-control/TagsControl.jsx b/client/app/components/tags-control/TagsControl.jsx index c486ac78af..0a28c0f98d 100644 --- a/client/app/components/tags-control/TagsControl.jsx +++ b/client/app/components/tags-control/TagsControl.jsx @@ -1,6 +1,7 @@ import { map, trim } from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; +import { $uibModal } from '@/services/ng'; export default class TagsControl extends React.Component { static propTypes = { @@ -20,7 +21,7 @@ export default class TagsControl extends React.Component { }; editTags() { - const { getAvailableTags, onEdit, $uibModal } = this.props; // eslint-disable-line react/prop-types + const { getAvailableTags, onEdit } = this.props; // eslint-disable-line react/prop-types const tags = map(this.props.tags, trim); getAvailableTags().then((availableTags) => { From 1d421dd7bff2d91dcbcb312d115f74c0d6ef3209 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 24 Jan 2019 13:06:57 +0200 Subject: [PATCH 6/8] Fix Footer tests --- client/app/components/Footer.test.js | 15 +++++++++------ client/app/services/auth.js | 10 ++++------ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/client/app/components/Footer.test.js b/client/app/components/Footer.test.js index 81a157ebfc..519a9e5732 100644 --- a/client/app/components/Footer.test.js +++ b/client/app/components/Footer.test.js @@ -1,16 +1,19 @@ +import { extend } from 'lodash'; import React from 'react'; import renderer from 'react-test-renderer'; +import { clientConfig, currentUser } from '../services/auth'; import { Footer } from './Footer'; test('Footer renders', () => { - const clientConfig = { + // TODO: Properly mock this + extend(clientConfig, { version: '5.0.1', newVersionAvailable: true, - }; - const currentUser = { - isAdmin: true, - }; - const component = renderer.create(