axe-web-public
/
block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added option to generate test variations.

test-gpt-generated
Roman Axelrod 2 years ago
parent
9818067013
commit
15dbe26220
4 changed files with 127 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      layouts/scripts/dist/index.min.js
  2. 2
      layouts/scripts/dist/index.min.js.map
  3. 59
      layouts/scripts/toolbar/data-options/DataOptions.jsx
  4. 14
      layouts/scripts/toolbar/data-options/data-options.style.js

77
layouts/scripts/dist/index.min.js
View File

@ -9583,7 +9583,8 @@ const SidebarStyle = qe.div`
} }
pre, textarea { pre, textarea {
min-height: 480px; height: 100%;
//min-height: 480px;
resize: vertical; resize: vertical;
overflow-x: auto; overflow-x: auto;
padding: 0.5rem; padding: 0.5rem;
@ -9593,12 +9594,19 @@ const SidebarStyle = qe.div`
border: 1px solid #cbd5e0; border: 1px solid #cbd5e0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 0.5rem; margin: 0.5rem 0;
display: block; display: block;
white-space: pre; white-space: pre;
} }
.alert { .actions {
display: flex;
width: 100%;
justify-content: space-between;
}
.alert--error {
color: red; color: red;
} }
`; `;
@ -9892,6 +9900,7 @@ function DesignPreview({
} }
} }
const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
function DataOptions(props = {}) { function DataOptions(props = {}) {
props.rootAttributes = props.rootAttributes ?? {}; props.rootAttributes = props.rootAttributes ?? {};
const initialState = { const initialState = {
@ -9900,7 +9909,8 @@ function DataOptions(props = {}) {
dataText: '{}', dataText: '{}',
dataOptions: [], dataOptions: [],
designPreview: [], designPreview: [],
jsonError: false errorMessage: null,
loading: false
}; };
const [state, setState] = react.exports.useState(initialState); const [state, setState] = react.exports.useState(initialState);
const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview)); const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
@ -9955,7 +9965,8 @@ function DataOptions(props = {}) {
name: "data", name: "data",
id: "data-options", id: "data-options",
onChange: e => changeDataOption(e), onChange: e => changeDataOption(e),
value: state.dataName value: state.dataName,
disabled: state.loading
}, state.dataOptions.map(item => { }, state.dataOptions.map(item => {
const isSelected = state.dataName === item; const isSelected = state.dataName === item;
return /*#__PURE__*/React.createElement("option", { return /*#__PURE__*/React.createElement("option", {
@ -9964,18 +9975,60 @@ function DataOptions(props = {}) {
}, item); }, item);
}))), state.data && /*#__PURE__*/React.createElement("textarea", { }))), state.data && /*#__PURE__*/React.createElement("textarea", {
value: state.dataText, 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' 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", className: "btn btn--secondary",
disabled: state.loading,
onClick: e => copyToClipboard(e, state.data) 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 // 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) { function dataOptionUpdate(e) {
let data; let data;
try { try {
@ -9983,14 +10036,14 @@ function DataOptions(props = {}) {
} catch (err) { } catch (err) {
updateState({ updateState({
dataText: e.target.value, dataText: e.target.value,
jsonError: true errorMessage: 'Invalid JSON, please review and try again.'
}); });
return; return;
} }
updateState({ updateState({
dataText: e.target.value, dataText: e.target.value,
data, data,
jsonError: false errorMessage: null
}); });
updateIframe(data); updateIframe(data);
} }
@ -10035,7 +10088,7 @@ function DataOptions(props = {}) {
const dataOptions = await fetchDataOptions(dataName); const dataOptions = await fetchDataOptions(dataName);
updateIframe(dataOptions.data); updateIframe(dataOptions.data);
const newState = Object.assign({ const newState = Object.assign({
jsonError: false errorMessage: null
}, dataOptions, { }, dataOptions, {
dataName dataName
}, { }, {

2
layouts/scripts/dist/index.min.js.map
View File

File diff suppressed because one or more lines are too long

59
layouts/scripts/toolbar/data-options/DataOptions.jsx
View File

@ -9,6 +9,8 @@ import {
import {isClickOutside, isEscHit} from "../responsive-button/ResponsiveButton.jsx"; import {isClickOutside, isEscHit} from "../responsive-button/ResponsiveButton.jsx";
import {DesignPreview} from "./DesignPreview.jsx"; import {DesignPreview} from "./DesignPreview.jsx";
export const PRODUCTION_REGISTRY_URL = 'https://blocks-registery.axe-web.com';
function DataOptions(props = {}) { function DataOptions(props = {}) {
props.rootAttributes = props.rootAttributes ?? {}; props.rootAttributes = props.rootAttributes ?? {};
@ -18,7 +20,8 @@ function DataOptions(props = {}) {
dataText: '{}', dataText: '{}',
dataOptions: [], dataOptions: [],
designPreview: [], designPreview: [],
jsonError: false, errorMessage: null,
loading: false,
}; };
const [state, setState] = useState(initialState); const [state, setState] = useState(initialState);
@ -73,7 +76,7 @@ function DataOptions(props = {}) {
<SidebarDataOptionsStyle> <SidebarDataOptionsStyle>
<label htmlFor="data-options">Data Options</label> <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) => { {state.dataOptions.map((item) => {
const isSelected = state.dataName === item; const isSelected = state.dataName === item;
return <option value={item} selected={isSelected}>{item}</option> return <option value={item} selected={isSelected}>{item}</option>
@ -83,14 +86,21 @@ function DataOptions(props = {}) {
} }
{state.data && {state.data &&
<textarea value={state.dataText} onChange={dataOptionUpdate}/> <textarea value={state.dataText} onChange={dataOptionUpdate} disabled={state.loading}/>
}
{state.errorMessage &&
<p className={'alert alert--error'}>{state.errorMessage}</p>
} }
{state.jsonError && {state.loading &&
<p className={'alert'}>Invalid JSON entered.</p> <p className={'alert'}>Loading, please wait...</p>
} }
<button className='btn btn--secondary' onClick={(e) => copyToClipboard(e, state.data)}>Copy to Clipboard</button> <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> </SidebarStyle>
</div>; </div>;
@ -98,17 +108,48 @@ function DataOptions(props = {}) {
// Functions // 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) { function dataOptionUpdate(e) {
let data; let data;
try { try {
data = JSON.parse(e.target.value); data = JSON.parse(e.target.value);
} catch (err) { } catch (err) {
updateState({dataText: e.target.value, jsonError: true}); updateState({dataText: e.target.value, errorMessage: 'Invalid JSON, please review and try again.'});
return; return;
} }
updateState({dataText: e.target.value, data, jsonError: false}); updateState({dataText: e.target.value, data, errorMessage: null});
updateIframe(data); updateIframe(data);
} }
@ -160,7 +201,7 @@ function DataOptions(props = {}) {
const dataOptions = await fetchDataOptions(dataName); const dataOptions = await fetchDataOptions(dataName);
updateIframe(dataOptions.data); updateIframe(dataOptions.data);
const newState = Object.assign({jsonError: false}, const newState = Object.assign({errorMessage: null},
dataOptions, dataOptions,
{dataName}, {dataName},
{dataText: JSON.stringify(dataOptions.data, null, 2)}, {dataText: JSON.stringify(dataOptions.data, null, 2)},

14
layouts/scripts/toolbar/data-options/data-options.style.js
View File

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

Write Preview
Loading…
Cancel
Save