From 81a464243e76167bf893d7dfefc16f889c7b105e Mon Sep 17 00:00:00 2001
From: David Whittaker <84562015+whitdog47@users.noreply.github.com>
Date: Wed, 1 Nov 2023 13:13:04 -0700
Subject: [PATCH] Fixing export preview missing scroll for incidents, cases,
 and tasks (#3919)

---
 .../dispatch/src/case/TableExportDialog.vue   | 135 +++++++------
 .../src/incident/TableExportDialog.vue        | 137 +++++++------
 .../dispatch/src/task/TableExportDialog.vue   | 182 ++++++++++--------
 3 files changed, 248 insertions(+), 206 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/case/TableExportDialog.vue b/src/dispatch/static/dispatch/src/case/TableExportDialog.vue
index 2c0455c7df6f..a1e329c0e2a1 100644
--- a/src/dispatch/static/dispatch/src/case/TableExportDialog.vue
+++ b/src/dispatch/static/dispatch/src/case/TableExportDialog.vue
@@ -17,71 +17,77 @@
         </v-stepper-header>
         <v-stepper-window>
           <v-stepper-window-item :value="1">
-            <v-list density="compact">
-              <v-list-item>
-                <date-window-input v-model="reported_at" label="Reported At" />
-              </v-list-item>
-              <v-list-item>
-                <project-combobox v-model="project" label="Projects" />
-              </v-list-item>
-              <v-list-item>
-                <tag-filter-auto-complete v-model="tag" label="Tags" />
-              </v-list-item>
-              <v-list-item>
-                <tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
-              </v-list-item>
-              <v-list-item>
-                <case-type-combobox v-model="case_type" />
-              </v-list-item>
-              <v-list-item>
-                <case-severity-combobox v-model="case_severity" />
-              </v-list-item>
-              <v-list-item>
-                <case-priority-combobox v-model="case_priority" />
-              </v-list-item>
-              <v-list-item>
-                <case-status-multi-select v-model="status" />
-              </v-list-item>
-            </v-list>
-            <v-spacer />
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
-            <v-btn color="info" @click="e1 = 2"> Continue </v-btn>
+            <div class="scrollable-container">
+              <v-list density="compact">
+                <v-list-item>
+                  <date-window-input v-model="reported_at" label="Reported At" />
+                </v-list-item>
+                <v-list-item>
+                  <project-combobox v-model="project" label="Projects" />
+                </v-list-item>
+                <v-list-item>
+                  <tag-filter-auto-complete v-model="tag" label="Tags" />
+                </v-list-item>
+                <v-list-item>
+                  <tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
+                </v-list-item>
+                <v-list-item>
+                  <case-type-combobox v-model="case_type" />
+                </v-list-item>
+                <v-list-item>
+                  <case-severity-combobox v-model="case_severity" />
+                </v-list-item>
+                <v-list-item>
+                  <case-priority-combobox v-model="case_priority" />
+                </v-list-item>
+                <v-list-item>
+                  <case-status-multi-select v-model="status" />
+                </v-list-item>
+              </v-list>
+              <v-spacer />
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+              <v-btn color="info" @click="e1 = 2"> Continue </v-btn>
+            </div>
           </v-stepper-window-item>
           <v-stepper-window-item :value="2">
-            <v-autocomplete
-              v-model="selectedFields"
-              :items="allFields"
-              label="Fields"
-              multiple
-              chips
-              return-object
-            />
-            <v-spacer />
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
-            <v-btn color="info" @click="e1 = 3"> Continue </v-btn>
+            <div class="scrollable-container">
+              <v-autocomplete
+                v-model="selectedFields"
+                :items="allFields"
+                label="Fields"
+                multiple
+                chips
+                return-object
+              />
+              <v-spacer />
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+              <v-btn color="info" @click="e1 = 3"> Continue </v-btn>
+            </div>
           </v-stepper-window-item>
           <v-stepper-window-item :value="3">
-            <v-data-table
-              hide-default-footer
-              :headers="selectedFields"
-              :items="items"
-              :loading="previewRowsLoading"
-            >
-              <template #item.case_severity.name="{ item }">
-                <case-severity :severity="item.case_severity.name" />
-              </template>
-              <template #item.case_priority.name="{ item }">
-                <case-priority :priority="item.case_priority.name" />
-              </template>
-              <template #item.status="{ item }">
-                <case-status :status="item.status" :id="item.id" />
-              </template>
-            </v-data-table>
-            <v-spacer />
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
-            <v-badge :model-value="!!total" color="info" bordered :content="total">
-              <v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
-            </v-badge>
+            <div class="scrollable-container">
+              <v-data-table
+                hide-default-footer
+                :headers="selectedFields"
+                :items="items"
+                :loading="previewRowsLoading"
+              >
+                <template #item.case_severity.name="{ item }">
+                  <case-severity :severity="item.case_severity.name" />
+                </template>
+                <template #item.case_priority.name="{ item }">
+                  <case-priority :priority="item.case_priority.name" />
+                </template>
+                <template #item.status="{ item }">
+                  <case-status :status="item.status" :id="item.id" />
+                </template>
+              </v-data-table>
+              <v-spacer />
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+              <v-badge :model-value="!!total" color="info" bordered :content="total">
+                <v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
+              </v-badge>
+            </div>
           </v-stepper-window-item>
         </v-stepper-window>
       </v-stepper>
@@ -229,3 +235,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.scrollable-container {
+  max-height: 60vh; /* Adjust as needed */
+  overflow-y: auto;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue b/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue
index d4552a46db85..e9973456bd3f 100644
--- a/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue
+++ b/src/dispatch/static/dispatch/src/incident/TableExportDialog.vue
@@ -17,72 +17,78 @@
         </v-stepper-header>
         <v-stepper-window>
           <v-stepper-window-item :value="1">
-            <v-list density="compact">
-              <v-list-item>
-                <date-window-input v-model="reported_at" label="Reported At" />
-              </v-list-item>
-              <v-list-item>
-                <project-combobox v-model="project" label="Projects" />
-              </v-list-item>
-              <v-list-item>
-                <tag-filter-auto-complete v-model="tag" label="Tags" />
-              </v-list-item>
-              <v-list-item>
-                <tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
-              </v-list-item>
-              <v-list-item>
-                <incident-type-combobox v-model="incident_type" />
-              </v-list-item>
-              <v-list-item>
-                <incident-severity-combobox v-model="incident_severity" />
-              </v-list-item>
-              <v-list-item>
-                <incident-priority-combobox v-model="incident_priority" />
-              </v-list-item>
-              <v-list-item>
-                <incident-status-multi-select v-model="status" />
-              </v-list-item>
-            </v-list>
-            <v-spacer />
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
-            <v-btn color="info" @click="e1 = 2"> Continue </v-btn>
+            <div class="scrollable-container">
+              <v-list density="compact">
+                <v-list-item>
+                  <date-window-input v-model="reported_at" label="Reported At" />
+                </v-list-item>
+                <v-list-item>
+                  <project-combobox v-model="project" label="Projects" />
+                </v-list-item>
+                <v-list-item>
+                  <tag-filter-auto-complete v-model="tag" label="Tags" />
+                </v-list-item>
+                <v-list-item>
+                  <tag-type-filter-combobox v-model="tag_type" label="Tag Types" />
+                </v-list-item>
+                <v-list-item>
+                  <incident-type-combobox v-model="incident_type" />
+                </v-list-item>
+                <v-list-item>
+                  <incident-severity-combobox v-model="incident_severity" />
+                </v-list-item>
+                <v-list-item>
+                  <incident-priority-combobox v-model="incident_priority" />
+                </v-list-item>
+                <v-list-item>
+                  <incident-status-multi-select v-model="status" />
+                </v-list-item>
+              </v-list>
+              <v-spacer />
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+              <v-btn color="info" @click="e1 = 2"> Continue </v-btn>
+            </div>
           </v-stepper-window-item>
           <v-stepper-window-item :value="2">
-            <v-autocomplete
-              v-model="selectedFields"
-              :items="allFields"
-              item-title="text"
-              label="Fields"
-              multiple
-              chips
-              return-object
-            />
-            <v-spacer />
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
-            <v-btn color="info" @click="e1 = 3"> Continue </v-btn>
+            <div class="scrollable-container">
+              <v-autocomplete
+                v-model="selectedFields"
+                :items="allFields"
+                item-title="text"
+                label="Fields"
+                multiple
+                chips
+                return-object
+              />
+              <v-spacer />
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+              <v-btn color="info" @click="e1 = 3"> Continue </v-btn>
+            </div>
           </v-stepper-window-item>
           <v-stepper-window-item :value="3">
-            <v-data-table
-              hide-default-footer
-              :headers="selectedFields"
-              :items="items"
-              :loading="previewRowsLoading"
-            >
-              <template #item.incident_severity.name="{ item }">
-                <incident-severity :severity="item.incident_severity.name" />
-              </template>
-              <template #item.incident_priority.name="{ item }">
-                <incident-priority :priority="item.incident_priority.name" />
-              </template>
-              <template #item.status="{ item }">
-                <incident-status :status="item.status" :id="item.id" />
-              </template>
-            </v-data-table>
-            <v-spacer />
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
-            <v-badge :model-value="!!total" color="info" bordered :content="total">
-              <v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
-            </v-badge>
+            <div class="scrollable-container">
+              <v-data-table
+                hide-default-footer
+                :headers="selectedFields"
+                :items="items"
+                :loading="previewRowsLoading"
+              >
+                <template #item.incident_severity.name="{ item }">
+                  <incident-severity :severity="item.incident_severity.name" />
+                </template>
+                <template #item.incident_priority.name="{ item }">
+                  <incident-priority :priority="item.incident_priority.name" />
+                </template>
+                <template #item.status="{ item }">
+                  <incident-status :status="item.status" :id="item.id" />
+                </template>
+              </v-data-table>
+              <v-spacer />
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+              <v-badge :model-value="!!total" color="info" bordered :content="total">
+                <v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
+              </v-badge>
+            </div>
           </v-stepper-window-item>
         </v-stepper-window>
       </v-stepper>
@@ -240,3 +246,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.scrollable-container {
+  max-height: 60vh; /* Adjust as needed */
+  overflow-y: auto;
+}
+</style>
diff --git a/src/dispatch/static/dispatch/src/task/TableExportDialog.vue b/src/dispatch/static/dispatch/src/task/TableExportDialog.vue
index 5e452ba97aa4..77673f28f8c4 100644
--- a/src/dispatch/static/dispatch/src/task/TableExportDialog.vue
+++ b/src/dispatch/static/dispatch/src/task/TableExportDialog.vue
@@ -21,95 +21,104 @@
 
         <v-stepper-window>
           <v-stepper-window-item :value="1">
-            <v-list density="compact">
-              <v-list-item>
-                <incident-combobox v-model="incident" />
-              </v-list-item>
-              <v-list-item>
-                <project-combobox v-model="project" label="Projects" />
-              </v-list-item>
-              <v-list-item>
-                <task-status-multi-select v-model="status" />
-              </v-list-item>
-              <v-list-item>
-                <incident-type-combobox v-model="incident_type" label="Incident Type" />
-              </v-list-item>
-              <v-list-item>
-                <incident-priority-combobox v-model="incident_priority" label="Incident Priority" />
-              </v-list-item>
-            </v-list>
-            <v-btn color="info" @click="e1 = 2"> Continue </v-btn>
-
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+            <div class="scrollable-container">
+              <v-list density="compact">
+                <v-list-item>
+                  <incident-combobox v-model="incident" />
+                </v-list-item>
+                <v-list-item>
+                  <project-combobox v-model="project" label="Projects" />
+                </v-list-item>
+                <v-list-item>
+                  <task-status-multi-select v-model="status" />
+                </v-list-item>
+                <v-list-item>
+                  <incident-type-combobox v-model="incident_type" label="Incident Type" />
+                </v-list-item>
+                <v-list-item>
+                  <incident-priority-combobox
+                    v-model="incident_priority"
+                    label="Incident Priority"
+                  />
+                </v-list-item>
+              </v-list>
+              <v-btn color="info" @click="e1 = 2"> Continue </v-btn>
+
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+            </div>
           </v-stepper-window-item>
 
           <v-stepper-window-item :value="2">
-            <v-autocomplete
-              v-model="selectedFields"
-              :items="allFields"
-              label="Fields"
-              multiple
-              chips
-              return-object
-            />
-            <v-btn color="info" @click="e1 = 3"> Continue </v-btn>
-
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+            <div class="scrollable-container">
+              <v-autocomplete
+                v-model="selectedFields"
+                :items="allFields"
+                label="Fields"
+                multiple
+                chips
+                return-object
+              />
+              <v-btn color="info" @click="e1 = 3"> Continue </v-btn>
+
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+            </div>
           </v-stepper-window-item>
 
           <v-stepper-window-item :value="3">
-            <v-data-table
-              hide-default-footer
-              :headers="selectedFields"
-              :items="items"
-              :loading="previewRowsLoading"
-            >
-              <template #item.description="{ item }">
-                <div class="text-truncate" style="max-width: 400px">
-                  {{ item.description }}
-                </div>
-              </template>
-              <template #item.incident.status="{ item }">
-                <incident-status :status="item.incident.status" :id="item.id" />
-              </template>
-              <template #item.incident_priority.name="{ item }">
-                <incident-priority :priority="item.incident.incident_priority.name" />
-              </template>
-              <template #item.creator.individual_contact.name="{ item }">
-                <participant :participant="item.creator" />
-              </template>
-              <template #item.owner.individual_contact.name="{ item }">
-                <participant :participant="item.owner" />
-              </template>
-              <template #item.incident_type.name="{ item }">
-                {{ item.incident.incident_type.name }}
-              </template>
-              <template #item.assignees="{ item }">
-                <participant
-                  v-for="assignee in item.assignees"
-                  :key="assignee.id"
-                  :participant="assignee"
-                />
-              </template>
-              <template #item.resolve_by="{ item }">
-                {{ formatDate(item.resolve_by) }}
-              </template>
-              <template #item.created_at="{ item }">
-                {{ formatDate(item.created_at) }}
-              </template>
-              <template #item.resolved_at="{ item }">
-                {{ formatDate(item.resolved_at) }}
-              </template>
-              <template #item.source="{ item }">
-                {{ item.source }}
-                <a :href="item.weblink" target="_blank" style="text-decoration: none" />
-              </template>
-            </v-data-table>
-            <v-badge :model-value="!!total" color="info" bordered :content="total">
-              <v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
-            </v-badge>
-
-            <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+            <div class="scrollable-container">
+              <v-data-table
+                hide-default-footer
+                :headers="selectedFields"
+                :items="items"
+                :loading="previewRowsLoading"
+              >
+                <template #item.description="{ item }">
+                  <div class="text-truncate" style="max-width: 400px">
+                    {{ item.description }}
+                  </div>
+                </template>
+                <template #item.incident.status="{ item }">
+                  <incident-status :status="item.incident.status" :id="item.id" />
+                </template>
+                <template #item.incident_priority.name="{ item }">
+                  <incident-priority :priority="item.incident.incident_priority.name" />
+                </template>
+                <template #item.creator.individual_contact.name="{ item }">
+                  <participant :participant="item.creator" />
+                </template>
+                <template #item.owner.individual_contact.name="{ item }">
+                  <participant :participant="item.owner" />
+                </template>
+                <template #item.incident_type.name="{ item }">
+                  {{ item.incident.incident_type.name }}
+                </template>
+                <template #item.assignees="{ item }">
+                  <participant
+                    v-for="assignee in item.assignees"
+                    :key="assignee.id"
+                    :participant="assignee"
+                  />
+                </template>
+                <template #item.resolve_by="{ item }">
+                  {{ formatDate(item.resolve_by) }}
+                </template>
+                <template #item.created_at="{ item }">
+                  {{ formatDate(item.created_at) }}
+                </template>
+                <template #item.resolved_at="{ item }">
+                  {{ formatDate(item.resolved_at) }}
+                </template>
+                <template #item.source="{ item }">
+                  {{ item.source }}
+                  <a :href="item.weblink" target="_blank" style="text-decoration: none" />
+                </template>
+              </v-data-table>
+              <v-badge :model-value="!!total" color="info" bordered :content="total">
+                <v-btn color="info" @click="exportToCSV()" :loading="exportLoading"> Export </v-btn>
+              </v-badge>
+
+              <v-btn @click="closeExport()" variant="text"> Cancel </v-btn>
+            </div>
           </v-stepper-window-item>
         </v-stepper-window>
       </v-stepper>
@@ -234,3 +243,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.scrollable-container {
+  max-height: 60vh; /* Adjust as needed */
+  overflow-y: auto;
+}
+</style>