#6797: Fix API select styles

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

@@ -33,6 +33,7 @@ type APIObjectBase = {
   display: string;
   name?: Nullable<string>;
   url: string;
+  _depth?: number;
   [k: string]: JSONAble;
 };
 

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

@@ -57,12 +57,6 @@ class APISelect {
    */
   public readonly placeholder: string;
 
-  /**
-   * This element's options come from the server pre-sorted and should not be sorted client-side.
-   * Determined by the existence of the `pre-sorted` attribute on the base `<select/>` element.
-   */
-  private readonly preSorted: boolean = false;
-
   /**
    * Event to be dispatched when dependent fields' values change.
    */
@@ -112,6 +106,13 @@ class APISelect {
    */
   private queryUrl: string = '';
 
+  /**
+   * This element's options come from the server pre-sorted and should not be sorted client-side.
+   * Determined by the existence of the `pre-sorted` attribute on the base `<select/>` element, or
+   * by existence of specific fields such as `_depth`.
+   */
+  private preSorted: boolean = false;
+
   /**
    * This instance's available options.
    */
@@ -161,7 +162,8 @@ class APISelect {
       this.updatePathValues(filter);
     }
 
-    this.queryParams.set('brief', true);
+    // TODO: Re-enable this. Disabled because `_depth` field is missing from brief responses.
+    // this.queryParams.set('brief', true);
     this.queryParams.set('limit', 0);
     this.updateQueryUrl();
 
@@ -314,7 +316,15 @@ class APISelect {
     const options = [PLACEHOLDER] as Option[];
 
     for (const result of results) {
-      const text = result.display;
+      let text = result.display;
+
+      if (typeof result._depth === 'number') {
+        // If the object has a `_depth` property, indent its display text.
+        if (!this.preSorted) {
+          this.preSorted = true;
+        }
+        text = `<span class="depth">${'─'.repeat(result._depth)}</span> ${text}`;
+      }
       const data = {} as Record<string, string>;
       const value = result.id.toString();
       let style, selected, disabled;

netbox/project-static/styles/select.scss

@@ -21,7 +21,7 @@ $spacing-s: $input-padding-x;
   --nbx-select-option-hover-color: #{$white};
   --nbx-select-placeholder-color: #{$gray-600};
   --nbx-select-value-color: #{$white};
-  & body[data-netbox-color-mode='dark'] {
+  &[data-netbox-color-mode='dark'] {
     // Dark Mode Variables.
     --nbx-select-content-bg: #{$gray-900};
     --nbx-select-option-selected-bg: #{$gray-500};
@@ -100,23 +100,34 @@ $spacing-s: $input-padding-x;
   .ss-content {
     background-color: var(--nbx-select-content-bg);
     .ss-list {
-      .ss-option.ss-option-selected {
-        background-color: var(--nbx-select-option-selected-bg);
-        color: $body-color;
-      }
-      .ss-option:hover {
-        background-color: var(--nbx-select-option-hover-bg);
-        color: var(--nbx-select-option-hover-color);
-      }
-      .ss-option:last-child {
-        border-bottom-left-radius: $form-select-border-radius;
-        border-bottom-right-radius: $form-select-border-radius;
-      }
-      .ss-option.ss-disabled {
-        background-color: transparent;
-      }
-      .ss-option.ss-disabled:hover {
-        color: $form-select-disabled-color;
+      .ss-option {
+        &.ss-option-selected {
+          background-color: var(--nbx-select-option-selected-bg);
+          color: $body-color;
+        }
+
+        &:hover {
+          background-color: var(--nbx-select-option-hover-bg);
+          color: var(--nbx-select-option-hover-color);
+        }
+
+        &:last-child {
+          border-bottom-left-radius: $form-select-border-radius;
+          border-bottom-right-radius: $form-select-border-radius;
+        }
+
+        &.ss-disabled {
+          background-color: transparent;
+
+          &:hover {
+            color: $form-select-disabled-color;
+          }
+        }
+
+        .depth {
+          // Lighten the dash prefix on nested options.
+          opacity: 0.3;
+        }
       }
     }
     border-bottom-left-radius: $form-select-border-radius;

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

@@ -96,7 +96,7 @@ $input-group-addon-bg: $gray-700;
 $input-group-addon-border-color: $input-border-color;
 
 $form-select-color: $input-color;
-$form-select-disabled-color: $gray-700;
+$form-select-disabled-color: $gray-500;
 $form-select-bg: $input-bg;
 $form-select-disabled-bg: $input-disabled-bg;
 $form-select-indicator-color: $form-select-color;

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

@@ -6,7 +6,7 @@ $input-border-color: $gray-200;
 
 $theme-colors: map-merge($theme-colors, $theme-color-addons);
 
-$light: $gray-100;
+$light: $gray-200;
 
 $card-cap-color: $gray-800;
 
@@ -26,5 +26,7 @@ $list-group-disabled-color: $gray-500;
 
 $table-flush-header-bg: $gray-100;
 
+$form-select-disabled-color: $gray-600;
+
 // Tabbed content
 $tab-content-bg: $gray-100;