Added option to generate test variations.

layouts/scripts/dist/index.min.js

@@ -9583,7 +9583,8 @@ const SidebarStyle = qe.div`
   }
 
   pre, textarea {
-    min-height: 480px;
+    height: 100%;
+    //min-height: 480px;
     resize: vertical;
     overflow-x: auto;
     padding: 0.5rem;
@@ -9593,12 +9594,19 @@ const SidebarStyle = qe.div`
     border: 1px solid #cbd5e0;
     width: 100%;
     box-sizing: border-box;
-    margin-bottom: 0.5rem;
+    margin: 0.5rem 0;
     display: block;
     white-space: pre;
   }
 
-  .alert {
+  .actions {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+
+  .alert--error {
     color: red;
   }
 `;
@@ -9892,6 +9900,7 @@ function DesignPreview({
   }
 }
 
+const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
 function DataOptions(props = {}) {
   props.rootAttributes = props.rootAttributes ?? {};
   const initialState = {
@@ -9900,7 +9909,8 @@ function DataOptions(props = {}) {
     dataText: '{}',
     dataOptions: [],
     designPreview: [],
-    jsonError: false
+    errorMessage: null,
+    loading: false
   };
   const [state, setState] = react.exports.useState(initialState);
   const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
@@ -9955,7 +9965,8 @@ function DataOptions(props = {}) {
     name: "data",
     id: "data-options",
     onChange: e => changeDataOption(e),
-    value: state.dataName
+    value: state.dataName,
+    disabled: state.loading
   }, state.dataOptions.map(item => {
     const isSelected = state.dataName === item;
     return /*#__PURE__*/React.createElement("option", {
@@ -9964,18 +9975,60 @@ function DataOptions(props = {}) {
     }, item);
   }))), state.data && /*#__PURE__*/React.createElement("textarea", {
     value: state.dataText,
-    onChange: dataOptionUpdate
+    onChange: dataOptionUpdate,
-  }), state.jsonError && /*#__PURE__*/React.createElement("p", {
+    disabled: state.loading
+  }), state.errorMessage && /*#__PURE__*/React.createElement("p", {
+    className: 'alert alert--error'
+  }, state.errorMessage), state.loading && /*#__PURE__*/React.createElement("p", {
     className: 'alert'
-  }, "Invalid JSON entered."), /*#__PURE__*/React.createElement("button", {
+  }, "Loading, please wait..."), /*#__PURE__*/React.createElement("div", {
+    className: 'actions'
+  }, /*#__PURE__*/React.createElement("button", {
     className: "btn btn--secondary",
+    disabled: state.loading,
     onClick: e => copyToClipboard(e, state.data)
-  }, "Copy to Clipboard")));
+  }, "Copy to Clipboard"), /*#__PURE__*/React.createElement("button", {
+    className: "btn btn--secondary",
+    disabled: state.loading,
+    onClick: e => generateVariation(e, state.data)
+  }, "Generate Test"))));
 
   //
   // Functions
   //
 
+  function generateVariation() {
+    const url = PRODUCTION_REGISTRY_URL + '/content-generator/';
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+    const requestOptions = {
+      method: 'POST',
+      headers: myHeaders,
+      body: JSON.stringify({
+        json: state.data
+      })
+    };
+    updateState({
+      loading: true,
+      errorMessage: null
+    });
+    return fetch(url, requestOptions).then(response => response.json()).then(result => {
+      if (result.statusCode !== 200) {
+        throw new Error(result.message);
+      }
+      const data = result.variation;
+      updateState({
+        dataText: JSON.stringify(data, null, 2),
+        data
+      });
+      updateIframe(data);
+    }).catch(error => {
+      updateState({
+        loading: false,
+        errorMessage: 'Something went wrong, please try again.'
+      });
+    });
+  }
   function dataOptionUpdate(e) {
     let data;
     try {
@@ -9983,14 +10036,14 @@ function DataOptions(props = {}) {
     } catch (err) {
       updateState({
         dataText: e.target.value,
-        jsonError: true
+        errorMessage: 'Invalid JSON, please review and try again.'
       });
       return;
     }
     updateState({
       dataText: e.target.value,
       data,
-      jsonError: false
+      errorMessage: null
     });
     updateIframe(data);
   }
@@ -10035,7 +10088,7 @@ function DataOptions(props = {}) {
     const dataOptions = await fetchDataOptions(dataName);
     updateIframe(dataOptions.data);
     const newState = Object.assign({
-      jsonError: false
+      errorMessage: null
     }, dataOptions, {
       dataName
     }, {

layouts/scripts/dist/index.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../frame/editor.js","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction Line truncated
+{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../frame/editor.js","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction Line truncated

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -9,6 +9,8 @@ import {
 import {isClickOutside, isEscHit} from "../responsive-button/ResponsiveButton.jsx";
 import {DesignPreview} from "./DesignPreview.jsx";
 
+export const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
+
 function DataOptions(props = {}) {
   props.rootAttributes = props.rootAttributes ?? {};
 
@@ -18,7 +20,8 @@ function DataOptions(props = {}) {
     dataText: '{}',
     dataOptions: [],
     designPreview: [],
-    jsonError: false,
+    errorMessage: null,
+    loading: false,
   };
 
   const [state, setState] = useState(initialState);
@@ -73,7 +76,7 @@ function DataOptions(props = {}) {
         <SidebarDataOptionsStyle>
           <label htmlFor="data-options">Data Options</label>
 
-          <select name="data" id="data-options" onChange={(e) => changeDataOption(e)} value={state.dataName}>
+          <select name="data" id="data-options" onChange={(e) => changeDataOption(e)} value={state.dataName} disabled={state.loading}>
             {state.dataOptions.map((item) => {
               const isSelected = state.dataName === item;
               return <option value={item} selected={isSelected}>{item}</option>
@@ -83,14 +86,21 @@ function DataOptions(props = {}) {
       }
 
       {state.data &&
-        <textarea value={state.dataText} onChange={dataOptionUpdate}/>
+        <textarea value={state.dataText} onChange={dataOptionUpdate} disabled={state.loading}/>
       }
 
-      {state.jsonError &&
+      {state.errorMessage &&
-        <p className={'alert'}>Invalid JSON entered.</p>
+        <p className={'alert alert--error'}>{state.errorMessage}</p>
       }
 
-      <button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
+      {state.loading &&
+        <p className={'alert'}>Loading, please wait...</p>
+      }
+
+      <div className={'actions'}>
+        <button className='btn btn--secondary' disabled={state.loading} onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button>
+        <button className='btn btn--secondary' disabled={state.loading} onClick={(e) => generateVariation(e, state.data)}>Generate Test</button>
+      </div>
     </SidebarStyle>
   </div>;
 
@@ -98,17 +108,48 @@ function DataOptions(props = {}) {
   // Functions
   //
 
+  function generateVariation() {
+    const url = PRODUCTION_REGISTRY_URL + '/content-generator/';
+
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+
+    const requestOptions = {
+      method: 'POST',
+      headers: myHeaders,
+      body: JSON.stringify({json: state.data}),
+    };
+
+    updateState({loading: true, errorMessage: null});
+
+    return fetch(url, requestOptions)
+      .then(response => response.json())
+      .then(result => {
+        if (result.statusCode !== 200) {
+          throw new Error(result.message);
+        }
+
+        const data = result.variation;
+        updateState({dataText: JSON.stringify(data, null, 2), data});
+        updateIframe(data);
+      })
+      .catch(error => {
+        updateState({loading: false, errorMessage: 'Something went wrong, please try again.'})
+      });
+
+  }
+
   function dataOptionUpdate(e) {
     let data;
 
     try {
       data = JSON.parse(e.target.value);
     } catch (err) {
-      updateState({dataText: e.target.value, jsonError: true});
+      updateState({dataText: e.target.value, errorMessage: 'Invalid JSON, please review and try again.'});
       return;
     }
 
-    updateState({dataText: e.target.value, data, jsonError: false});
+    updateState({dataText: e.target.value, data, errorMessage: null});
     updateIframe(data);
   }
 
@@ -160,7 +201,7 @@ function DataOptions(props = {}) {
     const dataOptions = await fetchDataOptions(dataName);
     updateIframe(dataOptions.data);
 
-    const newState = Object.assign({jsonError: false},
+    const newState = Object.assign({errorMessage: null},
       dataOptions,
       {dataName},
       {dataText: JSON.stringify(dataOptions.data, null, 2)},

layouts/scripts/toolbar/data-options/data-options.style.js

@@ -25,7 +25,8 @@ export const SidebarStyle = styled.div`
   }
 
   pre, textarea {
-    min-height: 480px;
+    height: 100%;
+    //min-height: 480px;
     resize: vertical;
     overflow-x: auto;
     padding: 0.5rem;
@@ -35,12 +36,19 @@ export const SidebarStyle = styled.div`
     border: 1px solid #cbd5e0;
     width: 100%;
     box-sizing: border-box;
-    margin-bottom: 0.5rem;
+    margin: 0.5rem 0;
     display: block;
     white-space: pre;
   }
 
-  .alert {
+  .actions {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+
+  .alert--error {
     color: red;
   }
 `;