feat(integrations): add Azure work item state management and UI tweaks

Add support for listing and setting Azure DevOps work item states from the
integration layer. New helpers build and validate JSON-patch payloads and
expose two Tauri commands so the frontend can enumerate available states
and apply state changes. The Issue Center now loads Azure states and can
change an issue's state; dialog dismiss controls and related CSS were
consolidated and board UI feedback was simplified for clarity.

- Add Tauri commands to list and set Azure work item states.
- Load and present Azure states in Issue Center and allow state changes.
- Unify dialog dismiss attributes and refine hover/focus styling.
This commit is contained in:
2026-09-11 08:43:06 +02:00
parent c42f8eb352
commit d0dd79354a
12 changed files with 151 additions and 66 deletions
+54 -9
View File
@@ -15,7 +15,7 @@
import IntegrationBoardView from "./IntegrationBoardView.svelte";
import SelectMenu from "./SelectMenu.svelte";
import { readWorkspacePreferences, writeWorkspacePreferences } from "../workspacePreferences";
import { listIntegrationIssues, closeIntegrationIssue, openInBrowser } from "../git";
import { listIntegrationIssues, closeIntegrationIssue, listAzureIssueStates, setAzureIssueState, openInBrowser } from "../git";
import { configuredIntegrationSources, integrationCredentialKey } from "../integrations";
import type { GitIntegrationSettings, IntegrationIssue, StoredCredential } from "../types";
@@ -40,6 +40,12 @@
let closingId = "";
let closingKey = "";
let actionError = "";
let azureStates: string[] = [];
let statesLoading = false;
let statesError = "";
let statesGeneration = 0;
let lastStateKey = "";
let targetState = "";
let closedStates = new Map<string, string>();
let error = "";
let mounted = false;
@@ -74,6 +80,17 @@
$: stateOptions = [{ value: "", label: de ? "Alle Status" : "All states" }, ...[...new Set(issues.map(issue => issue.state))].sort().map(value => ({ value, label: value }))];
$: selected = issues.find(issue => issue.id === selectedId);
$: description = selected ? plainDescription(selected) : "";
$: stateKey = source?.provider === "azure-devops" && selected ? JSON.stringify([sourceKey, selected.id]) : "";
$: if (stateKey !== lastStateKey) {
lastStateKey = stateKey;
statesGeneration++;
azureStates = [];
statesError = "";
statesLoading = false;
actionError = "";
targetState = "";
if (stateKey) void loadAzureStates();
}
onMount(() => {
const saved = readWorkspacePreferences(preferenceKey);
@@ -93,7 +110,7 @@
window.removeEventListener("pointerdown", closeDetailsOutside, true);
};
});
onDestroy(() => { generation++; });
onDestroy(() => { generation++; statesGeneration++; });
function restoreFilters(key: string) {
const saved = readWorkspacePreferences(`${preferenceKey}:${key}`);
@@ -157,7 +174,26 @@
return document.body.textContent?.trim() ?? "";
}
async function closeIssue() {
async function loadAzureStates() {
if (!selected || source?.provider !== "azure-devops") return;
const current = source;
const issue = selected;
const requestGeneration = ++statesGeneration;
statesLoading = true;
statesError = "";
try {
const credential = await withTimeout(loadCredential(integrationCredentialKey(current.provider, current.accountId)), 15_000);
if (!credential?.password) throw new Error(de ? "Kein Token gespeichert." : "No token stored.");
const states = await withTimeout(listAzureIssueStates(current.baseUrl, credential.username, credential.password, issue.repositoryName, issue.number), 70_000);
if (requestGeneration !== statesGeneration) return;
azureStates = states;
targetState = issue.state;
} catch (cause) {
if (requestGeneration === statesGeneration) statesError = `${de ? "Status konnten nicht geladen werden." : "Could not load states."} ${String(cause)}`;
} finally { if (requestGeneration === statesGeneration) statesLoading = false; }
}
async function changeIssueState(nextState?: string) {
if (!selected || !source || closingId || loading) return;
const issue = selected;
const current = source;
@@ -168,13 +204,15 @@
try {
const credential = await withTimeout(loadCredential(integrationCredentialKey(current.provider, current.accountId)), 15_000);
if (!credential?.password) throw new Error(de ? "Kein Token gespeichert." : "No token stored.");
const state = await closeIntegrationIssue(current.provider, current.baseUrl, credential.username, credential.password, issue.repositoryName, issue.number);
const state = nextState && current.provider === "azure-devops"
? await setAzureIssueState(current.baseUrl, credential.username, credential.password, issue.repositoryName, issue.number, nextState)
: await closeIntegrationIssue(current.provider, current.baseUrl, credential.username, credential.password, issue.repositoryName, issue.number);
const saved = cache.get(key);
if (saved) cache.set(key, { ...saved, issues: saved.issues.map(item => item.id === issue.id ? { ...item, state } : item) });
closedStates = new Map(closedStates).set(`${key}:${issue.id}`, state);
if (!nextState) closedStates = new Map(closedStates).set(`${key}:${issue.id}`, state);
if (sourceKey === key) issues = issues.map(item => item.id === issue.id ? { ...item, state } : item);
} catch (cause) {
if (sourceKey === key && selectedId === issue.id) actionError = `${de ? "Issue konnte nicht geschlossen werden. Bitte Schreibrechte prüfen." : "Could not close issue. Check write permissions."} ${String(cause)}`;
if (sourceKey === key && selectedId === issue.id) actionError = `${de ? "Status konnte nicht geändert werden. Bitte Schreibrechte und Übergangsregeln prüfen." : "Could not change state. Check write permissions and transition rules."} ${String(cause)}`;
} finally { closingId = ""; }
}
@@ -244,7 +282,7 @@
<div><CircleDot size={17} /><strong>{source?.label} · Issue</strong></div>
<div class="issue-detail-header-actions">
{#if selected.webUrl}<button class="workspace-button close-button" onclick={() => openIssue(selected!.webUrl)} aria-label={de ? "Im Anbieter öffnen" : "Open in provider"}><ExternalLink size={16} /></button>{/if}
<button class="workspace-button close-button" onclick={closeDetails} aria-label={de ? "Details schließen" : "Close details"}><X size={17} /></button>
<button data-dialog-close class="workspace-button close-button" onclick={closeDetails} aria-label={de ? "Details schließen" : "Close details"}><X size={17} /></button>
</div>
</header>
<div class="issue-detail-body">
@@ -256,8 +294,15 @@
{#if source}{#key `${sourceKey}:${selected.id}`}<IssueComments {source} issue={selected} {language} {loadCredential} />{/key}{/if}
</div>
<div class="issue-detail-sidebar">
{#if selected.state !== "closed" && closedStates.get(`${sourceKey}:${selected.id}`) !== selected.state}
<button class="workspace-button issue-close-action" disabled={!!closingId || loading} onclick={closeIssue}><XCircle size={15} />{closingId === selected.id ? (de ? "Wird geschlossen …" : "Closing …") : (de ? "Issue schließen" : "Close issue")}</button>
{#if source?.provider === "azure-devops"}
<section>
<h3>{de ? "Status ändern" : "Change state"}</h3>
<SelectMenu value={targetState} options={azureStates.map(value => ({ value, label: value }))} disabled={statesLoading || !!closingId || loading || !azureStates.length} placeholder={statesLoading ? (de ? "Status werden geladen …" : "Loading states …") : selected.state} ariaLabel={de ? "Neuer Status" : "New state"} onChange={value => { targetState = value; }} />
<button class="workspace-button issue-state-action" disabled={statesLoading || !!closingId || loading || !targetState || targetState === selected.state || !azureStates.includes(targetState)} onclick={() => changeIssueState(targetState)}>{closingId === selected.id ? (de ? "Wird gespeichert …" : "Saving …") : (de ? "Status übernehmen" : "Apply state")}</button>
{#if statesError}<p class="comment-error" role="alert">{statesError}</p><button class="workspace-button" onclick={loadAzureStates}>{de ? "Erneut versuchen" : "Retry"}</button>{/if}
</section>
{:else if selected.state !== "closed" && closedStates.get(`${sourceKey}:${selected.id}`) !== selected.state}
<button class="workspace-button issue-close-action" disabled={!!closingId || loading} onclick={() => changeIssueState()}><XCircle size={15} />{closingId === selected.id ? (de ? "Wird geschlossen …" : "Closing …") : (de ? "Issue schließen" : "Close issue")}</button>
{/if}
{#if actionError}<p class="comment-error" role="alert">{actionError}</p>{/if}
{#if selected.webUrl}<button class="workspace-button inspector-open" onclick={() => openIssue(selected!.webUrl)}><ExternalLink size={14} />{de ? "Im Browser öffnen" : "Open in browser"}</button>{/if}