add track command

src/command-registry.ts

@@ -1,4 +1,5 @@
 import BranchNew, { branchNewConfig } from './commands/branch/new.js';
+import BranchTrack, { branchTrackConfig } from './commands/branch/track.js';
 import ChangesAdd, { changesAddConfig } from './commands/changes/add.js';
 import ChangesCommit, {
     changesCommitConfig,
@@ -50,6 +51,10 @@ export const REGISTERED_COMMANDS: CommandGroup = {
             component: BranchNew,
             config: branchNewConfig,
         },
+        track: {
+            component: BranchTrack,
+            config: branchTrackConfig,
+        },
     } as CommandGroup,
 } as const;
 

src/commands/branch/new.test.tsx

@@ -1,11 +1,11 @@
 import BranchNew from './new.js';
 import React from 'react';
 import { Loading } from '../../components/loading.js';
 import { Text } from 'ink';
 import { delay } from '../../utils/time.js';
 import { describe, expect, it, vi } from 'vitest';
 import { render } from 'ink-testing-library';
 import { safeBranchNameFromCommitMessage } from '../../utils/naming.js';
 
 const ARBITRARY_DELAY = 120; // ms
 
@@ -23,6 +23,14 @@
                         setTimeout(() => resolve('root'), ARBITRARY_DELAY / 4)
                     );
                 },
