fix(frontend): add typechecks and fix existing type errors in frontend (

Significant-Gravitas#9336)

<!-- Clearly explain the need for these changes: -->
We want to be able to use typechecking and see errors before they occur.
This is a PR to help enable us to do so by fixing the existing errors
and hopefully not causing new ones.

### Changes 🏗️
- adds check to ci
- disables some code points
- fixes lots of type errors
- fixes a bunch of the stories

<!-- Concisely describe all of the changes made in this pull request:
-->

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [x] added types
  - [x] Ran some of the stories
  - [x] Asked all the relevant parties for manual checks

---------

Co-authored-by: SwiftyOS <[email protected]>

.github/workflows/platform-frontend-ci.yml

@@ -37,6 +37,25 @@ jobs:
         run: |
           yarn lint
 
+  type-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "21"
+
+      - name: Install dependencies
+        run: |
+          yarn install --frozen-lockfile
+
+      - name: Run tsc check
+        run: |
+          yarn type-check
+
   test:
     runs-on: ubuntu-latest
     strategy:

autogpt_platform/frontend/src/app/admin/marketplace/page.tsx

@@ -1,18 +1,18 @@
 import { withRoleAccess } from "@/lib/withRoleAccess";
 
 import React from "react";
-import { getReviewableAgents } from "@/components/admin/marketplace/actions";
-import AdminMarketplaceAgentList from "@/components/admin/marketplace/AdminMarketplaceAgentList";
-import AdminFeaturedAgentsControl from "@/components/admin/marketplace/AdminFeaturedAgentsControl";
+// import { getReviewableAgents } from "@/components/admin/marketplace/actions";
+// import AdminMarketplaceAgentList from "@/components/admin/marketplace/AdminMarketplaceAgentList";
+// import AdminFeaturedAgentsControl from "@/components/admin/marketplace/AdminFeaturedAgentsControl";
 import { Separator } from "@/components/ui/separator";
 async function AdminMarketplace() {
-  const reviewableAgents = await getReviewableAgents();
+  // const reviewableAgents = await getReviewableAgents();
 
   return (
     <>
-      <AdminMarketplaceAgentList agents={reviewableAgents.items} />
-      <Separator className="my-4" />
-      <AdminFeaturedAgentsControl className="mt-4" />
+      {/* <AdminMarketplaceAgentList agents={reviewableAgents.items} />
+        <Separator className="my-4" />
+        <AdminFeaturedAgentsControl className="mt-4" /> */}
     </>
   );
 }

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

@@ -179,6 +179,7 @@ export default function PrivatePage() {
                     {
                       oauth2: "OAuth2 credentials",
                       api_key: "API key",
+                      user_password: "Username & password",
                     }[cred.type]
                   }{" "}
                   - <code>{cred.id}</code>

autogpt_platform/frontend/src/app/marketplace/search/page.tsx

@@ -151,11 +151,7 @@ function SearchResults({
             <div className="min-h-[500px] max-w-[1440px]">
               {showAgents && agentsCount > 0 && (
                 <div className="mt-[36px]">
-                  <AgentsSection
-                    agents={agents}
-                    sectionTitle="Agents"
-                    className="font-[Large-Poppins] text-[18px] font-semibold leading-[28px]"
-                  />
+                  <AgentsSection agents={agents} sectionTitle="Agents" />
                 </div>
               )}
 

autogpt_platform/frontend/src/components/Flow.tsx

@@ -250,7 +250,7 @@ const FlowEditor: React.FC<{
           if (deletedNodeData) {
             history.push({
               type: "DELETE_NODE",
-              payload: { node: deletedNodeData },
+              payload: { node: deletedNodeData.data },
               undo: () => addNodes(deletedNodeData),
               redo: () => deleteElements({ nodes: [{ id: nodeID }] }),
             });

autogpt_platform/frontend/src/components/RunnerUIWrapper.tsx

@@ -9,6 +9,7 @@ import RunnerOutputUI from "./runner-ui/RunnerOutputUI";
 import { Node } from "@xyflow/react";
 import { filterBlocksByType } from "@/lib/utils";
 import { BlockIORootSchema, BlockUIType } from "@/lib/autogpt-server-api/types";
+import { CustomNode } from "./CustomNode";
 
 interface HardcodedValues {
   name: any;
@@ -27,7 +28,7 @@ export interface InputItem {
 
 interface RunnerUIWrapperProps {
   nodes: Node[];
-  setNodes: React.Dispatch<React.SetStateAction<Node[]>>;
+  setNodes: React.Dispatch<React.SetStateAction<CustomNode[]>>;
   setIsScheduling: React.Dispatch<React.SetStateAction<boolean>>;
   isRunning: boolean;
   isScheduling: boolean;

autogpt_platform/frontend/src/components/agptui/AgentInfo.stories.tsx

@@ -10,7 +10,6 @@ const meta = {
   },
   tags: ["autodocs"],
   argTypes: {
-    onRunAgent: { action: "run agent clicked" },
     name: { control: "text" },
     creator: { control: "text" },
     shortDescription: { control: "text" },
@@ -28,8 +27,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    onRunAgent: () => console.log("Run agent clicked"),
     name: "AI Video Generator",
+    storeListingVersionId: "123",
     creator: "Toran Richards",
     shortDescription:
       "Transform ideas into breathtaking images with this AI-powered Image Generator.",

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

@@ -15,40 +15,64 @@ type Story = StoryObj<typeof AgentTable>;
 
 const sampleAgents: AgentTableRowProps[] = [
   {
-    id: "agent-1",
+    id: 43,
     agentName: "Super Coder",
     description: "An AI agent that writes clean, efficient code",
-    imageSrc:
+    imageSrc: [
       "https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
+    ],
     dateSubmitted: "2023-05-15",
     status: "approved",
     runs: 1500,
     rating: 4.8,
-    onEdit: () => console.log("Edit Super Coder"),
+    agent_id: "43",
+    agent_version: 1,
+    sub_heading: "Super Coder",
+    date_submitted: "2023-05-15",
+    onEditSubmission: () => console.log("Edit Super Coder"),
+    onDeleteSubmission: () => console.log("Delete Super Coder"),
+    selectedAgents: new Set(),
+    setSelectedAgents: () => {},
   },
   {
-    id: "agent-2",
+    id: 44,
     agentName: "Data Analyzer",
     description: "Processes and analyzes large datasets with ease",
-    imageSrc:
+    imageSrc: [
       "https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg",
+    ],
     dateSubmitted: "2023-05-10",
     status: "awaiting_review",
     runs: 1200,
     rating: 4.5,
-    onEdit: () => console.log("Edit Data Analyzer"),
+    agent_id: "44",
+    agent_version: 1,
+    sub_heading: "Data Analyzer",
+    date_submitted: "2023-05-10",
+    onEditSubmission: () => console.log("Edit Data Analyzer"),
+    onDeleteSubmission: () => console.log("Delete Data Analyzer"),
+    selectedAgents: new Set(),
+    setSelectedAgents: () => {},
   },
   {
-    id: "agent-3",
+    id: 45,
     agentName: "UI Designer",
     description: "Creates beautiful and intuitive user interfaces",
-    imageSrc:
+    imageSrc: [
       "https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
+    ],
     dateSubmitted: "2023-05-05",
     status: "draft",
     runs: 800,
     rating: 4.2,
-    onEdit: () => console.log("Edit UI Designer"),
+    agent_id: "45",
+    agent_version: 1,
+    sub_heading: "UI Designer",
+    date_submitted: "2023-05-05",
+    onEditSubmission: () => console.log("Edit UI Designer"),
+    onDeleteSubmission: () => console.log("Delete UI Designer"),
+    selectedAgents: new Set(),
+    setSelectedAgents: () => {},
   },
 ];
 

autogpt_platform/frontend/src/components/agptui/AgentTableCard.stories.tsx

@@ -16,13 +16,13 @@ export const Default: Story = {
   args: {
     agentName: "Super Coder",
     description: "An AI agent that writes clean, efficient code",
-    imageSrc:
+    imageSrc: [
       "https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
+    ],
     dateSubmitted: "2023-05-15",
     status: "ACTIVE" as StatusType,
     runs: 1500,
     rating: 4.8,
-    onEdit: () => console.log("Edit Super Coder"),
   },
 };
 

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

@@ -4,6 +4,7 @@ import * as React from "react";
 import Image from "next/image";
 import { IconStarFilled, IconMore } from "@/components/ui/icons";
 import { Status, StatusType } from "./Status";
+import { StoreSubmissionRequest } from "@/lib/autogpt-server-api";
 
 export interface AgentTableCardProps {
   agent_id: string;

autogpt_platform/frontend/src/components/agptui/BecomeACreator.stories.tsx

@@ -11,7 +11,6 @@ const meta = {
   tags: ["autodocs"],
   argTypes: {
     title: { control: "text" },
-    heading: { control: "text" },
     description: { control: "text" },
     buttonText: { control: "text" },
     onButtonClick: { action: "buttonClicked" },
@@ -24,7 +23,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: "Want to contribute?",
-    heading: "We're always looking for more Creators!",
     description: "Join our ever-growing community of hackers and tinkerers",
     buttonText: "Become a Creator",
     onButtonClick: () => console.log("Button clicked"),
@@ -34,7 +32,6 @@ export const Default: Story = {
 export const CustomText: Story = {
   args: {
     title: "Become a Creator Today!",
-    heading: "Join Our Creator Community",
     description: "Share your ideas and build amazing AI agents with us",
     buttonText: "Start Creating",
     onButtonClick: () => console.log("Custom button clicked"),

autogpt_platform/frontend/src/components/agptui/CreatorCard.stories.tsx

@@ -15,7 +15,6 @@ const meta = {
     bio: { control: "text" },
     agentsUploaded: { control: "number" },
     onClick: { action: "clicked" },
-    avatarSrc: { control: "text" },
   },
 } satisfies Meta<typeof CreatorCard>;
 
@@ -24,49 +23,49 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    index: 0,
     creatorName: "John Doe",
     creatorImage:
       "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "AI enthusiast and developer with a passion for creating innovative agents.",
     agentsUploaded: 15,
     onClick: () => console.log("Default CreatorCard clicked"),
-    avatarSrc: "https://github.com/shadcn.png",
   },
 };
 
 export const NewCreator: Story = {
   args: {
+    index: 1,
     creatorName: "Jane Smith",
     creatorImage:
       "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Excited to start my journey in AI agent development!",
     agentsUploaded: 1,
     onClick: () => console.log("NewCreator CreatorCard clicked"),
-    avatarSrc: "https://example.com/avatar2.jpg",
   },
 };
 
 export const ExperiencedCreator: Story = {
   args: {
+    index: 2,
     creatorName: "Alex Johnson",
     creatorImage:
       "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Veteran AI researcher with a focus on natural language processing and machine learning.",
     agentsUploaded: 50,
     onClick: () => console.log("ExperiencedCreator CreatorCard clicked"),
-    avatarSrc: "https://example.com/avatar3.jpg",
   },
 };
 
 export const WithInteraction: Story = {
   args: {
+    index: 3,
     creatorName: "Sam Brown",
     creatorImage:
       "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
     bio: "Exploring the frontiers of AI and its applications in everyday life.",
     agentsUploaded: 30,
     onClick: () => console.log("WithInteraction CreatorCard clicked"),
-    avatarSrc: "https://example.com/avatar4.jpg",
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

autogpt_platform/frontend/src/components/agptui/CreatorLinks.stories.tsx

@@ -21,51 +21,48 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    links: {
-      website: "https://example.com",
-      linkedin: "https://linkedin.com/in/johndoe",
-      github: "https://github.com/johndoe",
-      other: ["https://twitter.com/johndoe", "https://medium.com/@johndoe"],
-    },
+    links: [
+      "https://example.com",
+      "https://linkedin.com/in/johndoe",
+      "https://github.com/johndoe",
+      "https://twitter.com/johndoe",
+      "https://medium.com/@johndoe",
+    ],
   },
 };
 
 export const WebsiteOnly: Story = {
   args: {
-    links: {
-      website: "https://example.com",
-    },
+    links: ["https://example.com"],
   },
 };
 
 export const SocialLinks: Story = {
   args: {
-    links: {
-      linkedin: "https://linkedin.com/in/janedoe",
-      github: "https://github.com/janedoe",
-      other: ["https://twitter.com/janedoe"],
-    },
+    links: [
+      "https://linkedin.com/in/janedoe",
+      "https://github.com/janedoe",
+      "https://twitter.com/janedoe",
+    ],
   },
 };
 
 export const NoLinks: Story = {
   args: {
-    links: {},
+    links: [],
   },
 };
 
 export const MultipleOtherLinks: Story = {
   args: {
-    links: {
-      website: "https://example.com",
-      linkedin: "https://linkedin.com/in/creator",
-      github: "https://github.com/creator",
-      other: [
-        "https://twitter.com/creator",
-        "https://medium.com/@creator",
-        "https://youtube.com/@creator",
-        "https://tiktok.com/@creator",
-      ],
-    },
+    links: [
+      "https://example.com",
+      "https://linkedin.com/in/creator",
+      "https://github.com/creator",
+      "https://twitter.com/creator",
+      "https://medium.com/@creator",
+      "https://youtube.com/@creator",
+      "https://tiktok.com/@creator",
+    ],
   },
 };