From 9aaa3b560cdfc44c63d2d7e60def2ded53aa0928 Mon Sep 17 00:00:00 2001 From: Dustin Loring Date: Mon, 9 Dec 2024 09:26:39 -0500 Subject: [PATCH] feat: Connections Tabs Added a connections tab, now you can enter GitHub creds and store them in cookies like the API Keys --- app/components/settings/SettingsWindow.tsx | 56 ++++++++++++++++++- app/components/workbench/Workbench.client.tsx | 37 +++++------- app/lib/stores/workbench.ts | 17 +++--- 3 files changed, 79 insertions(+), 31 deletions(-) diff --git a/app/components/settings/SettingsWindow.tsx b/app/components/settings/SettingsWindow.tsx index c70238e..2c48943 100644 --- a/app/components/settings/SettingsWindow.tsx +++ b/app/components/settings/SettingsWindow.tsx @@ -18,7 +18,7 @@ interface SettingsProps { onClose: () => void; } -type TabType = 'chat-history' | 'providers' | 'features' | 'debug'; +type TabType = 'chat-history' | 'providers' | 'features' | 'debug' | 'connection'; // Providers that support base URL configuration const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike']; @@ -30,6 +30,8 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => { const [searchTerm, setSearchTerm] = useState(''); const [isDeleting, setIsDeleting] = useState(false); const [isJustSayEnabled, setIsJustSayEnabled] = useState(false); + const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || ''); + const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || ''); // Load base URLs from cookies const [baseUrls, setBaseUrls] = useState(() => { @@ -68,6 +70,7 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => { { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book' }, { id: 'providers', label: 'Providers', icon: 'i-ph:key' }, { id: 'features', label: 'Features', icon: 'i-ph:star' }, + { id: 'connection', label: 'Connection', icon: 'i-ph:link' }, ...(isDebugEnabled ? [{ id: 'debug' as TabType, label: 'Debug Tab', icon: 'i-ph:bug' }] : []), ]; @@ -192,6 +195,18 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => { const versionHash = commit.commit; // Get the version hash from commit.json + const handleSaveConnection = () => { + Cookies.set('githubUsername', githubUsername); + Cookies.set('githubToken', githubToken); + toast.success('GitHub credentials saved successfully!'); + }; + + const handleTestConnection = () => { + // Implement the logic to test the GitHub connection here + // For example, you could make an API call to GitHub to verify the credentials + toast.info('Testing GitHub connection...'); + }; + return ( @@ -431,6 +446,45 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {

Version Hash: {versionHash}

)} + {activeTab === 'connection' && ( +
+

GitHub Connection

+
+
+ + setGithubUsername(e.target.value)} + className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor" + /> +
+
+ + setGithubToken(e.target.value)} + className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor" + /> +
+
+
+ + +
+
+ )} diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx index fb2f49e..bb2249f 100644 --- a/app/components/workbench/Workbench.client.tsx +++ b/app/components/workbench/Workbench.client.tsx @@ -17,6 +17,7 @@ import { renderLogger } from '~/utils/logger'; import { EditorPanel } from './EditorPanel'; import { Preview } from './Preview'; import useViewport from '~/lib/hooks'; +import Cookies from 'js-cookie'; interface WorkspaceProps { chatStarted?: boolean; @@ -158,15 +159,6 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) => {isSyncing ?
:
} {isSyncing ? 'Syncing...' : 'Sync Files'} - { - workbenchStore.toggleTerminal(!workbenchStore.showTerminal.get()); - }} - > -
- Toggle Terminal - { @@ -180,21 +172,22 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) => return; } - const githubUsername = prompt('Please enter your GitHub username:'); + const githubUsername = Cookies.get('githubUsername'); + const githubToken = Cookies.get('githubToken'); - if (!githubUsername) { - alert('GitHub username is required. Push to GitHub cancelled.'); - return; + if (!githubUsername || !githubToken) { + const usernameInput = prompt('Please enter your GitHub username:'); + const tokenInput = prompt('Please enter your GitHub personal access token:'); + + if (!usernameInput || !tokenInput) { + alert('GitHub username and token are required. Push to GitHub cancelled.'); + return; + } + + workbenchStore.pushToGitHub(repoName, usernameInput, tokenInput); + } else { + workbenchStore.pushToGitHub(repoName, githubUsername, githubToken); } - - const githubToken = prompt('Please enter your GitHub personal access token:'); - - if (!githubToken) { - alert('GitHub token is required. Push to GitHub cancelled.'); - return; - } - - workbenchStore.pushToGitHub(repoName, githubUsername, githubToken); }} >
diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts index de3a11e..15482c2 100644 --- a/app/lib/stores/workbench.ts +++ b/app/lib/stores/workbench.ts @@ -15,6 +15,7 @@ import { Octokit, type RestEndpointMethodTypes } from '@octokit/rest'; import * as nodePath from 'node:path'; import { extractRelativePath } from '~/utils/diff'; import { description } from '~/lib/persistence'; +import Cookies from 'js-cookie'; export interface ArtifactState { id: string; @@ -396,15 +397,14 @@ export class WorkbenchStore { return syncedFiles; } - async pushToGitHub(repoName: string, githubUsername: string, ghToken: string) { + async pushToGitHub(repoName: string, githubUsername?: string, ghToken?: string) { try { - // Get the GitHub auth token from environment variables - const githubToken = ghToken; + // Use cookies if username and token are not provided + const githubToken = ghToken || Cookies.get('githubToken'); + const owner = githubUsername || Cookies.get('githubUsername'); - const owner = githubUsername; - - if (!githubToken) { - throw new Error('GitHub token is not set in environment variables'); + if (!githubToken || !owner) { + throw new Error('GitHub token or username is not set in cookies or provided.'); } // Initialize Octokit with the auth token @@ -501,7 +501,8 @@ export class WorkbenchStore { alert(`Repository created and code pushed: ${repo.html_url}`); } catch (error) { - console.error('Error pushing to GitHub:', error instanceof Error ? error.message : String(error)); + console.error('Error pushing to GitHub:', error); + throw error; // Rethrow the error for further handling } } }