Merge branch 'feature/#204-consolidate-search-and-multiselect' into f…

…eature/#181-layer-upgrade-ui-update
mitre-attack · May 19, 2021 · 1a463d5 · 1a463d5
2 parents 8e35a26 + 13cb570
commit 1a463d5
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 23 deletions.
diff --git a/nav-app/src/app/data.service.ts b/nav-app/src/app/data.service.ts
@@ -30,6 +30,14 @@ export class DataService {
     public subtechniquesEnabled: boolean = true;
     public versionChangelog?: VersionChangelog<Technique>;å
 
+    public readonly sidebarContentTypes = ['layerUpgrade', 'search'];
+    private _sidebarContentType: string;
+    public get sidebarContentType(): string { return this._sidebarContentType; };
+    public set sidebarContentType(newVal: string) {
+        if (this.sidebarContentTypes.includes(newVal)) this._sidebarContentType = newVal;
+        else this._sidebarContentType = '';
+    };
+
     /**
      * Callback functions passed to this function will be called after data is loaded
      * @param {*} callback callback function to call when data is done loading

diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html
@@ -41,32 +41,13 @@
             <div *ngIf="configService.getFeature('search')" class="control-row-item">
 
                 <div class="control-row-button dropdown noselect"
-                     (click)="currentDropdown = currentDropdown !== 'search' ? 'search' : null;"
+                    (click)="(dataService.sidebarOpened = (dataService.sidebarContentType !== 'search') ? true : !dataService.sidebarOpened) && (dataService.sidebarContentType = 'search')"
                     matTooltipPosition="below"
                     matTooltip="search">
                     <img src="assets/icons/ic_search_black_24px.svg"/>
                 </div>
-
-                <div class="dropdown-container search" *ngIf="currentDropdown === 'search'" #dropdown [class.left]="checkalign(dropdown)">
-                    <app-techniques-search [viewModel]="viewModel"></app-techniques-search>
-                </div>
-            </div>
-
-
-            <!-- Multi-select -->
-            <div *ngIf="configService.getFeature('multiselect')" class="control-row-item">
-                <div class="control-row-button dropdown noselect"
-                    (click)="currentDropdown = currentDropdown !== 'multiselect' ? 'multiselect' : null;"
-                    matTooltipPosition="below"
-                    matTooltip="multi-select">
-                    <img src="assets/icons/ic_playlist_add_black_24px.svg"/>
-                </div>
-                <div class="dropdown-container multiselect" *ngIf="currentDropdown === 'multiselect'" #dropdown [class.left]="checkalign(dropdown)">
-                    <app-multiselect [viewModel]="viewModel"></app-multiselect>
-                </div>
             </div>
 
-
             <!-- deselect all -->
             <div *ngIf="configService.getFeature('deselect_all')" class="control-row-item">
                 <div class="control-row-button noselect"

diff --git a/nav-app/src/app/sidebar/sidebar.component.html b/nav-app/src/app/sidebar/sidebar.component.html
@@ -2,4 +2,10 @@
     <div *ngIf="dataService.versionChangelog">
         <layer-upgrade [viewModel]="viewModel" [changelog]="dataService.versionChangelog"></layer-upgrade>
     </div>
+    <div *ngIf="viewModel">
+        <div *ngIf="dataService.sidebarContentType === 'search'">
+            <app-techniques-search [viewModel]="viewModel"></app-techniques-search>
+            <app-multiselect [viewModel]="viewModel"></app-multiselect>
+        </div>
+    </div>
 </div>
diff --git a/nav-app/src/app/sidebar/sidebar.component.ts b/nav-app/src/app/sidebar/sidebar.component.ts
@@ -8,7 +8,7 @@ import { ViewModel } from '../viewmodels.service';
     styleUrls: ['./sidebar.component.scss']
 })
 export class SidebarComponent implements OnInit {
-    @Input() viewModel?: ViewModel;
+    @Input() viewModel: ViewModel;
 
     constructor(public dataService: DataService) { }
 

diff --git a/nav-app/src/app/tabs/tabs.component.ts b/nav-app/src/app/tabs/tabs.component.ts
@@ -545,7 +545,8 @@ export class TabsComponent implements AfterContentInit, AfterViewInit {
                             let dataSubscription = forkJoin(loads).subscribe({
                                 next: () => {
                                     this.dataService.compareVersions(versions.previous, versions.latest);
-                                    viewModel.sidebarOpened = true;
+                                    this.dataService.sidebarOpened = true;
+                                    this.dataService.sidebarContentType = 'layerUpgrade';
                                     viewModel.deSerialize(string);
                                     viewModel.loadVMData();
                                 },

diff --git a/nav-app/src/app/techniques-search/techniques-search.component.ts b/nav-app/src/app/techniques-search/techniques-search.component.ts
@@ -54,7 +54,7 @@ export class TechniquesSearchComponent implements OnInit {
                 for (let field of self.fields) {
                     if (field.enabled) {
                         // query in this field
-                        if (technique[field.field].toLowerCase().includes(self._query.trim().toLowerCase())) return true;
+                        if (technique[field.field]?.toLowerCase().includes(self._query.trim().toLowerCase())) return true;
                     }
                 }
                 return false;