Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ref-based-insertions #7474

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

ref-based-insertions #7474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
16b83c2
Make it possible to align the insertion with a specific reference.
Byron Feb 27, 2025
26fbee1
UI passes the name of the stack segment ref-name when creating new co…
Byron Feb 27, 2025
bc3ffb7
feat: allow commits in new empty stacked branch
ndom91 Feb 28, 2025
180f43c
fix: rm empty branch from branchCommitList component
ndom91 Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions apps/desktop/src/components/v3/Branch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import { combineResults } from '$lib/state/helpers';
import { inject } from '@gitbutler/shared/context';
import { goto } from '$app/navigation';
import EmptyBranch from './EmptyBranch.svelte';

Check failure on line 12 in apps/desktop/src/components/v3/Branch.svelte

View workflow job for this annotation

GitHub Actions / lint-node 

`./EmptyBranch.svelte` import should occur before import of `$components/ReduxResult.svelte`

interface Props {
projectId: string;
Expand Down Expand Up @@ -50,6 +51,9 @@
onclick={() => goto(branchPath(projectId, stackId, branch.name))}
/>
<BranchCommitList {projectId} {stackId} {branchName} {lastBranch} {selectedCommitId}>
{#snippet empty()}
<EmptyBranch {lastBranch} selected={branch.name === branchName} />
{/snippet}
{#snippet upstreamTemplate({ commit, commitKey, first, last: lastCommit, selected })}
<CommitRow
{projectId}
Expand Down
10 changes: 5 additions & 5 deletions apps/desktop/src/components/v3/BranchCommitList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script lang="ts">
import EmptyBranch from './EmptyBranch.svelte';
import ReduxResult from '$components/ReduxResult.svelte';
import { StackService } from '$lib/stacks/stackService.svelte';
import { combineResults } from '$lib/state/helpers';
Expand All @@ -13,6 +12,7 @@
stackId: string;
branchName: string;
lastBranch?: boolean;
selectedBranchName?: string;
selectedCommitId?: string;
upstreamTemplate?: Snippet<
[
Expand All @@ -28,16 +28,17 @@
localAndRemoteTemplate?: Snippet<
[{ commit: Commit; commitKey: CommitKey; first: boolean; last: boolean; selected: boolean }]
>;
empty?: Snippet;
}

let {
projectId,
stackId,
branchName,
lastBranch,
selectedCommitId,
localAndRemoteTemplate,
upstreamTemplate
upstreamTemplate,
empty
}: Props = $props();

const [stackService] = inject(StackService);
Expand All @@ -53,7 +54,7 @@
<ReduxResult result={combineResults(upstreamOnlyCommits, localAndRemoteCommits)}>
{#snippet children([upstreamOnlyCommits, localAndRemoteCommits])}
{#if !upstreamOnlyCommits.length && !localAndRemoteCommits.length}
<EmptyBranch {lastBranch} />
{@render empty?.()}
{:else}
<div class="commit-list">
{#if upstreamTemplate}
Expand Down Expand Up @@ -86,6 +87,5 @@
display: flex;
flex-direction: column;
border-radius: 0 0 var(--radius-ml) var(--radius-ml);
/* overflow: hidden; */
}
</style>
1 change: 1 addition & 0 deletions apps/desktop/src/components/v3/BranchHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@

<style lang="postcss">
.branch-header {
width: 100%;
position: relative;
display: flex;
align-items: center;
Expand Down
149 changes: 91 additions & 58 deletions apps/desktop/src/components/v3/CommitGoesHere.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
import BranchCommitList from './BranchCommitList.svelte';
import BranchHeader from './BranchHeader.svelte';
import CommitRow from './CommitRow.svelte';
import EmptyBranch from './EmptyBranch.svelte';
import ScrollableContainer from '../ScrollableContainer.svelte';
import ReduxResult from '$components/ReduxResult.svelte';
import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
import { createCommitPath } from '$lib/routes/routes.svelte';
Expand Down Expand Up @@ -35,82 +37,101 @@
</div>
</div>
{/snippet}
{#snippet commitHere(args: { commitId: string; last?: boolean })}

{#snippet commitHere(args: { commitId: string; last?: boolean; branchName: string })}
<button
class="commit-here"
type="button"
class:last={args.last}
onclick={() => goto(createCommitPath(projectId, stackId, branchName, args.commitId))}
onclick={() => goto(createCommitPath(projectId, stackId, args.branchName, args.commitId))}
>
<div class="commit-here__circle"></div>
<div class="commit-here__line"></div>
<div class="commit-here__label text-11 text-semibold">Commit here</div>
</button>
{/snippet}
<div class="commit-goes-here">
<ReduxResult result={branchesResult.current}>
{#snippet children(branches)}
{#each branches as branch, i}
{@const lastBranch = i === branches.length - 1}
<div class="branch" class:selected={branch.name === branchName}>
<div class="header-wrapper">
<BranchHeader

<ScrollableContainer>
<div class="commit-goes-here">
<ReduxResult result={branchesResult.current}>
{#snippet children(branches)}
{#each branches as branch, i}
{@const lastBranch = i === branches.length - 1}
<div class="branch" class:selected={branch.name === branchName}>
<div class="header-wrapper">
<BranchHeader
{projectId}
{stackId}
{branch}
onclick={() => {
goto(createCommitPath(projectId, stackId, branch.name), {
replaceState: true
});
}}
isTopBranch={i === 0}
lineColor="var(--clr-commit-local)"
readonly
/>
</div>
<BranchCommitList
{projectId}
{stackId}
{branch}
isTopBranch={i === 0}
lineColor="var(--clr-commit-local)"
readonly
/>
</div>
<BranchCommitList
{projectId}
{stackId}
branchName={branch.name}
selectedCommitId={parentId}
>
{#snippet localAndRemoteTemplate({ commit, commitKey, first, last, selected })}
{@const baseSha = $baseBranch?.baseSha}
{#if selected}
{@render indicator({ first })}
{/if}
<div class="commit-wrapper" class:last>
{#if !selected}
{@render commitHere({ commitId: commit.id })}
branchName={branch.name}
selectedBranchName={branchName}
selectedCommitId={parentId}
>
{@render indicator({ first: true })}
{#snippet empty()}
{#if branch.name !== branchName}
<EmptyBranch />
{:else}
{@render indicator({ first: true, last: true })}
{/if}
{/snippet}
{#snippet localAndRemoteTemplate({ commit, commitKey, first, last, selected })}
{@const baseSha = $baseBranch?.baseSha}
{#if selected && branchName === branch.name}
{@render indicator({ first })}
{/if}
<CommitRow
{projectId}
{commitKey}
{first}
{commit}
lastCommit={last}
lineColor="var(--clr-commit-local)"
opacity={0.4}
borderTop={selected}
onclick={() =>
goto(createCommitPath(projectId, stackId, branchName, commit.id), {
replaceState: true
})}
/>
{#if lastBranch && last && baseSha && parentId !== baseSha}
{@render commitHere({ commitId: baseSha, last: true })}
<div class="commit-wrapper" class:last>
{#if !selected}
{@render commitHere({ commitId: commit.id, branchName: branch.name })}
{/if}
<CommitRow
{projectId}
{commitKey}
{first}
{commit}
lastCommit={last}
lineColor="var(--clr-commit-local)"
opacity={0.4}
borderTop={selected}
onclick={() =>
goto(createCommitPath(projectId, stackId, branch.name, commit.id), {
replaceState: true
})}
/>
{#if lastBranch && last && baseSha && parentId !== baseSha}
{@render commitHere({ commitId: baseSha, last: true, branchName: branch.name })}
{/if}
</div>
{#if lastBranch && last && parentId === baseSha}
{@render indicator({ last: true })}
{/if}
</div>
{#if lastBranch && last && parentId === baseSha}
{@render indicator({ last: true })}
{/if}
{/snippet}
</BranchCommitList>
</div>
{/each}
{/snippet}
</ReduxResult>
</div>
{/snippet}
</BranchCommitList>
</div>
{/each}
{/snippet}
</ReduxResult>
</div>
</ScrollableContainer>

<style lang="postcss">
.commit-goes-here {
display: flex;
flex-direction: column;
margin-bottom: 14px;
}

.branch {
Expand All @@ -124,6 +145,11 @@
background-color: var(--clr-bg-1);
}
}

.branch .empty-branch-commit-here .indicator {
border-radius: 0 0 var(--radius-l) var(--radius-l);
}

.header-wrapper {
opacity: 0.4;
}
Expand All @@ -142,6 +168,7 @@
}
&.last {
border-bottom: none;
border-radius: 0 0 var(--radius-l) var(--radius-l);
}
}
.pin {
Expand All @@ -168,11 +195,17 @@
display: flex;
width: 100%;
background-color: var(--clr-bg-2);
&.last {

/* Last commit row which does not have an "Your commit here" indicator after it */
&.last:not(:has(~ .indicator)) {
border-radius: 0 0 var(--radius-l) var(--radius-l);
}
}

.last .indicator {
border-radius: 0 0 var(--radius-l) var(--radius-l);
}

/* COMMIT HERE */
.commit-here {
width: 100%;
Expand Down
8 changes: 6 additions & 2 deletions apps/desktop/src/components/v3/EmptyBranch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@

interface Props {
lastBranch?: boolean;
selected?: boolean;
}

const { lastBranch }: Props = $props();
const { lastBranch, selected }: Props = $props();
</script>

<div class="empty-series" style:--commit-color={getColorFromBranchType('LocalOnly')}>
<div class="commit-line" class:dashed={lastBranch}></div>
<div class="commit-line" class:selected class:dashed={lastBranch}></div>
<div class="text-13 text-body empty-series__label">
This is an empty branch.
<br />
Expand All @@ -34,4 +35,7 @@
position: absolute;
left: 20px;
}
:global(.commit-goes-here .empty-series .commit-line) {
opacity: 0.4;
}
</style>
32 changes: 29 additions & 3 deletions apps/desktop/src/components/v3/NewCommit.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,10 @@
};
const { projectId, stackId, branchName, commitId }: Props = $props();

const baseBranchService = getContext(BaseBranchService);
const stackService = getContext(StackService);
const branchesResult = $derived(stackService.branches(projectId, stackId).current);
const branches = $derived(branchesResult.data);
const baseBranchService = getContext(BaseBranchService);
const base = $derived(baseBranchService.base);

const changeSelection = getContext(ChangeSelectionService);
Expand All @@ -39,7 +41,30 @@

const baseSha = $derived($base?.baseSha);
const defaultParentId = $derived(commit ? commit.id : baseSha);
const parentId = $derived(commitId ? commitId : defaultParentId);

const parentId = $derived.by(() => {
// If commitId is explicitly provided, use it
if (commitId) return commitId;

// Try to find parent based on branch position in stack
if (branches?.length) {
const currentBranchIndex = branches.findIndex((b) => b.name === branchName);

// If this branch has a "parent" branch in the stack
if (currentBranchIndex >= 0 && currentBranchIndex < branches.length - 1) {
const parentBranch = branches[currentBranchIndex + 1];
if (parentBranch?.name) {
const parentCommit = stackService.commitAt(projectId, stackId, parentBranch.name, 0)
.current.data;

if (parentCommit?.id) return parentCommit.id;
}
}
}
Comment on lines +49 to +63
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if I'm reading correctly, but would this work if there are two empty branches, and you want to commit to the top one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No you're right, it wouldn't. First thing that comes to mind, we could while loop down the branches until we find the first branch with a commit that will act as parent.

Alternatively, it might be easier to have an API that returns something like StackBranch with an array of commits with basic metadata on it already, what do you think @mtsgrd @krlvi ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In theory we could have any number of empty branches in between the one you're committing to and a previous commit (or base), so I'd prefer to avoid the looping altogether by making the API capable of committing directly to a branch without specifying the parent commit. Let's chat in person during once Kiril is in the office.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the API already takes a branch name that is currently used to insert into the correct 'bucket'. From there the parent commit could trivially be extracted.

A branch name will always be known, but it won't have to necessarily be pointing to a commit within the stack that the user sees. The V3 workspace information can represent such cases, but for now it should be sufficient if the UI passes the name it knows, or the parent commit, or both, the backend should be able to deal with it.


// Fall back to default (either current commit or base SHA)
return defaultParentId;
});

/**
* At the moment this code can only commit to the tip of the stack.
Expand Down Expand Up @@ -69,6 +94,7 @@
stackId,
parentId,
message: message,
stackSegmentShortName: branchName,
worktreeChanges: selection.map((item) =>
item.type === 'full'
? {
Expand Down Expand Up @@ -120,7 +146,7 @@
background: var(--clr-bg-1);
}
.right {
width: 300px;
width: 310px;
background-image: radial-gradient(
oklch(from var(--clr-scale-ntrl-50) l c h / 0.5) 0.6px,
#ffffff00 0.6px
Expand Down
1 change: 1 addition & 0 deletions apps/desktop/src/lib/stacks/stackService.svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ type CreateCommitRequest = {
stackId: string;
message: string;
parentId: string;
stackSegmentShortName: string;
worktreeChanges: {
previousPathBytes?: number[];
pathBytes: number[];
Expand Down
Loading
Loading