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
-  }), state.jsonError && /*#__PURE__*/React.createElement("p", {
+    onChange: dataOptionUpdate,
+    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
     }, {