nautobot 3.0.0rc1__py3-none-any.whl → 3.0.1__py3-none-any.whl

nautobot/ui/package.json

@@ -13,18 +13,18 @@
   },
   "dependencies": {
     "@graphiql/plugin-explorer": "0.1.15",
-    "@graphiql/toolkit": "^0.11.1",
+    "@graphiql/toolkit": "^0.11.3",
     "@mdi/font": "^7.4.47",
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.3",
-    "clipboard": "2.0.9",
+    "bootstrap": "^5.3.8",
+    "clipboard": "2.0.11",
     "echarts": "^6.0.0",
-    "flatpickr": "4.6.9",
+    "flatpickr": "4.6.13",
     "graphiql": "2.4.7",
     "graphql": "16.10.0",
     "graphql-ws": "5.13.1",
     "highlight.js": "^11.11.1",
-    "htmx.org": "^2.0.6",
+    "htmx.org": "^2.0.8",
     "jquery": "^3.7.1",
     "jquery-ui": "^1.14.1",
     "lodash.get": "^4.4.2",
@@ -33,23 +33,23 @@
     "react-dom": "17.0.2",
     "select2": "4.0.13",
     "select2-bootstrap-5-theme": "^1.3.0",
-    "whatwg-fetch": "3.6.2"
+    "whatwg-fetch": "3.6.20"
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.22",
     "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
     "eslint": "^9.32.0",
     "eslint-plugin-import": "^2.32.0",
     "globals": "^16.3.0",
-    "mini-css-extract-plugin": "^2.9.2",
+    "mini-css-extract-plugin": "^2.9.4",
     "npm-run-all2": "^8.0.4",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.5.3",
     "sass": "^1.84.0",
-    "sass-loader": "^16.0.4",
+    "sass-loader": "^16.0.6",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1"
   },

nautobot/ui/src/js/checkbox.js

