team's upload and team's id passed

blessing-sanusi · blessing-sanusi · commit 2c79c573aae8 · 2025-08-07T14:06:45.000-05:00
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
@@ -8,7 +8,7 @@ function App() {
     <Router>
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="/plan/:planId/create" element={<PlanCreatePage />} />
+        <Route path="/plan/:planId/create/:teamId?" element={<PlanCreatePage />} />
         <Route path="/plan/:planId" element={<PlanPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
diff --git a/src/frontend/src/components/common/SettingsButton.tsx b/src/frontend/src/components/common/SettingsButton.tsx
@@ -28,11 +28,13 @@ import { TeamService } from '../../services/TeamService';
 
 interface SettingsButtonProps {
   onTeamSelect?: (team: TeamConfig) => void;
+  onTeamUpload?: () => Promise<void>;
   selectedTeam?: TeamConfig | null;
 }
 
 const SettingsButton: React.FC<SettingsButtonProps> = ({
   onTeamSelect,
+  onTeamUpload,
   selectedTeam,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -46,10 +48,14 @@ const SettingsButton: React.FC<SettingsButtonProps> = ({
     setLoading(true);
     setError(null);
     try {
+      console.log('SettingsButton: Loading teams...');
       // Get all teams from the API (no separation between default and user teams)
       const teamsData = await TeamService.getUserTeams();
+      console.log('SettingsButton: Teams loaded:', teamsData);
+      console.log('SettingsButton: Number of teams:', teamsData.length);
       setTeams(teamsData);
     } catch (err: any) {
+      console.error('SettingsButton: Error loading teams:', err);
       setError(err.message || 'Failed to load teams');
     } finally {
       setLoading(false);
@@ -86,18 +92,29 @@ const SettingsButton: React.FC<SettingsButtonProps> = ({
     const file = event.target.files?.[0];
     if (!file) return;
 
+    console.log('SettingsButton: Starting file upload for:', file.name);
     setUploadLoading(true);
     setError(null);
 
     try {
       const result = await TeamService.uploadCustomTeam(file);
+      console.log('SettingsButton: Upload result:', result);
       if (result.success) {
+        console.log('SettingsButton: Upload successful, reloading teams...');
         // Reload teams to include the new custom team
         await loadTeams();
+        console.log('SettingsButton: Teams reloaded after upload');
+        // Notify parent component about the upload
+        if (onTeamUpload) {
+          console.log('SettingsButton: Notifying parent about upload...');
+          await onTeamUpload();
+        }
       } else {
+        console.error('SettingsButton: Upload failed:', result.error);
         setError(result.error || 'Failed to upload team configuration');
       }
     } catch (err: any) {
+      console.error('SettingsButton: Upload exception:', err);
       setError(err.message || 'Failed to upload team configuration');
     } finally {
       setUploadLoading(false);
diff --git a/src/frontend/src/components/content/HomeInput.tsx b/src/frontend/src/components/content/HomeInput.tsx
@@ -73,7 +73,13 @@ const HomeInput: React.FC<HomeInputProps> = ({
                 if (response.plan_id && response.plan_id !== null) {
                     showToast("Plan created!", "success");
                     dismissToast(id);
-                    navigate(`/plan/${response.plan_id}/create`);
+                    
+                    // Navigate with team ID if a team is selected
+                    const navPath = selectedTeam 
+                        ? `/plan/${response.plan_id}/create/${selectedTeam.team_id}`
+                        : `/plan/${response.plan_id}/create`;
+                    console.log('HomeInput: Navigating to:', navPath, 'with team:', selectedTeam?.name);
+                    navigate(navPath);
                 } else {
                     showToast("Failed to create plan", "error");
                     dismissToast(id);
@@ -133,33 +139,33 @@ const HomeInput: React.FC<HomeInputProps> = ({
 
     // Convert team starting_tasks to QuickTask format or use default
     const tasksToDisplay: QuickTask[] = selectedTeam ? 
-        selectedTeam.starting_tasks.map((task, index) => ({
-            id: `team-task-${index}`,
-            title: task,
-            description: task,
-            icon: quickTasks[index % quickTasks.length]?.icon || quickTasks[0].icon
-        })) : quickTasks;
+        selectedTeam.starting_tasks.map((task, index) => {
+            // Handle both string tasks and StartingTask objects
+            if (typeof task === 'string') {
+                return {
+                    id: `team-task-${index}`,
+                    title: task,
+                    description: task,
+                    icon: quickTasks[index % quickTasks.length]?.icon || quickTasks[0].icon
+                };
+            } else {
+                // Handle StartingTask objects
+                const startingTask = task as any; // Type assertion for now
+                return {
+                    id: startingTask.id || `team-task-${index}`,
+                    title: startingTask.name || startingTask.prompt || 'Task',
+                    description: startingTask.prompt || startingTask.name || 'Task description',
+                    icon: startingTask.logo || quickTasks[index % quickTasks.length]?.icon || quickTasks[0].icon
+                };
+            }
+        }) : quickTasks;
 
     return (
         <div className="home-input-container">
             <div className="home-input-content">
                 <div className="home-input-center-content">
                     <div className="home-input-title-wrapper">
                         <Title2>How can I help?</Title2>
-                        {selectedTeam && (
-                            <div style={{ 
-                                display: 'flex', 
-                                alignItems: 'center', 
-                                gap: '8px', 
-                                marginTop: '8px',
-                                justifyContent: 'center'
-                            }}>
-                                <span style={{ fontSize: '20px' }}>{selectedTeam.logo}</span>
-                                <Body1Strong style={{ color: '#666' }}>
-                                    {selectedTeam.name}
-                                </Body1Strong>
-                            </div>
-                        )}
                     </div>
 
                     {/* Show RAI error if present */}
diff --git a/src/frontend/src/components/content/PlanPanelLeft.tsx b/src/frontend/src/components/content/PlanPanelLeft.tsx
@@ -35,6 +35,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
   reloadTasks, 
   restReload, 
   onTeamSelect, 
+  onTeamUpload,
   selectedTeam: parentSelectedTeam 
 }) => {
   const { dispatchToast } = useToastController("toast");
@@ -155,6 +156,18 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
           <Tooltip content="New task" relationship={"label"} />
         </PanelLeftToolbar>
 
+        {/* Team Display Section */}
+        {selectedTeam && (
+          <div style={{ 
+            padding: '8px 16px',
+            textAlign: 'left'
+          }}>
+            <Body1Strong style={{ color: 'white', fontSize: '14px' }}>
+              {selectedTeam.name}
+            </Body1Strong>
+          </div>
+        )}
+
         <br />
         <div
           className="tab tab-new-task"
@@ -188,6 +201,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
             {/* Settings Button on top */}
             <SettingsButton
               onTeamSelect={handleTeamSelect}
+              onTeamUpload={onTeamUpload}
               selectedTeam={selectedTeam}
             />
             {/* User Card below */}
diff --git a/src/frontend/src/models/Team.ts b/src/frontend/src/models/Team.ts
@@ -6,6 +6,15 @@ export interface Agent {
     role?: string;
 }
 
+export interface StartingTask {
+    id: string;
+    name: string;
+    prompt: string;
+    created: string;
+    creator: string;
+    logo: string;
+}
+
 export interface Team {
     id: string;
     name: string;
@@ -27,7 +36,7 @@ export interface TeamConfig {
     logo: string;
     plan: string;
     agents: Agent[];
-    starting_tasks: string[];
+    starting_tasks: (string | StartingTask)[];
 }
 
 export interface TeamUploadResponse {
diff --git a/src/frontend/src/models/planPanelLeft.tsx b/src/frontend/src/models/planPanelLeft.tsx
@@ -5,5 +5,6 @@ export interface PlanPanelLefProps {
     onNewTaskButton: () => void;
     restReload?: () => void;
     onTeamSelect?: (team: TeamConfig) => void;
+    onTeamUpload?: () => Promise<void>;
     selectedTeam?: TeamConfig | null;
 }
diff --git a/src/frontend/src/pages/HomePage.tsx b/src/frontend/src/pages/HomePage.tsx
@@ -24,6 +24,7 @@ import PlanPanelLeft from '@/components/content/PlanPanelLeft';
 import ContentToolbar from '@/coral/components/Content/ContentToolbar';
 import { TaskService } from '../services/TaskService';
 import { TeamConfig } from '../models/Team';
+import { TeamService } from '../services/TeamService';
 
 /**
  * HomePage component - displays task lists and provides navigation
@@ -33,6 +34,39 @@ const HomePage: React.FC = () => {
     const navigate = useNavigate();
     const { dispatchToast } = useToastController("toast");
     const [selectedTeam, setSelectedTeam] = useState<TeamConfig | null>(null);
+    const [isLoadingTeam, setIsLoadingTeam] = useState(true);
+
+    /**
+     * Load teams and set default team on component mount
+     */
+    useEffect(() => {
+        const loadDefaultTeam = async () => {
+            setIsLoadingTeam(true);
+            try {
+                const teams = await TeamService.getUserTeams();
+                console.log('All teams loaded:', teams);
+                if (teams.length > 0) {
+                    // Always prioritize "Business Operations Team" as default
+                    const businessOpsTeam = teams.find(team => team.name === "Business Operations Team");
+                    const defaultTeam = businessOpsTeam || teams[0];
+                    setSelectedTeam(defaultTeam);
+                    console.log('Default team loaded:', defaultTeam.name, 'with', defaultTeam.starting_tasks?.length || 0, 'starting tasks');
+                    console.log('Team logo:', defaultTeam.logo);
+                    console.log('Team description:', defaultTeam.description);
+                    console.log('Is Business Operations Team:', defaultTeam.name === "Business Operations Team");
+                } else {
+                    console.log('No teams found - user needs to upload a team configuration');
+                    // Even if no teams are found, we clear the loading state to show the "no team" message
+                }
+            } catch (error) {
+                console.error('Error loading default team:', error);
+            } finally {
+                setIsLoadingTeam(false);
+            }
+        };
+
+        loadDefaultTeam();
+    }, []);
 
     /**
     * Handle new task creation from the "New task" button
@@ -58,6 +92,38 @@ const HomePage: React.FC = () => {
         );
     }, [dispatchToast]);
 
+    /**
+     * Handle team upload completion - refresh team list and keep Business Operations Team as default
+     */
+    const handleTeamUpload = useCallback(async () => {
+        try {
+            const teams = await TeamService.getUserTeams();
+            console.log('Teams refreshed after upload:', teams.length);
+            
+            if (teams.length > 0) {
+                // Always keep "Business Operations Team" as default, even after new uploads
+                const businessOpsTeam = teams.find(team => team.name === "Business Operations Team");
+                const defaultTeam = businessOpsTeam || teams[0];
+                setSelectedTeam(defaultTeam);
+                console.log('Default team after upload:', defaultTeam.name);
+                console.log('Business Operations Team remains default');
+                
+                // Show a toast notification about the upload success
+                dispatchToast(
+                    <Toast>
+                        <ToastTitle>Team Uploaded Successfully!</ToastTitle>
+                        <ToastBody>
+                            Team uploaded. {defaultTeam.name} remains your default team.
+                        </ToastBody>
+                    </Toast>,
+                    { intent: "success" }
+                );
+            }
+        } catch (error) {
+            console.error('Error refreshing teams after upload:', error);
+        }
+    }, [dispatchToast]);
+
     /**
      * Handle new task creation from input submission
      * Creates a plan and navigates to the create plan page
@@ -78,7 +144,13 @@ const HomePage: React.FC = () => {
                         </Toast>,
                         { intent: "success" }
                     );
-                    navigate(`/plan/${response.plan_id}/create`);
+                    
+                    // Navigate with team ID if a team is selected
+                    const navPath = selectedTeam 
+                        ? `/plan/${response.plan_id}/create/${selectedTeam.team_id}`
+                        : `/plan/${response.plan_id}/create`;
+                    console.log('Navigating to:', navPath, 'with team:', selectedTeam?.name);
+                    navigate(navPath);
                 } else {
                     dispatchToast(
                         <Toast>
@@ -115,17 +187,29 @@ const HomePage: React.FC = () => {
                     <PlanPanelLeft
                         onNewTaskButton={handleNewTaskButton}
                         onTeamSelect={handleTeamSelect}
+                        onTeamUpload={handleTeamUpload}
                         selectedTeam={selectedTeam}
                     />
                     <Content>
                         <ContentToolbar
                             panelTitle={"Multi-Agent Planner"}
                         ></ContentToolbar>
-                        <HomeInput
-                            onInputSubmit={handleNewTask}
-                            onQuickTaskSelect={handleNewTask}
-                            selectedTeam={selectedTeam}
-                        />
+                        {!isLoadingTeam ? (
+                            <HomeInput
+                                onInputSubmit={handleNewTask}
+                                onQuickTaskSelect={handleNewTask}
+                                selectedTeam={selectedTeam}
+                            />
+                        ) : (
+                            <div style={{ 
+                                display: 'flex', 
+                                justifyContent: 'center', 
+                                alignItems: 'center', 
+                                height: '200px' 
+                            }}>
+                                <Spinner label="Loading team configuration..." />
+                            </div>
+                        )}
                     </Content>
 
                 </CoralShellRow>
diff --git a/src/frontend/src/pages/PlanCreatePage.tsx b/src/frontend/src/pages/PlanCreatePage.tsx
diff --git a/src/frontend/src/services/TeamService.ts b/src/frontend/src/services/TeamService.ts

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,6 @@ export interface PlanPanelLefProps {`
`5`	`5`	`onNewTaskButton: () => void;`
`6`	`6`	`restReload?: () => void;`
`7`	`7`	`onTeamSelect?: (team: TeamConfig) => void;`
	`8`	`+ onTeamUpload?: () => Promise<void>;`
`8`	`9`	`selectedTeam?: TeamConfig \| null;`
`9`	`10`	`}`