From 884525be74b67abb14a4c9b2e1e4a22afbd640c3 Mon Sep 17 00:00:00 2001
From: David Whittaker <84562015+whitdog47@users.noreply.github.com>
Date: Wed, 1 Nov 2023 13:13:26 -0700
Subject: [PATCH] Fixing styling for incident priority settings, search filter
 settings, and plugins table (#3918)

---
 .../dispatch/src/incident/priority/Table.vue  |  45 +++---
 .../static/dispatch/src/plugin/Table.vue      |   1 -
 .../static/dispatch/src/search/EditDialog.vue | 140 +++++++++---------
 3 files changed, 94 insertions(+), 92 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/incident/priority/Table.vue b/src/dispatch/static/dispatch/src/incident/priority/Table.vue
index 4fdaf6457a25..940630c6c4b6 100644
--- a/src/dispatch/static/dispatch/src/incident/priority/Table.vue
+++ b/src/dispatch/static/dispatch/src/incident/priority/Table.vue
@@ -76,31 +76,36 @@
       <v-col>
         <div class="text-body-1 ml-4 mt-6">Incident priority settings</div>
         <v-row align="start" no-gutters>
-          <v-col class="d-flex justify-start">
-            <v-checkbox
-              class="ml-10 mr-5"
-              v-model="restrictStable"
-              label="Restrict Stable status to this priority:"
-              @update:model-value="updateStablePriority"
-            />
-            <v-tooltip max-width="500px" open-delay="50" location="bottom">
-              <template #activator="{ props }">
-                <v-icon v-bind="props">mdi-information</v-icon>
-              </template>
-              <span>
-                If activated, Dispatch will automatically change Stable incidents to this priority.
-                Also, users will not be permitted to change the priority on Stable incidents.
-              </span>
-            </v-tooltip>
-            <span max-width="500px">
+          <div class="d-flex justify-content-start">
+            <v-col cols="10" class="mt-2">
+              <v-checkbox
+                class="ml-10 mr-5"
+                v-model="restrictStable"
+                label="Restrict Stable status to this priority:"
+                @update:model-value="updateStablePriority"
+              />
+            </v-col>
+            <v-col class="mt-5">
+              <v-tooltip max-width="500px" open-delay="50" location="bottom">
+                <template #activator="{ props }">
+                  <v-icon v-bind="props">mdi-information</v-icon>
+                </template>
+                <span>
+                  If activated, Dispatch will automatically change Stable incidents to this
+                  priority. Also, users will not be permitted to change the priority on Stable
+                  incidents.
+                </span>
+              </v-tooltip>
+            </v-col>
+            <v-col cols="6">
               <incident-priority-select
                 class="ml-4"
-                max-width="400px"
+                width="400px"
                 v-model="stablePriority"
                 :project="project[0]"
               />
-            </span>
-          </v-col>
+            </v-col>
+          </div>
         </v-row>
       </v-col>
     </v-row>
diff --git a/src/dispatch/static/dispatch/src/plugin/Table.vue b/src/dispatch/static/dispatch/src/plugin/Table.vue
index be37e97e2afb..cd5ab07dcedd 100644
--- a/src/dispatch/static/dispatch/src/plugin/Table.vue
+++ b/src/dispatch/static/dispatch/src/plugin/Table.vue
@@ -23,7 +23,6 @@
               clearable
             />
           </v-card-title>
-          <pre>{{ itemsPerPage }}</pre>
           <v-data-table-server
             :headers="headers"
             :items="items"
diff --git a/src/dispatch/static/dispatch/src/search/EditDialog.vue b/src/dispatch/static/dispatch/src/search/EditDialog.vue
index 783b491e33d4..0a5776432463 100644
--- a/src/dispatch/static/dispatch/src/search/EditDialog.vue
+++ b/src/dispatch/static/dispatch/src/search/EditDialog.vue
@@ -11,79 +11,77 @@
           <v-list-item-title class="text-h6"> Edit </v-list-item-title>
           <v-list-item-subtitle>Search Filter</v-list-item-subtitle>
 
-          <v-btn
-            icon
-            variant="text"
-            color="info"
-            :loading="loading"
-            :disabled="!isValid.value"
-            @click="save()"
-          >
-            <v-icon>mdi-content-save</v-icon>
-          </v-btn>
-          <v-btn icon variant="text" color="secondary" @click="closeCreateEdit">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
+          <template #append>
+            <v-btn
+              icon
+              variant="text"
+              color="info"
+              :loading="loading"
+              :disabled="!isValid.value"
+              @click="save()"
+            >
+              <v-icon>mdi-content-save</v-icon>
+            </v-btn>
+            <v-btn icon variant="text" color="secondary" @click="closeCreateEdit">
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
+          </template>
         </v-list-item>
-        <v-card>
-          <v-card-text>
-            <v-container>
-              <v-row>
-                <v-col cols="12">
-                  <v-text-field
-                    v-model="name"
-                    label="Name"
-                    name="Name"
-                    hint="Name of type."
-                    clearable
-                    required
-                    :rules="[rules.required]"
-                  />
-                </v-col>
-                <v-col cols="12">
-                  <v-textarea
-                    v-model="description"
-                    label="Description"
-                    name="Description"
-                    hint="Description of type."
-                    clearable
-                    required
-                    :rules="[rules.required]"
-                  />
-                </v-col>
-              </v-row>
-              <div class="text-body-2 ml-1 mt-2">Individuals</div>
-              <v-divider class="mt-2" />
-              <v-list style="max-height: 500px" class="overflow-y-auto">
-                <v-list-item v-for="individual in individuals" :key="individual.id">
-                  <incident-participant :participant="convertToParticipant(individual)" />
-                </v-list-item>
-              </v-list>
-              <div class="text-body-2 ml-1 mt-2">Teams</div>
-              <v-divider class="mt-2" />
-              <v-list style="max-height: 500px" class="overflow-y-auto">
-                <v-list-item v-for="team in teams" :key="team.id">
-                  <v-list-item-title>{{ team.name }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-              <div class="text-body-2 ml-1 mt-2">Services</div>
-              <v-divider class="mt-2" />
-              <v-list style="max-height: 500px" class="overflow-y-auto">
-                <v-list-item v-for="service in services" :key="service.id">
-                  <v-list-item-title>{{ service.name }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-              <div class="text-body-2 ml-1 mt-2">Notifications</div>
-              <v-divider class="mt-2" />
-              <v-list style="max-height: 500px" class="overflow-y-auto">
-                <v-list-item v-for="notification in notifications" :key="notification.id">
-                  <v-list-item-title>{{ notification.name }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-container>
-          </v-card-text>
-        </v-card>
       </template>
+      <v-container>
+        <v-row>
+          <v-col cols="12">
+            <v-text-field
+              v-model="name"
+              label="Name"
+              name="Name"
+              hint="Name of type."
+              clearable
+              required
+              :rules="[rules.required]"
+            />
+          </v-col>
+          <v-col cols="12">
+            <v-textarea
+              v-model="description"
+              label="Description"
+              name="Description"
+              hint="Description of type."
+              clearable
+              required
+              :rules="[rules.required]"
+            />
+          </v-col>
+        </v-row>
+        <div class="text-body-2 ml-1 mt-2">Individuals</div>
+        <v-divider class="mt-2" />
+        <v-list style="max-height: 500px">
+          <v-list-item v-for="individual in individuals" :key="individual.id">
+            <incident-participant :participant="convertToParticipant(individual)" />
+          </v-list-item>
+        </v-list>
+        <div class="text-body-2 ml-1 mt-2">Teams</div>
+        <v-divider class="mt-2" />
+        <v-list style="max-height: 500px">
+          <v-list-item v-for="team in teams" :key="team.id">
+            <v-list-item-title>{{ team.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+        <div class="text-body-2 ml-1 mt-2">Services</div>
+        <v-divider class="mt-2" />
+        <v-list style="max-height: 500px">
+          <v-list-item v-for="service in services" :key="service.id">
+            <v-list-item-title>{{ service.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+        <div class="text-body-2 ml-1 mt-2">Notifications</div>
+        <v-divider class="mt-2" />
+        <v-list style="max-height: 500px">
+          <v-list-item v-for="notification in notifications" :key="notification.id">
+            <v-list-item-title>{{ notification.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-container>
     </v-navigation-drawer>
   </v-form>
 </template>