Admin Settings information architecture rework: 17 flat tabs to 14 groups

application/single_app/app.py

@@ -31,6 +31,7 @@
 from functions_content import *
 from functions_documents import *
 from functions_latest_features_nav import should_hide_latest_features_nav
+from admin_settings_nav import ADMIN_NAV, get_landing_tab_id
 from functions_search import *
 from functions_settings import *
 from functions_mcp_server_config import is_mcp_ui_enabled
@@ -598,6 +599,8 @@ def inject_settings():
         app_settings=public_settings,
         user_settings=user_settings,
         custom_pages_nav=custom_pages_nav,
+        admin_nav=ADMIN_NAV,
+        admin_landing_tab=get_landing_tab_id(),
         latest_features_current_version=VERSION,
         latest_features_nav_hidden=latest_features_nav_hidden,
         latest_features_nav_hidden_by_development=IS_DEVELOPMENT,

application/single_app/config.py

@@ -96,7 +96,7 @@
 EXECUTOR_TYPE = 'thread'
 EXECUTOR_MAX_WORKERS = 30
 SESSION_TYPE = 'filesystem'
-VERSION = "0.260.011"
+VERSION = "0.260.018"
 IS_DEVELOPMENT = is_development_env_enabled()
 
 SESSION_COOKIE_SAMESITE = os.getenv('SESSION_COOKIE_SAMESITE', 'Lax')

application/single_app/static/js/admin/admin_access_roles_roster.js

