typo3-typescript-sources 13.4.20

package/extensionmanager/distribution-image.ts

@@ -0,0 +1,55 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators';
+
+/**
+ * Module @typo3/extensionmanager/distribution-image
+ *
+ * @example
+ * <typo3-extensionmanager-distribution-image image="some/image.jpg" fallback="/some/fallback/image.jpg"/>
+ */
+@customElement('typo3-extensionmanager-distribution-image')
+export class DistributionImage extends LitElement {
+  static override styles = css`
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  `;
+
+  @property({ type: String }) alt: string;
+  @property({ type: String }) image: string;
+  @property({ type: String }) welcomeImage: string;
+  @property({ type: String }) fallback: string;
+
+  protected override render(): TemplateResult|symbol {
+    if (!this.image && !this.fallback) {
+      return nothing;
+    }
+
+    const imageToUse = this.welcomeImage || this.image || this.fallback;
+    return html`<img alt="${this.alt}" src="${imageToUse}" @error="${imageToUse !== this.fallback ? this.onError : nothing}">`;
+  }
+
+  private onError(e: Event): void {
+    const imageElement = e.target as HTMLImageElement;
+    if (this.image.length && imageElement.getAttribute('src') === this.welcomeImage) {
+      imageElement.setAttribute('src', this.image);
+    } else if (this.fallback.length) {
+      imageElement.setAttribute('src', this.fallback);
+    }
+  }
+}

package/extensionmanager/main.ts