@@ -0,0 +1,132 @@
+const ITEM_CHECKBOX_SELECTOR = 'input[type="checkbox"][name="pk"]';
+const TOGGLE_CHECKBOX_SELECTOR = 'input[type="checkbox"].toggle';
+const SELECT_ALL_BOX_SELECTOR = '#select_all_box';
+const SELECT_ALL_CHECKBOX_SELECTOR = '#select_all';
+
+/**
+ * Set checkbox `checked` state while dispatching proper events. Do nothing if `checkbox.checked` state is already the
+ * same as passed `checked` parameter.
+ * @param {HTMLInputElement} checkbox - Checkbox HTML element.
+ * @param {boolean} checked - `checked` state to be set.
+ * @returns {void} Do not return any value, set given HTML element state and dispatch `'change'` and `'input'` events.
+ */
+const setChecked = (checkbox, checked) => {
+  if (checkbox.checked !== checked) {
+    checkbox.checked = checked;
+    // Defer dispatching events with `setTimeout` to prevent handling intermediate states during sequential updates.
+    setTimeout(() => {
+      checkbox.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+      checkbox.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+    });
+  }
+};
+
+/**
+ * Initialize custom logic handlers for `class="toggle ..."`, `name="pk"` and `id="select-all" checkboxes.
+ * @returns {void} Do not return any value, just initialize proper custom logic handlers for specific checkboxes.
+ */
+export const initializeCheckboxes = () => {
+  // Track the last selected checkbox index for range selection.
+  let lastSelectedIndex = null;
+
+  /*
+   * `onClick` and `onInput` event handlers both act on the same checkbox elements, but in slightly different scenarios:
+   *   1. `onClick` is specifically tied to manual user interaction and is called only when user directly interacts with
+   *      checkbox element. It handles:
+   *        1.1. Checking/unchecking all individual checkboxes in the table when "toggle" checkbox is clicked.
+   *        1.2. Shift-click range selection for individual checkboxes in the table.
+   *   2. `onInput` is called after checkbox state is changed, regardless of the change being triggered programmatically
+   *       or by manual user interaction. It handles:
+   *         2.1. Showing/hiding "select all" box when "toggle" checkbox is checked/unchecked.
+   *         2.2. Checking/unchecking "toggle" checkbox based on the collective state of individual checkboxes.
+   *         2.3. Enabling/disabling buttons in "select all" box based on its checkbox state.
+   */
+  const onClick = (event) => {
+    // "Toggle" checkbox for object lists (PK column). Notice distinction between handling `'click'` and `'input'` events.
+    const toggleCheckbox = event.target.closest(TOGGLE_CHECKBOX_SELECTOR);
+    if (toggleCheckbox) {
+      const isChecked = toggleCheckbox.checked;
+
+      // Check/uncheck all PK column checkboxes in the table.
+      toggleCheckbox
+        .closest('table')
+        .querySelectorAll(`${ITEM_CHECKBOX_SELECTOR}:not(.visually-hidden)`)
+        .forEach((checkbox) => setChecked(checkbox, isChecked));
+
+      // Reset last selected index when using toggle all
+      lastSelectedIndex = null;
+    }
+
+    // Individual row item checkbox in object lists (PK column). Notice distinction between handling `'click'` and `'input'` events.
+    const itemCheckbox = event.target.closest(ITEM_CHECKBOX_SELECTOR);
+    if (itemCheckbox) {
+      const table = itemCheckbox.closest('table');
+      const allCheckboxes = [...table.querySelectorAll(`${ITEM_CHECKBOX_SELECTOR}:not(.visually-hidden)`)];
+      const currentIndex = allCheckboxes.indexOf(itemCheckbox);
+
+      // Handle shift-click for range selection/deselection in PK column.
+      if (event.shiftKey && lastSelectedIndex !== null) {
+        // Create range from previous click to current click
+        const startIndex = Math.min(lastSelectedIndex, currentIndex);
+        const endIndex = Math.max(lastSelectedIndex, currentIndex);
+
+        // Use the clicked item's new state for entire range
+        const shouldSelect = itemCheckbox.checked;
+
+        // Apply to entire range
+        allCheckboxes.slice(startIndex, endIndex + 1).forEach((checkbox) => setChecked(checkbox, shouldSelect));
+      }
+
+      // Always update anchor to current click (normal click or shift+click)
+      lastSelectedIndex = currentIndex;
+    }
+  };
+
+  const onInput = (event) => {
+    // "Toggle" checkbox for object lists (PK column). Notice distinction between handling `'click'` and `'input'` events.
+    const toggleCheckbox = event.target.closest(TOGGLE_CHECKBOX_SELECTOR);
+    if (toggleCheckbox) {
+      const isChecked = toggleCheckbox.checked;
+
+      // Show/hide the select all objects form that contains the bulk action buttons.
+      const selectAllBox = document.querySelector(SELECT_ALL_BOX_SELECTOR);
+      selectAllBox?.classList.toggle('visually-hidden', !isChecked);
+
+      if (selectAllBox && !isChecked) {
+        const selectAll = document.querySelector(SELECT_ALL_CHECKBOX_SELECTOR);
+        if (selectAll) {
+          setChecked(selectAll, false);
+        }
+      }
+    }
+
+    // Individual row item checkbox in object lists (PK column). Notice distinction between handling `'click'` and `'input'` events.
+    const itemCheckbox = event.target.closest(ITEM_CHECKBOX_SELECTOR);
+    if (itemCheckbox) {
+      const table = itemCheckbox.closest('table');
+      const allCheckboxes = [...table.querySelectorAll(`${ITEM_CHECKBOX_SELECTOR}:not(.visually-hidden)`)];
+
+      // Check or uncheck the "toggle" checkbox if all items are checked or any item is unchecked, respectively.
+      const tableToggleCheckbox = table.querySelector(TOGGLE_CHECKBOX_SELECTOR);
+      if (tableToggleCheckbox) {
+        const hasUnchecked = allCheckboxes.some((checkbox) => !checkbox.checked);
+        setChecked(tableToggleCheckbox, !hasUnchecked);
+      }
+    }
+
+    // `selectAll` is the checkbox that selects all objects.
+    const selectAll = event.target.closest(SELECT_ALL_CHECKBOX_SELECTOR);
+    // `selectAllBox` is the form bulk action buttons container.
+    const selectAllBox = event.target.closest(SELECT_ALL_BOX_SELECTOR);
+    if (selectAll && selectAllBox) {
+      // If the `selectAll` checkbox is checked, enable all form bulk action buttons.
+      const isChecked = selectAll.checked;
+      selectAllBox.querySelectorAll('button').forEach((button) => {
+        button.disabled = !isChecked;
+      });
+    }
+  };
+
+  document.addEventListener('click', onClick);
+  document.addEventListener('input', onInput);
+};