@@ -0,0 +1,148 @@
+// admin_access_roles_roster.js
+//
+// Access & Roles shows every "require an Entra app role" switch in one place.
+//
+// The switches themselves stay on the tabs that own them, because that is where
+// they make sense in context. Duplicating the real inputs here would submit
+// each setting twice, so this builds a roster of mirrors instead: each row
+// carries no name attribute and simply drives the canonical input.
+//
+// The roster is built from the page rather than from a hand-written list, so a
+// new role requirement anywhere in Admin Settings appears here on its own and
+// this list cannot fall out of step with reality.
+//
+// Roster links carry data-admin-link, which admin_card_links.js already handles
+// through a delegated listener, so no wiring is needed here.
+
+const ROLE_INPUT_SELECTOR = 'input[type="checkbox"][name^="require_member_of_"]';
+const LIST_ID = 'app-role-requirements-list';
+const EMPTY_ID = 'app-role-requirements-empty';
+const ROSTER_CARD_ID = 'app-role-requirements-section';
+
+/**
+ * Read the visible label for a control, falling back to its field name.
+ * @param {HTMLInputElement} input Canonical role checkbox.
+ * @returns {string} Human readable label.
+ */
+function labelFor(input) {
+    const explicit = input.id ? document.querySelector(`label[for="${input.id}"]`) : null;
+    if (explicit && explicit.textContent.trim()) {
+        return explicit.textContent.trim();
+    }
+
+    const wrapping = input.closest('label');
+    if (wrapping && wrapping.textContent.trim()) {
+        return wrapping.textContent.trim();
+    }
+
+    return input.name;
+}
+
+/**
+ * Find the card a control belongs to, so the roster can link back to it.
+ * @param {HTMLInputElement} input Canonical role checkbox.
+ * @returns {HTMLElement|null} The owning card, when it has an id.
+ */
+function owningCard(input) {
+    let card = input.closest('.card[id]');
+    while (card && card.id === ROSTER_CARD_ID) {
+        card = card.parentElement ? card.parentElement.closest('.card[id]') : null;
+    }
+    return card;
+}
+
+/**
+ * Read the heading of a card, used as the "where does this live" hint.
+ * @param {HTMLElement} card Owning card.
+ * @returns {string} Card title, or an empty string when it has none.
+ */
+function cardTitle(card) {
+    const heading = card ? card.querySelector('h5, h4, h6, .card-title') : null;
+    return heading ? heading.textContent.trim() : '';
+}
+
+/**
+ * Build one roster row: a mirror switch, its label, and a link to the setting.
+ * @param {HTMLInputElement} input Canonical role checkbox.
+ * @returns {HTMLElement} The row element.
+ */
+function buildRow(input) {
+    const row = document.createElement('div');
+    row.className = 'd-flex flex-wrap align-items-center gap-2';
+    row.setAttribute('data-role-requirement-row', input.name);
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'form-check form-switch mb-0 flex-grow-1';
+
+    // No name attribute: only the canonical input is submitted with the form.
+    const mirror = document.createElement('input');
+    mirror.type = 'checkbox';
+    mirror.className = 'form-check-input';
+    mirror.id = `${input.name}-roster-mirror`;
+    mirror.checked = input.checked;
+    mirror.disabled = input.disabled;
+    mirror.setAttribute('data-role-mirror-for', input.id || input.name);
+    mirror.setAttribute('data-ignore-settings-change', 'true');
+
+    const label = document.createElement('label');
+    label.className = 'form-check-label ms-2';
+    label.setAttribute('for', mirror.id);
+    label.textContent = labelFor(input);
+
+    wrapper.append(mirror, label);
+    row.appendChild(wrapper);
+
+    const card = owningCard(input);
+    if (card) {
+        const title = cardTitle(card);
+        const link = document.createElement('a');
+        link.href = `#${card.id}`;
+        link.className = 'small text-nowrap';
+        link.setAttribute('data-admin-link', card.id);
+        link.textContent = title ? `In ${title}` : 'Go to setting';
+        row.appendChild(link);
+    }
+
+    // Two-way: the mirror drives the real input, and the real input keeps the
+    // mirror honest when it is changed on its own tab.
+    mirror.addEventListener('change', () => {
+        if (input.checked === mirror.checked) {
+            return;
+        }
+        input.checked = mirror.checked;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    input.addEventListener('change', () => {
+        mirror.checked = input.checked;
+        mirror.disabled = input.disabled;
+    });
+
+    return row;
+}
+
+/**
+ * Populate the Access & Roles roster from the role switches on the page.
+ */
+export function initAdminAccessRolesRoster() {
+    const list = document.getElementById(LIST_ID);
+    if (!list) {
+        return;
+    }
+
+    const empty = document.getElementById(EMPTY_ID);
+    const inputs = Array.from(document.querySelectorAll(ROLE_INPUT_SELECTOR))
+        .filter(input => !list.contains(input));
+
+    list.replaceChildren();
+    inputs
+        .map(input => ({ input, label: labelFor(input) }))
+        .sort((a, b) => a.label.localeCompare(b.label))
+        .forEach(({ input }) => list.appendChild(buildRow(input)));
+
+    if (empty) {
+        empty.classList.toggle('d-none', inputs.length > 0);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', initAdminAccessRolesRoster);

application/single_app/static/js/admin/admin_card_links.js

@@ -0,0 +1,103 @@
+// admin_card_links.js
+// Resolves links that point at an Admin Settings card rather than at a tab.
+//
+// Cross-tab links used to name a tab button directly, for example
+// switchTab(event, 'workspaces-tab'). That couples the link to a tab id, so a
+// tab rename or an information-architecture change silently breaks the link:
+// the button no longer exists, no pane is activated, and the URL hash is left
+// pointing at nothing.
+//
+// A link declares the card it wants instead:
+//
+//     <a href="#redis-cache-section" data-admin-link="redis-cache-section">
+//
+// The owning tab is resolved from the DOM at click time, so card ids are the
+// only contract. Cards can move between tabs, and tabs can be renamed or
+// regrouped, without touching a single link.
+
+const HIGHLIGHT_CLASS = 'admin-card-link-target';
+const HIGHLIGHT_MS = 1600;
+
+/**
+ * Find the tab pane that contains a card.
+ * @param {string} cardId Element id of the target card.
+ * @returns {{card: HTMLElement, paneId: string|null}|null}
+ */
+export function resolveAdminCard(cardId) {
+    const card = document.getElementById(cardId);
+    if (!card) {
+        return null;
+    }
+
+    const pane = card.closest('.tab-pane');
+    return { card, paneId: pane ? pane.id : null };
+}
+
+/**
+ * Activate the tab owning a card, scroll to it, and highlight it briefly.
+ * @param {string} cardId Element id of the target card.
+ * @returns {boolean} Whether the card was found.
+ */
+export function openAdminCard(cardId) {
+    const resolved = resolveAdminCard(cardId);
+    if (!resolved) {
+        console.warn(`openAdminCard: no card with id "${cardId}"`);
+        return false;
+    }
+
+    const { card, paneId } = resolved;
+
+    if (paneId && typeof window.showAdminTab === 'function') {
+        window.showAdminTab(paneId);
+        syncSidebarActiveState(paneId);
+    }
+
+    // Let the pane become visible before measuring scroll position.
+    window.setTimeout(() => {
+        card.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        card.classList.add(HIGHLIGHT_CLASS);
+        window.setTimeout(() => card.classList.remove(HIGHLIGHT_CLASS), HIGHLIGHT_MS);
+    }, 120);
+
+    return true;
+}
+
+/**
+ * Mirror the activated tab in the sidebar, when the sidebar layout is in use.
+ * @param {string} paneId Tab pane id that was activated.
+ */
+function syncSidebarActiveState(paneId) {
+    const navLink = document.querySelector(`.admin-nav-tab[data-tab="${paneId}"]`);
+    if (!navLink) {
+        return;
+    }
+
+    document.querySelectorAll('.admin-nav-tab, .admin-nav-section').forEach((link) => {
+        link.classList.remove('active');
+    });
+    navLink.classList.add('active');
+}
+
+/**
+ * Delegate clicks so links added after load keep working.
+ */
+export function initAdminCardLinks() {
+    document.addEventListener('click', (event) => {
+        const link = event.target.closest('[data-admin-link]');
+        if (!link) {
+            return;
+        }
+
+        const cardId = link.getAttribute('data-admin-link');
+        if (!cardId) {
+            return;
+        }
+
+        event.preventDefault();
+        openAdminCard(cardId);
+    });
+}
+
+window.openAdminCard = openAdminCard;
+
+document.addEventListener('DOMContentLoaded', initAdminCardLinks);

application/single_app/static/js/admin/admin_data_management.js

@@ -388,7 +388,8 @@ function bindEvents() {
         pendingDataManagementBackupDelete = null;
     });
     elements.dataManagementConfirmBackupDeleteBtn?.addEventListener("click", deleteDataManagementBackup);
-    elements.dataManagementKeyVaultLink?.addEventListener("click", openKeyVaultSettings);
+    // The Key Vault link carries data-admin-link, so admin_card_links.js
+    // resolves the owning tab from the DOM and scrolls to the card.
     elements.dataManagementCosmosEditorOpenDangerBtn?.addEventListener("click", showCosmosEditorDangerModal);
     elements.datamanagementcosmoseditordangeraccept?.addEventListener("change", updateCosmosEditorDangerAcceptState);
     elements.dataManagementCosmosEditorAcceptDangerBtn?.addEventListener("click", acceptCosmosEditorDanger);
@@ -909,20 +910,6 @@ function setKeyStorageAlert(variant, iconClass, title, message, linkText) {
     setText(elements.dataManagementKeyVaultLink, linkText);
 }
 
-function openKeyVaultSettings(event) {
-    event?.preventDefault();
-    const securityTabButton = document.getElementById("security-tab");
-    if (securityTabButton && window.bootstrap?.Tab) {
-        window.bootstrap.Tab.getOrCreateInstance(securityTabButton).show();
-    } else if (securityTabButton) {
-        securityTabButton.click();
-    }
-    window.location.hash = "security";
-    window.setTimeout(() => {
-        document.getElementById("keyvault-section")?.scrollIntoView({ block: "start", behavior: "smooth" });
-    }, 100);
-}
-
 function collectSettings() {
     const backupStorageAuthenticationType = getValue(elements.datamanagementstorageauth) || backupStorageAuthManagedIdentity;
     return {