Resolve for issue #9082: Marketplace - "Select All" doesn't work in Agent Dashboard (#9247)

### Changes 🏗️

I have done changes in AgentTable and AgentTableRow components present
in autogpt_platform/frontend directory. The selectedAgents state is
passed on to AgentTableRow component, so that when Select All is
checked, individual check boxes also get checked.

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description


#### For configuration changes:
- [ ] `.env.example` was already compatible with my changes
- [ ] `docker-compose.yml` was already compatible with my changes

---------

Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>

autogpt_platform/frontend/src/app/marketplace/(user)/dashboard/page.tsx

@@ -106,28 +106,30 @@ export default function Page({}: {}) {
         <h2 className="mb-4 text-xl font-bold text-neutral-900 dark:text-neutral-100">
           Your uploaded agents
         </h2>
-        <AgentTable
-          agents={
-            (submissions?.submissions.map((submission, index) => ({
-              id: index,
-              agent_id: submission.agent_id,
-              agent_version: submission.agent_version,
-              sub_heading: submission.sub_heading,
-              date_submitted: submission.date_submitted,
-              agentName: submission.name,
-              description: submission.description,
-              imageSrc: submission.image_urls || [""],
-              dateSubmitted: new Date(
-                submission.date_submitted,
-              ).toLocaleDateString(),
-              status: submission.status.toLowerCase() as StatusType,
-              runs: submission.runs,
-              rating: submission.rating,
-            })) as AgentTableRowProps[]) || []
-          }
-          onEditSubmission={onEditSubmission}
-          onDeleteSubmission={onDeleteSubmission}
-        />
+        {submissions && (
+          <AgentTable
+            agents={
+              submissions?.submissions.map((submission, index) => ({
+                id: index,
+                agent_id: submission.agent_id,
+                agent_version: submission.agent_version,
+                sub_heading: submission.sub_heading,
+                date_submitted: submission.date_submitted,
+                agentName: submission.name,
+                description: submission.description,
+                imageSrc: submission.image_urls || [""],
+                dateSubmitted: new Date(
+                  submission.date_submitted,
+                ).toLocaleDateString(),
+                status: submission.status.toLowerCase() as StatusType,
+                runs: submission.runs,
+                rating: submission.rating,
+              })) || []
+            }
+            onEditSubmission={onEditSubmission}
+            onDeleteSubmission={onDeleteSubmission}
+          />
+        )}
       </div>
     </main>
   );

autogpt_platform/frontend/src/components/agptui/AgentTable.tsx

@@ -6,7 +6,13 @@ import { AgentTableCard } from "./AgentTableCard";
 import { StoreSubmissionRequest } from "@/lib/autogpt-server-api/types";
 
 export interface AgentTableProps {
-  agents: AgentTableRowProps[];
+  agents: Omit<
+    AgentTableRowProps,
+    | "setSelectedAgents"
+    | "selectedAgents"
+    | "onEditSubmission"
+    | "onDeleteSubmission"
+  >[];
   onEditSubmission: (submission: StoreSubmissionRequest) => void;
   onDeleteSubmission: (submission_id: string) => void;
 }
@@ -25,7 +31,7 @@ export const AgentTable: React.FC<AgentTableProps> = ({
   const handleSelectAll = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (e.target.checked) {
-        setSelectedAgents(new Set(agents.map((agent) => agent.id.toString())));
+        setSelectedAgents(new Set(agents.map((agent) => agent.agent_id)));
       } else {
         setSelectedAgents(new Set());
       }
@@ -88,11 +94,16 @@ export const AgentTable: React.FC<AgentTableProps> = ({
             <div key={agent.id} className="md:block">
               <AgentTableRow
                 {...agent}
+                selectedAgents={selectedAgents}
+                setSelectedAgents={setSelectedAgents}
                 onEditSubmission={onEditSubmission}
                 onDeleteSubmission={onDeleteSubmission}
               />
               <div className="block md:hidden">
-                <AgentTableCard {...agent} />
+                <AgentTableCard
+                  {...agent}
+                  onEditSubmission={onEditSubmission}
+                />
               </div>
             </div>
           ))}

autogpt_platform/frontend/src/components/agptui/AgentTableRow.tsx

@@ -21,6 +21,8 @@ export interface AgentTableRowProps {
   rating: number;
   dateSubmitted: string;
   id: number;
+  selectedAgents: Set<string>;
+  setSelectedAgents: React.Dispatch<React.SetStateAction<Set<string>>>;
   onEditSubmission: (submission: StoreSubmissionRequest) => void;
   onDeleteSubmission: (submission_id: string) => void;
 }
@@ -37,6 +39,8 @@ export const AgentTableRow: React.FC<AgentTableRowProps> = ({
   runs,
   rating,
   id,
+  selectedAgents,
+  setSelectedAgents,
   onEditSubmission,
   onDeleteSubmission,
 }) => {
@@ -53,7 +57,7 @@ export const AgentTableRow: React.FC<AgentTableRowProps> = ({
       description,
       image_urls: imageSrc,
       categories: [],
-    } as StoreSubmissionRequest);
+    } satisfies StoreSubmissionRequest);
   }, [
     agent_id,
     agent_version,
@@ -68,6 +72,15 @@ export const AgentTableRow: React.FC<AgentTableRowProps> = ({
     onDeleteSubmission(agent_id);
   }, [agent_id, onDeleteSubmission]);
 
+  const handleCheckboxChange = React.useCallback(() => {
+    if (selectedAgents.has(agent_id)) {
+      selectedAgents.delete(agent_id);
+    } else {
+      selectedAgents.add(agent_id);
+    }
+    setSelectedAgents(new Set(selectedAgents));
+  }, [agent_id, selectedAgents, setSelectedAgents]);
+
   return (
     <div className="hidden items-center border-b border-neutral-300 px-4 py-4 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 md:flex">
       <div className="flex items-center">
@@ -77,6 +90,8 @@ export const AgentTableRow: React.FC<AgentTableRowProps> = ({
             id={checkboxId}
             aria-label={`Select ${agentName}`}
             className="mr-4 h-5 w-5 rounded border-2 border-neutral-400 dark:border-neutral-600"
+            checked={selectedAgents.has(agent_id)}
+            onChange={handleCheckboxChange}
           />
           {/* Single label instead of multiple */}
           <label htmlFor={checkboxId} className="sr-only">

autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx

@@ -86,7 +86,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
             input_schema: flow.input_schema,
             output_schema: flow.output_schema,
           },
-        }) as Block,
+        }) satisfies Block,
     );
 
     return blockList