refactor: remove redundant GitHub sync functionality

- Remove 'Push to GitHub' sync button from Workbench
- Clean up unused parameters and imports
- Improve UX by using only the proper GitHub deployment feature
- Fix ESLint and Prettier formatting issues
- Fix unused variable in GitHubDeploymentDialog

This removes the old sync functionality in favor of the comprehensive
GitHub deployment feature that builds projects before deployment.
This commit is contained in:
Stijnus
2025-08-29 20:29:08 +02:00
parent fdbf9ff1f7
commit 8ecb780cff
2 changed files with 85 additions and 97 deletions

View File

@@ -38,7 +38,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
const connection = getLocalStorage('github_connection'); const connection = getLocalStorage('github_connection');
// Set a default repository name based on the project name // Set a default repository name based on the project name
setRepoName(projectName.replace(/\s+/g, '-').toLowerCase()); setRepoName(projectName.replace(/\s+/g, '-').toLowerCase());
@@ -80,6 +80,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
if (!token) { if (!token) {
logStore.logError('No GitHub token available'); logStore.logError('No GitHub token available');
toast.error('GitHub authentication required'); toast.error('GitHub authentication required');
return; return;
} }
@@ -105,7 +106,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
try { try {
errorData = await response.json(); errorData = await response.json();
} catch (e) { } catch {
errorData = { message: 'Could not parse error response' }; errorData = { message: 'Could not parse error response' };
} }
@@ -149,10 +150,11 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
logStore.logError('Failed to parse GitHub repositories response', { parseError }); logStore.logError('Failed to parse GitHub repositories response', { parseError });
toast.error('Failed to parse repository data'); toast.error('Failed to parse repository data');
setRecentRepos([]); setRecentRepos([]);
return; return;
} }
} }
setRecentRepos(allRepos); setRecentRepos(allRepos);
} catch (error) { } catch (error) {
logStore.logError('Failed to fetch GitHub repositories', { error }); logStore.logError('Failed to fetch GitHub repositories', { error });
@@ -184,78 +186,79 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
// Initialize Octokit with the GitHub token // Initialize Octokit with the GitHub token
const octokit = new Octokit({ auth: connection.token }); const octokit = new Octokit({ auth: connection.token });
let repoExists = false; let repoExists = false;
try { try {
// Check if the repository already exists // Check if the repository already exists
const { data: existingRepo } = await octokit.repos.get({ const { data: existingRepo } = await octokit.repos.get({
owner: connection.user.login, owner: connection.user.login,
repo: repoName, repo: repoName,
}); });
repoExists = true; repoExists = true;
// If we get here, the repo exists - confirm overwrite // If we get here, the repo exists - confirm overwrite
let confirmMessage = `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`; let confirmMessage = `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`;
// Add visibility change warning if needed // Add visibility change warning if needed
if (existingRepo.private !== isPrivate) { if (existingRepo.private !== isPrivate) {
const visibilityChange = isPrivate const visibilityChange = isPrivate
? 'This will also change the repository from public to private.' ? 'This will also change the repository from public to private.'
: 'This will also change the repository from private to public.'; : 'This will also change the repository from private to public.';
confirmMessage += `\n\n${visibilityChange}`; confirmMessage += `\n\n${visibilityChange}`;
} }
const confirmOverwrite = window.confirm(confirmMessage); const confirmOverwrite = window.confirm(confirmMessage);
if (!confirmOverwrite) { if (!confirmOverwrite) {
setIsLoading(false); setIsLoading(false);
return; return;
} }
// If visibility needs to be updated // If visibility needs to be updated
if (existingRepo.private !== isPrivate) { if (existingRepo.private !== isPrivate) {
await octokit.repos.update({ await octokit.repos.update({
owner: connection.user.login, owner: connection.user.login,
repo: repoName, repo: repoName,
private: isPrivate private: isPrivate,
}); });
} }
} catch (error: any) { } catch (error: any) {
// 404 means repo doesn't exist, which is what we want for new repos // 404 means repo doesn't exist, which is what we want for new repos
if (error.status !== 404) { if (error.status !== 404) {
throw error; throw error;
} }
} }
// Create repository if it doesn't exist // Create repository if it doesn't exist
if (!repoExists) { if (!repoExists) {
const { data: newRepo } = await octokit.repos.createForAuthenticatedUser({ const { data: newRepo } = await octokit.repos.createForAuthenticatedUser({
name: repoName, name: repoName,
private: isPrivate, private: isPrivate,
// Initialize with a README to avoid empty repository issues // Initialize with a README to avoid empty repository issues
auto_init: true, auto_init: true,
// Create a .gitignore file for the project // Create a .gitignore file for the project
gitignore_template: "Node", gitignore_template: 'Node',
}); });
// Set the URL for success dialog // Set the URL for success dialog
setCreatedRepoUrl(newRepo.html_url); setCreatedRepoUrl(newRepo.html_url);
// Since we created the repo with auto_init, we need to wait for GitHub to initialize it // Since we created the repo with auto_init, we need to wait for GitHub to initialize it
console.log('Created new repository with auto_init, waiting for GitHub to initialize it...'); console.log('Created new repository with auto_init, waiting for GitHub to initialize it...');
// Wait a moment for GitHub to set up the initial commit // Wait a moment for GitHub to set up the initial commit
await new Promise(resolve => setTimeout(resolve, 2000)); await new Promise((resolve) => setTimeout(resolve, 2000));
} else { } else {
// Set URL for existing repo // Set URL for existing repo
setCreatedRepoUrl(`https://github.com/${connection.user.login}/${repoName}`); setCreatedRepoUrl(`https://github.com/${connection.user.login}/${repoName}`);
} }
// Process files to upload // Process files to upload
const fileEntries = Object.entries(files); const fileEntries = Object.entries(files);
// Filter out files and format them for display // Filter out files and format them for display
const fileList = fileEntries.map(([filePath, content]) => { const fileList = fileEntries.map(([filePath, content]) => {
// The paths are already properly formatted in the GitHubDeploy component // The paths are already properly formatted in the GitHubDeploy component
@@ -264,14 +267,16 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
size: new TextEncoder().encode(content).length, size: new TextEncoder().encode(content).length,
}; };
}); });
setPushedFiles(fileList); setPushedFiles(fileList);
// Now we need to handle the repository, whether it's new or existing /*
// Get the default branch for the repository * Now we need to handle the repository, whether it's new or existing
* Get the default branch for the repository
*/
let defaultBranch: string; let defaultBranch: string;
let baseSha: string | null = null; let baseSha: string | null = null;
try { try {
// For both new and existing repos, get the repository info // For both new and existing repos, get the repository info
const { data: repo } = await octokit.repos.get({ const { data: repo } = await octokit.repos.get({
@@ -280,7 +285,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
}); });
defaultBranch = repo.default_branch || 'main'; defaultBranch = repo.default_branch || 'main';
console.log(`Repository default branch: ${defaultBranch}`); console.log(`Repository default branch: ${defaultBranch}`);
// For a newly created repo (or existing one), get the reference to the default branch // For a newly created repo (or existing one), get the reference to the default branch
try { try {
const { data: refData } = await octokit.git.getRef({ const { data: refData } = await octokit.git.getRef({
@@ -288,17 +293,17 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
repo: repoName, repo: repoName,
ref: `heads/${defaultBranch}`, ref: `heads/${defaultBranch}`,
}); });
baseSha = refData.object.sha; baseSha = refData.object.sha;
console.log(`Found existing reference with SHA: ${baseSha}`); console.log(`Found existing reference with SHA: ${baseSha}`);
// Get the latest commit to use as a base for our tree // Get the latest commit to use as a base for our tree
const { data: commitData } = await octokit.git.getCommit({ const { data: commitData } = await octokit.git.getCommit({
owner: connection.user.login, owner: connection.user.login,
repo: repoName, repo: repoName,
commit_sha: baseSha, commit_sha: baseSha,
}); });
// Store the base tree SHA for tree creation // Store the base tree SHA for tree creation
baseSha = commitData.tree.sha; baseSha = commitData.tree.sha;
console.log(`Using base tree SHA: ${baseSha}`); console.log(`Using base tree SHA: ${baseSha}`);
@@ -311,10 +316,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
defaultBranch = 'main'; defaultBranch = 'main';
baseSha = null; baseSha = null;
} }
try { try {
console.log('Creating tree for repository'); console.log('Creating tree for repository');
// Create a tree with all files // Create a tree with all files
const tree = fileEntries.map(([filePath, content]) => ({ const tree = fileEntries.map(([filePath, content]) => ({
path: filePath, // We've already formatted the paths correctly path: filePath, // We've already formatted the paths correctly
@@ -322,9 +327,9 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
type: 'blob' as const, type: 'blob' as const,
content, content,
})); }));
console.log(`Creating tree with ${tree.length} files using base: ${baseSha || 'none'}`); console.log(`Creating tree with ${tree.length} files using base: ${baseSha || 'none'}`);
// Create a tree with all the files, using the base tree if available // Create a tree with all the files, using the base tree if available
const { data: treeData } = await octokit.git.createTree({ const { data: treeData } = await octokit.git.createTree({
owner: connection.user.login, owner: connection.user.login,
@@ -332,12 +337,12 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
tree, tree,
base_tree: baseSha || undefined, base_tree: baseSha || undefined,
}); });
console.log('Tree created successfully', treeData.sha); console.log('Tree created successfully', treeData.sha);
// Get the current reference to use as parent for our commit // Get the current reference to use as parent for our commit
let parentCommitSha: string | null = null; let parentCommitSha: string | null = null;
try { try {
const { data: refData } = await octokit.git.getRef({ const { data: refData } = await octokit.git.getRef({
owner: connection.user.login, owner: connection.user.login,
@@ -350,9 +355,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
console.log('No reference found, this is a brand new repo', refError); console.log('No reference found, this is a brand new repo', refError);
parentCommitSha = null; parentCommitSha = null;
} }
// Create a commit with the tree // Create a commit with the tree
console.log('Creating commit'); console.log('Creating commit');
const { data: commitData } = await octokit.git.createCommit({ const { data: commitData } = await octokit.git.createCommit({
owner: connection.user.login, owner: connection.user.login,
repo: repoName, repo: repoName,
@@ -360,9 +366,9 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
tree: treeData.sha, tree: treeData.sha,
parents: parentCommitSha ? [parentCommitSha] : [], // Use parent if available parents: parentCommitSha ? [parentCommitSha] : [], // Use parent if available
}); });
console.log('Commit created successfully', commitData.sha); console.log('Commit created successfully', commitData.sha);
// Update the reference to point to the new commit // Update the reference to point to the new commit
try { try {
console.log(`Updating reference: heads/${defaultBranch} to ${commitData.sha}`); console.log(`Updating reference: heads/${defaultBranch} to ${commitData.sha}`);
@@ -376,7 +382,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
console.log('Reference updated successfully'); console.log('Reference updated successfully');
} catch (refError) { } catch (refError) {
console.log('Failed to update reference, attempting to create it', refError); console.log('Failed to update reference, attempting to create it', refError);
// If the reference doesn't exist, create it (shouldn't happen with auto_init, but just in case) // If the reference doesn't exist, create it (shouldn't happen with auto_init, but just in case)
try { try {
await octokit.git.createRef({ await octokit.git.createRef({
@@ -388,31 +394,42 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
console.log('Reference created successfully'); console.log('Reference created successfully');
} catch (createRefError) { } catch (createRefError) {
console.error('Error creating reference:', createRefError); console.error('Error creating reference:', createRefError);
const errorMsg = typeof createRefError === 'object' && createRefError !== null && 'message' in createRefError ? String(createRefError.message) : 'Unknown error';
const errorMsg =
typeof createRefError === 'object' && createRefError !== null && 'message' in createRefError
? String(createRefError.message)
: 'Unknown error';
throw new Error(`Failed to create Git reference: ${errorMsg}`); throw new Error(`Failed to create Git reference: ${errorMsg}`);
} }
} }
} catch (gitError) { } catch (gitError) {
console.error('Error with git operations:', gitError); console.error('Error with git operations:', gitError);
const gitErrorMsg = typeof gitError === 'object' && gitError !== null && 'message' in gitError ? String(gitError.message) : 'Unknown error';
const gitErrorMsg =
typeof gitError === 'object' && gitError !== null && 'message' in gitError
? String(gitError.message)
: 'Unknown error';
throw new Error(`Failed during git operations: ${gitErrorMsg}`); throw new Error(`Failed during git operations: ${gitErrorMsg}`);
} }
// Save the repository information for this chat // Save the repository information for this chat
localStorage.setItem(`github-repo-${currentChatId}`, JSON.stringify({ localStorage.setItem(
owner: connection.user.login, `github-repo-${currentChatId}`,
name: repoName, JSON.stringify({
url: `https://github.com/${connection.user.login}/${repoName}`, owner: connection.user.login,
})); name: repoName,
url: `https://github.com/${connection.user.login}/${repoName}`,
}),
);
// Show success dialog // Show success dialog
setShowSuccessDialog(true); setShowSuccessDialog(true);
} catch (error) { } catch (error) {
console.error('Error pushing to GitHub:', error); console.error('Error pushing to GitHub:', error);
// Attempt to extract more specific error information // Attempt to extract more specific error information
let errorMessage = 'Failed to push to GitHub.'; let errorMessage = 'Failed to push to GitHub.';
if (error instanceof Error) { if (error instanceof Error) {
errorMessage = error.message; errorMessage = error.message;
} else if (typeof error === 'object' && error !== null) { } else if (typeof error === 'object' && error !== null) {
@@ -420,13 +437,13 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
if ('message' in error) { if ('message' in error) {
errorMessage = error.message as string; errorMessage = error.message as string;
} }
// GitHub API errors // GitHub API errors
if ('documentation_url' in error) { if ('documentation_url' in error) {
console.log('GitHub API documentation:', error.documentation_url); console.log('GitHub API documentation:', error.documentation_url);
} }
} }
toast.error(`GitHub deployment failed: ${errorMessage}`); toast.error(`GitHub deployment failed: ${errorMessage}`);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
@@ -443,9 +460,10 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
const handleAuthDialogClose = () => { const handleAuthDialogClose = () => {
setShowAuthDialog(false); setShowAuthDialog(false);
// Refresh user data after auth // Refresh user data after auth
const connection = getLocalStorage('github_connection'); const connection = getLocalStorage('github_connection');
if (connection?.user && connection?.token) { if (connection?.user && connection?.token) {
setUser(connection.user); setUser(connection.user);
fetchRecentRepos(connection.token); fetchRecentRepos(connection.token);
@@ -657,7 +675,7 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
</motion.div> </motion.div>
</div> </div>
</Dialog.Portal> </Dialog.Portal>
{/* GitHub Auth Dialog */} {/* GitHub Auth Dialog */}
<GitHubAuthDialog isOpen={showAuthDialog} onClose={handleAuthDialogClose} /> <GitHubAuthDialog isOpen={showAuthDialog} onClose={handleAuthDialogClose} />
</Dialog.Root> </Dialog.Root>
@@ -906,9 +924,9 @@ export function GitHubDeploymentDialog({ isOpen, onClose, projectName, files }:
</motion.div> </motion.div>
</div> </div>
</Dialog.Portal> </Dialog.Portal>
{/* GitHub Auth Dialog */} {/* GitHub Auth Dialog */}
<GitHubAuthDialog isOpen={showAuthDialog} onClose={handleAuthDialogClose} /> <GitHubAuthDialog isOpen={showAuthDialog} onClose={handleAuthDialogClose} />
</Dialog.Root> </Dialog.Root>
); );
} }

View File

@@ -22,7 +22,7 @@ import { renderLogger } from '~/utils/logger';
import { EditorPanel } from './EditorPanel'; import { EditorPanel } from './EditorPanel';
import { Preview } from './Preview'; import { Preview } from './Preview';
import useViewport from '~/lib/hooks'; import useViewport from '~/lib/hooks';
import { PushToGitHubDialog } from '~/components/@settings/tabs/connections/components/PushToGitHubDialog';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { usePreviewStore } from '~/lib/stores/previews'; import { usePreviewStore } from '~/lib/stores/previews';
import { chatStore } from '~/lib/stores/chat'; import { chatStore } from '~/lib/stores/chat';
@@ -279,11 +279,17 @@ const FileModifiedDropdown = memo(
); );
export const Workbench = memo( export const Workbench = memo(
({ chatStarted, isStreaming, metadata, updateChatMestaData, setSelectedElement }: WorkspaceProps) => { ({
chatStarted,
isStreaming,
metadata: _metadata,
updateChatMestaData: _updateChatMestaData,
setSelectedElement,
}: WorkspaceProps) => {
renderLogger.trace('Workbench'); renderLogger.trace('Workbench');
const [isSyncing, setIsSyncing] = useState(false); const [isSyncing, setIsSyncing] = useState(false);
const [isPushDialogOpen, setIsPushDialogOpen] = useState(false);
const [fileHistory, setFileHistory] = useState<Record<string, FileHistory>>({}); const [fileHistory, setFileHistory] = useState<Record<string, FileHistory>>({});
// const modifiedFiles = Array.from(useStore(workbenchStore.unsavedFiles).keys()); // const modifiedFiles = Array.from(useStore(workbenchStore.unsavedFiles).keys());
@@ -436,17 +442,6 @@ export const Workbench = memo(
<span>{isSyncing ? 'Syncing...' : 'Sync Files'}</span> <span>{isSyncing ? 'Syncing...' : 'Sync Files'}</span>
</div> </div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item
className={classNames(
'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
)}
onClick={() => setIsPushDialogOpen(true)}
>
<div className="flex items-center gap-2">
<div className="i-ph:git-branch" />
Push to GitHub
</div>
</DropdownMenu.Item>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
</div> </div>
@@ -493,31 +488,6 @@ export const Workbench = memo(
</div> </div>
</div> </div>
</div> </div>
<PushToGitHubDialog
isOpen={isPushDialogOpen}
onClose={() => setIsPushDialogOpen(false)}
onPush={async (repoName, username, token, isPrivate) => {
try {
console.log('Dialog onPush called with isPrivate =', isPrivate);
const commitMessage = prompt('Please enter a commit message:', 'Initial commit') || 'Initial commit';
const repoUrl = await workbenchStore.pushToGitHub(repoName, commitMessage, username, token, isPrivate);
if (updateChatMestaData && !metadata?.gitUrl) {
updateChatMestaData({
...(metadata || {}),
gitUrl: repoUrl,
});
}
return repoUrl;
} catch (error) {
console.error('Error pushing to GitHub:', error);
toast.error('Failed to push to GitHub');
throw error;
}
}}
/>
</motion.div> </motion.div>
) )
); );