refactor: simplify frontend architecture (WI-1239-WI-1245)

Author: stefan-ernst

api/openapi-v2.json

@@ -20508,6 +20508,14 @@
                       },
                       "type": "array"
                     },
+                    "description": {
+                      "description": "The description value.",
+                      "type": "string"
+                    },
+                    "field_type": {
+                      "description": "The field type value.",
+                      "type": "string"
+                    },
                     "label": {
                       "description": "The label value.",
                       "type": "string"
@@ -20528,35 +20536,17 @@
                       "description": "The value help value.",
                       "nullable": true,
                       "properties": {
-                        "api_version": {
-                          "description": "The api version value.",
+                        "source": {
+                          "description": "The source value.",
                           "type": "string"
                         },
-                        "endpoint": {
-                          "description": "The endpoint value.",
-                          "type": "string"
-                        },
-                        "label_fields": {
-                          "description": "The label fields value.",
-                          "items": {
-                            "type": "string"
-                          },
-                          "type": "array"
-                        },
-                        "paginated": {
-                          "description": "The paginated value.",
-                          "type": "boolean"
-                        },
                         "value_field": {
                           "description": "The value field value.",
                           "type": "string"
                         }
                       },
                       "required": [
-                        "api_version",
-                        "endpoint",
-                        "label_fields",
-                        "paginated",
+                        "source",
                         "value_field"
                       ],
                       "type": "object"
@@ -20570,6 +20560,10 @@
                       "items": {
                         "additionalProperties": false,
                         "properties": {
+                          "description": {
+                            "description": "The description value.",
+                            "type": "string"
+                          },
                           "label": {
                             "description": "The label value.",
                             "type": "string"
@@ -20618,6 +20612,39 @@
         ],
         "type": "object"
       },
+      "GetQueryLanguageValuesResult": {
+        "additionalProperties": false,
+        "properties": {
+          "data": {
+            "items": {
+              "additionalProperties": false,
+              "properties": {
+                "description": {
+                  "description": "The description value.",
+                  "type": "string"
+                },
+                "label": {
+                  "description": "The label value.",
+                  "type": "string"
+                },
+                "value": {
+                  "description": "The value value."
+                }
+              },
+              "required": [
+                "label",
+                "value"
+              ],
+              "type": "object"
+            },
+            "type": "array"
+          }
+        },
+        "required": [
+          "data"
+        ],
+        "type": "object"
+      },
       "GetStatusCategoriesCategoryIdResult": {
         "additionalProperties": false,
         "properties": {
@@ -77791,6 +77818,109 @@
         ]
       }
     },
+    "/query-language/values": {
+      "get": {
+        "description": "Search query language completion values. Results include only resources visible to the authenticated caller; collections use their documented stable order and bounds.",
+        "operationId": "getQueryLanguageValues",
+        "parameters": [
+          {
+            "description": "Completion value catalog to search.",
+            "in": "query",
+            "name": "source",
+            "required": true,
+            "schema": {
+              "enum": [
+                "workspaces",
+                "statuses",
+                "status_categories",
+                "priorities",
+                "users",
+                "milestones",
+                "iterations",
+                "projects",
+                "item_types",
+                "labels"
+              ],
+              "type": "string"
+            }
+          },
+          {
+            "description": "Resource field returned as the query-language value.",
+            "in": "query",
+            "name": "value_field",
+            "required": true,
+            "schema": {
+              "enum": [
+                "id",
+                "name",
+                "key"
+              ],
+              "type": "string"
+            }
+          },
+          {
+            "description": "Case-insensitive value-label search text.",
+            "in": "query",
+            "name": "q",
+            "required": false,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "description": "Maximum number of completion values to return.",
+            "in": "query",
+            "name": "limit",
+            "required": false,
+            "schema": {
+              "default": 50,
+              "maximum": 100,
+              "minimum": 1,
+              "type": "integer"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/GetQueryLanguageValuesResult"
+                }
+              }
+            },
+            "description": "Search query language completion values response."
+          },
+          "400": {
+            "$ref": "#/components/responses/InvalidRequestError"
+          },
+          "401": {
+            "$ref": "#/components/responses/AuthenticationError"
+          },
+          "403": {
+            "$ref": "#/components/responses/PermissionError"
+          },
+          "429": {
+            "$ref": "#/components/responses/RateLimitError"
+          },
+          "500": {
+            "$ref": "#/components/responses/InternalError"
+          }
+        },
+        "security": [
+          {
+            "BearerAuth": []
+          }
+        ],
+        "summary": "Search query language completion values",
+        "tags": [
+          "Work items"
+        ],
+        "x-required-scopes": [
+          "items:read"
+        ]
+      }
+    },
     "/recurrence-rules/preview": {
       "post": {
         "description": "Preview recurrence rule. The server validates resource ownership and command preconditions before persisting changes. Unknown JSON fields are rejected when the operation accepts a body.",

frontend/src/lib/actions/clickOutside.js

@@ -0,0 +1,14 @@
+export function clickOutside(node) {
+  function handleClick(event) {
+    if (!node.contains(event.target)) {
+      node.dispatchEvent(new CustomEvent('clickOutside'));
+    }
+  }
+
+  document.addEventListener('click', handleClick, true);
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    },
+  };
+}

