[BUGFIX] Assure page title editing when creating new pages

Using drag and drop, one can create new pages within the
page tree. New pages can be created before, after or
within existing pages. Currently, one could not provide
a page title if the page was created within a page
without subpages due to issues with unintended focus
change after drag and drop.

It is now ensured that a page title can be edited
directly after dragging a page into the page tree. Some
cases are also covered by acceptance tests now.

Resolves: #92380
Releases: master, 10.4
Change-Id: I95391631f11552fc59e9252e904052d8288c5d91
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67316Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Guido Schmechel <guido.schmechel@brandung.de>
Tested-by: Richard Haeser <richard@richardhaeser.com>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Reviewed-by: Richard Haeser <richard@richardhaeser.com>

typo3/sysext/backend/Resources/Public/JavaScript/PageTree/PageTree.js

@@ -335,7 +335,11 @@ define(['jquery',
           _this.prepareDataForVisibleNodes();
           _this.update();
           _this.nodesRemovePlaceholder();
-          _this.switchFocusNode(parentNode);
+
+          // Focus node only if it's not currently in edit mode
+          if (!_this.nodeIsEdit) {
+            _this.switchFocusNode(parentNode);
+          }
         })
         .catch(function (error) {
           var title = TYPO3.lang.pagetree_networkErrorTitle;

typo3/sysext/backend/Resources/Public/JavaScript/PageTree/PageTreeDragDrop.js

@@ -773,6 +773,8 @@ define([
       newNode.y = newNode.y || newNode.target.y;
       newNode.x = newNode.x || newNode.target.x;
 
+      _this.tree.nodeIsEdit = true;
+
       if (options.position === 'in') {
         newNode.depth++;
         newNode.parents.unshift(index);
@@ -800,7 +802,6 @@ define([
       _this.tree.prepareDataForVisibleNodes();
       _this.tree.update();
       _this.tree.removeEditedText();
-      _this.tree.nodeIsEdit = true;
 
       d3.select(_this.tree.svg.node().parentNode)
         .append('input')

typo3/sysext/core/Tests/Acceptance/PageTree/DragAndDrop/PageCreationWithDragAndDropCest.php

+<?php
+
+declare(strict_types=1);
+
+/*
+ * 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!
+ */
+
+namespace TYPO3\CMS\Core\Tests\Acceptance\PageTree\DragAndDrop;
+
+use Facebook\WebDriver\WebDriverKeys;
+use TYPO3\CMS\Core\Tests\Acceptance\Support\BackendTester;
+use TYPO3\CMS\Core\Tests\Acceptance\Support\Helper\Mouse;
+use TYPO3\CMS\Core\Tests\Acceptance\Support\Helper\PageTree;
+
+/**
+ * Page tree related tests for page creation using drag and drop.
+ */
+class PageCreationWithDragAndDropCest
+{
+    protected static string $treeNode = '#typo3-pagetree-tree .nodes .node';
+    protected static string $dragNode = '#svg-toolbar .svg-toolbar__drag-node';
+    protected static string $nodeEditInput = '.node-edit';
+
+    /**
+     * Open list module of styleguide elements basic page
+     *
+     * @param BackendTester $I
+     * @param PageTree $pageTree
+     * @throws \Exception
+     */
+    public function _before(BackendTester $I, PageTree $pageTree): void
+    {
+        $I->useExistingSession('admin');
+        $I->click('List');
+        $pageTree->openPath(['Root']);
+        $I->waitForElement(static::$treeNode, 5);
+        $I->waitForElement(static::$dragNode, 5);
+    }
+
+    /**
+     * Check drag and drop for new pages into nodes without children.
+     *
+     * @param BackendTester $I
+     * @param Mouse $mouse
+     * @throws \Exception
+     */
+    public function dragAndDropNewPageInNodeWithoutChildren(BackendTester $I, Mouse $mouse): void
+    {
+        $I->amGoingTo('create a new page below pid=21 (no child pages) using drag and drop');
+        $this->dragAndDropNewPage($I, $mouse, 21);
+    }
+
+    /**
+     * Check drag and drop for new pages into nodes with children.
+     *
+     * @param BackendTester $I
+     * @param Mouse $mouse
+     * @throws \Exception
+     */
+    public function dragAndDropNewPageInNodeWithChildren(BackendTester $I, Mouse $mouse): void
+    {
+        $I->amGoingTo('create a new page below pid=10 (has child pages) using drag and drop');
+        $this->dragAndDropNewPage($I, $mouse, 10);
+    }
+
+    /**
+     * Check drag and drop for new pages and quit page creation using Escape key.
+     *
+     * @param BackendTester $I
+     * @param Mouse $mouse
+     * @throws \Exception
+     */
+    public function dragAndDropNewPageAndQuitPageCreation(BackendTester $I, Mouse $mouse): void
+    {
+        $mouse->dragAndDrop(static::$dragNode, $this->getPageIdentifier(22));
+
+        $I->seeElement(static::$nodeEditInput);
+        $I->pressKey(static::$nodeEditInput, WebDriverKeys::ESCAPE);
+        $I->waitForElementNotVisible(static::$nodeEditInput, 5);
+    }
+
+    /**
+     * Check drag and drop for new pages and quit page creation using empty page title.
+     *
+     * @param BackendTester $I
+     * @param Mouse $mouse
+     * @throws \Exception
+     */
+    public function dragAndDropNewPageAndLeavePageTitleEmpty(BackendTester $I, Mouse $mouse): void
+    {
+        $mouse->dragAndDrop(static::$dragNode, $this->getPageIdentifier(22));
+
+        $I->seeElement(static::$nodeEditInput);
+        $I->fillField(static::$nodeEditInput, '');
+        $I->pressKey(static::$nodeEditInput, WebDriverKeys::ENTER);
+        $I->waitForElementNotVisible(static::$nodeEditInput, 5);
+    }
+
+    /**
+     * Perform drag and drop for a new page into the given target page.
+     *
+     * @param BackendTester $I
+     * @param Mouse $mouse
+     * @param int $targetPageId
+     * @throws \Exception
+     */
+    protected function dragAndDropNewPage(BackendTester $I, Mouse $mouse, int $targetPageId): void
+    {
+        $target = $this->getPageIdentifier($targetPageId);
+        $pageTitle = sprintf('Dummy 1-%d-new', $targetPageId);
+
+        $mouse->dragAndDrop(static::$dragNode, $target);
+
+        $I->seeElement(static::$nodeEditInput);
+        $I->fillField(static::$nodeEditInput, $pageTitle);
+        $I->pressKey(static::$nodeEditInput, WebDriverKeys::ENTER);
+        $I->waitForElementNotVisible(static::$nodeEditInput);
+        $I->see($pageTitle);
+    }
+
+    /**
+     * Get node identifier of given page.
+     *
+     * @param int $pageId
+     * @return string
+     */
+    protected function getPageIdentifier(int $pageId): string
+    {
+        return '#identifier-0_' . $pageId;
+    }
+}

typo3/sysext/core/Tests/Acceptance/Support/Helper/Mouse.php

+<?php
+
+declare(strict_types=1);
+
+/*
+ * 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!
+ */
+
+namespace TYPO3\CMS\Core\Tests\Acceptance\Support\Helper;
+
+use Facebook\WebDriver\Interactions\Internal\WebDriverButtonReleaseAction;
+use Facebook\WebDriver\Interactions\Internal\WebDriverClickAndHoldAction;
+use Facebook\WebDriver\Interactions\Internal\WebDriverMouseMoveAction;
+use Facebook\WebDriver\Interactions\WebDriverCompositeAction;
+use Facebook\WebDriver\Remote\RemoteWebDriver;
+use Facebook\WebDriver\Remote\RemoteWebElement;
+use Facebook\WebDriver\WebDriverBy;
+use Facebook\WebDriver\WebDriverMouse;
+use TYPO3\CMS\Core\Tests\Acceptance\Support\BackendTester;
+
+/**
+ * Several mouse actions for Backend usage.
+ */
+class Mouse
+{
+    protected BackendTester $tester;
+
+    public function __construct(BackendTester $I)
+    {
+        $this->tester = $I;
+    }
+
+    /**
+     * Perform drag and drop from source to target destination.
+     *
+     * Performs a normal "drag nd drop" operation from the given source element to the
+     * given target destination. Additionally, checks whether the current drag & drop
+     * node is displayed on the page.
+     *
+     * [!] Note that only CSS selectors are valid for both $source and $target.
+     *
+     * @param string $source Drag source, must be a valid CSS selector
+     * @param string $target Drop target, must be a valid CSS selector
+     */
+    public function dragAndDrop(string $source, string $target): void
+    {
+        $I = $this->tester;
+        $this->dragTo($source, $target, false);
+        $I->canSeeElement('.node-dd');
+        $this->release();
+    }
+
+    /**
+     * Drag source element to target destination.
+     *
+     * Uses the mouse to drag the given source element to the given target destination.
+     * If $release is set to `true`, the mouse is released afterwards. In this case, a
+     * normal "drag and drop" action is performed.
+     *
+     * [!] Note that only CSS selectors are valid for both $source and $target.
+     *
+     * @param string $source Drag source, must be a valid CSS selector
+     * @param string $target Drag target, must be a valid CSS selector
+     * @param bool $release `true` if mouse should be released (default), `false` otherwise
+     */
+    public function dragTo(string $source, string $target, bool $release = true): void
+    {
+        (new WebDriverCompositeAction())
+            ->addAction(
+                new WebDriverClickAndHoldAction($this->getMouse(), $this->findElement($source))
+            )
+            ->addAction(
+                new WebDriverMouseMoveAction($this->getMouse(), $this->findElement($target))
+            )
+            ->perform();
+        if ($release) {
+            $this->release();
+        }
+    }
+
+    /**
+     * Release mouse at current position.
+     */
+    public function release(): void
+    {
+        $action = new WebDriverButtonReleaseAction($this->getMouse());
+        $action->perform();
+    }
+
+    protected function findElement(string $cssSelector): RemoteWebElement
+    {
+        $I = $this->tester;
+        return $I->executeInSelenium(function (RemoteWebDriver $webDriver) use ($cssSelector) {
+            return $webDriver->findElement(WebDriverBy::cssSelector($cssSelector));
+        });
+    }
+
+    protected function getMouse(): WebDriverMouse
+    {
+        $I = $this->tester;
+        return $I->executeInSelenium(function (RemoteWebDriver $webDriver) {
+            return $webDriver->getMouse();
+        });
+    }
+}