From ff49573066fa5fab99017a4bfdbfb337d71e1132 Mon Sep 17 00:00:00 2001
From: Jordan Hanna <jmhanna@mitre.org>
Date: Thu, 4 Nov 2021 18:47:43 -0700
Subject: [PATCH 1/3] Revert profiles.html and rename showAbilityModal.

Rename to showAbilityChoiceModal.
---
 templates/profiles.html | 174 +++++++++++++++++++++++++++-------------
 1 file changed, 118 insertions(+), 56 deletions(-)

diff --git a/templates/profiles.html b/templates/profiles.html
index 284ea082d..58ed6ec41 100644
--- a/templates/profiles.html
+++ b/templates/profiles.html
@@ -60,7 +60,7 @@ <h3 x-text="selectedProfileName" class="pointer tooltip has-tooltip-arrow" data-
                 </div>
             </form>
             <div class="control-buttons is-flex is-flex-direction-row">
-                <button class="button is-small" @click="selectedAbilityId = ''; showAbilityModal = true;">
+                <button class="button is-small" @click="selectedAbilityId = ''; showAbilityChoiceModal = true;">
                     <span class="icon"><i class="fas fa-plus"></i></span>
                     <span>Add Ability</span>
                 </button>
@@ -284,15 +284,96 @@ <h3>Create a profile</h3>
         </div>
     </div>
 
-    <div class="modal" x-bind:class="{ 'is-active': showAbilityModal }"> 
-        <div class="modal-background" @click="showAbilityModal = false"></div>
+    <div class="modal" x-bind:class="{ 'is-active': showAbilityChoiceModal }"> 
+        <div class="modal-background" @click="showAbilityChoiceModal = false"></div>
         <div class="modal-card wide">
             <header class="modal-card-head">
-                <p class="modal-card-title"><span x-text="isCreatingAbility ? 'Create' : 'Edit'"></span> an Ability</p>
+                <p class="modal-card-title">Add an Ability to Adversary</p>
             </header>
             <section class="modal-card-body">
-                <template x-if="selectedAbility">
+                <p class="has-text-centered">Select an Ability</p>
+                <form>
+                    <div class="field is-horizontal">
+                        <div class="field-label is-small">
+                            <label class="label"><span class="icon is-small"><i class="fas fa-search"></i></span></label>
+                        </div>
+                        <div class="field-body">
+                            <div class="field">
+                                <div class="control">
+                                    <input class="input is-small" x-model="abilitySearchQuery" placeholder="Search for an ability..." x-on:keyup="searchForAbility()">
+                                    <div class="search-results">
+                                        <template x-for="result of abilitySearchResults" :key="result.ability_id">
+                                            <p @click="selectAbility(result.ability_id)" x-text="result.name"></p>
+                                        </template>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                <form>
+                    <div class="field is-horizontal">
+                        <div class="field-label is-small">
+                            <label class="label">Tactic</label>
+                        </div>
+                        <div class="field-body">
+                            <div class="field">
+                                <div class="control">
+                                    <div class="select is-small is-fullwidth">
+                                        <select x-model="selectedTactic" x-on:change="selectedAbilityId = ''">
+                                            <option default>Choose a tactic</option>
+                                            <template x-for="tactic of [...new Set(abilities.map((e) => e.tactic))]" :key="tactic">
+                                                <option x-bind:value="tactic" x-text="tactic"></option>
+                                            </template>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="field is-horizontal">
+                        <div class="field-label is-small">
+                            <label class="label">Technique</label>
+                        </div>
+                        <div class="field-body">
+                            <div class="field">
+                                <div class="control">
+                                    <div class="select is-small is-fullwidth">
+                                        <select x-model="selectedTechnique" x-bind:disabled="!selectedTactic" x-on:change="selectedAbilityId = ''">
+                                            <option default>Choose a technique</option>
+                                            <template :key="exploit.technique_id" x-for="exploit of [...new Set(abilities.filter((e) => selectedTactic === e.tactic).map((e) => e.technique_id))].map((t) => abilities.find((e) => e.technique_id === t))">
+                                                <option x-bind:value="exploit.technique_id" x-text="`${exploit.technique_id} | ${exploit.technique_name}`"></option>
+                                            </template>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="field is-horizontal is-fullwidth">
+                        <div class="field-label is-small">
+                            <label class="label">Ability</label>
+                        </div>
+                        <div class="field-body">
+                            <div class="field">
+                                <div class="control">
+                                    <div class="select is-small is-fullwidth">
+                                        <select x-model="selectedAbilityId" x-bind:disabled="!selectedTechnique" x-on:change="selectAbility(selectedAbilityId)">
+                                            <option default>Choose an ability</option>
+                                            <template :key="ability.ability_id" x-for="ability of abilities.filter((e) => selectedTactic === e.tactic && selectedTechnique === e.technique_id)">
+                                                <option x-bind:value="ability.ability_id" x-text="ability.name"></option>
+                                            </template>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                <template x-if="selectedAbilityId">
                     <div class="content">
