feat: add errorSeries placeholder

gitbutlerapp · Nov 19, 2024 · 26a11f2 · 26a11f2
1 parent 574670e
commit 26a11f2
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 34 deletions.
diff --git a/apps/desktop/src/lib/stack/ErrorSeries.svelte b/apps/desktop/src/lib/stack/ErrorSeries.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { openExternalUrl } from '$lib/utils/url';
+	import LinkButton from '@gitbutler/ui/LinkButton.svelte';
+</script>
+
+<div class="error-series">
+	<div class="commit-line"></div>
+	<div class="text-13 text-body error-series__label">
+		This branch failed to load.
+		<br />
+		<br />
+		Please check out our
+		<LinkButton
+			icon="copy-small"
+			onclick={async () => {
+				openExternalUrl('http://docs.gitbutler.com/development/debugging');
+			}}
+		>
+			documentation
+		</LinkButton> or reload to try again.
+	</div>
+</div>
+
+<style>
+	.error-series {
+		position: relative;
+		border: 1px solid var(--clr-border-2);
+		border-radius: var(--radius-m);
+		background: var(--clr-bg-1);
+		scroll-margin-top: 120px;
+
+		&:last-child {
+			margin-bottom: 12px;
+		}
+		display: flex;
+		overflow: hidden;
+	}
+	.error-series__label {
+		color: var(--clr-text-2);
+
+		width: 100%;
+		padding: 20px 28px 26px 46px;
+		opacity: 0.6;
+	}
+	.commit-line {
+		--commit-color: var(--clr-theme-err-element);
+		position: absolute;
+		left: 20px;
+	}
+</style>
diff --git a/apps/desktop/src/lib/stack/SeriesDividerLine.svelte b/apps/desktop/src/lib/stack/SeriesDividerLine.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
 	import { getColorFromBranchType } from '@gitbutler/ui/utils/getColorFromBranchType';
-	import type { CommitStatus, PatchSeries } from '$lib/vbranches/types';
+	import type { CommitStatus } from '$lib/vbranches/types';
 
 	interface Props {
-		currentSeries: PatchSeries;
+		topPatchStatus?: CommitStatus;
 	}
 
-	const { currentSeries }: Props = $props();
+	const { topPatchStatus }: Props = $props();
 
-	const topPatch = $derived(currentSeries?.patches[0]);
-	const branchType = $derived<CommitStatus>(topPatch?.status ?? 'local');
+	const branchType = $derived<CommitStatus>(topPatchStatus ?? 'local');
 	const lineColor = $derived(getColorFromBranchType(branchType));
 </script>
 

diff --git a/apps/desktop/src/lib/stack/SeriesList.svelte b/apps/desktop/src/lib/stack/SeriesList.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import CurrentSeries from './CurrentSeries.svelte';
 	import EmptySeries from './EmptySeries.svelte';
+	import ErrorSeries from './ErrorSeries.svelte';
 	import SeriesDividerLine from './SeriesDividerLine.svelte';
 	import SeriesHeader from '$lib/branch/SeriesHeader.svelte';
 	import CommitList from '$lib/commit/CommitList.svelte';
@@ -14,6 +15,7 @@
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { PatchSeries, type VirtualBranch } from '$lib/vbranches/types';
 	import { getContext } from '@gitbutler/shared/context';
