From 71478777694b52cf90ba9a6442d514b02cccc6c4 Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Sat, 31 Jul 2021 11:56:47 -0400
Subject: [PATCH] allowed dismissing persistent modals on Esc press. allow
 filtering on certain scripts and agent dropdowns. moved other dropdowns to
 tactical dropdown. Fixes with bulk actions

---
 src/components/AgentTable.vue                 |   2 +-
 .../automation/modals/PolicyAdd.vue           |  44 +++---
 .../automation/modals/PolicyExclusions.vue    |  70 +++-------
 src/components/modals/agents/BulkAction.vue   | 121 ++++++++--------
 src/components/modals/agents/EditAgent.vue    |  25 +---
 src/components/modals/agents/RunScript.vue    | 129 ++++++++----------
 src/components/scripts/ScriptFormModal.vue    |   9 +-
 src/components/scripts/ScriptUploadModal.vue  |  21 +--
 src/components/scripts/TestScriptModal.vue    |   7 +-
 src/components/ui/TacticalDropdown.vue        |   4 +-
 10 files changed, 173 insertions(+), 259 deletions(-)

diff --git a/src/components/AgentTable.vue b/src/components/AgentTable.vue
index 9295e55..bbbbb7c 100644
--- a/src/components/AgentTable.vue
+++ b/src/components/AgentTable.vue
@@ -407,7 +407,7 @@
       </q-dialog>
     </div>
     <!-- send command modal -->
-    <q-dialog v-model="showSendCommand" persistent>
+    <q-dialog v-model="showSendCommand" persistent @keydown.esc="showSendCommand = false">
       <SendCommand @close="showSendCommand = false" :pk="selectedAgentPk" />
     </q-dialog>
     <!-- agent recovery modal -->
diff --git a/src/components/automation/modals/PolicyAdd.vue b/src/components/automation/modals/PolicyAdd.vue
index 1688a90..1c940b0 100644
--- a/src/components/automation/modals/PolicyAdd.vue
+++ b/src/components/automation/modals/PolicyAdd.vue
@@ -10,46 +10,34 @@
       </q-bar>
       <q-form @submit="submit">
         <q-card-section v-if="options.length > 0">
-          <q-select
+          <tactical-dropdown
             v-if="type === 'client' || type === 'site'"
             class="q-mb-md"
             v-model="selectedServerPolicy"
             :options="options"
-            outlined
-            dense
-            options-dense
-            clearable
-            map-options
-            emit-value
             label="Server Policy"
-          >
-          </q-select>
-          <q-select
+            outlined
+            clearable
+            mapOptions
+          />
+          <tactical-dropdown
             v-if="type === 'client' || type === 'site'"
             v-model="selectedWorkstationPolicy"
             :options="options"
-            outlined
-            options-dense
-            dense
-            clearable
-            map-options
-            emit-value
             label="Workstation Policy"
-          >
-          </q-select>
-          <q-select
+            outlined
+            clearable
+            mapOptions
+          />
+          <tactical-dropdown
             v-if="type === 'agent'"
             v-model="selectedAgentPolicy"
             :options="options"
-            outlined
-            options-dense
-            dense
-            clearable
-            map-options
-            emit-value
             label="Policy"
-          >
-          </q-select>
+            outlined
+            clearable
+            mapOptions
+          />
 
           <q-checkbox label="Block policy inheritance" v-model="blockInheritance">
             <q-tooltip>This {{ type }} will not inherit from higher policies</q-tooltip>
@@ -69,9 +57,11 @@
 
 <script>
 import mixins from "@/mixins/mixins";