+                        <hr>
+                        <p class="has-text-centered">Ability Details</p>
                         <form>
                             <div class="field is-horizontal">
                                 <div class="field-label is-small">
@@ -318,8 +399,8 @@ <h3>Create a profile</h3>
                                 <div class="field-body">
                                     <div class="field">
                                         <div class="control">
-                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrors.includes('name') }" x-model="selectedAbility.name">
-                                            <p x-show="fieldErrors.includes('name')" class="help is-danger">This field is required.</p>
+                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrorsAbility.includes('name') }" x-model="selectedAbility.name">
+                                            <p x-show="fieldErrorsAbility.includes('name')" class="help is-danger">This field is required.</p>
                                         </div>
                                     </div>
                                 </div>
@@ -331,8 +412,8 @@ <h3>Create a profile</h3>
                                 <div class="field-body">
                                     <div class="field">
                                         <div class="control">
-                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrors.includes('description') }" x-model="selectedAbility.description">
-                                            <p x-show="fieldErrors.includes('description')" class="help is-danger">This field is required.</p>
+                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrorsAbility.includes('description') }" x-model="selectedAbility.description">
+                                            <p x-show="fieldErrorsAbility.includes('description')" class="help is-danger">This field is required.</p>
                                         </div>
                                     </div>
                                 </div>
@@ -344,8 +425,8 @@ <h3>Create a profile</h3>
                                 <div class="field-body">
                                     <div class="field">
                                         <div class="control">
-                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrors.includes('tactic') }" x-model="selectedAbility.tactic">
-                                            <p x-show="fieldErrors.includes('tactic')" class="help is-danger">This field is required.</p>
+                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrorsAbility.includes('tactic') }" x-model="selectedAbility.tactic">
+                                            <p x-show="fieldErrorsAbility.includes('tactic')" class="help is-danger">This field is required.</p>
                                         </div>
                                     </div>
                                 </div>
@@ -357,8 +438,8 @@ <h3>Create a profile</h3>
                                 <div class="field-body">
                                     <div class="field">
                                         <div class="control">
-                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrors.includes('technique_id') }" x-model="selectedAbility.technique_id">
-                                            <p x-show="fieldErrors.includes('technique_id')" class="help is-danger">This field is required.</p>
+                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrorsAbility.includes('technique_id') }" x-model="selectedAbility.technique_id">
+                                            <p x-show="fieldErrorsAbility.includes('technique_id')" class="help is-danger">This field is required.</p>
                                         </div>
                                     </div>
                                 </div>
@@ -370,20 +451,20 @@ <h3>Create a profile</h3>
                                 <div class="field-body">
                                     <div class="field">
                                         <div class="control">
-                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrors.includes('technique_name') }" x-model="selectedAbility.technique_name">
-                                            <p x-show="fieldErrors.includes('technique_name')" class="help is-danger">This field is required.</p>
+                                            <input class="input is-small" x-bind:class="{ 'is-danger': fieldErrorsAbility.includes('technique_name') }" x-model="selectedAbility.technique_name">
+                                            <p x-show="fieldErrorsAbility.includes('technique_name')" class="help is-danger">This field is required.</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </form>
                         <p class="has-text-centered">Executors</p>
-                        <p x-show="fieldErrors.includes('executors')" class="help is-danger">At least one executor is required.</p>
+                        <p x-show="fieldErrorsAbility.includes('executors')" class="help is-danger">At least one executor is required.</p>
                         <div class="has-text-centered">
                             <button class="button is-small is-primary" @click="addExecutorToAbility('before')">+ Add Executor</button>
                         </div>
                         <br>
-                        <template x-for="(executor, index) of selectedAbility.executors" :key="index">
+                        <template x-for="(executor, index) of getAbilityExecutors()" :key="index">
                             <div class="box">
                                 <div class="has-text-right">
                                     <button class="delete" @click="selectedAbility.executors.splice(index, 1)"></button>
@@ -455,7 +536,7 @@ <h3>Create a profile</h3>
                                                         <select class="select is-multiple" multiple size="6">
                                                             <template x-for="payload of payloads">
                                                                 <option x-show="executor.payloads.indexOf(payload) === -1" x-on:click="executor.payloads.push(payload)" x-text="payload"></option>
-                                                            </template>
+                                                            </template>      
                                                         </select>
                                                     </div>
                                                 </div>
