Merge branch 'develop' into feature/#181-layer-upgrade-ui

CHANGELOG.md

@@ -6,6 +6,8 @@
 - Combined the search and multiselect interfaces into a single UI. This allows groups, software, and mitigations to be filtered alongside techniques and improves usability by moving the interface to a sidebar. See issue [#204](https://github.com/mitre-attack/attack-navigator/issues/204). 
 - Improved favicon for standardization with other ATT&CK tools.
 - Show technique even if it's disabled, as long as any of its sub-techniques are enabled. See issue [#298](https://github.com/mitre-attack/attack-navigator/issues/298)
+- Converted help menu to USAGE.md that can be accessed as a raw markdown outside of app. See issue [#179](https://github.com/mitre-attack/attack-navigator/issues/179).
+- Added dialog for CHANGELOG.md so that changes can be viewed without leaving the app. See issue [#178](https://github.com/mitre-attack/attack-navigator/issues/178).
 
 ## Fixes
 - Fixed some issues where objects would appear in the wrong domain under specific circumstances. See issue [#308](https://github.com/mitre-attack/attack-navigator/issues/308), [attack-website#310](https://github.com/mitre-attack/attack-website/issues/310).

README.md

@@ -6,7 +6,7 @@ The principal feature of the Navigator is the ability for users to define layers
 
 ## Usage
 
-The ATT&CK Navigator is hosted live via GitHub Pages. [You can find a live instance of the current version of the Navigator here](https://mitre-attack.github.io/attack-navigator). 
+The ATT&CK Navigator is hosted live via GitHub Pages. [You can find a live instance of the current version of the Navigator here](https://mitre-attack.github.io/attack-navigator). You can read more about how to use the application itself in the [USAGE](/USAGE.md) document (which is mirrored in the in-app help page).
 
 Version 4.0 of the ATT&CK Navigator supports all ATT&CK domains in a single instance of the application instead of requiring a different instance for each domain. It also sees the introduction of support for the ICS domain. See [the changelog](CHANGELOG.md) for more information.
 

nav-app/angular.json

@@ -19,6 +19,8 @@
             "polyfills": "src/polyfills.ts",
             "preserveSymlinks": true,
             "assets": [
+              { "glob": "*.md", "input": "../", "output": "/" },
+              { "glob": "*.md", "input": "../layers", "output": "/layers" },
               "src/assets",
               "src/favicon.ico"
             ],
@@ -31,7 +33,8 @@
               "node_modules/tinycolor2/tinycolor.js",
               "node_modules/d3/dist/d3.js",
               "node_modules/d3-svg-legend/d3-legend.js",
-              "node_modules/tinygradient/tinygradient.js"
+              "node_modules/tinygradient/tinygradient.js",
+              "node_modules/marked/lib/marked.js"
             ]
           },
           "configurations": {

nav-app/package.json

@@ -41,6 +41,7 @@
     "mathjs": "^5.10.3",
     "ngx-color-picker": "^10.1.0",
     "ngx-drag-drop": "^2.0.0",
+    "ngx-markdown": "^10.1.1",
     "rxjs": "^6.6.3",
     "rxjs-compat": "^6.6.3",
     "tinygradient": "^0.4.3",

nav-app/src/app/app.component.html

@@ -1,2 +1,2 @@
 <tabs></tabs>
-<span style="font-size: 7pt">MITRE ATT&CK&reg; Navigator v{{nav_version}}</span>
+<button class="version-footer" (click)="tabsComponent.openDialog('changelog')">MITRE ATT&CK&reg; Navigator v{{nav_version}}</button>

nav-app/src/app/app.component.scss

@@ -2,5 +2,16 @@ tabs {
     // font-family: 'Roboto Mono', monospace;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 9pt;
+}
 
+.version-footer {
+    font-size: 7pt;
+    border: none;
+    background-color: transparent;
+    text-align: right;
+    padding: 0;
+    &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+    }
 }

nav-app/src/app/app.module.ts

@@ -41,6 +41,10 @@ import { ChangelogCellComponent } from './layer-upgrade/changelog-cell/changelog
 import { MatCardModule } from "@angular/material/card";
 import { MatDividerModule } from "@angular/material/divider";
 
+import { MarkdownModule } from "ngx-markdown";
+import { LayerInformationComponent } from './layer-information/layer-information.component';
+import { ChangelogComponent } from './changelog/changelog.component';
+
 
 @NgModule({
   declarations: [
@@ -60,7 +64,9 @@ import { MatDividerModule } from "@angular/material/divider";
     VersionUpgradeComponent,
     SidebarComponent,
     LayerUpgradeComponent,
-    ChangelogCellComponent
+    ChangelogCellComponent,
+    LayerInformationComponent,
+    ChangelogComponent
   ],
   imports: [
     BrowserModule,
@@ -82,7 +88,8 @@ import { MatDividerModule } from "@angular/material/divider";
     DndModule,
     MatSidenavModule,
     MatCardModule,
-    MatDividerModule
+    MatDividerModule,
+    MarkdownModule.forRoot()
   ],
   exports: [
       MatSelectModule,

nav-app/src/app/changelog/changelog.component.html

@@ -0,0 +1,8 @@
+<div class="changelog-dialog">
+    <div class="content markdown">
+        <markdown #markdownElement [src]="'../CHANGELOG.md'"></markdown>
+    </div>
+    <div class="close-button">
+        <button mat-button mat-dialog-close>close</button>
+    </div>
+</div>

nav-app/src/app/changelog/changelog.component.spec.ts

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

nav-app/src/app/changelog/changelog.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog } from "@angular/material/dialog";
+import { MarkdownComponent, MarkdownService } from "ngx-markdown";
+
+@Component({
+  selector: 'app-changelog',
+  templateUrl: './changelog.component.html',
+  styleUrls: ['./changelog.component.scss']
+})
+export class ChangelogComponent implements OnInit {
+  @ViewChild('markdownElement', {static: false}) private markdownElement: MarkdownComponent;
+
+  constructor(private dialog: MatDialog,
+              private markdownService: MarkdownService,
+              @Inject(MAT_DIALOG_DATA) public data) {}
+
+  ngOnInit(): void {
+  }
+
+}

nav-app/src/app/datatable/data-table.component.html

@@ -556,15 +556,15 @@
 
 <div class="legendBar" (click)="showingLegend = !showingLegend" *ngIf="!showingLegend && configService.getFeature('legend')">
     <img src="assets/icons/ic_keyboard_arrow_up_black_24px.svg" style="position: absolute; left:4px; top: 3px;">
-    <div class="noselect" style="padding:4px; font-size:14px; position: absolue; width: 100%; text-align:center">
+    <div class="noselect" style="padding:4px; font-size:14px; position: absolute; width: 100%; text-align:center">
         legend
     </div>
 </div>
 
 <div class="legend" *ngIf="showingLegend && configService.getFeature('legend')">
     <div class="legendBar" (click)="showingLegend = !showingLegend" style="position: absolute; top:0px; left:0px;">
         <img src="assets/icons/ic_keyboard_arrow_down_black_24px.svg" style="position: absolute; left:4px; top: 3px;">
-        <div class="noselect" style="padding:4px; font-size:14px; position: absolue; width: 100%; text-align:center">
+        <div class="noselect" style="padding:4px; font-size:14px; position: absolute; width: 100%; text-align:center">
             legend
         </div>
     </div>

nav-app/src/app/datatable/data-table.component.scss

@@ -368,6 +368,7 @@ $panel-light: lighten($panel-dark, 8%);
 }
 
 .legend {
+    z-index: 999;
     position: fixed;
     bottom: 0;
     right: 0;