feat: Enhance Job navigation by adding selectedJobId to context and components

Author: devanshjainms

client/src/App.tsx

@@ -102,6 +102,7 @@ const AppContent: React.FC<AppContentProps> = ({
         return (
           <JobExecutionPanel
             workspaceId={state.selectedWorkspaceForJobs || undefined}
+            selectedJobId={state.selectedJobId || undefined}
           />
         );
       case "reports":

client/src/components/JobExecution/JobExecutionPanel.tsx

@@ -248,9 +248,10 @@ const JobRow: React.FC<JobRowProps> = ({ job, isExpanded, onToggle, onCancel, st
 
 interface JobExecutionPanelProps {
   workspaceId?: string;
+  selectedJobId?: string;
 }
 
-export const JobExecutionPanel: React.FC<JobExecutionPanelProps> = ({ workspaceId }) => {
+export const JobExecutionPanel: React.FC<JobExecutionPanelProps> = ({ workspaceId, selectedJobId }) => {
   const styles = useStyles();
   const [jobs, setJobs] = useState<Job[]>([]);
   const [workspaces, setWorkspaces] = useState<string[]>([]);
@@ -265,8 +266,10 @@ export const JobExecutionPanel: React.FC<JobExecutionPanelProps> = ({ workspaceI
   useEffect(() => {
     if (workspaceId) {
       setSelectedWorkspace(workspaceId);
+      setOffset(0);
+      setExpandedJobId(selectedJobId || null);
     }
-  }, [workspaceId]);
+  }, [workspaceId, selectedJobId]);
 
   const fetchWorkspaces = useCallback(async () => {
     try {
@@ -287,6 +290,14 @@ export const JobExecutionPanel: React.FC<JobExecutionPanelProps> = ({ workspaceI
       setJobs(response.jobs);
       setTotal(response.total);
       setIsLoading(false);
+      if (selectedJobId && !response.jobs.some(job => job.job_id === selectedJobId)) {
+        try {
+          const selectedJob = await jobsApi.getById(selectedJobId);
+          setJobs([selectedJob, ...response.jobs.slice(0, ITEMS_PER_PAGE - 1)]);
+        } catch (error) {
+          console.error("Failed to fetch selected job:", error);
+        }
+      }
 
       // Check if any jobs are still running
       const hasRunningJobs = response.jobs.some(
@@ -297,7 +308,7 @@ export const JobExecutionPanel: React.FC<JobExecutionPanelProps> = ({ workspaceI
       console.error("Failed to fetch jobs:", error);
       setIsLoading(false);
     }
-  }, [selectedWorkspace, offset]);
+  }, [selectedWorkspace, offset, selectedJobId]);
 
   // Fetch workspaces on mount
   useEffect(() => {

client/src/components/Sidebar/JobSection.tsx

@@ -157,7 +157,7 @@ export const JobSection: React.FC<JobSectionProps> = ({ onJobViewToggle }) => {
                 <div 
                   key={job.job_id} 
                   className={styles.jobItem}
-                  onClick={() => navigateToJobs(job.workspace_id)}
+                  onClick={() => navigateToJobs(job.workspace_id, job.job_id)}
                   style={{ cursor: 'pointer' }}
                 >
                   <div className={styles.jobIcon}>

client/src/context/AppContext.tsx

@@ -25,12 +25,13 @@ interface AppState {
   currentView: ViewType;
   selectedFile: SelectedFile | null;
   selectedWorkspaceForJobs: string | null;
+  selectedJobId: string | null;
   selectedWorkspaceForReports: string | null;
 }
 
 type AppAction =
   | { type: "NAVIGATE_TO_CHAT" }
-  | { type: "NAVIGATE_TO_JOBS"; payload: string }
+  | { type: "NAVIGATE_TO_JOBS"; payload: { workspaceId: string; jobId?: string } }
   | { type: "NAVIGATE_TO_REPORTS"; payload: string }
   | { type: "NAVIGATE_TO_FILE"; payload: SelectedFile }
   | { type: "CLOSE_FILE" };
@@ -39,6 +40,7 @@ const initialState: AppState = {
   currentView: "chat",
   selectedFile: null,
   selectedWorkspaceForJobs: null,
+  selectedJobId: null,
   selectedWorkspaceForReports: null,
 };
 
@@ -50,14 +52,16 @@ const appReducer = (state: AppState, action: AppAction): AppState => {
         currentView: "chat",
         selectedFile: null,
         selectedWorkspaceForJobs: null,
+        selectedJobId: null,
         selectedWorkspaceForReports: null,
       };
     case "NAVIGATE_TO_JOBS":
       return {
         ...state,
         currentView: "jobs",
         selectedFile: null,
-        selectedWorkspaceForJobs: action.payload,
+        selectedWorkspaceForJobs: action.payload.workspaceId,
+        selectedJobId: action.payload.jobId || null,
         selectedWorkspaceForReports: null,
       };
     case "NAVIGATE_TO_REPORTS":
@@ -66,6 +70,7 @@ const appReducer = (state: AppState, action: AppAction): AppState => {
         currentView: "reports",
         selectedFile: null,
         selectedWorkspaceForJobs: null,
+        selectedJobId: null,
         selectedWorkspaceForReports: action.payload,
       };
     case "NAVIGATE_TO_FILE":
@@ -74,6 +79,7 @@ const appReducer = (state: AppState, action: AppAction): AppState => {
         currentView: "file",
         selectedFile: action.payload,
         selectedWorkspaceForJobs: null,
+        selectedJobId: null,
         selectedWorkspaceForReports: null,
       };
     case "CLOSE_FILE":
@@ -90,7 +96,7 @@ const appReducer = (state: AppState, action: AppAction): AppState => {
 interface AppContextType {
   state: AppState;
   navigateToChat: () => void;
-  navigateToJobs: (workspaceId: string) => void;
+  navigateToJobs: (workspaceId: string, jobId?: string) => void;
   navigateToReports: (workspaceId: string) => void;
   navigateToFile: (workspaceId: string, fileName: string) => void;
   closeFile: () => void;
@@ -107,8 +113,8 @@ export const AppProvider: React.FC<{ children: ReactNode }> = ({
     dispatch({ type: "NAVIGATE_TO_CHAT" });
   }, []);
 
-  const navigateToJobs = useCallback((workspaceId: string) => {
-    dispatch({ type: "NAVIGATE_TO_JOBS", payload: workspaceId });
+  const navigateToJobs = useCallback((workspaceId: string, jobId?: string) => {
+    dispatch({ type: "NAVIGATE_TO_JOBS", payload: { workspaceId, jobId } });
   }, []);
 
   const navigateToReports = useCallback((workspaceId: string) => {