[Console] Converted all /lib/autocomplete/**/*.js files to typescript

CHANGELOG.md

@@ -97,6 +97,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Vis colors] Update legacy mapped colors in charts plugin to use `ouiPaletteColorBlind()`, Update default color in legacy visualizations to use `ouiPaletteColorBlind()[0]` ([#4398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4398))
 - [Saved Objects Management] Add new or remove extra tags and styles ([#4069](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4069))
 - [Console] Migrate `/lib/mappings/` module to TypeScript ([#4008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4008))
+- [Console] Migrate `/lib/autocomplete/` module to TypeScript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148))
 - [Dashboard] Restructure the `Dashboard` plugin folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575))
 
 ### 🔩 Tests

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

@@ -33,16 +33,25 @@ import {
   URL_PATH_END_MARKER,
   UrlPatternMatcher,
   ListComponent,
+  SharedComponent,
 } from '../../autocomplete/components';
 
 import { populateContext } from '../../autocomplete/engine';
+import { PartialAutoCompleteContext } from '../components/autocomplete_component';
+import { ComponentFactory, ParametrizedComponentFactories } from '../../osd';
 
 describe('Url autocomplete', () => {
-  function patternsTest(name, endpoints, tokenPath, expectedContext, globalUrlComponentFactories) {
+  function patternsTest(
+    name: string,
+    endpoints: Record<number | string, any>,
+    tokenPath: string | Array<string | string[]>,
+    expectedContext: PartialAutoCompleteContext,
+    globalUrlComponentFactories?: ParametrizedComponentFactories
+  ) {
     test(name, function () {
       const patternMatcher = new UrlPatternMatcher(globalUrlComponentFactories);
       _.each(endpoints, function (e, id) {
-        e.id = id;
+        e.id = id.toString();
         _.each(e.patterns, function (p) {
           patternMatcher.addEndpoint(p, e);
         });
@@ -52,39 +61,40 @@ describe('Url autocomplete', () => {
           tokenPath = tokenPath.substr(0, tokenPath.length - 1) + '/' + URL_PATH_END_MARKER;
         }
         tokenPath = _.map(tokenPath.split('/'), function (p) {
-          p = p.split(',');
-          if (p.length === 1) {
-            return p[0];
+          const pSplit = p.split(',');
+          if (pSplit.length === 1) {
+            return pSplit[0];
           }
-          return p;
+          return pSplit;
         });
       }
 
       if (expectedContext.autoCompleteSet) {
-        expectedContext.autoCompleteSet = _.map(expectedContext.autoCompleteSet, function (t) {
-          if (_.isString(t)) {
-            t = { name: t };
+        expectedContext.autoCompleteSet = _.map(expectedContext.autoCompleteSet, function (term) {
+          if (_.isString(term)) {
+            term = { name: term };
           }
-          return t;
+          return term;
         });
         expectedContext.autoCompleteSet = _.sortBy(expectedContext.autoCompleteSet, 'name');
       }
 
-      const context = {};
+      const context: PartialAutoCompleteContext = {};
       if (expectedContext.method) {
         context.method = expectedContext.method;
       }
+
       populateContext(
         tokenPath,
         context,
         null,
-        expectedContext.autoCompleteSet,
-        patternMatcher.getTopLevelComponents(context.method)
+        expectedContext.autoCompleteSet ? true : false,
+        patternMatcher.getTopLevelComponents(context.method!)
       );
 
       // override context to just check on id
       if (context.endpoint) {
-        context.endpoint = context.endpoint.id;
+        context.endpoint = (context as any).endpoint.id;
       }
 
       if (context.autoCompleteSet) {
@@ -95,9 +105,9 @@ describe('Url autocomplete', () => {
     });
   }
 
-  function t(name, meta) {
+  function t(name: string, meta: string) {
     if (meta) {
-      return { name: name, meta: meta };
+      return { name, meta };
     }
     return name;
   }
@@ -265,11 +275,11 @@ describe('Url autocomplete', () => {
       },
     };
     const globalFactories = {
-      p: function (name, parent) {
+      p(name: string, parent: SharedComponent) {
         return new ListComponent(name, ['g1', 'g2'], parent);
       },
-      getComponent(name) {
-        return this[name];
+      getComponent(name: string): ComponentFactory {
+        return (this as any)[name];
       },
     };
 
@@ -355,7 +365,7 @@ describe('Url autocomplete', () => {
   })();
 
   (function () {
-    const endpoints = {
+    const endpoints: Record<string, any> = {
       '1_param': {
         patterns: ['a/{p}'],
         methods: ['GET'],

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

@@ -31,64 +31,72 @@
 import _ from 'lodash';
 import { UrlParams } from '../../autocomplete/url_params';
 import { populateContext } from '../../autocomplete/engine';
+import { Term } from '../types';
+import { PartialAutoCompleteContext } from '../components/autocomplete_component';
+import { SharedComponent } from '../components';
 
 describe('Url params', () => {
-  function paramTest(name, description, tokenPath, expectedContext, globalParams) {
+  function paramTest(
+    name: string,
+    description: Record<string, unknown>,
+    tokenPath: string | Array<string | string[]>,
+    expectedContext: PartialAutoCompleteContext,
+    globalParams?: Record<string, unknown>
+  ) {
     test(name, function () {
       const urlParams = new UrlParams(description, globalParams || {});
       if (typeof tokenPath === 'string') {
         tokenPath = _.map(tokenPath.split('/'), function (p) {
-          p = p.split(',');
-          if (p.length === 1) {
-            return p[0];
+          const pSplit = p.split(',');
+          if (pSplit.length === 1) {
+            return pSplit[0];
           }
-          return p;
+          return pSplit;
         });
       }
 
       if (expectedContext.autoCompleteSet) {
-        expectedContext.autoCompleteSet = _.map(expectedContext.autoCompleteSet, function (t) {
-          if (_.isString(t)) {
-            t = { name: t };
+        expectedContext.autoCompleteSet = _.map(expectedContext.autoCompleteSet, function (term) {
+          if (_.isString(term)) {
+            term = { name: term };
           }
-          return t;
+          return term;
         });
         expectedContext.autoCompleteSet = _.sortBy(expectedContext.autoCompleteSet, 'name');
       }
 
-      const context = {};
+      const context: PartialAutoCompleteContext = {};
 
       populateContext(
         tokenPath,
         context,
         null,
-        expectedContext.autoCompleteSet,
-        urlParams.getTopLevelComponents()
+        expectedContext.autoCompleteSet ? true : false,
+        urlParams.getTopLevelComponents() as SharedComponent[]
       );
 
-      if (context.autoCompleteSet) {
-        context.autoCompleteSet = _.sortBy(context.autoCompleteSet, 'name');
+      const populatedContext = context;
+
+      if (populatedContext.autoCompleteSet) {
+        populatedContext.autoCompleteSet = _.sortBy(populatedContext.autoCompleteSet, 'name');
       }
 
-      expect(context).toEqual(expectedContext);
+      expect(populatedContext).toEqual(expectedContext);
     });
   }
 
-  function t(name, meta, insertValue) {
-    let r = name;
+  function createTerm(name: string, meta?: string, insertValue?: string) {
+    const term: Term = { name };
     if (meta) {
-      r = { name: name, meta: meta };
+      term.meta = meta;
       if (meta === 'param' && !insertValue) {
         insertValue = name + '=';
       }
     }
     if (insertValue) {
-      if (_.isString(r)) {
-        r = { name: name };
-      }
-      r.insertValue = insertValue;
+      term.insertValue = insertValue;
     }
-    return r;
+    return term;
   }
 
   (function () {
@@ -99,25 +107,31 @@ describe('Url params', () => {
     paramTest('settings params', params, 'a/1', { a: ['1'] });
 
     paramTest('autocomplete top level', params, [], {
-      autoCompleteSet: [t('a', 'param'), t('b', 'flag')],
+      autoCompleteSet: [createTerm('a', 'param'), createTerm('b', 'flag')],
     });
 
     paramTest(
       'autocomplete top level, with defaults',
       params,
       [],
-      { autoCompleteSet: [t('a', 'param'), t('b', 'flag'), t('c', 'param')] },
+      {
+        autoCompleteSet: [
+          createTerm('a', 'param'),
+          createTerm('b', 'flag'),
+          createTerm('c', 'param'),
+        ],
+      },
       {
         c: [2],
       }
     );
 
     paramTest('autocomplete values', params, 'a', {
-      autoCompleteSet: [t('1', 'a'), t('2', 'a')],
+      autoCompleteSet: [createTerm('1', 'a'), createTerm('2', 'a')],
     });
 
     paramTest('autocomplete values flag', params, 'b', {
-      autoCompleteSet: [t('true', 'b'), t('false', 'b')],
+      autoCompleteSet: [createTerm('true', 'b'), createTerm('false', 'b')],
     });
   })();
 });