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,19 +18,19 @@
  */
 
 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;
 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(() => {