Fixes #7080: Re-add missing image preview element

docs/release-notes/version-3.0.md

@@ -8,6 +8,7 @@
 * [#7071](https://github.com/netbox-community/netbox/issues/7071) - Fix exception when removing a primary IP from a device/VM
 * [#7072](https://github.com/netbox-community/netbox/issues/7072) - Fix table configuration under prefix child object views
 * [#7075](https://github.com/netbox-community/netbox/issues/7075) - Fix UI bug when a custom field has a space in the name
+* [#7080](https://github.com/netbox-community/netbox/issues/7080) - Fix missing image previews
 * [#7081](https://github.com/netbox-community/netbox/issues/7081) - Fix UI bug that did not properly request and handle paginated data
 * [#7082](https://github.com/netbox-community/netbox/issues/7082) - Avoid exception when referencing invalid content type in table
 * [#7083](https://github.com/netbox-community/netbox/issues/7083) - Correct labeling for VM memory attribute

netbox/project-static/src/bs.ts

@@ -1,6 +1,6 @@
-import { Collapse, Modal, Tab, Toast, Tooltip } from 'bootstrap';
+import { Collapse, Modal, Popover, Tab, Toast, Tooltip } from 'bootstrap';
 import Masonry from 'masonry-layout';
-import { getElements } from './util';
+import { createElement, getElements } from './util';
 
 type ToastLevel = 'danger' | 'warning' | 'success' | 'info';
 
@@ -8,6 +8,7 @@ type ToastLevel = 'danger' | 'warning' | 'success' | 'info';
 // plugins).
 window.Collapse = Collapse;
 window.Modal = Modal;
+window.Popover = Popover;
 window.Toast = Toast;
 window.Tooltip = Tooltip;
 
@@ -156,13 +157,48 @@ function initSidebarAccordions(): void {
   }
 }
 
+/**
+ * Initialize image preview popover, which shows a preview of an image from an image link with the
+ * `.image-preview` class.
+ */
+function initImagePreview(): void {
+  for (const element of getElements<HTMLAnchorElement>('a.image-preview')) {
+    // Generate a max-width that's a quarter of the screen's width (note - the actual element
+    // width will be slightly larger due to the popover body's padding).
+    const maxWidth = `${Math.round(window.innerWidth / 4)}px`;
+
+    // Create an image element that uses the linked image as its `src`.
+    const image = createElement('img', { src: element.href });
+    image.style.maxWidth = maxWidth;
+
+    // Create a container for the image.
+    const content = createElement('div', null, null, [image]);
+
+    // Initialize the Bootstrap Popper instance.
+    new Popover(element, {
+      // Attach this custom class to the popover so that it styling can be controlled via CSS.
+      customClass: 'image-preview-popover',
+      trigger: 'hover',
+      html: true,
+      content,
+    });
+  }
+}
+
 /**
  * Enable any defined Bootstrap Tooltips.
  *
  * @see https://getbootstrap.com/docs/5.0/components/tooltips
  */
 export function initBootstrap(): void {
-  for (const func of [initTooltips, initModals, initMasonry, initTabs, initSidebarAccordions]) {
+  for (const func of [
+    initTooltips,
+    initModals,
+    initMasonry,
+    initTabs,
+    initImagePreview,
+    initSidebarAccordions,
+  ]) {
     func();
   }
 }

netbox/project-static/src/global.d.ts

@@ -17,6 +17,11 @@ interface Window {
    */
   Modal: typeof import('bootstrap').Modal;
 
+  /**
+   * Bootstrap Popover Instance.
+   */
+  Popover: typeof import('bootstrap').Popover;
+
   /**
    * Bootstrap Toast Instance.
    */

netbox/project-static/src/util.ts

@@ -422,7 +422,12 @@ export function createElement<
   P extends InferredProps<T>,
   // Child element type.
   C extends HTMLElement = HTMLElement,
->(tag: T, properties: P | null, classes: string[], children: C[] = []): HTMLElementTagNameMap[T] {
+>(
+  tag: T,
+  properties: P | null,
+  classes: Nullable<string[]> = null,
+  children: C[] = [],
+): HTMLElementTagNameMap[T] {
   // Create the base element.
   const element = document.createElement<T>(tag);
 
@@ -438,7 +443,9 @@ export function createElement<
   }
 
   // Add each CSS class to the element's class list.
-  element.classList.add(...classes);
+  if (classes !== null && classes.length > 0) {
+    element.classList.add(...classes);
+  }
 
   for (const child of children) {
     // Add each child element to the base element.

netbox/project-static/styles/netbox.scss

@@ -956,6 +956,11 @@ div.card-overlay {
   }
 }
 
+// Remove the max-width from image preview popovers as this is controlled on the image element.
+.popover.image-preview-popover {
+  max-width: unset;
+}
+
 #django-messages {
   position: fixed;
   right: $spacer;