@@ -0,0 +1,291 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import DocumentService from '@typo3/core/document-service';
+import BrowserSession from '@typo3/backend/storage/browser-session';
+import NProgress from 'nprogress';
+import { default as Modal, type ModalElement } from '@typo3/backend/modal';
+import Severity from '@typo3/backend/severity';
+import SecurityUtility from '@typo3/core/security-utility';
+import ExtensionManagerRepository from './repository';
+import ExtensionManagerUpdate from './update';
+import ExtensionManagerUploadForm from './upload-form';
+import '@typo3/backend/input/clearable';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import DebounceEvent from '@typo3/core/event/debounce-event';
+import RegularEvent from '@typo3/core/event/regular-event';
+import SortableTable from '@typo3/backend/sortable-table';
+
+const securityUtility = new SecurityUtility();
+
+enum ExtensionManagerIdentifier {
+  extensionlist = 'typo3-extension-list',
+  searchField = '#Tx_Extensionmanager_extensionkey',
+}
+
+interface UpdateInformation {
+  updateComments: Record<string, string>,
+  url: string
+}
+
+/**
+ * Module: @typo3/extensionmanager/main
+ * main logic holding everything together, consists of multiple parts
+ * ExtensionManager => Various functions for displaying the extension list / sorting
+ * Repository => Various AJAX functions for TER downloads
+ * ExtensionManager.Update => Various AJAX functions to display updates
+ * ExtensionManager.uploadForm => helper to show the upload form
+ */
+class ExtensionManager {
+  public Update: ExtensionManagerUpdate;
+  public UploadForm: ExtensionManagerUploadForm;
+  public Repository: ExtensionManagerRepository;
+  private readonly searchFilterSessionKey: string = 'tx-extensionmanager-local-filter';
+
+  constructor() {
+    DocumentService.ready().then((): void => {
+      this.Update = new ExtensionManagerUpdate();
+      this.UploadForm = new ExtensionManagerUploadForm();
+      this.Repository = new ExtensionManagerRepository();
+
+      const extensionList = document.getElementById(ExtensionManagerIdentifier.extensionlist);
+      if (extensionList !== null) {
+
+        if (extensionList instanceof HTMLTableElement) {
+          new SortableTable(extensionList);
+        }
+
+        new RegularEvent('click', (e: Event, target: HTMLAnchorElement): void => {
+          e.preventDefault();
+
+          Modal.confirm(
+            TYPO3.lang['extensionList.removalConfirmation.title'],
+            TYPO3.lang['extensionList.removalConfirmation.question'],
+            Severity.error,
+            [
+              {
+                text: TYPO3.lang['button.cancel'],
+                active: true,
+                btnClass: 'btn-default',
+                trigger: (): void => {
+                  Modal.dismiss();
+                },
+              }, {
+                text: TYPO3.lang['button.remove'],
+                btnClass: 'btn-danger',
+                trigger: (): void => {
+                  this.removeExtensionFromDisk(target);
+                  Modal.dismiss();
+                },
+              },
+            ],
+          );
+        }).delegateTo(extensionList, '.removeExtension');
+
+        new RegularEvent('click', (e: Event, target: HTMLAnchorElement): void => {
+          e.preventDefault();
+
+          Modal.confirm(
+            TYPO3.lang['extensionList.databaseReload.title'],
+            TYPO3.lang['extensionList.databaseReload.message'],
+            Severity.warning,
+            [
+              {
+                text: TYPO3.lang['button.cancel'],
+                active: true,
+                btnClass: 'btn-default',
+                trigger: (): void => {
+                  Modal.dismiss();
+                },
+              }, {
+                text: TYPO3.lang['button.reimport'],
+                btnClass: 'btn-warning',
+                trigger: (): void => {
+                  NProgress.start();
+                  new AjaxRequest(target.href).post({}).then((): void => {
+                    location.reload();
+                  }).finally((): void => {
+                    NProgress.done();
+                    Modal.dismiss();
+                  });
+                },
+              },
+            ],
+          );
+        }).delegateTo(extensionList, '.reloadSqlData');
+
+      }
+
+      new RegularEvent('click', (): void => {
+        NProgress.start();
+      }).delegateTo(document, '.onClickMaskExtensionManager');
+
+      new RegularEvent('click', (e: Event, target: HTMLAnchorElement): void => {
+        e.preventDefault();
+
+        NProgress.start();
+        new AjaxRequest(target.href).get().then(this.updateExtension);
+      }).delegateTo(document, 'a[data-action=update-extension]');
+
+      new RegularEvent('change', (e: Event, target: HTMLInputElement): void => {
+        const actionButton = document.querySelector('.t3js-dependencies');
+
+        if (target.checked) {
+          actionButton.classList.remove('disabled');
+        } else {
+          actionButton.classList.add('disabled');
+        }
+      }).delegateTo(document, 'input[name=unlockDependencyIgnoreButton]');
+
+      new RegularEvent('click', (): void => {
+        NProgress.start();
+      }).delegateTo(document, '.t3-button-action-installdistribution');
+
+      let searchField: HTMLInputElement;
+      if ((searchField = document.querySelector(ExtensionManagerIdentifier.searchField)) !== null) {
+        const activeSearchFilter = BrowserSession.get(this.searchFilterSessionKey);
+        if (activeSearchFilter !== null) {
+          searchField.value = activeSearchFilter;
+          this.filterExtensions(activeSearchFilter);
+        }
+
+        new RegularEvent('submit', (e: Event): void => {
+          e.preventDefault();
+        }).bindTo(searchField.closest('form'));
+
+        new DebounceEvent('input', (e: KeyboardEvent): void => {
+          const target = e.target as HTMLInputElement;
+          BrowserSession.set(this.searchFilterSessionKey, target.value);
+          this.filterExtensions(target.value);
+        }, 100).bindTo(searchField);
+        searchField.clearable({
+          onClear: (): void => {
+            BrowserSession.unset(this.searchFilterSessionKey);
+            this.filterExtensions('');
+          },
+        });
+      }
+
+      this.Repository.initDom();
+      this.Update.initializeEvents();
+      this.UploadForm.initializeEvents();
+    });
+  }
+
+  private filterExtensions(searchText: string): void {
+    const filterableColumns = document.querySelectorAll('[data-filterable]');
+    const columnIndices: number[] = [];
+    filterableColumns.forEach((element: HTMLTableRowElement): void => {
+      const children = Array.from(element.parentElement.children);
+      columnIndices.push(children.indexOf(element));
+    });
+    const rows = document.querySelectorAll('#typo3-extension-list tbody tr');
+    rows.forEach((row: HTMLTableRowElement): void => {
+      const columns = columnIndices.map((index: number) => row.children.item(index));
+      const values: string[] = [];
+      columns.forEach((column: HTMLTableCellElement): void => {
+        values.push(column.textContent.trim().replace(/\s+/g, ' '));
+      });
+      row.classList.toggle('hidden', searchText !== '' && !RegExp(searchText, 'i').test(values.join(':')));
+    });
+  }
+
+  private removeExtensionFromDisk(trigger: HTMLAnchorElement): void {
+    NProgress.start();
+    new AjaxRequest(trigger.href).post({}).then((): void => {
+      location.reload();
+    }).finally((): void => {
+      NProgress.done();
+    });
+  }
+
+  private async updateExtension(response: AjaxResponse): Promise<void> {
+    let i = 0;
+    const data: UpdateInformation = await response.resolve();
+    const form = document.createElement('form');
+    for (const [version, comment] of Object.entries(data.updateComments)) {
+      const versionInput = document.createElement('input');
+      versionInput.setAttribute('type', 'radio');
+      versionInput.setAttribute('name', 'version');
+      versionInput.value = version;
+      if (i === 0) {
+        versionInput.setAttribute('checked', 'checked');
+      }
+
+      const versionHeader = document.createElement('h3');
+      versionHeader.innerHTML = securityUtility.encodeHtml(version);
+      versionHeader.prepend(versionInput);
+
+      const commentDiv = document.createElement('div');
+      commentDiv.innerHTML = comment
+        .replace(/(\r\n|\n\r|\r|\n)/g, '\n')
+        .split(/\n/).map((line: string): string => {
+          return securityUtility.encodeHtml(line);
+        })
+        .join('<br>');
+
+      form.append(versionHeader, commentDiv);
+      i++;
+    }
+
+    const updateConfirmationTitle = document.createElement('h1');
+    updateConfirmationTitle.textContent = TYPO3.lang['extensionList.updateConfirmation.title'];
+
+    const updateConfirmationMessage = document.createElement('h2');
+    updateConfirmationMessage.textContent = TYPO3.lang['extensionList.updateConfirmation.message'];
+
+    const container = document.createElement('div');
+    container.append(
+      updateConfirmationTitle,
+      updateConfirmationMessage,
+      form,
+    );
+
+    NProgress.done();
+
+    Modal.confirm(
+      TYPO3.lang['extensionList.updateConfirmation.questionVersionComments'],
+      container,
+      Severity.warning,
+      [
+        {
+          text: TYPO3.lang['button.cancel'],
+          active: true,
+          btnClass: 'btn-default',
+          trigger: (e: Event, modal: ModalElement): void => modal.hideModal(),
+        }, {
+          text: TYPO3.lang['button.updateExtension'],
+          btnClass: 'btn-warning',
+          trigger: (e: Event, modal: ModalElement): void => {
+            NProgress.start();
+            new AjaxRequest(data.url).post({
+              version: (modal.querySelector('input[name="version"]:checked') as HTMLInputElement)?.value,
+            }).finally((): void => {
+              location.reload();
+            });
+            modal.hideModal();
+          },
+        },
+      ],
+    );
+  }
+}
+
+const extensionManagerObject = new ExtensionManager();
+
+if (typeof TYPO3.ExtensionManager === 'undefined') {
+  TYPO3.ExtensionManager = extensionManagerObject;
+}
+
+export default extensionManagerObject;