@@ -479,40 +560,21 @@ <h3>Create a profile</h3>
                                             <label class="label">timeout</label>
                                         </div>
                                         <div class="field-body">
-                                            <div class="field">
+                                            <div class="field ">
                                                 <div class="control">
                                                     <input class="input is-small" type="number" x-model="executor.timeout">
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
-                                    <template x-for="(cleanup, index) of executor.cleanup">
-                                        <div class="field is-horizontal">
-                                            <div class="field-label is-small">
-                                                <label class="label" x-text="index === 0 ? 'cleanup': ' '"></label>
-                                            </div>
-                                            <div class="field-body">
-                                                <div class="field has-addons">
-                                                    <div class="control is-expanded">
-                                                        <input class="input is-small code" x-model="executor.cleanup[index]"></input>
-                                                    </div>
-                                                    <div class="control">
-                                                        <a class="button is-small has-tooltip-bottom has-tooltip-arrow" data-tooltip="Remove cleanup command" @click="executor.cleanup.splice(index, 1)">
-                                                            <span class="icon is-small"><i class="fas fa-minus-square"></i></span>
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </template>
                                     <div class="field is-horizontal">
-                                        <div class="field-label is-small" x-show="!executor.cleanup.length">
+                                        <div class="field-label is-small">
                                             <label class="label">cleanup</label>
                                         </div>
                                         <div class="field-body">
-                                            <div class="field">
-                                                <div class="control has-text-right">
-                                                    <button class="button is-small is-primary" @click.stop="executor.cleanup.push('')">+ Add Cleanup Command</button>
+                                            <div class="field ">
+                                                <div class="control">
+                                                    <input class="input is-small code" x-model="executor.cleanup">
                                                 </div>
                                             </div>
                                         </div>
@@ -520,7 +582,7 @@ <h3>Create a profile</h3>
                                 </form>
                             </div>
                         </template>
-                        <template x-if="selectedAbility.executors.length > 0">
+                        <template x-if="selectedAbility.executors && selectedAbility.executors.length > 0">
                             <div class="has-text-centered">
                                 <button class="button is-small is-primary" @click="addExecutorToAbility('after')">+ Add Executor</button>
                             </div>
@@ -531,21 +593,21 @@ <h3>Create a profile</h3>
             <footer class="modal-card-foot">
                 <nav class="level">
                     <div class="level-left">
-                        <div class="level-item">
-                            <button class="button is-primary is-small" @click="deleteAbility()" x-show="!isCreatingAbility">
-                                <span class="icon"><i class="fas fa-trash"></i></span>
-                                <span>Delete Ability</span>
+                        <div class="level-item" x-show="selectedAbility">
+                            <button class="button is-small" @click="saveAbility(false)" x-bind:disabled="!selectedAbilityId">
+                                <span class="icon"><i class="fas fa-save"></i></span>
+                                <span>Save</span>
                             </button>
                         </div>
                     </div>
                     <div class="level-right">
                         <div class="level-item">
-                            <button class="button is-small" @click="showAbilityModal = false">Close</button>
-                        </div>
-                        <div class="level-item">
-                            <button class="button is-primary is-small" @click="saveAbility()">
-                                <span class="icon"><i class="fas fa-save"></i></span>
-                                <span>Save</span>
+                            <button class="button is-small" @click="showAbilityChoiceModal = false">Close</button>
+                        </divp>
+                        <div class="level-item" x-show="selectedAbility">
+                            <button class="button is-primary is-small" @click="saveAbility(true)" x-bind:disabled="!selectedAbilityId">
+                                <span class="icon"><i class="fas fa-plus"></i></span>
+                                <span>Save & Add</span>
                             </button>
                         </div>
                     </div>
@@ -599,7 +661,7 @@ <h3>Create a profile</h3>
             selectedObjectiveId: '',
 
             // Ability modal
-            showAbilityModal: false,
+            showAbilityChoiceModal: false,
             selectedTactic: '',
             selectedTechnique: '',
             selectedAbilityId: '',
@@ -929,7 +991,7 @@ <h3>Create a profile</h3>
                 this.selectedTactic = this.selectedAbility.tactic;
                 this.selectedTechnique = this.selectedAbility.technique_id;
                 this.selectedAbilityId = id;
