From 3b65d731e904e241c699a78798bfa28e9a3e0964 Mon Sep 17 00:00:00 2001
From: Norris Ng <103449568+norrisng-bc@users.noreply.github.com>
Date: Fri, 21 Jun 2024 17:12:02 -0700
Subject: [PATCH] Bulk results modal: add dummy print button, tweak DataTable
 CSS

CSS: adjust margins when there are many emails; do not wrap long emails/results
---
 .../components/common/BulkPermissionResults.vue   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/BulkPermissionResults.vue b/frontend/src/components/common/BulkPermissionResults.vue
index 0eca347f..eea3ef67 100644
--- a/frontend/src/components/common/BulkPermissionResults.vue
+++ b/frontend/src/components/common/BulkPermissionResults.vue
@@ -30,6 +30,7 @@ const exportCSV = () => {
     :modal="true"
   >
     <DataTable
+      :id="'results-table'"
       ref="batchResults"
       :export-filename="`${resourceType === 'object' ? resource.name.replace(/\.[^/.]+$/, '') : resource.bucketName}_bulk_results`"
       :value="props.results"
@@ -44,6 +45,13 @@ const exportCSV = () => {
         >
           <font-awesome-icon icon="fas fa-download" />
         </Button>
+        <Button
+          v-tooltip.bottom="'Print results'"
+          aria-label="Print results"
+          class="p-button p-button-text"
+        >
+          <font-awesome-icon icon="fas fa-print" />
+        </Button>
       </div>
       <Column
         field="email"
@@ -54,7 +62,7 @@ const exportCSV = () => {
         header="Result"
       >
         <template #body="{ data }">
-          <span>
+          <span class="mr-3">
             <span class="m-1">
               <font-awesome-icon
                 v-if="data.status === 1"
@@ -90,4 +98,9 @@ const exportCSV = () => {
 .icon-noaction {
   color: $bcbox-noaction;
 }
+
+#results-table {
+  text-wrap: nowrap;
+  min-width: 35em;
+}
 </style>