Enable script and model file rename (hyperledger-archives#1181)

* enable filename edit for cto and js

* add and update tests for file name edit

* design edit on spacing for validation error display

* modify system tests to specify model names

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

@@ -187,6 +187,76 @@ Select the main model file and delete it
  - Change ACL file resource to be “org.acme.model”
  - Error should disappear and deploy button should be active
 
+Reset to the basic sample network, we will test the addition and edit of an existing model file
+ - Select the model file
+ - Within editor select the edit icon
+ - Change the name to include illegal characters (non-alphanumeric)
+    - Validation error should show on click away
+ - Change the name to be valid, but different from original name. On click away:
+    - No validation errors fof file name or any associated BND files
+    - Name of selected file should update in side tab
+    - Deploy button should become active
+ - Click deploy
+    - Deploy success message should show
+    - Deploy button should become diabled
+    - Newly renamed file should be visible in side tab
+ - Click export
+    - BND should export as a BNA
+    - BNA should contain renamed file in models direcotory of archive
+
+Reset to the basic sample network, we will test the addition and edit of a new model file
+ - Add a new model file
+    - Within editor select the edit icon
+    - Change the name to include illegal characters (non-alphanumeric)
+        - Validation error should show on click away
+    - Change the name to be valid, but different from original name. On click away:
+        - No validation errors
+        - Name of selected file should update in side tab
+        - Deploy button should be active
+    - Click deploy
+        - Deploy success message should show
+        - Deploy button should become diabled
+        - Newly renamed file should be visible in side tab
+    - Click export
+        - BND should export as a BNA
+        - BNA should include new file in models directory of archive
+- Add an existing model file from disc and repeat above steps
+
+Reset to the basic sample network, we will test the addition and edit of an existing script file
+ - Select the script file
+ - Within editor select the edit icon
+ - Change the name to include illegal characters (non-alphanumeric)
+    - Validation error should show on click away
+ - Change the name to be valid, but different from original name. On click away:
+    - No validation errors fof file name or any associated BND files
+    - Name of selected file should update in side tab
+    - Deploy button should become active
+ - Click deploy
+    - Deploy success message should show
+    - Deploy button should become diabled
+    - Newly renamed file should be visible in side tab
+ - Click export
+    - BND should export as a BNA
+    - BNA should contain renamed file in lib direcotory of archive
+
+Reset to the basic sample network, we will test the addition and edit of a new script file
+ - Add a new script file via "new script file" selection
+    - Within editor select the edit icon
+    - Change the name to include illegal characters (non-alphanumeric)
+        - Validation error should show on click away
+    - Change the name to be valid, but different from original name. On click away:
+        - No validation errors
+        - Name of selected file should update in side tab
+        - Deploy button should be active
+    - Click deploy
+        - Deploy success message should show
+        - Deploy button should become diabled
+        - Newly renamed file should be visible in side tab
+    - Click export
+        - BND should export as a BNA
+        - BNA should include new file in lib directory of archive
+ - Add an existing script file from disc and repeat above steps
+
 
 ### Test and ID Page
 The test page enables testing of the currently deployed Business Network Definition, using a web runtime. The ID page enables access to resources based upon a selected ID existing within the BND. The Admin ID is a default ID, though in testing we will create new IDs and interact with resources based on the newly defined IDs that have ACL rules applied.

packages/composer-common/lib/businessnetworkdefinition.js

@@ -273,7 +273,9 @@ class BusinessNetworkDefinition {
         let modelManager = this.getModelManager();
         let modelFiles = modelManager.getModelFiles();
         modelFiles.forEach(function(file) {
-            zip.folder('models').file(file.namespace + '.cto', file.definitions);
+            let fileIdentifier = file.fileName;
+            let fileName = fsPath.parse(fileIdentifier).base;
+            zip.folder('models').file(fileName, file.definitions);
         });
 
         let scriptManager = this.getScriptManager();

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

@@ -229,15 +229,15 @@ describe('AddFileComponent', () => {
             );
             let file = new File([b], 'newfile.cto');
             let dataBuffer = new Buffer('/**CTO File**/ namespace test');
-            let mockModel = new ModelFile(mockModelManager, dataBuffer.toString(), file.name);
+            let mockModel = new ModelFile(mockModelManager, dataBuffer.toString(), 'models/' + file.name);
             component.createModel(file, dataBuffer);
             component.fileType.should.equal('cto');
             component.currentFile.should.deep.equal(mockModel);
             component.currentFileName.should.equal(mockModel.getFileName());
         }));
 
         it('should use the addModelFileName variable as the file name', async(() => {
-            let fileName = 'testFileName.cto';
+            let fileName = 'models/testFileName.cto';
             component.addModelFileName = fileName;
             component.businessNetwork = mockBusinessNetwork;
             let b = new Blob(
@@ -300,7 +300,7 @@ describe('AddFileComponent', () => {
 namespace org.acme.model`],
                 {type: 'text/plain'}
             );
-            let file = new File([b], 'org.acme.model.cto');
+            let file = new File([b], 'models/org.acme.model.cto');
             let dataBuffer = new Buffer(`/**
  * New model file
  */
@@ -312,7 +312,7 @@ namespace org.acme.model`);
             component.businessNetwork = mockBusinessNetwork;
 
             component.changeCurrentFileType();
-            component.currentFileName.should.equal('org.acme.model.cto');
+            component.currentFileName.should.equal('models/org.acme.model.cto');
             component.currentFile.should.deep.equal(mockModel);
 
         }));
@@ -342,7 +342,7 @@ namespace org.acme.model`);
             component.businessNetwork = mockBusinessNetwork;
 
             component.changeCurrentFileType();
-            component.currentFileName.should.equal('org.acme.model0.cto');
+            component.currentFileName.should.equal('models/org.acme.model0.cto');
         });
 
         it('should fill in template model name indices for a cto file name', async(() => {
@@ -379,7 +379,7 @@ namespace org.acme.model`);
             component.businessNetwork = mockBusinessNetwork;
 
             component.changeCurrentFileType();
-            component.currentFileName.should.equal('org.acme.model2.cto');
+            component.currentFileName.should.equal('models/org.acme.model2.cto');
         }));
     });
 

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

@@ -24,7 +24,8 @@ export class AddFileComponent {
     supportedFileTypes: string[] = ['.js', '.cto'];
 
     addModelNamespace: string = 'org.acme.model';
-    addModelFileName: string = 'lib/org.acme.model';
+    addModelFileName: string = 'models/org.acme.model';
+    addModelPath: string = 'models/';
     addModelFileExtension: string = '.cto';
     addScriptFileName: string = 'lib/script';
     addScriptFileExtension: string = '.js';
@@ -90,14 +91,16 @@ export class AddFileComponent {
     createScript(file: File, dataBuffer) {
         this.fileType = 'js';
         let scriptManager = this.businessNetwork.getScriptManager();
-        this.currentFile = scriptManager.createScript(file.name || this.addScriptFileName, 'JS', dataBuffer.toString());
+        let filename = file.name ? 'lib/' + file.name : this.addScriptFileName;
+        this.currentFile = scriptManager.createScript('lib/' + file.name || this.addScriptFileName, 'JS', dataBuffer.toString());
         this.currentFileName = this.currentFile.getIdentifier();
     }
 
     createModel(file: File, dataBuffer) {
         this.fileType = 'cto';
         let modelManager = this.businessNetwork.getModelManager();
-        this.currentFile = new ModelFile(modelManager, dataBuffer.toString(), file.name || this.addModelFileName);
+        let filename = file.name ? 'models/' + file.name : this.addModelFileName;
+        this.currentFile = new ModelFile(modelManager, dataBuffer.toString(), filename);
         this.currentFileName = this.currentFile.getFileName();
     }
 
@@ -143,7 +146,7 @@ export class AddFileComponent {
 
 namespace ${newModelNamespace}`;
 
-            this.currentFile = new ModelFile(modelManager, code, newModelNamespace + this.addModelFileExtension);
+            this.currentFile = new ModelFile(modelManager, code, this.addModelPath + newModelNamespace + this.addModelFileExtension);
             this.currentFileName = this.currentFile.getFileName();
         }
     }

packages/composer-playground/src/app/basic-modals/replace-confirm/replace-confirm.component.spec.ts

@@ -31,4 +31,17 @@ describe('DeleteComponent', () => {
     it('should create', () => {
         component.should.be.ok;
     });
+
+    describe('onInit', () => {
+
+        it('should set default messages', () => {
+
+            component['ngOnInit']();
+
+            component['headerMessage'].should.be.equal('Current definition will be replaced');
+            component['mainMessage'].should.be.equal('Your Business Network Definition currently in the Playground will be removed & replaced.');
+            component['supplementaryMessage'].should.be.equal('Please ensure that you have exported any current model files in the Playground.');
+        });
+
+    });
 });

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

@@ -120,7 +120,6 @@ export class EditorFileComponent {
                 this.clientService.setBusinessNetworkPackageJson(packageObject);
                 this.clientService.businessNetworkChanged$.next(true);
             }
-
             this.currentError = this.clientService.updateFile(this._editorFile.id, this.editorContent, type);
         } catch (e) {
             this.currentError = e.toString();

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

@@ -11,7 +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>
-                    <div [class.error]="file.invalid" title="{{file.displayID}}">{{file.displayID}}</div>
+                    <div [class.error]="file.invalid">{{file.displayID}}</div>
                 </div>
                 <div *ngIf="file.invalid" class="error_dot">
                     <svg class="ibm-icon" aria-hidden="true">
@@ -57,11 +57,12 @@ <h1>Editing package.json</h1>
     </div>
     <div *ngIf="!editActive && !editingPackage" class="business-network-details">
       <div style="flex-shrink:1;align-self: center">
-        <h1 class="margin-right">{{deployedPackageName}}</h1>
+        <h1 *ngIf="currentFile && fileType(currentFile)!='Readme'" class="margin-right">{{ fileType(currentFile) }} File</h1>
+        <h1 *ngIf="currentFile && fileType(currentFile)=='Readme'" class="margin-right">{{ deployedPackageName }}</h1>
       </div>
-      <div style="flex-shrink:1;align-self:center" class="business-network-version small">{{deployedPackageVersion}}
-      </div>
-      <div class="edit_icon">
+      <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">
         <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>
@@ -76,7 +77,7 @@ <h1 class="margin-right">{{deployedPackageName}}</h1>
         </button>
       </div>
     </div>
-    <div *ngIf="editActive" class="business-network-details">
+    <div *ngIf="editActive && fileType(currentFile)=='Readme'" class="business-network-details">
       <label class="edit-label margin-right" for="editName">Name</label>
       <input class="margin-right" id="editName" type="text" (blur)="editPackageName()" [(ngModel)]="inputPackageName">
       <label class="edit-label margin-right" for="editVersion">Version</label>
@@ -91,6 +92,24 @@ <h1 class="margin-right">{{deployedPackageName}}</h1>
         </button>
       </div>
     </div>
+    <div *ngIf="editActive && fileType(currentFile)!='Readme'" class="business-network-details">
+      <div class="flex-container" style="flex-direction:column">
+        <div class="edit-file-row">
+            <label class="edit-file-label" for="editName">Name</label>
+            <div *ngIf="fileType(currentFile)=='Model'" class="edit-file-hidden">models/</div>
+            <div *ngIf="fileType(currentFile)=='Script'" class="edit-file-hidden">lib/</div>
+            <div class="edit-file-value">
+                <input *ngIf="!fileNameError" style="margin-top: 0.2rem" type="text" (blur)="editFileName()" [(ngModel)]="inputFileNameArray[1]">
+                <input *ngIf="fileNameError" class="error-underline" style="margin-top: 0.2rem" type="text" (blur)="editFileName()" [(ngModel)]="inputFileNameArray[1]">
+            </div>
+            <div *ngIf="fileType(currentFile)=='Model'" class="edit-file-hidden">.cto</div>
+            <div *ngIf="fileType(currentFile)=='Script'" class="edit-file-hidden">.js</div>
+        </div>
+        <div *ngIf="fileNameError" class="error-message">
+              {{fileNameError}}
+        </div>
+    </div>
+    </div>
   </div>
 
   <editor-file [editorFile]="currentFile"></editor-file>

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

@@ -45,7 +45,7 @@ app-editor {
     .business-network-details {
       display: flex;
       height:50px;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.2rem;
 
       .business-network-version {
         margin-right: $space-smedium;
@@ -59,6 +59,35 @@ app-editor {
       .edit-label{
         line-height: 2.5rem;
         font-weight:bold;
+        flex-shrink:1;
+        margin-top: 0.2rem;
+      }
+
+      .edit-file-hidden{
+        line-height: 2.3rem;
+        color: $secondary-text;
+        flex-shrink:1;
+      }
+
+      .edit-file-label{
+        line-height: 2.5rem;
+        font-weight: bold;
+        color: $primary-text;
+        flex-shrink: 1;
+        margin-right: 1rem;
+        font-size:14px;
+      }
+
+      .edit-file-row{
+        flex:2;
+        display:flex;
+        padding-bottom:$space-medium;
+
+        .edit-file-value{
+            flex-basis:50%;
+            display:flex;
+            flex-direction: column;
+        }
       }
     }