From 2b3a86ba1090bdd14fd4b64a339112481157b4f1 Mon Sep 17 00:00:00 2001 From: Sebastian Aranda Sanchez Date: Fri, 29 Nov 2024 17:09:32 -0300 Subject: [PATCH 1/2] Extend ScriptQueue ConfigPanel component to load scripts schemas on demand. --- .../ScriptQueue/ConfigPanel/ConfigPanel.jsx | 56 +++++++++++++++---- .../ConfigPanel/ConfigPanel.module.css | 14 ++++- .../ScriptQueue/ScriptQueue.container.jsx | 4 +- .../components/ScriptQueue/ScriptQueue.jsx | 4 +- love/src/redux/actions/ws.js | 3 +- 5 files changed, 62 insertions(+), 19 deletions(-) diff --git a/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.jsx b/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.jsx index 33bd4d245..f32149f3e 100644 --- a/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.jsx +++ b/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.jsx @@ -144,6 +144,7 @@ export default class ConfigPanel extends Component { formData: {}, updatingScriptSchema: false, queueToTop: false, + updatingConfigScriptSchema: false, }; } @@ -465,10 +466,20 @@ export default class ConfigPanel extends Component { }; onReloadSchema = () => { + if (!this.props.configPanel?.script) return; + this.setState({ updatingConfigScriptSchema: true }); const { script } = this.props.configPanel ?? {}; const path = script.path; const isStandard = script.type === 'standard'; - this.props.reloadSchema(path, isStandard); + const schemaAlreadyPresent = this.props.configPanel?.configSchema !== ''; + this.props.reloadSchema(path, isStandard, () => { + // If schema is already present rely on the callback to dismiss the spinner. + // This is a workaround to avoid having the spinner present for ever + // if the schema doesn't change after executing the reload. + if (schemaAlreadyPresent) { + this.setState({ updatingConfigScriptSchema: false }); + } + }); }; startResizingWithMouse = (ev) => { @@ -665,6 +676,21 @@ export default class ConfigPanel extends Component { }; componentDidUpdate = (prevProps, prevState) => { + if (this.props.configPanel?.name && this.props.configPanel?.name !== prevProps.configPanel?.name) { + // If there is a new script to configure, reload the schema in the case the schema is not already present + if (!this.props.configPanel.configSchema) { + this.onReloadSchema(); + } + } + + if ( + prevState.updatingConfigScriptSchema && + prevProps.configPanel?.configSchema !== this.props.configPanel?.configSchema + ) { + // If the schema was updated, change the state to dismiss the spinner + this.setState({ updatingConfigScriptSchema: false }); + } + if ( this.props.configPanel?.script?.path && prevProps.configPanel?.script?.path !== this.props.configPanel?.script?.path @@ -695,7 +721,10 @@ export default class ConfigPanel extends Component { }); } - if (this.state.value !== prevState.value) { + if ( + this.state.value !== prevState.value || + this.props.configPanel?.configSchema !== prevProps.configPanel?.configSchema + ) { this.validateConfig(this.state.value, true); } @@ -814,16 +843,19 @@ export default class ConfigPanel extends Component { )} {showSchema && ( - +
+ + {this.state.updatingConfigScriptSchema && } +
)} {showSchema && ( diff --git a/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.module.css b/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.module.css index fd5a37762..6924e99cd 100644 --- a/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.module.css +++ b/love/src/components/ScriptQueue/ConfigPanel/ConfigPanel.module.css @@ -510,13 +510,23 @@ fieldset p { .refreshSchemaSection { display: flex; align-items: center; - margin-left: var(--content-padding); margin-bottom: var(--small-padding); } -.refreshSchemaSection svg { +.refreshSchemaSection button { + display: flex; + align-items: center; + margin-left: var(--content-padding); +} + +.refreshSchemaSection button svg { width: 1.5em; height: 1.5em; margin-right: 0.5em; fill: var(--second-primary-background-color); } + +.refreshSchemaSection > svg { + width: 1.5em; + height: 1.5em; +} diff --git a/love/src/components/ScriptQueue/ScriptQueue.container.jsx b/love/src/components/ScriptQueue/ScriptQueue.container.jsx index 50a3da647..c346fbbaa 100644 --- a/love/src/components/ScriptQueue/ScriptQueue.container.jsx +++ b/love/src/components/ScriptQueue/ScriptQueue.container.jsx @@ -130,11 +130,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { unsubscribeToStreams: () => { subscriptions.forEach((stream) => dispatch(removeGroup(stream))); }, - requestSALCommand: (cmd) => { + requestSALCommand: (cmd, callback) => { if (cmd.csc === 'Script') { return dispatch(requestSALCommand({ ...cmd, component: 'Script', salindex: 0 })); } - return dispatch(requestSALCommand({ ...cmd, component: 'ScriptQueue', salindex: ownProps.salindex })); + return dispatch(requestSALCommand({ ...cmd, component: 'ScriptQueue', salindex: ownProps.salindex }, callback)); }, }; }; diff --git a/love/src/components/ScriptQueue/ScriptQueue.jsx b/love/src/components/ScriptQueue/ScriptQueue.jsx index 6729d0b03..39122b7a0 100644 --- a/love/src/components/ScriptQueue/ScriptQueue.jsx +++ b/love/src/components/ScriptQueue/ScriptQueue.jsx @@ -423,7 +423,7 @@ export default class ScriptQueue extends Component { this.closeConfigPanel(); }; - reloadSchema = (path, isStandard) => { + reloadSchema = (path, isStandard, callback) => { const payload = { component: 'ScriptQueue', salindex: this.props.salindex, @@ -433,7 +433,7 @@ export default class ScriptQueue extends Component { isStandard, }, }; - this.props.requestSALCommand(payload); + this.props.requestSALCommand(payload, callback); }; closeConfigPanel = () => { diff --git a/love/src/redux/actions/ws.js b/love/src/redux/actions/ws.js index 77bd54e03..1a5d06822 100644 --- a/love/src/redux/actions/ws.js +++ b/love/src/redux/actions/ws.js @@ -421,7 +421,7 @@ export const updateLastSALCommandStatus = (status, statusCode, result) => { * via an HTTP request through the LOVE-manager. * */ -export const requestSALCommand = (data) => { +export const requestSALCommand = (data, callback) => { return (dispatch, getState) => { const url = `${ManagerInterface.getApiBaseUrl()}cmd/`; const commandID = `${Date.now()}-${data.cmd}`; @@ -455,6 +455,7 @@ export const requestSALCommand = (data) => { })); }) .then(({ statusCode, data }) => { + if (callback) callback(); dispatch(updateLastSALCommandStatus(SALCommandStatus.ACK, statusCode, data?.ack)); }); }; From c9c91f589edffc6d0592873ac7b88e51d62358f2 Mon Sep 17 00:00:00 2001 From: Sebastian Aranda Sanchez Date: Wed, 18 Dec 2024 19:05:27 -0300 Subject: [PATCH 2/2] Update CHANGELOG. --- CHANGELOG.rst | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 0dbedad62..90e1316b4 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -2,6 +2,11 @@ Version History =============== +v6.5.0 +------ + +* Extend ScriptQueue ConfigPanel component to load scripts schemas on demand. ``_ + v6.4.1 ------