feat: add the 'About' menu with changelog

changelog.md

@@ -4,6 +4,3 @@
 ### v0.3.0 (TBA)
 
  - Everything is rewritten
- -
-
-####

package.json

@@ -20,7 +20,7 @@
     "build:editor:dist:win": "npm run -s build:editor:base && electron-builder --win --x64",
     "build:editor:dist:mac": "npm run -s build:editor:base && electron-builder --mac --x64",
     "build:editor:dist": "npm run -s build:editor:base && electron-builder --win --mac --x64",
-    "build:editor:base": "rimraf dist app && ts-node src/app/tools/setProfile.ts && tsc && ng build -prod",
+    "build:editor:base": "rimraf dist app && marked changelog.md -o src/app/editor/about/changelog/changelog.component.html && ts-node src/app/tools/setProfile.ts && tsc && ng build -prod",
     "start": "ts-node src/app/tools/setProfile.ts && tsc && npm-run-all -p start:ng start:electron",
     "start:ng": "ng serve",
     "start:electron": "wait-on http-get://localhost:4200/ && electron dist/src/electron --serve --debug",
@@ -140,6 +140,7 @@
     "fast-json-patch": "^2.0.4",
     "golden-layout": "^1.5.9",
     "highlight.js": "^9.12.0",
+    "marked": "^0.3.19",
     "mocha": "^3.5.0",
     "moment": "^2.18.1",
     "node-sass": "^4.5.3",

src/app/assets/styles/golden.scss

@@ -57,7 +57,7 @@ $color10: #ffffff; // Appears 2 time
   opacity: 0.001;
   transition: opacity 200ms ease;
 
-  &:hover, // When hovered by mouse...
+  &:hover, /* When hovered by mouse...*/
   &.lm_dragging {
     opacity: 1;
   }
