refactor(app): convert root folder files to es6 (#4159)

app/__module.js

@@ -1,55 +0,0 @@
-import './assets/css';
-import '@babel/polyfill';
-
-import angular from 'angular';
-import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
-
-import './matomo-setup';
-import analyticsModule from './angulartics.matomo';
-
-import './agent';
-import './azure/_module';
-import './docker/__module';
-import './edge/__module';
-import './portainer/__module';
-
-angular.module('portainer', [
-  'ui.bootstrap',
-  'ui.router',
-  UI_ROUTER_REACT_HYBRID,
-  'ui.select',
-  'isteven-multi-select',
-  'ngSanitize',
-  'ngFileUpload',
-  'ngMessages',
-  'ngResource',
-  'angularUtils.directives.dirPagination',
-  'LocalStorageModule',
-  'angular-jwt',
-  'angular-json-tree',
-  'angular-loading-bar',
-  'angular-clipboard',
-  'ngFileSaver',
-  'luegg.directives',
-  'portainer.app',
-  'portainer.agent',
-  'portainer.azure',
-  'portainer.docker',
-  'portainer.kubernetes',
-  'portainer.edge',
-  'portainer.integrations',
-  'rzModule',
-  'moment-picker',
-  'angulartics',
-  analyticsModule,
-]);
-
-if (require) {
-  var req = require.context('./', true, /^(.*\.(js$))[^.]*$/im);
-  req
-    .keys()
-    .filter((path) => !path.includes('.test'))
-    .forEach(function (key) {
-      req(key);
-    });
-}

app/app.js

@@ -1,19 +1,8 @@
 import $ from 'jquery';
 import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models';
 
-angular.module('portainer').run([
+/* @ngInject */
-  '$rootScope',
+export function onStartupAngular($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemService, cfpLoadingBar, $transitions, HttpRequestHelper) {
-  '$state',
-  '$interval',
-  'LocalStorage',
-  'EndpointProvider',
-  'SystemService',
-  'cfpLoadingBar',
-  '$transitions',
-  'HttpRequestHelper',
-  function ($rootScope, $state, $interval, LocalStorage, EndpointProvider, SystemService, cfpLoadingBar, $transitions, HttpRequestHelper) {
-    'use strict';
-
   EndpointProvider.initialize();
 
   $rootScope.$state = $state;
@@ -21,23 +10,23 @@ angular.module('portainer').run([
 
   // Workaround to prevent the loading bar from going backward
   // https://github.com/chieffancypants/angular-loading-bar/issues/273
-    var originalSet = cfpLoadingBar.set;
+  const originalSet = cfpLoadingBar.set;
   cfpLoadingBar.set = function overrideSet(n) {
     if (n > cfpLoadingBar.status()) {
       originalSet.apply(cfpLoadingBar, arguments);
     }
   };
 
-    $transitions.onBefore({}, function () {
+  $transitions.onBefore({}, () => {
     HttpRequestHelper.resetAgentHeaders();
   });
 
   // Keep-alive Edge endpoints by sending a ping request every minute
-    $interval(function () {
+  $interval(() => {
     ping(EndpointProvider, SystemService);
   }, 60 * 1000);
 
-    $(document).ajaxSend(function (event, jqXhr, jqOpts) {
+  $(document).ajaxSend((event, jqXhr, jqOpts) => {
     const type = jqOpts.type === 'POST' || jqOpts.type === 'PUT' || jqOpts.type === 'PATCH';
     const hasNoContentType = jqOpts.contentType !== 'application/json' && jqOpts.headers && !jqOpts.headers['Content-Type'];
     if (type && hasNoContentType) {
@@ -45,11 +34,10 @@ angular.module('portainer').run([
     }
     jqXhr.setRequestHeader('Authorization', 'Bearer ' + LocalStorage.getJWT());
   });
-  },
+}
-]);
 
 function ping(EndpointProvider, SystemService) {
-  let endpoint = EndpointProvider.currentEndpoint();
+  const endpoint = EndpointProvider.currentEndpoint();
   if (endpoint !== undefined && endpoint.Type == PortainerEndpointTypes.EdgeAgentOnDockerEnvironment) {
     SystemService.ping(endpoint.Id);
   }

app/config.js

@@ -2,17 +2,8 @@ import toastr from 'toastr';
 import { Terminal } from 'xterm';
 import * as fit from 'xterm/lib/addons/fit/fit';
 
-angular.module('portainer').config([
+/* @ngInject */
-  '$urlRouterProvider',
+export function configApp($urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, $uibTooltipProvider, $compileProvider, cfpLoadingBarProvider) {
-  '$httpProvider',
-  'localStorageServiceProvider',
-  'jwtOptionsProvider',
-  '$uibTooltipProvider',
-  '$compileProvider',
-  'cfpLoadingBarProvider',
-  function ($urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, $uibTooltipProvider, $compileProvider, cfpLoadingBarProvider) {
-    'use strict';
-
   if (process.env.NODE_ENV === 'testing') {
     $compileProvider.debugInfoEnabled(false);
   }
@@ -20,12 +11,9 @@ angular.module('portainer').config([
   localStorageServiceProvider.setPrefix('portainer');
 
   jwtOptionsProvider.config({
-      tokenGetter: [
+    tokenGetter: /* @ngInject */ function tokenGetter(LocalStorage) {
-        'LocalStorage',
-        function (LocalStorage) {
       return LocalStorage.getJWT();
     },
-      ],
   });
   $httpProvider.interceptors.push('jwtInterceptor');
   $httpProvider.interceptors.push('EndpointStatusInterceptor');
@@ -33,11 +21,10 @@ angular.module('portainer').config([
   $httpProvider.defaults.headers.put['Content-Type'] = 'application/json';
   $httpProvider.defaults.headers.patch['Content-Type'] = 'application/json';
 
-    $httpProvider.interceptors.push([
+  $httpProvider.interceptors.push(
-      'HttpRequestHelper',
+    /* @ngInject */ function (HttpRequestHelper) {
-      function (HttpRequestHelper) {
       return {
-          request: function (config) {
+        request(config) {
           if (config.url.indexOf('/docker/') > -1) {
             config.headers['X-PortainerAgent-Target'] = HttpRequestHelper.portainerAgentTargetHeader();
             if (HttpRequestHelper.portainerAgentManagerOperation()) {
@@ -47,8 +34,8 @@ angular.module('portainer').config([
           return config;
         },
       };
-      },
+    }
-    ]);
+  );
 
   toastr.options = {
     timeOut: 3000,
@@ -71,5 +58,4 @@ angular.module('portainer').config([
   cfpLoadingBarProvider.latencyThreshold = 600;
 
   $urlRouterProvider.otherwise('/auth');
-  },
+}
-]);

app/index.js

@@ -0,0 +1,61 @@
+import './assets/css';
+import '@babel/polyfill';
+
+import angular from 'angular';
+import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
+
+import './matomo-setup';
+import analyticsModule from './angulartics.matomo';
+
+import './agent';
+import './azure/_module';
+import './docker/__module';
+import './edge/__module';
+import './portainer/__module';
+
+import { onStartupAngular } from './app';
+import { configApp } from './config';
+
+angular
+  .module('portainer', [
+    'ui.bootstrap',
+    'ui.router',
+    UI_ROUTER_REACT_HYBRID,
+    'ui.select',
+    'isteven-multi-select',
+    'ngSanitize',
+    'ngFileUpload',
+    'ngMessages',
+    'ngResource',
+    'angularUtils.directives.dirPagination',
+    'LocalStorageModule',
+    'angular-jwt',
+    'angular-json-tree',
+    'angular-loading-bar',
+    'angular-clipboard',
+    'ngFileSaver',
+    'luegg.directives',
+    'portainer.app',
+    'portainer.agent',
+    'portainer.azure',
+    'portainer.docker',
+    'portainer.kubernetes',
+    'portainer.edge',
+    'portainer.integrations',
+    'rzModule',
+    'moment-picker',
+    'angulartics',
+    analyticsModule,
+  ])
+  .run(onStartupAngular)
+  .config(configApp);
+
+if (require) {
+  const req = require.context('./', true, /^(.*\.(js$))[^.]*$/im);
+  req
+    .keys()
+    .filter((path) => !path.includes('.test'))
+    .forEach(function (key) {
+      req(key);
+    });
+}

webpack/webpack.common.js

@@ -14,7 +14,7 @@ const projectRoot = path.resolve(__dirname, '..');
 
 module.exports = {
   entry: {
-    main: './app/__module.js',
+    main: './app',
   },
   output: {
     filename: '[name].[hash].js',