Merge branch 'develop' into choices-css-rewrite

netbox/project-static/src/clipboard.ts

@@ -2,7 +2,7 @@ import Clipboard from 'clipboard';
 import { getElements } from './util';
 
 export function initClipboard(): void {
-  for (const element of getElements('a.copy-content')) {
+  for (const element of getElements('.copy-content')) {
     new Clipboard(element);
   }
 }

netbox/project-static/src/forms/scopeSelector.ts

@@ -88,6 +88,7 @@ const showHideLayout: ShowHideLayout = {
 const showHideMap: ShowHideMap = {
   vlangroup_add: 'vlangroup',
   vlangroup_edit: 'vlangroup',
+  vlangroup_bulk_edit: 'vlangroup',
 };
 
 /**

netbox/project-static/src/select/api/apiSelect.ts

@@ -264,6 +264,11 @@ export class APISelect {
     switch (this.trigger) {
       case 'collapse':
         if (collapse !== null) {
+          // If the element is collapsible but already shown, load the data immediately.
+          if (collapse.classList.contains('show')) {
+            Promise.all([this.loadData()]);
+          }
+
           // If this element is part of a collapsible element, only load the data when the
           // collapsible element is shown.
           // See: https://getbootstrap.com/docs/5.0/components/collapse/#events

netbox/project-static/src/tables/interfaceTable.ts

@@ -141,9 +141,10 @@ class TableState {
   private virtualButton: ButtonState;
 
   /**
-   * Underlying DOM Table Caption Element.
+   * Instance of ButtonState for the 'show/hide virtual rows' button.
    */
-  private caption: Nullable<HTMLTableCaptionElement> = null;
+  // @ts-expect-error null handling is performed in the constructor
+  private disconnectedButton: ButtonState;
 
   /**
    * All table rows in table
@@ -166,9 +167,10 @@ class TableState {
         this.table,
         'button.toggle-virtual',
       );
-
-      const caption = this.table.querySelector('caption');
-      this.caption = caption;
+      const toggleDisconnectedButton = findFirstAdjacent<HTMLButtonElement>(
+        this.table,
+        'button.toggle-disconnected',
+      );
 
       if (toggleEnabledButton === null) {
         throw new TableStateError("Table is missing a 'toggle-enabled' button.", table);
@@ -182,10 +184,15 @@ class TableState {
         throw new TableStateError("Table is missing a 'toggle-virtual' button.", table);
       }
 
+      if (toggleDisconnectedButton === null) {
+        throw new TableStateError("Table is missing a 'toggle-disconnected' button.", table);
+      }
+
       // Attach event listeners to the buttons elements.
       toggleEnabledButton.addEventListener('click', event => this.handleClick(event, this));
       toggleDisabledButton.addEventListener('click', event => this.handleClick(event, this));
       toggleVirtualButton.addEventListener('click', event => this.handleClick(event, this));
+      toggleDisconnectedButton.addEventListener('click', event => this.handleClick(event, this));
 
       // Instantiate ButtonState for each button for state management.
       this.enabledButton = new ButtonState(
@@ -200,6 +207,10 @@ class TableState {
         toggleVirtualButton,
         table.querySelectorAll<HTMLTableRowElement>('tr[data-type="virtual"]'),
       );
+      this.disconnectedButton = new ButtonState(
+        toggleDisconnectedButton,
+        table.querySelectorAll<HTMLTableRowElement>('tr[data-connected="disconnected"]'),
+      );
     } catch (err) {
       if (err instanceof TableStateError) {
         // This class is useless for tables that don't have toggle buttons.
@@ -211,52 +222,6 @@ class TableState {
     }
   }
 
-  /**
-   * Get the table caption's text.
-   */
-  private get captionText(): string {
-    if (this.caption !== null) {
-      return this.caption.innerText;
-    }
-    return '';
-  }
-
-  /**
-   * Set the table caption's text.
-   */
-  private set captionText(value: string) {
-    if (this.caption !== null) {
-      this.caption.innerText = value;
-    }
-  }
-
-  /**
-   * Update the table caption's text based on the state of each toggle button.
-   */
-  private toggleCaption(): void {
-    const showEnabled = this.enabledButton.buttonState === 'show';
-    const showDisabled = this.disabledButton.buttonState === 'show';
-    const showVirtual = this.virtualButton.buttonState === 'show';
-
-    if (showEnabled && !showDisabled && !showVirtual) {
-      this.captionText = 'Showing Enabled Interfaces';
-    } else if (showEnabled && showDisabled && !showVirtual) {
-      this.captionText = 'Showing Enabled & Disabled Interfaces';
-    } else if (!showEnabled && showDisabled && !showVirtual) {
-      this.captionText = 'Showing Disabled Interfaces';
-    } else if (!showEnabled && !showDisabled && !showVirtual) {
-      this.captionText = 'Hiding Enabled, Disabled & Virtual Interfaces';
-    } else if (!showEnabled && !showDisabled && showVirtual) {
-      this.captionText = 'Showing Virtual Interfaces';
-    } else if (showEnabled && !showDisabled && showVirtual) {
-      this.captionText = 'Showing Enabled & Virtual Interfaces';
-    } else if (showEnabled && showDisabled && showVirtual) {
-      this.captionText = 'Showing Enabled, Disabled & Virtual Interfaces';
-    } else {
-      this.captionText = '';
-    }
-  }
-
   /**
    * When toggle buttons are clicked, reapply visability all rows and
    * pass the event to all button handlers
@@ -272,7 +237,7 @@ class TableState {
     instance.enabledButton.handleClick(event);
     instance.disabledButton.handleClick(event);
     instance.virtualButton.handleClick(event);
-    instance.toggleCaption();
+    instance.disconnectedButton.handleClick(event);
   }
 }
 

netbox/project-static/styles/netbox.scss

@@ -167,6 +167,12 @@ table td > .progress {
   }
 }
 
+.alert {
+  code {
+    color: $gray-600;
+  }
+}
+
 span.profile-button .dropdown-menu {
   right: 0;
   left: auto;

netbox/project-static/styles/theme-dark.scss

@@ -282,7 +282,7 @@ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
 $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
 
 // Code
-$code-color: $gray-600;
+$code-color: $gray-200;
 $kbd-color: $white;
 $kbd-bg: $gray-300;
 $pre-color: null;