[TASK] Incorporate ES 6 features

Since the build chain can generate ES6, the TypeScript code should
incorporate these changes.

Namely, this patch changes:
- Use native NodeList over arrays generated by Array.from() where
  possible
- Use explicit string search functions instead of indexOf

Resolves: #89118
Releases: master
Change-Id: I6e03ade35c545ece05ecca222cd1fde876fc22d4
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/61649


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Susanne Moog <look@susi.dev>
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>

Build/Sources/TypeScript/adminpanel/Resources/Public/TypeScript/Modules/Cache.ts

 namespace TYPO3 {
   export class Cache {
-    private buttons: Array<Element>;
+    private buttons: NodeList;
 
     constructor() {
-      this.buttons = Array.from(document.querySelectorAll('[data-typo3-role="clearCacheButton"]'));
+      this.buttons = document.querySelectorAll('[data-typo3-role="clearCacheButton"]');
 
       this.buttons.forEach((element: HTMLElement): void => {
         element.addEventListener('click', (): void => {

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ContextMenu.ts

@@ -158,7 +158,7 @@ class ContextMenu {
   private fetch(parameters: string): void {
     let url = TYPO3.settings.ajaxUrls.contextmenu;
     if (parameters) {
-      url += ((url.indexOf('?') === -1) ? '?' : '&') + parameters;
+      url += (!url.includes('?') ? '?' : '&') + parameters;
     }
     $.ajax(url).done((response: MenuItems): void => {
       if (typeof response !== 'undefined' && Object.keys(response).length > 0) {

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ContextMenuActions.ts

@@ -280,7 +280,7 @@ class ContextMenuActions {
    * @param {string} iframeUrl
    */
   public static triggerRefresh(iframeUrl: string): void {
-    if (iframeUrl.indexOf('record%2Fedit') === -1) {
+    if (!iframeUrl.includes('record%2Fedit')) {
       Viewport.ContentContainer.refresh();
     }
   }

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Event/ConsumerScope.ts

@@ -23,7 +23,7 @@ class ConsumerScope {
   }
 
   public hasConsumer(consumer: Consumable): boolean {
-    return this.consumers.indexOf(consumer) !== -1;
+    return this.consumers.includes(consumer);
   }
 
   public attach(consumer: Consumable): void {

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Event/TriggerRequest.ts

@@ -33,13 +33,13 @@ class TriggerRequest extends InteractionRequest {
   }
 
   public concernsTypes(types: string[]): boolean {
-    if (types.indexOf(this.type) !== -1) {
+    if (types.includes(this.type)) {
       return true;
     }
     let request: InteractionRequest = this;
     while (request.parentRequest instanceof InteractionRequest) {
       request = request.parentRequest;
-      if (types.indexOf(request.type) !== -1) {
+      if (types.includes(request.type)) {
         return true;
       }
     }

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Container/InlineControlContainer.ts

@@ -214,7 +214,7 @@ class InlineControlContainer {
       return;
     }
 
-    const options: Array<HTMLOptionElement> = Array.from(selectElement.querySelectorAll('option'));
+    const options: NodeListOf<HTMLOptionElement> = selectElement.querySelectorAll('option');
     let index: number = -1;
 
     for (let possibleValue of Object.keys(unique.possible)) {

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/AbstractSortableSelectItems.ts

@@ -35,7 +35,7 @@ export abstract class AbstractSortableSelectItems {
    * @param {HTMLSelectElement} fieldElement
    */
   private static moveOptionToBottom(fieldElement: HTMLSelectElement): void {
-    Array.from(fieldElement.querySelectorAll(':checked')).forEach((optionEl: HTMLOptionElement): void => {
+    fieldElement.querySelectorAll(':checked').forEach((optionEl: HTMLOptionElement): void => {
       fieldElement.insertBefore(optionEl, null);
     });
   }
@@ -83,7 +83,7 @@ export abstract class AbstractSortableSelectItems {
    * @param {HTMLSelectElement} availableFieldElement
    */
   private static removeOption(fieldElement: HTMLSelectElement, availableFieldElement: HTMLSelectElement): void {
-    Array.from(fieldElement.querySelectorAll(':checked')).forEach((option: HTMLOptionElement): void => {
+    fieldElement.querySelectorAll(':checked').forEach((option: HTMLOptionElement): void => {
       const originalOption = <HTMLOptionElement>availableFieldElement.querySelector('option[value="' + option.value + '"]');
       if (originalOption !== null) {
         originalOption.classList.remove('hidden');

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/SelectMultipleSideBySideElement.ts

@@ -40,7 +40,7 @@ class SelectMultipleSideBySideElement extends AbstractSortableSelectItems {
         const exclusiveValues = el.dataset.exclusiveValues;
         const selectedOptions = el.querySelectorAll('option:checked'); // Yep, :checked finds selected options
         if (selectedOptions.length > 0) {
-          Array.from(selectedOptions).forEach((optionElement: HTMLOptionElement): void => {
+          selectedOptions.forEach((optionElement: HTMLOptionElement): void => {
             FormEngine.setSelectOptionFromExternalSource(
               fieldName,
               optionElement.value,

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Icons.ts

@@ -122,7 +122,7 @@ class Icons {
           icon: JSON.stringify(icon),
         },
         success: (markup: string) => {
-          if (markup.indexOf('t3js-icon') !== -1 && markup.indexOf('<span class="icon-markup">') !== -1) {
+          if (markup.includes('t3js-icon') && markup.includes('<span class="icon-markup">')) {
             ClientStorage.set('icon_' + cacheIdentifier, markup);
           }
           return markup;

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/LayoutModule/Paste.ts

@@ -138,7 +138,7 @@ class Paste {
       ];
     }
     if (url !== null) {
-      const separator = (url.indexOf('?') > -1) ? '&' : '?';
+      const separator = url.contains('?') ? '&' : '?';
       const params = $.param({data: $element.data()});
       Modal.loadUrl(title, severity, buttons, url + separator + params);
     } else {

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Modal.ts

@@ -344,7 +344,7 @@ class Modal {
         : SeverityEnum.info;
       let url = $element.data('url') || null;
       if (url !== null) {
-        const separator = (url.indexOf('?') > -1) ? '&' : '?';
+        const separator = url.includes('?') ? '&' : '?';
         const params = $.param({data: $element.data()});
         url = url + separator + params;
       }

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ModuleMenu.ts

@@ -367,7 +367,7 @@ class ModuleMenu {
    * @returns {JQueryDeferred<TriggerRequest>}
    */
   private openInNavFrame(url: string, params: string, interactionRequest: InteractionRequest): JQueryDeferred<TriggerRequest> {
-    const navUrl = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
+    const navUrl = url + (params ? (url.includes('?') ? '&' : '?') + params : '');
     const currentUrl = Viewport.NavigationContainer.getUrl();
     const deferred = Viewport.NavigationContainer.setUrl(
       url,
@@ -401,7 +401,7 @@ class ModuleMenu {
       );
       top.nextLoadModuleUrl = '';
     } else {
-      const urlToLoad = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
+      const urlToLoad = url + (params ? (url.includes('?') ? '&' : '?') + params : '');
       deferred = Viewport.ContentContainer.setUrl(
         urlToLoad,
         new TriggerRequest('typo3.openInContentFrame', interactionRequest),

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Utility.ts

@@ -91,7 +91,7 @@ class Utility {
    */
   public static updateQueryStringParameter(url: string, key: string, value: string): string {
     const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
-    const separator = url.indexOf('?') !== -1 ? '&' : '?';
+    const separator = url.includes('?') ? '&' : '?';
 
     if (url.match(re)) {
       return url.replace(re, '$1' + key + '=' + value + '$2');

Build/Sources/TypeScript/install/Resources/Public/TypeScript/Module/Maintenance/Cache.ts

@@ -30,9 +30,9 @@ class Cache implements InlineModuleInterface {
       success: (data: any): void => {
         if (data.success === true && Array.isArray(data.status)) {
           if (data.status.length > 0) {
-            data.status.forEach(((element: any): void => {
+            data.status.forEach((element: any): void => {
               Notification.success(element.title, element.message);
-            }));
+            });
           }
         } else {
           Notification.error('Something went wrong clearing caches');

Build/Sources/TypeScript/install/Resources/Public/TypeScript/Module/Settings/LocalConfiguration.ts

@@ -46,7 +46,7 @@ class LocalConfiguration extends AbstractInteractableModule {
     // Make jquerys "contains" work case-insensitive
     jQuery.expr[':'].contains = jQuery.expr.createPseudo((arg: any): Function => {
       return (elem: any): boolean => {
-        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+        return jQuery(elem).text().toUpperCase().includes(arg.toUpperCase());
       };
     });
 

Build/Sources/TypeScript/install/Resources/Public/TypeScript/Module/Upgrade/UpgradeDocs.ts

@@ -68,7 +68,7 @@ class UpgradeDocs extends AbstractInteractableModule {
     // Make jquerys "contains" work case-insensitive
     jQuery.expr[':'].contains = jQuery.expr.createPseudo((arg: any): Function => {
       return (elem: any): boolean => {
-        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+        return jQuery(elem).text().toUpperCase().includes(arg.toUpperCase());
       };
     });
 
@@ -207,7 +207,7 @@ class UpgradeDocs extends AbstractInteractableModule {
       const andTags: Array<string> = [];
       $.each(this.chosenField.val(), (index: number, item: any): void => {
         const tagFilter = '[data-item-tags*="' + item + '"]';
-        if (item.indexOf(':') > 0) {
+        if (item.contains(':', 1)) {
           orTags.push(tagFilter);
         } else {
           andTags.push(tagFilter);

Build/Sources/TypeScript/recordlist/Resources/Public/TypeScript/LinkBrowser.ts

@@ -74,7 +74,7 @@ class LinkBrowser {
       if (obj.hasOwnProperty(p)) {
         const k: string = prefix ? prefix + '[' + p + ']' : p;
         const v: any = obj[p];
-        if (url.indexOf(k + '=') === -1) {
+        if (!url.includes(k + '=')) {
           str.push(
             typeof v === 'object'
               ? this.encodeGetParameters(v, k, url)

Build/Sources/TypeScript/recordlist/Resources/Public/TypeScript/TelephoneLinkHandler.ts

@@ -29,7 +29,7 @@ class TelephoneLinkHandler {
         if (value === 'tel:') {
           return;
         }
-        if (value.indexOf('tel:') === 0) {
+        if (value.startsWith('tel:')) {
           value = value.substr(4);
         }
 

Build/Sources/TypeScript/workspaces/Resources/Public/TypeScript/Toolbar/WorkspacesMenu.ts

@@ -142,12 +142,12 @@ class WorkspacesMenu {
         if (response.pageId) {
           top.fsMod.recentIds.web = response.pageId;
           let url = TYPO3.Backend.ContentContainer.getUrl();
-          url += (url.indexOf('?') === -1 ? '?' : '&') + '&id=' + response.pageId;
+          url += (!url.includes('?') ? '?' : '&') + '&id=' + response.pageId;
           WorkspacesMenu.refreshPageTree();
           Viewport.ContentContainer.setUrl(url);
 
           // when in web module reload, otherwise send the user to the web module
-        } else if (top.currentModuleLoaded.indexOf('web_') === 0) {
+        } else if (top.currentModuleLoaded.startsWith('web_')) {
           WorkspacesMenu.refreshPageTree();
           ModuleMenu.App.reloadFrames();
         } else if (TYPO3.configuration.pageModule) {

typo3/sysext/adminpanel/Resources/Public/JavaScript/Modules/Cache.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-"use strict";var TYPO3;!function(t){t.Cache=class{constructor(){this.buttons=Array.from(document.querySelectorAll('[data-typo3-role="clearCacheButton"]')),this.buttons.forEach(t=>{t.addEventListener("click",()=>{let e=t.dataset.typo3AjaxUrl,o=new XMLHttpRequest;o.open("GET",e),o.send(),o.onload=(()=>{location.reload()})})})}}}(TYPO3||(TYPO3={})),window.addEventListener("load",()=>new TYPO3.Cache,!1);
\ No newline at end of file
+"use strict";var TYPO3;!function(t){t.Cache=class{constructor(){this.buttons=document.querySelectorAll('[data-typo3-role="clearCacheButton"]'),this.buttons.forEach(t=>{t.addEventListener("click",()=>{let e=t.dataset.typo3AjaxUrl,o=new XMLHttpRequest;o.open("GET",e),o.send(),o.onload=(()=>{location.reload()})})})}}}(TYPO3||(TYPO3={})),window.addEventListener("load",()=>new TYPO3.Cache,!1);
\ No newline at end of file