52
e2e-tests/copy_app.spec.ts
Normal file
52
e2e-tests/copy_app.spec.ts
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { expect } from "@playwright/test";
|
||||||
|
import { test, Timeout } from "./helpers/test_helper";
|
||||||
|
|
||||||
|
const tests = [
|
||||||
|
{
|
||||||
|
testName: "with history",
|
||||||
|
newAppName: "copied-app-with-history",
|
||||||
|
buttonName: "Copy app with history",
|
||||||
|
expectedVersion: "Version 2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
testName: "without history",
|
||||||
|
newAppName: "copied-app-without-history",
|
||||||
|
buttonName: "Copy app without history",
|
||||||
|
expectedVersion: "Version 1",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const { testName, newAppName, buttonName, expectedVersion } of tests) {
|
||||||
|
test(`copy app ${testName}`, async ({ po }) => {
|
||||||
|
await po.setUp({ autoApprove: true });
|
||||||
|
await po.sendPrompt("hi");
|
||||||
|
await po.snapshotAppFiles({ name: "app" });
|
||||||
|
|
||||||
|
await po.getTitleBarAppNameButton().click();
|
||||||
|
|
||||||
|
// Open the dropdown menu
|
||||||
|
await po.clickAppDetailsMoreOptions();
|
||||||
|
await po.clickAppDetailsCopyAppButton();
|
||||||
|
|
||||||
|
await po.page.getByLabel("New app name").fill(newAppName);
|
||||||
|
|
||||||
|
// Click the "Copy app" button
|
||||||
|
await po.page.getByRole("button", { name: buttonName }).click();
|
||||||
|
|
||||||
|
// Expect to be on the new app's detail page
|
||||||
|
await expect(
|
||||||
|
po.page.getByRole("heading", { name: newAppName }),
|
||||||
|
).toBeVisible({
|
||||||
|
// Potentially takes a while for the copy to complete
|
||||||
|
timeout: Timeout.MEDIUM,
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentAppName = await po.getCurrentAppName();
|
||||||
|
expect(currentAppName).toBe(newAppName);
|
||||||
|
|
||||||
|
await po.clickOpenInChatButton();
|
||||||
|
|
||||||
|
await expect(po.page.getByText(expectedVersion)).toBeVisible();
|
||||||
|
await po.snapshotAppFiles({ name: "app" });
|
||||||
|
});
|
||||||
|
}
|
||||||
129
e2e-tests/helpers/generateAppFilesSnapshotData.ts
Normal file
129
e2e-tests/helpers/generateAppFilesSnapshotData.ts
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
import fs from "fs";
|
||||||
|
import path from "path";
|
||||||
|
import crypto from "crypto";
|
||||||
|
|
||||||
|
export interface FileSnapshotData {
|
||||||
|
relativePath: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const binaryExtensions = new Set([
|
||||||
|
".png",
|
||||||
|
".jpg",
|
||||||
|
".jpeg",
|
||||||
|
".gif",
|
||||||
|
".webp",
|
||||||
|
".tiff",
|
||||||
|
".psd",
|
||||||
|
".raw",
|
||||||
|
".bmp",
|
||||||
|
".heif",
|
||||||
|
".ico",
|
||||||
|
".pdf",
|
||||||
|
".eot",
|
||||||
|
".otf",
|
||||||
|
".ttf",
|
||||||
|
".woff",
|
||||||
|
".woff2",
|
||||||
|
".zip",
|
||||||
|
".tar",
|
||||||
|
".gz",
|
||||||
|
".7z",
|
||||||
|
".rar",
|
||||||
|
".mov",
|
||||||
|
".mp4",
|
||||||
|
".m4v",
|
||||||
|
".mkv",
|
||||||
|
".webm",
|
||||||
|
".flv",
|
||||||
|
".avi",
|
||||||
|
".wmv",
|
||||||
|
".mp3",
|
||||||
|
".wav",
|
||||||
|
".ogg",
|
||||||
|
".flac",
|
||||||
|
".exe",
|
||||||
|
".dll",
|
||||||
|
".so",
|
||||||
|
".a",
|
||||||
|
".lib",
|
||||||
|
".o",
|
||||||
|
".db",
|
||||||
|
".sqlite3",
|
||||||
|
".wasm",
|
||||||
|
]);
|
||||||
|
|
||||||
|
function isBinaryFile(filePath: string): boolean {
|
||||||
|
return binaryExtensions.has(path.extname(filePath).toLowerCase());
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateAppFilesSnapshotData(
|
||||||
|
currentPath: string,
|
||||||
|
basePath: string,
|
||||||
|
): FileSnapshotData[] {
|
||||||
|
const ignorePatterns = [
|
||||||
|
".git",
|
||||||
|
"node_modules",
|
||||||
|
// Avoid snapshotting lock files because they are getting generated
|
||||||
|
// automatically and cause noise, and not super important anyways.
|
||||||
|
"package-lock.json",
|
||||||
|
"pnpm-lock.yaml",
|
||||||
|
];
|
||||||
|
|
||||||
|
const entries = fs.readdirSync(currentPath, { withFileTypes: true });
|
||||||
|
let files: FileSnapshotData[] = [];
|
||||||
|
|
||||||
|
// Sort entries for deterministic order
|
||||||
|
entries.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
|
||||||
|
for (const entry of entries) {
|
||||||
|
const entryPath = path.join(currentPath, entry.name);
|
||||||
|
if (ignorePatterns.includes(entry.name)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entry.isDirectory()) {
|
||||||
|
files = files.concat(generateAppFilesSnapshotData(entryPath, basePath));
|
||||||
|
} else if (entry.isFile()) {
|
||||||
|
const relativePath = path
|
||||||
|
.relative(basePath, entryPath)
|
||||||
|
// Normalize path separators to always use /
|
||||||
|
// to prevent diffs on Windows.
|
||||||
|
.replace(/\\/g, "/");
|
||||||
|
try {
|
||||||
|
if (isBinaryFile(entryPath)) {
|
||||||
|
const fileBuffer = fs.readFileSync(entryPath);
|
||||||
|
const hash = crypto
|
||||||
|
.createHash("sha256")
|
||||||
|
.update(fileBuffer)
|
||||||
|
.digest("hex");
|
||||||
|
files.push({
|
||||||
|
relativePath,
|
||||||
|
content: `[binary hash="${hash}"]`,
|
||||||
|
});
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let content = fs
|
||||||
|
.readFileSync(entryPath, "utf-8")
|
||||||
|
// Normalize line endings to always use \n
|
||||||
|
.replace(/\r\n/g, "\n");
|
||||||
|
if (entry.name === "package.json") {
|
||||||
|
const packageJson = JSON.parse(content);
|
||||||
|
packageJson.packageManager = "<scrubbed>";
|
||||||
|
content = JSON.stringify(packageJson, null, 2);
|
||||||
|
}
|
||||||
|
files.push({ relativePath, content });
|
||||||
|
} catch (error) {
|
||||||
|
// Could be a binary file or permission issue, log and add a placeholder
|
||||||
|
const e = error as Error;
|
||||||
|
console.warn(`Could not read file ${entryPath}: ${e.message}`);
|
||||||
|
files.push({
|
||||||
|
relativePath,
|
||||||
|
content: `[Error reading file: ${e.message}]`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return files;
|
||||||
|
}
|
||||||
@@ -5,6 +5,7 @@ import fs from "fs";
|
|||||||
import path from "path";
|
import path from "path";
|
||||||
import os from "os";
|
import os from "os";
|
||||||
import { execSync } from "child_process";
|
import { execSync } from "child_process";
|
||||||
|
import { generateAppFilesSnapshotData } from "./generateAppFilesSnapshotData";
|
||||||
|
|
||||||
const showDebugLogs = process.env.DEBUG_LOGS === "true";
|
const showDebugLogs = process.env.DEBUG_LOGS === "true";
|
||||||
|
|
||||||
@@ -80,14 +81,7 @@ export class PageObject {
|
|||||||
}
|
}
|
||||||
|
|
||||||
await expect(() => {
|
await expect(() => {
|
||||||
const filesData = generateAppFilesSnapshotData(appPath, appPath, [
|
const filesData = generateAppFilesSnapshotData(appPath, appPath);
|
||||||
".git",
|
|
||||||
"node_modules",
|
|
||||||
// Avoid snapshotting lock files because they are getting generated
|
|
||||||
// automatically and cause noise, and not super important anyways.
|
|
||||||
"package-lock.json",
|
|
||||||
"pnpm-lock.yaml",
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Sort by relative path to ensure deterministic output
|
// Sort by relative path to ensure deterministic output
|
||||||
filesData.sort((a, b) => a.relativePath.localeCompare(b.relativePath));
|
filesData.sort((a, b) => a.relativePath.localeCompare(b.relativePath));
|
||||||
@@ -97,7 +91,7 @@ export class PageObject {
|
|||||||
.join("\n\n");
|
.join("\n\n");
|
||||||
|
|
||||||
if (name) {
|
if (name) {
|
||||||
expect(snapshotContent).toMatchSnapshot(name);
|
expect(snapshotContent).toMatchSnapshot(name + ".txt");
|
||||||
} else {
|
} else {
|
||||||
expect(snapshotContent).toMatchSnapshot();
|
expect(snapshotContent).toMatchSnapshot();
|
||||||
}
|
}
|
||||||
@@ -378,6 +372,10 @@ export class PageObject {
|
|||||||
await this.page.getByTestId(`app-list-item-${appName}`).click();
|
await this.page.getByTestId(`app-list-item-${appName}`).click();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async clickOpenInChatButton() {
|
||||||
|
await this.page.getByRole("button", { name: "Open in Chat" }).click();
|
||||||
|
}
|
||||||
|
|
||||||
async clickAppDetailsRenameAppButton() {
|
async clickAppDetailsRenameAppButton() {
|
||||||
await this.page.getByTestId("app-details-rename-app-button").click();
|
await this.page.getByTestId("app-details-rename-app-button").click();
|
||||||
}
|
}
|
||||||
@@ -386,6 +384,10 @@ export class PageObject {
|
|||||||
await this.page.getByTestId("app-details-more-options-button").click();
|
await this.page.getByTestId("app-details-more-options-button").click();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async clickAppDetailsCopyAppButton() {
|
||||||
|
await this.page.getByRole("button", { name: "Copy app" }).click();
|
||||||
|
}
|
||||||
|
|
||||||
async clickConnectSupabaseButton() {
|
async clickConnectSupabaseButton() {
|
||||||
await this.page.getByTestId("connect-supabase-button").click();
|
await this.page.getByTestId("connect-supabase-button").click();
|
||||||
}
|
}
|
||||||
@@ -406,9 +408,12 @@ export class PageObject {
|
|||||||
const settings = path.join(this.userDataDir, "user-settings.json");
|
const settings = path.join(this.userDataDir, "user-settings.json");
|
||||||
const settingsContent = fs.readFileSync(settings, "utf-8");
|
const settingsContent = fs.readFileSync(settings, "utf-8");
|
||||||
// Sanitize the "telemetryUserId" since it's a UUID
|
// Sanitize the "telemetryUserId" since it's a UUID
|
||||||
const sanitizedSettingsContent = settingsContent.replace(
|
const sanitizedSettingsContent = settingsContent
|
||||||
/"telemetryUserId": "[^"]*"/g,
|
.replace(/"telemetryUserId": "[^"]*"/g, '"telemetryUserId": "[UUID]"')
|
||||||
'"telemetryUserId": "[UUID]"',
|
// Don't snapshot this otherwise it'll diff with every release.
|
||||||
|
.replace(
|
||||||
|
/"lastShownReleaseNotesVersion": "[^"]*"/g,
|
||||||
|
'"lastShownReleaseNotesVersion": "[scrubbed]"',
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(sanitizedSettingsContent).toMatchSnapshot();
|
expect(sanitizedSettingsContent).toMatchSnapshot();
|
||||||
@@ -652,48 +657,3 @@ function prettifyDump(
|
|||||||
})
|
})
|
||||||
.join("\n\n");
|
.join("\n\n");
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FileSnapshotData {
|
|
||||||
relativePath: string;
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateAppFilesSnapshotData(
|
|
||||||
currentPath: string,
|
|
||||||
basePath: string,
|
|
||||||
ignorePatterns: string[],
|
|
||||||
): FileSnapshotData[] {
|
|
||||||
const entries = fs.readdirSync(currentPath, { withFileTypes: true });
|
|
||||||
let files: FileSnapshotData[] = [];
|
|
||||||
|
|
||||||
// Sort entries for deterministic order
|
|
||||||
entries.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
|
|
||||||
for (const entry of entries) {
|
|
||||||
const entryPath = path.join(currentPath, entry.name);
|
|
||||||
if (ignorePatterns.includes(entry.name)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entry.isDirectory()) {
|
|
||||||
files = files.concat(
|
|
||||||
generateAppFilesSnapshotData(entryPath, basePath, ignorePatterns),
|
|
||||||
);
|
|
||||||
} else if (entry.isFile()) {
|
|
||||||
const relativePath = path.relative(basePath, entryPath);
|
|
||||||
try {
|
|
||||||
const content = fs.readFileSync(entryPath, "utf-8");
|
|
||||||
files.push({ relativePath, content });
|
|
||||||
} catch (error) {
|
|
||||||
// Could be a binary file or permission issue, log and add a placeholder
|
|
||||||
const e = error as Error;
|
|
||||||
console.warn(`Could not read file ${entryPath}: ${e.message}`);
|
|
||||||
files.push({
|
|
||||||
relativePath,
|
|
||||||
content: `[Error reading file: ${e.message}]`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return files;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
"telemetryUserId": "[UUID]",
|
"telemetryUserId": "[UUID]",
|
||||||
"hasRunBefore": true,
|
"hasRunBefore": true,
|
||||||
"experiments": {},
|
"experiments": {},
|
||||||
"lastShownReleaseNotesVersion": "0.8.0",
|
"lastShownReleaseNotesVersion": "[scrubbed]",
|
||||||
"maxChatTurnsInContext": 5,
|
"maxChatTurnsInContext": 5,
|
||||||
"enableProLazyEditsMode": true,
|
"enableProLazyEditsMode": true,
|
||||||
"enableProSmartFilesContextMode": true,
|
"enableProSmartFilesContextMode": true,
|
||||||
|
|||||||
5862
e2e-tests/snapshots/copy_app.spec.ts_app.txt
Normal file
5862
e2e-tests/snapshots/copy_app.spec.ts_app.txt
Normal file
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,7 @@
|
|||||||
"telemetryUserId": "[UUID]",
|
"telemetryUserId": "[UUID]",
|
||||||
"hasRunBefore": true,
|
"hasRunBefore": true,
|
||||||
"experiments": {},
|
"experiments": {},
|
||||||
"lastShownReleaseNotesVersion": "0.8.0",
|
"lastShownReleaseNotesVersion": "[scrubbed]",
|
||||||
"enableProLazyEditsMode": true,
|
"enableProLazyEditsMode": true,
|
||||||
"enableProSmartFilesContextMode": true,
|
"enableProSmartFilesContextMode": true,
|
||||||
"isTestMode": true
|
"isTestMode": true
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
"telemetryUserId": "[UUID]",
|
"telemetryUserId": "[UUID]",
|
||||||
"hasRunBefore": true,
|
"hasRunBefore": true,
|
||||||
"experiments": {},
|
"experiments": {},
|
||||||
"lastShownReleaseNotesVersion": "0.8.0",
|
"lastShownReleaseNotesVersion": "[scrubbed]",
|
||||||
"enableProLazyEditsMode": true,
|
"enableProLazyEditsMode": true,
|
||||||
"enableProSmartFilesContextMode": true,
|
"enableProSmartFilesContextMode": true,
|
||||||
"isTestMode": true
|
"isTestMode": true
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
"telemetryUserId": "[UUID]",
|
"telemetryUserId": "[UUID]",
|
||||||
"hasRunBefore": true,
|
"hasRunBefore": true,
|
||||||
"experiments": {},
|
"experiments": {},
|
||||||
"lastShownReleaseNotesVersion": "0.8.0",
|
"lastShownReleaseNotesVersion": "[scrubbed]",
|
||||||
"enableProLazyEditsMode": true,
|
"enableProLazyEditsMode": true,
|
||||||
"enableProSmartFilesContextMode": true,
|
"enableProSmartFilesContextMode": true,
|
||||||
"isTestMode": true
|
"isTestMode": true
|
||||||
|
|||||||
18
src/hooks/useCheckName.ts
Normal file
18
src/hooks/useCheckName.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { IpcClient } from "@/ipc/ipc_client";
|
||||||
|
|
||||||
|
export const useCheckName = (appName: string) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ["checkAppName", appName],
|
||||||
|
queryFn: async () => {
|
||||||
|
const result = await IpcClient.getInstance().checkAppName({ appName });
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
enabled: !!appName && !!appName.trim(),
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
refetchOnMount: false,
|
||||||
|
refetchOnReconnect: false,
|
||||||
|
retry: false,
|
||||||
|
staleTime: 300000, // 5 minutes
|
||||||
|
});
|
||||||
|
};
|
||||||
17
src/hooks/useDebounce.ts
Normal file
17
src/hooks/useDebounce.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
export function useDebounce<T>(value: T, delay: number): T {
|
||||||
|
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = setTimeout(() => {
|
||||||
|
setDebouncedValue(value);
|
||||||
|
}, delay);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(handler);
|
||||||
|
};
|
||||||
|
}, [value, delay]);
|
||||||
|
|
||||||
|
return debouncedValue;
|
||||||
|
}
|
||||||
@@ -2,7 +2,12 @@ import { ipcMain } from "electron";
|
|||||||
import { db, getDatabasePath } from "../../db";
|
import { db, getDatabasePath } from "../../db";
|
||||||
import { apps, chats } from "../../db/schema";
|
import { apps, chats } from "../../db/schema";
|
||||||
import { desc, eq } from "drizzle-orm";
|
import { desc, eq } from "drizzle-orm";
|
||||||
import type { App, CreateAppParams, RenameBranchParams } from "../ipc_types";
|
import type {
|
||||||
|
App,
|
||||||
|
CreateAppParams,
|
||||||
|
RenameBranchParams,
|
||||||
|
CopyAppParams,
|
||||||
|
} from "../ipc_types";
|
||||||
import fs from "node:fs";
|
import fs from "node:fs";
|
||||||
import path from "node:path";
|
import path from "node:path";
|
||||||
import { getDyadAppPath, getUserDataPath } from "../../paths/paths";
|
import { getDyadAppPath, getUserDataPath } from "../../paths/paths";
|
||||||
@@ -225,6 +230,89 @@ export function registerAppHandlers() {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
handle(
|
||||||
|
"copy-app",
|
||||||
|
async (_, params: CopyAppParams): Promise<{ app: any }> => {
|
||||||
|
const { appId, newAppName, withHistory } = params;
|
||||||
|
|
||||||
|
// 1. Check if an app with the new name already exists
|
||||||
|
const existingApp = await db.query.apps.findFirst({
|
||||||
|
where: eq(apps.name, newAppName),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingApp) {
|
||||||
|
throw new Error(`An app named "${newAppName}" already exists.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Find the original app
|
||||||
|
const originalApp = await db.query.apps.findFirst({
|
||||||
|
where: eq(apps.id, appId),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!originalApp) {
|
||||||
|
throw new Error("Original app not found.");
|
||||||
|
}
|
||||||
|
|
||||||
|
const originalAppPath = getDyadAppPath(originalApp.path);
|
||||||
|
const newAppPath = getDyadAppPath(newAppName);
|
||||||
|
|
||||||
|
// 3. Copy the app folder
|
||||||
|
try {
|
||||||
|
await fsPromises.cp(originalAppPath, newAppPath, {
|
||||||
|
recursive: true,
|
||||||
|
filter: (source: string) => {
|
||||||
|
if (!withHistory && path.basename(source) === ".git") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logger.error("Failed to copy app directory:", error);
|
||||||
|
throw new Error("Failed to copy app directory.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!withHistory) {
|
||||||
|
// Initialize git repo and create first commit
|
||||||
|
await git.init({
|
||||||
|
fs: fs,
|
||||||
|
dir: newAppPath,
|
||||||
|
defaultBranch: "main",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Stage all files
|
||||||
|
await git.add({
|
||||||
|
fs: fs,
|
||||||
|
dir: newAppPath,
|
||||||
|
filepath: ".",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create initial commit
|
||||||
|
await gitCommit({
|
||||||
|
path: newAppPath,
|
||||||
|
message: "Init Dyad app",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. Create a new app entry in the database
|
||||||
|
const [newDbApp] = await db
|
||||||
|
.insert(apps)
|
||||||
|
.values({
|
||||||
|
name: newAppName,
|
||||||
|
path: newAppName, // Use the new name for the path
|
||||||
|
// Explicitly set these to null because we don't want to copy them over.
|
||||||
|
// Note: we could just leave them out since they're nullable field, but this
|
||||||
|
// is to make it explicit we intentionally don't want to copy them over.
|
||||||
|
supabaseProjectId: null,
|
||||||
|
githubOrg: null,
|
||||||
|
githubRepo: null,
|
||||||
|
})
|
||||||
|
.returning();
|
||||||
|
|
||||||
|
return { app: newDbApp };
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
handle("get-app", async (_, appId: number): Promise<App> => {
|
handle("get-app", async (_, appId: number): Promise<App> => {
|
||||||
const app = await db.query.apps.findFirst({
|
const app = await db.query.apps.findFirst({
|
||||||
where: eq(apps.id, appId),
|
where: eq(apps.id, appId),
|
||||||
|
|||||||
@@ -31,6 +31,7 @@ import type {
|
|||||||
ImportAppParams,
|
ImportAppParams,
|
||||||
RenameBranchParams,
|
RenameBranchParams,
|
||||||
UserBudgetInfo,
|
UserBudgetInfo,
|
||||||
|
CopyAppParams,
|
||||||
} from "./ipc_types";
|
} from "./ipc_types";
|
||||||
import type { ProposalResult } from "@/lib/schemas";
|
import type { ProposalResult } from "@/lib/schemas";
|
||||||
import { showError } from "@/lib/toast";
|
import { showError } from "@/lib/toast";
|
||||||
@@ -465,6 +466,10 @@ export class IpcClient {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async copyApp(params: CopyAppParams): Promise<{ app: App }> {
|
||||||
|
return this.ipcRenderer.invoke("copy-app", params);
|
||||||
|
}
|
||||||
|
|
||||||
// Reset all - removes all app files, settings, and drops the database
|
// Reset all - removes all app files, settings, and drops the database
|
||||||
public async resetAll(): Promise<void> {
|
public async resetAll(): Promise<void> {
|
||||||
await this.ipcRenderer.invoke("reset-all");
|
await this.ipcRenderer.invoke("reset-all");
|
||||||
|
|||||||
@@ -199,6 +199,12 @@ export interface ImportAppParams {
|
|||||||
appName: string;
|
appName: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface CopyAppParams {
|
||||||
|
appId: number;
|
||||||
|
newAppName: string;
|
||||||
|
withHistory: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export interface ImportAppResult {
|
export interface ImportAppResult {
|
||||||
appId: number;
|
appId: number;
|
||||||
chatId: number;
|
chatId: number;
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
import { useNavigate, useRouter, useSearch } from "@tanstack/react-router";
|
import { useNavigate, useRouter, useSearch } from "@tanstack/react-router";
|
||||||
import { useAtom, useAtomValue } from "jotai";
|
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||||
import { appBasePathAtom, appsListAtom } from "@/atoms/appAtoms";
|
import {
|
||||||
|
appBasePathAtom,
|
||||||
|
appsListAtom,
|
||||||
|
selectedAppIdAtom,
|
||||||
|
} from "@/atoms/appAtoms";
|
||||||
import { IpcClient } from "@/ipc/ipc_client";
|
import { IpcClient } from "@/ipc/ipc_client";
|
||||||
import { useLoadApps } from "@/hooks/useLoadApps";
|
import { useLoadApps } from "@/hooks/useLoadApps";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@@ -29,6 +33,12 @@ import {
|
|||||||
import { GitHubConnector } from "@/components/GitHubConnector";
|
import { GitHubConnector } from "@/components/GitHubConnector";
|
||||||
import { SupabaseConnector } from "@/components/SupabaseConnector";
|
import { SupabaseConnector } from "@/components/SupabaseConnector";
|
||||||
import { showError } from "@/lib/toast";
|
import { showError } from "@/lib/toast";
|
||||||
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
import { invalidateAppQuery } from "@/hooks/useLoadApp";
|
||||||
|
import { useDebounce } from "@/hooks/useDebounce";
|
||||||
|
import { useCheckName } from "@/hooks/useCheckName";
|
||||||
|
|
||||||
export default function AppDetailsPage() {
|
export default function AppDetailsPage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -49,6 +59,18 @@ export default function AppDetailsPage() {
|
|||||||
const [isRenamingFolder, setIsRenamingFolder] = useState(false);
|
const [isRenamingFolder, setIsRenamingFolder] = useState(false);
|
||||||
const appBasePath = useAtomValue(appBasePathAtom);
|
const appBasePath = useAtomValue(appBasePathAtom);
|
||||||
|
|
||||||
|
const [isCopyDialogOpen, setIsCopyDialogOpen] = useState(false);
|
||||||
|
const [newCopyAppName, setNewCopyAppName] = useState("");
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const setSelectedAppId = useSetAtom(selectedAppIdAtom);
|
||||||
|
|
||||||
|
const debouncedNewCopyAppName = useDebounce(newCopyAppName, 150);
|
||||||
|
const { data: checkNameResult, isLoading: isCheckingName } = useCheckName(
|
||||||
|
debouncedNewCopyAppName,
|
||||||
|
);
|
||||||
|
const nameExists = checkNameResult?.exists ?? false;
|
||||||
|
|
||||||
// Get the appId from search params and find the corresponding app
|
// Get the appId from search params and find the corresponding app
|
||||||
const appId = search.appId ? Number(search.appId) : null;
|
const appId = search.appId ? Number(search.appId) : null;
|
||||||
const selectedApp = appId ? appsList.find((app) => app.id === appId) : null;
|
const selectedApp = appId ? appsList.find((app) => app.id === appId) : null;
|
||||||
@@ -139,6 +161,42 @@ export default function AppDetailsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleAppNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setNewCopyAppName(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenCopyDialog = () => {
|
||||||
|
if (selectedApp) {
|
||||||
|
setNewCopyAppName(`${selectedApp.name}-copy`);
|
||||||
|
setIsCopyDialogOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyAppMutation = useMutation({
|
||||||
|
mutationFn: async ({ withHistory }: { withHistory: boolean }) => {
|
||||||
|
if (!appId || !newCopyAppName.trim()) {
|
||||||
|
throw new Error("Invalid app ID or name for copying.");
|
||||||
|
}
|
||||||
|
return IpcClient.getInstance().copyApp({
|
||||||
|
appId,
|
||||||
|
newAppName: newCopyAppName,
|
||||||
|
withHistory,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSuccess: async (data) => {
|
||||||
|
const appId = data.app.id;
|
||||||
|
setSelectedAppId(appId);
|
||||||
|
await invalidateAppQuery(queryClient, { appId });
|
||||||
|
await refreshApps();
|
||||||
|
await IpcClient.getInstance().createChat(appId);
|
||||||
|
setIsCopyDialogOpen(false);
|
||||||
|
navigate({ to: "/app-details", search: { appId } });
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
showError(error);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
if (!selectedApp) {
|
if (!selectedApp) {
|
||||||
return (
|
return (
|
||||||
<div className="relative min-h-screen p-8">
|
<div className="relative min-h-screen p-8">
|
||||||
@@ -212,6 +270,14 @@ export default function AppDetailsPage() {
|
|||||||
>
|
>
|
||||||
Rename folder
|
Rename folder
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleOpenCopyDialog}
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 justify-start text-xs"
|
||||||
|
>
|
||||||
|
Copy app
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setIsDeleteDialogOpen(true)}
|
onClick={() => setIsDeleteDialogOpen(true)}
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -439,6 +505,123 @@ export default function AppDetailsPage() {
|
|||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Copy App Dialog */}
|
||||||
|
{selectedApp && (
|
||||||
|
<Dialog open={isCopyDialogOpen} onOpenChange={setIsCopyDialogOpen}>
|
||||||
|
<DialogContent className="max-w-md p-4">
|
||||||
|
<DialogHeader className="pb-2">
|
||||||
|
<DialogTitle>Copy "{selectedApp.name}"</DialogTitle>
|
||||||
|
<DialogDescription className="text-sm">
|
||||||
|
<p>Create a copy of this app.</p>
|
||||||
|
<p>
|
||||||
|
Note: this does not copy over the Supabase project or GitHub
|
||||||
|
project.
|
||||||
|
</p>
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-3 my-2">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="newAppName">New app name</Label>
|
||||||
|
<div className="relative mt-1">
|
||||||
|
<Input
|
||||||
|
id="newAppName"
|
||||||
|
value={newCopyAppName}
|
||||||
|
onChange={handleAppNameChange}
|
||||||
|
placeholder="Enter new app name"
|
||||||
|
className="pr-8"
|
||||||
|
disabled={copyAppMutation.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>
|
||||||
|
|
||||||
|
{nameExists && (
|
||||||
|
<p className="text-xs text-yellow-600 dark:text-yellow-500 mt-1">
|
||||||
|
An app with this name already exists. Please choose
|
||||||
|
another name.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start p-2 h-auto relative text-sm"
|
||||||
|
onClick={() =>
|
||||||
|
copyAppMutation.mutate({ withHistory: true })
|
||||||
|
}
|
||||||
|
disabled={
|
||||||
|
copyAppMutation.isPending ||
|
||||||
|
nameExists ||
|
||||||
|
!newCopyAppName.trim() ||
|
||||||
|
isCheckingName
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{copyAppMutation.isPending &&
|
||||||
|
copyAppMutation.variables?.withHistory === true && (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
)}
|
||||||
|
<div className="absolute top-1 right-1">
|
||||||
|
<span className="bg-blue-100 text-blue-800 text-xs font-medium px-1.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300 text-[10px]">
|
||||||
|
Recommended
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<p className="font-medium text-xs">
|
||||||
|
Copy app with history
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Copies the entire app, including the Git version
|
||||||
|
history.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start p-2 h-auto text-sm"
|
||||||
|
onClick={() =>
|
||||||
|
copyAppMutation.mutate({ withHistory: false })
|
||||||
|
}
|
||||||
|
disabled={
|
||||||
|
copyAppMutation.isPending ||
|
||||||
|
nameExists ||
|
||||||
|
!newCopyAppName.trim() ||
|
||||||
|
isCheckingName
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{copyAppMutation.isPending &&
|
||||||
|
copyAppMutation.variables?.withHistory === false && (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
)}
|
||||||
|
<div className="text-left">
|
||||||
|
<p className="font-medium text-xs">
|
||||||
|
Copy app without history
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Useful if the current app has a Git-related issue.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter className="pt-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setIsCopyDialogOpen(false)}
|
||||||
|
disabled={copyAppMutation.isPending}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Delete Confirmation Dialog */}
|
{/* Delete Confirmation Dialog */}
|
||||||
<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||||
<DialogContent className="max-w-sm p-4">
|
<DialogContent className="max-w-sm p-4">
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ const validInvokeChannels = [
|
|||||||
"chat:count-tokens",
|
"chat:count-tokens",
|
||||||
"create-chat",
|
"create-chat",
|
||||||
"create-app",
|
"create-app",
|
||||||
|
"copy-app",
|
||||||
"get-chat",
|
"get-chat",
|
||||||
"get-chats",
|
"get-chats",
|
||||||
"get-chat-logs",
|
"get-chat-logs",
|
||||||
|
|||||||
Reference in New Issue
Block a user