frontend/src/lib/admin/adminComponentRoutes.js

@@ -0,0 +1,48 @@
+// Keep admin settings out of the initial admin bundle. Each tab is loaded only
+// when its route is active.
+export const ADMIN_COMPONENT_LOADERS = {
+  'custom-fields': () => import('../settings/CustomFields.svelte'),
+  workspaces: () => import('../workspaces/Workspaces.svelte'),
+  screens: () => import('../pages/Screens.svelte'),
+  statuses: () => import('../features/workflows/StatusContainer.svelte'),
+  workflows: () => import('../features/workflows/WorkflowBuilder.svelte'),
+  'configuration-sets': () => import('../settings/ConfigurationSetManager.svelte'),
+  'condition-sets': () => import('../settings/ConditionSetManager.svelte'),
+  'approval-sets': () => import('../settings/ApprovalSetManager.svelte'),
+  'notification-settings': () => import('../settings/NotificationSettings.svelte'),
+  'email-templates': () => import('../settings/EmailTemplateManager.svelte'),
+  channels: () => import('../features/channels/Channels.svelte'),
+  'link-types': () => import('../settings/LinkTypeManager.svelte'),
+  users: () => import('../settings/UserManager.svelte'),
+  groups: () => import('../settings/GroupManager.svelte'),
+  permissions: () => import('../layout/PermissionsContainer.svelte'),
+  'workspace-roles': () => import('../settings/RoleManager.svelte'),
+  attachments: () => import('../settings/AttachmentSettings.svelte'),
+  modules: () => import('../settings/ModuleSettings.svelte'),
+  themes: () => import('../settings/ThemeManager.svelte'),
+  'hierarchy-levels': () => import('../settings/HierarchyLevelManager.svelte'),
+  'item-types': () => import('../settings/ItemTypeManager.svelte'),
+  priorities: () => import('../settings/PriorityManager.svelte'),
+  sso: () => import('../settings/SSOContainer.svelte'),
+  'scm-providers': () => import('../settings/SCMProviderManager.svelte'),
+  'integration-providers': () => import('../settings/IntegrationsManager.svelte'),
+  'llm-connections': () => import('../settings/AIContainer.svelte'),
+  'action-capabilities': () => import('../settings/ActionCapabilitiesManager.svelte'),
+  'system-import': () => import('../jira-import/SystemImportPage.svelte'),
+  security: () => import('../settings/SecuritySettings.svelte'),
+  assets: () => import('../features/assets/AssetManager.svelte'),
+  diagnostics: () => import('../settings/Diagnostics.svelte'),
+  'permission-set-detail': () => import('../settings/PermissionSetEdit.svelte'),
+  'configuration-set-detail': () => import('../settings/ConfigurationSetDetail.svelte'),
+  'condition-set-detail': () => import('../settings/ConditionSetDetail.svelte'),
+  'approval-set-detail': () => import('../settings/ApprovalSetDetail.svelte'),
+  'form-channel': () => import('../features/channels/FormChannelPage.svelte'),
+  'portal-channel': () => import('../features/channels/PortalChannelPage.svelte'),
+};
+
+export function getAdminComponentProps(componentKey, loadedExtensions) {
+  if (componentKey === 'workspaces') return { noPadding: true };
+  if (componentKey === 'channels') return { embedded: true };
+  if (componentKey === 'sso') return { extensions: loadedExtensions };
+  return {};
+}

frontend/src/lib/api/milestones.js

@@ -17,14 +17,17 @@ function planningQuery(filters = {}) {
   return params.toString();
 }
 
