add stix ids to object view pages (#584)

* add stix ids to object pages

* update to position of stix id

* minor changes

* css updates

app/src/app/app.module.ts

@@ -103,6 +103,8 @@ import { AttackIDPropertyComponent } from "./components/stix/attackid-property/a
 import { AttackIDEditComponent } from "./components/stix/attackid-property/attackid-edit/attackid-edit.component";
 import { AttackIDViewComponent } from "./components/stix/attackid-property/attackid-view/attackid-view.component";
 
+import { StixIDPropertyComponent } from "./components/stix/stixid-property/stixid-property.component";
+
 import { ListPropertyComponent } from "./components/stix/list-property/list-property.component";
 import { ListEditComponent } from "./components/stix/list-property/list-edit/list-edit.component";
 import { ListViewComponent } from "./components/stix/list-property/list-view/list-view.component";
@@ -262,6 +264,7 @@ export function initConfig(appConfigService: AppConfigService) {
 		AttackIDPropertyComponent,
 		AttackIDEditComponent,
 		AttackIDViewComponent,
+		StixIDPropertyComponent,
 		ListPropertyComponent,
 		ListEditComponent,
 		ListViewComponent,

app/src/app/components/stix/attackid-property/attackid-property.component.html

@@ -8,7 +8,7 @@
                 <mat-icon>content_copy</mat-icon>
             </button>
         </div>
-        <span class="labelled-box-label">ID</span>
+        <span class="labelled-box-label">ATT&CK ID</span>
     </div>
     <app-attackid-edit *ngIf="config.mode == 'edit'" [config]="config"></app-attackid-edit>
 </div>

app/src/app/components/stix/attackid-property/attackid-view/attackid-view.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AttackidViewComponent } from './attackid-view.component';
+import { AttackIDViewComponent } from './attackid-view.component';
 
 describe('AttackidViewComponent', () => {
-  let component: AttackidViewComponent;
-  let fixture: ComponentFixture<AttackidViewComponent>;
+  let component: AttackIDViewComponent;
+  let fixture: ComponentFixture<AttackIDViewComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AttackidViewComponent ]
+      declarations: [ AttackIDViewComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AttackidViewComponent);
+    fixture = TestBed.createComponent(AttackIDViewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

app/src/app/components/stix/stixid-property/README.md

@@ -0,0 +1,2 @@
+# stixid-property
+`stixid-property.component` is used for displaying ATT&CK STIX IDs of an object.

app/src/app/components/stix/stixid-property/stixid-property.component.html

@@ -0,0 +1,10 @@
+<div class="stix-header text-deemphasis">
+    <div>
+        {{config.object["stixID"]}}
+        <button mat-icon-button class="mini-icon-button" [cdkCopyToClipboard]="stixIdLink"
+            (click)="snackbar.open('STIX ID copied to clipboard', null, {duration: 1000})"
+            matTooltip="copy STIX ID" aria-label="copy stixID">
+            <mat-icon>content_copy</mat-icon>
+        </button>
+    </div>
+</div>

app/src/app/components/stix/stixid-property/stixid-property.component.scss

@@ -0,0 +1,6 @@
+.stix-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+}

app/src/app/components/stix/stixid-property/stixid-property.component.spec.ts

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

app/src/app/components/stix/stixid-property/stixid-property.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { StixObject } from 'src/app/classes/stix/stix-object';
+
+@Component({
+  selector: 'app-stixid-property',
+  templateUrl: './stixid-property.component.html',
+  styleUrls: ['./stixid-property.component.scss']
+})
+export class StixIDPropertyComponent {
+    @Input() public config: StixIDPropertyConfig;
+    public get stixIdLink(): string { return `${this.config.object["stixID"]}`; }
+
+    constructor(public snackbar: MatSnackBar) {
+        // intentionally left blank
+    }
+}
+export interface StixIDPropertyConfig {
+    /* What is the current mode?
+     *    view: viewing the list property
+     */
+    mode: "view"
+    /* The object to show the field of
+     * Note: if mode is diff, pass an array of two objects to diff
+     */
+    object: StixObject | [StixObject, StixObject];
+}

app/src/app/components/subheading/subheading.component.html

@@ -1,3 +1,8 @@
+<!-- view stix id -->
+<app-stixid-property class="grow-to-row" *ngIf="config.object['stixID']" [config]="{
+    object: config.object
+}"></app-stixid-property>
+
 <div class="section-header">
     <div class="app-subheading">
         <div class="section-header-section">

app/src/style/layouts/extended-button.scss

@@ -31,4 +31,26 @@
 	   width: 24px !important;
 	   height: 24px !important;
 	}
+}
+
+.mini-icon-button {
+	@extend .small-icon-button;
+	width: 20px !important;
+	height: 20px !important;
+
+	& > *[role=img] {
+	   width: 12px;
+	   height: 12px;
+	   font-size: 12px;
+
+	   svg {
+		  width: 12px;
+		  height: 12px;
+	   }
+	}
+
+	.mat-mdc-button-touch-target {
+	   width: 12px !important;
+	   height: 12px !important;
+	}
 }