Issue 1332 - Enable query support in playground. (hyperledger-archive…

…s#1519)

* Add Query file to playground.

* Ability to add query file and tests.

contrib-notes/release-process/playground-validation.md

@@ -67,7 +67,9 @@ Start with the basic sample network loaded
  - Import/replace button should bring up the Import/replace modal
     - Should have access to all samples
     - All samples should import 
-
+ - Add file button should bring up add file modal
+    - Should be able to add query file from disk
+
 ### Define Page (File-Editor)
 This page is the main file editor page, where it is possible to edit resources. We need to ensure that the linking between the side navigation menu and the file editor is consistent, that validation errors report correctly for each file type and that file specific edit options are enabled. 
 

packages/composer-common/lib/businessnetworkdefinition.js

@@ -532,7 +532,7 @@ class BusinessNetworkDefinition {
             }
         }
 
-         // grab the query.qry
+         // grab the queries.qry
         const queryPath = fsPath.resolve(path, 'queries.qry');
         if(fs.existsSync(queryPath)) {
             let queryContents = fs.readFileSync( queryPath, ENCODING);

packages/composer-playground/e2e/data/files/importQuery.qry

@@ -0,0 +1,8 @@
+/**
+ * Import query file
+ */
+
+query Q1 {
+    description: "Select all drivers"
+    statement: SELECT org.acme.sample.SampleAsset
+}

packages/composer-playground/e2e/tests/editor-define.spec.ts

@@ -120,7 +120,7 @@ describe('Editor Define', (() => {
 
     it('should enable populated BNA import via file selection', (() => {
         // Select BNA
-        ImportModalHelper.selectBusinessNetworkDefinitionFromFile('./e2e/data/bna/basic-sample-network.bna');
+        ImportModalHelper.selectBusinessNetworkDefinitionFromFile('./e2e/data/bna/importBNA.bna');
 
         // Replace confirm should show, confirm it
         ReplaceModalHelper.confirmReplace();
@@ -130,10 +130,10 @@ describe('Editor Define', (() => {
         browser.wait(ExpectedConditions.invisibilityOf(element(by.css('.import'))), 10000);
         // -success message
         browser.wait(ExpectedConditions.visibilityOf(element(by.id('success_notify'))), 10000);
-        // -expected files in navigator (Just a readme)
+        // -expected files in navigator
         EditorHelper.retrieveNavigatorFileNames()
         .then( (list: any) => {
-            let expectedFiles = ['About\nREADME.md', 'Model File\nmodels/sample.cto', 'Script File\nlib/sample.js', 'Access Control\npermissions.acl'];
+            let expectedFiles = ['About\nREADME.md', 'Model File\nmodels/sample.cto', 'Script File\nlib/sample.js', 'Access Control\npermissions.acl', 'Query File\nqueries.qry'];
             list.should.be.deep.equal(expectedFiles);
         });
         // -deploy not enabled
@@ -172,7 +172,8 @@ describe('Editor Define', (() => {
                                      'models/',
                                      'models/sample.cto',
                                      'lib/',
-                                     'lib/sample.js' ];
+                                     'lib/sample.js',
+                                     'queries.qry' ];
             contents.length.should.be.equal(expectedContents.length);
             expectedContents.forEach((element) => {
                 contents.includes(element).should.be.true;
@@ -220,6 +221,14 @@ describe('Editor Define', (() => {
         });
     }));
 
+    it('should prevent the addition of a file with an invalid file extension', (() => {
+        let inputFileElement = element(by.id('file-importer_input'));
+        dragDropFile(inputFileElement, './e2e/data/files/importBanned.wombat');
+        browser.wait(ExpectedConditions.visibilityOf(element(by.css('.error'))), 10000);
+        element(by.id('error_close')).click();
+        AddFileModalHelper.exitAdd();
+    }));
+
     it('should enable the cancelling of script file addition part way through without completing the file addition', (() => {
         AddFileModalHelper.selectScriptRadioOption();
 
@@ -565,12 +574,39 @@ describe('Editor Define', (() => {
         });
     }));
 
-    it('should prevent the addition of a file with an invalid file extension', (() => {
-        let inputFileElement = element(by.id('file-importer_input'));
-        dragDropFile(inputFileElement, './e2e/data/files/importBanned.wombat');
-        browser.wait(ExpectedConditions.visibilityOf(element(by.css('.error'))), 10000);
-        element(by.id('error_close')).click();
+    it('should warn about replacing current query file when adding new query file', (() => {
+        AddFileModalHelper.exitAdd();
+
+        EditorHelper.importBND()
+        .then(() => {
+            ImportModalHelper.waitForImportModalToAppear();
+        })
+        .then(() => {
+            ImportModalHelper.selectBusinessNetworkDefinitionFromFile('./e2e/data/bna/importBNA.bna');
+            ReplaceModalHelper.confirmReplace();
+            browser.wait(ExpectedConditions.visibilityOf(element(by.id('success_notify'))), 10000);
+        })
+        .then(() => {
+            EditorHelper.addFile()
+            .then(() => {
+                AddFileModalHelper.waitForAddFileModalToAppear();
+            });
+        })
+        .then(() => {
+            let startFiles;
+            EditorHelper.retrieveNavigatorFileNames()
+            .then((names) => {
+                startFiles = names;
+            });
+        })
+        .then(() => {
+            AddFileModalHelper.selectFromFile('./e2e/data/files/importQuery.qry');
+        })
+        .then(() => {
+            ReplaceModalHelper.confirmReplace();
+        });
     }));
+
   }));
 
 }));

packages/composer-playground/src/app/editor/add-file/add-file.component.html

@@ -22,6 +22,7 @@ <h1>Add a file</h1>
             <use xlink:href="#icon-CTO_File" *ngIf="fileType==='cto'"></use>
             <use xlink:href="#icon-JS_File" *ngIf="fileType==='js'"></use>
             <use xlink:href="#icon-MD_File" *ngIf="fileType==='md'"></use>
+            <use xlink:href="#icon-QRY_File" *ngIf="fileType==='qry'"></use>
           </svg>
           <div class="file-title">
             <div class="title">{{currentFileName}}</div>

packages/composer-playground/src/app/editor/add-file/add-file.component.scss

@@ -4,18 +4,19 @@
 add-file-modal {
     .import {
         width: 700px;
-        height: 475px;
+        height: 520px;
 
         display: flex;
         flex-direction: column;
 
         .file-types-list {
-            max-height: 200px;
+            max-height: 250px;
             margin-top: 16px;
 
             .file-types-list-item {
                 background-color: $third-highlight;
                 padding: $space-medium;
+                width: 100%;
                 &:nth-child(even) {
                     background-color: $white;
                 }
@@ -119,4 +120,3 @@ add-file-modal {
         }
     }
 }
-

packages/composer-playground/src/app/editor/add-file/add-file.component.spec.ts

@@ -9,7 +9,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { BehaviorSubject, Subject } from 'rxjs/Rx';
 
 import { BusinessNetworkDefinition, AdminConnection } from 'composer-admin';
-import { ModelFile, ModelManager, ScriptManager, Script, AclFile, AssetDeclaration } from 'composer-common';
+import { ModelFile, ModelManager, ScriptManager, Script, AclFile, AssetDeclaration, QueryFile } from 'composer-common';
 
 import { AddFileComponent } from './add-file.component';
 import { FileImporterComponent } from '../../file-importer';
@@ -200,6 +200,23 @@ describe('AddFileComponent', () => {
             createMock.should.have.been.called;
         }));
 
+        it('should call this.createQuery if query file detected', fakeAsync(() => {
+
+            let b = new Blob(['/**QUERY File*/'], {type: 'text/plain'});
+            let file = new File([b], 'newfile.qry');
+
+            let createMock = sandbox.stub(component, 'createQuery');
+            let dataBufferMock = sandbox.stub(component, 'getDataBuffer')
+            .returns(Promise.resolve('some data'));
+
+            // Run method
+            component.fileAccepted(file);
+            tick();
+
+            // Assertions
+            createMock.should.have.been.called;
+        }));
+
         it('should call this.fileRejected when there is an error reading the file', fakeAsync(() => {
 
             let b = new Blob(['/**CTO File*/'], {type: 'text/plain'});
@@ -351,6 +368,24 @@ describe('AddFileComponent', () => {
         }));
     });
 
+    describe('#createQuery', () => {
+        it('should create a new query file named queries.qry', async(() => {
+            let dataBuffer = new Buffer('/**QUERY File**/ query things');
+            let filename = 'queries.qry';
+            let mockQueryFile = sinon.createStubInstance(QueryFile);
+            mockClientService.createQueryFile.returns(mockQueryFile);
+
+            // Run method
+            component.createQuery(dataBuffer);
+
+            // Assertions
+            component.fileType.should.equal('qry');
+            mockClientService.createQueryFile.should.have.been.calledWith(filename, dataBuffer.toString());
+            component.currentFile.should.deep.equal(mockQueryFile);
+            component.currentFileName.should.equal(filename);
+        }));
+    });
+
     describe('#createReadme', () => {
         it('should establish a readme file', async(() => {
             let dataBuffer = new Buffer('/**README File**/ read all the things');

packages/composer-playground/src/app/editor/add-file/add-file.component.ts

@@ -20,7 +20,7 @@ export class AddFileComponent {
     expandInput: boolean = false;
 
     maxFileSize: number = 5242880;
-    supportedFileTypes: string[] = ['.js', '.cto', '.md', '.acl'];
+    supportedFileTypes: string[] = ['.js', '.cto', '.md', '.acl', '.qry'];
 
     addModelNamespace: string = 'org.acme.model';
     addModelFileName: string = 'models/org.acme.model';
@@ -72,6 +72,10 @@ export class AddFileComponent {
                     this.expandInput = true;
                     this.createRules(data);
                     break;
+                case 'qry':
+                    this.expandInput = true;
+                    this.createQuery(data);
+                    break;
                 default:
                     throw new Error('Unexpected File Type: ' + type);
             }
@@ -123,6 +127,13 @@ export class AddFileComponent {
         this.currentFileName = filename;
     }
 
+    createQuery(dataBuffer) {
+      this.fileType = 'qry';
+      let filename = 'queries.qry';
+      this.currentFile = this.clientService.createQueryFile(filename, dataBuffer.toString());
+      this.currentFileName = filename;
+    }
+
     fileRejected(reason: string) {
         this.expandInput = false;
         this.alertService.errorStatus$.next(reason);

packages/composer-playground/src/app/editor/editor-file/editor-file.component.spec.ts

@@ -248,6 +248,33 @@ describe('EditorFileComponent', () => {
             should.not.exist(component['editorContent']);
         });
 
+        it('should load a query file', () => {
+            mockClientService.getQueryFile.returns({
+                getDefinitions: sinon.stub().returns('my query')
+            });
+
+            component['_editorFile'] = {
+                query: true,
+            };
+
+            component.loadFile();
+
+            component['editorContent'].should.equal('my query');
+            component['editorType'].should.equal('code');
+        });
+
+        it('should load a query file but not find it', () => {
+            mockClientService.getQueryFile.returns(null);
+
+            component['_editorFile'] = {
+                query: true,
+            };
+
+            component.loadFile();
+
+            should.not.exist(component['editorContent']);
+        });
+
         it('should not load any file', () => {
             component['_editorFile'] = {};
 
@@ -311,6 +338,20 @@ describe('EditorFileComponent', () => {
             should.not.exist(component['currentError']);
         });
 
+        it('should set query file', () => {
+            component['_editorFile'] = {
+                query: true,
+                id: 'query'
+            };
+
+            component['editorContent'] = 'my query';
+
+            component.setCurrentCode();
+
+            mockClientService.updateFile.should.have.been.calledWith('query', 'my query', 'query');
+            should.not.exist(component['currentError']);
+        });
+
         it('should set package file', () => {
             component['_editorFile'] = {
                 package: true,

packages/composer-playground/src/app/editor/editor-file/editor-file.component.ts

@@ -100,6 +100,15 @@ export class EditorFileComponent {
                 this.editorContent = marked(readme);
                 this.editorType = 'readme';
             }
+        } else if (this._editorFile.query) {
+          let queryFile = this.clientService.getQueryFile();
+          if (queryFile) {
+              this.editorContent = queryFile.getDefinitions();
+              this.editorType = 'code';
+              this.currentError = this.clientService.validateFile(this._editorFile.id, this.editorContent, 'qry');
+          } else {
+              this.editorContent = null;
+          }
         } else {
             this.editorContent = null;
         }
@@ -116,6 +125,8 @@ export class EditorFileComponent {
                 type = 'script';
             } else if (this._editorFile.acl) {
                 type = 'acl';
+            } else if (this._editorFile.query) {
+                type = 'query';
             } else if (this._editorFile.package) {
                 let packageObject = JSON.parse(this.editorContent);
                 this.clientService.setBusinessNetworkPackageJson(packageObject);

packages/composer-playground/src/app/editor/editor.component.html

@@ -11,6 +11,7 @@ <h3 [class.error]="file.invalid" *ngIf="file.model">Model File</h3>
                     <h3 [class.error]="file.invalid" *ngIf="file.script">Script File</h3>
                     <h3 [class.error]="file.invalid" *ngIf="file.acl">Access Control</h3>
                     <h3 [class.error]="file.invalid" *ngIf="file.readme">About</h3>
+                    <h3 [class.error]="file.invalid" *ngIf="file.query">Query File</h3>
                     <div [class.error]="file.invalid">{{file.displayID}}</div>
                 </div>
                 <div *ngIf="file.invalid" class="error_dot">
@@ -62,7 +63,7 @@ <h1 id="editor_deployedPackageName" *ngIf="currentFile && fileType(currentFile)=
       </div>
       <div *ngIf="currentFile && fileType(currentFile)!='Readme'" style="flex-shrink:1;align-self:center" class="business-network-version small">{{currentFile.displayID}}</div>
       <div *ngIf="currentFile && fileType(currentFile)=='Readme'" style="flex-shrink:1;align-self:center" class="business-network-version small">{{deployedPackageVersion}}</div>
-      <div *ngIf="currentFile && fileType(currentFile)!='ACL'" class="edit_icon">
+      <div *ngIf="(currentFile && !preventNameEdit(currentFile))" class="edit_icon">
         <button id="editFileButton" type="button" class="action" (click)="toggleEditActive()">
           <svg class="ibm-icon vertical-top" aria-hidden="true">
             <use xlink:href="#icon-edit_24"></use>