Move rendering of info icons to MetadataView

- Deprecate the template that rendered the icons previously
- Add new methods to MetadataView to render the icons
- Call new methods to render the duplicate icon with the CanonicalDatasetHandlerView

Issue #2541

src/css/metacatui-common.css

@@ -74,6 +74,9 @@ a:hover {
 .icon.warning {
   color: #ffbc00;
 }
+.icon.info {
+  color: #3a87ad;
+}
 .list-group-item.success {
   background-color: #dff0d8;
 }

src/js/templates/metadataInfoIcons.html

@@ -1,3 +1,8 @@
+<% 
+  // This template is now *** DEPRECATED *** in favour of in-view rendering.
+  // To be removed in a future release.
+%>
+
 <% if( !model.isPublic || model.archived ){ %>
 <span class="info-icons">
 <% } %>

src/js/views/CanonicalDatasetHandlerView.js

@@ -12,6 +12,13 @@ define(["backbone"], (Backbone) => {
   // dataset field means
   const CANONICAL_TOOLTIP_TEXT =
     "The original dataset this version was derived from. This dataset is essentially a duplicate of the original.";
+  // The text to display in the info tooltip to explain what the info icon means
+  const INFO_ICON_TOOLTIP_TEXT =
+    "This dataset is essentially a duplicate of of another, original dataset.";
+  // The class to use for the info icon
+  const INFO_ICON_CLASS = "info";
+  // The bootstrap icon name to use for the info icon
+  const INFO_ICON_NAME = "icon-copy";
 
   // The following properties are used to identify parts of the MetadataView.
   // If the MetadataView changes, these properties may need to be updated.
@@ -23,6 +30,7 @@ define(["backbone"], (Backbone) => {
     fieldItem: "control-group",
     fieldLabel: "control-label",
     fieldValue: ["controls", "controls-well"],
+    fieldInfoIcon: ["tooltip-this", "icon", "icon-info-sign"],
   };
 
   /**
@@ -217,11 +225,21 @@ define(["backbone"], (Backbone) => {
       },
 
       /**
-       * Adds a badge to the header of the MetadataView to indicate that the
-       * dataset being displayed is essentially a duplicate of another dataset.
+       * Adds a icon to the header of the MetadataView to indicate that the
+       * dataset being displayed is essentially a duplicate
        */
       addInfoIcon() {
-        // TODO
+        this.infoIcon = this.metadataView.addInfoIcon(
+          "duplicate",
+          INFO_ICON_NAME,
+          INFO_ICON_CLASS,
+          INFO_ICON_TOOLTIP_TEXT,
+        );
+        this.infoIcon.style.cursor = "pointer";
+        this.infoIcon.addEventListener(
+          "click",
+          this.metadataView.showCitationModal.bind(this.metadataView),
+        );
       },
 
       // TODO: Do we need to remove the view from the DOM when the MetadataView

src/js/views/MetadataView.js

@@ -29,7 +29,6 @@ define([
   "text!templates/newerVersion.html",
   "text!templates/loading.html",
   "text!templates/metadataControls.html",
-  "text!templates/metadataInfoIcons.html",
   "text!templates/alert.html",
   "text!templates/editMetadata.html",
   "text!templates/dataDisplay.html",
@@ -67,7 +66,6 @@ define([
   VersionTemplate,
   LoadingTemplate,
   ControlsTemplate,
-  MetadataInfoIconsTemplate,
   AlertTemplate,
   EditMetadataTemplate,
   DataDisplayTemplate,
@@ -1807,12 +1805,7 @@ define([
         $(this.controlsContainer).html(controlsContainer);
 
         // Insert the info icons
-        const metricsWell = this.$(".metrics-container");
-        metricsWell.append(
-          this.infoIconsTemplate({
-            model: this.model.toJSON(),
-          }),
-        );
+        this.renderInfoIcons();
 
         if (MetacatUI.appModel.get("showWholeTaleFeatures")) {
           this.createWholeTaleButton();
@@ -1825,19 +1818,75 @@ define([
           citeButton.removeEventListener("click", this.citationModal);
           citeButton.addEventListener(
             "click",
-            () => {
-              this.citationModal = new CitationModalView({
-                model: this.model,
-                createLink: true,
-              });
-              this.subviews.push(this.citationModal);
-              this.citationModal.render();
-            },
-            false,
+      /**
+       * Add the info icons to the metadata controls panel. Shows if the dataset
+       * is private or archived.
+       * @since 0.0.0
+       */
+      renderInfoIcons() {
+        const isPrivate = !this.model.get("isPublic");
+        const isArchived = this.model.get("archived");
+        if (!isPrivate && !isArchived) return;
+
+        if (isPrivate) {
+          this.addInfoIcon(
+            "private",
+            "icon-lock",
+            "private",
+            "This is a private dataset.",
+          );
+        }
+        if (isArchived) {
+          this.addInfoIcon(
+            "archived",
+            "icon-trash",
+            "danger",
+            "This dataset has been archived.",
           );
         }
       },
 
+      /**
+       * Add an info icon to the metadata controls panel.
+       * @param {string} iconType - The type of icon to add.
+       * @param {string} iconClass - The class
+       * @param {string} baseClass - The base class
+       * @param {string} titleText - The text to display when the icon is hovered
+       * over.
+       * @returns {HTMLElement} The icon element that was added to the view.
+       * @since 0.0.0
+       */
+      addInfoIcon(iconType, iconClass, baseClass, titleText) {
+        const iconHTML = `<span class="${iconType} icons">
+            <span class="icon-stack ${iconType} tooltip-this"
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  data-container="#metadata-controls-container"
+                  title="${titleText}">
+              <i class="icon icon-circle icon-stack-base ${baseClass}"></i>
+              <i class="icon ${iconClass} icon-stack-top"></i>
+            </span>
+          </span>`;
+
+        // Convert the string into DOM element so we can return it
+        const range = document.createRange();
+        const newIconFragment = range.createContextualFragment(iconHTML);
+        const newIcon = newIconFragment.firstChild;
+
+        if (!this.infoIconContainer) {
+          const container = this.$(".metrics-container");
+          const iconContainer = $(document.createElement("span")).addClass(
+            "info-icons",
+          );
+          container.prepend(iconContainer);
+          this.infoIconContainer = iconContainer;
+        }
+
+        this.infoIconContainer.append(newIcon);
+
+        return newIcon;
+      },
+
       /**
        *Creates a button which the user can click to launch the package in Whole
        *Tale