AXE-WEB/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added option to generate test variations.

Browse Source
This commit is contained in:
Roman Axelrod
2023-06-25 21:44:21 +03:00
parent 9818067013
commit 15dbe26220
4 changed files with 127 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/scripts/dist/index.min.js
Vendored
+65 -12
View File
@@ -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
}, {
layouts/scripts/dist/index.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/toolbar/data-options/DataOptions.jsx
+50 -9
View File
@@ -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
+11 -3
View File
@@ -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;
}
`;