Feature/ace_editor (#282)

* Removes HighlightJS * Adds ace editor and new highlighting method
dockstore · May 10, 2018 · a31f346 · a31f346
1 parent ea98438
commit a31f346
Show file tree

Hide file tree

Showing 55 changed files with 548 additions and 629 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -31,11 +31,17 @@
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/ace-builds/src-min-noconflict/ace.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-yaml.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-json.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-dockerfile.js",
+        "../node_modules/ace-builds/src-min-noconflict/mode-text.js",
+        "../node_modules/ace-builds/src-min-noconflict/theme-idle_fingers.js",
+        "../node_modules/ace-builds/src-min-noconflict/ext-searchbox.js",
         "../node_modules/bootstrap/dist/js/bootstrap.js",
         "../node_modules/datatables.net/js/jquery.dataTables.js",
         "../node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
         "../node_modules/jquery-colorbox/jquery.colorbox.js",
-        "../node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js",
         "../node_modules/cytoscape/dist/cytoscape.js",
         "../node_modules/dagre/dist/dagre.min.js",
         "../node_modules/cytoscape-dagre/cytoscape-dagre.js",
@@ -77,7 +83,7 @@
       "config": "./karma.conf.js"
     },
     "codeCoverage": {
-      "exclude": ["src/app/shared/swagger/**", "src/app/shared/angular2-highlight-js/lib/**", "src/app/test/**"]
+      "exclude": ["src/app/shared/swagger/**", "src/app/test/**"]
     }
   },
   "defaults": {

diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,7 @@
 /tmp
 /out-tsc
 /src/app/**/*.js
-!/src/app/shared/angular2-highlight-js/lib/*.js
+!/src/app/shared/grammars/*.js
 src/app/shared/swagger/
 swagger-codegen-cli.jar
 

diff --git a/cypress/integration/toolDetails.js b/cypress/integration/toolDetails.js
@@ -78,7 +78,7 @@ describe('Dockstore Tool Details of quay.io/A2/a', function() {
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -94,7 +94,7 @@ describe('Dockstore Tool Details of quay.io/A2/a', function() {
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -110,7 +110,7 @@ describe('Dockstore Tool Details of quay.io/A2/a', function() {
 
             it('Should not have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("not.be.visible")
                 cy
                     .contains('A Test Parameter File associated with this Docker container, descriptor type and version could not be found.')
@@ -148,7 +148,7 @@ describe('Dockstore Tool Details of quay.io/garyluu/dockstore-cgpmap/cgpmap-cram
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -164,7 +164,7 @@ describe('Dockstore Tool Details of quay.io/garyluu/dockstore-cgpmap/cgpmap-cram
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });
@@ -180,7 +180,7 @@ describe('Dockstore Tool Details of quay.io/garyluu/dockstore-cgpmap/cgpmap-cram
 
             it('Should have content in file viewer', function() {
                 cy
-                    .get(".hljs.yaml")
+                    .get(".ace_content")
                     .should("be.visible")
             });
         });

diff --git a/cypress/integration/workflowDetails.js b/cypress/integration/workflowDetails.js
@@ -79,7 +79,7 @@ describe('Dockstore Workflow Details', function() {
 
     it('Should have content in file viewer', function() {
       cy
-      .get(".hljs.yaml")
+      .get(".ace_content")
       .should("be.visible")
     });
 
@@ -94,7 +94,7 @@ describe('Dockstore Workflow Details', function() {
 
           it('Should not have content in file viewer', function() {
             cy
-              .get(".hljs.yaml")
+              .get(".ace_content")
                 .children()
                 .should("not.be.visible")
           });

diff --git a/karma.conf.js b/karma.conf.js
@@ -10,6 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
+      require('karma-spec-reporter'),
       require('@angular/cli/plugins/karma')
     ],
     client:{
@@ -22,7 +23,7 @@ module.exports = function (config) {
     angularCli: {
       environment: 'dev'
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ['kjhtml', 'spec'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@types/elastic.js": "^1.2.8",
     "@types/elasticsearch": "^5.0.14",
     "@types/node": "^6.0.60",
+    "ace-builds": "^1.3.3",
     "angular-datatables": "^5.0.0",
     "angular-tag-cloud-module": "^2.4.0",
     "angular2-markdown": "^2.2.3",
@@ -50,7 +51,6 @@
     "datatables.net-dt": "^1.10.15",
     "elasticsearch": "^13.0.0",
     "font-awesome": "^4.7.0",
-    "highlightjs-line-numbers.js": "^2.0.0",
     "jquery": "^3.2.1",
     "jquery-colorbox": "^1.6.4",
     "ng2-ui-auth": "^6.2.0",
@@ -76,6 +76,7 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-spec-reporter": "0.0.32",
     "protractor": "~5.1.2",
     "tslint": "~5.7.0"
   }

diff --git a/src/app/container/descriptors/descriptors.component.html b/src/app/container/descriptors/descriptors.component.html
@@ -33,16 +33,17 @@
     </alert>
   </div>
 
-  <div *ngIf="content" class="code-copy">
-    <div class="code-copy-button btn-group">
+  <div *ngIf="content && _selectedVersion?.valid" class="row no-margin">
+    <div class="btn-group">
       <a *ngIf="(published$ | async)" download [href]="descriptorPath" class="btn btn-default" type="button" title="{{filePath}}">
         <span class="glyphicon glyphicon-download"></span>
       </a>
-      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" [ngClass]="{'btn-copy':toolCopyBtn === 'descriptors_file'}"
-              (cbOnSuccess)="toolCopyBtnClick('descriptors_file')" title="Copy to clipboard">
+      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" title="Copy to clipboard">
         <span class="glyphicon glyphicon-copy"></span>
       </button>
     </div>
-    <section [innerHTML]="fileService.highlightCode(content)"></section>
+    <div [hidden]="!content || !_selectedVersion?.valid">
+      <app-code-editor [(content)]="content" [filepath]="filePath"></app-code-editor>
+    </div>
   </div>
 </div>
diff --git a/src/app/container/descriptors/descriptors.component.spec.ts b/src/app/container/descriptors/descriptors.component.spec.ts
@@ -19,7 +19,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
 
 import { ContainersStubService, ContainerStubService } from '../../../../src/app/test/service-stubs';
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { ContainersService } from '../../shared/swagger';
 import { ContainerService } from './../../shared/container.service';
 import { FileService } from './../../shared/file.service';
@@ -44,7 +43,6 @@ describe('DescriptorsComponent', () => {
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         { provide: ToolDescriptorService, useClass: DescriptorsStubService },
-        { provide: HighlightJsService, useClass: HighlightJsService },
         { provide: ContainersService, useClass: ContainersStubService },
         { provide: ContainerService, useClass: ContainerStubService },
         { provide: FileService, useClass: FileStubService }]

diff --git a/src/app/container/descriptors/descriptors.component.ts b/src/app/container/descriptors/descriptors.component.ts
@@ -13,10 +13,9 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { AfterViewChecked, Component, ElementRef, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { ContainerService } from '../../shared/container.service';
 import { FileService } from '../../shared/file.service';
 import { EntryFileSelector } from '../../shared/selectors/entry-file-selector';
@@ -30,7 +29,7 @@ import { ToolDescriptorService } from './tool-descriptor.service';
   providers: [ToolDescriptorService]
 })
 
-export class DescriptorsComponent extends EntryFileSelector implements AfterViewChecked {
+export class DescriptorsComponent extends EntryFileSelector {
 
   @Input() id: number;
   @Input() entrypath: string;
@@ -42,10 +41,8 @@ export class DescriptorsComponent extends EntryFileSelector implements AfterView
   public descriptorPath: string;
   public filePath: string;
   constructor(private containerService: ContainerService,
-              private highlightJsService: HighlightJsService,
               private descriptorsService: ToolDescriptorService,
-              public fileService: FileService,
-              private elementRef: ElementRef) {
+              public fileService: FileService) {
     super();
     this.published$ = this.containerService.toolIsPublished$;
   }
@@ -60,18 +57,10 @@ export class DescriptorsComponent extends EntryFileSelector implements AfterView
 
   reactToFile(): void {
     this.content = this.currentFile.content;
-    this.contentHighlighted = true;
     this.descriptorPath = this.getDescriptorPath(this.currentDescriptor);
     this.filePath = this.getFilePath(this.currentFile);
   }
 
-  ngAfterViewChecked() {
-    if (this.contentHighlighted && !this.nullDescriptors) {
-      this.contentHighlighted = false;
-      this.highlightJsService.highlight(this.elementRef.nativeElement.querySelector('.highlight'));
-    }
-  }
-
   private getDescriptorPath(descType): string {
     return this.fileService.getDescriptorPath(this.entrypath, this._selectedVersion, this.currentFile, this.currentDescriptor, 'tool');
   }

diff --git a/src/app/container/dockerfile/dockerfile.component.html b/src/app/container/dockerfile/dockerfile.component.html
@@ -21,16 +21,17 @@
       &nbsp;A Dockerfile associated with this Docker container could not be found.
     </alert>
   </div>
-  <div *ngIf="!nullContent && _selectedVersion?.valid" class="code-copy">
-    <div class="code-copy-button btn-group">
+  <div *ngIf="!nullContent && _selectedVersion?.valid" class="row no-margin">
+    <div class="btn-group" role="group">
       <a *ngIf="(published$ | async)" download="{{filepath}}" [href]="containerFilePath" class="btn btn-default" type="button" title="{{filepath}}">
         <span class="glyphicon glyphicon-download"></span>
       </a>
-      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" [ngClass]="{'btn-copy':toolCopyBtn === 'dockerfile'}"
-              (cbOnSuccess)="toolCopyBtnClick('dockerfile')" title="Copy to clipboard">
+      <button class="btn btn-default" type="button" ngxClipboard [cbContent]="content" title="Copy to clipboard">
         <span class="glyphicon glyphicon-copy"></span>
       </button>
     </div>
-    <section [innerHTML]="fileService.highlightCode(content)"></section>
+  </div>
+  <div [hidden]="!content || !_selectedVersion?.valid">
+    <app-code-editor [(content)]="content" [filepath]="filepath"></app-code-editor>
   </div>
 </div>
diff --git a/src/app/container/dockerfile/dockerfile.component.spec.ts b/src/app/container/dockerfile/dockerfile.component.spec.ts
@@ -21,7 +21,6 @@ import { FileService } from './../../shared/file.service';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { DockerfileComponent } from './dockerfile.component';
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 class DockerFileStubService { }
 
 describe('DockerfileComponent', () => {
@@ -32,7 +31,7 @@ describe('DockerfileComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ DockerfileComponent ],
       schemas: [NO_ERRORS_SCHEMA],
-      providers: [HighlightJsService,
+      providers: [
         { provide: FileService, useClass: FileStubService },
         { provide: ContainerService, useClass: ContainerStubService },
         { provide: ContainersService, useClass: ContainersStubService}

diff --git a/src/app/container/dockerfile/dockerfile.component.ts b/src/app/container/dockerfile/dockerfile.component.ts
@@ -13,10 +13,9 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-import { AfterViewChecked, Component, ElementRef, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 
-import { HighlightJsService } from '../../shared/angular2-highlight-js/lib/highlight-js.module';
 import { ContainerService } from '../../shared/container.service';
 import { Dockstore } from '../../shared/dockstore.model';
 import { FileService } from '../../shared/file.service';
@@ -28,7 +27,7 @@ import { ga4ghPath } from './../../shared/constants';
   selector: 'app-dockerfile',
   templateUrl: './dockerfile.component.html',
 })
-export class DockerfileComponent implements AfterViewChecked {
+export class DockerfileComponent {
 
   @Input() id: number;
   @Input() entrypath: string;
@@ -40,12 +39,9 @@ export class DockerfileComponent implements AfterViewChecked {
   content: string;
   filepath: string;
   nullContent: boolean;
-  contentHighlighted: boolean;
   public published$: Observable<boolean>;
   public containerFilePath: string;
-  constructor(private highlightJsService: HighlightJsService,
-              public fileService: FileService,
-              private elementRef: ElementRef,
+  constructor(public fileService: FileService,
               private containerService: ContainerService, private containersService: ContainersService) {
     this.nullContent = false;
     this.filepath = '/Dockerfile';
@@ -58,7 +54,6 @@ export class DockerfileComponent implements AfterViewChecked {
       this.containersService.dockerfile(this.id, this._selectedVersion.name).first()
         .subscribe(file => {
             this.content = file.content;
-            this.contentHighlighted = true;
             this.filepath = file.path;
             this.containerFilePath = this.getContainerfilePath();
           }, error => {
@@ -71,12 +66,6 @@ export class DockerfileComponent implements AfterViewChecked {
       this.content = null;
     }
   }
-  ngAfterViewChecked() {
-    if (this.contentHighlighted && !this.nullContent && this.elementRef.nativeElement.querySelector('.highlight')) {
-      this.contentHighlighted = false;
-      this.highlightJsService.highlight(this.elementRef.nativeElement.querySelector('.highlight'));
-    }
-  }
 
   private getContainerfilePath(): string {
     const basepath = Dockstore.API_URI + ga4ghPath + '/tools/';