|
|
|
@@ -1,12 +1,13 @@
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import SelectMenu from "./SelectMenu.svelte";
|
|
|
|
|
import { onMount } from "svelte";
|
|
|
|
|
import { GitPullRequest, X, LoaderCircle, ArrowRight } from "@lucide/svelte";
|
|
|
|
|
import { createIntegrationReviewRequest, listIntegrationRepositories } from "../git";
|
|
|
|
|
import { createIntegrationReviewRequest, listIntegrationRepositories, listIntegrationRepositoryBranches, listRemotes, listBranches } from "../git";
|
|
|
|
|
import { integrationCredentialKey } from "../integrations";
|
|
|
|
|
import type { GitIntegrationSource, GitIntegrationRepository, IntegrationReviewRequest, StoredCredential } from "../types";
|
|
|
|
|
|
|
|
|
|
let { source, de, loadCredential, onClose, onCreated }: {
|
|
|
|
|
source: GitIntegrationSource; de: boolean;
|
|
|
|
|
let { source, de, localRepositoryPath = "", loadCredential, onClose, onCreated }: {
|
|
|
|
|
source: GitIntegrationSource; de: boolean; localRepositoryPath?: string;
|
|
|
|
|
loadCredential: (key: string) => Promise<StoredCredential | null>;
|
|
|
|
|
onClose: () => void; onCreated: (request: IntegrationReviewRequest) => void;
|
|
|
|
|
} = $props();
|
|
|
|
@@ -15,6 +16,49 @@
|
|
|
|
|
let repositoryId = $state("");
|
|
|
|
|
let sourceBranch = $state("");
|
|
|
|
|
let targetBranch = $state("");
|
|
|
|
|
let branches = $state<string[]>([]);
|
|
|
|
|
let defaultBranch = $state("");
|
|
|
|
|
let branchesLoading = $state(false);
|
|
|
|
|
let branchError = $state("");
|
|
|
|
|
let branchGeneration = 0;
|
|
|
|
|
const branchOptions = $derived(branches.map(name => ({value:name,label:name,group:name === defaultBranch ? (de ? "Standardbranch" : "Default branch") : undefined})));
|
|
|
|
|
$effect(() => {
|
|
|
|
|
const repository = repositories.find(item => item.id === repositoryId);
|
|
|
|
|
void loadRepositoryBranches(repository);
|
|
|
|
|
});
|
|
|
|
|
async function loadRepositoryBranches(repository?: GitIntegrationRepository) {
|
|
|
|
|
const generation = ++branchGeneration;
|
|
|
|
|
branches = []; sourceBranch = ""; targetBranch = ""; defaultBranch = ""; branchError = "";
|
|
|
|
|
branchesLoading = !!repository;
|
|
|
|
|
if (!repository) return;
|
|
|
|
|
try {
|
|
|
|
|
const credential = await loadCredential(integrationCredentialKey(source.provider, source.accountId));
|
|
|
|
|
if (!credential?.password) throw new Error(de ? "Kein Token gespeichert." : "No token stored.");
|
|
|
|
|
const result = await listIntegrationRepositoryBranches(source.provider, source.baseUrl, credential.username, credential.password, repository);
|
|
|
|
|
if (generation !== branchGeneration) return;
|
|
|
|
|
branches = result.branches;
|
|
|
|
|
defaultBranch = result.defaultBranch;
|
|
|
|
|
targetBranch = branches.includes(defaultBranch) ? defaultBranch : "";
|
|
|
|
|
// Only suggest a local branch when its remote matches this exact repository.
|
|
|
|
|
if (localRepositoryPath) {
|
|
|
|
|
try {
|
|
|
|
|
const remotes = await listRemotes(localRepositoryPath);
|
|
|
|
|
const clean = (url: string) => url.trim().replace(/\.git\/?$/, "").replace(/\/$/, "");
|
|
|
|
|
const matches = remotes.some(remote => [repository.cloneUrl, repository.sshUrl].filter(Boolean).some(url => clean(url) === clean(remote.fetch_url) || clean(url) === clean(remote.push_url)));
|
|
|
|
|
if (matches) {
|
|
|
|
|
const localBranches = await listBranches(localRepositoryPath);
|
|
|
|
|
if (generation !== branchGeneration) return;
|
|
|
|
|
const current = localBranches.find(branch => branch.current)?.name;
|
|
|
|
|
if (current && branches.includes(current) && current !== targetBranch) sourceBranch = current;
|
|
|
|
|
}
|
|
|
|
|
} catch { /* Remote branch selection remains available without local metadata. */ }
|
|
|
|
|
}
|
|
|
|
|
if (generation !== branchGeneration) return;
|
|
|
|
|
if (!sourceBranch && branches.length === 2 && targetBranch) sourceBranch = branches.find(name => name !== targetBranch) ?? "";
|
|
|
|
|
} catch (cause) {
|
|
|
|
|
if (generation === branchGeneration) branchError = String(cause);
|
|
|
|
|
} finally { if (generation === branchGeneration) branchesLoading = false; }
|
|
|
|
|
}
|
|
|
|
|
let title = $state("");
|
|
|
|
|
let description = $state("");
|
|
|
|
|
let loading = $state(true);
|
|
|
|
@@ -24,7 +68,7 @@
|
|
|
|
|
const heading = $derived(de ? (mr ? "Merge Request erstellen" : "Pull Request erstellen") : (mr ? "Create merge request" : "Create pull request"));
|
|
|
|
|
const normalizeBranch = (branch: string) => branch.trim().replace(/^refs\/heads\//, "");
|
|
|
|
|
const sameBranch = $derived(!!sourceBranch.trim() && normalizeBranch(sourceBranch) === normalizeBranch(targetBranch));
|
|
|
|
|
const valid = $derived(repositoryId && title.trim() && sourceBranch.trim() && targetBranch.trim() && !sameBranch);
|
|
|
|
|
const valid = $derived(!branchesLoading && !branchError && branches.includes(sourceBranch) && branches.includes(targetBranch) && repositoryId && title.trim() && sourceBranch.trim() && targetBranch.trim() && !sameBranch);
|
|
|
|
|
|
|
|
|
|
onMount(() => { dialog.showModal(); void loadRepositories(); });
|
|
|
|
|
async function loadRepositories() {
|
|
|
|
@@ -56,9 +100,16 @@
|
|
|
|
|
<header><div class="heading-icon"><GitPullRequest size={19} /></div><div><h2 id="create-review-title">{heading}</h2><p>{source.label}</p></div><button class="close" type="button" aria-label={de ? "Schließen" : "Close"} disabled={busy} onclick={onClose}><X size={18}/></button></header>
|
|
|
|
|
<div class="body">
|
|
|
|
|
{#if error}<div class="error" role="alert">{error}{#if !repositories.length && !loading}<button type="button" onclick={loadRepositories}>{de ? "Erneut laden" : "Retry"}</button>{/if}</div>{/if}
|
|
|
|
|
<label>Repository<select bind:value={repositoryId} disabled={loading || busy} required><option value="" disabled>{loading ? (de ? "Repositories werden geladen …" : "Loading repositories…") : (de ? "Repository auswählen" : "Select repository")}</option>{#each repositories as repository}<option value={repository.id}>{repository.fullName}</option>{/each}</select></label>
|
|
|
|
|
<div class="repository-field"><div class="field-heading"><span>Repository</span><small>{loading ? "…" : `${repositories.length} ${de ? "verfügbar" : "available"}`}</small></div>
|
|
|
|
|
<SelectMenu value={repositoryId} options={repositories.map(repository => ({value:repository.id,label:repository.fullName}))} disabled={loading || busy} ariaLabel="Repository" placeholder={loading ? (de ? "Repositories werden geladen …" : "Loading repositories…") : (de ? "Repository auswählen" : "Select repository")} searchable searchPlaceholder={de ? "Repositories durchsuchen …" : "Search repositories…"} emptyText={de ? "Keine passenden Repositories" : "No matching repositories"} onChange={value => repositoryId = value}/>
|
|
|
|
|
</div>
|
|
|
|
|
{#if !loading && !error && !repositories.length}<p>{de ? "Keine Repositories für diese Integration gefunden." : "No repositories found for this integration."}</p>{/if}
|
|
|
|
|
<div class="branches"><label>{de ? "Quellbranch" : "Source branch"}<input bind:value={sourceBranch} disabled={busy} placeholder="feature/my-change" required autocomplete="off" /></label><ArrowRight size={16}/><label>{de ? "Zielbranch" : "Target branch"}<input bind:value={targetBranch} disabled={busy} placeholder="main" required autocomplete="off" /></label></div>
|
|
|
|
|
<div class="branches">
|
|
|
|
|
<div class="repository-field"><span>{de ? "Quellbranch" : "Source branch"}</span><SelectMenu value={sourceBranch} options={branchOptions.map(option => ({...option,disabled:option.value === targetBranch}))} disabled={busy || branchesLoading || !repositoryId} ariaLabel={de ? "Quellbranch" : "Source branch"} placeholder={branchesLoading ? (de ? "Lädt …" : "Loading…") : (de ? "Quellbranch auswählen" : "Select source branch")} searchable searchPlaceholder={de ? "Branches durchsuchen …" : "Search branches…"} emptyText={de ? "Keine Branches gefunden" : "No branches found"} onChange={value => sourceBranch = value}/></div>
|
|
|
|
|
<ArrowRight size={16}/>
|
|
|
|
|
<div class="repository-field"><span>{de ? "Zielbranch" : "Target branch"}</span><SelectMenu value={targetBranch} options={branchOptions.map(option => ({...option,disabled:option.value === sourceBranch}))} disabled={busy || branchesLoading || !repositoryId} ariaLabel={de ? "Zielbranch" : "Target branch"} placeholder={branchesLoading ? (de ? "Lädt …" : "Loading…") : (de ? "Zielbranch auswählen" : "Select target branch")} searchable searchPlaceholder={de ? "Branches durchsuchen …" : "Search branches…"} emptyText={de ? "Keine Branches gefunden" : "No branches found"} onChange={value => targetBranch = value}/></div>
|
|
|
|
|
</div>
|
|
|
|
|
{#if branchError}<div class="error" role="alert">{branchError}<button type="button" onclick={() => loadRepositoryBranches(repositories.find(item => item.id === repositoryId))}>{de ? "Erneut laden" : "Retry"}</button></div>{:else if repositoryId && !branchesLoading && !branches.length}<p>{de ? "Dieses Repository hat noch keine Branches." : "This repository has no branches yet."}</p>{/if}
|
|
|
|
|
{#if sameBranch}<p class="validation">{de ? "Quell- und Zielbranch müssen unterschiedlich sein." : "Source and target branches must be different."}</p>{/if}
|
|
|
|
|
<p class="hint">{de ? "Beide Branches müssen bereits in diesem Repository gepusht sein." : "Both branches must already be pushed to this repository."}</p>
|
|
|
|
|
<label>{de ? "Titel" : "Title"}<input bind:value={title} disabled={busy} placeholder={de ? "Was ändert sich?" : "What is changing?"} required /></label>
|
|
|
|
@@ -69,5 +120,6 @@
|
|
|
|
|
</dialog>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
dialog{margin:auto;width:min(600px,calc(100vw - 40px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--color-border-subtle);border-radius:14px;background:var(--color-surface);color:var(--color-ink);box-shadow:0 24px 90px #0005;font-family:inherit;font-size:12px;overflow:auto}dialog::backdrop{background:#0007;backdrop-filter:blur(3px)}header{display:flex;align-items:center;gap:12px;padding:22px 24px;border-bottom:1px solid var(--color-border-subtle)}h2{margin:0;font-size:16px;font-weight:650}p{margin:5px 0 0;color:var(--color-ink-muted)}.heading-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}button,input,select,textarea{font:inherit}button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--color-border-subtle);border-radius:7px;padding:9px 13px;background:var(--color-surface);color:var(--color-ink);cursor:pointer}button:disabled{opacity:.5;cursor:default}.close{margin-left:auto;border:0;padding:6px}.body{display:grid;gap:17px;padding:24px}label{display:grid;gap:8px;font-weight:600;min-width:0}input,select,textarea{box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid var(--color-border-subtle);border-radius:7px;background:var(--app-bg);color:var(--color-ink);font-weight:400}select{height:38px;padding:7px 11px;line-height:22px}input:focus,select:focus,textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px}textarea{resize:vertical;min-height:110px;line-height:1.6}.branches{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:12px;align-items:end}.branches>:global(svg){margin-bottom:12px;color:var(--color-accent)}.hint{margin-top:-8px;font-size:11px;line-height:1.5}.error,.validation{color:var(--color-danger,#e76767);line-height:1.5}.error{padding:12px;border-radius:7px;background:color-mix(in srgb,var(--color-danger,#e76767) 9%,transparent);overflow-wrap:anywhere}.error button{margin-left:8px}footer{display:flex;justify-content:flex-end;gap:9px;padding:16px 24px;border-top:1px solid var(--color-border-subtle)}.primary{background:var(--color-accent);border-color:var(--color-accent);color:white}.primary:enabled:hover{filter:brightness(1.08)}:global(.spin){animation:rotate 1s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}
|
|
|
|
|
.repository-field{min-width:0;display:grid;gap:9px}.field-heading{display:flex;align-items:center;justify-content:space-between;font-weight:600}.field-heading small{font-size:10px;font-weight:400;color:var(--color-ink-faint)}
|
|
|
|
|
dialog{margin:auto;width:min(640px,calc(100vw - 40px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--color-border-subtle);border-radius:14px;background:var(--app-dialog-bg);color:var(--color-ink);box-shadow:var(--app-dialog-shadow);font-family:inherit;font-size:12px;overflow:auto}dialog::backdrop{background:#0007;backdrop-filter:blur(3px)}header{display:flex;align-items:center;gap:12px;padding:22px 26px;background:var(--app-dialog-chrome);border-bottom:1px solid var(--color-border-subtle)}h2{margin:0;font-size:16px;font-weight:650}p{margin:5px 0 0;color:var(--color-ink-muted)}.heading-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}button,input,textarea{font:inherit}button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--color-border-subtle);border-radius:7px;padding:9px 13px;background:var(--color-surface);color:var(--color-ink);cursor:pointer}button:disabled{opacity:.5;cursor:default}.close{margin-left:auto;border:0;padding:6px}.body{display:grid;gap:20px;padding:24px 26px}label{display:grid;gap:8px;font-weight:600;min-width:0}input,textarea{box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid var(--color-border-subtle);border-radius:7px;background:var(--app-bg);color:var(--color-ink);font-weight:400}input:focus,textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px}textarea{resize:vertical;min-height:110px;line-height:1.6}.branches{padding:16px;background:color-mix(in srgb,var(--color-accent) 3%,var(--app-bg));border:1px solid var(--color-border-subtle);display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:12px;align-items:end}.branches>:global(svg){margin-bottom:12px;color:var(--color-accent)}.hint{margin-top:-8px;font-size:11px;line-height:1.5}.error,.validation{color:var(--color-danger,#e76767);line-height:1.5}.error{padding:12px;border-radius:7px;background:color-mix(in srgb,var(--color-danger,#e76767) 9%,transparent);overflow-wrap:anywhere}.error button{margin-left:8px}footer{display:flex;justify-content:flex-end;gap:9px;padding:16px 26px;background:var(--app-dialog-chrome);border-top:1px solid var(--color-border-subtle)}.primary{background:var(--color-accent);border-color:var(--color-accent);color:white}.primary:enabled:hover{filter:brightness(1.08)}:global(.spin){animation:rotate 1s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}
|
|
|
|
|
</style>
|
|
|
|
|