+                listBranches: async () => {
+                    return new Promise((resolve) =>
+                        setTimeout(
+                            () => resolve(['root', 'branch']),
+                            ARBITRARY_DELAY / 4
+                        )
+                    );
+                },
                 createBranch: async () => {
                     return new Promise((resolve) =>
                         setTimeout(resolve, ARBITRARY_DELAY / 4)

src/commands/branch/track.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { CommandConfig, CommandProps } from '../../types.js';
+import { Loading } from '../../components/loading.js';
+import { SearchSelectInput } from '../../components/select-search-input.js';
+import { SelectRootBranch } from '../../components/select-root-branch.js';
+import { Text } from 'ink';
+import { useGitHelpers } from '../../hooks/use-git-helpers.js';
+import { useTree } from '../../hooks/use-tree.js';
+
+function BranchTrack(_: CommandProps) {
+    const { allBranches, currentBranch } = useGitHelpers();
+    const { rootBranchName, isCurrentBranchTracked, attachTo, isLoading } =
+        useTree();
+
+    // either false or the name of the parent branch
+    const [complete, setComplete] = useState<false | string>(false);
+
+    const trackBranch = useCallback(
+        ({ parentBranch }: { parentBranch: string }) => {
+            if (currentBranch.isLoading) return;
+            attachTo({ newBranch: currentBranch.value, parent: parentBranch });
+            setComplete(parentBranch);
+        },
+        [attachTo, currentBranch.value, currentBranch.isLoading]
+    );
+
+    const branchItems = useMemo(() => {
+        if (allBranches.isLoading) return [];
+
+        return allBranches.value.map((b) => ({ label: b, value: b }));
+    }, [allBranches.value, allBranches.isLoading]);
+
+    if (isLoading || currentBranch.isLoading || allBranches.isLoading) {
+        return <Loading />;
+    }
+
+    if (!rootBranchName) {
+        return <SelectRootBranch />;
+    }
+
+    if (!isCurrentBranchTracked) {
+        return (
+            <Text>
+                <Text color="green" bold>
+                    {currentBranch.value}
+                </Text>{' '}
+                is already a tracked branch
+            </Text>
+        );
+    }
+
+    if (complete) {
+        return (
+            <Text>
+                <Text color="green" bold>
+                    {currentBranch.value}
+                </Text>{' '}
+                tracked with parent{' '}
+                <Text color="yellow" bold>
+                    {complete}
+                </Text>
+                !
+            </Text>
+        );
+    }
+
+    return (
+        <SearchSelectInput
+            title="Please select a parent branch"
+            items={branchItems}
+            onSelect={(item) => trackBranch({ parentBranch: item.value })}
+        />
+    );
+}
+
+export const branchTrackConfig: CommandConfig = {
+    description: 'Track a branch',
+    usage: 'branch track',
+    key: 'track',
+    aliases: ['t'],
+    getProps: (_) => {
+        return {
+            valid: true,
+            props: {},
+        };
+    },
+};
+
+export default BranchTrack;

src/commands/changes/commit.test.tsx

@@ -22,6 +22,14 @@ const mocks = vi.hoisted(() => {
                         setTimeout(() => resolve('root'), ARBITRARY_DELAY / 4)
                     );
                 },
+                listBranches: async () => {
+                    return new Promise((resolve) =>
+                        setTimeout(
+                            () => resolve(['root', 'branch']),
+                            ARBITRARY_DELAY / 4
+                        )
+                    );
+                },
                 createBranch: async () => {
                     return new Promise((resolve) =>
                         setTimeout(resolve, ARBITRARY_DELAY / 4)

src/components/select-root-branch.tsx

@@ -1,9 +1,10 @@
 import GumptionItemComponent from './gumption-item-component.js';
 import React, { useCallback, useMemo, useState } from 'react';
 import SelectInput from 'ink-select-input';
 import { Box, Text, useInput } from 'ink';
 import { ConfirmStatement } from './confirm-statement.js';
 import { Loading } from './loading.js';
+import { SearchSelectInput } from './select-search-input.js';
 import { useAsyncValue } from '../hooks/use-async-value.js';
 import { useGit } from '../hooks/use-git.js';
 import { useTree } from '../hooks/use-tree.js';
@@ -47,13 +48,7 @@
         if (!allBranches || isLoading) {
             return [];
         }
-
-        const filtered = allBranches.filter((b) =>
-            search.length > 0
-                ? b.toLowerCase().includes(search.toLowerCase())
-                : true
-        );
-        return filtered.map((b) => ({ label: b, value: b }));
+        return allBranches.map((b) => ({ label: b, value: b }));
     }, [search, allBranches]);
 
     if (rootBranchName) {
@@ -89,26 +84,10 @@
     }
 
     return (
-        <Box flexDirection="column">
-            <Text color="yellow">
-                Please select a root branch for Gumption before proceeding.
-            </Text>
-            <Text>
-                <Text italic={!search.length}>
-                    🔎&nbsp;
-                    {search.length ? search : '(type to search)'}
-                </Text>
-            </Text>
-            {items.length ? (
-                <SelectInput
-                    items={items}
-                    itemComponent={GumptionItemComponent}
-                    onSelect={handleSelect}
-                    limit={10}
-                />
-            ) : (
-                <Text italic>No results</Text>
-            )}
-        </Box>
+        <SearchSelectInput
+            title="Please select a root branch for Gumption before proceeding."
+            items={items}
+            onSelect={handleSelect}
+        />
     );
 };

src/components/select-search-input.tsx

@@ -0,0 +1,55 @@
+import GumptionItemComponent from './gumption-item-component.js';
+import React, { useMemo, useState } from 'react';
+import SelectInput from 'ink-select-input';
+import { Box, Text, useInput } from 'ink';
+
+export const SearchSelectInput = ({
+    title,
+    items,
+    onSelect,
+}: {
+    title: string;
+    items: { label: string; value: string }[];
+    onSelect: (args: { label: string; value: string }) => void;
+}) => {
+    const [search, setSearch] = useState('');
+
+    const filteredItems = useMemo(() => {
+        return items.filter((item) =>
+            search.length > 0
+                ? item.label.toLowerCase().includes(search.toLowerCase()) ||
+                  item.value.toLowerCase().includes(search.toLowerCase())
+                : true
+        );
+    }, [items, search]);
+
+    useInput((input, key) => {
+        if (key.backspace || key.delete) {
+            // remove final character
+            return setSearch((prev) => prev.slice(0, -1));
+        }
+        setSearch((prev) => `${prev}${input}`);
+    });
+
+    return (
+        <Box flexDirection="column">
+            <Text color="yellow">{title}</Text>
+            <Text>
+                <Text italic={!search.length}>
+                    🔎&nbsp;
+                    {search.length ? search : '(type to search)'}
+                </Text>
+            </Text>
+            {filteredItems.length ? (
+                <SelectInput
+                    items={filteredItems}
+                    itemComponent={GumptionItemComponent}
+                    onSelect={(item) => onSelect(item)}
+                    limit={10}
+                />
+            ) : (
+                <Text italic>No results</Text>
+            )}
+        </Box>
+    );
+};

src/hooks/use-git-helpers.ts

@@ -5,6 +5,7 @@ import { useGit } from './use-git.js';
 
 interface UseGitHelpersResult {
     currentBranch: AsyncResult<string>;
+    allBranches: AsyncResult<string[]>;
 }
 
 export const useGitHelpers = (): UseGitHelpersResult => {
@@ -18,7 +19,16 @@ export const useGitHelpers = (): UseGitHelpersResult => {
         getValue: getCurrentBranch,
     });
 
+    const getBranches = useCallback(async () => {
+        return git.listBranches();
+    }, [git.listBranches]);
+
+    const allBranchesResult = useAsyncValue({
+        getValue: getBranches,
+    });
+
     return {
         currentBranch: currentBranchResult,
+        allBranches: allBranchesResult,
     };
 };

src/services/git.ts

@@ -11,6 +11,7 @@ export interface GitService {
     _git: SimpleGit;
     branchLocal: () => Promise<ReturnType<SimpleGit['branchLocal']>>;
     currentBranch: () => Promise<string>;
+    listBranches: () => Promise<string[]>;
     checkout: (branch: string) => Promise<ReturnType<SimpleGit['checkout']>>;
     addAllFiles: () => Promise<void>;
     commit: (args: { message: string }) => Promise<void>;
@@ -33,6 +34,10 @@ export const createGitService = ({
             const { current } = await gitEngine.branchLocal();
             return current;
         },
+        listBranches: async () => {
+            const { all } = await gitEngine.branchLocal();
+            return all;
+        },
         // @ts-expect-error - being weird about the return type
         checkout: async (branch: string) => {
             return gitEngine.checkout(branch);