Merge pull request #318 from mitre-attack/feature/#181-layer-upgrade-ui

Layer Upgrade UI

CHANGELOG.md

@@ -5,6 +5,7 @@ Version 4.4 of the Navigator restores Safari support provided you are using Safa
 
 ## New Features
 - 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). 
+- Added the Layer Upgrade UI to upgrade layers created in older versions of ATT&CK. When upgrading a layer, users can view what objects have changed between the two versions and copy annotations from the previous version.  See issue [#181](https://github.com/mitre-attack/attack-navigator/issues/181).
 
 ## Improvements
 - Improved favicon for standardization with other ATT&CK tools.

USAGE.md

@@ -64,7 +64,45 @@ layer description, view configuration.
 Saved layer configuration files can be opened in the ATT&CK Navigator to restore a layer you've worked on previously. To
 do so, open a new tab and open the "Open Existing Layer" panel. Then click "Upload from local", and select your saved
 configuration file. Doing so will restore your saved layer to the ATT&CK Navigator. This interface also has a "load from
-URL"input allowing you to open a layer json from a remote source.
+URL" input allowing you to open a layer json from a remote source.
+
+## Upgrading a Layer to the Current Version
+
+The layer upgrade interface allows users to upgrade an ATT&CK Navigator layer created on a previous version of ATT&CK to the 
+current version of the dataset. With this interface, users can step through each change in the dataset of techniques:
+- The user can view techniques which have been added to the dataset since the layer was created and annotate them as necessary.
+- The user can see whether the techniques they had previously annotated have changed and adjust the annotations accordingly.
+- The user can determine if any annotated techniques have been removed or replaced by new techniques and in the latter case copy 
+annotations to the replacing technique(s).
+- The user can also verify what techniques haven't changed since the layer was created.
+
+### Mapping Annotations
+
+For annotated techniques which have changed since the layer was created, you may want to update the set of annotations to account 
+for changes to scope or content. Each technique in the interface lists its previous and current state, with links to 
+<a href="https://attack.mitre.org/">the ATT&CK Website</a> for both versions of the technique to enable easy review. In steps with techniques you 
+have previously annotated, you can enable the "show annotated techniques only" filter to view only those techniques which have annotations. 
+
+You can copy annotations from the previous version of the technique to the current one, making adjustments if necessary. There are 
+two approaches to copying annotations from the previous version:
+- For techniques with tactics that map one-to-one between the two versions, annotations can be copied by clicking the ">"
+button next to the tactic. This will copy any existing annotations on the tactic to the technique under the same tactic in
+the current version.
+- For techniques with tactics that have changed between the two versions, annotations can be copied by dragging & dropping the
+annotated tactic from the previous version to the tactic(s) in the current version.
+
+Techniques can be marked as reviewed under their respective panels to visually indicate that they have been reviewed. The "reviewed 
+X/Y techniques" displayed underneath the techniques list can be used to determine if you missed any techniques. The numerator reflects 
+the number of techniques you have marked as "reviewed" and the denominator denotes the total number of techniques shown according
+to your configuration (for example, if you have enabled the "show annotated techniques only" filter, only the number of techniques
+which are annotated are counted in this total).
+
+You can view and verify the status of the layer upgrade at the end of the workflow to ensure you have created or adjusted all annotations 
+as desired. A status is displayed next to each section name to indicate either the number of techniques you have reviewed in the section, 
+if you have skipped the section, or if there are no techniques to review in the section. Once you have finished upgrading the layer, you 
+can click the "done" button to close the sidebar.
+
+<b>Note:</b> You will not be able to return to the layer upgrade interface after the sidebar is closed.
 
 ## Creating Layers from Other Layers
 

nav-app/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/mitre-attack/attack-navigator.git"
   },
-  "version": "4.3.0",
+  "version": "4.4.0",
   "license": "Apache-2.0",
   "scripts": {
     "ng": "ng",
@@ -41,6 +41,7 @@
     "mathjs": "^5.10.3",
     "moment": "^2.29.1",
     "ngx-color-picker": "^10.1.0",
+    "ngx-drag-drop": "^2.0.0",
     "ngx-markdown": "^10.1.1",
     "ngx-smart-popover": "^1.4.0",
     "rxjs": "^6.6.3",

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

@@ -2,7 +2,6 @@ import { Component, ViewChild, DoCheck, HostListener } from '@angular/core';
 import { TabsComponent } from './tabs/tabs.component';
 import { ConfigService } from './config.service';
 import * as globals from "./globals";
-import { DataService } from './data.service';
 
 @Component({
     selector: 'app-root',

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

@@ -7,7 +7,8 @@ import 'rxjs/add/operator/map'
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatButtonModule } from '@angular/material/button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -16,6 +17,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { ColorPickerModule } from 'ngx-color-picker';
+import { DndModule } from 'ngx-drag-drop';
 import { PopoverModule } from 'ngx-smart-popover';
 import { HttpClientModule } from '@angular/common/http';
 
@@ -34,8 +36,13 @@ import { ContextmenuComponent } from './matrix/technique-cell/contextmenu/contex
 import { TacticCellComponent } from './matrix/tactic-cell/tactic-cell.component';
 import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
+import { LayerUpgradeComponent } from './layer-upgrade/layer-upgrade.component';
+import { ChangelogCellComponent } from './layer-upgrade/changelog-cell/changelog-cell.component';
 import { MatCardModule } from "@angular/material/card";
 import { MatDividerModule } from "@angular/material/divider";
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatPaginatorModule } from '@angular/material/paginator';
+
 
 import { MarkdownModule } from "ngx-markdown";
 import { LayerInformationComponent } from './layer-information/layer-information.component';
@@ -60,6 +67,8 @@ import { SearchPopoverNotificationComponent } from './search-and-multiselect/sea
     TacticCellComponent,
     VersionUpgradeComponent,
     SidebarComponent,
+    LayerUpgradeComponent,
+    ChangelogCellComponent,
     LayerInformationComponent,
     ChangelogComponent,
     SearchPopoverNotificationComponent
@@ -73,23 +82,28 @@ import { SearchPopoverNotificationComponent } from './search-and-multiselect/sea
     ReactiveFormsModule,
     MatInputModule,
     MatButtonModule,
+    MatIconModule,
     MatProgressSpinnerModule,
     MatCheckboxModule,
     MatTooltipModule,
     MatMenuModule,
     MatExpansionModule,
     MatDialogModule,
     ColorPickerModule,
+    DndModule,
     MatSidenavModule,
     MatCardModule,
     MatDividerModule,
+    MatStepperModule,
+    MatPaginatorModule,
     MarkdownModule.forRoot(),
     PopoverModule
   ],
   exports: [
       MatSelectModule,
       MatInputModule,
       MatButtonModule,
+      MatIconModule,
       MatTooltipModule,
       MatMenuModule,
       MatExpansionModule,