feat: clone GitHub repo into a workspace (#1331)
* feat: clone GitHub repo into a workspace Add an end-to-end "clone a GitHub repo and register it as a Paseo workspace" flow: a new workspace.github.clone RPC, daemon handler, client method, CLI `paseo clone` command, and a GitHub-repo mode in the project picker modal. Gated behind the workspaceGithubClone server capability flag. - protocol: workspace.github.clone request/response schemas + feature flag - server: handleWorkspaceGithubCloneRequest, normalizeCloneRepository - client: DaemonClient.cloneGithubWorkspace - cli: `paseo clone <repo> --dir <path> [--protocol https|ssh]` - app: GitHub-repo mode, clone-protocol picker, error surfacing Review fixes: - CLI clone now checks the workspaceGithubClone capability and fails fast with a clear "update the host" error instead of hanging for the full request timeout against an older daemon. - Replace the duplicated client-side URL-detection regex (app + CLI) with a shared isCompleteGitRemote() in @getpaseo/protocol/git-remote, backed by parseGitRemoteLocation so clients classify remotes identically to the daemon (fixes confusing errors for git://, ftp://, file:// inputs). - Add git-remote.test.ts covering the shared classifier. * Fix GitHub clone failure handling --------- Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>
This commit is contained in:
Matt Cowger
co-authored by
Mohamed Boudra
Mohamed Boudra
parent
bac302626f
commit
218097b7cc
@@ -1,4 +1,13 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type Dispatch,
|
||||
type RefObject,
|
||||
type SetStateAction,
|
||||
} from "react";
|
||||
import {
|
||||
Modal,
|
||||
Pressable,
|
||||
@@ -12,18 +21,29 @@ import {
|
||||
} from "react-native";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Folder } from "lucide-react-native";
|
||||
import { Folder, Github } from "lucide-react-native";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
import { getOpenProjectFailureReason, type OpenProjectFailureReason } from "@/hooks/open-project";
|
||||
import { useOpenProject } from "@/hooks/use-open-project";
|
||||
import {
|
||||
getOpenProjectFailureReason,
|
||||
type OpenProjectFailureReason,
|
||||
type WorkspaceGithubCloneProtocol,
|
||||
} from "@/hooks/open-project";
|
||||
import { useOpenGithubRepo, useOpenProject } from "@/hooks/use-open-project";
|
||||
import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
|
||||
import { useProjectPickerStore } from "@/stores/project-picker-store";
|
||||
import { useRecommendedProjectPaths } from "@/stores/session-store-hooks";
|
||||
import { shortenPath } from "@/utils/shorten-path";
|
||||
import { isNative } from "@/constants/platform";
|
||||
import { ProjectPickerBrowseButton } from "./project-picker-browse-button";
|
||||
import { isCompleteGitRemote } from "@getpaseo/protocol/git-remote";
|
||||
import { buildProjectPickerOptions, type ProjectPickerOption } from "./project-picker-options";
|
||||
|
||||
type ProjectPickerMode = "local" | "github";
|
||||
|
||||
const DEFAULT_CLONE_TARGET_DIRECTORY = "~/workspace";
|
||||
const CLONE_REPO_ERROR_MESSAGE = "Unable to clone that GitHub repository.";
|
||||
const CLONE_PROTOCOL_ERROR_MESSAGE = "Choose HTTPS or SSH for owner/repo repository names.";
|
||||
|
||||
interface PathRowProps {
|
||||
option: ProjectPickerOption;
|
||||
active: boolean;
|
||||
@@ -133,6 +153,255 @@ function ProjectPickerResults({
|
||||
);
|
||||
}
|
||||
|
||||
interface CloneProtocolButtonProps {
|
||||
label: string;
|
||||
active: boolean;
|
||||
onPress: () => void;
|
||||
}
|
||||
|
||||
function CloneProtocolButton({ label, active, onPress }: CloneProtocolButtonProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const buttonStyle = useMemo(
|
||||
() => [
|
||||
styles.protocolButton,
|
||||
{
|
||||
borderColor: theme.colors.border,
|
||||
backgroundColor: active ? theme.colors.surface1 : "transparent",
|
||||
},
|
||||
],
|
||||
[active, theme.colors.border, theme.colors.surface1],
|
||||
);
|
||||
const textStyle = useMemo(
|
||||
() => [
|
||||
styles.protocolButtonText,
|
||||
{ color: active ? theme.colors.foreground : theme.colors.foregroundMuted },
|
||||
],
|
||||
[active, theme.colors.foreground, theme.colors.foregroundMuted],
|
||||
);
|
||||
return (
|
||||
<Pressable style={buttonStyle} onPress={onPress} accessibilityRole="button">
|
||||
<Text style={textStyle}>{label}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
interface GithubRepoFormProps {
|
||||
repo: string;
|
||||
cloneProtocol: WorkspaceGithubCloneProtocol | null;
|
||||
targetDirectory: string;
|
||||
needsCloneProtocol: boolean;
|
||||
isSubmitting: boolean;
|
||||
repoInputRef: RefObject<TextInput | null>;
|
||||
onChangeRepo: (text: string) => void;
|
||||
onChangeTargetDirectory: (text: string) => void;
|
||||
onSelectHttps: () => void;
|
||||
onSelectSsh: () => void;
|
||||
onSubmit: () => void;
|
||||
}
|
||||
|
||||
function GithubRepoForm({
|
||||
repo,
|
||||
cloneProtocol,
|
||||
targetDirectory,
|
||||
needsCloneProtocol,
|
||||
isSubmitting,
|
||||
repoInputRef,
|
||||
onChangeRepo,
|
||||
onChangeTargetDirectory,
|
||||
onSelectHttps,
|
||||
onSelectSsh,
|
||||
onSubmit,
|
||||
}: GithubRepoFormProps) {
|
||||
const { theme } = useUnistyles();
|
||||
const inputStyle = useMemo(
|
||||
() => [styles.input, { color: theme.colors.foreground }],
|
||||
[theme.colors.foreground],
|
||||
);
|
||||
const labelStyle = useMemo(
|
||||
() => [styles.label, { color: theme.colors.foregroundMuted }],
|
||||
[theme.colors.foregroundMuted],
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.githubForm}>
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={labelStyle}>GitHub repo</Text>
|
||||
<TextInput
|
||||
ref={repoInputRef}
|
||||
value={repo}
|
||||
onChangeText={onChangeRepo}
|
||||
placeholder="owner/repo"
|
||||
placeholderTextColor={theme.colors.foregroundMuted}
|
||||
style={inputStyle}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
editable={!isSubmitting}
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
{needsCloneProtocol ? (
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={labelStyle}>Clone protocol</Text>
|
||||
<View style={styles.protocolRow}>
|
||||
<CloneProtocolButton
|
||||
label="HTTPS"
|
||||
active={cloneProtocol === "https"}
|
||||
onPress={onSelectHttps}
|
||||
/>
|
||||
<CloneProtocolButton
|
||||
label="SSH"
|
||||
active={cloneProtocol === "ssh"}
|
||||
onPress={onSelectSsh}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={labelStyle}>Checkout directory</Text>
|
||||
<TextInput
|
||||
value={targetDirectory}
|
||||
onChangeText={onChangeTargetDirectory}
|
||||
placeholder={DEFAULT_CLONE_TARGET_DIRECTORY}
|
||||
placeholderTextColor={theme.colors.foregroundMuted}
|
||||
style={inputStyle}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
editable={!isSubmitting}
|
||||
returnKeyType="go"
|
||||
onSubmitEditing={onSubmit}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProjectPickerKeyboardNavigationInput {
|
||||
open: boolean;
|
||||
mode: ProjectPickerMode;
|
||||
optionsLength: number;
|
||||
onClose: () => void;
|
||||
setActiveIndex: Dispatch<SetStateAction<number>>;
|
||||
}
|
||||
|
||||
function useProjectPickerKeyboardNavigation({
|
||||
open,
|
||||
mode,
|
||||
optionsLength,
|
||||
onClose,
|
||||
setActiveIndex,
|
||||
}: ProjectPickerKeyboardNavigationInput) {
|
||||
useEffect(() => {
|
||||
if (!open || isNative) return;
|
||||
|
||||
function handler(event: KeyboardEvent) {
|
||||
const key = event.key;
|
||||
if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Escape") return;
|
||||
|
||||
if (key === "Escape") {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode !== "local" || optionsLength === 0) return;
|
||||
event.preventDefault();
|
||||
setActiveIndex((current) => {
|
||||
const delta = key === "ArrowDown" ? 1 : -1;
|
||||
const next = current + delta;
|
||||
if (next < 0) return optionsLength - 1;
|
||||
if (next >= optionsLength) return 0;
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handler, true);
|
||||
return () => window.removeEventListener("keydown", handler, true);
|
||||
}, [mode, onClose, open, optionsLength, setActiveIndex]);
|
||||
}
|
||||
|
||||
interface GithubCloneModeInput {
|
||||
client: ReturnType<typeof useHostRuntimeClient>;
|
||||
serverId: string | null;
|
||||
openGithubRepo: ReturnType<typeof useOpenGithubRepo>;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
function useGithubCloneMode({ client, serverId, openGithubRepo, close }: GithubCloneModeInput) {
|
||||
const [repo, setRepo] = useState("");
|
||||
const [cloneProtocol, setCloneProtocol] = useState<WorkspaceGithubCloneProtocol | null>(null);
|
||||
const [targetDirectory, setTargetDirectory] = useState(DEFAULT_CLONE_TARGET_DIRECTORY);
|
||||
const [cloneErrorText, setCloneErrorText] = useState<string | null>(null);
|
||||
const needsCloneProtocol = repo.trim().length > 0 && !isCompleteGitRemote(repo);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setRepo("");
|
||||
setCloneProtocol(null);
|
||||
setTargetDirectory(DEFAULT_CLONE_TARGET_DIRECTORY);
|
||||
setCloneErrorText(null);
|
||||
}, []);
|
||||
|
||||
const handleChangeRepo = useCallback((text: string) => {
|
||||
setRepo(text);
|
||||
if (isCompleteGitRemote(text)) {
|
||||
setCloneProtocol(null);
|
||||
}
|
||||
setCloneErrorText(null);
|
||||
}, []);
|
||||
|
||||
const handleChangeTargetDirectory = useCallback((text: string) => {
|
||||
setTargetDirectory(text);
|
||||
setCloneErrorText(null);
|
||||
}, []);
|
||||
|
||||
const handleSetHttpsProtocol = useCallback(() => {
|
||||
setCloneProtocol("https");
|
||||
setCloneErrorText(null);
|
||||
}, []);
|
||||
|
||||
const handleSetSshProtocol = useCallback(() => {
|
||||
setCloneProtocol("ssh");
|
||||
setCloneErrorText(null);
|
||||
}, []);
|
||||
|
||||
const handleCloneRepo = useCallback(async () => {
|
||||
const trimmedRepo = repo.trim();
|
||||
const trimmedTargetDirectory = targetDirectory.trim();
|
||||
if (!trimmedRepo || !trimmedTargetDirectory || !client || !serverId) return false;
|
||||
const repoIsCompleteRemote = isCompleteGitRemote(trimmedRepo);
|
||||
if (!repoIsCompleteRemote && !cloneProtocol) {
|
||||
setCloneErrorText(CLONE_PROTOCOL_ERROR_MESSAGE);
|
||||
return false;
|
||||
}
|
||||
|
||||
setCloneErrorText(null);
|
||||
const didOpenProject = await openGithubRepo(
|
||||
trimmedRepo,
|
||||
trimmedTargetDirectory,
|
||||
repoIsCompleteRemote ? undefined : (cloneProtocol ?? undefined),
|
||||
);
|
||||
if (!didOpenProject) {
|
||||
setCloneErrorText(CLONE_REPO_ERROR_MESSAGE);
|
||||
return false;
|
||||
}
|
||||
close();
|
||||
return true;
|
||||
}, [client, cloneProtocol, close, openGithubRepo, repo, serverId, targetDirectory]);
|
||||
|
||||
return {
|
||||
repo,
|
||||
cloneProtocol,
|
||||
targetDirectory,
|
||||
cloneErrorText,
|
||||
needsCloneProtocol,
|
||||
reset,
|
||||
handleChangeRepo,
|
||||
handleChangeTargetDirectory,
|
||||
handleSetHttpsProtocol,
|
||||
handleSetSshProtocol,
|
||||
handleCloneRepo,
|
||||
};
|
||||
}
|
||||
|
||||
export function ProjectPickerModal() {
|
||||
const { theme } = useUnistyles();
|
||||
const { t } = useTranslation();
|
||||
@@ -146,12 +415,30 @@ export function ProjectPickerModal() {
|
||||
const recommendedPaths = useRecommendedProjectPaths(serverId);
|
||||
|
||||
const inputRef = useRef<TextInput>(null);
|
||||
const repoInputRef = useRef<TextInput>(null);
|
||||
const [mode, setMode] = useState<ProjectPickerMode>("local");
|
||||
const [query, setQuery] = useState("");
|
||||
const [debouncedQuery, setDebouncedQuery] = useState("");
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [openErrorReason, setOpenErrorReason] = useState<OpenProjectFailureReason | null>(null);
|
||||
const openProject = useOpenProject(serverId);
|
||||
const openGithubRepo = useOpenGithubRepo(serverId);
|
||||
const supportsGithubClone =
|
||||
client?.getLastServerInfoMessage()?.features?.workspaceGithubClone === true;
|
||||
const {
|
||||
repo,
|
||||
cloneProtocol,
|
||||
targetDirectory,
|
||||
cloneErrorText,
|
||||
needsCloneProtocol,
|
||||
reset: resetGithubCloneMode,
|
||||
handleChangeRepo,
|
||||
handleChangeTargetDirectory,
|
||||
handleSetHttpsProtocol,
|
||||
handleSetSshProtocol,
|
||||
handleCloneRepo: cloneGithubRepo,
|
||||
} = useGithubCloneMode({ client, serverId, openGithubRepo, close });
|
||||
|
||||
const directorySuggestionsQuery = useQuery({
|
||||
queryKey: ["project-picker-directory-suggestions", serverId, debouncedQuery],
|
||||
@@ -172,7 +459,7 @@ export function ProjectPickerModal() {
|
||||
[],
|
||||
};
|
||||
},
|
||||
enabled: Boolean(client) && isConnected && open,
|
||||
enabled: Boolean(client) && isConnected && open && mode === "local",
|
||||
staleTime: 15_000,
|
||||
retry: false,
|
||||
});
|
||||
@@ -228,11 +515,24 @@ export function ProjectPickerModal() {
|
||||
[client, close, openProject, serverId],
|
||||
);
|
||||
|
||||
const handleCloneRepo = useCallback(async () => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await cloneGithubRepo();
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [cloneGithubRepo]);
|
||||
|
||||
const submitActiveOption = useCallback(() => {
|
||||
if (mode === "github") {
|
||||
void handleCloneRepo();
|
||||
return;
|
||||
}
|
||||
const option = options[activeIndex];
|
||||
if (!option) return;
|
||||
void handleSelectPath(option.path);
|
||||
}, [activeIndex, handleSelectPath, options]);
|
||||
}, [activeIndex, handleCloneRepo, handleSelectPath, mode, options]);
|
||||
|
||||
const handleChangeQuery = useCallback((text: string) => {
|
||||
setQuery(text);
|
||||
@@ -244,16 +544,41 @@ export function ProjectPickerModal() {
|
||||
setOpenErrorReason("open_failed");
|
||||
}, []);
|
||||
|
||||
const handleSetLocalMode = useCallback(() => {
|
||||
setMode("local");
|
||||
setActiveIndex(0);
|
||||
}, []);
|
||||
|
||||
const handleSetGithubMode = useCallback(() => {
|
||||
setMode("github");
|
||||
setActiveIndex(0);
|
||||
setOpenErrorReason(null);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setMode("local");
|
||||
setQuery("");
|
||||
setDebouncedQuery("");
|
||||
resetGithubCloneMode();
|
||||
setActiveIndex(0);
|
||||
setOpenErrorReason(null);
|
||||
const id = setTimeout(() => inputRef.current?.focus(), 0);
|
||||
return () => clearTimeout(id);
|
||||
}
|
||||
}, [open]);
|
||||
}, [open, resetGithubCloneMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const id = setTimeout(() => {
|
||||
if (mode === "github") {
|
||||
repoInputRef.current?.focus();
|
||||
return;
|
||||
}
|
||||
inputRef.current?.focus();
|
||||
}, 0);
|
||||
return () => clearTimeout(id);
|
||||
}, [mode, open]);
|
||||
|
||||
// Debounce the query that drives the (potentially multi-second) directory
|
||||
// suggestions RPC so fast typing doesn't fire a filesystem scan per keystroke.
|
||||
@@ -263,41 +588,19 @@ export function ProjectPickerModal() {
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (!open || mode !== "local") return;
|
||||
if (activeIndex >= options.length) {
|
||||
setActiveIndex(options.length > 0 ? options.length - 1 : 0);
|
||||
}
|
||||
}, [activeIndex, options.length, open]);
|
||||
}, [activeIndex, mode, options.length, open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || isNative) return;
|
||||
|
||||
function handler(event: KeyboardEvent) {
|
||||
const key = event.key;
|
||||
if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Escape") return;
|
||||
|
||||
if (key === "Escape") {
|
||||
event.preventDefault();
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === "ArrowDown" || key === "ArrowUp") {
|
||||
if (options.length === 0) return;
|
||||
event.preventDefault();
|
||||
setActiveIndex((current) => {
|
||||
const delta = key === "ArrowDown" ? 1 : -1;
|
||||
const next = current + delta;
|
||||
if (next < 0) return options.length - 1;
|
||||
if (next >= options.length) return 0;
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handler, true);
|
||||
return () => window.removeEventListener("keydown", handler, true);
|
||||
}, [close, open, options.length]);
|
||||
useProjectPickerKeyboardNavigation({
|
||||
open,
|
||||
mode,
|
||||
optionsLength: options.length,
|
||||
onClose: close,
|
||||
setActiveIndex,
|
||||
});
|
||||
|
||||
const panelStyle = useMemo(
|
||||
() => [
|
||||
@@ -325,6 +628,27 @@ export function ProjectPickerModal() {
|
||||
() => [styles.emptyText, { color: theme.colors.destructive }],
|
||||
[theme.colors.destructive],
|
||||
);
|
||||
const cloneErrorTextStyle = useMemo(
|
||||
() => [styles.errorText, { color: theme.colors.destructive }],
|
||||
[theme.colors.destructive],
|
||||
);
|
||||
const modeButtonStyle = useCallback(
|
||||
(buttonMode: ProjectPickerMode) => [
|
||||
styles.modeButton,
|
||||
{
|
||||
borderColor: theme.colors.border,
|
||||
backgroundColor: mode === buttonMode ? theme.colors.surface1 : "transparent",
|
||||
},
|
||||
],
|
||||
[mode, theme.colors.border, theme.colors.surface1],
|
||||
);
|
||||
const modeButtonTextStyle = useCallback(
|
||||
(buttonMode: ProjectPickerMode) => [
|
||||
styles.modeButtonText,
|
||||
{ color: mode === buttonMode ? theme.colors.foreground : theme.colors.foregroundMuted },
|
||||
],
|
||||
[mode, theme.colors.foreground, theme.colors.foregroundMuted],
|
||||
);
|
||||
|
||||
if (!serverId) return null;
|
||||
|
||||
@@ -335,40 +659,83 @@ export function ProjectPickerModal() {
|
||||
|
||||
<View style={panelStyle}>
|
||||
<View style={headerStyle}>
|
||||
<TextInput
|
||||
testID="project-picker-input"
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChangeText={handleChangeQuery}
|
||||
placeholder={t("projectPicker.placeholder")}
|
||||
placeholderTextColor={theme.colors.foregroundMuted}
|
||||
style={inputStyle}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
autoFocus
|
||||
editable={!isSubmitting}
|
||||
returnKeyType="go"
|
||||
onSubmitEditing={submitActiveOption}
|
||||
/>
|
||||
<ProjectPickerBrowseButton
|
||||
serverId={serverId}
|
||||
disabled={isSubmitting}
|
||||
onSelect={handleSelectPath}
|
||||
onError={handleBrowseError}
|
||||
/>
|
||||
<View style={styles.modeRow}>
|
||||
<Pressable style={modeButtonStyle("local")} onPress={handleSetLocalMode}>
|
||||
<Folder size={15} color={theme.colors.foregroundMuted} />
|
||||
<Text style={modeButtonTextStyle("local")}>Local folder</Text>
|
||||
</Pressable>
|
||||
{supportsGithubClone ? (
|
||||
<Pressable style={modeButtonStyle("github")} onPress={handleSetGithubMode}>
|
||||
<Github size={15} color={theme.colors.foregroundMuted} />
|
||||
<Text style={modeButtonTextStyle("github")}>GitHub repo</Text>
|
||||
</Pressable>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
{mode === "local" ? (
|
||||
<View style={styles.localInputRow}>
|
||||
<TextInput
|
||||
testID="project-picker-input"
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChangeText={handleChangeQuery}
|
||||
placeholder={t("projectPicker.placeholder")}
|
||||
placeholderTextColor={theme.colors.foregroundMuted}
|
||||
style={inputStyle}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
autoFocus
|
||||
editable={!isSubmitting}
|
||||
returnKeyType="go"
|
||||
onSubmitEditing={submitActiveOption}
|
||||
/>
|
||||
<ProjectPickerBrowseButton
|
||||
serverId={serverId}
|
||||
disabled={isSubmitting}
|
||||
onSelect={handleSelectPath}
|
||||
onError={handleBrowseError}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<GithubRepoForm
|
||||
repo={repo}
|
||||
cloneProtocol={cloneProtocol}
|
||||
targetDirectory={targetDirectory}
|
||||
needsCloneProtocol={needsCloneProtocol}
|
||||
isSubmitting={isSubmitting}
|
||||
repoInputRef={repoInputRef}
|
||||
onChangeRepo={handleChangeRepo}
|
||||
onChangeTargetDirectory={handleChangeTargetDirectory}
|
||||
onSelectHttps={handleSetHttpsProtocol}
|
||||
onSelectSsh={handleSetSshProtocol}
|
||||
onSubmit={handleCloneRepo}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<ProjectPickerResults
|
||||
options={options}
|
||||
activeIndex={activeIndex}
|
||||
isSubmitting={isSubmitting}
|
||||
openErrorMessage={openErrorMessage}
|
||||
hasQuery={hasQuery}
|
||||
isSearching={isSearching}
|
||||
emptyTextStyle={emptyTextStyle}
|
||||
errorTextStyle={errorTextStyle}
|
||||
onSelect={handleSelectPath}
|
||||
/>
|
||||
{mode === "local" ? (
|
||||
<ProjectPickerResults
|
||||
options={options}
|
||||
activeIndex={activeIndex}
|
||||
isSubmitting={isSubmitting}
|
||||
openErrorMessage={openErrorMessage}
|
||||
hasQuery={hasQuery}
|
||||
isSearching={isSearching}
|
||||
emptyTextStyle={emptyTextStyle}
|
||||
errorTextStyle={errorTextStyle}
|
||||
onSelect={handleSelectPath}
|
||||
/>
|
||||
) : (
|
||||
<ScrollView
|
||||
style={styles.results}
|
||||
contentContainerStyle={styles.resultsContent}
|
||||
keyboardShouldPersistTaps="always"
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{cloneErrorText ? <Text style={cloneErrorTextStyle}>{cloneErrorText}</Text> : null}
|
||||
{isSubmitting ? <Text style={emptyTextStyle}>Cloning repository...</Text> : null}
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
@@ -396,12 +763,58 @@ const styles = StyleSheet.create((theme) => ({
|
||||
...theme.shadow.lg,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[3],
|
||||
paddingHorizontal: theme.spacing[4],
|
||||
paddingVertical: theme.spacing[3],
|
||||
borderBottomWidth: 1,
|
||||
gap: theme.spacing[3],
|
||||
},
|
||||
localInputRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[3],
|
||||
},
|
||||
modeRow: {
|
||||
flexDirection: "row",
|
||||
gap: theme.spacing[2],
|
||||
},
|
||||
modeButton: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: theme.spacing[2],
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
paddingVertical: theme.spacing[2],
|
||||
borderRadius: theme.borderRadius.md,
|
||||
borderWidth: 1,
|
||||
},
|
||||
modeButtonText: {
|
||||
fontSize: theme.fontSize.sm,
|
||||
fontWeight: "600",
|
||||
},
|
||||
githubForm: {
|
||||
gap: theme.spacing[3],
|
||||
},
|
||||
fieldGroup: {
|
||||
gap: theme.spacing[1],
|
||||
},
|
||||
label: {
|
||||
fontSize: theme.fontSize.xs,
|
||||
fontWeight: "600",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: 0,
|
||||
},
|
||||
protocolRow: {
|
||||
flexDirection: "row",
|
||||
gap: theme.spacing[2],
|
||||
},
|
||||
protocolButton: {
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
paddingVertical: theme.spacing[2],
|
||||
borderRadius: theme.borderRadius.md,
|
||||
borderWidth: 1,
|
||||
},
|
||||
protocolButtonText: {
|
||||
fontSize: theme.fontSize.sm,
|
||||
fontWeight: "600",
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
@@ -446,4 +859,11 @@ const styles = StyleSheet.create((theme) => ({
|
||||
paddingVertical: theme.spacing[4],
|
||||
fontSize: theme.fontSize.base,
|
||||
},
|
||||
errorText: {
|
||||
paddingHorizontal: theme.spacing[4],
|
||||
paddingTop: theme.spacing[3],
|
||||
paddingBottom: theme.spacing[1],
|
||||
fontSize: theme.fontSize.sm,
|
||||
fontWeight: "600",
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
|
||||
import type { ProjectAddResponse } from "@getpaseo/protocol/messages";
|
||||
import type { ProjectAddResponse, WorkspaceGithubCloneProtocol } from "@getpaseo/protocol/messages";
|
||||
import {
|
||||
normalizeEmptyProjectDescriptor as normalizeProjectWithoutWorkspacesDescriptor,
|
||||
normalizeWorkspaceDescriptor,
|
||||
type EmptyProjectDescriptor as ProjectWithoutWorkspacesDescriptor,
|
||||
type WorkspaceDescriptor,
|
||||
} from "@/stores/session-store";
|
||||
import { buildWorkspaceTabPersistenceKey } from "@/stores/workspace-tabs-store";
|
||||
|
||||
type OpenProjectPayload = ProjectAddResponse["payload"];
|
||||
type OpenProjectErrorCode = NonNullable<OpenProjectPayload["errorCode"]>;
|
||||
type WorkspaceOpenPayload =
|
||||
| Awaited<ReturnType<DaemonClient["openProject"]>>
|
||||
| Awaited<ReturnType<DaemonClient["cloneGithubWorkspace"]>>;
|
||||
|
||||
export interface OpenProjectSuccess {
|
||||
ok: true;
|
||||
@@ -20,6 +26,7 @@ export interface OpenProjectFailure {
|
||||
|
||||
export type OpenProjectResult = OpenProjectSuccess | OpenProjectFailure;
|
||||
export type OpenProjectFailureReason = "directory_not_found" | "open_failed";
|
||||
export type { WorkspaceGithubCloneProtocol };
|
||||
|
||||
export function getOpenProjectFailureReason(
|
||||
result: OpenProjectResult,
|
||||
@@ -45,6 +52,22 @@ export interface OpenProjectDirectlyInput {
|
||||
setHasHydratedWorkspaces: (serverId: string, hydrated: boolean) => void;
|
||||
}
|
||||
|
||||
interface WorkspaceOpenCallbacks {
|
||||
serverId: string;
|
||||
isConnected: boolean;
|
||||
mergeWorkspaces: (serverId: string, workspaces: Iterable<WorkspaceDescriptor>) => void;
|
||||
setHasHydratedWorkspaces: (serverId: string, hydrated: boolean) => void;
|
||||
openDraftTab: (workspaceKey: string) => string | null;
|
||||
navigateToWorkspace: (serverId: string, workspaceId: string) => void;
|
||||
}
|
||||
|
||||
export interface OpenGithubRepoDirectlyInput extends WorkspaceOpenCallbacks {
|
||||
repo: string;
|
||||
targetDirectory: string;
|
||||
cloneProtocol?: WorkspaceGithubCloneProtocol;
|
||||
client: Pick<DaemonClient, "cloneGithubWorkspace"> | null;
|
||||
}
|
||||
|
||||
export async function openProjectDirectly(
|
||||
input: OpenProjectDirectlyInput,
|
||||
): Promise<OpenProjectResult> {
|
||||
@@ -78,3 +101,50 @@ export async function openProjectDirectly(
|
||||
input.setHasHydratedWorkspaces(normalizedServerId, true);
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
function finishWorkspaceOpen(
|
||||
input: WorkspaceOpenCallbacks,
|
||||
payload: WorkspaceOpenPayload,
|
||||
): boolean {
|
||||
const normalizedServerId = input.serverId.trim();
|
||||
if (!normalizedServerId || payload.error || !payload.workspace) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const workspace = normalizeWorkspaceDescriptor(payload.workspace);
|
||||
const workspaceKey = buildWorkspaceTabPersistenceKey({
|
||||
serverId: normalizedServerId,
|
||||
workspaceId: workspace.id,
|
||||
});
|
||||
if (!workspaceKey) {
|
||||
return false;
|
||||
}
|
||||
|
||||
input.mergeWorkspaces(normalizedServerId, [workspace]);
|
||||
input.setHasHydratedWorkspaces(normalizedServerId, true);
|
||||
input.openDraftTab(workspaceKey);
|
||||
input.navigateToWorkspace(normalizedServerId, workspace.id);
|
||||
return true;
|
||||
}
|
||||
|
||||
export async function openGithubRepoDirectly(input: OpenGithubRepoDirectlyInput): Promise<boolean> {
|
||||
const normalizedServerId = input.serverId.trim();
|
||||
const trimmedRepo = input.repo.trim();
|
||||
const trimmedTargetDirectory = input.targetDirectory.trim();
|
||||
if (
|
||||
!normalizedServerId ||
|
||||
!trimmedRepo ||
|
||||
!trimmedTargetDirectory ||
|
||||
!input.client ||
|
||||
!input.isConnected
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const payload = await input.client.cloneGithubWorkspace({
|
||||
repo: trimmedRepo,
|
||||
targetDirectory: trimmedTargetDirectory,
|
||||
...(input.cloneProtocol ? { cloneProtocol: input.cloneProtocol } : {}),
|
||||
});
|
||||
return finishWorkspaceOpen(input, payload);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { getOpenProjectFailureReason, openProjectDirectly } from "@/hooks/open-project";
|
||||
import type { EmptyProjectDescriptor as ProjectWithoutWorkspacesDescriptor } from "@/stores/session-store";
|
||||
import {
|
||||
getOpenProjectFailureReason,
|
||||
openGithubRepoDirectly,
|
||||
openProjectDirectly,
|
||||
} from "@/hooks/open-project";
|
||||
import type {
|
||||
EmptyProjectDescriptor as ProjectWithoutWorkspacesDescriptor,
|
||||
WorkspaceDescriptor,
|
||||
} from "@/stores/session-store";
|
||||
|
||||
const SERVER_ID = "server-1";
|
||||
const PROJECT_PATH = "/repo/project";
|
||||
@@ -14,31 +21,113 @@ function buildProjectPayload() {
|
||||
};
|
||||
}
|
||||
|
||||
function buildWorkspacePayload() {
|
||||
return {
|
||||
id: "1",
|
||||
projectId: "1",
|
||||
projectDisplayName: "project",
|
||||
projectRootPath: PROJECT_PATH,
|
||||
workspaceDirectory: PROJECT_PATH,
|
||||
projectKind: "git" as const,
|
||||
workspaceKind: "checkout" as const,
|
||||
name: "project",
|
||||
archivingAt: null,
|
||||
status: "done" as const,
|
||||
statusEnteredAt: null,
|
||||
activityAt: null,
|
||||
diffStat: null,
|
||||
scripts: [],
|
||||
};
|
||||
}
|
||||
|
||||
interface RecordedProject {
|
||||
serverId: string;
|
||||
project: ProjectWithoutWorkspacesDescriptor;
|
||||
}
|
||||
|
||||
interface RecordedMerge {
|
||||
serverId: string;
|
||||
workspaces: WorkspaceDescriptor[];
|
||||
}
|
||||
|
||||
interface RecordedHydrated {
|
||||
serverId: string;
|
||||
hydrated: boolean;
|
||||
}
|
||||
|
||||
interface RecordedOpenDraftTab {
|
||||
workspaceKey: string;
|
||||
}
|
||||
|
||||
interface RecordedNavigate {
|
||||
serverId: string;
|
||||
workspaceId: string;
|
||||
}
|
||||
|
||||
interface RecordedClone {
|
||||
repo: string;
|
||||
targetDirectory: string;
|
||||
cloneProtocol?: "https" | "ssh";
|
||||
}
|
||||
|
||||
function createFakeSession() {
|
||||
const projects: RecordedProject[] = [];
|
||||
const merges: RecordedMerge[] = [];
|
||||
const hydrated: RecordedHydrated[] = [];
|
||||
return {
|
||||
projects,
|
||||
merges,
|
||||
hydrated,
|
||||
addEmptyProject: (serverId: string, project: ProjectWithoutWorkspacesDescriptor) => {
|
||||
projects.push({ serverId, project });
|
||||
},
|
||||
mergeWorkspaces: (serverId: string, workspaces: Iterable<WorkspaceDescriptor>) => {
|
||||
merges.push({ serverId, workspaces: Array.from(workspaces) });
|
||||
},
|
||||
setHasHydratedWorkspaces: (serverId: string, value: boolean) => {
|
||||
hydrated.push({ serverId, hydrated: value });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createFakeWorkspaceLayout() {
|
||||
const openedTabs: RecordedOpenDraftTab[] = [];
|
||||
return {
|
||||
openedTabs,
|
||||
openDraftTab: (workspaceKey: string) => {
|
||||
openedTabs.push({ workspaceKey });
|
||||
return "tab-1";
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createFakeNavigator() {
|
||||
const navigations: RecordedNavigate[] = [];
|
||||
return {
|
||||
navigations,
|
||||
navigateToWorkspace: (serverId: string, workspaceId: string) => {
|
||||
navigations.push({ serverId, workspaceId });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createFakeGithubCloneClient(workspace: ReturnType<typeof buildWorkspacePayload>) {
|
||||
const clones: RecordedClone[] = [];
|
||||
return {
|
||||
clones,
|
||||
cloneGithubWorkspace: async (input: RecordedClone) => {
|
||||
clones.push(input);
|
||||
return {
|
||||
requestId: "request-3",
|
||||
repo: "owner/project",
|
||||
checkoutPath: PROJECT_PATH,
|
||||
error: null,
|
||||
workspace,
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
describe("openProjectDirectly", () => {
|
||||
it("adds the project and marks workspaces hydrated without opening a workspace", async () => {
|
||||
const session = createFakeSession();
|
||||
@@ -73,6 +162,7 @@ describe("openProjectDirectly", () => {
|
||||
},
|
||||
},
|
||||
]);
|
||||
expect(session.merges).toEqual([]);
|
||||
expect(session.hydrated).toEqual([{ serverId: SERVER_ID, hydrated: true }]);
|
||||
});
|
||||
|
||||
@@ -133,6 +223,75 @@ describe("openProjectDirectly", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("openGithubRepoDirectly", () => {
|
||||
it("opens a cloned GitHub workspace and seeds a draft tab", async () => {
|
||||
const session = createFakeSession();
|
||||
const layout = createFakeWorkspaceLayout();
|
||||
const navigator = createFakeNavigator();
|
||||
const workspacePayload = buildWorkspacePayload();
|
||||
const github = createFakeGithubCloneClient(workspacePayload);
|
||||
|
||||
const result = await openGithubRepoDirectly({
|
||||
serverId: SERVER_ID,
|
||||
repo: "owner/project",
|
||||
targetDirectory: "~/workspace",
|
||||
cloneProtocol: "https",
|
||||
isConnected: true,
|
||||
client: github,
|
||||
mergeWorkspaces: session.mergeWorkspaces,
|
||||
setHasHydratedWorkspaces: session.setHasHydratedWorkspaces,
|
||||
openDraftTab: layout.openDraftTab,
|
||||
navigateToWorkspace: navigator.navigateToWorkspace,
|
||||
});
|
||||
|
||||
expect(result).toBe(true);
|
||||
expect(github.clones).toEqual([
|
||||
{
|
||||
repo: "owner/project",
|
||||
targetDirectory: "~/workspace",
|
||||
cloneProtocol: "https",
|
||||
},
|
||||
]);
|
||||
expect(session.merges).toHaveLength(1);
|
||||
expect(session.merges[0]?.serverId).toBe(SERVER_ID);
|
||||
expect(session.merges[0]?.workspaces[0]).toMatchObject({
|
||||
id: "1",
|
||||
projectId: "1",
|
||||
projectRootPath: PROJECT_PATH,
|
||||
workspaceDirectory: PROJECT_PATH,
|
||||
});
|
||||
expect(session.hydrated).toEqual([{ serverId: SERVER_ID, hydrated: true }]);
|
||||
expect(layout.openedTabs).toEqual([{ workspaceKey: `${SERVER_ID}:1` }]);
|
||||
expect(navigator.navigations).toEqual([{ serverId: SERVER_ID, workspaceId: "1" }]);
|
||||
});
|
||||
|
||||
it("rejects a workspace without an identity before changing app state", async () => {
|
||||
const session = createFakeSession();
|
||||
const layout = createFakeWorkspaceLayout();
|
||||
const navigator = createFakeNavigator();
|
||||
const github = createFakeGithubCloneClient({ ...buildWorkspacePayload(), id: " " });
|
||||
|
||||
const result = await openGithubRepoDirectly({
|
||||
serverId: SERVER_ID,
|
||||
repo: "owner/project",
|
||||
targetDirectory: "~/workspace",
|
||||
cloneProtocol: "https",
|
||||
isConnected: true,
|
||||
client: github,
|
||||
mergeWorkspaces: session.mergeWorkspaces,
|
||||
setHasHydratedWorkspaces: session.setHasHydratedWorkspaces,
|
||||
openDraftTab: layout.openDraftTab,
|
||||
navigateToWorkspace: navigator.navigateToWorkspace,
|
||||
});
|
||||
|
||||
expect(result).toBe(false);
|
||||
expect(session.merges).toEqual([]);
|
||||
expect(session.hydrated).toEqual([]);
|
||||
expect(layout.openedTabs).toEqual([]);
|
||||
expect(navigator.navigations).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("getOpenProjectFailureReason", () => {
|
||||
it("keeps the known directory-not-found failure reason", () => {
|
||||
expect(
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
import { useCallback } from "react";
|
||||
import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
|
||||
import { useSessionStore } from "@/stores/session-store";
|
||||
import { openProjectDirectly, type OpenProjectResult } from "@/hooks/open-project";
|
||||
import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
|
||||
import { generateDraftId } from "@/stores/draft-keys";
|
||||
import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store";
|
||||
import {
|
||||
openGithubRepoDirectly,
|
||||
openProjectDirectly,
|
||||
type OpenProjectResult,
|
||||
type WorkspaceGithubCloneProtocol,
|
||||
} from "@/hooks/open-project";
|
||||
|
||||
export function useOpenProject(
|
||||
serverId: string | null,
|
||||
@@ -40,3 +48,48 @@ export function useOpenProject(
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
export function useOpenGithubRepo(
|
||||
serverId: string | null,
|
||||
): (
|
||||
repo: string,
|
||||
targetDirectory: string,
|
||||
cloneProtocol?: WorkspaceGithubCloneProtocol,
|
||||
) => Promise<boolean> {
|
||||
const normalizedServerId = serverId?.trim() ?? "";
|
||||
const client = useHostRuntimeClient(normalizedServerId);
|
||||
const isConnected = useHostRuntimeIsConnected(normalizedServerId);
|
||||
const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
|
||||
const setHasHydratedWorkspaces = useSessionStore((state) => state.setHasHydratedWorkspaces);
|
||||
const openDraftTab = useCallback((workspaceKey: string) => {
|
||||
return useWorkspaceLayoutStore.getState().openTabFocused(workspaceKey, {
|
||||
kind: "draft",
|
||||
draftId: generateDraftId(),
|
||||
});
|
||||
}, []);
|
||||
|
||||
return useCallback(
|
||||
async (repo: string, targetDirectory: string, cloneProtocol?: WorkspaceGithubCloneProtocol) => {
|
||||
return openGithubRepoDirectly({
|
||||
serverId: normalizedServerId,
|
||||
repo,
|
||||
targetDirectory,
|
||||
...(cloneProtocol ? { cloneProtocol } : {}),
|
||||
isConnected,
|
||||
client,
|
||||
mergeWorkspaces,
|
||||
setHasHydratedWorkspaces,
|
||||
openDraftTab,
|
||||
navigateToWorkspace,
|
||||
});
|
||||
},
|
||||
[
|
||||
client,
|
||||
isConnected,
|
||||
mergeWorkspaces,
|
||||
normalizedServerId,
|
||||
openDraftTab,
|
||||
setHasHydratedWorkspaces,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user