-                this.showAbilityModal = true;
+                this.showAbilityChoiceModal = true;
             },
 
             getPlatforms(platform) {
@@ -967,7 +1029,7 @@ <h3>Create a profile</h3>
                         this.selectedProfileAbilities.push(response);
                         this.unsavedChanges = true;
                         this.selectedAbilityId = '';
-                        this.showAbilityModal = false;
+                        this.showAbilityChoiceModal = false;
                     }
                 }).catch((error) => {
                     toast('Error saving ability', false);

From 9811cdb90406474c8c191501e99a72043d9f97f5 Mon Sep 17 00:00:00 2001
From: Arsenull <cyber.arsenull@gmail.com>
Date: Mon, 8 Nov 2021 15:16:29 -0800
Subject: [PATCH 2/3] Re-add cleanup command and add type button for field
 buttons.

Buttons under class field act like a form submitter, so they need to have type button to avoid refreshing the page.
---
 templates/abilities.html |  2 +-
 templates/profiles.html  | 29 ++++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/templates/abilities.html b/templates/abilities.html
index fe23aa5ec..6e66a2be2 100644
--- a/templates/abilities.html
+++ b/templates/abilities.html
@@ -323,7 +323,7 @@ <h2>Abilities</h2>
                                         <div class="field-body">
                                             <div class="field">
                                                 <div class="control has-text-right">
-                                                    <button class="button is-small is-primary" @click.stop="executor.cleanup.push('')">+ Add Cleanup Command</button>
+                                                    <button type="button" class="button is-small is-primary" @click.stop="executor.cleanup.push('')">+ Add Cleanup Command</button>
                                                 </div>
                                             </div>
                                         </div>
diff --git a/templates/profiles.html b/templates/profiles.html
index 58ed6ec41..cd095c9ba 100644
--- a/templates/profiles.html
+++ b/templates/profiles.html
@@ -560,21 +560,40 @@ <h3>Create a profile</h3>
                                             <label class="label">timeout</label>
                                         </div>
                                         <div class="field-body">
-                                            <div class="field ">
+                                            <div class="field">
                                                 <div class="control">
                                                     <input class="input is-small" type="number" x-model="executor.timeout">
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
+                                    <template x-for="(cleanup, index) of executor.cleanup">
+                                        <div class="field is-horizontal">
+                                            <div class="field-label is-small">
+                                                <label class="label" x-text="index === 0 ? 'cleanup': ' '"></label>
+                                            </div>
+                                            <div class="field-body">
+                                                <div class="field has-addons">
+                                                    <div class="control is-expanded">
+                                                        <input class="input is-small code" x-model="executor.cleanup[index]"></input>
+                                                    </div>
+                                                    <div class="control">
+                                                        <a class="button is-small has-tooltip-bottom has-tooltip-arrow" data-tooltip="Remove cleanup command" @click="executor.cleanup.splice(index, 1)">
+                                                            <span class="icon is-small"><i class="fas fa-minus-square"></i></span>
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
                                     <div class="field is-horizontal">
-                                        <div class="field-label is-small">
+                                        <div class="field-label is-small" x-show="!executor.cleanup.length">
                                             <label class="label">cleanup</label>
                                         </div>
                                         <div class="field-body">
-                                            <div class="field ">
-                                                <div class="control">
-                                                    <input class="input is-small code" x-model="executor.cleanup">
+                                            <div class="field">
+                                                <div class="control has-text-right">
+                                                    <button type="button" class="button is-small is-primary" @click.stop="executor.cleanup.push('')">+ Add Cleanup Command</button>
                                                 </div>
                                             </div>
                                         </div>

From 8bd711f83a61d0ea17e1a18d91efe535528f233d Mon Sep 17 00:00:00 2001
From: Jordan Hanna <jmhanna@mitre.org>
Date: Tue, 9 Nov 2021 10:22:34 -0800
Subject: [PATCH 3/3] Replace some <i> tags with <em>.

Required by sonarcloud for code changes.
---
 templates/profiles.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/profiles.html b/templates/profiles.html
index cd095c9ba..bf0ae7791 100644
--- a/templates/profiles.html
+++ b/templates/profiles.html
@@ -295,7 +295,7 @@ <h3>Create a profile</h3>
                 <form>
                     <div class="field is-horizontal">
                         <div class="field-label is-small">
-                            <label class="label"><span class="icon is-small"><i class="fas fa-search"></i></span></label>
+                            <label class="label"><span class="icon is-small"><em class="fas fa-search"></em></span></label>
                         </div>
                         <div class="field-body">
                             <div class="field">
@@ -625,7 +625,7 @@ <h3>Create a profile</h3>
                         </divp>
                         <div class="level-item" x-show="selectedAbility">
                             <button class="button is-primary is-small" @click="saveAbility(true)" x-bind:disabled="!selectedAbilityId">
-                                <span class="icon"><i class="fas fa-plus"></i></span>
+                                <span class="icon"><em class="fas fa-plus"></em></span>
                                 <span>Save & Add</span>
                             </button>
                         </div>