Improve ScriptQueue search scripts functionality

CHANGELOG.rst

@@ -5,13 +5,14 @@ Version History
 v5.24.6
 --------
 
-* Add unique Ids and ZoomOut button to M1M3TS `<https://github.com/lsst-ts/LOVE-frontend/pull/498>`_
+* Improve ScriptQueue search scripts functionality `<https://github.com/lsst-ts/LOVE-frontend/pull/500>`_
+* Add unique Ids and ZoomOut button to M1M3TS `<https://github.com/lsst-ts/LOVE-frontend/pull/499>`_
 * Workaround to fetch an infinite response when status is 0 `<https://github.com/lsst-ts/LOVE-frontend/pull/497>`_
 
 v5.24.5
 --------
 
-* Fix Scheduler subscription for Layout component `<https://github.com/lsst-ts/LOVE-frontend/pull/497>`_
+* Fix Scheduler subscription for Layout component `<https://github.com/lsst-ts/LOVE-frontend/pull/498>`_
 * Hotfix Add unique Id to Glycol Loop Temp Ref `<https://github.com/lsst-ts/LOVE-frontend/pull/496>`_
 
 v5.24.4

love/src/components/ScriptQueue/RecursiveScriptsTree/RecursiveScriptsTree.jsx

@@ -1,4 +1,6 @@
-import React, { useState, useCallback, memo } from 'react';
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
 import RowExpansionIcon from 'components/icons/RowExpansionIcon/RowExpansionIcon';
 import AvailableScript from '../Scripts/AvailableScript/AvailableScript';
 import styles from './RecursiveScriptsTree.module.css';
@@ -9,12 +11,11 @@ const RecursiveScriptsTree = ({
   scriptsTree,
   breadCrumb,
   scriptsBlocked = false,
+  openTree,
   launchScriptConfig = () => {},
+  setOpenTree = () => {},
 }) => {
   if (!scriptsTree) return null;
-  const [openTree, setOpenTree] = useState({});
-  const cachedLaunchScriptConfig = useCallback(launchScriptConfig, []);
-
   const recursiveKeys = Object.keys(scriptsTree).filter((key) => key !== 'root');
   const openedCategory = openTree[category] || false;
   const lastCategory = category.split('-').pop();
@@ -43,7 +44,9 @@ const RecursiveScriptsTree = ({
                 scriptsTree={scriptsTree[key]}
                 breadCrumb={breadCrumb ? breadCrumb + '/' + key : key}
                 scriptsBlocked={scriptsBlocked}
-                launchScriptConfig={cachedLaunchScriptConfig}
+                launchScriptConfig={launchScriptConfig}
+                openTree={openTree}
+                setOpenTree={setOpenTree}
               />
             );
           })}