-async function listPlanning(path, filters = {}) {
+async function listPlanning(path, filters = {}, requestOptions = {}) {
   const query = planningQuery(filters);
   const globalPath = `${path}${query ? `?${query}` : ''}`;
-  if (filters.workspace_id == null) return fetchAllV2Pages(globalPath);
+  if (filters.workspace_id == null) return fetchAllV2Pages(globalPath, requestOptions);
   const workspacePath = `/workspaces/${filters.workspace_id}${path}${query ? `?${query}` : ''}`;
-  const local = fetchAllV2Pages(workspacePath);
+  const local = fetchAllV2Pages(workspacePath, requestOptions);
   if (filters.include_global === false) return local;
-  const [localRows, globalRows] = await Promise.all([local, fetchAllV2Pages(globalPath)]);
+  const [localRows, globalRows] = await Promise.all([
+    local,
+    fetchAllV2Pages(globalPath, requestOptions),
+  ]);
   return [...localRows, ...globalRows];
 }
 
@@ -45,7 +48,8 @@ function iterationPatch(data) {
 }
 
 export const milestones = {
-  getAll: (filters = {}) => listPlanning('/milestones', filters),
+  getAll: (filters = {}, requestOptions = {}) =>
+    listPlanning('/milestones', filters, requestOptions),
   get: (id) => fetchV2Data(`/milestones/${id}`),
   create: (data) => planningCreate('/milestones', data),
   update: (id, data) =>
@@ -89,7 +93,8 @@ export const milestones = {
 export const iterationTypes = createCrudClient('/iteration-types');
 
 export const iterations = {
-  getAll: (filters = {}) => listPlanning('/iterations', filters),
+  getAll: (filters = {}, requestOptions = {}) =>
+    listPlanning('/iterations', filters, requestOptions),
   get: (id) => fetchV2Data(`/iterations/${id}`),
   create: (data) => planningCreate('/iterations', data),
   update: (id, data) =>

frontend/src/lib/api/queryLanguage.js

@@ -1,17 +1,16 @@
-import { fetchAllV2Pages, fetchAPI, fetchV2Data } from './core.js';
+import { fetchV2Data } from './core.js';
 
 export const queryLanguage = {
   getCatalog: () => fetchV2Data('/query-language/catalog'),
 
-  async getValues(valueHelp) {
-    if (!valueHelp?.endpoint) return [];
+  async getValues(valueHelp, query = '') {
+    if (!valueHelp?.source || !valueHelp?.value_field) return [];
 
-    if (valueHelp.api_version === 'v1') {
-      return (await fetchAPI(valueHelp.endpoint)) || [];
-    }
-    if (valueHelp.paginated) {
-      return fetchAllV2Pages(valueHelp.endpoint);
-    }
-    return (await fetchV2Data(valueHelp.endpoint)) || [];
+    const params = new URLSearchParams({
+      source: valueHelp.source,
+      value_field: valueHelp.value_field,
+    });
+    if (query) params.set('q', query);
+    return (await fetchV2Data(`/query-language/values?${params.toString()}`)) || [];
   },
 };

frontend/src/lib/api/workflows.js

@@ -1,4 +1,4 @@
-import { fetchV2Data } from './core.js';
+import { fetchAPI, fetchV2Data } from './core.js';
 import { createCrudClient } from './createCrudClient.js';
 
 export const statusCategories = createCrudClient('/status-categories', { v2: true });
@@ -56,10 +56,7 @@ async function getWorkflow(id, requestOptions = {}) {
 }
 
 async function getAllWithTransitions() {
-  const items = (await workflowCRUD.getAll()) ?? [];
-  return Promise.all(
-    items.map(async (workflow) => ({ ...workflow, transitions: await getTransitions(workflow.id) }))
-  );
+  return fetchAPI('/workflows?include_transitions=true');
 }
 
 export const workflows = {

frontend/src/lib/components/Button.svelte

@@ -30,9 +30,18 @@
   export { className as class };
 
   const buttonType = $derived(/** @type {"button"|"submit"|"reset"} */ (type));
+  const effectiveDisabled = $derived(disabled || loading);
 
   let buttonEl = $state(null);
 
+  function handleClick(event) {
+    if (effectiveDisabled) {
+      event.preventDefault();
+      return;
+    }
+    onclick?.(event);
+  }
+
   // Install/uninstall @github/hotkey on the button element
   $effect(() => {
     if (!buttonEl || !hotkeyConfig?.key) return;
@@ -155,11 +164,11 @@
 <!-- Snippet for the button/link element -->
 {#snippet buttonElement()}
   {#if href}
-    <a bind:this={buttonEl} {id} {href} {target} {style} data-testid={dataTestid} data-page-id={dataPageId} class={allClasses} onclick={(e) => onclick?.(e)}>
+    <a bind:this={buttonEl} {id} {href} {target} {style} aria-disabled={effectiveDisabled} data-testid={dataTestid} data-page-id={dataPageId} class={allClasses} onclick={handleClick}>
       {@render linkContent()}
     </a>
   {:else}
-    <button bind:this={buttonEl} {id} type={buttonType} {disabled} {style} data-testid={dataTestid} data-page-id={dataPageId} class={allClasses} onclick={(e) => onclick?.(e)}>
+    <button bind:this={buttonEl} {id} type={buttonType} disabled={effectiveDisabled} aria-busy={loading} {style} data-testid={dataTestid} data-page-id={dataPageId} class={allClasses} onclick={handleClick}>
       {@render buttonContent()}
     </button>
   {/if}