wip - code changes to lab4

Signed-off-by: Luciano Resende <[email protected]>

package.json

@@ -52,8 +52,8 @@
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.170",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "~17.0.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "~18.0.9",
     "@typescript-eslint/eslint-plugin": "~6.13.2",
     "@typescript-eslint/parser": "~6.13.2",
     "cypress": "^6.2.0",
@@ -83,5 +83,6 @@
     "typedoc-plugin-mdn-links": "^3.0.3",
     "typescript": "~5.1.6",
     "webpack": "^5.76.1"
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/code-viewer/src/CodeViewerWidget.ts

@@ -39,14 +39,12 @@ export class CodeViewerWidget extends Widget {
   static getCodeViewer(
     options: CodeViewerWidget.INoModelOptions,
   ): CodeViewerWidget {
-    const model = new CodeEditor.Model({
-      value: options.content,
-      mimeType: options.mimeType,
-    });
+    const model = new CodeEditor.Model({ mimeType: options.mimeType });
+    model.sharedModel.source = options.content;
     return new CodeViewerWidget({ factory: options.factory, model });
   }
 
-  getContent = (): string => this.model.value.text;
+  getContent = (): string => this.model.sharedModel.getSource();
   getMimeType = (): string => this.model.mimeType;
 
   model: CodeEditor.IModel;
@@ -69,7 +67,7 @@ export namespace CodeViewerWidget {
     /**
      * The content model for the viewer.
      */
-    model: CodeEditor.Model;
+    model: CodeEditor.IModel;
   }
 
   /**

packages/pipeline-editor/package.json

@@ -86,8 +86,8 @@
   "devDependencies": {
     "@types/jest": "^23.3.11",
     "@types/node": "^12.0.10",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@types/uuid": "^3.4.7",
     "cheerio": "^1.0.0-rc.3",
     "jest": "^24.7.1",
@@ -99,7 +99,7 @@
     "typescript": "~5.1.6"
   },
   "resolutions": {
-    "@types/react": "17.0.0"
+    "@types/react": "18.0.26"
   },
   "publishConfig": {
     "access": "public"

packages/script-editor/src/ScriptEditor.tsx

@@ -100,7 +100,7 @@ export abstract class ScriptEditor extends DocumentWidget<
     this._kernelSelectionChanged = new Signal<this, string>(this);
 
     // Add icon to main tab
-    this.title.icon = this.getIcon();
+    this.title.icon = this.model.getIcon();
 
     // Add toolbar widgets
     const saveButton = new ToolbarButton({
@@ -325,14 +325,14 @@ export abstract class ScriptEditor extends DocumentWidget<
       this.createScrollButtons(this.scrollingWidget);
       this.dockPanel?.addWidget(this.scrollingWidget, { mode: 'split-bottom' });
 
-      const outputTab = this.dockPanel?.tabBars().next();
+      const outputTab = this.dockPanel?.tabBars().next().value;
       if (outputTab !== undefined) {
         outputTab.id = 'tab-ScriptEditor-output';
         if (outputTab.currentTitle !== null) {
           outputTab.currentTitle.label = 'Console Output';
           outputTab.currentTitle.closable = true;
         }
-        outputTab.disposed.connect((sender, args) => {
+        outputTab.disposed.connect(() => {
           this.interruptRun();
           this.clearOutputArea();
         }, this);

packages/ui-components/src/BrowseFileDialog.tsx

@@ -143,13 +143,11 @@ class BrowseFileDialog
   }
 
   getValue(): any {
-    const itemsIter = this.directoryListing.selectedItems();
     const selected = [];
-    let item = null;
 
-    while ((item = itemsIter.next()) !== undefined) {
+    for (const item of this.directoryListing.selectedItems()) {
       if (this.includeDir || item.type !== 'directory') {
-        selected.push(item);
+        selected.push(item.path);
       }
     }
 

packages/ui-components/src/Dropzone.tsx

@@ -13,16 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { IDragEvent } from '@lumino/dragdrop';
+import { Drag } from '@lumino/dragdrop';
 import React, { useCallback, useEffect, useRef } from 'react';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   interface HTMLElementEventMap {
-    'lm-dragenter': IDragEvent;
-    'lm-dragleave': IDragEvent;
-    'lm-dragover': IDragEvent;
-    'lm-drop': IDragEvent;
+    'lm-dragenter': Drag.Event;
+    'lm-dragleave': Drag.Event;
+    'lm-dragover': Drag.Event;
+    'lm-drop': Drag.Event;
   }
 }
 
@@ -31,10 +31,10 @@ interface IRootProps {
 }
 
 interface IProps {
-  onDragEnter?: (e: IDragEvent) => any;
-  onDragLeave?: (e: IDragEvent) => any;
-  onDragOver?: (e: IDragEvent) => any;
-  onDrop?: (e: IDragEvent) => any;
+  onDragEnter?: (e: Drag.Event) => any;
+  onDragLeave?: (e: Drag.Event) => any;
+  onDragOver?: (e: Drag.Event) => any;
+  onDrop?: (e: Drag.Event) => any;
 }
 
 interface IReturn {
@@ -45,7 +45,7 @@ export const useDropzone = (props: IProps): IReturn => {
   const rootRef = useRef<HTMLDivElement>(null);
 
   const handleEvent = useCallback(
-    (e: IDragEvent): void => {
+    (e: Drag.Event): void => {
       e.preventDefault();
       e.stopPropagation();
       switch (e.type) {