V3 Upgrade

.github/workflows/build_test.yml

@@ -63,7 +63,7 @@ jobs:
       - name: '[Prep 5] Setup Node'
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18
 
       - name: '[Setup] NodeJS project setup'
         uses: zowe-actions/nodejs-actions/setup@main

.github/workflows/code_scan.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install
         run: npm install --no-audit

package.json

@@ -11,54 +11,54 @@
     "url": "https://github.com/zowe/zlux-file-explorer.git"
   },
   "scripts": {
-    "start": "webpack --progress --colors --watch",
-    "build": "webpack --progress --colors",
+    "start": "webpack --progress --watch",
+    "build": "webpack --progress",
     "lint": "ng lint"
   },
   "license": "EPL-2.0",
   "publishConfig": {
     "registry": "https://zowe.jfrog.io/zowe/api/npm/npm-local-release/"
   },
   "dependencies": {
-    "@angular/animations": "12.0.0",
-    "@angular/cdk": "12.0.0",
-    "@angular/common": "12.0.0",
-    "@angular/compiler": "12.0.0",
-    "@angular/core": "12.0.0",
-    "@angular/forms": "12.0.0",
-    "@angular/material": "12.0.0",
-    "@angular/platform-browser": "12.0.0",
-    "@angular/router": "12.0.0",
-    "carbon-components": "8.23.1",
-    "primeng": "6.1.7",
-    "lodash": "4.17.21"
+    "@angular/animations": "~18.0.0",
+    "@angular/cdk": "~18.0.0",
+    "@angular/common": "~18.0.0",
+    "@angular/compiler": "~18.0.0",
+    "@angular/core": "~18.0.0",
+    "@angular/forms": "~18.0.0",
+    "@angular/material": "~18.0.0",
+    "@angular/platform-browser": "~18.0.0",
+    "@angular/router": "~18.0.0",
+    "carbon-components": "~10.58.15",
+    "primeng": "~17.18.10",
+    "lodash": "~4.17.21"
   },
   "devDependencies": {
-    "angular2-template-loader": "0.6.2",
-    "clean-webpack-plugin": "3.0.0",
-    "codelyzer": "6.0.2",
-    "copy-webpack-plugin": "6.4.1",
-    "css-loader": "3.6.0",
-    "exports-loader": "0.7.0",
-    "file-loader": "4.3.0",
-    "html-loader": "0.5.5",
-    "html-webpack-plugin": "3.2.0",
-    "mini-css-extract-plugin": "1.6.0",
-    "sass": "1.26.0",
-    "rxjs": "6.6.0",
-    "source-map-loader": "1.1.3",
-    "style-loader": "1.3.0",
-    "sass-loader": "8.0.0",
-    "streamsaver": "2.0.5",
-    "ts-loader": "8.3.0",
-    "tslint": "5.10.0",
-    "typescript": "4.2.2",
-    "url-loader": "2.3.0",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.12",
-    "webpack-config": "7.5.0",
+    "angular2-template-loader": "~0.6.2",
+    "clean-webpack-plugin": "~4.0.0",
+    "codelyzer": "~6.0.2",
+    "copy-webpack-plugin": "~11.0.0",
+    "css-loader": "~6.8.1",
+    "exports-loader": "~3.1.0",
+    "file-loader": "~6.2.0",
+    "html-loader": "~4.2.0",
+    "html-webpack-plugin": "~5.5.0",
+    "mini-css-extract-plugin": "~2.9.1",
+    "sass": "~1.26.0",
+    "rxjs": "~7.8.1",
+    "source-map-loader": "~3.0.0",
+    "style-loader": "~4.0.0",
+    "sass-loader": "~8.0.0",
+    "streamsaver": "~2.0.6",
+    "ts-loader": "~9.2.2",
+    "tslint": "~6.1.0",
+    "typescript": "~5.4.5",
+    "url-loader": "~3.0.0",
+    "webpack": "~5.92.0",
+    "webpack-cli": "~5.1.4",
+    "webpack-config": "~7.5.0",
     "@zlux/widgets": "git+https://github.com/zowe/zlux-widgets.git#feature/upgrade-angular",
-    "web-streams-polyfill": "2.1.1",
-    "zone.js": "0.11.4"
+    "web-streams-polyfill": "~4.0.0",
+    "zone.js": "~0.14.4"
   }
 }

src/app/components/file-ownership-modal/file-ownership-modal.component.ts

