Final misc. tasks to support data previews (Step 6 of issue #1758)

src/css/metacatui-common.css

@@ -3519,11 +3519,13 @@ add font awesome close icon */
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  padding: 1rem;
+  padding: 0.7rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .table-editor .spreadsheet {
-  margin: 1rem 0 0.5rem 0;
+  margin: 0.7rem 0 0.5rem 0;
   width: 100%;
   max-width: 90vw;
   height: 100%;
@@ -3533,6 +3535,12 @@ add font awesome close icon */
   border-radius: 5px;
 }
 
+.table-editor .alert {
+  margin: -10px 0 0 0;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.85rem;
+}
+
 .table-editor .table {
   /* undo bootstrap margin */
   margin-bottom: 0;
@@ -9656,4 +9664,19 @@ body > #extension-is-installed {
 ******************************************/
 .object-view {
   height: 100%;
+  display: grid;
+  align-items: center;
+  > .notification {
+    font-size: 1.6rem;
+    margin: 3rem;
+  }
+  > .alert-container {
+    margin: 3rem;
+  }
+  > .btn.download {
+    grid-row: 2;
+    justify-self: right;
+    margin-right: 1rem;
+    margin-top: 1rem;
+  }
 }

src/js/models/SolrResult.js

@@ -281,36 +281,14 @@ define(["jquery", "underscore", "backbone"], ($, _, Backbone) => {
       /**
        * Download this object while sending the user's auth token in the
        * request.
+       * @returns {Promise} A promise that resolves to the response object
+       * @since 0.0.0
        */
       async downloadWithCredentials() {
-        const model = this;
-
         // Call the new getBlob method and handle the response
-        const response = await this.fetchDataObjectWithCredentials();
-        const blob = await response.blob();
-        const filename = this.getFileNameFromResponse(response);
-
-        // For IE, we need to use the navigator API
-        if (navigator && navigator.msSaveOrOpenBlob) {
-          navigator.msSaveOrOpenBlob(blob, filename);
-        } else {
-          // Other browsers can download it via a link
-          const a = document.createElement("a");
-          a.href = window.URL.createObjectURL(blob);
-          a.download = filename;
-          a.style.display = "none";
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-        }
-
-        // Track this event
-        model.trigger("downloadComplete");
-        MetacatUI.analytics?.trackEvent(
-          "download",
-          "Download DataONEObject",
-          model.get("id"),
-        );
+        return this.fetchDataObjectWithCredentials()
+          .then((response) => this.downloadFromResponse(response))
+          .catch((error) => this.handleDownloadError(error));
       },
 
       /**
@@ -370,6 +348,58 @@ define(["jquery", "underscore", "backbone"], ($, _, Backbone) => {
         return filename;
       },
 
+      /**
+       * Download data onto the user's computer from the response object
+       * @param {Response} response - The response object from the fetch request
+       * @returns {Response} The response object
+       * @since 0.0.0
+       */
+      async downloadFromResponse(response) {
+        const model = this;
+        const blob = await response.blob();
+        const filename = this.getFileNameFromResponse(response);
+
+        // For IE, we need to use the navigator API
+        if (navigator && navigator.msSaveOrOpenBlob) {
+          navigator.msSaveOrOpenBlob(blob, filename);
+        } else {
+          // Other browsers can download it via a link
+          const a = document.createElement("a");
+          const url = URL.createObjectURL(blob);
+          a.href = url;
+          a.download = filename;
+          a.click();
+          a.remove();
+          URL.revokeObjectURL(url);
+        }
+
+        // Track this event
+        model.trigger("downloadComplete");
+        MetacatUI.analytics?.trackEvent(
+          "download",
+          "Download DataONEObject",
+          model.get("id"),
+        );
+
+        return response;
+      },
+
+      /**
+       * Handle an error that occurs when downloading the object
+       * @param {Error} e - The error that occurred
+       * @since 0.0.0
+       */
+      handleDownloadError(e) {
+        const model = this;
+        model.trigger("downloadError");
+        // Track the error
+        MetacatUI.analytics?.trackException(
+          `Download DataONEObject error: ${e || ""}`,
+          model.get("id"),
+          true,
+        );
+      },
+
       getInfo: function (fields) {
         var model = this;
 
@@ -550,7 +580,7 @@ define(["jquery", "underscore", "backbone"], ($, _, Backbone) => {
             model.set("size", $(data).find("size").text() || "");
 
             //Get the entity name
-            model.set("filename", $(data).find("filename").text() || "");
+            model.set("fileName", $(data).find("filename").text() || "");
 
             //Check if this is a metadata doc
             var formatId = $(data).find("formatid").text() || "",

src/js/templates/tableEditor.html

@@ -22,12 +22,15 @@
              </tbody>
       </table>
     </section>
+    <!-- if view mode -->
+    <% if (!viewMode) { %>
     <section class="<%= controlsClass %>">
       <button class="btn btn-danger btn-small"
               id="reset">
               Clear & reset table
       </button>
     </section>
+    <% } %>
   <!-- </div>
   <div class="tab-pane" id="insert-table-csv-<%=cid%>">
     <textarea class="table-text"></textarea>