@@ -117,7 +117,7 @@ $color10: #ffffff; // Appears 2 time
 }
 
 .lm_tab {
-  &:hover, // If Tab is hovered
+  &:hover, /* If Tab is hovered*/
   &.lm_active // If Tab is active, so if it's in foreground
  {
     background: $color-primary;

src/app/editor/about/about-modal/about-modal.component.html

@@ -0,0 +1,18 @@
+<div mat-dialog-content>
+  <div class="header layout-row layout-align-start-center">
+    <img src="assets/images/icon.svg" class="CDK">
+    <h1>
+      Control Development Kit
+      <small>Version {{ version }} built on {{ builtAt | amDateFormat: 'YYYY-MM-DD' }} in Redmond, WA.</small>
+    </h1>
+  </div>
+  <about-changelog></about-changelog>
+</div>
+
+<div mat-dialog-actions>
+  <footer>
+    <span>Copyright Microsoft. <a class="body-link" (click)="openLicenses()">Show Licenses</a>.</span>
+  </footer>
+  <span class="flex-fill"></span>
+  <button mat-button (click)="dialog.close()">Close</button>
+</div>

src/app/editor/about/about-modal/about-modal.component.scss

@@ -0,0 +1,33 @@
+@import '../../../assets/styles/declarations';
+
+:host {
+  width: 500px;
+  display: block;
+}
+
+.header {
+  img {
+    width: 64px;
+    margin-right: $dimension-gutter-md * (3 / 2);
+  }
+
+  h1 {
+    font-weight: normal;
+
+    small {
+      display: block;
+      font-size: 0.4em;
+    }
+  }
+}
+
+changelog {
+  max-height: 50vh;
+}
+
+footer {
+  font-size: 0.8em;
+  display: flex;
+  align-items: center;
+  color: $color-text-muted;
+}

src/app/editor/about/about-modal/about-modal.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+
+import { AppConfig } from '../../editor.config';
+
+/**
+ * The InstallNodeModalComponent is shown instructing the user to install
+ * Node.js. It appears if Node isn't found in the user's path.
+ */
+@Component({
+  selector: 'about-modal',
+  templateUrl: './about-modal.component.html',
+  styleUrls: ['./about-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AboutModalComponent {
+  /**
+   * CDK version.
+   */
+  public readonly version = AppConfig.version;
+
+  /**
+   * Date the CDK was built.
+   */
+  public readonly builtAt = AppConfig.builtAt;
+
+  constructor(public readonly dialog: MatDialogRef<void>) {}
+
+  public openLicenses() {
+    window.open(`3rdpartylicenses.txt`);
+  }
+}

src/app/editor/about/about.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MomentModule } from 'angular2-moment';
+
+import { MatButtonModule, MatDialogModule } from '@angular/material';
+import { AboutModalComponent } from './about-modal/about-modal.component';
+import { ChangelogComponent } from './changelog/changelog.component';
+
+/**
+ * Module that displays the "about" menu, with changelog.
+ */
+@NgModule({
+  imports: [MomentModule, CommonModule, MatButtonModule, MatDialogModule],
+  declarations: [AboutModalComponent, ChangelogComponent],
+  entryComponents: [AboutModalComponent],
+})
+export class AboutModule {}

src/app/editor/about/changelog/changelog.component.html

@@ -0,0 +1,6 @@
+<h1 id="changelog">Changelog</h1>
+<p><a name="v0.3.0"></a></p>
+<h3 id="v0-3-0-tba-">v0.3.0 (TBA)</h3>
+<ul>
+<li>Everything is rewritten</li>
+</ul>

src/app/editor/about/changelog/changelog.component.scss

@@ -0,0 +1,10 @@
+@import '../../../assets/styles/declarations';
+
+:host {
+  display: block;
+  background: $color-medium-gray;
+  margin-top: $dimension-gutter-sm;
+  padding: $dimension-gutter-sm;
+  box-shadow: inset 0 3px 8px rgba(#000, 0.2);
+  font-size: 0.8em;
+}

src/app/editor/about/changelog/changelog.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * The ChangelogComponents holds the marked-rendered changelog html,
+ * and applies some small styling.
+ */
+@Component({
+  selector: 'about-changelog',
+  templateUrl: './changelog.component.html',
+  styleUrls: ['./changelog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChangelogComponent {}

src/app/editor/editor.config.ts

@@ -10,8 +10,10 @@ export let AppConfig: {
   production: boolean;
   environment: string;
   version: string;
+  builtAt: Date;
 } = <any>{
   version: VERSION,
+  builtAt: new Date(1524270905074),
 };
 
 console.log('environment:', ENV);

src/app/editor/layout/layout.module.ts

@@ -5,6 +5,7 @@ import { MatIconModule } from '@angular/material';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 
+import { AboutModule } from '../about/about.module';
 import { AccountModule } from '../account/account.module';
 import { ControlsConsoleModule } from '../controls-console/controls-console.module';
 import { ControlsModule } from '../controls/controls.module';
@@ -27,6 +28,7 @@ import { WorkspaceComponent } from './workspace/workspace.component';
  */
 @NgModule({
   imports: [
+    AboutModule,
     AccountModule,
     CommonModule,
     ControlsConsoleModule,

src/app/editor/layout/topnav/topnav.component.html

@@ -44,7 +44,7 @@
     <menu-bar-item openExternal="https://dev.mixer.com" text="Documentation"></menu-bar-item>
     <menu-bar-item openExternal="https://mixer.com/lab" text="Interactive Studio"></menu-bar-item>
     <menu-bar-item (click)="openIssue()" text="Report Issue"></menu-bar-item>
-    <menu-bar-item text="About the CDK"></menu-bar-item>
+    <menu-bar-item (click)="openAbout()" text="About the CDK"></menu-bar-item>
   </menu-bar-items>
 </menu-bar>
 

src/app/editor/layout/topnav/topnav.component.ts

@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material';
 import { Store } from '@ngrx/store';
 import { map, take } from 'rxjs/operators';
 
+import { AboutModalComponent } from '../../about/about-modal/about-modal.component';
 import { RequireAuth } from '../../account/account.actions';
 import { ReportGenericError } from '../../bedrock.actions';
 import * as fromRoot from '../../bedrock.reducers';
@@ -150,6 +151,13 @@ export class TopNavComponent {
     this.store.dispatch(new SetRemoteState(RemoteState.Disconnected));
   }
 
+  /**
+   * Opens the about modal.
+   */
+  public openAbout() {
+    this.dialog.open(AboutModalComponent);
+  }
+
   /**
    * Toggles the visibility of a panel.
    */

src/app/editor/new-project/attribute-selection/attribute-selection.component.ts

@@ -10,7 +10,7 @@ import * as fromRoot from '../../bedrock.reducers';
 import { ElectronService } from '../../electron.service';
 import { createRandomProjectName } from '../../shared/name-generator';
 import { projectNameValidator } from '../../shared/validators';
-import { GoBack, SetDetails, StartCreating,  } from '../new-project.actions';
+import { GoBack, SetDetails, StartCreating } from '../new-project.actions';
 import * as fromNewProject from '../new-project.reducer';
 
 /**

src/app/editor/new-project/template-selection/template-selection.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 
 import * as fromRoot from '../../bedrock.reducers';
-import { ChangeScreen, GoBack, SetTemplate,  } from '../new-project.actions';
+import { ChangeScreen, GoBack, SetTemplate } from '../new-project.actions';
 import * as fromNewProject from '../new-project.reducer';
 
 /**

src/app/tools/setProfile.ts

@@ -3,8 +3,12 @@ import { readFileSync, writeFileSync } from 'fs';
 const profile = process.env.ENV ? process.env.ENV : 'dev';
 const packageJson = require('../../../package.json');
 
-const contents = readFileSync(`${__dirname}/../editor/editor.config.ts`, 'utf-8')
+let contents = readFileSync(`${__dirname}/../editor/editor.config.ts`, 'utf-8')
   .replace(/^const ENV.+/m, `const ENV: string = '${profile}';`)
   .replace(/^const VERSION.+/m, `const VERSION: string = '${packageJson.version}';`);
 
+if (profile === 'production') {
+  contents = contents.replace(/^ {2}builtAt: new.+/m, `  builtAt: new Date(${Date.now()}),`);
+}
+
 writeFileSync(`${__dirname}/../editor/editor.config.ts`, contents);

src/cli/commands/publish.ts

@@ -15,7 +15,7 @@ export default async function(options: IPublishOptions): Promise<void> {
   const confirmation =
     `You about to publish your interactive ` +
     `controls. This will make them accessible to everyone on Mixer.`;
-  if (!options.force && !await writer.confirm(confirmation)) {
+  if (!options.force && !(await writer.confirm(confirmation))) {
     writer.write('Aborted.');
     return;
   }

src/cli/commands/unpublish.ts

@@ -19,7 +19,7 @@ export default async function(options: IUnpublishOptions): Promise<void> {
   const confirmation =
     `You about to unpublish version ${version} of your interactive` +
     `controls. This WILL BREAK the experience of anyone who is using this version.`;
-  if (!options.force && !await writer.confirm(confirmation, false)) {
+  if (!options.force && !(await writer.confirm(confirmation, false))) {
     writer.write('Aborted.');
     return;
   }

src/cli/commands/whoami.ts

@@ -2,7 +2,7 @@ import { IGlobalOptions } from '../options';
 import writer from '../writer';
 
 export default async function({ project }: IGlobalOptions) {
-  if (!await project.profile.hasAuthenticated()) {
+  if (!(await project.profile.hasAuthenticated())) {
     writer.write('You are not logged in! Run `miix login` to authenticated');
     return;
   }

src/server/datastore.ts

@@ -68,7 +68,9 @@ export class FileDataStore implements IDataStore {
 
     return globalContents || localContents
       ? merge(globalContents, localContents)
-      : defaultValue !== undefined ? defaultValue : null;
+      : defaultValue !== undefined
+        ? defaultValue
+        : null;
   }
 
   public async saveGlobal<T>(file: string, value: T): Promise<void> {

src/server/errors.ts

@@ -176,7 +176,8 @@ export class PublishHttpError extends UnexpectedHttpError {
         );
 
       case 'string.regex.base':
-        switch (invalid.path) { // quite possible we'll have more paths later
+        // quite possible we'll have more paths later
+        switch (invalid.path) {
           case 'id':
             return 'Your package name can only contain numbers, letters, and dashes.';
           default:

src/server/profile.ts

@@ -175,7 +175,7 @@ export class Profile {
       return hostProfile;
     }
 
-    if (!await this.tryLoadFile()) {
+    if (!(await this.tryLoadFile())) {
       throw new NoAuthenticationError();
     } else if (!this.tokensObj!.granted(Profile.necessaryScopes)) {
       throw new NoAuthenticationError();

src/server/quickstart.ts

@@ -100,7 +100,7 @@ export class Quickstarter extends Task<void> {
     pkg.devDependencies[newPackage] = '^0.1.0';
 
     const webpackConfig = path.join(this.targetPath(), 'webpack.config.js');
-    if (!await exists(webpackConfig)) {
+    if (!(await exists(webpackConfig))) {
       return;
     }
 
@@ -113,7 +113,7 @@ export class Quickstarter extends Task<void> {
    */
   private async extractProject(res: Response) {
     this.emitPrompt('mkdir', this.targetPath());
-    if (!await exists(this.targetPath())) {
+    if (!(await exists(this.targetPath()))) {
       await mkdir(this.targetPath());
     }
 

src/server/webpack-task.ts

@@ -57,7 +57,7 @@ export abstract class WebpackTask<T> extends ConsoleTask<T> {
    */
   protected async spawnChildProcess(): Promise<[T, ChildProcess]> {
     const config = await this.project.loadSetting('webpackConfigFile', 'webpack.config.js');
-    if (!await exists(this.project.baseDir(config))) {
+    if (!(await exists(this.project.baseDir(config)))) {
       throw new MissingWebpackConfig();
     }