typo3-typescript-sources 13.4.20

package/workspaces/renderable/record-table.ts

@@ -0,0 +1,355 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import IconHelper from '@typo3/workspaces/utility/icon-helper';
+import { classMap } from 'lit/directives/class-map';
+import { ifDefined } from 'lit/directives/if-defined';
+import { repeat } from 'lit/directives/repeat';
+import '@typo3/backend/element/icon-element';
+
+export type RecordData = {
+  table: string,
+  id: string,
+  uid: number,
+  Workspaces_Collection: number,
+  Workspaces_CollectionLevel: number,
+  Workspaces_CollectionParent: string,
+  Workspaces_CollectionCurrent: string,
+  Workspaces_CollectionChildren: number,
+  label_Workspace: string,
+  label_Stage: string,
+  value_nextStage: number,
+  value_prevStage: number,
+  path_Workspace: string,
+  lastChangedFormatted: string,
+  t3ver_wsid: number,
+  t3ver_oid: number,
+  livepid: number,
+  stage: number,
+  icon_Workspace: string,
+  icon_Workspace_Overlay: string,
+  language: {
+    icon: string,
+    title: string,
+    title_crop: string
+  },
+  allowedAction_publish: boolean,
+  allowedAction_delete: boolean,
+  allowedAction_view: boolean,
+  allowedAction_edit: boolean,
+  allowedAction_versionPageOpen: boolean,
+  state_Workspace: string,
+  hasChanges: boolean,
+  urlToPage: string,
+  expanded: boolean,
+  integrity: {
+    status: string,
+    messages: string
+  }
+};
+
+@customElement('typo3-workspaces-record-table')
+export class RecordTableElement extends LitElement {
+  @property({ type: Array })
+  public results: RecordData[] = [];
+
+  private latestPath: string | null = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="table-fit mb-0">
+        <table class="table table-striped">
+          <thead>
+          <tr>
+            <th>
+              <div class="btn-group dropdown">
+                <button type="button" class="dropdown-toggle dropdown-toggle-link t3js-multi-record-selection-check-actions-toggle" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false" aria-label="${TYPO3.lang['labels.openSelectionOptions']}">
+                  <typo3-backend-icon identifier="actions-selection" size="small"></typo3-backend-icon>
+                </button>
+                <ul class="dropdown-menu t3js-multi-record-selection-check-actions">
+                  <li>
+                    <button type="button" class="dropdown-item" disabled data-multi-record-selection-check-action="check-all" title=${TYPO3.lang['labels.checkAll']}>
+                      <span class="dropdown-item-columns">
+                        <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+                          <typo3-backend-icon identifier="actions-selection-elements-all" size="small"></typo3-backend-icon>
+                        </span>
+                        <span class="dropdown-item-column dropdown-item-column-title">
+                          ${TYPO3.lang['labels.checkAll']}
+                        </span>
+                      </span>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item" disabled data-multi-record-selection-check-action="check-none" title=${TYPO3.lang['labels.uncheckAll']}>
+                      <span class="dropdown-item-columns">
+                          <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+                            <typo3-backend-icon identifier="actions-selection-elements-none" size="small"></typo3-backend-icon>
+                          </span>
+                          <span class="dropdown-item-column dropdown-item-column-title">
+                            ${TYPO3.lang['labels.uncheckAll']}
+                          </span>
+                      </span>
+                    </button>
+                  </li>
+                  <li>
+                    <button type="button" class="dropdown-item" data-multi-record-selection-check-action="toggle" title=${TYPO3.lang['labels.toggleSelection']}>
+                      <span class="dropdown-item-columns">
+                          <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden="true">
+                            <typo3-backend-icon identifier="actions-selection-elements-invert" size="small"></typo3-backend-icon>
+                          </span>
+                          <span class="dropdown-item-column dropdown-item-column-title">
+                            ${TYPO3.lang['labels.toggleSelection']}
+                          </span>
+                      </span>
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </th>
+            <th class="col-min">${TYPO3.lang['column.wsTitle']}</th>
+            <th class="col-language">${TYPO3.lang['labels._LOCALIZATION_']}</th>
+            <th class="col-datetime">${TYPO3.lang['column.lastChangeOn']}</th>
+            <th class="col-state">${TYPO3.lang['column.wsStateAction']}</th>
+            <th class="col-state">${TYPO3.lang['column.integrity']}</th>
+            <th>${TYPO3.lang['column.stage']}</th>
+            <th class="col-control nowrap">
+              <span class="visually-hidden">${TYPO3.lang['labels._CONTROL_']}</span>
+            </th>
+          </tr>
+          </thead>
+          <tbody data-multi-record-selection-row-selection="true">
+            ${repeat(this.results, (result) => result.uid, (data: RecordData) => this.renderTableRow(data))}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+
+  protected renderTableRow(data: RecordData): TemplateResult {
+    let parentItem = null;
+    let latestPathChanged = false;
+
+    if (this.latestPath !== data.path_Workspace) {
+      this.latestPath = data.path_Workspace;
+      latestPathChanged = true;
+    }
+
+    if (data.Workspaces_CollectionParent !== '') {
+      parentItem = this.results.find((element: any) => {
+        return element.Workspaces_CollectionCurrent === data.Workspaces_CollectionParent;
+      });
+    }
+
+    const wsState = data.state_Workspace;
+    let wsStateActionClass: string;
+    let wsStateActionLabel: string;
+
+    switch (wsState) {
+      case 'deleted':
+        wsStateActionClass = 'danger';
+        wsStateActionLabel = TYPO3.lang['column.wsStateAction.deleted'];
+        break;
+      case 'hidden':
+        wsStateActionClass = 'secondary';
+        wsStateActionLabel = TYPO3.lang['column.wsStateAction.hidden'];
+        break;
+      case 'modified':
+        wsStateActionClass = 'warning';
+        wsStateActionLabel = TYPO3.lang['column.wsStateAction.modified'];
+        break;
+      case 'moved':
+        wsStateActionClass = 'primary';
+        wsStateActionLabel = TYPO3.lang['column.wsStateAction.moved'];
+        break;
+      case 'new':
+        wsStateActionClass = 'success';
+        wsStateActionLabel = TYPO3.lang['column.wsStateAction.new'];
+        break;
+      default:
+        wsStateActionClass = 'secondary';
+        wsStateActionLabel = TYPO3.lang['column.wsStateAction.unchanged'];
+    }
+
+    return html`
+      ${latestPathChanged ? html`
+        <tr>
+          <th colspan="8" class="col-white-space-normal">
+            <a href=${data.urlToPage}>${data.path_Workspace}</a>
+          </th>
+        </tr>
+      ` : nothing}
+      <tr
+        class=${classMap({ collapse: data.Workspaces_CollectionParent !== '', show: parentItem?.expanded })}
+        data-uid=${data.uid}
+        data-pid=${data.livepid}
+        data-t3ver_oid=${data.t3ver_oid}
+        data-t3ver_wsid=${data.t3ver_wsid}
+        data-table=${data.table}
+        data-next-stage=${data.value_nextStage}
+        data-prev-stage=${data.value_prevStage}
+        data-stage=${data.stage}
+        data-multi-record-selection-element="true"
+        data-collection=${data.Workspaces_CollectionParent ? data.Workspaces_CollectionParent : nothing}
+        data-collection-current=${ifDefined(data.Workspaces_CollectionCurrent)}
+        >
+        <td class="col-checkbox">
+          <span class="form-check form-check-type-toggle">
+            <input type="checkbox" class="form-check-input t3js-multi-record-selection-check"/>
+          </span>
+        </td>
+        <td class="col-min t3js-title-workspace">
+          ${ data.Workspaces_CollectionLevel > 0 ? this.renderIndent(data.Workspaces_CollectionLevel) : nothing}
+          <span class="icon icon-size-small">
+            <typo3-backend-icon identifier=${IconHelper.getIconIdentifier(data.icon_Workspace)} overlay=${IconHelper.getIconIdentifier(data.icon_Workspace_Overlay)} size="small"></typo3-backend-icon>
+          </span>
+          <a href="#" data-action="changes">
+            ${data.label_Workspace}
+          </a>
+        </td>
+        <td class="col-language">
+          <span title="${data.language.title}" class="icon icon-size-small">
+            <typo3-backend-icon identifier=${IconHelper.getIconIdentifier(data.language.icon)} size="small"></typo3-backend-icon>
+          </span>
+          ${data.language.title_crop}
+        </td>
+        <td class="col-datetime">${data.lastChangedFormatted}</td>
+        <td class="col-state">
+          <span class="badge badge-${wsStateActionClass}">${wsStateActionLabel}</span>
+        </td>
+        <td class="col-state">${ data.integrity.messages !== '' ? html`
+          <span title="${data.integrity.messages}" class="icon icon-size-small">
+            <typo3-backend-icon identifier=${IconHelper.getIconIdentifier(data.integrity.status)} size="small"></typo3-backend-icon>
+          </span>
+        ` : nothing}</td>
+        <td>${data.label_Stage}</td>
+        <td class="col-control nowrap">
+          <div class="btn-group">${this.renderElementActions(data)}</div>
+          <div class="btn-group">${this.renderVersioningActions(data)}</div>
+        </td>
+      </tr>
+    `;
+  }
+
+  protected renderIndent(level: number) {
+    return html`<span class="indent indent-inline-block" style="--indent-level: ${level}"></span>`;
+  }
+
+  private renderElementActions(data: RecordData): TemplateResult[] {
+    return [
+      this.getAction(
+        data.allowedAction_view,
+        'preview',
+        'actions-version-workspace-preview',
+        {
+          'title': TYPO3.lang['tooltip.viewElementAction']
+        }
+      ),
+      this.getAction(
+        data.allowedAction_edit && data.state_Workspace !== 'deleted',
+        'open',
+        'actions-open',
+        {
+          'title': TYPO3.lang['tooltip.editElementAction']
+        }
+      ),
+      this.getAction(
+        data.allowedAction_versionPageOpen,
+        'version',
+        'actions-version-page-open',
+        {
+          'title': TYPO3.lang['tooltip.openPage']
+        }
+      )
+    ];
+  }
+
+  private renderVersioningActions(data: RecordData): TemplateResult[] {
+    const hasSubitems = data.Workspaces_CollectionChildren > 0 && data.Workspaces_CollectionCurrent !== '';
+
+    return [
+      this.getAction(
+        hasSubitems,
+        'expand',
+        (data.expanded ? 'actions-caret-down' : 'actions-caret-right'),
+        {
+          'title': TYPO3.lang['tooltip.expand'],
+          'data-bs-target': '[data-collection="' + data.Workspaces_CollectionCurrent + '"]',
+          'aria-expanded': !hasSubitems || data.expanded ? 'true' : 'false',
+          'data-bs-toggle': 'collapse',
+        }
+      ),
+      this.getAction(
+        data.hasChanges,
+        'changes',
+        'actions-document-info',
+        {
+          'title': TYPO3.lang['tooltip.showChanges']
+        }
+      ),
+      this.getAction(
+        data.allowedAction_publish && data.Workspaces_CollectionParent === '',
+        'publish',
+        'actions-version-swap-version',
+        {
+          'title': TYPO3.lang['tooltip.publish']
+        }
+      ),
+      this.getAction(
+        data.allowedAction_delete,
+        'remove',
+        'actions-delete',
+        {
+          'title': TYPO3.lang['tooltip.discardVersion']
+        }
+      )
+    ];
+  }
+
+  /**
+   * Renders the action button based on the user's permission.
+   *
+   * @param {string} condition
+   * @param {string} action
+   * @param {string} iconIdentifier
+   * @param {object} additionalAttributes
+   * @return {JQuery}
+   */
+  private getAction(condition: boolean, action: string, iconIdentifier: string, additionalAttributes?: Record<string, string>): TemplateResult {
+    return html`
+      <button
+        type="button"
+        class="btn btn-default"
+        ?disabled=${condition ? nothing : ''}
+        data-action="${condition ? action : nothing}"
+        title=${ifDefined(additionalAttributes.title)}
+        data-bs-target=${ifDefined(additionalAttributes['data-bs-target'])}
+        data-bs-toggle=${ifDefined(additionalAttributes['data-bs-toggle'])}
+        aria-expanded=${ifDefined(additionalAttributes['aria-expanded'])}>
+        <typo3-backend-icon identifier=${IconHelper.getIconIdentifier((condition ? iconIdentifier : 'empty-empty'))} size="small"></typo3-backend-icon>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-workspaces-record-table': RecordTableElement;
+  }
+}

package/workspaces/renderable/send-to-stage-form.ts

@@ -0,0 +1,108 @@
+/*
+ * 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 { customElement, property } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+
+export type SendToStageResultData = {
+  sendMailTo?: SendToStageRecipient[],
+  additional?: {
+    type: string,
+    value: string
+  },
+  comments: {
+    type: string,
+    value: string
+  }
+};
+
+export type SendToStageRecipient = {
+  name: string,
+  value: string,
+  checked: boolean,
+  disabled: boolean,
+  label: string
+};
+
+@customElement('typo3-workspaces-send-to-stage-form')
+export class SendToStageFormElement extends LitElement {
+  @property({ type: Object })
+  public data: SendToStageResultData | null = null;
+
+  @property({ type: Object })
+  public TYPO3lang: typeof TYPO3.lang | null = null;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    // @todo Switch to Shadow DOM once Bootstrap CSS style can be applied correctly
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <form>
+        ${this.data.sendMailTo !== undefined && this.data.sendMailTo.length > 0 ? html`
+          <label class="form-label">${this.TYPO3lang['window.sendToNextStageWindow.itemsWillBeSentTo']}</label>
+          ${this.renderRecipientCheckboxes()}
+        ` : nothing}
+        ${this.data.additional !== undefined ? html`
+          <div class="form-group">
+            <label for="additional" class="form-label">
+              ${this.TYPO3lang['window.sendToNextStageWindow.additionalRecipients']}
+            </label>
+            <textarea class="form-control" name="additional" id="additional">${this.data.additional.value}</textarea>
+            <div class="form-text">
+              ${this.TYPO3lang['window.sendToNextStageWindow.additionalRecipients.hint']}
+            </div>
+          </div>
+        ` : nothing}
+        <div class="form-group">
+          <label for="comments" class="form-label">
+            ${this.TYPO3lang['window.sendToNextStageWindow.comments']}
+          </label>
+          <textarea class="form-control" name="comments" id="comments">${this.data.comments.value}</textarea>
+        </div>
+      </form>
+    `;
+  }
+
+  private renderRecipientCheckboxes(): TemplateResult[] {
+    const renderResult: TemplateResult[] = [];
+
+    this.data.sendMailTo?.forEach((recipient: SendToStageRecipient) => {
+      renderResult.push(html`
+        <div class="form-check">
+          <input
+            type="checkbox"
+            name="recipients"
+            class="form-check-input t3js-workspace-recipient"
+            id=${recipient.name}
+            value=${recipient.value}
+            ?checked=${recipient.checked}
+            ?disabled=${recipient.disabled}
+            />
+          <label class="form-check-label" for=${recipient.name}>
+            ${recipient.label}
+          </label>
+        </div>
+      `);
+    });
+
+    return renderResult;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-workspaces-send-to-stage-form': SendToStageFormElement;
+  }
+}

