Disallows commonjs in new platform public (#65218)

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

.eslintrc.js

@@ -151,6 +151,16 @@ module.exports = {
       },
     },
 
+    /**
+     * New Platform client-side
+     */
+    {
+      files: ['{src,x-pack}/plugins/*/public/**/*.{js,ts,tsx}'],
+      rules: {
+        'import/no-commonjs': 'error',
+      },
+    },
+
     /**
      * Files that require Elastic license headers instead of Apache 2.0 header
      */

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -24,7 +24,7 @@ import { parse } from 'query-string';
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { useUIAceKeyboardMode } from '../../../../../../../es_ui_shared/public';
 // @ts-ignore
-import mappings from '../../../../../lib/mappings/mappings';
+import { retrieveAutoCompleteInfo, clearSubscriptions } from '../../../../../lib/mappings/mappings';
 import { ConsoleMenu } from '../../../../components';
 import { useEditorReadContext, useServicesContext } from '../../../../contexts';
 import {
@@ -172,14 +172,14 @@ function EditorUI({ initialTextValue }: EditorProps) {
     setInputEditor(editor);
     setTextArea(editorRef.current!.querySelector('textarea'));
 
-    mappings.retrieveAutoCompleteInfo(settingsService, settingsService.getAutocomplete());
+    retrieveAutoCompleteInfo(settingsService, settingsService.getAutocomplete());
 
     const unsubscribeResizer = subscribeResizeChecker(editorRef.current!, editor);
     setupAutosave();
 
     return () => {
       unsubscribeResizer();
-      mappings.clearSubscriptions();
+      clearSubscriptions();
       window.removeEventListener('hashchange', onHashChange);
     };
   }, [saveCurrentTextObject, initialTextValue, history, setInputEditor, settingsService]);

src/plugins/console/public/application/containers/settings.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { AutocompleteOptions, DevToolsSettingsModal } from '../components';
 
 // @ts-ignore
-import mappings from '../../lib/mappings/mappings';
+import { retrieveAutoCompleteInfo } from '../../lib/mappings/mappings';
 import { useServicesContext, useEditorActionContext } from '../contexts';
 import { DevToolsSettings, Settings as SettingsService } from '../../services';
 
@@ -33,7 +33,7 @@ const getAutocompleteDiff = (newSettings: DevToolsSettings, prevSettings: DevToo
 };
 
 const refreshAutocompleteSettings = (settings: SettingsService, selectedSettings: any) => {
-  mappings.retrieveAutoCompleteInfo(settings, selectedSettings);
+  retrieveAutoCompleteInfo(settings, selectedSettings);
 };
 
 const fetchAutocompleteSettingsIfNeeded = (
@@ -61,10 +61,10 @@ const fetchAutocompleteSettingsIfNeeded = (
         },
         {}
       );
-      mappings.retrieveAutoCompleteInfo(settings, changedSettings);
+      retrieveAutoCompleteInfo(settings, changedSettings);
     } else if (isPollingChanged && newSettings.polling) {
       // If the user has turned polling on, then we'll fetch all selected autocomplete settings.
-      mappings.retrieveAutoCompleteInfo(settings, settings.getAutocomplete());
+      retrieveAutoCompleteInfo(settings, settings.getAutocomplete());
     }
   }
 };

src/plugins/console/public/application/hooks/use_send_current_request_to_es/use_send_current_request_to_es.ts

@@ -24,7 +24,7 @@ import { sendRequestToES } from './send_request_to_es';
 import { track } from './track';
 
 // @ts-ignore
