Extensions: Use annotations for extensions

angular.json

@@ -70,10 +70,10 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
+            "preserveSymlinks": true,
             "sourceMap": false,
             "main": "src/frontend/test.ts",
             "karmaConfig": "./karma.conf.js",
-            "sourceMap": false,
             "polyfills": "src/frontend/polyfills.ts",
             "tsConfig": "src/frontend/tsconfig.spec.json",
             "scripts": [],

examples/custom-src/frontend/app/custom/acme-login/acme-login.component.html

@@ -0,0 +1,33 @@
+<app-intro-screen class="acme-login login__busy" [ngClass]="{'acme-login__busy': busy$ | async }">
+  <mat-card class="login__card mat-elevation-z">
+    <app-stratos-title></app-stratos-title>
+    <div class="acme-login__body">
+      <div class="acme-login__form-outer" [ngClass]="{'acme-login-sso': ssoLogin}">
+        <form class="acme-login__form" name="loginForm" (ngSubmit)="login()" #loginForm="ngForm">
+          <mat-form-field *ngIf="!ssoLogin">
+            <input matInput required [(ngModel)]="username" name="username" placeholder="Username">
+          </mat-form-field>
+          <mat-form-field *ngIf="!ssoLogin">
+            <input matInput required type="password" [(ngModel)]="password" name="password" placeholder="Password">
+          </mat-form-field>
+          <button class="login__submit" color="primary" *ngIf="!loggedIn" type="submit" mat-button mat-raised-button [disabled]="!ssoLogin && !loginForm.valid">Login</button>
+        </form>
+      </div>
+      <div class="acme-login__loading">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
+    </div>
+  </mat-card>
+  <div class="acme-login-message" [ngClass]="{'login-message--show': !!message, 'login-message-error': this.error}">
+      {{ message }}
+  </div>
+  <div class="acme-login__footer">
+    <div class="acme-login__copyright">
+      <span *ngIf="config.copyright" [innerHTML]="config.copyright"></span>
+    </div>
+    <div class="acme-login__logo">
+      <img src="/assets/custom/acme_logo.png">
+    </div>
+  </div>
+</app-intro-screen>
+

examples/custom-src/frontend/app/custom/acme-login/acme-login.component.scss

@@ -0,0 +1,71 @@
+@import '../../../sass/custom/acme-colors';
+.acme-login {
+  &__card.mat-card {
+    box-shadow: 0 0 20px 9px rgba(0, 0, 0, .2);
+    padding: 0;
+    width: 320px;
+    mat-form-field {
+      width: 100%;
+    }
+  }
+  &__body {
+    padding: 24px;
+    padding-top: 0;
+  }
+  &__submit {
+    width: 100%;
+  }
+  &-message {
+    font-size: 18px;
+    height: 20px;
+    padding-top: 20px;
+  }
+  &__form {
+    display: flex;
+    flex-direction: column;
+  }
+  &__form-outer {
+    $cubic: cubic-bezier(.215, .61, .355, 1);
+    $time: 250ms;
+    height: 180px;
+    opacity: 1;
+    transition: height $time $cubic 100ms, opacity $time * 2 $cubic $time + 50ms;
+    &.login-sso {
+      height: auto;
+    }
+  }
+  &__loading {
+    display: none;
+  }
+  &__busy {
+    .login__form {
+      display: none;
+    }
+    .login__form-outer {
+      height: 0;
+      opacity: 0;
+    }
+    .login__loading {
+      display: block;
+    }
+  }
+  &__footer {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    padding: 20px 0;
+    position: absolute;
+    width: 90%;
+  }
+  &__copyright {
+    color: #333;
+    flex: 1;
+  }
+  &__logo {
+    img {
+      width: 79px;
+    }
+  }
+}

