Extend ScriptQueue ConfigPanel component to load scripts schemas on demand.

CHANGELOG.rst

@@ -2,6 +2,11 @@
 Version History
 ===============
 
+v6.5.0
+------
+
+* Extend ScriptQueue ConfigPanel component to load scripts schemas on demand. `<https://github.com/lsst-ts/LOVE-frontend/pull/680>`_
+
 v6.4.1
 ------
 

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 && (
-                <Button
-                  title="Send command to reload schema"
-                  className={styles.refreshSchemaSection}
-                  onClick={this.onReloadSchema}
-                  size="extra-small"
-                  command
-                >
-                  <RefreshIcon />
-                  Reload schema
-                </Button>
+                <div className={styles.refreshSchemaSection}>
+                  <Button
+                    title="Send command to reload schema"
+                    onClick={this.onReloadSchema}
+                    size="extra-small"
+                    disabled={this.state.updatingConfigScriptSchema}
+                    command
+                  >
+                    <RefreshIcon />
+                    Reload schema
+                  </Button>
+                  {this.state.updatingConfigScriptSchema && <SpinnerIcon />}
+                </div>
               )}
 
               {showSchema && (

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;
+}

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));
     },
   };
 };

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 = () => {

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));
       });
   };