+import TacticalDropdown from "@/components/ui/TacticalDropdown";
 
 export default {
   name: "PolicyAdd",
+  components: { TacticalDropdown },
   emits: ["hide", "ok", "cancel"],
   props: {
     object: !Object,
diff --git a/src/components/automation/modals/PolicyExclusions.vue b/src/components/automation/modals/PolicyExclusions.vue
index b1309d6..d2f55d8 100644
--- a/src/components/automation/modals/PolicyExclusions.vue
+++ b/src/components/automation/modals/PolicyExclusions.vue
@@ -10,68 +10,34 @@
       </q-bar>
       <q-form ref="form" @submit.prevent="onSubmit">
         <q-card-section>
-          <q-select
-            label="Excluded Clients"
-            dense
-            options-dense
-            outlined
-            multiple
+          <tactical-dropdown
             v-model="localPolicy.excluded_clients"
             :options="clientOptions"
-            use-chips
-            map-options
-            emit-value
+            label="Excluded Clients"
+            outlined
+            multiple
+            mapOptions
           />
         </q-card-section>
         <q-card-section>
-          <q-select
-            label="Excluded Sites"
-            dense
-            options-dense
-            outlined
-            multiple
+          <tactical-dropdown
             v-model="localPolicy.excluded_sites"
             :options="siteOptions"
-            use-chips
-            map-options
-            emit-value
-          >
-            <template v-slot:option="scope">
-              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" class="q-pl-lg">
-                <q-item-section>
-                  <q-item-label v-html="scope.opt.label"></q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item-label v-if="scope.opt.category" v-bind="scope.itemProps" header class="q-pa-sm">{{
-                scope.opt.category
-              }}</q-item-label>
-            </template>
-          </q-select>
-        </q-card-section>
-        <q-card-section>
-          <q-select
-            label="Excluded Agents"
-            dense
-            options-dense
+            label="Excluded Sites"
             outlined
             multiple
+            mapOptions
+          />
+        </q-card-section>
+        <q-card-section>
+          <tactical-dropdown
             v-model="localPolicy.excluded_agents"
             :options="agentOptions"
-            use-chips
-            map-options
-            emit-value
-          >
-            <template v-slot:option="scope">
-              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" class="q-pl-lg">
-                <q-item-section>
-                  <q-item-label v-html="scope.opt.label"></q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item-label v-if="scope.opt.category" v-bind="scope.itemProps" header class="q-pa-sm">{{
-                scope.opt.category
-              }}</q-item-label>
-            </template>
-          </q-select>
+            label="Excluded Agents"
+            outlined
+            multiple
+            mapOptions
+          />
         </q-card-section>
 
         <q-card-actions align="right">
@@ -84,9 +50,11 @@
 </template>
 
 <script>
+import TacticalDropdown from "@/components/ui/TacticalDropdown";
 import mixins from "@/mixins/mixins";
 export default {
   name: "PolicyExclusions",
+  components: { TacticalDropdown },
   emits: ["hide", "ok", "cancel"],
   props: { policy: !Object },
   mixins: [mixins],
diff --git a/src/components/modals/agents/BulkAction.vue b/src/components/modals/agents/BulkAction.vue
index ff49b99..05e9a78 100644
--- a/src/components/modals/agents/BulkAction.vue
+++ b/src/components/modals/agents/BulkAction.vue
@@ -9,20 +9,23 @@
         </q-btn>
       </q-bar>
       <q-form @submit.prevent="submit">
-        <q-card-section>
-          <p>Agent Type</p>
-          <q-option-group v-model="monType" :options="monTypeOptions" color="primary" dense inline class="q-pl-sm" />
-        </q-card-section>
         <q-card-section>
           <p>Choose Target</p>
-          <q-option-group v-model="target" :options="targetOptions" color="primary" dense inline class="q-pl-sm" />
+          <q-option-group
+            v-model="state.target"
+            :options="targetOptions"
+            color="primary"
+            dense
+            inline
+            class="q-pl-sm"
+          />
         </q-card-section>
 
         <q-card-section>
           <tactical-dropdown
-            v-if="target === 'client'"
+            v-if="state.target === 'client'"
             :rules="[val => !!val || '*Required']"
-            v-model="client"
+            v-model="state.client"
             :options="clientOptions"
             label="Select Client"
             outlined
@@ -30,9 +33,9 @@
             filterable
           />
           <tactical-dropdown
-            v-else-if="target === 'site'"
+            v-else-if="state.target === 'site'"
             :rules="[val => !!val || '*Required']"
-            v-model="site"
+            v-model="state.site"
             :options="siteOptions"
             label="Select Site"
             outlined
@@ -40,8 +43,9 @@
             filterable
           />
           <tactical-dropdown
-            v-else-if="target === 'agents'"
-            v-model="agents"
+            v-else-if="state.target === 'agents'"
+            :rules="[val => !!val || '*Required']"
+            v-model="state.agents"
             :options="agentOptions"
             label="Select Agents"
             filled
@@ -51,10 +55,22 @@
           />
         </q-card-section>
 
+        <q-card-section v-show="state.target !== 'agents'">
+          <p>Agent Type</p>
+          <q-option-group
+            v-model="state.monType"
+            :options="monTypeOptions"
+            color="primary"
+            dense
+            inline
+            class="q-pl-sm"
+          />
+        </q-card-section>
+
         <q-card-section v-if="mode === 'script'" class="q-pt-none">
           <tactical-dropdown
             :rules="[val => !!val || '*Required']"
-            v-model="script"
+            v-model="state.script"
             :options="scriptOptions"
             label="Select Script"
             outlined
@@ -63,13 +79,11 @@
           />
         </q-card-section>
         <q-card-section v-if="mode === 'script'" class="q-pt-none">
-          <q-select
+          <tactical-dropdown
+            v-model="state.args"
             label="Script Arguments (press Enter after typing each argument)"
             filled
-            dense
-            v-model="args"
             use-input
-            use-chips
             multiple
             hide-dropdown-icon
             input-debounce="0"
@@ -79,11 +93,11 @@
 
         <q-card-section v-if="mode === 'command'">
           <p>Shell</p>
-          <q-option-group v-model="shell" :options="shellOptions" color="primary" dense inline class="q-pl-sm" />
+          <q-option-group v-model="state.shell" :options="shellOptions" color="primary" dense inline class="q-pl-sm" />
         </q-card-section>
         <q-card-section v-if="mode === 'command'">
           <q-input
-            v-model="cmd"
+            v-model="state.cmd"
             outlined
             label="Command"
             stack-label
@@ -98,7 +112,7 @@
 
         <q-card-section v-if="mode === 'script' || mode === 'command'">
           <q-input
-            v-model.number="timeout"
+            v-model.number="state.timeout"
             dense
             outlined
             type="number"
@@ -112,7 +126,7 @@
         <q-card-section v-if="mode === 'patch'">
           <p>Action</p>
           <q-option-group
-            v-model="patchMode"
+            v-model="state.patchMode"
             :options="patchModeOptions"
             color="primary"
             dense
@@ -122,7 +136,7 @@
         </q-card-section>
 
         <q-card-section v-show="false">
-          <q-checkbox v-model="offlineAgents" label="Offline Agents (Run on next checkin)">
+          <q-checkbox v-model="state.offlineAgents" label="Offline Agents (Run on next checkin)">
             <q-tooltip>If the agent is offline, a pending action will be created to run on agent checkin</q-tooltip>
           </q-checkbox>
         </q-card-section>
@@ -196,37 +210,37 @@ export default {
     const { client, clientOptions, getClientOptions } = useClientDropdown();
 
     // bulk action logic
-    const target = ref("client");
-    const monType = ref("all");
-    const cmd = ref("");
-    const shell = ref("cmd");
-    const patchMode = ref("scan");
-    const offlineAgents = ref(false);
+    const state = ref({
+      mode: props.mode,
+      target: "client",
+      monType: "all",
+      cmd: "",
+      shell: "cmd",
+      patchMode: "scan",
+      offlineAgents: false,
+      client,
+      site,
+      agents,
+      script,
+      timeout: defaultTimeout,
+      args: defaultArgs,
+    });
     const loading = ref(false);
 
-    watch(target, () => (agents.value = []));
+    watch(
+      () => state.value.target,
+      (newValue, oldValue) => {
+        client.value = null;
+        site.value = null;
+        agents.value = [];
+      }
+    );
 
     async function submit() {
       loading.value = true;
 
-      const payload = {
-        mode: props.mode,
-        monType: monType.value,
-        target: target.value,
-        site: site.value,
-        client: client.value,
-        agents: agents.value,
-        script: script.value,
-        timeout: defaultTimeout.value,
-        args: defaultArgs.value,
-        shell: shell.value,
-        cmd: cmd.value,
-        patchMode: patchMode.value,
-        offlineAgents: offlineAgents.value,
-      };
-
       try {
-        const data = await runBulkAction(payload);
+        const data = await runBulkAction(state.value);
         notifySuccess(data);
       } catch (e) {}
 
@@ -249,27 +263,16 @@ export default {
       getAgentOptions();
       getSiteOptions();
       getClientOptions();
-      if (props.mode === "script") getScriptOptions(showCommunityScripts);
+      if (props.mode === "script") getScriptOptions(showCommunityScripts.value);
     });
 
     return {
       // reactive data
-      target,
-      monType,
-      client,
-      site,
-      agents,
-      cmd,
-      shell,
-      patchMode,
-      script,
-      scriptOptions,
-      timeout: defaultTimeout.value,
-      args: defaultArgs.value,
+      state,
       agentOptions,
       clientOptions,
       siteOptions,
-      offlineAgents,
+      scriptOptions,
       loading,
 
       // non-reactive data
diff --git a/src/components/modals/agents/EditAgent.vue b/src/components/modals/agents/EditAgent.vue
index 8121a3f..12a0e1a 100644
--- a/src/components/modals/agents/EditAgent.vue
+++ b/src/components/modals/agents/EditAgent.vue
@@ -21,27 +21,7 @@
                 <q-card-section class="row">
                   <div class="col-2">Site:</div>
                   <div class="col-2"></div>
-                  <q-select
-                    dense
-                    options-dense
-                    outlined
-                    v-model="agent.site"
-                    :options="siteOptions"
-                    map-options
-                    emit-value
-                    class="col-8"
-                  >
-                    <template v-slot:option="scope">
-                      <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" class="q-pl-lg">
-                        <q-item-section>
-                          <q-item-label v-html="scope.opt.label"></q-item-label>
-                        </q-item-section>
-                      </q-item>
-                      <q-item-label v-if="scope.opt.category" v-bind="scope.itemProps" header class="q-pa-sm">{{
-                        scope.opt.category
-                      }}</q-item-label>
-                    </template>
-                  </q-select>
+                  <tactical-dropdown class="col-8" v-model="agent.site" :options="siteOptions" outlined mapOptions />
                 </q-card-section>
                 <q-card-section class="row">
                   <div class="col-2">Type:</div>
@@ -149,11 +129,12 @@ import { mapGetters } from "vuex";
 import mixins from "@/mixins/mixins";
 import PatchPolicyForm from "@/components/modals/agents/PatchPolicyForm";
 import CustomField from "@/components/ui/CustomField";
+import TacticalDropdown from "@/components/ui/TacticalDropdown";
 
 export default {
   name: "EditAgent",
   emits: ["edit", "close"],
-  components: { PatchPolicyForm, CustomField },
+  components: { PatchPolicyForm, CustomField, TacticalDropdown },
   mixins: [mixins],
   data() {
     return {
diff --git a/src/components/modals/agents/RunScript.vue b/src/components/modals/agents/RunScript.vue
index 1e938c7..5144841 100644
--- a/src/components/modals/agents/RunScript.vue
+++ b/src/components/modals/agents/RunScript.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog ref="dialogRef" @hide="onDialogHide" :maximized="maximized">
+  <q-dialog ref="dialogRef" @hide="onDialogHide" persistent @keydown.esc="onDialogHide" :maximized="maximized">
     <q-card class="dialog-plugin" style="min-width: 50vw">
       <q-bar>
         Run a script on {{ agent.hostname }}
@@ -18,20 +18,20 @@
         <q-card-section>
           <tactical-dropdown
             :rules="[val => !!val || '*Required']"
-            outlined
-            v-model="scriptPK"
+            v-model="state.script"
             :options="scriptOptions"
             label="Select script"
+            outlined
             mapOptions
+            filterable
           />
         </q-card-section>
         <q-card-section>
-          <q-select
+          <tactical-dropdown
+            v-model="state.args"
             label="Script Arguments (press Enter after typing each argument)"
             filled
-            v-model="args"
             use-input
-            use-chips
             multiple
             hide-dropdown-icon
             input-debounce="0"
@@ -39,55 +39,40 @@
           />
         </q-card-section>
         <q-card-section>
+          <q-option-group v-model="state.output" :options="outputOptions" color="primary" inline dense />
+        </q-card-section>
+        <q-card-section v-if="state.output === 'email'">
           <div class="q-gutter-sm">
-            <q-radio dense v-model="output" val="wait" label="Wait for Output" />
-            <q-radio dense v-model="output" val="forget" label="Fire and Forget" />
-            <q-radio dense v-model="output" val="email" label="Email results" />
-            <q-radio dense v-model="output" val="collector" label="Save results to Custom Field" />
-            <q-radio dense v-model="output" val="note" label="Save results to Agent Notes" />
+            <q-radio dense v-model="state.emailMode" val="default" label="Use email addresses from global settings" />
+            <q-radio dense v-model="state.emailMode" val="custom" label="Custom emails" />
           </div>
         </q-card-section>
-        <q-card-section v-if="output === 'email'">
-          <div class="q-gutter-sm">
-            <q-radio
-              dense
-              v-model="emailmode"
-              val="default"
-              label="Use email addresses from global settings"
-              @update:model-value="emails = []"
-            />
-            <q-radio dense v-model="emailmode" val="custom" label="Custom emails" />
-          </div>
-        </q-card-section>
-        <q-card-section v-if="emailmode === 'custom' && output === 'email'">
-          <q-select
+        <q-card-section v-if="state.emailMode === 'custom' && state.output === 'email'">
+          <tactical-dropdown
+            v-model="state.emails"
             label="Email recipients (press Enter after typing each email)"
             filled
-            v-model="emails"
             use-input
-            use-chips
             multiple
             hide-dropdown-icon
             input-debounce="0"
             new-value-mode="add"
           />
         </q-card-section>
-        <q-card-section v-if="output === 'collector'">
+        <q-card-section v-if="state.output === 'collector'">
           <tactical-dropdown
             :rules="[val => !!val || '*Required']"
-            dense
             outlined
-            v-model="custom_field"
+            v-model="state.custom_field"
             :options="customFieldOptions"
             label="Select custom field"
             mapOptions
-            options-dense
           />
-          <q-checkbox v-model="save_all_output" label="Save all output" />
+          <q-checkbox v-model="state.save_all_output" label="Save all output" />
         </q-card-section>
         <q-card-section>
           <q-input
-            v-model.number="timeout"
+            v-model.number="state.timeout"
             dense
             outlined
             type="number"
@@ -97,8 +82,9 @@
             :rules="[val => !!val || '*Required', val => val >= 5 || 'Minimum is 5 seconds']"
           />
         </q-card-section>
-        <q-card-actions align="center">
-          <q-btn :loading="loading" label="Run" color="primary" class="full-width" type="submit" />
+        <q-card-actions align="right">
+          <q-btn label="Cancel" v-close-popup />
+          <q-btn :loading="loading" :disabled="loading" label="Run" color="primary" type="submit" />
         </q-card-actions>
         <q-card-section v-if="ret !== null" class="q-pl-md q-pr-md q-pt-none q-ma-none scroll" style="max-height: 50vh">
           <pre>{{ ret }}</pre>
@@ -112,14 +98,24 @@
 // composition imports
 import { ref, watch, computed, onMounted } from "vue";
 import { useStore } from "vuex";
-import { useDialogPluginComponent, useQuasar } from "quasar";
+import { useDialogPluginComponent } from "quasar";
 import { useScriptDropdown } from "@/composables/scripts";
 import { useCustomFieldDropdown } from "@/composables/core";
 import { runScript } from "@/api/agents";
+import { notifySuccess } from "@/utils/notify";
 
 //ui imports
 import TacticalDropdown from "@/components/ui/TacticalDropdown";
 
+// static data
+const outputOptions = [
+  { label: "Wait for Output", value: "wait" },
+  { label: "Fire and Forget", value: "forget" },
+  { label: "Email results", value: "email" },
+  { label: "Save results to Custom Field", value: "collector" },
+  { label: "Save results to Agent Notes", value: "note" },
+];
+
 export default {
   name: "RunScript",
   emits: [...useDialogPluginComponent.emits],
@@ -128,57 +124,48 @@ export default {
     agent: !Object,
   },
   setup(props) {
-    const $q = useQuasar();
     // setup vuex store
-    const { state } = useStore();
-    const showCommunityScripts = computed(() => state.showCommunityScripts);
+    const store = useStore();
+    const showCommunityScripts = computed(() => store.state.showCommunityScripts);
 
     // setup quasar dialog plugin
     const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
     // setup dropdowns
-    const { scriptPK, scriptOptions, defaultTimeout, defaultArgs, getScriptOptions } = useScriptDropdown();
+    const { script, scriptOptions, defaultTimeout, defaultArgs, getScriptOptions } = useScriptDropdown();
     const { customFieldOptions, getCustomFieldOptions } = useCustomFieldDropdown();
 
     // main run script functionaity
-    const loading = ref(false);
-    const output = ref("wait");
+    const state = ref({
+      pk: props.agent.id,
+      output: "wait",
+      email: [],
+      emailMode: "default",
+      custom_field: null,
+      save_all_output: false,
+      script,
+      args: defaultArgs,
+      timeout: defaultTimeout,
+    });
+
     const ret = ref(null);
-    const emails = ref([]);
-    const emailmode = ref("default");
-    const custom_field = ref(null);
-    const save_all_output = ref(false);
+    const loading = ref(false);
     const maximized = ref(false);
 
     async function sendScript() {
       ret.value = null;
       loading.value = true;
 
-      const data = {
-        pk: props.agent.id,
-        timeout: defaultTimeout.value,
-        scriptPK: scriptPK.value,
-        output: output.value,
-        args: defaultArgs.value,
-        emails: emails.value,
-        emailmode: emailmode.value,
-        custom_field: custom_field.value,
-        save_all_output: save_all_output.value,
-      };
-
-      ret.value = await runScript(data);
+      ret.value = await runScript(state.value);
       loading.value = false;
-      if (output.value === "forget") {
+      if (state.value.output === "forget") {
         onDialogHide();
-        $q.notify({
-          message: ret.value,
-          color: "positive",
-        });
+        notifySuccess(ret.value);
       }
     }
 
     // watchers
-    watch(output, () => (emails.value = []));
+    watch([() => state.value.output, () => state.value.emailMode], () => (state.value.emails = []));
 
     // vue component hooks
     onMounted(() => {
@@ -188,19 +175,15 @@ export default {
 
     return {
       // reactive data
+      state,
       loading,
-      scriptPK,
       scriptOptions,
-      timeout: defaultTimeout,
-      output,
       ret,
-      args: defaultArgs,
-      emails,
-      emailmode,
       maximized,
       customFieldOptions,
-      custom_field,
-      save_all_output,
+
+      // non-reactive data
+      outputOptions,
 
       //methods
       sendScript,
diff --git a/src/components/scripts/ScriptFormModal.vue b/src/components/scripts/ScriptFormModal.vue
index 7753b8c..afcff26 100644
--- a/src/components/scripts/ScriptFormModal.vue
+++ b/src/components/scripts/ScriptFormModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog ref="dialogRef" @hide="onDialogHide" persistent :maximized="maximized">
+  <q-dialog ref="dialogRef" @hide="onDialogHide" persistent @keydown.esc="onDialogHide" :maximized="maximized">
     <q-card class="q-dialog-plugin" :style="maximized ? '' : 'width: 70vw; max-width: 90vw'">
       <q-bar>
         {{ title }}
@@ -79,15 +79,16 @@
         </q-card-section>
         <div class="q-px-sm q-pt-none q-pb-sm q-mt-none row">
           <tactical-dropdown
-            label="Script Arguments (press Enter after typing each argument)"
-            filled
-            class="col-12"
             v-model="formScript.args"
+            label="Script Arguments (press Enter after typing each argument)"
+            class="col-12"
+            filled
             use-input
             multiple
             hide-dropdown-icon
             input-debounce="0"
             new-value-mode="add"
+            :readonly="readonly"
           />
         </div>
 
diff --git a/src/components/scripts/ScriptUploadModal.vue b/src/components/scripts/ScriptUploadModal.vue
index ee62d94..a837671 100644
--- a/src/components/scripts/ScriptUploadModal.vue
+++ b/src/components/scripts/ScriptUploadModal.vue
@@ -19,11 +19,11 @@
 
         <q-card-section>
           <tactical-dropdown
+            v-model="script.category"
+            :options="categories"
             label="Category"
             hint="Press Enter or Tab when adding a new value"
             outlined
-            v-model="script.category"
-            :options="categories"
             filterable
             clearable
             new-value-mode="add-unique"
@@ -47,28 +47,17 @@
         </q-card-section>
 
         <q-card-section>
-          <q-select
-            label="Type"
-            dense
-            options-dense
-            outlined
-            v-model="script.shell"
-            :options="shellOptions"
-            emit-value
-            map-options
-          />
+          <tactical-dropdown v-model="script.shell" :options="shellOptions" label="Type" outlined mapOptions />
         </q-card-section>
 
         <q-card-section>
-          <q-select
+          <tactical-dropdown
+            v-model="script.args"
             label="Script Arguments"
             placeholder="(press Enter after typing each argument)"
             filled
-            v-model="script.args"
             use-input
-            use-chips
             multiple
-            dense
             hide-dropdown-icon
             input-debounce="0"
             new-value-mode="add"
diff --git a/src/components/scripts/TestScriptModal.vue b/src/components/scripts/TestScriptModal.vue
index 4e66846..c641c22 100644
--- a/src/components/scripts/TestScriptModal.vue
+++ b/src/components/scripts/TestScriptModal.vue
@@ -21,17 +21,15 @@
           />
         </q-card-section>
         <q-card-section>
-          <q-select
+          <tactical-dropdown
+            v-model="args"
             label="Script Arguments (press Enter after typing each argument)"
             filled
-            v-model="args"
             use-input
-            use-chips
             multiple
             hide-dropdown-icon
             input-debounce="0"
             new-value-mode="add"
-            dense
           />
         </q-card-section>
         <q-card-section>
@@ -47,6 +45,7 @@
           />
         </q-card-section>
         <q-card-actions align="right">
+          <q-btn label="Cancel" v-close-popup />
           <q-btn :loading="loading" label="Run" color="primary" type="submit" />
         </q-card-actions>
         <q-card-section v-if="ret" class="q-pl-md q-pr-md q-pt-none q-ma-none scroll" style="max-height: 50vh">
diff --git a/src/components/ui/TacticalDropdown.vue b/src/components/ui/TacticalDropdown.vue
index c54f052..05db885 100644
--- a/src/components/ui/TacticalDropdown.vue
+++ b/src/components/ui/TacticalDropdown.vue
@@ -17,7 +17,7 @@
         v-if="!scope.opt.category"
         v-bind="scope.itemProps"
         class="q-pl-lg"
-        :key="mapOptions ? scope.opt.value : null"
+        :key="mapOptions ? scope.opt.value : scope.opt"
       >
         <q-item-section>
           <q-item-label v-html="mapOptions ? scope.opt.label : scope.opt"></q-item-label>
@@ -61,8 +61,8 @@ export default {
     });
 
     return {
-      filterFn,
       filteredOptions,
+      filterFn,
       filterEvent,
     };
   },