package/extensionmanager/repository.ts

@@ -0,0 +1,195 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import NProgress from 'nprogress';
+import Modal from '@typo3/backend/modal';
+import Notification from '@typo3/backend/notification';
+import Severity from '@typo3/backend/severity';
+import SortableTable from '@typo3/backend/sortable-table';
+import '@typo3/backend/input/clearable';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+interface ResultItems {
+  [key: string]: string
+}
+
+interface ExtensionInstallResult {
+  errorCount: number,
+  errorMessage: string,
+  errorTitle: string,
+  extension: string,
+  installationTypeLanguageKey: string,
+  result: false | {dependencies?: ResultItems, installed?: ResultItems, updated?: ResultItems },
+  skipDependencyUri: string
+}
+
+class Repository {
+  public initDom(): void {
+    NProgress.configure({ parent: '.module-loading-indicator', showSpinner: false });
+
+    const terVersionTable = document.getElementById('terVersionTable');
+    const terSearchTable = document.getElementById('terSearchTable');
+
+    if (terVersionTable instanceof HTMLTableElement) {
+      new SortableTable(terVersionTable);
+    }
+    if (terSearchTable instanceof HTMLTableElement) {
+      new SortableTable(terSearchTable);
+    }
+
+    this.bindDownload();
+    this.bindSearchFieldResetter();
+  }
+
+  private bindDownload(): void {
+    new RegularEvent('click', (e: Event, target: HTMLInputElement): void => {
+      e.preventDefault();
+
+      const form = target.closest('form');
+      const url = form.dataset.href;
+      NProgress.start();
+      new AjaxRequest(url).get().then(this.getDependencies);
+    }).delegateTo(document, '.downloadFromTer form.download button[type=submit]');
+  }
+
+  private readonly getDependencies = async(response: AjaxResponse): Promise<void> => {
+    const data = await response.resolve();
+    const messageElement = document.createElement('div');
+    messageElement.innerHTML = data.message;
+
+    NProgress.done();
+    if (data.hasDependencies) {
+      Modal.confirm(data.title, messageElement, Severity.info, [
+        {
+          text: TYPO3.lang['button.cancel'],
+          active: true,
+          btnClass: 'btn-default',
+          trigger: (): void => {
+            Modal.dismiss();
+          },
+        }, {
+          text: TYPO3.lang['button.resolveDependencies'],
+          btnClass: 'btn-primary',
+          trigger: (): void => {
+            this.getResolveDependenciesAndInstallResult(data.url);
+            Modal.dismiss();
+          },
+        },
+      ]);
+    } else {
+      if (data.hasErrors) {
+        Notification.error(data.title, data.message, 15);
+      } else {
+        this.getResolveDependenciesAndInstallResult(data.url);
+      }
+    }
+  };
+
+  private getResolveDependenciesAndInstallResult(url: string): void {
+    NProgress.start();
+    new AjaxRequest(url).post({}).then(async (response: AjaxResponse): Promise<void> => {
+      try {
+        // FIXME: As of now, the endpoint doesn't set proper headers, thus we have to parse the response text
+        // https://review.typo3.org/c/Packages/TYPO3.CMS/+/63438
+        const data: ExtensionInstallResult = await response.raw().json();
+        const errorMessageElement = document.createElement('div');
+        errorMessageElement.innerHTML = data.errorMessage;
+
+        if (data.errorCount > 0) {
+          const modal = Modal.confirm(data.errorTitle, errorMessageElement, Severity.error, [
+            {
+              text: TYPO3.lang['button.cancel'],
+              active: true,
+              btnClass: 'btn-default',
+              trigger: (): void => {
+                Modal.dismiss();
+              },
+            }, {
+              text: TYPO3.lang['button.resolveDependenciesIgnore'],
+              btnClass: 'btn-danger disabled t3js-dependencies',
+              trigger: (e: Event): void => {
+                if (!(e.currentTarget as HTMLElement).classList.contains('disabled')) {
+                  this.getResolveDependenciesAndInstallResult(data.skipDependencyUri);
+                  Modal.dismiss();
+                }
+              },
+            },
+          ]);
+          modal.addEventListener('typo3-modal-shown', (): void => {
+            const actionButton = modal.querySelector('.t3js-dependencies');
+            modal.querySelector('input[name="unlockDependencyIgnoreButton"]').addEventListener('change', (e: Event): void => {
+              if ((e.currentTarget as HTMLInputElement).checked) {
+                actionButton?.classList.remove('disabled');
+              } else {
+                actionButton?.classList.add('disabled');
+              }
+            });
+          });
+        } else {
+          let successMessage = TYPO3.lang['extensionList.dependenciesResolveDownloadSuccess.message'
+          + data.installationTypeLanguageKey].replace(/\{0\}/g, data.extension);
+
+          successMessage += '\n' + TYPO3.lang['extensionList.dependenciesResolveDownloadSuccess.header'] + ': ';
+          for (const [index, value] of Object.entries(data.result)) {
+            successMessage += '\n\n' + TYPO3.lang['extensionList.dependenciesResolveDownloadSuccess.item'] + ' ' + index + ': ';
+            for (const extkey of Object.keys(value)) {
+              successMessage += '\n* ' + extkey;
+            }
+          }
+          Notification.info(
+            TYPO3.lang['extensionList.dependenciesResolveFlashMessage.title' + data.installationTypeLanguageKey]
+              .replace(/\{0\}/g, data.extension),
+            successMessage,
+            15,
+          );
+          top.TYPO3.ModuleMenu.App.refreshMenu();
+        }
+      } catch {
+        // Catching errors on resolving the response. One case is that an extensions might lead to
+        // the PHP request being aborted, which results in an empty response body. Calling .json()
+        // on this, results in a SyntaxError. Therefore catch such errors and display a flash message.
+        Notification.error(
+          TYPO3.lang['extensionList.dependenciesResolveInstallError.title'] || 'Install error',
+          TYPO3.lang['extensionList.dependenciesResolveInstallError.message'] || 'Your installation failed while resolving dependencies.'
+        );
+      }
+    }, (): void => {
+      Notification.error(
+        TYPO3.lang['extensionList.dependenciesResolveInstallError.title'] || 'Install error',
+        TYPO3.lang['extensionList.dependenciesResolveInstallError.message'] || 'Your installation failed while resolving dependencies.'
+      );
+    }).finally((): void => {
+      NProgress.done();
+    });
+  }
+
+  private bindSearchFieldResetter(): void {
+    let searchField: HTMLInputElement;
+    if ((searchField = document.querySelector('.typo3-extensionmanager-searchTerForm input[type="text"]')) !== null) {
+      const searchResultShown = ('' !== searchField.value);
+
+      // make search field clearable
+      searchField.clearable({
+        onClear: (input: HTMLInputElement): void => {
+          if (searchResultShown) {
+            input.closest('form').submit();
+          }
+        },
+      });
+    }
+  }
+}
+
+export default Repository;