examples/custom-src/frontend/app/custom/acme-login/acme-login.component.spec.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { StoreModule } from '@ngrx/store';
+
+import { CoreModule } from '../../core/core.module';
+import { SharedModule } from '../../shared/shared.module';
+import { appReducers } from '../../store/reducers.module';
+import { AcmeLoginComponent } from './acme-login.component';
+
+describe('AcmeLoginComponent', () => {
+  let component: AcmeLoginComponent;
+  let fixture: ComponentFixture<AcmeLoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcmeLoginComponent ],
+      imports: [
+        CommonModule,
+        CoreModule,
+        SharedModule,
+        RouterTestingModule,
+        BrowserAnimationsModule,
+        StoreModule.forRoot(appReducers)
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcmeLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

examples/custom-src/frontend/app/custom/acme-login/acme-login.component.ts

@@ -0,0 +1,25 @@
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Customizations, CustomizationsMetadata } from '../../core/customizations.types';
+import { LoginPageComponent } from '../../features/login/login-page/login-page.component';
+import { AppState } from '../../store/app-state';
+import { StratosLoginComponent } from '../../core/extension/extension-service';
+
+@StratosLoginComponent()
+@Component({
+  selector: 'app-acme-login',
+  templateUrl: './acme-login.component.html',
+  styleUrls: ['./acme-login.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AcmeLoginComponent extends LoginPageComponent {
+
+  constructor(
+    store: Store<AppState>,
+    router: Router,
+    @Inject(Customizations) public config: CustomizationsMetadata
+  ) {
+    super(store, router);
+   }
+}

examples/custom-src/frontend/app/custom/app-action-extension/app-action-extension.component.html

@@ -0,0 +1,5 @@
+<app-page-header>
+  Example custom component
+</app-page-header>
+
+Example custom component invoked by a custom action

examples/custom-src/frontend/app/custom/app-action-extension/app-action-extension.component.spec.ts

@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppActionExtensionComponent } from './app-action-extension.component';
+import { CoreModule } from '../../core/core.module';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SharedModule } from '../../shared/shared.module';
+import { createBasicStoreModule } from '../../test-framework/store-test-helper';
+
+describe('AppActionExtensionComponent', () => {
+  let component: AppActionExtensionComponent;
+  let fixture: ComponentFixture<AppActionExtensionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AppActionExtensionComponent ],
+      imports: [
+        CoreModule,
+        RouterTestingModule,
+        SharedModule,
+        createBasicStoreModule()
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppActionExtensionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

examples/custom-src/frontend/app/custom/app-action-extension/app-action-extension.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { StratosTab, StratosTabType, StratosAction, StratosActionType } from '../../core/extension/extension-service';
+
+@StratosAction({
+  type: StratosActionType.Applications,
+  label: 'Custom App Action',
+  link: 'exampleAction',
+  icon: 'extension'
+})
+@Component({
+  selector: 'app-app-action-extension',
+  templateUrl: './app-action-extension.component.html',
+  styleUrls: ['./app-action-extension.component.scss']
+})
+export class AppActionExtensionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

examples/custom-src/frontend/app/custom/app-tab-extension/app-tab-extension.component.html

@@ -0,0 +1 @@
+Example custom tab

examples/custom-src/frontend/app/custom/app-tab-extension/app-tab-extension.component.spec.ts

@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppTabExtensionComponent } from './app-tab-extension.component';
+import { CoreModule } from '../../core/core.module';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SharedModule } from '../../shared/shared.module';
+import { createBasicStoreModule } from '../../test-framework/store-test-helper';
+
+describe('AppTabExtensionComponent', () => {
+  let component: AppTabExtensionComponent;
+  let fixture: ComponentFixture<AppTabExtensionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AppTabExtensionComponent ],
+      imports: [
+        CoreModule,
+        RouterTestingModule,
+        SharedModule,
+        createBasicStoreModule()
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppTabExtensionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

examples/custom-src/frontend/app/custom/app-tab-extension/app-tab-extension.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { StratosTab, StratosTabType, StratosAction, StratosActionType } from '../../core/extension/extension-service';
+
+@StratosTab({
+  type: StratosTabType.Application,
+  label: 'Example App Tab',
+  link: 'example'
+})
+@Component({
+  selector: 'app-app-tab-extension',
+  templateUrl: './app-tab-extension.component.html',
+  styleUrls: ['./app-tab-extension.component.scss']
+})
+export class AppTabExtensionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

examples/custom-src/frontend/app/custom/custom.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { CoreModule } from '../core/core.module';
+import { Customizations, CustomizationsMetadata } from '../core/customizations.types';
+import { MDAppModule } from '../core/md.module';
+import { SharedModule } from '../shared/shared.module';
+import { AcmeLoginComponent } from './acme-login/acme-login.component';
+import { StratosExtension } from '../core/extension/extension-service';
+import { AppTabExtensionComponent } from './app-tab-extension/app-tab-extension.component';
+import { AppActionExtensionComponent } from './app-action-extension/app-action-extension.component';
+
+const AcmeCustomizations: CustomizationsMetadata = {
+  copyright: '© 2018 ACME Corp',
+  hasEula: true,
+};
+
+// CustomModule is bundled in to the main application bundle
+@StratosExtension({
+  routes: [{
+    path: 'example',
+    loadChildren: 'app/custom/nav-extension/nav-extension.module#NavExtensionModule',
+    data: {
+      stratosNavigation: {
+        text: 'Example',
+        matIcon: 'extension'
+      }
+    }
+  }]
+})
+@NgModule({
+  imports: [
+    CoreModule,
+    SharedModule,
+    MDAppModule,
+  ],
+  declarations: [
+    AcmeLoginComponent,
+    AppTabExtensionComponent,
+    AppActionExtensionComponent
+  ],
+  entryComponents: [
+    AcmeLoginComponent,
+    // You must specify the tab and action as an entry components
+    AppTabExtensionComponent,
+    AppActionExtensionComponent
+  ],
+  providers: [
+    { provide: Customizations, useValue: AcmeCustomizations }
+  ],
+})
+export class CustomModule {}

examples/custom-src/frontend/app/custom/nav-extension/example-component/example.component.html

@@ -0,0 +1,4 @@
+<app-page-header>
+  <h1>Example Stratos Navigation Extension</h1>
+</app-page-header>
+<h1>Example Stratos Navigation Extension</h1>

examples/custom-src/frontend/app/custom/nav-extension/example-component/example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './example.component.html',
+  styleUrls: ['./example.component.scss'],
+})
+export class ExampleComponent {}
+

examples/custom-src/frontend/app/custom/nav-extension/nav-extension.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { NavExtensionRoutingModule } from './nav-extension.routing';
+import { ExampleComponent } from './example-component/example.component';
+import { CoreModule } from '../../core/core.module';
+import { SharedModule } from '../../shared/shared.module';
+
+@NgModule({
+  imports: [
+    CoreModule,
+    SharedModule,
+    NavExtensionRoutingModule,
+  ],
+  declarations: [
+    ExampleComponent
+  ],
+  entryComponents: [
+    ExampleComponent
+  ]
+})
+export class NavExtensionModule {}