@@ -57,7 +60,7 @@ const RecursiveScriptsTree = ({
                   key={`${scriptObject.type}-${scriptObject.path}`}
                   path={scriptObject.path}
                   isStandard={scriptObject.type ? scriptObject.type.toLowerCase() === 'standard' : true}
-                  launchScriptConfig={cachedLaunchScriptConfig}
+                  launchScriptConfig={launchScriptConfig}
                   script={scriptObject}
                   commandExecutePermission={scriptsBlocked}
                   isCompact={true}
@@ -72,4 +75,34 @@ const RecursiveScriptsTree = ({
   );
 };
 
-export default memo(RecursiveScriptsTree);
+RecursiveScriptsTree.propTypes = {
+  /** List of script lists to show */
+  availableScriptList: PropTypes.arrayOf(PropTypes.object),
+  /** Category of the script list, e.g. standard or external */
+  category: PropTypes.string,
+  /** Scripts tree hierarchy */
+  scriptsTree: PropTypes.object,
+  /** Bread crumb to show in the tree */
+  breadCrumb: PropTypes.string,
+  /** Flag to block scripts */
+  scriptsBlocked: PropTypes.bool,
+  /** Object to store which folder is open */
+  openTree: PropTypes.object,
+  /** Function to launch script configuration */
+  launchScriptConfig: PropTypes.func,
+  /** Function to set which folder is open */
+  setOpenTree: PropTypes.func,
+};
+
+function propsAreEqual(prevProps, nextProps) {
+  return (
+    isEqual(prevProps.availableScriptList, nextProps.availableScriptList) &&
+    prevProps.category === nextProps.category &&
+    isEqual(prevProps.scriptsTree, nextProps.scriptsTree) &&
+    prevProps.breadCrumb === nextProps.breadCrumb &&
+    prevProps.scriptsBlocked === nextProps.scriptsBlocked &&
+    isEqual(prevProps.openTree, nextProps.openTree)
+  );
+}
+
+export default memo(RecursiveScriptsTree, propsAreEqual);

love/src/components/ScriptQueue/ScriptQueue.jsx

@@ -9,6 +9,7 @@ import ScriptList from './Scripts/ScriptList/ScriptList';
 import CurrentScript from './Scripts/CurrentScript/CurrentScript';
 import FinishedScript from './Scripts/FinishedScript/FinishedScript';
 import DraggableScript from './Scripts/DraggableScript/DraggableScript';
+import AvailableScript from './Scripts/AvailableScript/AvailableScript';
 import styles from './ScriptQueue.module.css';
 import Loader from '../GeneralPurpose/Loader/Loader';
 import ConfigPanel from './ConfigPanel/ConfigPanel';
@@ -85,6 +86,7 @@ export default class ScriptQueue extends Component {
       resetButton: <span>Hide details &#9650;</span>,
       blockedByAuthlist: false,
       scriptsTree: {},
+      openTree: {},
     };
 
     this.observer = null;
@@ -558,6 +560,32 @@ export default class ScriptQueue extends Component {
     this.setState({ isContextMenuOpen: false });
   };
 
+  renderAvailableScript = (script) => {
+    if (!script) return null;
+    return (
+      <DraggableScript
+        key={`dragging-available-${script.type}-${script.path}`}
+        {...script}
+        dragSourceList="available"
+        onDragStart={(e, id) => this.onDragStart(e, id, 'available')}
+        onDragEnd={(e, id) => this.onDragEnd(e, id, 'available')}
+        draggingScriptInstance={this.state.draggingScriptInstance}
+        disabled={true}
+      >
+        <AvailableScript
+          key={`${script.type}-${script.path}`}
+          path={script.path}
+          isStandard={script.type ? script.type.toLowerCase() === 'standard' : true}
+          launchScriptConfig={this.launchScriptConfig}
+          script={script}
+          commandExecutePermission={this.props.commandExecutePermission && !this.state.blockedByAuthlist}
+          {...script}
+          isCompact={this.state.isAvailableScriptListVisible && this.state.isFinishedScriptListListVisible}
+        />
+      </DraggableScript>
+    );
+  };
+
   toggleAvailableScriptsExpanded = (scriptType) => {
     if (scriptType === 'standard') {
       this.setState({
@@ -577,6 +605,10 @@ export default class ScriptQueue extends Component {
     });
   };
 
+  setOpenTree = (openTree) => {
+    this.setState({ openTree });
+  };
+
   render() {
     const finishedScriptListClass = this.state.isFinishedScriptListListVisible ? '' : styles.collapsedScriptList;
     const availableScriptListClass = this.state.isAvailableScriptListVisible ? '' : styles.collapsedScriptList;
@@ -738,36 +770,57 @@ export default class ScriptQueue extends Component {
                   </div>
                 </div>
                 <ScriptList noOverflow={true}>
-                  <div className={styles.standardExternalContainer}>
+                  {this.state.availableScriptsFilter !== '' ? (
                     <div
                       className={[
                         styles.standardScriptsContainer,
                         this.state.availableScriptsStandardExpanded ? '' : styles.availableListCollapsed,
                       ].join(' ')}
                     >
-                      <RecursiveScriptsTree
-                        availableScriptList={filteredAvailableScripts}
-                        category="standard"
-                        scriptsTree={this.state.scriptsTree.standard}
-                        launchScriptConfig={this.launchScriptConfig}
-                        scriptsBlocked={this.props.commandExecutePermission && !this.state.blockedByAuthlist}
-                      />
+                      {this.props.availableScriptList.map((script) => {
+                        if (!script.path.toLowerCase().includes(this.state.availableScriptsFilter.toLowerCase()))
+                          return null;
+                        return this.renderAvailableScript(script);
+                      })}
                     </div>
-                    <div
-                      className={[
-                        styles.externalScriptsContainer,
-                        this.state.availableScriptsExternalExpanded ? '' : styles.availableListCollapsed,
-                      ].join(' ')}
-                    >
-                      <RecursiveScriptsTree
-                        availableScriptList={filteredAvailableScripts}
-                        category="external"
-                        scriptsTree={this.state.scriptsTree.external}
-                        launchScriptConfig={this.launchScriptConfig}
-                        scriptsBlocked={this.props.commandExecutePermission && !this.state.blockedByAuthlist}
-                      />
-                    </div>
-                  </div>
+                  ) : (
+                    <>
+                      <div className={styles.standardExternalContainer}>
+                        <div
+                          className={[
+                            styles.standardScriptsContainer,
+                            this.state.availableScriptsStandardExpanded ? '' : styles.availableListCollapsed,
+                          ].join(' ')}
+                        >
+                          <RecursiveScriptsTree
+                            availableScriptList={filteredAvailableScripts}
+                            category="standard"
+                            scriptsTree={this.state.scriptsTree.standard}
+                            launchScriptConfig={this.launchScriptConfig}
+                            scriptsBlocked={this.props.commandExecutePermission && !this.state.blockedByAuthlist}
+                            openTree={this.state.openTree}
+                            setOpenTree={this.setOpenTree}
+                          />
+                        </div>
+                        <div
+                          className={[
+                            styles.externalScriptsContainer,
+                            this.state.availableScriptsExternalExpanded ? '' : styles.availableListCollapsed,
+                          ].join(' ')}
+                        >
+                          <RecursiveScriptsTree
+                            availableScriptList={filteredAvailableScripts}
+                            category="external"
+                            scriptsTree={this.state.scriptsTree.external}
+                            launchScriptConfig={this.launchScriptConfig}
+                            scriptsBlocked={this.props.commandExecutePermission && !this.state.blockedByAuthlist}
+                            openTree={this.state.openTree}
+                            setOpenTree={this.setOpenTree}
+                          />
+                        </div>
+                      </div>
+                    </>
+                  )}
                 </ScriptList>
               </div>
             </div>