Added option to generate test variations.

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 &&
-        <p className={'alert'}>Invalid JSON entered.</p>
+      {state.errorMessage &&
+        <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;
   }
 `;