trait FieldUiJSTestTrait

trait FieldUiJSTestTrait {
    
    /**
     * Creates a new field through the Field UI.
     *
     * @param string|null $bundle_path
     *   Admin path of the bundle that the new field is to be attached to.
     * @param string $field_name
     *   The field name of the new field storage.
     * @param string|null $label
     *   (optional) The label of the new field. Defaults to a random string.
     * @param string $field_type
     *   (optional) The field type of the new field storage. Defaults to
     *   'test_field'.
     * @param bool $save_settings
     *   (optional) Parameter for conditional execution of second and third step
     *   (Saving the storage settings and field settings). Defaults to 'TRUE'.
     *
     * @throws \Behat\Mink\Exception\ElementNotFoundException
     */
    public function fieldUIAddNewFieldJS(?string $bundle_path, string $field_name, ?string $label = NULL, string $field_type = 'test_field', bool $save_settings = TRUE) : void {
        $label = $label ?: $field_name;
        // Allow the caller to set a NULL path in case they navigated to the right
        // page before calling this method.
        if ($bundle_path !== NULL) {
            $bundle_path = "{$bundle_path}/fields/add-field";
            $this->drupalGet($bundle_path);
        }
        // First step: 'Add field' page.
        $session = $this->getSession();
        $page = $session->getPage();
        $assert_session = $this->assertSession();
        if ($assert_session->waitForElementVisible('css', "[name='new_storage_type'][value='{$field_type}']")) {
            $page = $this->getSession()
                ->getPage();
            $field_card = $page->find('css', "[name='new_storage_type'][value='{$field_type}']")
                ->getParent();
        }
        else {
            $field_card = $this->getFieldFromGroupJS($field_type);
        }
        $field_card?->click();
        $page->findButton('Continue')
            ->click();
        $field_label = $page->findField('edit-label');
        $this->assertTrue($field_label->isVisible());
        $field_label = $page->find('css', 'input[data-drupal-selector="edit-label"]');
        $field_label->setValue($label);
        $machine_name = $assert_session->waitForElementVisible('css', '[data-drupal-selector="edit-label"] + * .machine-name-value');
        $this->assertNotEmpty($machine_name);
        $page->findButton('Edit')
            ->press();
        $field_field_name = $page->findField('field_name');
        $this->assertTrue($field_field_name->isVisible());
        $field_field_name->setValue($field_name);
        $page->findButton('Continue')
            ->click();
        $assert_session->waitForText("These settings apply to the {$label} field everywhere it is used.");
        if ($save_settings) {
            // Second step: Save field settings.
            $page->findButton('Save settings')
                ->click();
            $assert_session->pageTextContains("Saved {$label} configuration.");
            // Check that the field appears in the overview form.
            $row = $page->find('css', '#field-' . $field_name);
            $this->assertNotEmpty($row, 'Field was created and appears in the overview page.');
        }
    }
    
    /**
     * Adds an existing field through the Field UI.
     *
     * @param string $bundle_path
     *   Admin path of the bundle that the field is to be attached to.
     * @param string $existing_storage_name
     *   The name of the existing field storage for which we want to add a new
     *   field.
     * @param string|null $label
     *   (optional) The label of the new field. Defaults to a random string.
     * @param array $field_edit
     *   (optional) $edit parameter for submitForm() on the second step
     *   ('Field settings' form).
     */
    public function fieldUIAddExistingFieldJS(string $bundle_path, string $existing_storage_name, ?string $label = NULL, array $field_edit = []) : void {
        $label = $label ?: $this->randomMachineName();
        $field_edit['edit-label'] = $label;
        // First step: navigate to the re-use field page.
        $this->drupalGet("{$bundle_path}/fields/");
        // Confirm that the local action is visible.
        $this->assertSession()
            ->linkExists('Re-use an existing field');
        $this->clickLink('Re-use an existing field');
        // Wait for the modal to open.
        $this->assertSession()
            ->waitForElementVisible('css', '#drupal-modal');
        $this->assertSession()
            ->elementExists('css', "input[value=Re-use][name={$existing_storage_name}]");
        $this->click("input[value=Re-use][name={$existing_storage_name}]");
        // Set the main content to only the content region because the label can
        // contain HTML which will be auto-escaped by Twig.
        $this->assertSession()
            ->responseContains('field-config-edit-form');
        // Check that the page does not have double escaped HTML tags.
        $this->assertSession()
            ->responseNotContains('<');
        // Second step: 'Field settings' form.
        $this->submitForm($field_edit, 'Save settings');
        $this->assertSession()
            ->pageTextContains("Saved {$label} configuration.");
        // Check that the field appears in the overview form.
        $xpath = $this->assertSession()
            ->buildXPathQuery("//table[@id=\"field-overview\"]//tr/td[1 and text() = :label]", [
            ':label' => $label,
        ]);
        $this->assertSession()
            ->elementExists('xpath', $xpath);
    }
    
    /**
     * Helper function that returns the field card element if it is in a group.
     *
     * @param string $field_type
     *   The name of the field type.
     *
     * @return \Behat\Mink\Element\NodeElement|false|mixed|null
     *   Field card element within a group.
     */
    public function getFieldFromGroupJS($field_type) {
        $group_elements = $this->getSession()
            ->getPage()
            ->findAll('css', '.field-option-radio');
        $groups = [];
        foreach ($group_elements as $group_element) {
            $groups[] = $group_element->getAttribute('value');
        }
        $field_card = NULL;
        foreach ($groups as $group) {
            $group_field_card = $this->getSession()
                ->getPage()
                ->find('css', "[name='new_storage_type'][value='{$group}']")
                ->getParent();
            $group_field_card->click();
            $this->getSession()
                ->getPage()
                ->pressButton('Continue');
            $field_card = $this->getSession()
                ->getPage()
                ->find('css', "[name='group_field_options_wrapper'][value='{$field_type}']");
            if ($field_card) {
                break;
            }
            $this->getSession()
                ->getPage()
                ->pressButton('Back');
        }
        return $field_card->getParent();
    }

}