package/extensionmanager/update.ts

@@ -0,0 +1,118 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import NProgress from 'nprogress';
+import Notification from '@typo3/backend/notification';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+enum ExtensionManagerUpdateIdentifier {
+  extensionTable = '#terTable',
+  terUpdateAction = '.update-from-ter',
+  pagination = '.pagination-wrap',
+  splashscreen = '.splash-receivedata',
+  terTableWrapper = '#terTableWrapper .table',
+}
+
+class ExtensionManagerUpdate {
+  /**
+   * Register "update from ter" action
+   */
+  public initializeEvents(): void {
+    const terUpdateActionForm = document.querySelector(ExtensionManagerUpdateIdentifier.terUpdateAction) as HTMLFormElement|null;
+    if (terUpdateActionForm !== null) {
+      new RegularEvent('submit', (e: SubmitEvent) => {
+        e.preventDefault();
+
+        this.updateFromTer((e.target as HTMLFormElement).action, true);
+      }).bindTo(terUpdateActionForm);
+
+      this.updateFromTer(terUpdateActionForm.action, false);
+    }
+  }
+
+  private updateFromTer(url: string, forceUpdate: boolean): void {
+    if (forceUpdate) {
+      url = url + '&forceUpdateCheck=1';
+    }
+
+    // Hide triggers for TER update
+    document.querySelector(ExtensionManagerUpdateIdentifier.terUpdateAction)?.classList.add('extensionmanager-is-hidden');
+
+    // Hide extension table
+    const extensionTable: HTMLTableElement = document.querySelector(ExtensionManagerUpdateIdentifier.extensionTable);
+    if (extensionTable) {
+      extensionTable.style.display = 'none';
+    }
+
+    // Show loaders
+    document.querySelector(ExtensionManagerUpdateIdentifier.splashscreen)?.classList.add('extensionmanager-is-shown');
+    document.querySelector(ExtensionManagerUpdateIdentifier.terTableWrapper)?.classList.add('extensionmanager-is-loading');
+    document.querySelector(ExtensionManagerUpdateIdentifier.pagination)?.classList.add('extensionmanager-is-loading');
+
+    let reload = false;
+
+    NProgress.start();
+    new AjaxRequest(url).post({}).then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      // Something went wrong, show message
+      if (data.errorMessage.length) {
+        Notification.error(TYPO3.lang['extensionList.updateFromTerFlashMessage.title'], data.errorMessage, 10);
+      }
+
+      // Message with latest updates
+      const lastUpdate: HTMLElement = document.querySelector(ExtensionManagerUpdateIdentifier.terUpdateAction + ' .extension-list-last-updated');
+      lastUpdate.innerText = data.timeSinceLastUpdate;
+      lastUpdate.setAttribute(
+        'title',
+        TYPO3.lang['extensionList.updateFromTer.lastUpdate.timeOfLastUpdate'] + data.lastUpdateTime,
+      );
+
+      if (data.updated) {
+        // Reload page
+        reload = true;
+        window.location.replace(window.location.href);
+      }
+    }, async (error: AjaxResponse): Promise<void> => {
+      // Create an error message with diagnosis info.
+      const errorMessage = error.response.statusText + '(' + error.response.status + '): ' + await error.response.text();
+
+      Notification.warning(
+        TYPO3.lang['extensionList.updateFromTerFlashMessage.title'],
+        errorMessage,
+        10,
+      );
+    }).finally((): void => {
+      NProgress.done();
+
+      if (!reload) {
+        // Hide loaders
+        document.querySelector(ExtensionManagerUpdateIdentifier.splashscreen)?.classList.remove('extensionmanager-is-shown');
+        document.querySelector(ExtensionManagerUpdateIdentifier.terTableWrapper)?.classList.remove('extensionmanager-is-loading');
+        document.querySelector(ExtensionManagerUpdateIdentifier.pagination)?.classList.remove('extensionmanager-is-loading');
+
+        // Show triggers for TER-update
+        document.querySelector(ExtensionManagerUpdateIdentifier.terUpdateAction)?.classList.remove('extensionmanager-is-hidden');
+
+        // Show extension table
+        const extensionTable: HTMLTableElement = document.querySelector(ExtensionManagerUpdateIdentifier.extensionTable);
+        if (extensionTable) {
+          extensionTable.style.display = 'block';
+        }
+      }
+    });
+  }
+}
+
+export default ExtensionManagerUpdate;