Refactor project session detail page by removing the branch creation functionality and consolidating remote management options. Update UI elements for clarity, including renaming buttons and improving user prompts for managing branches and remotes. Enhance loading states and feedback for remote configuration actions.

Author: Gkrumbach07

components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx

@@ -38,7 +38,7 @@ import {
   useSessionK8sResources,
   useContinueSession,
 } from "@/services/queries";
-import { useWorkspaceList, useGitMergeStatus, useGitPull, useGitPush, useGitCreateBranch, useGitListBranches } from "@/services/queries/use-workspace";
+import { useWorkspaceList, useGitMergeStatus, useGitPull, useGitPush, useGitListBranches } from "@/services/queries/use-workspace";
 import { successToast, errorToast } from "@/hooks/use-toast";
 import { useOOTBWorkflows, useWorkflowMetadata } from "@/services/queries/use-workflows";
 import { useMutation } from "@tanstack/react-query";
@@ -90,7 +90,6 @@ export default function ProjectSessionDetailPage({
   const [synchronizing, setSynchronizing] = useState(false);
   const [newBranchName, setNewBranchName] = useState("");
   const [showCreateBranch, setShowCreateBranch] = useState(false);
-  const [branchModalOpen, setBranchModalOpen] = useState(false);
   const [fileViewerOpen, setFileViewerOpen] = useState(false);
   const [viewingFile, setViewingFile] = useState<{path: string; content: string} | null>(null);
   const [loadingFileContent, setLoadingFileContent] = useState(false);
@@ -250,7 +249,6 @@ export default function ProjectSessionDetailPage({
   );
   const gitPullMutation = useGitPull();
   const gitPushMutation = useGitPush();
-  const gitCreateBranchMutation = useGitCreateBranch();
 
   // Fetch directory file listing
   const { data: directoryFiles = [], refetch: refetchDirectoryFiles } = useWorkspaceList(
@@ -627,39 +625,6 @@ export default function ProjectSessionDetailPage({
     }
   };
 
-  // Handler to create new branch
-  const handleCreateBranch = () => {
-    if (!newBranchName.trim()) {
-      errorToast("Branch name is required");
-      return;
-    }
-
-    const branchName = newBranchName.trim();
-
-    gitCreateBranchMutation.mutate(
-      {
-        projectName,
-        sessionName,
-        branchName,
-        path: selectedDirectory.path,
-      },
-      {
-        onSuccess: () => {
-          successToast(`Branch ${branchName} created and switched`);
-          const newRemotes = {...directoryRemotes};
-          newRemotes[selectedDirectory.path] = {
-            url: currentRemote?.url || '',
-            branch: branchName,
-          };
-          setDirectoryRemotes(newRemotes);
-          setNewBranchName("");
-          setShowCreateBranch(false);
-          refetchMergeStatus();
-        },
-        onError: (err) => errorToast(err instanceof Error ? err.message : "Failed to create branch"),
-      }
-    );
-  };
 
   // Helper to derive repo folder from URL
   const deriveRepoFolderFromUrl = useCallback((url: string): string => {
@@ -1437,7 +1402,7 @@ export default function ProjectSessionDetailPage({
                     <span>Directory Browser</span>
                     {gitStatus?.hasChanges && (
                       <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200 ml-auto mr-2">
-                        {gitStatus.uncommittedFiles} changes
+                        +{gitStatus.totalAdded} -{gitStatus.totalRemoved}
                       </Badge>
                     )}
                   </div>
@@ -1586,25 +1551,16 @@ export default function ProjectSessionDetailPage({
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem
-                                onClick={() => {
-                                  setNewBranchName(`session-${sessionName.substring(0, 20)}`);
-                                  setShowCreateBranch(true);
-                                  setBranchModalOpen(true);
-                                }}
-                              >
-                                <GitBranch className="mr-2 h-3 w-3" />
-                                Switch Branch
-                              </DropdownMenuItem>
                               <DropdownMenuItem
                                 onClick={() => {
                                   setRemoteUrl(currentRemote?.url || '');
                                   setRemoteBranch(currentRemote?.branch || 'main');
+                                  setShowCreateBranch(false);
                                   setRemoteDialogOpen(true);
                                 }}
                               >
                                 <Edit className="mr-2 h-3 w-3" />
-                                Edit Remote
+                                Manage Remote
                               </DropdownMenuItem>
                               <DropdownMenuSeparator />
                               <DropdownMenuItem
@@ -1941,13 +1897,13 @@ export default function ProjectSessionDetailPage({
       </DialogContent>
     </Dialog>
 
-    {/* Configure Directory Remote Dialog */}
+    {/* Manage Remote Dialog - Combined URL and Branch Management */}
     <Dialog open={remoteDialogOpen} onOpenChange={setRemoteDialogOpen}>
-      <DialogContent>
+      <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>Configure Git Remote for {selectedDirectory.name}</DialogTitle>
+          <DialogTitle>Manage Remote for {selectedDirectory.name}</DialogTitle>
           <DialogDescription>
-            Set up a Git repository to save and synchronize changes for this directory.
+            Configure repository URL and select branch for git operations
           </DialogDescription>
         </DialogHeader>
 
@@ -1960,144 +1916,110 @@ export default function ProjectSessionDetailPage({
               value={remoteUrl}
               onChange={(e) => setRemoteUrl(e.target.value)}
             />
-            <p className="text-xs text-muted-foreground">
-              The repository where changes will be pushed. Git will be initialized if not already done.
-            </p>
           </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="remote-branch">Branch</Label>
-            <Input
-              id="remote-branch"
-              placeholder="main"
-              value={remoteBranch}
-              onChange={(e) => setRemoteBranch(e.target.value)}
-            />
-            <p className="text-xs text-muted-foreground">
-              Branch to push to (will be created if it doesn&apos;t exist)
-            </p>
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => setRemoteDialogOpen(false)}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={handleConfigureRemote}
-            disabled={!remoteUrl.trim()}
-          >
-            Configure Remote
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-    
-    {/* Branch Management Dialog */}
-    <Dialog open={branchModalOpen} onOpenChange={setBranchModalOpen}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Manage Branch for {selectedDirectory.name}</DialogTitle>
-          <DialogDescription>
-            Switch branches or create a new one for git operations
-          </DialogDescription>
-        </DialogHeader>
-        
-        <div className="space-y-4">
           {!showCreateBranch ? (
-            <>
-              <div className="space-y-2">
-                <Label>Switch to Existing Branch</Label>
+            <div className="space-y-2">
+              <Label htmlFor="remote-branch">Branch</Label>
+              <div className="flex gap-2">
                 <Select 
-                  value={currentRemote?.branch || 'main'} 
-                  onValueChange={(branch) => {
-                    const newRemotes = {...directoryRemotes};
-                    newRemotes[selectedDirectory.path] = { 
-                      url: currentRemote?.url || '', 
-                      branch 
-                    };
-                    setDirectoryRemotes(newRemotes);
-                    refetchMergeStatus();
-                    setBranchModalOpen(false);
-                  }}
+                  value={remoteBranch} 
+                  onValueChange={(branch) => setRemoteBranch(branch)}
                 >
-                  <SelectTrigger>
+                  <SelectTrigger className="flex-1">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
+                    {!remoteBranches.includes(remoteBranch) && remoteBranch && (
+                      <SelectItem value={remoteBranch}>{remoteBranch} (current)</SelectItem>
+                    )}
                     {remoteBranches.map(b => (
                       <SelectItem key={b} value={b}>{b}</SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
+                <Button 
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    setShowCreateBranch(true);
+                    setNewBranchName(`session-${sessionName.substring(0, 20)}`);
+                  }}
+                >
+                  New
+                </Button>
               </div>
-              <Button 
-                variant="outline" 
-                className="w-full"
-                onClick={() => setShowCreateBranch(true)}
-              >
-                Create New Branch
-              </Button>
-            </>
+            </div>
           ) : (
             <div className="space-y-2">
-              <Label>New Branch Name</Label>
+              <Label>Create New Branch</Label>
               <Input 
                 placeholder="branch-name"
                 value={newBranchName}
                 onChange={e => setNewBranchName(e.target.value)}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && newBranchName.trim()) {
-                    handleCreateBranch();
-                    setBranchModalOpen(false);
+                    setRemoteBranch(newBranchName.trim());
+                    setShowCreateBranch(false);
                   }
                 }}
                 autoFocus
               />
               <div className="flex gap-2">
                 <Button 
+                  size="sm"
                   className="flex-1"
                   onClick={() => {
-                    handleCreateBranch();
-                    setBranchModalOpen(false);
+                    setRemoteBranch(newBranchName.trim());
+                    setShowCreateBranch(false);
                   }}
-                  disabled={!newBranchName.trim() || gitCreateBranchMutation.isPending}
+                  disabled={!newBranchName.trim()}
                 >
-                  {gitCreateBranchMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : "Create"}
+                  Set Branch
                 </Button>
                 <Button 
+                  size="sm"
                   variant="outline"
                   onClick={() => {
                     setShowCreateBranch(false);
                     setNewBranchName("");
                   }}
                 >
-                  Back
+                  Cancel
                 </Button>
               </div>
             </div>
           )}
 
-          {mergeStatus && (
-            <div className="text-sm border-t pt-3">
+          {mergeStatus && !showCreateBranch && (
+            <div className="text-xs text-muted-foreground border-t pt-2">
               {mergeStatus.canMergeClean ? (
-                <div className="text-green-600">✓ Can merge cleanly</div>
+                <span className="text-green-600">✓ Can merge cleanly</span>
               ) : (
-                <div className="text-amber-600">⚠️ {mergeStatus.conflictingFiles.length} conflicts detected</div>
+                <span className="text-amber-600">⚠️ {mergeStatus.conflictingFiles.length} conflicts</span>
               )}
             </div>
           )}
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => {
-            setBranchModalOpen(false);
-            setShowCreateBranch(false);
-          }}>
-            Close
+          <Button
+            variant="outline"
+            onClick={() => {
+              setRemoteDialogOpen(false);
+              setShowCreateBranch(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              handleConfigureRemote();
+              setShowCreateBranch(false);
+            }}
+            disabled={!remoteUrl.trim()}
+          >
+            Save Remote
           </Button>
         </DialogFooter>
       </DialogContent>