nautobot/ui/src/js/nautobot.js

@@ -34,8 +34,10 @@ window.jQuery = jQuery;
 window.$ = window.jQuery;
 
 import 'jquery-ui';
+import 'jquery-ui/ui/widgets/sortable.js';
 import 'select2';
 
+import { initializeCheckboxes } from './checkbox.js';
 import { initializeCollapseToggleAll } from './collapse.js';
 import { initializeDraggable } from './draggable.js';
 import { initializeDrawers } from './drawer.js';
@@ -53,6 +55,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // History
   loadState();
   window.nb.history = { saveState };
+
   // Tooltips
   // https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips
   [...document.querySelectorAll('[data-bs-toggle="tooltip"]')].forEach((tooltip) => new bootstrap.Tooltip(tooltip));
@@ -60,6 +63,9 @@ document.addEventListener('DOMContentLoaded', () => {
   // Sidenav
   initializeSidenav();
 
+  // Checkbox
+  window.nb.checkbox = { initializeCheckboxes };
+
   // Collapse
   initializeCollapseToggleAll();
 

nautobot/ui/src/js/select2.js

@@ -134,80 +134,76 @@ const initializeDynamicChoiceSelection = (context, dropdownParent = null) => {
         const content_type = element.getAttribute('data-contenttype');
 
         // Attach any extra query parameters
-        const extra_query_parameters = Object.fromEntries(
-          [...element.attributes]
-            .filter((attribute) => attribute.name.includes('data-query-param-'))
-            .flatMap((attribute) => {
-              const [, param_name] = attribute.name.split('data-query-param-');
-
-              const values = (() => {
-                try {
-                  return JSON.parse(attribute.value);
-                  // eslint-disable-next-line no-unused-vars
-                } catch (exception) {
-                  return [];
-                }
-              })();
+        const extra_query_parameters_array = [...element.attributes]
+          .filter((attribute) => attribute.name.includes('data-query-param-'))
+          .flatMap((attribute) => {
+            const [, param_name] = attribute.name.split('data-query-param-');
+
+            const values = (() => {
+              try {
+                return JSON.parse(attribute.value);
+                // eslint-disable-next-line no-unused-vars
+              } catch (exception) {
+                return [];
+              }
+            })();
+
+            return values.flatMap((value) => {
+              const has_ref_field = value.startsWith('$');
+
+              // Referencing the value of another form field.
+              const ref_field = has_ref_field
+                ? (() => {
+                    const name = value.slice(1);
+
+                    if (element.id.includes('id_form-')) {
+                      const [id_prefix] = element.id.match(/id_form-[0-9]+-/i, '');
+                      return document.querySelector(`#${id_prefix}${name}`);
+                    }
+
+                    /*
+                     * If the element is in a table row with a class containing "dynamic-formset" we need to find the
+                     * reference field in the same row.
+                     */
+                    if (element.closest('tr')?.classList.contains('dynamic-formset')) {
+                      return element.closest('tr').querySelector(`select[id*="${name}"]`);
+                    }
+
+                    return document.querySelector(`#id_${name}`);
+                  })()
+                : null;
+
+              const ref_field_value = ref_field
+                ? (() => {
+                    const field_value = getValue(ref_field);
+                    const style = window.getComputedStyle(ref_field);
 
-              return values.flatMap((value) => {
-                const has_ref_field = value.startsWith('$');
-
-                // Referencing the value of another form field.
-                const ref_field = has_ref_field
-                  ? (() => {
-                      const name = value.slice(1);
-
-                      if (element.id.includes('id_form-')) {
-                        const [id_prefix] = element.id.match(/id_form-[0-9]+-/i, '');
-                        return document.querySelector(`#${id_prefix}${name}`);
-                      }
-
-                      /*
-                       * If the element is in a table row with a class containing "dynamic-formset" we need to find the
-                       * reference field in the same row.
-                       */
-                      if (element.closest('tr')?.classList.contains('dynamic-formset')) {
-                        return element.closest('tr').querySelector(`select[id*="${name}"]`);
-                      }
-
-                      return document.querySelector(`#id_${name}`);
-                    })()
-                  : null;
-
-                const ref_field_value = ref_field
-                  ? (() => {
-                      const field_value = getValue(ref_field);
-                      const style = window.getComputedStyle(ref_field);
-
-                      if (field_value && style.opacity !== '0' && style.visibility !== 'hidden') {
-                        return field_value;
-                      }
-
-                      if (ref_field.getAttribute('required') && ref_field.getAttribute('data-null-option')) {
-                        return 'null';
-                      }
-
-                      return undefined;
-                    })()
-                  : null;
-
-                const param_value = has_ref_field ? ref_field_value : value;
-                return param_value !== null && param_value !== undefined
-                  ? [[param_name, ref_field_value || value]]
-                  : [];
-              });
-            }),
-        );
-
-        const parameters = {
-          depth: String(depth),
-          limit: String(limit),
-          offset: String(offset),
-          ...(api_version ? { api_version } : undefined),
-          ...(content_type ? { content_type } : undefined),
-          ...(q ? { [search_field]: q } : undefined),
-          ...extra_query_parameters,
-        };
+                    if (field_value && style.opacity !== '0' && style.visibility !== 'hidden') {
+                      return field_value;
+                    }
+
+                    if (ref_field.getAttribute('required') && ref_field.getAttribute('data-null-option')) {
+                      return 'null';
+                    }
+
+                    return undefined;
+                  })()
+                : null;
+
+              const param_value = has_ref_field ? ref_field_value : value;
+              return param_value !== null && param_value !== undefined ? [[param_name, ref_field_value || value]] : [];
+            });
+          });
+
+        const parameters = [
+          ['depth', String(depth)],
+          ['limit', String(limit)],
+          ['offset', String(offset)],
+          ...(api_version ? [['api_version', api_version]] : []),
+          ...(content_type ? [['content_type', content_type]] : []),
+          ...(q ? [[search_field, q]] : []),
+          ...extra_query_parameters_array,
+        ];
 
         // This will handle params with multiple values (i.e. for list filter forms).
         return new URLSearchParams(parameters).toString();

nautobot/ui/src/js/theme.js

@@ -1,4 +1,5 @@
-import { getCookie, removeCookie, setCookie } from './cookie.js';
+import { Modal } from 'bootstrap';
+import { getCookie, setCookie } from './cookie.js';
 
 const THEME_MODAL_ID = 'theme_modal';
 
@@ -6,70 +7,120 @@ const THEME_DARK = 'dark';
 const THEME_LIGHT = 'light';
 const THEME_SYSTEM = 'system';
 
+const THEME_CHOICE_COOKIE_NAME = 'theme_choice';
+const THEME_DETERMINED_COOKIE_NAME = 'theme';
+
 /**
- * Get preferred system color scheme.
+ * Check if given `theme_choice` is a valid theme choice, i.e. `'dark'`, `'light'`, or `'system'`:
+ * - 'dark' for always dark mode
+ * - 'light' for always light mode
+ * - 'system' to follow the system/browser preference, getPreferredColorScheme() will determine actual theme
+ * @param {string} theme_choice - Choice in question.
+ * @returns {boolean} `true` is given `theme_choice` is a valid Nautobot theme, `false` otherwise.
+ */
+const isValidThemeChoice = (theme_choice) => [THEME_DARK, THEME_LIGHT, THEME_SYSTEM].includes(theme_choice);
+
+/**
+ * Get preferred system color scheme from browser/OS settings.
  * @returns {('dark'|'light')} Preferred system color scheme.
  */
-const getPreferredColorScheme = () =>
+const determineBrowserPreference = () =>
   window.matchMedia?.(`(prefers-color-scheme: ${THEME_DARK})`).matches ? THEME_DARK : THEME_LIGHT;
 
 /**
- * Check if given `theme` is a valid Nautobot theme, i.e. `'dark'`, `'light'`, or `'system'`.
- * @param {string} theme - Theme in question.
- * @returns {boolean} `true` is given `theme` is a valid Nautobot theme, `false` otherwise.
+ * Determine the effective theme to be used.
+ * @returns {('dark'|'light')} The effective theme.
  */
-const isValidTheme = (theme) => theme === THEME_DARK || theme === THEME_LIGHT || theme === THEME_SYSTEM;
+const determineTheme = () => {
+  const current_theme_choice = getCookie(THEME_CHOICE_COOKIE_NAME);
+  if ([THEME_DARK, THEME_LIGHT].includes(current_theme_choice)) {
+    // An explicit choice of dark or light mode.
+    return current_theme_choice;
+  }
+  // Follow the system/browser preference by default ('system' choice or invalid choice).
+  return determineBrowserPreference();
+};
 
 /**
- * Automatically detect Nautobot theme. It is derived from `cookie` or `localStorage` if set manually, and falls back to
- * preferred system color scheme by default.
- * @returns {('dark'|'light'|'system')} Detected Nautobot theme.
+ * Persist the user's theme choice in cookie.
+ * @param {('dark'|'light'|'system')} theme - The user's theme choice.
+ * @returns {void} Do not return any value
  */
-const detectTheme = () => {
-  const cookieTheme = getCookie('theme');
-  if (isValidTheme(cookieTheme)) {
-    return cookieTheme;
+const persistThemeChoice = (theme) => {
+  if (isValidThemeChoice(theme)) {
+    setCookie(THEME_CHOICE_COOKIE_NAME, theme, { 'max-age': 31536000, path: '/' }); // 1 year
   }
+};
 
-  const localStorageTheme = window.localStorage?.getItem('theme');
-  if (isValidTheme(localStorageTheme)) {
-    return localStorageTheme;
+/**
+ * Handle syntax highlighter theme change.
+ * @param {('dark'|'light')} theme - The effective theme.
+ * @returns {void} Do not return any value
+ */
+const handleSyntaxHighlighterThemeChange = (theme) => {
+  // Since the syntax highlighter stylesheet is loaded via a <link> tag, we need to swap out the href to change themes.
+  // The best fix would be to have both stylesheets loaded and use media queries to switch between them, similar to how we do for the main Nautobot theme.
+  const highlighterLinks = document.querySelectorAll('link[rel="stylesheet"][href*="github"]');
+  if (highlighterLinks.length === 1) {
+    // We send two stylesheets on the initial page with media queries, but after that only one is present which we need to swap out.
+    const [syntaxLinkElement] = highlighterLinks;
+    const css_file = theme === THEME_DARK ? 'github-dark.min.css' : 'github.min.css';
+    syntaxLinkElement.href = syntaxLinkElement.href.replace(/github(-dark)?\.min\.css/, css_file);
   }
+};
 
-  return THEME_SYSTEM;
+/**
+ * Handle Echarts theme change.
+ * @param {('dark'|'light')} theme - The effective theme.
+ * @returns {void} Do not return any value
+ */
+const handleEchartsThemeChange = (theme) => {
+  // If using Echarts, we need to update the theme there as well.
+  const echart_instances = document.querySelectorAll('div[_echarts_instance_]');
+  echart_instances?.forEach((instance) => {
+    const options = JSON.parse(document.getElementById(`echarts-config-${instance.id}`).textContent);
+    const colors = Array.isArray(options.color)
+      ? options.color.map((colorObj) => colorObj?.[theme] || colorObj?.light || colorObj)
+      : options.color;
+    window.echarts.getInstanceByDom(instance)?.setOption({
+      color: colors,
+      darkMode: theme === THEME_DARK,
+    });
+  });
 };
 
 /**
  * Set Nautobot theme.
- * @param {('dark'|'light'|'system')} theme - Nautobot theme to be set.
- * @param {{ manual?: boolean }} [options] - Setter function options object. Currently supported option is `manual`.
+ * @param {('dark'|'light'|'system'|null)} theme - Nautobot theme to be set. If `null`, determine theme based on existing user choice or system preference.
  * @returns {void} Do not return any value, set given `theme` and save it into a persistent store if `manual` is `true`.
  */
-const setTheme = (theme, options) => {
-  const isManual = Boolean(options?.manual);
+const setTheme = (theme = null) => {
+  if (theme !== null && isValidThemeChoice(theme)) {
+    // An explicit theme was provided, so we persist the choice.
+    persistThemeChoice(theme);
+  }
+  const current_theme_choice = getCookie(THEME_CHOICE_COOKIE_NAME); // The user's choice for the purpose of button highlighting.
+  const determined_theme = determineTheme(); // The effective theme to be applied.
+
+  // Persist the determined theme for server-side rendering purposes.
+  setCookie(THEME_DETERMINED_COOKIE_NAME, determined_theme, { 'max-age': 31536000, path: '/' }); // 1 year
 
   const modal = document.getElementById(THEME_MODAL_ID);
   const buttons = modal?.querySelectorAll('button[data-nb-theme]') ?? [];
 
   buttons.forEach((button) =>
     ['border', 'border-primary'].forEach((className) =>
-      button.classList.toggle(className, button.dataset.nbTheme === theme),
+      button.classList.toggle(className, button.dataset.nbTheme === current_theme_choice),
     ),
   );
 
-  const bsTheme = theme === THEME_SYSTEM ? getPreferredColorScheme() : theme;
-  document.documentElement.dataset.theme = bsTheme;
-  document.documentElement.dataset.bsTheme = bsTheme;
+  document.documentElement.dataset.theme = determined_theme;
+  document.documentElement.dataset.bsTheme = determined_theme;
 
-  if (theme === THEME_SYSTEM) {
-    removeCookie('theme');
-    window.localStorage?.removeItem('theme');
-  } else if (isManual) {
-    setCookie('theme', theme);
-    window.localStorage?.setItem('theme', theme);
-  }
+  handleSyntaxHighlighterThemeChange(determined_theme);
+  handleEchartsThemeChange(determined_theme);
 
-  if (theme === THEME_DARK || (theme === THEME_SYSTEM && bsTheme === THEME_DARK)) {
+  if (determined_theme === THEME_DARK) {
     [...document.getElementsByTagName('object')].forEach((object) => {
       object.addEventListener('load', (event) => {
         if (event.target.contentDocument) {
@@ -84,20 +135,59 @@ const setTheme = (theme, options) => {
       });
     });
   }
+};
 
-  if (isManual) {
-    document.location.reload();
+const handleThemeChoiceUpgradeAndSetDefault = () => {
+  /**
+   * We need to handle the "upgrade" scenario:
+   * - Prior to Nautobot 3.0, the `theme` cookie was a Session cookie so not persisted.
+   * - localStorage was where a user's choice was "stored"
+   *
+   * In Nautobot 3.0+, we will do away with localStorage and instead move the user's choice to a persistent cookie, `theme_choice`.
+   * We will also keep the `theme` cookie as the "determined" theme for server-side rendering purposes.
+   * Generally we shouldn't need this as good media queries should handle it, but it's here for completeness.
+   * For example, some SVG renderings on the server may need to know the theme.
+   *
+   * To handle this upgrade scenario, we will:
+   * 1. Check if `theme_choice` cookie exists. If it does, we assume the user has already "upgraded" and do nothing.
+   * 2. If `theme_choice` cookie does not exist, we check localStorage for the user's theme choice.
+   * 3. If localStorage has a valid theme choice, we persist it to the `theme_choice` cookie.
+   * 4. Finally, we remove the theme from localStorage to complete the migration.'
+   *
+   * We can remove/refactor this in 4.0 for certain, but likely in 3.1+.
+   *
+   * In that scenario, if the theme_choice cookie is missing, we can default to 'system' without checking localStorage.
+   */
+
+  const themeChoiceCookie = getCookie(THEME_CHOICE_COOKIE_NAME);
+  if (!isValidThemeChoice(themeChoiceCookie)) {
+    // If theme_choice cookie does not exist or is invalid, check localStorage
+    const localStorageTheme = window.localStorage?.getItem('theme');
+
+    // If localStorage theme is valid, we use it, else we default to 'system';
+    // Note: we always removed the localStorage to imply the 'system' choice so technically we should only check for 'dark' or 'light' here, but we validate just in case.
+    const theme_choice_to_set = isValidThemeChoice(localStorageTheme) ? localStorageTheme : THEME_SYSTEM;
+
+    setCookie(THEME_CHOICE_COOKIE_NAME, theme_choice_to_set, { 'max-age': 31536000, path: '/' }); // 1 year
   }
+  // Else: If theme_choice cookie exists and is valid, we don't need to do any migration.
+  // Regardless, we remove localStorage to complete migration, on the off chance it still exists.
+  window.localStorage?.removeItem('theme');
 };
 
 export const initializeTheme = () => {
   const modal = document.getElementById(THEME_MODAL_ID);
   const buttons = modal?.querySelectorAll('button[data-nb-theme]') ?? [];
 
-  setTheme(detectTheme());
-  window.matchMedia(`(prefers-color-scheme: ${THEME_DARK})`).addEventListener('change', () => setTheme(detectTheme()));
+  handleThemeChoiceUpgradeAndSetDefault();
+  setTheme();
+
+  window.matchMedia(`(prefers-color-scheme: ${THEME_DARK})`).addEventListener('change', () => setTheme());
 
-  const onClick = (event) => setTheme(event.currentTarget.dataset.nbTheme, { manual: true });
+  const onClick = (event) => {
+    setTheme(event.currentTarget.dataset.nbTheme);
+    Modal.getInstance(modal).hide();
+  };
   buttons.forEach((button) => button.addEventListener('click', onClick));
 
   return () => buttons.forEach((button) => button.removeEventListener('click', onClick));

nautobot/ui/src/scss/nautobot.scss

@@ -114,6 +114,7 @@ $dark-border-subtle-dark:      $gray-05-dark;
 /* Options */
 $enable-shadows:          true;
 $enable-caret:            false;
+$enable-smooth-scroll:    false;
 $enable-negative-margins: true;
 
 $prefix: bs-;
@@ -419,6 +420,8 @@ $btn-close-filter-dark:      invert(100%); /* $black-0-dark: #ffffff; */
 $btn-close-white-filter:     $btn-close-filter-dark;
 
 /* Code */
+$code-font-size: $font-size-base;
+
 $kbd-padding-y: map.get($spacers, 1);
 $kbd-padding-x: map.get($spacers, 4);
 $kbd-color:     var(--#{$prefix}secondary-color);
@@ -775,11 +778,13 @@ button {
 
   > thead:not(caption) > tr > th {
     background-color: var(--#{$prefix}tertiary-bg);
-    color: var(--#{$prefix}secondary-color);
+    color: var(--#{$prefix}tertiary-color);
     position: relative;
 
     &.nb-actionable,
     &.orderable {
+      color: var(--#{$prefix}secondary-color);
+
       a,
       button {
         &:empty {
@@ -1454,9 +1459,14 @@ textarea {
 }
 
 /* Code */
+:not(pre) > code:not(.hljs) { /* Select only `code` which are not immediate children of `pre`, that is _inline code_. */
+  @extend kbd;
+}
+
 pre:not(:has(code.hljs)) { /* Do not include highlight.js in this rule because it has its own set of styles. */
   background: var(--#{$prefix}secondary-bg);
   border-radius: $border-radius;
+  color: $kbd-color;
   padding-block: map.get($spacers, 8);
   padding-inline: map.get($spacers, 10);
 }

nautobot/vpn/templates/vpn/vpnprofile_create.html

@@ -20,7 +20,7 @@
 
     <div class="card">
         <div class="card-header"><strong>Phase 1 Policy Assignments</strong></div>
-        <div class="card-body">
+        <div class="card-body overflow-auto">
             {% if vpn_phase1_policies.errors %}
                 <div class="text-danger">
                     Please correct the error(s) below:
@@ -72,7 +72,7 @@
     </div>
     <div class="card">
         <div class="card-header"><strong>Phase 2 Policy Assignments</strong></div>
-        <div class="card-body">
+        <div class="card-body overflow-auto">
             {% if vpn_phase2_policies.errors %}
                 <div class="text-danger">
                     Please correct the error(s) below: