Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 97 insertions, 74 deletions

diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index 8c65fd34e..bc19d7ad1 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -1,8 +1,9 @@
-let ReactTextareaAutocomplete = require('@webscopeio/react-textarea-autocomplete').default;
+/* eslint-disable react/button-has-type */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnAlways, returnEmptyString } from '../../../Utils';
+import { returnAlways, returnEmptyString } from '../../../ClientUtils';
 import { Doc } from '../../../fields/Doc';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
@@ -17,10 +18,14 @@ import { ContextMenu } from '../ContextMenu';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { EditableView } from '../EditableView';
 import { OverlayView } from '../OverlayView';
-import { FieldView, FieldViewProps } from '../nodes/FieldView';
+import { FieldView, FieldViewProps } from './FieldView';
 import { DocumentIconContainer } from './DocumentIcon';
 import './ScriptingBox.scss';
+import { Docs } from '../../documents/Documents';
+import { DocumentType } from '../../documents/DocumentTypes';
+
 const _global = (window /* browser */ || global) /* node */ as any;
+const ReactTextareaAutocomplete = require('@webscopeio/react-textarea-autocomplete').default;
 
 @observer
 export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -79,26 +84,24 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @computed({ keepAlive: true }) get rawScript() {
         return ScriptCast(this.dataDoc[this.fieldKey])?.script.originalScript ?? '';
     }
-    @computed({ keepAlive: true }) get functionName() {
-        return StrCast(this.dataDoc[this.fieldKey + '-functionName'], '');
-    }
-    @computed({ keepAlive: true }) get functionDescription() {
-        return StrCast(this.dataDoc[this.fieldKey + '-functionDescription'], '');
-    }
-    @computed({ keepAlive: true }) get compileParams() {
-        return Cast(this.dataDoc[this.fieldKey + '-params'], listSpec('string'), []);
-    }
-
     set rawScript(value) {
         this.dataDoc[this.fieldKey] = new ScriptField(undefined, undefined, value);
     }
+    @computed({ keepAlive: true }) get functionName() {
+        return StrCast(this.dataDoc[this.fieldKey + '-functionName'], '');
+    }
     set functionName(value) {
         this.dataDoc[this.fieldKey + '-functionName'] = value;
     }
+    @computed({ keepAlive: true }) get functionDescription() {
+        return StrCast(this.dataDoc[this.fieldKey + '-functionDescription'], '');
+    }
     set functionDescription(value) {
         this.dataDoc[this.fieldKey + '-functionDescription'] = value;
     }
-
+    @computed({ keepAlive: true }) get compileParams() {
+        return Cast(this.dataDoc[this.fieldKey + '-params'], listSpec('string'), []);
+    }
     set compileParams(value) {
         this.dataDoc[this.fieldKey + '-params'] = new List<string>(value);
     }
@@ -107,9 +110,8 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         if (typeof result === 'object') {
             const text = descrip ? result[1] : result[2];
             return text !== undefined ? text : '';
-        } else {
-            return '';
         }
+        return '';
     }
 
     onClickScriptDisable = returnAlways;
@@ -118,19 +120,18 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     componentDidMount() {
         this._props.setContentViewBox?.(this);
         this.rawText = this.rawScript;
-        const observer = new _global.ResizeObserver(
-            action((entries: any) => {
+        const resizeObserver = new _global.ResizeObserver(
+            action(() => {
                 const area = document.querySelector('textarea');
                 if (area) {
-                    for (const {} of entries) {
-                        const getCaretCoordinates = require('textarea-caret');
-                        const caret = getCaretCoordinates(area, this._selection);
-                        this.resetSuggestionPos(caret);
-                    }
+                    // eslint-disable-next-line global-require
+                    const getCaretCoordinates = require('textarea-caret');
+                    const caret = getCaretCoordinates(area, this._selection);
+                    this.resetSuggestionPos(caret);
                 }
             })
         );
-        observer.observe(document.getElementsByClassName('scriptingBox-outerDiv')[0]);
+        resizeObserver.observe(document.getElementsByClassName('scriptingBox-outerDiv')[0]);
     }
 
     @action
@@ -138,12 +139,12 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         if (!this._suggestionRef.current || !this._scriptTextRef.current) return;
         const suggestionWidth = this._suggestionRef.current.offsetWidth;
         const scriptWidth = this._scriptTextRef.current.offsetWidth;
-        const top = caret.top;
-        const x = this.dataDoc.x;
-        let left = caret.left;
+        const { top } = caret;
+        const { x } = this.dataDoc;
+        let { left } = caret;
         if (left + suggestionWidth > x + scriptWidth) {
             const diff = left + suggestionWidth - (x + scriptWidth);
-            left = left - diff;
+            left -= diff;
         }
 
         this._suggestionBoxX = left;
@@ -155,7 +156,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     }
 
     protected createDashEventsTarget = (ele: HTMLDivElement, dropFunc: (e: Event, de: DragManager.DropEvent) => void) => {
-        //used for stacking and masonry view
+        // used for stacking and masonry view
         if (ele) {
             this.dropDisposer?.();
             this.dropDisposer = DragManager.MakeDropTarget(ele, dropFunc, this.layoutDoc);
@@ -164,7 +165,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     // only included in buttons, transforms scripting UI to a button
     @action
-    onFinish = () => (this.layoutDoc.layout_fieldKey = 'layout');
+    onFinish = () => {
+        this.layoutDoc.layout_fieldKey = 'layout';
+    };
 
     // displays error message
     @action
@@ -176,7 +179,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @action
     onCompile = () => {
         const params: ScriptParam = {};
-        this.compileParams.forEach(p => (params[p.split(':')[0].trim()] = p.split(':')[1].trim()));
+        this.compileParams.forEach(p => {
+            params[p.split(':')[0].trim()] = p.split(':')[1].trim();
+        });
 
         const result = !this.rawText.trim()
             ? ({ compiled: false, errors: undefined } as any)
@@ -196,7 +201,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     onRun = () => {
         if (this.onCompile()) {
             const bindings: { [name: string]: any } = {};
-            this.paramsNames.forEach(key => (bindings[key] = this.dataDoc[key]));
+            this.paramsNames.forEach(key => {
+                bindings[key] = this.dataDoc[key];
+            });
             // binds vars so user doesnt have to refer to everything as this.<var>
             ScriptCast(this.dataDoc[this.fieldKey], null)?.script.run({ ...bindings, this: this.Document }, this.onError);
         }
@@ -247,7 +254,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
         this.dataDoc.name = this.functionName;
         this.dataDoc.description = this.functionDescription;
-        //this.dataDoc.parameters = this.compileParams;
+        // this.dataDoc.parameters = this.compileParams;
         this.dataDoc.script = this.rawScript;
 
         ScriptManager.Instance.addScript(this.dataDoc);
@@ -255,6 +262,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         this._scriptKeys = ScriptingGlobals.getGlobals();
         this._scriptingDescriptions = ScriptingGlobals.getDescriptions();
         this._scriptingParams = ScriptingGlobals.getParameters();
+        return undefined;
     };
 
     // overlays document numbers (ex. d32) over all documents when clicked on
@@ -267,7 +275,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @action
     onDrop = (e: Event, de: DragManager.DropEvent, fieldKey: string) => {
         if (de.complete.docDragData) {
-            de.complete.docDragData.droppedDocuments.forEach(doc => (this.dataDoc[fieldKey] = doc));
+            de.complete.docDragData.droppedDocuments.forEach(doc => {
+                this.dataDoc[fieldKey] = doc;
+            });
             e.stopPropagation();
             return true;
         }
@@ -285,8 +295,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     // sets field of the param name to the selected value in drop down box
     @action
     viewChanged = (e: React.ChangeEvent, name: string) => {
-        //@ts-ignore
-        const val = e.target.selectedOptions[0].value;
+        const val = (e.target as any).selectedOptions[0].value;
         this.dataDoc[name] = val[0] === 'S' ? val.substring(1) : val[0] === 'N' ? parseInt(val.substring(1)) : val.substring(1) === 'true';
     };
 
@@ -306,8 +315,26 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     renderFunctionInputs() {
-        const descriptionInput = <textarea className="scriptingBox-textarea-inputs" onChange={e => (this.functionDescription = e.target.value)} placeholder="enter description here" value={this.functionDescription} />;
-        const nameInput = <textarea className="scriptingBox-textarea-inputs" onChange={e => (this.functionName = e.target.value)} placeholder="enter name here" value={this.functionName} />;
+        const descriptionInput = (
+            <textarea
+                className="scriptingBox-textarea-inputs"
+                onChange={e => {
+                    this.functionDescription = e.target.value;
+                }}
+                placeholder="enter description here"
+                value={this.functionDescription}
+            />
+        );
+        const nameInput = (
+            <textarea
+                className="scriptingBox-textarea-inputs"
+                onChange={e => {
+                    this.functionName = e.target.value;
+                }}
+                placeholder="enter name here"
+                value={this.functionName}
+            />
+        );
 
         return (
             <div className="scriptingBox-inputDiv" onPointerDown={e => this._props.isSelected() && e.stopPropagation()}>
@@ -339,7 +366,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         return (
             <div className="scriptingBox-paramInputs" onFocus={this.onFocus} onBlur={() => this._overlayDisposer?.()} ref={ele => ele && this.createDashEventsTarget(ele, (e, de) => this.onDrop(e, de, parameter))}>
                 <EditableView
-                    display={'block'}
+                    display="block"
                     maxHeight={72}
                     height={35}
                     fontSize={14}
@@ -371,7 +398,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         return (
             <div className="scriptingBox-paramInputs" style={{ overflowY: 'hidden' }}>
                 <EditableView
-                    display={'block'}
+                    display="block"
                     maxHeight={72}
                     height={35}
                     fontSize={14}
@@ -404,6 +431,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             onChange={e => this.viewChanged(e, parameter)}
                             value={typeof this.dataDoc[parameter] === 'string' ? 'S' + StrCast(this.dataDoc[parameter]) : typeof this.dataDoc[parameter] === 'number' ? 'N' + NumCast(this.dataDoc[parameter]) : 'B' + BoolCast(this.dataDoc[parameter])}>
                             {types.map((type, i) => (
+                                // eslint-disable-next-line react/no-array-index-key
                                 <option key={i} className="scriptingBox-viewOption" value={(typeof type === 'string' ? 'S' : typeof type === 'number' ? 'N' : 'B') + type}>
                                     {' '}
                                     {type.toString()}{' '}
@@ -496,6 +524,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     @action
     suggestionPos = () => {
+        // eslint-disable-next-line global-require
         const getCaretCoordinates = require('textarea-caret');
         const This = this;
         document.querySelector('textarea')?.addEventListener('input', function () {
@@ -509,7 +538,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     keyHandler(e: any, pos: number) {
         e.stopPropagation();
         if (this._lastChar === 'Enter') {
-            this.rawText = this.rawText + ' ';
+            this.rawText += ' ';
         }
         if (e.key === '(') {
             this.suggestionPos();
@@ -524,20 +553,18 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             }
         } else if (e.key === ')') {
             this._paramSuggestion = false;
-        } else {
-            if (e.key === 'Backspace') {
-                if (this._lastChar === '(') {
-                    this._paramSuggestion = false;
-                } else if (this._lastChar === ')') {
-                    if (this.rawText.slice(0, this.rawText.length - 1).split('(').length - 1 > this.rawText.slice(0, this.rawText.length - 1).split(')').length - 1) {
-                        if (this._scriptParamsText.length > 0) {
-                            this._paramSuggestion = true;
-                        }
+        } else if (e.key === 'Backspace') {
+            if (this._lastChar === '(') {
+                this._paramSuggestion = false;
+            } else if (this._lastChar === ')') {
+                if (this.rawText.slice(0, this.rawText.length - 1).split('(').length - 1 > this.rawText.slice(0, this.rawText.length - 1).split(')').length - 1) {
+                    if (this._scriptParamsText.length > 0) {
+                        this._paramSuggestion = true;
                     }
                 }
-            } else if (this.rawText.split('(').length - 1 <= this.rawText.split(')').length - 1) {
-                this._paramSuggestion = false;
             }
+        } else if (this.rawText.split('(').length - 1 <= this.rawText.split(')').length - 1) {
+            this._paramSuggestion = false;
         }
         this._lastChar = e.key === 'Backspace' ? this.rawText[this.rawText.length - 2] : e.key;
 
@@ -559,9 +586,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
             parameters.forEach((element: string, i: number) => {
                 if (i < numEntered - 1) {
-                    first = first + element;
+                    first += element;
                 } else if (i > numEntered - 1) {
-                    last = last + element;
+                    last += element;
                 }
             });
 
@@ -598,16 +625,16 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     placeholder="write your script here"
                     onFocus={this.onFocus}
                     onBlur={() => this._overlayDisposer?.()}
-                    onChange={action((e: any) => (this.rawText = e.target.value))}
+                    onChange={action((e: any) => {
+                        this.rawText = e.target.value;
+                    })}
                     value={this.rawText}
-                    movePopupAsYouType={true}
+                    movePopupAsYouType
                     loadingComponent={() => <span>Loading</span>}
                     trigger={{
                         ' ': {
                             dataProvider: (token: any) => this.handleToken(token),
-                            component: (blob: any) => {
-                                return this.renderFuncListElement(blob.entity);
-                            },
+                            component: (blob: any) => this.renderFuncListElement(blob.entity),
                             output: (item: any, trigger: any) => {
                                 this._spaced = true;
                                 return trigger + item.trim();
@@ -615,9 +642,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         },
                         '.': {
                             dataProvider: (token: any) => this.handleToken(token),
-                            component: (blob: any) => {
-                                return this.renderFuncListElement(blob.entity);
-                            },
+                            component: (blob: any) => this.renderFuncListElement(blob.entity),
                             output: (item: any, trigger: any) => {
                                 this._spaced = true;
                                 return trigger + item.trim();
@@ -653,16 +678,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         // params box on bottom
         const parameterInput = (
             <div className="scriptingBox-params">
-                <EditableView
-                    display={'block'}
-                    maxHeight={72}
-                    height={35}
-                    fontSize={22}
-                    contents={''}
-                    GetValue={returnEmptyString}
-                    SetValue={value => (value && value !== ' ' ? this.compileParam(value) : false)}
-                    placeholder={'enter parameters here'}
-                />
+                <EditableView display="block" maxHeight={72} height={35} fontSize={22} contents="" GetValue={returnEmptyString} SetValue={value => (value && value !== ' ' ? this.compileParam(value) : false)} placeholder="enter parameters here" />
             </div>
         );
 
@@ -670,13 +686,14 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const definedParameters = !this.compileParams.length ? null : (
             <div className="scriptingBox-plist" style={{ width: '30%' }}>
                 {this.compileParams.map((parameter, i) => (
+                    // eslint-disable-next-line react/no-array-index-key
                     <div key={i} className="scriptingBox-pborder" onKeyDown={e => e.key === 'Enter' && this._overlayDisposer?.()}>
                         <EditableView
-                            display={'block'}
+                            display="block"
                             maxHeight={72}
                             height={35}
                             fontSize={12}
-                            background-color={'beige'}
+                            background-color="beige"
                             contents={parameter}
                             GetValue={() => parameter}
                             SetValue={value => (value && value !== ' ' ? this.compileParam(value, i) : this.onDelete(i))}
@@ -749,6 +766,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 {!this.compileParams.length || !this.paramsNames ? null : (
                     <div className="scriptingBox-plist">
                         {this.paramsNames.map((parameter: string, i: number) => (
+                            // eslint-disable-next-line react/no-array-index-key
                             <div key={i} className="scriptingBox-pborder" onKeyDown={e => e.key === 'Enter' && this._overlayDisposer?.()}>
                                 <div className="scriptingBox-wrapper" style={{ maxHeight: '40px' }}>
                                     <div className="scriptingBox-paramNames"> {`${parameter}:${this.paramsTypes[i]} = `} </div>
@@ -829,3 +847,8 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         );
     }
 }
+
+Docs.Prototypes.TemplateMap.set(DocumentType.SCRIPTING, {
+    layout: { view: ScriptingBox, dataField: 'data' },
+    options: { acl: '', systemIcon: 'BsFileEarmarkCodeFill' },
+});