sort bridges

forms-bridge/includes/class-addon.php

@@ -197,11 +197,7 @@ function ( $data ) {
 						$registry = self::registry();
 						$addons   = array();
 						foreach ( self::$addons as $name => $addon ) {
-							$logo_path =
-							FORMS_BRIDGE_ADDONS_DIR .
-							'/' .
-							$addon::NAME .
-							'/assets/logo.png';
+							$logo_path = FORMS_BRIDGE_ADDONS_DIR . '/' . $addon::NAME . '/assets/logo.png';
 
 							if ( is_file( $logo_path ) && is_readable( $logo_path ) ) {
 								$logo = plugin_dir_url( $logo_path ) . 'logo.png';

forms-bridge/includes/class-form-bridge.php

@@ -194,21 +194,25 @@ public static function schema( $addon = null ) {
 					'default'     => array(),
 				),
 				'is_valid'      => array(
-					'description' => __(
-						'Validation result of the bridge setting',
-						'forms-bridge'
-					),
+					'description' => __( 'Validation result of the bridge setting', 'forms-bridge' ),
 					'type'        => 'boolean',
 					'default'     => true,
 				),
 				'enabled'       => array(
-					'description' => __(
-						'Boolean flag to enable/disable a bridge',
-						'forms-bridge'
-					),
+					'description' => __( 'Boolean flag to enable/disable a bridge', 'forms-bridge' ),
 					'type'        => 'boolean',
 					'default'     => true,
 				),
+				'allow_failure' => array(
+					'description' => __( 'Whether an error on bridge submission should stop the submission loop or not', 'forms-bridge' ),
+					'type'        => 'boolean',
+					'default'     => true,
+				),
+				'order'         => array(
+					'description' => __( 'Order in which the bridge should be submitted in the submission loop', 'forms-bridge' ),
+					'type'        => 'integer',
+					'default'     => -1,
+				),
 			),
 			'required'             => array(
 				'name',
@@ -221,6 +225,8 @@ public static function schema( $addon = null ) {
 				'workflow',
 				'is_valid',
 				'enabled',
+				'allow_failure',
+				'order',
 			),
 			'additionalProperties' => false,
 		);

forms-bridge/includes/class-forms-bridge.php

@@ -283,7 +283,23 @@ function ( $field ) {
 			return;
 		}
 
-		foreach ( $bridges as $bridge ) {
+		usort(
+			$bridges,
+			function ( $a, $b ) {
+				if ( 0 > $a->order ) {
+					return 1;
+				} elseif ( 0 > $b->order ) {
+					return -1;
+				}
+
+				return $a->order - $b->order;
+			}
+		);
+
+		$l = count( $bridges );
+		for ( $i = 0; $i < $l; ++$i ) {
+			$bridge = $bridges[ $i ];
+
 			if ( ! $bridge->enabled ) {
 				Logger::log(
 					'Skip submission for disabled bridge ' . $bridge->name
@@ -436,6 +452,15 @@ function ( $field ) {
 					$payload ?? $submission,
 					$attachments ?? array()
 				);
+
+				if (
+					false === $bridge->allow_failure
+					&& count( $bridges ) > 1
+					&& $i < count( $bridges ) - 1
+				) {
+					Logger::log( 'Early exit from the submission loop due to an error', Logger::ERROR );
+					break;
+				}
 			} finally {
 				self::$current_bridge = null;
 			}

forms-bridge/includes/class-integration.php

@@ -197,10 +197,19 @@ function ( $data ) {
 						$registry     = self::registry();
 						$integrations = array();
 						foreach ( self::$integrations as $name => $integration ) {
+							$logo_path = FORMS_BRIDGE_INTEGRATIONS_DIR . '/' . $integration::NAME . '/assets/logo.png';
+
+							if ( is_file( $logo_path ) && is_readable( $logo_path ) ) {
+								$logo = plugin_dir_url( $logo_path ) . 'logo.png';
+							} else {
+								$logo = '';
+							}
+
 							$integrations[ $name ] = array(
 								'name'    => $name,
 								'title'   => $integration::TITLE,
 								'enabled' => $registry[ $name ] ?? false,
+								'logo'    => $logo,
 							);
 						}
 

src/components/Backend/index.jsx

@@ -120,7 +120,7 @@ export default function Backend({ update, remove, data, copy }) {
               padding: "6px 6px",
             }}
             onClick={copy}
-            label={__("Duplaicate", "forms-bridge")}
+            label={__("Duplicate", "forms-bridge")}
             showTooltip
             __next40pxDefaultSize
           >

src/components/Bridge/index.jsx

@@ -251,7 +251,7 @@ export default function Bridge({ data, update, remove, schema, copy, names }) {
                 padding: "6px 6px",
               }}
               onClick={copy}
-              label={__("Duplaicate", "forms-bridge")}
+              label={__("Duplicate", "forms-bridge")}
               showTooltip
               __next40pxDefaultSize
             >

src/components/Bridges/index.jsx

@@ -12,8 +12,8 @@ const { TabPanel } = wp.components;
 const { useEffect, useMemo, useRef } = wp.element;
 const { __ } = wp.i18n;
 
-const CSS = `.bridges-tabs-panel .components-tab-panel__tabs{overflow-x:auto;}
-.bridges-tabs-panel .components-tab-panel__tabs>button{flex-shrink:0;}`;
+const CSS = `.bridges-tabs-panel>.components-tab-panel__tabs{overflow-x:auto;}
+.bridges-tabs-panel>.components-tab-panel__tabs>button{flex-shrink:0;}`;
 
 const DEFAULTS = {
   name: "bridge-" + Date.now(),

src/components/Credential/index.jsx

@@ -172,7 +172,7 @@ export default function Credential({
               padding: "6px 6px",
             }}
             onClick={copy}
-            label={__("Duplaicate", "forms-bridge")}
+            label={__("Duplicate", "forms-bridge")}
             showTooltip
             __next40pxDefaultSize
           >

src/components/Form/Bridges.jsx

@@ -0,0 +1,201 @@
+const {
+  Button,
+  Modal,
+  __experimentalItemGroup: ItemGroup,
+  __experimentalItem: Item,
+} = wp.components;
+const { useState, useMemo } = wp.element;
+const { __ } = wp.i18n;
+
+export default function FormBridges({ bridges, setBridges }) {
+  const [open, setOpen] = useState(false);
+
+  const orderedBridges = useMemo(() => {
+    return bridges.sort((a, b) => {
+      if (isNaN(a.order)) return 1;
+      if (isNaN(b.order)) return -1;
+      return a.order - b.order;
+    });
+  }, [bridges]);
+
+  const move = (from, to) => {
+    const bridge = orderedBridges[from];
+
+    const slicedBridges = orderedBridges
+      .slice(0, from)
+      .concat(orderedBridges.slice(from + 1));
+
+    const newBridges = slicedBridges
+      .slice(0, to)
+      .concat(bridge)
+      .concat(slicedBridges.slice(to));
+
+    newBridges.forEach((bridge, index) => (bridge.order = index));
+    setBridges(newBridges);
+  };
+
+  const setFailure = (index, policy) => {
+    const newBridges = bridges.map((bridge) => ({ ...bridge }));
+    newBridges[index].allow_failure = !!policy;
+    setBridges(newBridges);
+  };
+
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setOpen(true)}>
+        {__("Bridges", "forms-bridge")}
+      </Button>
+      {open && (
+        <Modal
+          title={__("Form's bridges", "forms-bridge")}
+          onRequestClose={() => setOpen(false)}
+        >
+          <p
+            style={{
+              marginTop: "-3rem",
+              position: "absolute",
+              zIndex: 1,
+            }}
+          >
+            {__(
+              "Manage the form's bridge chain and their submission failure policies",
+              "forms-bridge"
+            )}
+          </p>
+          <div
+            style={{
+              marginTop: "2rem",
+              width: "460px",
+              maxWidth: "80vw",
+              minHeight: "125px",
+              height: "calc(100% - 2rem)",
+              display: "flex",
+              flexDirection: "column",
+              borderTop: "1px solid",
+              borderBottom: "1px solid",
+            }}
+          >
+            <div
+              style={{
+                flex: 1,
+                overflowY: "auto",
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <ItemGroup
+                size="large"
+                isSeparated
+                style={{ maxHeight: "calc(100% - 68px)", overflowY: "auto" }}
+              >
+                {orderedBridges.map((bridge, i) => (
+                  <Item key={bridge.name + i}>
+                    <BridgeStep
+                      index={i}
+                      name={bridge.name}
+                      failure={bridge.allow_failure}
+                      setFailure={(policy) => setFailure(i, policy)}
+                      move={(direction) => move(i, i + direction)}
+                      isLast={i === bridges.length - 1}
+                    />
+                  </Item>
+                ))}
+              </ItemGroup>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+function BridgeStep({ index, name, failure, setFailure, move, isLast }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <p
+        style={{
+          cursor: "pointer",
+          textIndent: "12px",
+          padding: "10px 30px 10px 0",
+          whiteSpace: "nowrap",
+          margin: 0,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          position: "relative",
+          flex: 1,
+        }}
+      >
+        <span
+          title={__("Allow bridge failures", "forms-bridge")}
+          aria-role="button"
+          size="compact"
+          variant="secondary"
+          onClick={() => setFailure(!failure)}
+          style={{
+            fontSize: "1.25em",
+            marginRight: "1em",
+            marginLeft: "-0.7em",
+            cursor: "pointer",
+          }}
+          __next40pxDefaultSize
+        >
+          {failure === false ? "🔴" : "🟢"}
+        </span>
+        {index + 1}. <b>{name}</b>
+        <span
+          style={{
+            display: index ? "block" : "none",
+            position: "absolute",
+            top: "50%",
+            right: "8px",
+            width: "6px",
+            height: "6px",
+            borderBottom: "1px solid #d1cfcf",
+            borderRight: "1px solid #d1cfcf",
+            transform: "translate(-50%, -50%) rotate(45deg)",
+          }}
+        ></span>
+      </p>
+      <div
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.45em",
+          padding: "0 0.45em 0 0.75em",
+        }}
+      >
+        <Button
+          size="compact"
+          variant="secondary"
+          onClick={() => move(-1)}
+          style={{ width: "32px" }}
+          disabled={!index}
+          __next40pxDefaultSize
+        >
+          <span
+            title={__("Move up", "forms-bridge")}
+            style={{ fontSize: "1.35em", marginLeft: "-4px" }}
+          >
+            ⬆
+          </span>
+        </Button>
+        <Button
+          size="compact"
+          variant="secondary"
+          onClick={() => move(+1)}
+          style={{ width: "32px" }}
+          disabled={isLast}
+          label={__("Move down", "forms-bridge")}
+          __next40pxDefaultSize
+        >
+          <span
+            title={__("Move down", "forms-bridge")}
+            style={{ fontSize: "1.35em", marginLeft: "-4px" }}
+          >
+            ⬇
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/Form/Fields.jsx

@@ -0,0 +1,42 @@
+// source
+import StagePayload from "../Workflow/Payload";
+
+const { __ } = wp.i18n;
+
+const DIFF_MOCK = {
+  enter: new Set(),
+  exit: new Set(),
+  mutated: new Set(),
+  missing: new Set(),
+};
+
+export default function FormFields({ fields }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "340px",
+      }}
+    >
+      <div style={{ borderBottom: "1px solid" }}>
+        <h2 style={{ marginTop: "5px" }}>{__("Submission", "forms-bridge")}</h2>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          height: "100%",
+          overflow: "hidden auto",
+          padding: "5px",
+        }}
+      >
+        <StagePayload
+          fields={fields}
+          mappers={[]}
+          showDiff={false}
+          diff={DIFF_MOCK}
+        />
+      </div>
+    </div>
+  );
+}