@@ -14,7 +14,8 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { defaultSnackbarOptions } from '../../shared/snackbar-options';
-import { finalize, catchError, map } from "rxjs/operators";
+import { finalize } from "rxjs/operators";
+import { throwError } from 'rxjs';
 
 @Component({
   selector: 'file-ownership-modal',
@@ -132,7 +133,7 @@ export class FileOwnershipModal {
     console.error(error.message || error);
     this.snackBar.open(error.status + " - A problem was encountered: " + error._body, 
             'Dismiss', defaultSnackbarOptions);
-    return Observable.throw(error.message || error);
+    return throwError(() => new Error(error.message || error));
   }
 }
 

src/app/components/filebrowsermvs/filebrowsermvs.component.ts

@@ -14,8 +14,8 @@
 import { Component, ElementRef, OnInit, ViewEncapsulation, OnDestroy, Input, EventEmitter, Output, Inject, Optional, ViewChild } from '@angular/core';
 import { take, finalize, debounceTime } from 'rxjs/operators';
 import { ProjectStructure, DatasetAttributes, Member } from '../../structures/editor-project';
-import { Angular2InjectionTokens, Angular2PluginWindowActions, ContextMenuItem } from 'pluginlib/inject-resources';
-import { TreeNode } from 'primeng/primeng';
+import { Angular2InjectionTokens, Angular2PluginWindowActions, ContextMenuItem } from '../../../../../zlux-app-manager/virtual-desktop/src/pluginlib/inject-resources';
+import { TreeNode } from 'primeng/api';
 import { DownloaderService } from '../../services/downloader.service';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';

src/app/components/filebrowseruss/filebrowseruss.component.ts

@@ -17,7 +17,7 @@ import {
 import { FormControl } from '@angular/forms'
 import { Observable, of, Subscription } from 'rxjs';
 import { catchError, debounceTime, finalize, map, timeout } from 'rxjs/operators';
-import { Angular2InjectionTokens, Angular2PluginWindowActions, ContextMenuItem } from 'pluginlib/inject-resources';
+import { Angular2InjectionTokens, Angular2PluginWindowActions, ContextMenuItem } from '../../../../../zlux-app-manager/virtual-desktop/src/pluginlib/inject-resources';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { FilePropertiesModal } from '../file-properties-modal/file-properties-modal.component';

src/app/components/tree/tree.component.ts

@@ -11,7 +11,7 @@
 
 declare var require:any;
 import { Component, Input, Output, EventEmitter, ViewEncapsulation, ElementRef, ViewChild, AfterContentInit, OnDestroy} from '@angular/core';
-import { TreeNode } from 'primeng/primeng';
+import { TreeNode } from 'primeng/api';
 import { FileTreeNode } from '../../structures/child-event';
 import { FileNode } from '../../structures/file-node';
 /**

src/app/components/zlux-file-tree/zlux-file-tree.component.ts

@@ -20,7 +20,10 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ContextMenuModule, TreeModule, MenuModule, DialogModule } from 'primeng/primeng';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { TreeModule } from 'primeng/tree';
+import { MenuModule } from 'primeng/menu';
+import { DialogModule } from 'primeng/dialog';
 import { TreeComponent } from '../tree/tree.component';
 import { ZluxTabbingModule } from '@zlux/widgets';
 // import {FileContents} from '../../structures/filecontents';
@@ -72,7 +75,7 @@ import { UtilsService } from '../../services/utils.service';
 import { KeyCode } from '../../services/keybinding.service';
 import { KeybindingService } from '../../services/keybinding.service';
 import { ɵAnimationGroupPlayer } from '@angular/animations';
-import { Angular2InjectionTokens } from 'pluginlib/inject-resources';
+import { Angular2InjectionTokens } from '../../../../../zlux-app-manager/virtual-desktop/src/pluginlib/inject-resources';
 
 @Component({
   selector: 'zlux-file-tree',
@@ -444,7 +447,7 @@ export class ZluxFileTreeComponent implements OnInit, OnDestroy {
 }
 
 @NgModule({
-  declarations: [FileBrowserMVSComponent, 
+  declarations: [FileBrowserMVSComponent,
     FileBrowserUSSComponent, 
     ZluxFileTreeComponent, 
     FilePropertiesModal,
@@ -484,19 +487,6 @@ export class ZluxFileTreeComponent implements OnInit, OnDestroy {
     ReactiveFormsModule
   ],
   exports: [ZluxFileTreeComponent],
-  entryComponents: [
-    ZluxFileTreeComponent,
-    FilePermissionsModal,
-    FilePropertiesModal,
-    FileOwnershipModal,
-    FileTaggingModal,
-    DatasetPropertiesModal,
-    DeleteFileModal,
-    CreateFolderModal,
-    CreateFileModal,
-    UploadModal,
-    CreateDatasetModal
-  ],
   providers: [
     KeybindingService,
     UploaderService,

src/app/services/downloader.service.ts

@@ -8,7 +8,7 @@
 
 import { Inject, Injectable } from '@angular/core';
 import * as streamSaver from 'streamsaver'
-import { Angular2InjectionTokens } from 'pluginlib/inject-resources';
+import { Angular2InjectionTokens } from '../../../../zlux-app-manager/virtual-desktop/src/pluginlib/inject-resources';
 import { WritableStream, ReadableStream, CountQueuingStrategy } from 'web-streams-polyfill'
 
 export enum ConfigVariables {

src/app/services/persistentData.service.ts

@@ -9,12 +9,12 @@
   Copyright Contributors to the Zowe Project.
 */
 
-import { TreeNode } from 'primeng/primeng';
+import { TreeNode } from 'primeng/api';
 
 import { Injectable, Inject } from '@angular/core';
 import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { Angular2InjectionTokens } from 'pluginlib/inject-resources';
+import { Angular2InjectionTokens } from '../../../../zlux-app-manager/virtual-desktop/src/pluginlib/inject-resources';
 
 @Injectable()
 export class PersistentDataService {

src/app/services/searchHistoryService.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Injectable, Inject } from '@angular/core';
-import { Angular2InjectionTokens } from 'pluginlib/inject-resources';
+import { Angular2InjectionTokens } from '../../../../zlux-app-manager/virtual-desktop/src/pluginlib/inject-resources';
 import { of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 

src/app/services/uploader.service.ts

@@ -11,7 +11,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { Angular2InjectionTokens } from 'pluginlib/inject-resources';
+import { Angular2InjectionTokens } from '../../../../zlux-app-manager/virtual-desktop/src/pluginlib/inject-resources';
 import { longSnackbarOptions } from '../shared/snackbar-options';
 import { MatSnackBar } from '@angular/material/snack-bar';
 

src/app/structures/child-event.ts

@@ -10,7 +10,7 @@
   Copyright Contributors to the Zowe Project.
 */
 
-import {TreeNode} from 'primeng/primeng';
+import { TreeNode } from 'primeng/api';
 
 export class FileTreeNode implements TreeNode { 
   public label: string;

src/app/structures/file-node.ts

@@ -9,7 +9,7 @@
   Copyright Contributors to the Zowe Project.
 */
 
-import { TreeNode } from 'primeng/primeng';
+import { TreeNode } from 'primeng/api';
 
 /**
  * Types currently supported with a workspace

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./zlux/zlux-app-manager/virtual-desktop/plugin-config/tsconfig.base.json",
+  "extends": "../zlux-app-manager/virtual-desktop/plugin-config/tsconfig.base.json",
   "include": [
     "src/**/*.ts",
     //"../zlux-platform/interface/src/mvd-hosting.d.ts"

webpack.config.js

@@ -22,7 +22,7 @@ var config = {
     path.resolve(__dirname, './src/plugin.ts')
   ],
   'output': {
-    'path': path.resolve(__dirname, 'dist'),
+    'path': path.resolve(__dirname, './web/v3'),
     'filename': 'main.js',
   },
   'module': {
@@ -32,31 +32,31 @@ var config = {
     },
     {
       test: /\.scss$/,
-      'use': [
-        'exports-loader?module.exports.toString()',
+      use: [
+        'style-loader', 
         {
           'loader': 'css-loader',
           'options': {
-            'sourceMap': false
-          }
+            'sourceMap': false,
+          },
         },
-        'sass-loader'
-      ]
+        'sass-loader',
+      ],
     }
   ],
   },
   'plugins': [
     new CopyWebpackPlugin({patterns:[
       {
         from: path.resolve(__dirname, './src/assets'),
-        to: path.resolve('./dist/assets')
+        to: path.resolve(__dirname, './web/v3/assets')
       }
     ]})
   ]
 };
 
 module.exports = new webpackConfig.Config()
-  .extend(path.resolve(process.env.MVD_DESKTOP_DIR, 'plugin-config/webpack.base.js'))
+  .extend(path.resolve(process.env.MVD_DESKTOP_DIR, 'plugin-config/webpack5.base.js'))
   .merge(config);