From 5b7a491a36f8b5892dc7fdf01ce0cdf544cda8e6 Mon Sep 17 00:00:00 2001 From: Ayush Mittal <130590402+Ayush-Mittal10@users.noreply.github.com> Date: Fri, 24 Jan 2025 22:46:51 +0530 Subject: [PATCH] Resolve for issue #9082: Marketplace - "Select All" doesn't work in Agent Dashboard (#9247) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 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 --- .../app/marketplace/(user)/dashboard/page.tsx | 46 ++++++++++--------- .../src/components/agptui/AgentTable.tsx | 17 +++++-- .../src/components/agptui/AgentTableRow.tsx | 17 ++++++- .../components/edit/control/BlocksControl.tsx | 2 +- 4 files changed, 55 insertions(+), 27 deletions(-) diff --git a/autogpt_platform/frontend/src/app/marketplace/(user)/dashboard/page.tsx b/autogpt_platform/frontend/src/app/marketplace/(user)/dashboard/page.tsx index 16abc15bee..221e751b40 100644 --- a/autogpt_platform/frontend/src/app/marketplace/(user)/dashboard/page.tsx +++ b/autogpt_platform/frontend/src/app/marketplace/(user)/dashboard/page.tsx @@ -106,28 +106,30 @@ export default function Page({}: {}) {

Your uploaded agents

- ({ - 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 && ( + ({ + 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} + /> + )} ); diff --git a/autogpt_platform/frontend/src/components/agptui/AgentTable.tsx b/autogpt_platform/frontend/src/components/agptui/AgentTable.tsx index e6792c2605..19ee24fbac 100644 --- a/autogpt_platform/frontend/src/components/agptui/AgentTable.tsx +++ b/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 = ({ const handleSelectAll = React.useCallback( (e: React.ChangeEvent) => { 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 = ({
- +
))} diff --git a/autogpt_platform/frontend/src/components/agptui/AgentTableRow.tsx b/autogpt_platform/frontend/src/components/agptui/AgentTableRow.tsx index 6b434e2306..9a2b896cc4 100644 --- a/autogpt_platform/frontend/src/components/agptui/AgentTableRow.tsx +++ b/autogpt_platform/frontend/src/components/agptui/AgentTableRow.tsx @@ -21,6 +21,8 @@ export interface AgentTableRowProps { rating: number; dateSubmitted: string; id: number; + selectedAgents: Set; + setSelectedAgents: React.Dispatch>>; onEditSubmission: (submission: StoreSubmissionRequest) => void; onDeleteSubmission: (submission_id: string) => void; } @@ -37,6 +39,8 @@ export const AgentTableRow: React.FC = ({ runs, rating, id, + selectedAgents, + setSelectedAgents, onEditSubmission, onDeleteSubmission, }) => { @@ -53,7 +57,7 @@ export const AgentTableRow: React.FC = ({ description, image_urls: imageSrc, categories: [], - } as StoreSubmissionRequest); + } satisfies StoreSubmissionRequest); }, [ agent_id, agent_version, @@ -68,6 +72,15 @@ export const AgentTableRow: React.FC = ({ 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 (
@@ -77,6 +90,8 @@ export const AgentTableRow: React.FC = ({ 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 */}