Merge pull request #6175 from gitbutlerapp/Branch-statuses

Branch-statuses

Author: Caleb-T-Owens

apps/web/src/lib/components/branches/BranchIndexCard.svelte

@@ -3,7 +3,7 @@
 	import CommitsGraph from '../review/CommitsGraph.svelte';
 	import { BranchService } from '@gitbutler/shared/branches/branchService';
 	import { getBranchReview } from '@gitbutler/shared/branches/branchesPreview.svelte';
-	import { BranchStatus, getContributorsWithAvatars } from '@gitbutler/shared/branches/types';
+	import { getContributorsWithAvatars } from '@gitbutler/shared/branches/types';
 	import { getContext } from '@gitbutler/shared/context';
 	import Loading from '@gitbutler/shared/network/Loading.svelte';
 	import { isFound } from '@gitbutler/shared/network/loadable';
@@ -12,7 +12,6 @@
 		WebRoutesService,
 		type ProjectParameters
 	} from '@gitbutler/shared/routing/webRoutes.svelte';
-	import Badge from '@gitbutler/ui/Badge.svelte';
 	import AvatarGroup from '@gitbutler/ui/avatar/AvatarGroup.svelte';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
@@ -39,18 +38,6 @@
 	);
 </script>
 
-{#snippet status(status: BranchStatus)}
-	{#if status === BranchStatus.Active}
-		<Badge>Active</Badge>
-	{:else if status === BranchStatus.Inactive}
-		<Badge>Inactive</Badge>
-	{:else if status === BranchStatus.Closed}
-		<Badge>Closed</Badge>
-	{:else if status === BranchStatus.Loading}
-		<Badge>Processing</Badge>
-	{/if}
-{/snippet}
-
 <Loading loadable={branch.current}>
 	{#snippet children(branch)}
 		<tr class:rounded-top={roundedTop} class:rounded-bottom={roundedBottom} class="row">
@@ -64,11 +51,6 @@
 			</td>
 			<td><div class="uuid">{branch.branchId.slice(0, 7)}</div></td>
 			<td><div><CommitsGraph {branch} /></div></td>
-			<td>
-				<div>
-					{@render status(branch.status || BranchStatus.Active)}
-				</div>
-			</td>
 			<td><div class="norm">{dayjs(branch.updatedAt).fromNow()}</div></td>
 			<td>
 				<div>

apps/web/src/lib/components/review/BranchStatusBadge.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
+	import { BranchStatus, type Branch, type Patch } from '@gitbutler/shared/branches/types';
 	import CommitStatusBadge from '@gitbutler/ui/CommitStatusBadge.svelte';
-	import type { Branch, Patch } from '@gitbutler/shared/branches/types';
 
 	type Props = {
 		branch: Branch;
 	};
 
 	const { branch }: Props = $props();
 
-	const patches = branch.patches;
+	const patches = $derived(branch.patches);
 
-	let anyRejected = patches.some((patch: Patch) => patch.reviewAll.rejected.length > 0);
-	let someApproved = patches.some((patch: Patch) => patch.reviewAll.signedOff.length > 0);
-	let allApproved = !patches.some((patch: Patch) => patch.reviewAll.signedOff.length === 0);
+	const anyRejected = $derived(patches.some((patch: Patch) => patch.reviewAll.rejected.length > 0));
+	const someApproved = $derived(
+		patches.some((patch: Patch) => patch.reviewAll.signedOff.length > 0)
+	);
+	const allApproved = $derived(
+		!patches.some((patch: Patch) => patch.reviewAll.signedOff.length === 0)
+	);
 
-	function getStatus() {
-		if (anyRejected) {
+	const status = $derived.by(() => {
+		if (branch.status === BranchStatus.Closed) {
+			return 'closed';
+		} else if (branch.status === BranchStatus.Loading) {
+			return 'loading';
+		} else if (anyRejected) {
 			return 'changes-requested';
 		} else if (allApproved) {
 			return 'approved';
@@ -24,7 +32,7 @@
 		} else {
 			return 'unreviewed';
 		}
-	}
+	});
 </script>
 
-<CommitStatusBadge status={getStatus()} />
+<CommitStatusBadge {status} />

apps/web/src/routes/[ownerSlug]/[projectSlug]/reviews/+page.svelte

@@ -40,7 +40,6 @@
 					<th><div>Name</div></th>
 					<th><div>UUID</div></th>
 					<th><div>Branch commits</div></th>
-					<th><div>Status</div></th>
 					<th><div>Last update</div></th>
 					<th><div>Authors</div></th>
 					<th><div>Version</div></th>

apps/web/src/routes/[ownerSlug]/[projectSlug]/reviews/[branchId]/+page.svelte

@@ -7,7 +7,11 @@
 	import { getBranchReview } from '@gitbutler/shared/branches/branchesPreview.svelte';
 	import { lookupLatestBranchUuid } from '@gitbutler/shared/branches/latestBranchLookup.svelte';
 	import { LatestBranchLookupService } from '@gitbutler/shared/branches/latestBranchLookupService';
-	import { getContributorsWithAvatars, type Branch } from '@gitbutler/shared/branches/types';
+	import {
+		BranchStatus,
+		getContributorsWithAvatars,
+		type Branch
+	} from '@gitbutler/shared/branches/types';
 	import { copyToClipboard } from '@gitbutler/shared/clipboard';
 	import { getContext } from '@gitbutler/shared/context';
 	import Loading from '@gitbutler/shared/network/Loading.svelte';
@@ -17,6 +21,7 @@
 		WebRoutesService,
 		type ProjectReviewParameters
 	} from '@gitbutler/shared/routing/webRoutes.svelte';
+	import AsyncButton from '@gitbutler/ui/AsyncButton.svelte';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Textarea from '@gitbutler/ui/Textarea.svelte';
 	import AvatarGroup from '@gitbutler/ui/avatar/AvatarGroup.svelte';
@@ -85,24 +90,28 @@
 		editingSummary = false;
 	}
 
-	let savingSummary = $state<'inert' | 'loading' | 'complete'>('inert');
-
 	async function saveSummary() {
 		if (!isFound(branch?.current)) return;
 
-		savingSummary = 'loading';
-
 		try {
 			await branchService.updateBranch(branch.current.value.uuid, {
 				description: summary
 			});
-			toasts.success('Saved review summary');
+			toasts.success('Updated review status');
 		} finally {
 			editingSummary = false;
-			savingSummary = 'complete';
 		}
 	}
 
+	async function updateStatus(status: BranchStatus.Active | BranchStatus.Closed) {
+		if (!isFound(branch?.current)) return;
+
+		await branchService.updateBranch(branch.current.value.uuid, {
+			status
+		});
+		toasts.success('Saved review summary');
+	}
+
 	function copyLocation() {
 		copyToClipboard(location.href);
 	}
@@ -128,11 +137,19 @@
 				<div class="heading">
 					<p class="text-15 text-bold">{branch.title}</p>
 					<div class="actions">
-						<!-- {#if !branch.description}
-							<Button icon="plus-small" kind="outline" onclick={editSummary}>Add summary</Button>
-						{/if} -->
 						<Button icon="text-link" kind="outline" onclick={copyLocation}>Branch link</Button>
 						{@render startReview(branch)}
+						{#if branch.status === BranchStatus.Closed}
+							<AsyncButton action={async () => updateStatus(BranchStatus.Active)} kind="outline"
+								>Re-open review</AsyncButton
+							>
+						{:else}
+							<AsyncButton
+								style="error"
+								kind="outline"
+								action={async () => updateStatus(BranchStatus.Closed)}>Close review</AsyncButton
+							>
+						{/if}
 					</div>
 				</div>
 				<div class="stats">
@@ -156,14 +173,8 @@
 					{#if editingSummary}
 						<Textarea minRows={6} bind:value={summary}></Textarea>
 						<div class="summary-actions">
-							<Button
-								kind="outline"
-								onclick={abortEditingSummary}
-								loading={savingSummary === 'loading'}>Cancel</Button
-							>
-							<Button style="pop" onclick={saveSummary} loading={savingSummary === 'loading'}
-								>Save</Button
-							>
+							<Button kind="outline" onclick={abortEditingSummary}>Cancel</Button>
+							<AsyncButton style="pop" action={saveSummary}>Save</AsyncButton>
 						</div>
 					{:else if branch.description}
 						<Markdown content={branch.description} />

packages/ui/src/lib/CommitStatusBadge.svelte

@@ -2,7 +2,13 @@
 	import Icon from '$lib/Icon.svelte';
 
 	type Props = {
-		status: 'unreviewed' | 'in-discussion' | 'approved' | 'changes-requested';
+		status:
+			| 'unreviewed'
+			| 'in-discussion'
+			| 'approved'
+			| 'changes-requested'
+			| 'closed'
+			| 'loading';
 		kind?: 'icon' | 'text';
 	};
 
@@ -25,6 +31,8 @@
 	class="status-badge"
 	class:status-badge_icon={kind === 'icon'}
 	class:status-badge_approved={status === 'approved'}
+	class:status-badge_closed={status === 'closed'}
+	class:status-badge_loading={status === 'loading'}
 	class:status-badge_changes-requested={status === 'changes-requested'}
 	class:status-badge_in-discussion={status === 'in-discussion'}
 	class:status-badge_unreviewed={status === 'unreviewed'}
@@ -33,7 +41,11 @@
 		<Icon name={getIconName()} />
 	{:else}
 		<span class="text-10 text-bold status-badge__text">
-			{#if status === 'changes-requested'}
+			{#if status === 'closed'}
+				Closed
+			{:else if status === 'loading'}
+				Processing
+			{:else if status === 'changes-requested'}
 				Changes requested
 			{:else if status === 'approved'}
 				Approved
@@ -57,6 +69,10 @@
 		text-wrap: nowrap;
 		padding: 0 4px;
 	}
+	.status-badge_closed {
+		background-color: var(--clr-theme-purp-element);
+		color: var(--clr-core-ntrl-100);
+	}
 
 	.status-badge_approved {
 		background-color: var(--clr-br-commit-approved-bg);
@@ -73,7 +89,8 @@
 		color: var(--clr-br-commit-in-discussion-text);
 	}
 
-	.status-badge_unreviewed {
+	.status-badge_unreviewed,
+	.status-badge_loading {
 		background-color: var(--clr-br-commit-unreviewed-bg);
 		color: var(--clr-br-commit-unreviewed-text);
 	}