Issue #3426905 by pfrenssen, ayalon, dulnan: Port the Flexbox element to GraphQL 4

graphql/webform.extension.graphqls

@@ -6,6 +6,11 @@ extend type WebformElementWebformActions {
   submitLabel: String
 }
 
+extend type WebformElementWebformFlexbox {
+  alignItems: String
+  elements: [WebformElement]
+}
+
 extend type WebformElementTextarea {
   rows: Int
 }

src/Plugin/GraphQL/DataProducer/WebformElements.php

@@ -21,7 +21,12 @@ use Drupal\webform\WebformInterface;
  *   ),
  *   consumes = {
  *     "webform" = @ContextDefinition("entity:webform",
- *       label = @Translation("Webform")
+ *       label = @Translation("Webform"),
+ *       required = TRUE
+ *     ),
+ *     "parent" = @ContextDefinition("any",
+ *       label = @Translation("Parent element"),
+ *       required = FALSE
  *     )
  *   }
  * )
@@ -32,14 +37,19 @@ class WebformElements extends DataProducerPluginBase {
    * Resolves the webform elements.
    *
    * @param \Drupal\webform\WebformInterface $webform
-   *   The webform containing the elements.
+   *   The full webform.
+   * @param array|null $parent
+   *   An optional parent element. If this is passed, the child elements will be
+   *   resolved. If this is not passed, the top-level elements will be resolved.
    *
    * @return array
    *   An array of webform render array elements.
    */
-  public function resolve(WebformInterface $webform): array {
-    // Retrieve the form elements.
-    $form = $webform->getSubmissionForm();
+  public function resolve(WebformInterface $webform, ?array $parent = NULL): array {
+    // Retrieve the form elements. First, try to get the elements from the
+    // parent element. If this is not passed, try to get the elements from the
+    // base webform.
+    $form = $parent ?? $webform->getSubmissionForm() ?? [];
     $original_elements = empty($form['elements']) ? $form : $form['elements'];
 
     // Get a list of "decoded" elements. These contain the element properties
@@ -47,7 +57,7 @@ class WebformElements extends DataProducerPluginBase {
     $decoded_elements = $webform->getElementsDecodedAndFlattened('view');
 
     // Loop over the original elements and store the "decoded" information in
-    // them so we can peruse it in other resolvers.
+    // them, so we can peruse it in other resolvers.
     $elements = [];
     foreach (Element::children($original_elements, TRUE) as $key) {
       $element = $original_elements[$key];

src/Plugin/GraphQL/Fields/Element/WebformElementAlignItems.php

-<?php
-
-declare(strict_types=1);
-
-namespace Drupal\graphql_webform\Plugin\GraphQL\Fields\Element;
-
-use Drupal\graphql\GraphQL\Execution\ResolveContext;
-use Drupal\graphql\Plugin\GraphQL\Fields\FieldPluginBase;
-use GraphQL\Type\Definition\ResolveInfo;
-
-/**
- * Retrieve the 'align items' property from a WebformFlexbox form element.
- *
- * @GraphQLField(
- *   secure = true,
- *   parents = {"WebformElementFlexbox"},
- *   id = "webform_element_align_items",
- *   name = "alignItems",
- *   type = "String",
- * )
- */
-class WebformElementAlignItems extends FieldPluginBase {
-
-  /**
-   * {@inheritdoc}
-   */
-  public function resolveValues($value, array $args, ResolveContext $context, ResolveInfo $info) {
-    if (!empty($value['#align_items'])) {
-      yield (string) $value['#align_items'];
-    }
-    yield 'flex-start';
-  }
-
-}

src/Plugin/GraphQL/Fields/Element/WebformElements.php

@@ -20,7 +20,6 @@ use GraphQL\Type\Definition\ResolveInfo;
  *     "WebformElementComposite",
  *     "WebformElementSection",
  *     "WebformElementContainer",
- *     "WebformElementFlexbox"
  *   },
  *   id = "webform_elements",
  *   name = "elements",

src/Plugin/GraphQL/SchemaExtension/WebformExtension.php

@@ -217,6 +217,22 @@ class WebformExtension extends SdlSchemaExtensionPluginBase {
       })
     ));
 
+    // Resolve the properties of the WebformElementWebformFlexbox element.
+    $registry->addFieldResolver('WebformElementWebformFlexbox', 'alignItems', $builder->compose(
+      $builder->callback(function (array $value): string {
+        return (string) ($value['#align_items'] ?? 'flex-start');
+      })
+    ));
+
+    $registry->addFieldResolver('WebformElementWebformFlexbox', 'elements', $builder->compose(
+      $builder->callback(function ($value) {
+        return $value;
+      }),
+      $builder->produce('webform_elements')
+        ->map('parent', $builder->fromParent())
+        ->map('webform', $builder->fromContext('webform'))
+    ));
+
     // Resolve the options for checkboxes, radio buttons, etc.
     $registry->addFieldResolver('WebformElementOptionsBase', 'options', $builder->compose(
       $builder->callback(function ($value) {
@@ -293,13 +309,10 @@ class WebformExtension extends SdlSchemaExtensionPluginBase {
     );
 
     // Resolver for the main webform elements on the webform.
-    $registry->addFieldResolver(
-      'Webform',
-      'elements',
-      $builder
-        ->produce('webform_elements')
-        ->map('webform', $builder->fromParent())
-    );
+    $registry->addFieldResolver('Webform', 'elements', $builder->compose(
+      $builder->context('webform', $builder->fromParent()),
+      $builder->produce('webform_elements')->map('webform', $builder->fromParent())
+    ));
   }
 
   /**

src/Plugin/GraphQL/Types/WebformElementFlexbox.php

-<?php
-
-declare(strict_types=1);
-
-namespace Drupal\graphql_webform\Plugin\GraphQL\Types;
-
-use Drupal\graphql\GraphQL\Execution\ResolveContext;
-use Drupal\graphql\Plugin\GraphQL\Types\TypePluginBase;
-use Drupal\webform\Plugin\WebformElement\WebformFlexbox;
-use GraphQL\Type\Definition\ResolveInfo;
-
-/**
- * A GraphQL type for flexbox elements.
- *
- * @GraphQLType(
- *   id = "webform_element_flexbox",
- *   name = "WebformElementFlexbox",
- *   interfaces = {"WebformElement"}
- * )
- */
-class WebformElementFlexbox extends TypePluginBase {
-
-  /**
-   * {@inheritdoc}
-   */
-  public function applies($object, ResolveContext $context, ResolveInfo $info) {
-    return $object['plugin'] instanceof WebformFlexbox;
-  }
-
-}

tests/queries/flexbox.gql

-fragment flexboxes on WebformElementFlexbox {
+fragment flexboxes on WebformElementWebformFlexbox {
   __typename
-  id
+  metadata {
+    key
+    type
+  }
   alignItems
   elements {
-    id
+    metadata {
+      key
+    }
   }
 }
 

tests/src/Kernel/Element/FlexboxTest.php

@@ -17,21 +17,29 @@ class FlexboxTest extends GraphQLWebformKernelTestBase {
    * Tests the flexbox element.
    */
   public function testFlexbox(): void {
-    $this->markTestSkipped('To be ported to GraphQL 4.x.');
-    // @todo Figure out why this particular test fails on the Drupal CI.
-    $this->markTestSkipped('Fails for mysterious reasons on the drupal.org test infrastructure.');
     $query = $this->getQueryFromFile('flexbox.gql');
     $this->assertResults($query, ['id' => 'graphql_webform_test_form'], [
       'form' => [
         'title' => 'GraphQL Webform test form',
         'elements' => [
           10 => [
-            '__typename' => 'WebformElementFlexbox',
-            'id' => 'flexbox',
+            '__typename' => 'WebformElementWebformFlexbox',
             'alignItems' => 'center',
             'elements' => [
-              0 => ['id' => 'checkbox'],
-              1 => ['id' => 'time'],
+              0 => [
+                'metadata' => [
+                  'key' => 'checkbox',
+                ],
+              ],
+              1 => [
+                'metadata' => [
+                  'key' => 'time',
+                ],
+              ],
+            ],
+            'metadata' => [
+              'key' => 'flexbox',
+              'type' => 'webform_flexbox',
             ],
           ],
         ],