package/workspaces/toolbar/workspaces-menu.ts

@@ -0,0 +1,190 @@
+/*
+ * 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 AjaxRequest from '@typo3/core/ajax/ajax-request';
+import ModuleMenu from '@typo3/backend/module-menu';
+import Viewport from '@typo3/backend/viewport';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { ModuleStateStorage } from '@typo3/backend/storage/module-state-storage';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+enum Identifiers {
+  scaffoldSelector = '.t3js-scaffold',
+  containerSelector = '#typo3-cms-workspaces-backend-toolbaritems-workspaceselectortoolbaritem',
+  activeMenuItemLinkSelector = '.t3js-workspaces-switchlink.active',
+  menuItemLinkSelector = '.t3js-workspaces-switchlink',
+  toolbarItemSelector = '.dropdown-toggle',
+}
+
+enum Classes {
+  workspaceBodyClass = 'scaffold-in-workspace',
+  workspacesTitleInToolbarClass = 'toolbar-item-name',
+}
+
+interface WorkspaceState {
+  id: number
+  title: string
+  inWorkspace: boolean
+}
+
+/**
+ * Module: @typo3/workspaces/toolbar/workspaces-menu
+ * toolbar menu for the workspaces functionality to switch between the workspaces
+ * and jump to the workspaces module
+ */
+class WorkspacesMenu {
+  constructor() {
+    Viewport.Topbar.Toolbar.registerEvent((): void => {
+      this.initializeEvents();
+      WorkspacesMenu.updateBackendContext();
+    });
+
+    new RegularEvent('typo3:datahandler:process', (e: CustomEvent): void => {
+      const payload = e.detail.payload;
+      if (payload.table === 'sys_workspace' && payload.action === 'delete' && payload.hasErrors === false) {
+        Viewport.Topbar.refresh();
+      }
+    }).bindTo(document);
+  }
+
+  /**
+   * Refresh the page tree
+   */
+  private static refreshPageTree(): void {
+    document.dispatchEvent(new CustomEvent('typo3:pagetree:refresh'));
+  }
+
+  /**
+   * Get workspace state from the current active menu item
+   */
+  private static getWorkspaceState(): null|WorkspaceState {
+    const selectedWorkspaceLink: HTMLElement = document.querySelector(
+      [Identifiers.containerSelector, Identifiers.activeMenuItemLinkSelector].join(' ')
+    );
+    if (selectedWorkspaceLink === null) {
+      return null;
+    }
+    const workspaceId = parseInt(selectedWorkspaceLink.dataset.workspaceid || '0', 10);
+    return {
+      id: workspaceId,
+      title: selectedWorkspaceLink.innerText.trim(),
+      inWorkspace: workspaceId !== 0
+    };
+  }
+
+  /**
+   * Adds the workspace title to the toolbar next to the username
+   * and adds the check icon to the currently active menu items.
+   *
+   * @param {WorkspaceState} workspaceState
+   */
+  private static updateTopBar(workspaceState: WorkspaceState): void {
+    const toolbarItemContainer = document.querySelector(Identifiers.containerSelector);
+
+    // Remove the workspace title in toolbar
+    toolbarItemContainer.querySelector(Identifiers.containerSelector + ' .' + Classes.workspacesTitleInToolbarClass)?.remove();
+
+    // If we are in a workspace, add the corresponding title to the toolbar - if available
+    if (workspaceState.inWorkspace && workspaceState.title) {
+      const titleElement = document.createElement('span');
+      titleElement.classList.add(Classes.workspacesTitleInToolbarClass);
+      titleElement.textContent = workspaceState.title;
+      toolbarItemContainer.querySelector(Identifiers.toolbarItemSelector).append(titleElement);
+    }
+  }
+
+  /**
+   * Updates backend context, especially the topbar
+   */
+  private static updateBackendContext(workspaceState: WorkspaceState = null): void {
+    workspaceState ??= WorkspacesMenu.getWorkspaceState();
+    if (workspaceState === null) {
+      // If still no workspace state, return
+      return;
+    }
+
+    const topbar = document.querySelector(Identifiers.scaffoldSelector);
+    topbar.classList.toggle(Classes.workspaceBodyClass, workspaceState.inWorkspace);
+    if (workspaceState.inWorkspace && !workspaceState.title) {
+      workspaceState.title = TYPO3.lang['Workspaces.workspaceTitle'];
+    }
+
+    WorkspacesMenu.updateTopBar(workspaceState);
+  }
+
+  /**
+   * Changes the data in the module menu and the updates the backend context
+   */
+  private performWorkspaceSwitch(id: number, title: string): void {
+    const toolbarItemContainer = document.querySelector(Identifiers.containerSelector);
+    // remove "active" class
+    toolbarItemContainer.querySelector(Identifiers.activeMenuItemLinkSelector).classList.remove('active');
+
+    // add "active" class to currently selected workspace
+    toolbarItemContainer.querySelector(Identifiers.menuItemLinkSelector + '[data-workspaceid="' + id + '"]')?.classList.add('active');
+
+    // Initiate backend context update
+    WorkspacesMenu.updateBackendContext({ id: id, title: title, inWorkspace: id !== 0 });
+  }
+
+  private initializeEvents(): void {
+    const toolbarItemContainer = document.querySelector(Identifiers.containerSelector);
+
+    new RegularEvent('click', (e: Event, menuItem: HTMLAnchorElement): void => {
+      e.preventDefault();
+      this.switchWorkspace(parseInt(menuItem.dataset.workspaceid, 10));
+    }).delegateTo(toolbarItemContainer, Identifiers.menuItemLinkSelector);
+  }
+
+  private switchWorkspace(workspaceId: number): void {
+    (new AjaxRequest(TYPO3.settings.ajaxUrls.workspace_switch)).post({
+      workspaceId: workspaceId,
+      pageId: ModuleStateStorage.current('web').identifier
+    }).then(async (response: AjaxResponse): Promise<void> => {
+      const data = await response.resolve();
+      if (!data.workspaceId) {
+        data.workspaceId = 0;
+      }
+
+      this.performWorkspaceSwitch(data.workspaceId, data.title || '');
+
+      const currentModule = ModuleMenu.App.getCurrentModule();
+      // If a user has no view permission for the requested page, the first allowed page id from its rootline is
+      // returned which gets appended to the URL
+      if (data.pageId) {
+        let url = TYPO3.Backend.ContentContainer.getUrl();
+        url += (!url.includes('?') ? '?' : '&') + 'id=' + data.pageId;
+        Viewport.ContentContainer.setUrl(url);
+      } else if (currentModule === 'workspaces_admin') {
+        // Reload the workspace module and override the workspace id
+        ModuleMenu.App.showModule(currentModule, 'workspace=' + workspaceId);
+      } else if (currentModule?.startsWith('web_')) {
+        // when in web module reload, otherwise send the user to the page module
+        ModuleMenu.App.reloadFrames();
+      } else if (data.pageModule) {
+        ModuleMenu.App.showModule(data.pageModule);
+      }
+
+      // Refresh the pagetree if visible
+      WorkspacesMenu.refreshPageTree();
+      // reload the module menu
+      ModuleMenu.App.refreshMenu();
+    });
+  }
+}
+
+const workspacesMenu = new WorkspacesMenu();
+// expose the module in a global object
+TYPO3.WorkspacesMenu = workspacesMenu;
+
+export default workspacesMenu;