-import mappings from '../../../lib/mappings/mappings';
+import { retrieveAutoCompleteInfo } from '../../../lib/mappings/mappings';
 
 export const useSendCurrentRequestToES = () => {
   const {
@@ -73,7 +73,7 @@ export const useSendCurrentRequestToES = () => {
         // or templates may have changed, so we'll need to update this data. Assume that if
         // the user disables polling they're trying to optimize performance or otherwise
         // preserve resources, so they won't want this request sent either.
-        mappings.retrieveAutoCompleteInfo(settings, settings.getAutocomplete());
+        retrieveAutoCompleteInfo(settings, settings.getAutocomplete());
       }
 
       dispatch({

src/plugins/console/public/application/models/legacy_core_editor/__tests__/output_tokenization.test.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 import '../legacy_core_editor.test.mocks';
-const $ = require('jquery');
+import $ from 'jquery';
 import RowParser from '../../../../lib/row_parser';
 import ace from 'brace';
 import { createReadOnlyAceEditor } from '../create_readonly';

src/plugins/console/public/application/models/legacy_core_editor/mode/input.js

@@ -19,20 +19,21 @@
 
 import ace from 'brace';
 import { workerModule } from './worker';
+import { ScriptMode } from './script';
 
 const oop = ace.acequire('ace/lib/oop');
 const TextMode = ace.acequire('ace/mode/text').Mode;
-const ScriptMode = require('./script').ScriptMode;
+
 const MatchingBraceOutdent = ace.acequire('ace/mode/matching_brace_outdent').MatchingBraceOutdent;
 const CstyleBehaviour = ace.acequire('ace/mode/behaviour/cstyle').CstyleBehaviour;
 const CStyleFoldMode = ace.acequire('ace/mode/folding/cstyle').FoldMode;
 const WorkerClient = ace.acequire('ace/worker/worker_client').WorkerClient;
 const AceTokenizer = ace.acequire('ace/tokenizer').Tokenizer;
 
-const HighlightRules = require('./input_highlight_rules').InputHighlightRules;
+import { InputHighlightRules } from './input_highlight_rules';
 
 export function Mode() {
-  this.$tokenizer = new AceTokenizer(new HighlightRules().getRules());
+  this.$tokenizer = new AceTokenizer(new InputHighlightRules().getRules());
   this.$outdent = new MatchingBraceOutdent();
   this.$behaviour = new CstyleBehaviour();
   this.foldingRules = new CStyleFoldMode();

src/plugins/console/public/application/models/legacy_core_editor/mode/input_highlight_rules.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const ace = require('brace');
+import ace from 'brace';
 import { addXJsonToRules } from '../../../../../../es_ui_shared/public';
 
 export function addEOL(tokens, reg, nextIfEOL, normalNext) {

src/plugins/console/public/application/models/legacy_core_editor/mode/output.js

@@ -18,11 +18,11 @@
  */
 
 import ace from 'brace';
-require('./output_highlight_rules');
+
+import { OutputJsonHighlightRules } from './output_highlight_rules';
 
 const oop = ace.acequire('ace/lib/oop');
 const JSONMode = ace.acequire('ace/mode/json').Mode;
-const HighlightRules = require('./output_highlight_rules').OutputJsonHighlightRules;
 const MatchingBraceOutdent = ace.acequire('ace/mode/matching_brace_outdent').MatchingBraceOutdent;
 const CstyleBehaviour = ace.acequire('ace/mode/behaviour/cstyle').CstyleBehaviour;
 const CStyleFoldMode = ace.acequire('ace/mode/folding/cstyle').FoldMode;
@@ -30,7 +30,7 @@ ace.acequire('ace/worker/worker_client');
 const AceTokenizer = ace.acequire('ace/tokenizer').Tokenizer;
 
 export function Mode() {
-  this.$tokenizer = new AceTokenizer(new HighlightRules().getRules());
+  this.$tokenizer = new AceTokenizer(new OutputJsonHighlightRules().getRules());
   this.$outdent = new MatchingBraceOutdent();
   this.$behaviour = new CstyleBehaviour();
   this.foldingRules = new CStyleFoldMode();

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const ace = require('brace');
+import ace from 'brace';
 import 'brace/mode/json';
 import { addXJsonToRules } from '../../../../../../es_ui_shared/public';
 

src/plugins/console/public/application/models/legacy_core_editor/theme_sense_dark.js

@@ -18,7 +18,7 @@
  */
 
 /* eslint import/no-unresolved: 0 */
-const ace = require('brace');
+import ace from 'brace';
 
 ace.define('ace/theme/sense-dark', ['require', 'exports', 'module'], function(require, exports) {
   exports.isDark = true;

src/plugins/console/public/application/models/sense_editor/__tests__/integration.test.js

@@ -19,10 +19,10 @@
 import '../sense_editor.test.mocks';
 import { create } from '../create';
 import _ from 'lodash';
-const $ = require('jquery');
+import $ from 'jquery';
 
-const kb = require('../../../../lib/kb/kb');
-const mappings = require('../../../../lib/mappings/mappings');
+import * as kb from '../../../../lib/kb/kb';
+import * as mappings from '../../../../lib/mappings/mappings';
 
 describe('Integration', () => {
   let senseEditor;

src/plugins/console/public/application/models/sense_editor/__tests__/sense_editor.test.js

@@ -23,7 +23,7 @@ import _ from 'lodash';
 
 import { create } from '../create';
 import { collapseLiteralStrings } from '../../../../../../es_ui_shared/public';
-const editorInput1 = require('./editor_input1.txt');
+import editorInput1 from './editor_input1.txt';
 
 describe('Editor', () => {
   let input;

src/plugins/console/public/lib/autocomplete/__jest__/url_autocomplete.test.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const _ = require('lodash');
+import _ from 'lodash';
 import {
   URL_PATH_END_MARKER,
   UrlPatternMatcher,

src/plugins/console/public/lib/autocomplete/__jest__/url_params.test.js

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-const _ = require('lodash');
+import _ from 'lodash';
 import { UrlParams } from '../../autocomplete/url_params';
 import { populateContext } from '../../autocomplete/engine';
 

src/plugins/console/public/lib/autocomplete/body_completer.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const _ = require('lodash');
+import _ from 'lodash';
 import { WalkingState, walkTokenPath, wrapComponentWithDefaults } from './engine';
 import {
   ConstantComponent,

src/plugins/console/public/lib/autocomplete/components/field_autocomplete_component.js

@@ -17,11 +17,11 @@
  * under the License.
  */
 import _ from 'lodash';
-import mappings from '../../mappings/mappings';
+import { getFields } from '../../mappings/mappings';
 import { ListComponent } from './list_component';
 
 function FieldGenerator(context) {
-  return _.map(mappings.getFields(context.indices, context.types), function(field) {
+  return _.map(getFields(context.indices, context.types), function(field) {
     return { name: field.name, meta: field.type };
   });
 }

src/plugins/console/public/lib/autocomplete/components/index_autocomplete_component.js

@@ -17,14 +17,14 @@
  * under the License.
  */
 import _ from 'lodash';
-import mappings from '../../mappings/mappings';
+import { getIndices } from '../../mappings/mappings';
 import { ListComponent } from './list_component';
 function nonValidIndexType(token) {
   return !(token === '_all' || token[0] !== '_');
 }
 export class IndexAutocompleteComponent extends ListComponent {
   constructor(name, parent, multiValued) {
-    super(name, mappings.getIndices, parent, multiValued);
+    super(name, getIndices, parent, multiValued);
   }
   validateTokens(tokens) {
     if (!this.multiValued && tokens.length > 1) {

src/plugins/console/public/lib/autocomplete/components/template_autocomplete_component.js

@@ -16,12 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import mappings from '../../mappings/mappings';
+import { getTemplates } from '../../mappings/mappings';
 import { ListComponent } from './list_component';
 
 export class TemplateAutocompleteComponent extends ListComponent {
   constructor(name, parent) {
-    super(name, mappings.getTemplates, parent, true, true);
+    super(name, getTemplates, parent, true, true);
   }
   getContextKey() {
     return 'template';

src/plugins/console/public/lib/autocomplete/components/type_autocomplete_component.js

@@ -18,9 +18,9 @@
  */
 import _ from 'lodash';
 import { ListComponent } from './list_component';
-import mappings from '../../mappings/mappings';
+import { getTypes } from '../../mappings/mappings';
 function TypeGenerator(context) {
-  return mappings.getTypes(context.indices);
+  return getTypes(context.indices);
 }
 function nonValidIndexType(token) {
   return !(token === '_all' || token[0] !== '_');

src/plugins/console/public/lib/autocomplete/components/username_autocomplete_component.js

@@ -17,14 +17,14 @@
  * under the License.
  */
 import _ from 'lodash';
-import mappings from '../../mappings/mappings';
+import { getIndices } from '../../mappings/mappings';
 import { ListComponent } from './list_component';
 function nonValidUsernameType(token) {
   return token[0] === '_';
 }
 export class UsernameAutocompleteComponent extends ListComponent {
   constructor(name, parent, multiValued) {
-    super(name, mappings.getIndices, parent, multiValued);
+    super(name, getIndices, parent, multiValued);
   }
   validateTokens(tokens) {
     if (!this.multiValued && tokens.length > 1) {

src/plugins/console/public/lib/autocomplete/engine.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const _ = require('lodash');
+import _ from 'lodash';
 
 export function wrapComponentWithDefaults(component, defaults) {
   const originalGetTerms = component.getTerms;

src/plugins/console/public/lib/autocomplete/url_params.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const _ = require('lodash');
+import _ from 'lodash';
 import { ConstantComponent, ListComponent, SharedComponent } from './components';
 
 export class ParamComponent extends ConstantComponent {

src/plugins/console/public/lib/curl_parsing/__tests__/curl_parsing.test.js

@@ -17,15 +17,15 @@
  * under the License.
  */
 
-const _ = require('lodash');
-const curl = require('../curl');
+import _ from 'lodash';
+import { detectCURL, parseCURL } from '../curl';
 import curlTests from './curl_parsing.txt';
 
 describe('CURL', () => {
   const notCURLS = ['sldhfsljfhs', 's;kdjfsldkfj curl -XDELETE ""', '{ "hello": 1 }'];
   _.each(notCURLS, function(notCURL, i) {
     test('cURL Detection - broken strings ' + i, function() {
-      expect(curl.detectCURL(notCURL)).toEqual(false);
+      expect(detectCURL(notCURL)).toEqual(false);
     });
   });
 
@@ -39,8 +39,8 @@ describe('CURL', () => {
     const response = fixture[2].trim();
 
     test('cURL Detection - ' + name, function() {
-      expect(curl.detectCURL(curlText)).toBe(true);
-      const r = curl.parseCURL(curlText);
+      expect(detectCURL(curlText)).toBe(true);
+      const r = parseCURL(curlText);
       expect(r).toEqual(response);
     });
   });

src/plugins/console/public/lib/kb/__tests__/kb.test.js

@@ -21,8 +21,8 @@ import _ from 'lodash';
 import { populateContext } from '../../autocomplete/engine';
 
 import '../../../application/models/sense_editor/sense_editor.test.mocks';
-const kb = require('../../kb');
-const mappings = require('../../mappings/mappings');
+import * as kb from '../../kb';
+import * as mappings from '../../mappings/mappings';
 
 describe('Knowledge base', () => {
   beforeEach(() => {

src/plugins/console/public/lib/kb/api.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const _ = require('lodash');
+import _ from 'lodash';
 import { UrlPatternMatcher } from '../autocomplete/components';
 import { UrlParams } from '../autocomplete/url_params';
 import {

src/plugins/console/public/lib/mappings/__tests__/mapping.test.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 import '../../../application/models/sense_editor/sense_editor.test.mocks';
-const mappings = require('../mappings');
+import * as mappings from '../mappings';
 
 describe('Mappings', () => {
   beforeEach(() => {

src/plugins/console/public/lib/mappings/mappings.js

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-const $ = require('jquery');
-const _ = require('lodash');
-const es = require('../es/es');
+import $ from 'jquery';
+import _ from 'lodash';
+import * as es from '../es/es';
 
 // NOTE: If this value ever changes to be a few seconds or less, it might introduce flakiness
 // due to timing issues in our app.js tests.
@@ -32,7 +32,7 @@ let templates = [];
 
 const mappingObj = {};
 
-function expandAliases(indicesOrAliases) {
+export function expandAliases(indicesOrAliases) {
   // takes a list of indices or aliases or a string which may be either and returns a list of indices
   // returns a list for multiple values or a string for a single.
 
@@ -60,11 +60,11 @@ function expandAliases(indicesOrAliases) {
   return ret.length > 1 ? ret : ret[0];
 }
 
-function getTemplates() {
+export function getTemplates() {
   return [...templates];
 }
 
-function getFields(indices, types) {
+export function getFields(indices, types) {
   // get fields for indices and types. Both can be a list, a string or null (meaning all).
   let ret = [];
   indices = expandAliases(indices);
@@ -103,7 +103,7 @@ function getFields(indices, types) {
   });
 }
 
-function getTypes(indices) {
+export function getTypes(indices) {
   let ret = [];
   indices = expandAliases(indices);
   if (typeof indices === 'string') {
@@ -129,7 +129,7 @@ function getTypes(indices) {
   return _.uniq(ret);
 }
 
-function getIndices(includeAliases) {
+export function getIndices(includeAliases) {
   const ret = [];
   $.each(perIndexTypes, function(index) {
     ret.push(index);
@@ -200,7 +200,7 @@ function loadTemplates(templatesObject = {}) {
   templates = Object.keys(templatesObject);
 }
 
-function loadMappings(mappings) {
+export function loadMappings(mappings) {
   perIndexTypes = {};
 
   $.each(mappings, function(index, indexMapping) {
@@ -224,7 +224,7 @@ function loadMappings(mappings) {
   });
 }
 
-function loadAliases(aliases) {
+export function loadAliases(aliases) {
   perAliasIndexes = {};
   $.each(aliases || {}, function(index, omdexAliases) {
     // verify we have an index defined. useful when mapping loading is disabled
@@ -246,7 +246,7 @@ function loadAliases(aliases) {
   perAliasIndexes._all = getIndices(false);
 }
 
-function clear() {
+export function clear() {
   perIndexTypes = {};
   perAliasIndexes = {};
   templates = [];
@@ -285,7 +285,7 @@ function retrieveSettings(settingsKey, settingsToRetrieve) {
 //      unchanged alone (both selected and unselected).
 //   3. Poll: Use saved. Fetch selected. Ignore unselected.
 
-function clearSubscriptions() {
+export function clearSubscriptions() {
   if (pollTimeoutId) {
     clearTimeout(pollTimeoutId);
   }
@@ -296,7 +296,7 @@ function clearSubscriptions() {
  * @param settings Settings A way to retrieve the current settings
  * @param settingsToRetrieve any
  */
-function retrieveAutoCompleteInfo(settings, settingsToRetrieve) {
+export function retrieveAutoCompleteInfo(settings, settingsToRetrieve) {
   clearSubscriptions();
 
   const mappingPromise = retrieveSettings('fields', settingsToRetrieve);
@@ -341,16 +341,3 @@ function retrieveAutoCompleteInfo(settings, settingsToRetrieve) {
     }, POLL_INTERVAL);
   });
 }
-
-export default {
-  getFields,
-  getTemplates,
-  getIndices,
-  getTypes,
-  loadMappings,
-  loadAliases,
-  expandAliases,
-  clear,
-  retrieveAutoCompleteInfo,
-  clearSubscriptions,
-};

src/plugins/console/public/lib/utils/__tests__/utils.test.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-const utils = require('../');
+import * as utils from '../';
 
 describe('Utils class', () => {
   test('extract deprecation messages', function() {

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/fixtures/follower_index.ts

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import Chance from 'chance';
 import { getRandomString } from '../../../../../../test_utils';
 import { FollowerIndex } from '../../../../common/types';
 
-const Chance = require('chance'); // eslint-disable-line import/no-extraneous-dependencies, @typescript-eslint/no-var-requires
 const chance = new Chance();
 
 interface FollowerIndexMock {

x-pack/plugins/file_upload/public/util/geo_json_clean_and_validate.test.js

@@ -5,7 +5,7 @@
  */
 
 import { cleanGeometry, geoJsonCleanAndValidate } from './geo_json_clean_and_validate';
-const jsts = require('jsts');
+import * as jsts from 'jsts';
 
 describe('geo_json_clean_and_validate', () => {
   const reader = new jsts.io.GeoJSONReader();

x-pack/plugins/file_upload/public/util/pattern_reader.js

@@ -5,7 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-const oboe = require('oboe');
+import oboe from 'oboe';
 
 export class PatternReader {
   constructor({ onFeatureDetect, onStreamComplete }) {

x-pack/plugins/graph/public/angular/graph_client_workspace.test.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import gws from './graph_client_workspace';
+import { createWorkspace } from './graph_client_workspace';
 
 describe('graphui-workspace', function() {
   describe('createWorkspace()', function() {
@@ -38,7 +38,7 @@ describe('graphui-workspace', function() {
             minDocCount: 1,
           },
         };
-        const workspace = gws.createWorkspace(options);
+        const workspace = createWorkspace(options);
         return {
           workspace,
           //, get to(){}

x-pack/plugins/graph/public/app.js

@@ -23,7 +23,7 @@ import { Listing } from './components/listing';
 import { Settings } from './components/settings';
 import { GraphVisualization } from './components/graph_visualization';
 
-import gws from './angular/graph_client_workspace.js';
+import { createWorkspace } from './angular/graph_client_workspace.js';
 import { getEditUrl, getNewPath, getEditPath, setBreadcrumbs } from './services/url';
 import { createCachedIndexPatternProvider } from './services/index_pattern_cache';
 import { urlTemplateRegex } from './helpers/url_template';
@@ -277,7 +277,7 @@ export function initGraphApp(angularModule, deps) {
           searchProxy: callSearchNodeProxy,
           exploreControls,
         };
-        $scope.workspace = gws.createWorkspace(options);
+        $scope.workspace = createWorkspace(options);
       },
       setLiveResponseFields: fields => {
         $scope.liveResponseFields = fields;

x-pack/plugins/ml/public/application/settings/calendars/edit/import_modal/utils.js

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-const icalendar = require('icalendar');
+import icalendar from 'icalendar';
 import moment from 'moment';
 import { generateTempId } from '../utils';
 

x-pack/plugins/monitoring/public/components/sparkline/__mocks__/plugins/xpack_main/jquery_flot.js

@@ -6,15 +6,12 @@
 
 /* eslint-env jest */
 
-function $() {
+export function $() {
   return {
     on: jest.fn(),
     off: jest.fn(),
+    plot: () => ({
+      shutdown: jest.fn(),
+    }),
   };
 }
-
-$.plot = () => ({
-  shutdown: jest.fn(),
-});
-
-module.exports = $;