[ACA-1646] "dev tools" extension (#567)

* dev tools extension project

* code editor integration

* latest editor, offline setup

* override extension config (session only)

* schema support

* wire external plugins with experimental flag

* update package scripts

* sidebar extensions scaffold

* propagate extension tabs to info drawer

* separate tab components for info drawer

* extensibility for info drawer

* support tab icons

projects/aca-dev-tools/karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

projects/aca-dev-tools/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/aca-dev-tools",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

projects/aca-dev-tools/ng-package.prod.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/aca-dev-tools",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

projects/aca-dev-tools/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "aca-dev-tools",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@ngstack/code-editor": "^0.4.1"
+  }
+}

projects/aca-dev-tools/src/lib/aca-dev-tools.component.html

@@ -0,0 +1,39 @@
+<div class="inner-layout">
+    <div class="inner-layout__header">
+        <adf-breadcrumb root="app.extensions.json"></adf-breadcrumb>
+        <adf-toolbar class="inline">
+            <button
+                mat-icon-button
+                color="primary"
+                title="Save changes"
+                (click)="saveChanges()">
+                <mat-icon>save_alt</mat-icon>
+            </button>
+            <button
+                mat-icon-button
+                color="primary"
+                title="Revert changes"
+                (click)="revertChanges()">
+                <mat-icon>history</mat-icon>
+            </button>
+        </adf-toolbar>
+    </div>
+    <div class="inner-layout__content">
+        <div class="inner-layout__panel">
+
+            <div fxLayout="column" fxFill>
+                <div fxLayout fxFlex>
+                    <div fxFlex="100">
+                        <ng-container *ngIf="model">
+                            <ngs-code-editor
+                                [codeModel]="model"
+                                (valueChanged)="onCodeChanged($event)">
+                            </ngs-code-editor>
+                        </ng-container>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>

projects/aca-dev-tools/src/lib/aca-dev-tools.component.scss

@@ -0,0 +1,23 @@
+.lib-aca-dev-tools {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    min-height: 0;
+}
+
+.ngs-code-editor {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    min-height: 0;
+
+    .editor {
+        // border: 1px solid grey;
+        // min-height: 400px;
+    }
+}

projects/aca-dev-tools/src/lib/aca-dev-tools.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AcaDevToolsComponent } from './aca-dev-tools.component';
+
+describe('AcaDevToolsComponent', () => {
+  let component: AcaDevToolsComponent;
+  let fixture: ComponentFixture<AcaDevToolsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcaDevToolsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcaDevToolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/aca-dev-tools/src/lib/aca-dev-tools.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { CodeModel } from '@ngstack/code-editor';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { forkJoin } from 'rxjs';
+
+@Component({
+    selector: 'lib-aca-dev-tools',
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'lib-aca-dev-tools' },
+    templateUrl: './aca-dev-tools.component.html',
+    styleUrls: ['./aca-dev-tools.component.scss']
+})
+export class AcaDevToolsComponent implements OnInit {
+    model: CodeModel = null;
+
+    private code: string;
+
+    constructor(private route: ActivatedRoute, private http: HttpClient) {}
+
+    ngOnInit() {
+        const routeData = this.route.snapshot.data;
+        if (!routeData) {
+            return;
+        }
+
+        const schemaUri = routeData.schemaUri;
+        const getSchema = this.http.get(routeData.schemaPath);
+        const getConfig = this.http.get(routeData.configPath, { responseType: 'text' });
+
+        forkJoin([getSchema, getConfig]).subscribe(
+            ([schema, config]) => {
+                let code = config;
+
+                const override = sessionStorage.getItem('aca.extension.config');
+                if (override) {
+                    code = override;
+                }
+
+                this.model = {
+                    language: 'json',
+                    uri: 'app.extensions.json',
+                    value: code,
+                    schemas: [
+                        {
+                            uri: schemaUri,
+                            schema
+                        }
+                    ]
+                };
+                this.code = code;
+            },
+            err => {
+                console.log(err);
+            }
+        );
+    }
+
+    onCodeChanged(value: string) {
+        this.code = value;
+    }
+
+    saveChanges() {
+        sessionStorage.setItem('aca.extension.config', this.code);
+        // window.location.reload(true);
+    }
+
+    revertChanges() {
+        sessionStorage.removeItem('aca.extension.config');
+        window.location.reload(true);
+    }
+}

projects/aca-dev-tools/src/lib/aca-dev-tools.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CodeEditorModule } from '@ngstack/code-editor';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { AcaDevToolsComponent } from './aca-dev-tools.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+@NgModule({
+    imports: [
+        FlexLayoutModule,
+        CodeEditorModule.forChild(),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [AcaDevToolsComponent],
+    exports: [AcaDevToolsComponent],
+    entryComponents: [AcaDevToolsComponent]
+})
+export class AcaDevToolsModule {}

projects/aca-dev-tools/src/lib/aca-dev-tools.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AcaDevToolsService } from './aca-dev-tools.service';
+
+describe('AcaDevToolsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AcaDevToolsService]
+    });
+  });
+
+  it('should be created', inject([AcaDevToolsService], (service: AcaDevToolsService) => {
+    expect(service).toBeTruthy();
+  }));
+});

projects/aca-dev-tools/src/lib/aca-dev-tools.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AcaDevToolsService {
+
+  constructor() { }
+}

projects/aca-dev-tools/src/public_api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of aca-dev-tools
+ */
+
+export * from './lib/aca-dev-tools.service';
+export * from './lib/aca-dev-tools.component';
+export * from './lib/aca-dev-tools.module';

projects/aca-dev-tools/src/test.ts

@@ -0,0 +1,22 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

projects/aca-dev-tools/tsconfig.lib.json

@@ -0,0 +1,33 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2015"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "flatModuleId": "AUTOGENERATED",
+    "flatModuleOutFile": "AUTOGENERATED"
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/aca-dev-tools/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/aca-dev-tools/tslint.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "lib",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "lib",
+            "kebab-case"
+        ]
+    }
+}