+	import { isError } from '@gitbutler/ui/utils/typeguards';
 	import type { Writable } from 'svelte/store';
 
 	interface Props {
@@ -25,7 +27,15 @@
 
 	const branchController = getContext(BranchController);
 
-	const nonArchivedSeries = $derived(branch.series.filter((s) => !s.archived));
+	$inspect('bSeries', branch.series[0]);
+
+	const nonArchivedSeries = $derived(
+		branch.series.filter((s) => {
+			if (isError(s)) return s;
+
+			return !s.archived;
+		})
+	);
 
 	const stackingReorderDropzoneManagerFactory = getContext(StackingReorderDropzoneManagerFactory);
 	const stackingReorderDropzoneManager = $derived(
@@ -50,36 +60,40 @@
 	}
 </script>
 
-{#each nonArchivedSeries as currentSeries, idx (currentSeries.name)}
+{#each nonArchivedSeries as currentSeries, idx (currentSeries)}
 	{@const isTopSeries = idx === 0}
 	{@const isBottomSeries = idx === branch.series.length - 1}
 	{#if !isTopSeries}
-		<SeriesDividerLine currentSeries={nonArchivedSeries[idx - 1] as PatchSeries} />
+		<SeriesDividerLine topPatchStatus={currentSeries.patches?.[0]?.status} />
 	{/if}
 
-	<CurrentSeries {currentSeries}>
-		<SeriesHeader {currentSeries} {isTopSeries} {lastPush} />
-
-		{#if currentSeries.upstreamPatches.length === 0 && currentSeries.patches.length === 0}
-			<div class="branch-emptystate">
-				<Dropzone {accepts} ondrop={(data) => onDrop(data, nonArchivedSeries, currentSeries)}>
-					{#snippet overlay({ hovered, activated })}
-						<CardOverlay {hovered} {activated} label="Move here" />
-					{/snippet}
-					<EmptySeries isBottom={isBottomSeries} />
-				</Dropzone>
-			</div>
-		{/if}
-
-		{#if currentSeries.upstreamPatches.length > 0 || currentSeries.patches.length > 0}
-			<CommitList
-				remoteOnlyPatches={currentSeries.upstreamPatches.filter((p) => !p.relatedTo)}
-				patches={currentSeries.patches}
-				seriesName={currentSeries.name}
-				isUnapplied={false}
-				isBottom={idx === branch.series.length - 1}
-				{stackingReorderDropzoneManager}
-			/>
-		{/if}
-	</CurrentSeries>
+	{#if !isError(currentSeries)}
+		<CurrentSeries {currentSeries}>
+			<SeriesHeader {currentSeries} {isTopSeries} {lastPush} />
+
+			{#if currentSeries.upstreamPatches.length === 0 && currentSeries.patches.length === 0}
+				<div>
+					<Dropzone {accepts} ondrop={(data) => onDrop(data, nonArchivedSeries, currentSeries)}>
+						{#snippet overlay({ hovered, activated })}
+							<CardOverlay {hovered} {activated} label="Move here" />
+						{/snippet}
+						<EmptySeries isBottom={isBottomSeries} />
+					</Dropzone>
+				</div>
+			{/if}
+
+			{#if currentSeries.upstreamPatches.length > 0 || currentSeries.patches.length > 0}
+				<CommitList
+					remoteOnlyPatches={currentSeries.upstreamPatches.filter((p) => !p.relatedTo)}
+					patches={currentSeries.patches}
+					seriesName={currentSeries.name}
+					isUnapplied={false}
+					isBottom={idx === branch.series.length - 1}
+					{stackingReorderDropzoneManager}
+				/>
+			{/if}
+		</CurrentSeries>
+	{:else}
+		<ErrorSeries />
+	{/if}
 {/each}
diff --git a/apps/desktop/src/lib/stack/Stack.svelte b/apps/desktop/src/lib/stack/Stack.svelte
@@ -20,6 +20,7 @@
 	import Button from '@gitbutler/ui/Button.svelte';
 	import EmptyStatePlaceholder from '@gitbutler/ui/EmptyStatePlaceholder.svelte';
 	import Spacer from '@gitbutler/ui/Spacer.svelte';
+	import { isError } from '@gitbutler/ui/utils/typeguards';
 	import lscache from 'lscache';
 	import { onMount } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
@@ -65,6 +66,7 @@
 		const branchPatches: DetailedCommit[] = [];
 
 		branch.series.map((series) => {
+			if (isError(series)) return;
 			upstreamPatches.push(...series.upstreamPatches);
 			branchPatches.push(...series.patches);
 			hasConflicts = branchPatches.some((patch) => patch.conflicted);

diff --git a/apps/desktop/src/lib/stack/header/SeriesLabels.svelte b/apps/desktop/src/lib/stack/header/SeriesLabels.svelte
@@ -13,7 +13,7 @@
 
 	const shiftedSeries = $derived(series.slice(1));
 	const seriesTypes = $derived(
-		shiftedSeries.map((s) => (s.patches[0] ? s.patches[0].status : 'local'))
+		shiftedSeries.map((s) => (s.patches?.[0] ? s.patches?.[0].status : 'local'))
 	);
 </script>
 

diff --git a/packages/ui/src/lib/utils/typeguards.ts b/packages/ui/src/lib/utils/typeguards.ts
@@ -21,3 +21,12 @@ export function isNonEmptyObject(something: unknown): something is UnknownObject
 		(Object.keys(something).length > 0 || Object.getOwnPropertySymbols(something).length > 0)
 	);
 }
+
+/**
+ * Checks if the provided object is an Error.
+ * @param value - The value to be checked.
+ * @returns A boolean indicating whether the value is an Error.
+ */
+export function isError(value: unknown): value is Error {
+	return value instanceof Error;
+}