## Summary Adds the ability to import GitHub repositories directly into Dyad from the home screen, complementing the existing local folder import feature. - GitHub Import Modal: New modal accessible from home screen via "Import from Github" button with two Import methods - Select project from GitHub repositories list - Clone from any GitHub URL - Advanced Options: Optional custom install/start commands (defaults to project's package.json scripts) - Auto AI_RULES Generation: Automatically generates AI_RULES.md if not present in imported repo closes #1424 <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Adds a GitHub import flow from the home screen so users can clone repos via their list or any URL, with optional install/start commands and automatic AI_RULES.md generation. Addresses Linear #1424 by enabling seamless project setup from GitHub. - **New Features** - Import modal with two tabs: Your Repositories and From URL. - Advanced options for install/start commands with validation; defaults used when both are empty. - After cloning, navigate to chat and auto-generate AI_RULES.md if missing. - New IPC handler github:clone-repo-from-url with token auth support, plus IpcClient method and preload channel. - E2E tests cover modal open, auth, import via URL/repo list, and advanced options. - **Dependencies** - Added @radix-ui/react-tabs for the modal tab UI. <!-- End of auto-generated description by cubic. -->
This commit is contained in:
Adeniji Adekunle James
committed by
GitHub
GitHub
parent
7acbe73c73
commit
348521ce82
@@ -53,7 +53,7 @@ interface ConnectedGitHubConnectorProps {
|
||||
onAutoSyncComplete?: () => void;
|
||||
}
|
||||
|
||||
interface UnconnectedGitHubConnectorProps {
|
||||
export interface UnconnectedGitHubConnectorProps {
|
||||
appId: number | null;
|
||||
folderName: string;
|
||||
settings: any;
|
||||
@@ -287,7 +287,7 @@ function ConnectedGitHubConnector({
|
||||
);
|
||||
}
|
||||
|
||||
function UnconnectedGitHubConnector({
|
||||
export function UnconnectedGitHubConnector({
|
||||
appId,
|
||||
folderName,
|
||||
settings,
|
||||
@@ -342,7 +342,6 @@ function UnconnectedGitHubConnector({
|
||||
const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const handleConnectToGithub = async () => {
|
||||
if (!appId) return;
|
||||
setIsConnectingToGithub(true);
|
||||
setGithubError(null);
|
||||
setGithubUserCode(null);
|
||||
@@ -354,8 +353,6 @@ function UnconnectedGitHubConnector({
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!appId) return; // Don't set up listeners if appId is null initially
|
||||
|
||||
const cleanupFunctions: (() => void)[] = [];
|
||||
|
||||
// Listener for updates (user code, verification uri, status messages)
|
||||
@@ -420,7 +417,7 @@ function UnconnectedGitHubConnector({
|
||||
setIsConnectingToGithub(false);
|
||||
setGithubStatusMessage(null);
|
||||
};
|
||||
}, [appId]); // Re-run effect if appId changes
|
||||
}, []); // Re-run effect if appId changes
|
||||
|
||||
// Load available repos when GitHub is connected
|
||||
useEffect(() => {
|
||||
@@ -562,7 +559,7 @@ function UnconnectedGitHubConnector({
|
||||
className="cursor-pointer w-full py-5 flex justify-center items-center gap-2"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
disabled={isConnectingToGithub || !appId} // Also disable if appId is null
|
||||
disabled={isConnectingToGithub} // Also disable if appId is null
|
||||
>
|
||||
Connect to GitHub
|
||||
<Github className="h-5 w-5" />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -18,6 +18,7 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Label } from "@radix-ui/react-label";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { useStreamChat } from "@/hooks/useStreamChat";
|
||||
import type { GithubRepository } from "@/ipc/ipc_types";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
@@ -33,24 +34,171 @@ import {
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "./ui/accordion";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useSettings } from "@/hooks/useSettings";
|
||||
import { UnconnectedGitHubConnector } from "@/components/GitHubConnector";
|
||||
|
||||
interface ImportAppDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const AI_RULES_PROMPT =
|
||||
"Generate an AI_RULES.md file for this app. Describe the tech stack in 5-10 bullet points and describe clear rules about what libraries to use for what.";
|
||||
export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
|
||||
const [selectedPath, setSelectedPath] = useState<string | null>(null);
|
||||
const [hasAiRules, setHasAiRules] = useState<boolean | null>(null);
|
||||
const [customAppName, setCustomAppName] = useState<string>("");
|
||||
const [nameExists, setNameExists] = useState<boolean>(false);
|
||||
const [isCheckingName, setIsCheckingName] = useState<boolean>(false);
|
||||
const [installCommand, setInstallCommand] = useState("pnpm install");
|
||||
const [startCommand, setStartCommand] = useState("pnpm dev");
|
||||
const [installCommand, setInstallCommand] = useState("");
|
||||
const [startCommand, setStartCommand] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const { streamMessage } = useStreamChat({ hasChatId: false });
|
||||
const { refreshApps } = useLoadApps();
|
||||
const setSelectedAppId = useSetAtom(selectedAppIdAtom);
|
||||
// GitHub import state
|
||||
const [repos, setRepos] = useState<GithubRepository[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [url, setUrl] = useState("");
|
||||
const [importing, setImporting] = useState(false);
|
||||
const { settings, refreshSettings } = useSettings();
|
||||
const isAuthenticated = !!settings?.githubAccessToken;
|
||||
|
||||
const [githubAppName, setGithubAppName] = useState("");
|
||||
const [githubNameExists, setGithubNameExists] = useState(false);
|
||||
const [isCheckingGithubName, setIsCheckingGithubName] = useState(false);
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setGithubAppName("");
|
||||
setGithubNameExists(false);
|
||||
// Fetch GitHub repos if authenticated
|
||||
if (isAuthenticated) {
|
||||
fetchRepos();
|
||||
}
|
||||
}
|
||||
}, [isOpen, isAuthenticated]);
|
||||
|
||||
const fetchRepos = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const fetchedRepos = await IpcClient.getInstance().listGithubRepos();
|
||||
setRepos(fetchedRepos);
|
||||
} catch (err: unknown) {
|
||||
showError("Failed to fetch repositories.: " + (err as any).toString());
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const handleUrlBlur = async () => {
|
||||
if (!url.trim()) return;
|
||||
const repoName = extractRepoNameFromUrl(url);
|
||||
if (repoName) {
|
||||
setGithubAppName(repoName);
|
||||
setIsCheckingGithubName(true);
|
||||
try {
|
||||
const result = await IpcClient.getInstance().checkAppName({
|
||||
appName: repoName,
|
||||
});
|
||||
setGithubNameExists(result.exists);
|
||||
} catch (error: unknown) {
|
||||
showError("Failed to check app name: " + (error as any).toString());
|
||||
} finally {
|
||||
setIsCheckingGithubName(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
const extractRepoNameFromUrl = (url: string): string | null => {
|
||||
const match = url.match(/github\.com[:/]([^/]+)\/([^/]+?)(?:\.git)?\/?$/);
|
||||
return match ? match[2] : null;
|
||||
};
|
||||
const handleImportFromUrl = async () => {
|
||||
setImporting(true);
|
||||
try {
|
||||
const match = extractRepoNameFromUrl(url);
|
||||
const repoName = match ? match[2] : "";
|
||||
const appName = githubAppName.trim() || repoName;
|
||||
const result = await IpcClient.getInstance().cloneRepoFromUrl({
|
||||
url,
|
||||
installCommand: installCommand.trim() || undefined,
|
||||
startCommand: startCommand.trim() || undefined,
|
||||
appName,
|
||||
});
|
||||
if ("error" in result) {
|
||||
showError(result.error);
|
||||
setImporting(false);
|
||||
return;
|
||||
}
|
||||
setSelectedAppId(result.app.id);
|
||||
showSuccess(`Successfully imported ${result.app.name}`);
|
||||
const chatId = await IpcClient.getInstance().createChat(result.app.id);
|
||||
navigate({ to: "/chat", search: { id: chatId } });
|
||||
if (!result.hasAiRules) {
|
||||
streamMessage({
|
||||
prompt: AI_RULES_PROMPT,
|
||||
chatId,
|
||||
});
|
||||
}
|
||||
onClose();
|
||||
} catch (error: unknown) {
|
||||
showError("Failed to import repository: " + (error as any).toString());
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectRepo = async (repo: GithubRepository) => {
|
||||
setImporting(true);
|
||||
|
||||
try {
|
||||
const appName = githubAppName.trim() || repo.name;
|
||||
const result = await IpcClient.getInstance().cloneRepoFromUrl({
|
||||
url: `https://github.com/${repo.full_name}.git`,
|
||||
installCommand: installCommand.trim() || undefined,
|
||||
startCommand: startCommand.trim() || undefined,
|
||||
appName,
|
||||
});
|
||||
if ("error" in result) {
|
||||
showError(result.error);
|
||||
setImporting(false);
|
||||
return;
|
||||
}
|
||||
setSelectedAppId(result.app.id);
|
||||
showSuccess(`Successfully imported ${result.app.name}`);
|
||||
const chatId = await IpcClient.getInstance().createChat(result.app.id);
|
||||
navigate({ to: "/chat", search: { id: chatId } });
|
||||
if (!result.hasAiRules) {
|
||||
streamMessage({
|
||||
prompt: AI_RULES_PROMPT,
|
||||
chatId,
|
||||
});
|
||||
}
|
||||
onClose();
|
||||
} catch (error: unknown) {
|
||||
showError("Failed to import repository: " + (error as any).toString());
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGithubAppNameChange = async (
|
||||
e: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const newName = e.target.value;
|
||||
setGithubAppName(newName);
|
||||
if (newName.trim()) {
|
||||
setIsCheckingGithubName(true);
|
||||
try {
|
||||
const result = await IpcClient.getInstance().checkAppName({
|
||||
appName: newName,
|
||||
});
|
||||
setGithubNameExists(result.exists);
|
||||
} catch (error: unknown) {
|
||||
showError("Failed to check app name: " + (error as any).toString());
|
||||
} finally {
|
||||
setIsCheckingGithubName(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const checkAppName = async (name: string): Promise<void> => {
|
||||
setIsCheckingName(true);
|
||||
@@ -65,7 +213,6 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
|
||||
setIsCheckingName(false);
|
||||
}
|
||||
};
|
||||
|
||||
const selectFolderMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const result = await IpcClient.getInstance().selectAppFolder();
|
||||
@@ -77,13 +224,10 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
|
||||
});
|
||||
setHasAiRules(aiRulesCheck.exists);
|
||||
setSelectedPath(result.path);
|
||||
|
||||
// Use the folder name from the IPC response
|
||||
setCustomAppName(result.name);
|
||||
|
||||
// Check if the app name already exists
|
||||
await checkAppName(result.name);
|
||||
|
||||
return result;
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
@@ -112,8 +256,7 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
|
||||
navigate({ to: "/chat", search: { id: result.chatId } });
|
||||
if (!hasAiRules) {
|
||||
streamMessage({
|
||||
prompt:
|
||||
"Generate an AI_RULES.md file for this app. Describe the tech stack in 5-10 bullet points and describe clear rules about what libraries to use for what.",
|
||||
prompt: AI_RULES_PROMPT,
|
||||
chatId: result.chatId,
|
||||
});
|
||||
}
|
||||
@@ -138,8 +281,8 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
|
||||
setHasAiRules(null);
|
||||
setCustomAppName("");
|
||||
setNameExists(false);
|
||||
setInstallCommand("pnpm install");
|
||||
setStartCommand("pnpm dev");
|
||||
setInstallCommand("");
|
||||
setStartCommand("");
|
||||
};
|
||||
|
||||
const handleAppNameChange = async (
|
||||
@@ -155,14 +298,14 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
|
||||
const hasInstallCommand = installCommand.trim().length > 0;
|
||||
const hasStartCommand = startCommand.trim().length > 0;
|
||||
const commandsValid = hasInstallCommand === hasStartCommand;
|
||||
|
||||
// Add this component inside the ImportAppDialog.tsx file, before the main component
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent>
|
||||
<DialogContent className="max-w-2xl max-h-[98vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Import App</DialogTitle>
|
||||
<DialogDescription>
|
||||
Select an existing app folder to import into Dyad.
|
||||
Import existing app from local folder or clone from Github.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -173,158 +316,365 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
|
||||
please report them using the Help button.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className="py-4">
|
||||
{!selectedPath ? (
|
||||
<Button
|
||||
onClick={handleSelectFolder}
|
||||
disabled={selectFolderMutation.isPending}
|
||||
className="w-full"
|
||||
>
|
||||
{selectFolderMutation.isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
<Tabs defaultValue="local-folder" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="local-folder">Local Folder</TabsTrigger>
|
||||
<TabsTrigger value="github-repos">Your GitHub Repos</TabsTrigger>
|
||||
<TabsTrigger value="github-url">GitHub URL</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="local-folder" className="space-y-4">
|
||||
<div className="py-4">
|
||||
{!selectedPath ? (
|
||||
<Button
|
||||
onClick={handleSelectFolder}
|
||||
disabled={selectFolderMutation.isPending}
|
||||
className="w-full"
|
||||
>
|
||||
{selectFolderMutation.isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Folder className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
{selectFolderMutation.isPending
|
||||
? "Selecting folder..."
|
||||
: "Select Folder"}
|
||||
</Button>
|
||||
) : (
|
||||
<Folder className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
{selectFolderMutation.isPending
|
||||
? "Selecting folder..."
|
||||
: "Select Folder"}
|
||||
</Button>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border p-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium">Selected folder:</p>
|
||||
<p className="text-sm text-muted-foreground break-all">
|
||||
{selectedPath}
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-md border p-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium">Selected folder:</p>
|
||||
<p className="text-sm text-muted-foreground break-all">
|
||||
{selectedPath}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className="h-8 w-8 p-0 flex-shrink-0"
|
||||
disabled={importAppMutation.isPending}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Clear selection</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className="h-8 w-8 p-0 flex-shrink-0"
|
||||
disabled={importAppMutation.isPending}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Clear selection</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{nameExists && (
|
||||
<p className="text-sm text-yellow-500">
|
||||
An app with this name already exists. Please choose a
|
||||
different name:
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{nameExists && (
|
||||
<p className="text-sm text-yellow-500">
|
||||
An app with this name already exists. Please choose a
|
||||
different name:
|
||||
</p>
|
||||
)}
|
||||
<div className="relative">
|
||||
<Label className="text-sm ml-2 mb-2">App name</Label>
|
||||
<Input
|
||||
value={customAppName}
|
||||
onChange={handleAppNameChange}
|
||||
placeholder="Enter new app name"
|
||||
className="w-full pr-8"
|
||||
disabled={importAppMutation.isPending}
|
||||
/>
|
||||
{isCheckingName && (
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="advanced-options">
|
||||
<AccordionTrigger className="text-sm hover:no-underline">
|
||||
Advanced options
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm ml-2 mb-2">
|
||||
Install command
|
||||
</Label>
|
||||
<Input
|
||||
value={installCommand}
|
||||
onChange={(e) => setInstallCommand(e.target.value)}
|
||||
placeholder="pnpm install"
|
||||
disabled={importAppMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm ml-2 mb-2">
|
||||
Start command
|
||||
</Label>
|
||||
<Input
|
||||
value={startCommand}
|
||||
onChange={(e) => setStartCommand(e.target.value)}
|
||||
placeholder="pnpm dev"
|
||||
disabled={importAppMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
{!commandsValid && (
|
||||
<p className="text-sm text-red-500">
|
||||
Both commands are required when customizing.
|
||||
</p>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
{hasAiRules === false && (
|
||||
<Alert className="border-yellow-500/20 text-yellow-500 flex items-start gap-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-4 w-4 flex-shrink-0 mt-1" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
AI_RULES.md lets Dyad know which tech stack to use
|
||||
for editing the app
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<AlertDescription>
|
||||
No AI_RULES.md found. Dyad will automatically generate
|
||||
one after importing.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{importAppMutation.isPending && (
|
||||
<div className="flex items-center justify-center space-x-2 text-sm text-muted-foreground animate-pulse">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Importing app...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={importAppMutation.isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleImport}
|
||||
disabled={
|
||||
!selectedPath ||
|
||||
importAppMutation.isPending ||
|
||||
nameExists ||
|
||||
!commandsValid
|
||||
}
|
||||
className="min-w-[80px]"
|
||||
>
|
||||
{importAppMutation.isPending ? <>Importing...</> : "Import"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</TabsContent>
|
||||
<TabsContent value="github-repos" className="space-y-4">
|
||||
{!isAuthenticated ? (
|
||||
<UnconnectedGitHubConnector
|
||||
appId={null}
|
||||
folderName=""
|
||||
settings={settings}
|
||||
refreshSettings={refreshSettings}
|
||||
handleRepoSetupComplete={() => undefined}
|
||||
expanded={false}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{loading && (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="animate-spin h-6 w-6" />
|
||||
</div>
|
||||
)}
|
||||
<div className="relative">
|
||||
<Label className="text-sm ml-2 mb-2">App name</Label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm ml-2 mb-2">
|
||||
App name (optional)
|
||||
</Label>
|
||||
<Input
|
||||
value={customAppName}
|
||||
onChange={handleAppNameChange}
|
||||
placeholder="Enter new app name"
|
||||
value={githubAppName}
|
||||
onChange={handleGithubAppNameChange}
|
||||
placeholder="Leave empty to use repository name"
|
||||
className="w-full pr-8"
|
||||
disabled={importAppMutation.isPending}
|
||||
disabled={importing}
|
||||
/>
|
||||
{isCheckingName && (
|
||||
{isCheckingGithubName && (
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
{githubNameExists && (
|
||||
<p className="text-sm text-yellow-500">
|
||||
An app with this name already exists. Please choose a
|
||||
different name.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="advanced-options">
|
||||
<AccordionTrigger className="text-sm hover:no-underline">
|
||||
Advanced options
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm ml-2 mb-2">
|
||||
Install command
|
||||
</Label>
|
||||
<Input
|
||||
value={installCommand}
|
||||
onChange={(e) => setInstallCommand(e.target.value)}
|
||||
placeholder="pnpm install"
|
||||
disabled={importAppMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm ml-2 mb-2">Start command</Label>
|
||||
<Input
|
||||
value={startCommand}
|
||||
onChange={(e) => setStartCommand(e.target.value)}
|
||||
placeholder="pnpm dev"
|
||||
disabled={importAppMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
{!commandsValid && (
|
||||
<p className="text-sm text-red-500">
|
||||
Both commands are required when customizing.
|
||||
</p>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
{hasAiRules === false && (
|
||||
<Alert className="border-yellow-500/20 text-yellow-500 flex items-start gap-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-4 w-4 flex-shrink-0 mt-1" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
AI_RULES.md lets Dyad know which tech stack to use for
|
||||
editing the app
|
||||
<div className="flex flex-col space-y-2 max-h-64 overflow-y-auto">
|
||||
{!loading && repos.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
No repositories found
|
||||
</p>
|
||||
)}
|
||||
{repos.map((repo) => (
|
||||
<div
|
||||
key={repo.full_name}
|
||||
className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent/50 transition-colors"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-semibold truncate">{repo.name}</p>
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{repo.full_name}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<AlertDescription>
|
||||
No AI_RULES.md found. Dyad will automatically generate one
|
||||
after importing.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{importAppMutation.isPending && (
|
||||
<div className="flex items-center justify-center space-x-2 text-sm text-muted-foreground animate-pulse">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>Importing app...</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleSelectRepo(repo)}
|
||||
disabled={importing}
|
||||
className="ml-2 flex-shrink-0"
|
||||
>
|
||||
{importing ? (
|
||||
<Loader2 className="animate-spin h-4 w-4" />
|
||||
) : (
|
||||
"Import"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{repos.length > 0 && (
|
||||
<>
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="advanced-options">
|
||||
<AccordionTrigger className="text-sm hover:no-underline">
|
||||
Advanced options
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm">Install command</Label>
|
||||
<Input
|
||||
value={installCommand}
|
||||
onChange={(e) =>
|
||||
setInstallCommand(e.target.value)
|
||||
}
|
||||
placeholder="pnpm install"
|
||||
disabled={importing}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm">Start command</Label>
|
||||
<Input
|
||||
value={startCommand}
|
||||
onChange={(e) => setStartCommand(e.target.value)}
|
||||
placeholder="pnpm dev"
|
||||
disabled={importing}
|
||||
/>
|
||||
</div>
|
||||
{!commandsValid && (
|
||||
<p className="text-sm text-red-500">
|
||||
Both commands are required when customizing.
|
||||
</p>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent value="github-url" className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm">Repository URL</Label>
|
||||
<Input
|
||||
placeholder="https://github.com/user/repo.git"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
disabled={importing}
|
||||
onBlur={handleUrlBlur}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm">App name (optional)</Label>
|
||||
<Input
|
||||
value={githubAppName}
|
||||
onChange={handleGithubAppNameChange}
|
||||
placeholder="Leave empty to use repository name"
|
||||
disabled={importing}
|
||||
/>
|
||||
{isCheckingGithubName && (
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
{githubNameExists && (
|
||||
<p className="text-sm text-yellow-500">
|
||||
An app with this name already exists. Please choose a
|
||||
different name.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
disabled={importAppMutation.isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleImport}
|
||||
disabled={
|
||||
!selectedPath ||
|
||||
importAppMutation.isPending ||
|
||||
nameExists ||
|
||||
!commandsValid
|
||||
}
|
||||
className="min-w-[80px]"
|
||||
>
|
||||
{importAppMutation.isPending ? <>Importing...</> : "Import"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="advanced-options">
|
||||
<AccordionTrigger className="text-sm hover:no-underline">
|
||||
Advanced options
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm">Install command</Label>
|
||||
<Input
|
||||
value={installCommand}
|
||||
onChange={(e) => setInstallCommand(e.target.value)}
|
||||
placeholder="pnpm install"
|
||||
disabled={importing}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label className="text-sm">Start command</Label>
|
||||
<Input
|
||||
value={startCommand}
|
||||
onChange={(e) => setStartCommand(e.target.value)}
|
||||
placeholder="pnpm dev"
|
||||
disabled={importing}
|
||||
/>
|
||||
</div>
|
||||
{!commandsValid && (
|
||||
<p className="text-sm text-red-500">
|
||||
Both commands are required when customizing.
|
||||
</p>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
||||
<Button
|
||||
onClick={handleImportFromUrl}
|
||||
disabled={importing || !url.trim() || !commandsValid}
|
||||
className="w-full"
|
||||
>
|
||||
{importing ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin mr-2 h-4 w-4" />
|
||||
Importing...
|
||||
</>
|
||||
) : (
|
||||
"Import"
|
||||
)}
|
||||
</Button>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
53
src/components/ui/tabs.tsx
Normal file
53
src/components/ui/tabs.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import * as React from "react";
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Tabs = TabsPrimitive.Root;
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsList.displayName = TabsPrimitive.List.displayName;
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
||||
@@ -1,17 +1,19 @@
|
||||
import { ipcMain, BrowserWindow, IpcMainInvokeEvent } from "electron";
|
||||
import fetch from "node-fetch"; // Use node-fetch for making HTTP requests in main process
|
||||
import { writeSettings, readSettings } from "../../main/settings";
|
||||
import git from "isomorphic-git";
|
||||
import git, { clone } from "isomorphic-git";
|
||||
import http from "isomorphic-git/http/node";
|
||||
import * as schema from "../../db/schema";
|
||||
import fs from "node:fs";
|
||||
import { getDyadAppPath } from "../../paths/paths";
|
||||
import { db } from "../../db";
|
||||
import { apps } from "../../db/schema";
|
||||
import type { CloneRepoParams, CloneRepoReturnType } from "@/ipc/ipc_types";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { GithubUser } from "../../lib/schemas";
|
||||
import log from "electron-log";
|
||||
import { IS_TEST_BUILD } from "../utils/test_utils";
|
||||
import path from "node:path"; // ← ADD THIS
|
||||
|
||||
const logger = log.scope("github_handlers");
|
||||
|
||||
@@ -627,6 +629,115 @@ async function handleDisconnectGithubRepo(
|
||||
})
|
||||
.where(eq(apps.id, appId));
|
||||
}
|
||||
// --- GitHub Clone Repo from URL Handler ---
|
||||
async function handleCloneRepoFromUrl(
|
||||
event: IpcMainInvokeEvent,
|
||||
params: CloneRepoParams,
|
||||
): Promise<CloneRepoReturnType> {
|
||||
const { url, installCommand, startCommand, appName } = params;
|
||||
try {
|
||||
const settings = readSettings();
|
||||
const accessToken = settings.githubAccessToken?.value;
|
||||
const urlPattern = /github\.com[:/]([^/]+)\/([^/]+?)(?:\.git)?\/?$/;
|
||||
const match = url.match(urlPattern);
|
||||
if (!match) {
|
||||
return {
|
||||
error:
|
||||
"Invalid GitHub URL. Expected format: https://github.com/owner/repo.git",
|
||||
};
|
||||
}
|
||||
const [, owner, repoName] = match;
|
||||
if (accessToken) {
|
||||
const repoResponse = await fetch(
|
||||
`${GITHUB_API_BASE}/repos/${owner}/${repoName}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
Accept: "application/vnd.github+json",
|
||||
},
|
||||
},
|
||||
);
|
||||
if (!repoResponse.ok) {
|
||||
return {
|
||||
error: "Repository not found or you do not have access to it.",
|
||||
};
|
||||
}
|
||||
}
|
||||
const finalAppName = appName && appName.trim() ? appName.trim() : repoName;
|
||||
const existingApp = await db.query.apps.findFirst({
|
||||
where: eq(apps.name, finalAppName),
|
||||
});
|
||||
|
||||
if (existingApp) {
|
||||
return { error: `An app named "${finalAppName}" already exists.` };
|
||||
}
|
||||
|
||||
const appPath = getDyadAppPath(finalAppName);
|
||||
if (!fs.existsSync(appPath)) {
|
||||
fs.mkdirSync(appPath, { recursive: true });
|
||||
}
|
||||
// Use authenticated URL if token exists, otherwise use public HTTPS URL
|
||||
const cloneUrl = accessToken
|
||||
? IS_TEST_BUILD
|
||||
? `${GITHUB_GIT_BASE}/${owner}/${repoName}.git`
|
||||
: `https://${accessToken}:x-oauth-basic@github.com/${owner}/${repoName}.git`
|
||||
: `https://github.com/${owner}/${repoName}.git`; // Changed: use public HTTPS URL instead of original url
|
||||
try {
|
||||
await clone({
|
||||
fs,
|
||||
http,
|
||||
dir: appPath,
|
||||
url: cloneUrl,
|
||||
onAuth: accessToken
|
||||
? () => ({
|
||||
username: accessToken,
|
||||
password: "x-oauth-basic",
|
||||
})
|
||||
: undefined,
|
||||
singleBranch: false,
|
||||
});
|
||||
} catch (cloneErr) {
|
||||
logger.error("[GitHub Handler] Clone failed:", cloneErr);
|
||||
return {
|
||||
error:
|
||||
"Failed to clone repository. Please check the URL and try again.",
|
||||
};
|
||||
}
|
||||
const aiRulesPath = path.join(appPath, "AI_RULES.md");
|
||||
const hasAiRules = fs.existsSync(aiRulesPath);
|
||||
const [newApp] = await db
|
||||
.insert(schema.apps)
|
||||
.values({
|
||||
name: finalAppName,
|
||||
path: finalAppName,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
githubOrg: owner,
|
||||
githubRepo: repoName,
|
||||
githubBranch: "main",
|
||||
installCommand: installCommand || null,
|
||||
startCommand: startCommand || null,
|
||||
})
|
||||
.returning();
|
||||
logger.log(`Successfully cloned repo ${owner}/${repoName} to ${appPath}`);
|
||||
// Return success object
|
||||
return {
|
||||
app: {
|
||||
...newApp,
|
||||
files: [],
|
||||
supabaseProjectName: null,
|
||||
vercelTeamSlug: null,
|
||||
},
|
||||
hasAiRules,
|
||||
};
|
||||
} catch (err: any) {
|
||||
// Catch any remaining unexpected errors and return an error object
|
||||
logger.error("[GitHub Handler] Unexpected error in clone flow:", err);
|
||||
return {
|
||||
error: err.message || "An unexpected error occurred during cloning.",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// --- Registration ---
|
||||
export function registerGithubHandlers() {
|
||||
@@ -650,6 +761,12 @@ export function registerGithubHandlers() {
|
||||
ipcMain.handle("github:disconnect", (event, args: { appId: number }) =>
|
||||
handleDisconnectGithubRepo(event, args),
|
||||
);
|
||||
ipcMain.handle(
|
||||
"github:clone-repo-from-url",
|
||||
async (event, args: CloneRepoParams) => {
|
||||
return await handleCloneRepoFromUrl(event, args);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export async function updateAppGithubRepo({
|
||||
|
||||
@@ -65,6 +65,7 @@ import type {
|
||||
UpdatePromptParamsDto,
|
||||
McpServerUpdate,
|
||||
CreateMcpServer,
|
||||
CloneRepoParams,
|
||||
} from "./ipc_types";
|
||||
import type { Template } from "../shared/templates";
|
||||
import type {
|
||||
@@ -1277,6 +1278,11 @@ export class IpcClient {
|
||||
public async deletePrompt(id: number): Promise<void> {
|
||||
await this.ipcRenderer.invoke("prompts:delete", id);
|
||||
}
|
||||
public async cloneRepoFromUrl(
|
||||
params: CloneRepoParams,
|
||||
): Promise<{ app: App; hasAiRules: boolean } | { error: string }> {
|
||||
return this.ipcRenderer.invoke("github:clone-repo-from-url", params);
|
||||
}
|
||||
|
||||
// --- Help bot ---
|
||||
public startHelpChat(
|
||||
|
||||
@@ -488,3 +488,23 @@ export interface McpToolConsent {
|
||||
consent: McpToolConsentType;
|
||||
updatedAt: number;
|
||||
}
|
||||
export interface CloneRepoParams {
|
||||
url: string;
|
||||
installCommand?: string;
|
||||
startCommand?: string;
|
||||
appName: string;
|
||||
}
|
||||
|
||||
export interface GithubRepository {
|
||||
name: string;
|
||||
full_name: string;
|
||||
private: boolean;
|
||||
}
|
||||
export type CloneRepoReturnType =
|
||||
| {
|
||||
app: App;
|
||||
hasAiRules: boolean;
|
||||
}
|
||||
| {
|
||||
error: string;
|
||||
};
|
||||
|
||||
@@ -129,6 +129,7 @@ const validInvokeChannels = [
|
||||
"prompts:delete",
|
||||
// adding app to favorite
|
||||
"add-to-favorite",
|
||||
"github:clone-repo-from-url",
|
||||
// Test-only channels
|
||||
// These should ALWAYS be guarded with IS_TEST_BUILD in the main process.
|
||||
// We can't detect with IS_TEST_BUILD in the preload script because
|
||||
|
||||
Reference in New Issue
Block a user