Fixes #7131: Only execute scope selector field visibility logic on specified views

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

@@ -1,8 +1,21 @@
 import { getElements, toggleVisibility } from '../util';
 
 type ShowHideMap = {
-  default: { hide: string[]; show: string[] };
-  [k: string]: { hide: string[]; show: string[] };
+  /**
+   * Name of view to which this map should apply.
+   *
+   * @example vlangroup_edit
+   */
+  [view: string]: {
+    /**
+     * Default layout.
+     */
+    default: { hide: string[]; show: string[] };
+    /**
+     * Field name to layout mapping.
+     */
+    [fieldName: string]: { hide: string[]; show: string[] };
+  };
 };
 
 /**
@@ -14,45 +27,47 @@ type ShowHideMap = {
  * showHideMap.region.show should be shown.
  */
 const showHideMap: ShowHideMap = {
-  region: {
-    hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
-    show: ['id_region'],
-  },
-  'site group': {
-    hide: ['id_region', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
-    show: ['id_sitegroup'],
-  },
-  site: {
-    hide: ['id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
-    show: ['id_region', 'id_sitegroup', 'id_site'],
-  },
-  location: {
-    hide: ['id_rack', 'id_clustergroup', 'id_cluster'],
-    show: ['id_region', 'id_sitegroup', 'id_site', 'id_location'],
-  },
-  rack: {
-    hide: ['id_clustergroup', 'id_cluster'],
-    show: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'],
-  },
-  'cluster group': {
-    hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_cluster'],
-    show: ['id_clustergroup'],
-  },
-  cluster: {
-    hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'],
-    show: ['id_clustergroup', 'id_cluster'],
-  },
-  default: {
-    hide: [
-      'id_region',
-      'id_sitegroup',
-      'id_site',
-      'id_location',
-      'id_rack',
-      'id_clustergroup',
-      'id_cluster',
-    ],
-    show: [],
+  vlangroup_edit: {
+    region: {
+      hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
+      show: ['id_region'],
+    },
+    'site group': {
+      hide: ['id_region', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
+      show: ['id_sitegroup'],
+    },
+    site: {
+      hide: ['id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
+      show: ['id_region', 'id_sitegroup', 'id_site'],
+    },
+    location: {
+      hide: ['id_rack', 'id_clustergroup', 'id_cluster'],
+      show: ['id_region', 'id_sitegroup', 'id_site', 'id_location'],
+    },
+    rack: {
+      hide: ['id_clustergroup', 'id_cluster'],
+      show: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'],
+    },
+    'cluster group': {
+      hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_cluster'],
+      show: ['id_clustergroup'],
+    },
+    cluster: {
+      hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'],
+      show: ['id_clustergroup', 'id_cluster'],
+    },
+    default: {
+      hide: [
+        'id_region',
+        'id_sitegroup',
+        'id_site',
+        'id_location',
+        'id_rack',
+        'id_clustergroup',
+        'id_cluster',
+      ],
+      show: [],
+    },
   },
 };
 /**
@@ -76,11 +91,11 @@ function toggleParentVisibility(query: string, action: 'show' | 'hide') {
 /**
  * Handle changes to the Scope Type field.
  */
-function handleScopeChange(element: HTMLSelectElement) {
+function handleScopeChange<P extends keyof ShowHideMap>(view: P, element: HTMLSelectElement) {
   // Scope type's innerText looks something like `DCIM > region`.
   const scopeType = element.options[element.selectedIndex].innerText.toLowerCase();
 
-  for (const [scope, fields] of Object.entries(showHideMap)) {
+  for (const [scope, fields] of Object.entries(showHideMap[view])) {
     // If the scope type ends with the specified scope, toggle its field visibility according to
     // the show/hide values.
     if (scopeType.endsWith(scope)) {
@@ -94,7 +109,7 @@ function handleScopeChange(element: HTMLSelectElement) {
       break;
     } else {
       // Otherwise, hide all fields.
-      for (const field of showHideMap.default.hide) {
+      for (const field of showHideMap[view].default.hide) {
         toggleParentVisibility(`#${field}`, 'hide');
       }
     }
@@ -105,8 +120,12 @@ function handleScopeChange(element: HTMLSelectElement) {
  * Initialize scope type select event listeners.
  */
 export function initScopeSelector(): void {
-  for (const element of getElements<HTMLSelectElement>('#id_scope_type')) {
-    handleScopeChange(element);
-    element.addEventListener('change', () => handleScopeChange(element));
+  for (const view of Object.keys(showHideMap)) {
+    for (const element of getElements<HTMLSelectElement>(
+      `html[data-netbox-url-name="${view}"] #id_scope_type`,
+    )) {
+      handleScopeChange(view, element);
+      element.addEventListener('change', () => handleScopeChange(view, element));
+    }
   }
 }