Merge pull request #18038 from davelopez/tweak_export_history_ui

Tweak export records UI
galaxyproject · Apr 22, 2024 · 4e27e13 · 4e27e13
2 parents af49b5d + 5676c14
commit 4e27e13
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/client/src/components/Common/ExportRecordDetails.vue b/client/src/components/Common/ExportRecordDetails.vue
@@ -8,12 +8,13 @@ import {
     faLink,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BCard, BCardTitle } from "bootstrap-vue";
+import { BAlert, BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { ColorVariant } from ".";
 import { ExportRecord } from "./models/exportRecordModel";
 
+import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 library.add(faCheckCircle, faClock, faExclamationCircle, faExclamationTriangle, faLink);
@@ -60,10 +61,10 @@ function onMessageDismissed() {
 </script>
 
 <template>
-    <BCard class="export-record-details">
-        <BCardTitle>
+    <div class="export-record-details">
+        <Heading size="sm">
             <b>{{ title }}</b> {{ props.record.elapsedTime }}
-        </BCardTitle>
+        </Heading>
 
         <p v-if="!props.record.isPreparing">
             Format: <b class="record-archive-format">{{ props.record.modelStoreFormat }}</b>
@@ -149,5 +150,5 @@ function onMessageDismissed() {
                 </div>
             </div>
         </div>
-    </BCard>
+    </div>
 </template>
diff --git a/client/src/components/History/Export/HistoryExport.vue b/client/src/components/History/Export/HistoryExport.vue
@@ -299,29 +299,29 @@ function updateExportParams(newParams: ExportParams) {
             {{ errorMessage }}
         </BAlert>
         <div v-else-if="latestExportRecord">
-            <h2 class="h-md mt-3">Latest Export Record</h2>
-            <ExportRecordDetails
-                :record="latestExportRecord"
-                object-type="history"
-                class="mt-3"
-                :action-message="actionMessage"
-                :action-message-variant="actionMessageVariant"
-                @onDownload="downloadFromRecord"
-                @onCopyDownloadLink="copyDownloadLinkFromRecord"
-                @onReimport="reimportFromRecord"
-                @onActionMessageDismissed="onActionMessageDismissedFromRecord" />
+            <h2 class="h-md mt-3">Export Records</h2>
+            <BCard>
+                <ExportRecordDetails
+                    :record="latestExportRecord"
+                    object-type="history"
+                    :action-message="actionMessage"
+                    :action-message-variant="actionMessageVariant"
+                    @onDownload="downloadFromRecord"
+                    @onCopyDownloadLink="copyDownloadLinkFromRecord"
+                    @onReimport="reimportFromRecord"
+                    @onActionMessageDismissed="onActionMessageDismissedFromRecord" />
+                <ExportRecordTable
+                    v-if="hasPreviousExports"
+                    id="previous-export-records"
+                    :records="previousExportRecords"
+                    class="mt-3"
+                    @onDownload="downloadFromRecord"
+                    @onReimport="reimportFromRecord" />
+            </BCard>
         </div>
         <BAlert v-else id="no-export-records-alert" variant="info" class="mt-3" show>
             {{ availableRecordsMessage }}
         </BAlert>
-
-        <ExportRecordTable
-            v-if="hasPreviousExports"
-            id="previous-export-records"
-            :records="previousExportRecords"
-            class="mt-3"
-            @onDownload="downloadFromRecord"
-            @onReimport="reimportFromRecord" />
     </span>
 </template>