Merge pull request #607 from oTToDev-CE/ui/add-tab-connections

feat: Connections Tabs

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'];
@@ -32,13 +32,12 @@ 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') || '');
   const [isLocalModelsEnabled, setIsLocalModelsEnabled] = useState(() => {
     const savedLocalModelsState = Cookies.get('isLocalModelsEnabled');
     return savedLocalModelsState === 'true';
   });
-  const [isExperimentalFeature1Enabled, setIsExperimentalFeature1Enabled] = useState(false);
-  const [isExperimentalFeature2Enabled, setIsExperimentalFeature2Enabled] = useState(false);
 
   // Load base URLs from cookies
   const [baseUrls, setBaseUrls] = useState(() => {
@@ -77,6 +76,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' }] : []),
   ];
 
@@ -205,7 +205,12 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
 
   const versionHash = commit.commit; // Get the version hash from commit.json
 
-  // Update the toggle handlers to save to cookies
+  const handleSaveConnection = () => {
+    Cookies.set('githubUsername', githubUsername);
+    Cookies.set('githubToken', githubToken);
+    toast.success('GitHub credentials saved successfully!');
+  };
+
   const handleToggleDebug = (enabled: boolean) => {
     setIsDebugEnabled(enabled);
     Cookies.set('isDebugEnabled', String(enabled));
@@ -429,6 +434,39 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
                       <p className="text-bolt-elements-textSecondary">Version Hash: {versionHash}</p>
                     </div>
                   )}
+                  {activeTab === 'connection' && (
+                    <div className="p-4 mb-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3">
+                      <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">GitHub Connection</h3>
+                      <div className="flex mb-4">
+                        <div className="flex-1 mr-2">
+                          <label className="block text-sm text-bolt-elements-textSecondary mb-1">GitHub Username:</label>
+                          <input
+                            type="text"
+                            value={githubUsername}
+                            onChange={(e) => 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"
+                          />
+                        </div>
+                        <div className="flex-1">
+                          <label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label>
+                          <input
+                            type="password"
+                            value={githubToken}
+                            onChange={(e) => 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"
+                          />
+                        </div>
+                      </div>
+                      <div className="flex mb-4">
+                        <button
+                          onClick={handleSaveConnection}
+                          className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text"
+                        >
+                          Save Connection
+                        </button>
+                      </div>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

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;
@@ -180,21 +181,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);
                       }}
                     >
                       <div className="i-ph:github-logo" />

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
     }
   }
 }