Issue #IQ-549 feat: QuML Editor configuration CSP changes

angular.json

@@ -49,6 +49,7 @@
               "node_modules/@project-sunbird/sunbird-quml-player-web-component/sunbird-quml-player.js",
               "src/assets/libs/iziToast/iziToast.min.js",
               "node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js",
+              "node_modules/@project-sunbird/sunbird-file-upload-library/sunbird-file-upload-library.js",
               "src/assets/lib/dimmer.min.js",
               "src/assets/lib/transition.min.js",
               "src/assets/lib/modal.min.js",
@@ -176,7 +177,8 @@
             "karmaConfig": "projects/questionset-editor-library/karma.conf.js",
             "scripts": [
               "src/assets/libs/iziToast/iziToast.min.js",
-              "node_modules/jquery/dist/jquery.min.js"
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/@project-sunbird/sunbird-file-upload-library/sunbird-file-upload-library.js"
             ],
             "codeCoverageExclude": [
               "projects/questionset-editor-library/src/lib/interfaces/*/*.ts"
@@ -238,6 +240,7 @@
               "node_modules/@project-sunbird/sunbird-quml-player-web-component/sunbird-quml-player.js",
               "src/assets/libs/iziToast/iziToast.min.js",
               "node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js",
+              "node_modules/@project-sunbird/sunbird-file-upload-library/sunbird-file-upload-library.js",
               "src/assets/lib/dimmer.min.js",
               "src/assets/lib/transition.min.js",
               "src/assets/lib/modal.min.js",

package.json

@@ -32,6 +32,7 @@
     "@project-sunbird/common-form-elements-full": "^6.0.3",
     "@project-sunbird/sb-styles": "0.0.9",
     "@project-sunbird/sunbird-quml-player-web-component": "2.1.0",
+    "@project-sunbird/sunbird-file-upload-library": "1.0.2",
     "@project-sunbird/sunbird-resource-library": "6.1.0",
     "@project-sunbird/telemetry-sdk": "0.0.29",
     "@types/jquery": "^3.5.5",

projects/questionset-editor-library/src/lib/components/asset-browser/asset-browser.component.spec.ts

@@ -10,6 +10,7 @@ import { EditorService } from '../../services/editor/editor.service';
 import { of, throwError } from 'rxjs';
 import * as _ from 'lodash-es';
 
+
 const mockEditorService = {
   editorConfig: {
     config: {
@@ -29,9 +30,7 @@ const mockEditorService = {
       channel: 'sunbird'
     }
   },
-  appendCloudStorageHeaders: (config) => {
-    return {...config, headers: { 'x-ms-blob-type': 'BlockBlob' }};
-  }
+  apiErrorHandling: () => {},
 };
 describe('AssetBrowserComponent', () => {
   let component: AssetBrowserComponent;
@@ -121,55 +120,58 @@ describe('AssetBrowserComponent', () => {
     spyOn(component.allImages, 'push');
     expect(component.assetsCount).toEqual(1);
   });
+
   it('#resetFormData() should reset the form data', () => {
     component.resetFormData();
     expect(component.imageUploadLoader).toEqual(false);
     expect(component.imageFormValid).toEqual(false);
     expect(component.formConfig).toBeTruthy();
   })
+
   it('#uploadAndUseImage should upload image on API success', async () => {
-    const createMediaAssetResponse = mockData.serverResponse;
+    const createMediaAssetResponse = {...mockData.serverResponse};
     createMediaAssetResponse.result = {
       node_id: 'do_123'
     }
-    const preSignedResponse = mockData.serverResponse;
+    const preSignedResponse = {...mockData.serverResponse};
     preSignedResponse.result = {
       node_id: 'do_234',
-      pre_signed_url: '/test'
+      pre_signed_url: 'https://test.blob.core.windows.net/sunbird-content-test/content/assets/do_2138637821867458561248/ggd.png?sv=2017-04-17&se=2023-08-19T01%3A57%3A04Z&sr=b&sp=w&sig=c1jWuT%2BbM0Ex%2BMAs2xWr%2Bw0l7z3TQWqOF/ouMvWMnqo%3D'
     }
     let questionService: QuestionService = TestBed.inject(QuestionService);
     let modal = true;
     spyOn(questionService, 'createMediaAsset').and.returnValue(of(createMediaAssetResponse));
     spyOn(questionService, 'generatePreSignedUrl').and.returnValue(of(preSignedResponse));
+    component.imageFile =  new File(['mock content'], 'test.png', { type: 'image/png' });
     const editorService = TestBed.inject(EditorService);
-    spyOn(editorService, 'appendCloudStorageHeaders').and.callThrough();
     spyOn(component, 'addImageInEditor').and.callThrough();
     spyOn(component, 'dismissPops').and.callThrough();
     component.uploadAndUseImage(modal);
     expect(questionService.createMediaAsset).toHaveBeenCalled();
-    expect(editorService.appendCloudStorageHeaders).toHaveBeenCalled();
     expect(component.loading).toEqual(true);
     expect(component.isClosable).toEqual(false);
     expect(component.imageFormValid).toEqual(false);
   });
-  xit('#uploadAndUseImage should upload image and call upload to blob', async () => {
-    const createMediaAssetResponse = mockData.serverResponse;
+
+  it('#uploadAndUseImage should upload image and call upload to blob', async () => {
+    const createMediaAssetResponse = {...mockData.serverResponse};
     createMediaAssetResponse.result = {
       node_id: 'do_123'
     }
-    const preSignedResponse = mockData.serverResponse;
+    const preSignedResponse = {...mockData.serverResponse};
     preSignedResponse.result = {
       node_id: 'do_234',
-      pre_signed_url: '/test?'
+      pre_signed_url: 'https://test.blob.core.windows.net/sunbird-content-test/content/assets/do_2138637821867458561248/ggd.png?sv=2017-04-17&se=2023-08-19T01%3A57%3A04Z&sr=b&sp=w&sig=c1jWuT%2BbM0Ex%2BMAs2xWr%2Bw0l7z3TQWqOF/ouMvWMnqo%3D'
     }
-    const uploadMediaResponse = mockData.serverResponse;
+    const uploadMediaResponse = {...mockData.serverResponse};
     uploadMediaResponse.result = {
       node_id: 'do_234',
       content_url: '/test'
     }
     component.showImageUploadModal = false;
     let questionService: QuestionService = TestBed.inject(QuestionService);
     let modal = true;
+    component.imageFile =  new File(['mock content'], 'test.png', { type: 'image/png' });
     spyOn(questionService, 'createMediaAsset').and.returnValue(of(createMediaAssetResponse));
     spyOn(questionService, 'generatePreSignedUrl').and.returnValue(of(preSignedResponse));
     spyOn(component, 'uploadToBlob').and.returnValue(of(true));
@@ -182,6 +184,7 @@ describe('AssetBrowserComponent', () => {
     expect(questionService.generatePreSignedUrl).toHaveBeenCalled();
     expect(component.uploadToBlob).toHaveBeenCalled();
   });
+
   it('#generateAssetCreateRequest() should return asset create request', () => {
     let fileName = 'test';
     let fileType = 'image/png';
@@ -200,10 +203,9 @@ describe('AssetBrowserComponent', () => {
   it('#uploadToBlob() should upload blob on API success', () => {
     let signedURL = '/test';
     let file = new File([], 'filename');
-    let config = {};
     let questionService: QuestionService= TestBed.inject(QuestionService);
-    spyOn(questionService.http, 'put').and.returnValue(of({"responseCode": "OK"}));
-    component.uploadToBlob(signedURL, file, config).subscribe(data => {
+    spyOn(questionService, 'uploadtoBlob').and.returnValue(of({"responseCode": "OK"}));
+    component.uploadToBlob(signedURL, file).subscribe(data => {
       expect(data.responseCode).toEqual('OK');
     })
   })
@@ -219,16 +221,19 @@ describe('AssetBrowserComponent', () => {
     component.dismissImageUploadModal();
     expect(component.showImageUploadModal).toBeFalsy();
   });
+
   it('#lazyloadMyImages() should get my images ', () => {
     spyOn(component, 'getMyImages');
     component.lazyloadMyImages();
     expect(component.getMyImages).toHaveBeenCalledWith(0, undefined, true);
   });
+
   it('#lazyloadMyImages() should get all images', () => {
     spyOn(component, 'getAllImages');
     component.lazyloadAllImages();
     expect(component.getAllImages).toHaveBeenCalledWith(0, undefined, true);
   });
+
   it('#uploadImage() should create asset on API success', () => {
     const file = new File([''], 'filename', { type: 'image' });
     const event = {
@@ -258,6 +263,7 @@ describe('AssetBrowserComponent', () => {
     expect(component.generateAssetCreateRequest).toHaveBeenCalled();
     expect(component.populateFormData).toHaveBeenCalled();
   })
+
   it('#dismissImagePicker() should emit modalDismissEmitter  ', () => {
     component.showImagePicker = true;
     spyOn(component, 'getMyImages');
@@ -266,31 +272,36 @@ describe('AssetBrowserComponent', () => {
     expect(component.showImagePicker).toBeFalsy();
     expect(component.modalDismissEmitter.emit).toHaveBeenCalledWith({});
   });
+
   it('#ngOnDestroy() should call modal deny ', () => {
     component['modal'] = {
       deny: jasmine.createSpy('deny')
     };
     component.ngOnDestroy();
     expect(component['modal'].deny).toHaveBeenCalled();
   });
+
   it('#searchImages() should call  getMyImages for my images', () => {
     spyOn(component, 'getMyImages');
     component.searchImages('clearInput', 'myImages');
     expect(component.query).toEqual('');
     expect(component.searchMyInput).toEqual('');
     expect(component.getMyImages).toHaveBeenCalledWith(0, '', true);
   });
+
   it('#searchImages() should call allImages for all images ', () => {
     spyOn(component, 'getAllImages');
     component.searchImages('clearInput', 'allImages');
     expect(component.query).toEqual('');
     expect(component.searchAllInput).toEqual('');
     expect(component.getAllImages).toHaveBeenCalledWith(0, '', true);
   });
+
   it('#ngOnInit() should call ngOnInit and define formConfig', () => {
     component.ngOnInit();
     expect(component.formConfig).toBeDefined();
   });
+
   it('#onStatusChanges() should call onStatusChanges and imageUploadLoader is false', () => {
     component.imageUploadLoader = false;
     const data = {
@@ -303,6 +314,7 @@ describe('AssetBrowserComponent', () => {
     component.onStatusChanges(data);
     expect(component.imageFormValid).toBeFalsy();
   });
+
   it('#onStatusChanges() should call onStatusChanges and imageUploadLoader is true and is form valid false', () => {
     component.imageUploadLoader = true;
     const data = {
@@ -315,6 +327,7 @@ describe('AssetBrowserComponent', () => {
     component.onStatusChanges(data);
     expect(component.imageFormValid).toBeFalsy();
   });
+
   it('#onStatusChanges() should call onStatusChanges and imageUploadLoader is true and is form valid true', () => {
     component.imageUploadLoader = true;
     const data = {
@@ -327,6 +340,7 @@ describe('AssetBrowserComponent', () => {
     component.onStatusChanges(data);
     expect(component.imageFormValid).toBeTruthy();
   });
+
   it('#valueChanges() should define assestRequestBody ', () => {
     component.imageUploadLoader = true;
     component.assestData = mockData.formData;
@@ -338,13 +352,15 @@ describe('AssetBrowserComponent', () => {
     component.valueChanges(data);
     expect(component.assestData).toBeDefined();
   });
+
   it('#openImageUploadModal() should reset upload image form  ', () => {
     component.openImageUploadModal();
     expect(component.imageUploadLoader).toBeFalsy();
     expect(component.imageFormValid).toBeFalsy();
     expect(component.showImageUploadModal).toBeTruthy();
     expect(component.formData).toBeNull();
   });
+
   it('#dismissPops() should close both pops  ', () => {
     spyOn(component, 'dismissImagePicker');
     const modal = {
@@ -354,6 +370,7 @@ describe('AssetBrowserComponent', () => {
     expect(component.dismissImagePicker).toHaveBeenCalled();
     expect(modal.deny).toHaveBeenCalled();
   });
+
   it('#dismissImagePicker() should emit modalDismissEmitter event  ', () => {
     spyOn(component, 'dismissImagePicker');
     component.dismissImagePicker();

projects/questionset-editor-library/src/lib/components/asset-browser/asset-browser.component.ts

@@ -213,12 +213,7 @@ export class AssetBrowserComponent implements OnInit, OnDestroy {
         return throwError(this.editorService.apiErrorHandling(err, errInfo));
       })).subscribe((response) => {
         const signedURL = response.result.pre_signed_url;
-        let blobConfig = {
-          processData: false,
-          contentType: 'Asset'
-        };
-        blobConfig = this.editorService.appendCloudStorageHeaders(blobConfig);
-        this.uploadToBlob(signedURL, this.imageFile, blobConfig).subscribe(() => {
+        this.uploadToBlob(signedURL, this.imageFile).subscribe(() => {
           const fileURL = signedURL.split('?')[0];
           const data = new FormData();
           data.append('fileUrl', fileURL);
@@ -260,8 +255,9 @@ export class AssetBrowserComponent implements OnInit, OnDestroy {
     };
   }
 
-  uploadToBlob(signedURL, file, config): Observable<any> {
-    return this.questionService.http.put(signedURL, file, config).pipe(catchError(err => {
+  uploadToBlob(signedURL, file): Observable<any> {
+    const csp = _.get(this.editorService.editorConfig, 'context.cloudStorage.provider', 'azure');
+    return this.questionService.uploadtoBlob(signedURL, file, csp).pipe(catchError(err => {
       const errInfo = { errorMsg: _.get(this.configService.labelConfig, 'messages.error.018') };
       this.isClosable = true;
       this.loading = false;

projects/questionset-editor-library/src/lib/components/ckeditor-tool/ckeditor-tool.component.ts

@@ -615,12 +615,7 @@ export class CkeditorToolComponent implements OnInit, AfterViewInit, OnChanges {
         return throwError(this.editorService.apiErrorHandling(err, errInfo));
       })).subscribe((response) => {
         const signedURL = response.result.pre_signed_url;
-        let blobConfig = {
-          processData: false,
-          contentType: 'Asset'
-        };
-        blobConfig = this.editorService.appendCloudStorageHeaders(blobConfig);
-        this.uploadToBlob(signedURL, this.imageFile, blobConfig).subscribe(() => {
+        this.uploadToBlob(signedURL, this.imageFile).subscribe(() => {
           const fileURL = signedURL.split('?')[0];
           const data = new FormData();
           data.append('fileUrl', fileURL);
@@ -765,12 +760,7 @@ export class CkeditorToolComponent implements OnInit, AfterViewInit, OnChanges {
           return throwError(this.editorService.apiErrorHandling(err, errInfo));
         })).subscribe((response) => {
           const signedURL = response.result.pre_signed_url;
-          let blobConfig = {
-            processData: false,
-            contentType: 'Asset'
-          };
-          blobConfig = this.editorService.appendCloudStorageHeaders(blobConfig);
-          this.uploadToBlob(signedURL, this.videoFile, blobConfig).subscribe(() => {
+          this.uploadToBlob(signedURL, this.videoFile).subscribe(() => {
             const fileURL = signedURL.split('?')[0];
             this.updateContentWithURL(fileURL, this.videoFile.type, contentId, videoModal);
           });
@@ -790,8 +780,9 @@ export class CkeditorToolComponent implements OnInit, AfterViewInit, OnChanges {
     };
   }
 
-  uploadToBlob(signedURL, file, config): Observable<any> {
-    return this.questionService.http.put(signedURL, file, config).pipe(catchError(err => {
+  uploadToBlob(signedURL, file): Observable<any> {
+    const csp = _.get(this.editorService.editorConfig, 'context.cloudStorage.provider', 'azure');
+    return this.questionService.uploadtoBlob(signedURL, file, csp).pipe(catchError(err => {
       const errInfo = { errorMsg: _.get(this.configService.labelConfig, 'messages.error.018') };
       this.isClosable = true;
       this.loading = false;

projects/questionset-editor-library/src/lib/components/question/question.component.spec.data.ts

@@ -3016,6 +3016,7 @@ export const mockTreeService = {
 export const mockEditorCursor = {
   setQuestionMap: () => {},
   clearQuestionMap: () => {},
+  removeQuestionMap: () => {}
 };
 
 export const childMetaData = {

projects/questionset-editor-library/src/lib/components/quml-player/quml-player.component.ts

@@ -52,7 +52,6 @@ export class QumlPlayerComponent implements OnInit, AfterViewInit {
         this.qumlPlayerConfig.config.showLegend = false;
       }
     }
-    console.log('qumlPlayerConfig:: ', this.qumlPlayerConfig);
   }
 
   ngAfterViewInit() {