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

ntindle · 2025-01-26T11:36:44Z

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

Checklist 📋

For code changes:

I have clearly listed my changes in the PR description
I have made a test plan
I have tested my changes according to the test plan:
- added types
- Ran some of the stories
- Asked all the relevant parties for manual checks

supabase · 2025-01-26T11:36:50Z

This pull request has been ignored for the connected project bgwpwdsxblryihinutbx because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

github-actions · 2025-01-26T11:36:56Z

This PR targets the master branch but does not come from dev or a hotfix/* branch.

Automatically setting the base branch to dev.

netlify · 2025-01-26T11:39:27Z

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	`d725e10`
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/6796466aa0315c0008e85aca

Is this desired?

…s to fix type errors

@aarushik93

@aarushik93 is this okay?

we probbaly shouldn't be doing this?

ntindle · 2025-01-26T11:47:04Z

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

+// 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" /> */}


@Swiftyos is this chill?

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

netlify · 2025-01-26T11:47:26Z

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Name	Link
🔨 Latest commit	`d725e10`
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs-dev/deploys/6796466abc885a0008c46e51

autogpt_platform/frontend/src/components/Flow.tsx

autogpt_platform/frontend/src/components/RunnerUIWrapper.tsx

ntindle · 2025-01-26T11:48:23Z

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

    name: "AI Video Generator",
+    storeListingVersionId: "123",


missing attribute + extra attribute

ntindle · 2025-01-26T11:51:15Z

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

    menuItemGroups: defaultMenuItemGroups,
  },
 };

 export const WithActiveLink: Story = {
  args: {
    ...Default.args,
-    activeLink: "/library",
+    // activeLink: "/library",


old inputs -- I think?

ntindle · 2025-01-26T11:51:53Z

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

 }

-export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
+export const NavbarLink = ({ name, href, className }: NavbarLinkProps) => {


should we reallly accept classNames here? its to fix us passing them in externally but like why would you do that to a navbar link? it should be styled internally imo

ntindle · 2025-01-26T11:52:08Z

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

-      description: "URL of the user's profile image",
-    },
-    links: {
+    profile: {


data shape changes fixed

ntindle · 2025-01-26T11:53:12Z

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

-    ],
+    profile: {
+      name: "Olivia Grace",
+      username: "@ograce1421",


we should probably swap this example lol but this just fixes the data shape

ntindle · 2025-01-26T11:53:27Z

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

-    description: string;
-    additionalImages?: string[];
-  };
+  initialData?: PublishAgentInfoInitialData;


used in the story so exported here

ntindle · 2025-01-26T11:53:38Z

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

-      console.log("Rating card closed");
-    },
+    // onSubmit: (rating) => {
+    //   console.log("Rating submitted:", rating);


@Swiftyos is there a better way to handle these

ntindle · 2025-01-26T11:54:10Z

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

@@ -44,6 +44,9 @@ export const Rejected: Story = {
 };

 export const AllStatuses: Story = {
+  args: {


this is a funny requirement because how the story is defined. We could do this better but its fine for now

ntindle · 2025-01-26T11:54:47Z

autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx

@@ -25,12 +26,14 @@ interface AgentsSectionProps {
  sectionTitle: string;
  agents: Agent[];
  hideAvatars?: boolean;
+  className?: string;


another input that seems weird and should be not here. Why would an agent section need external styling?

ntindle · 2025-01-26T11:55:19Z

autogpt_platform/frontend/src/components/feature-flag/feature-flag-provider.tsx

@@ -3,14 +3,14 @@ import { ReactNode } from "react";

 export function LaunchDarklyProvider({ children }: { children: ReactNode }) {
  if (
-    process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === true &&
+    process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true" &&


@aarushik93 is this okay or will this break the world?

ntindle · 2025-01-26T11:56:49Z

autogpt_platform/frontend/src/components/node-input-components.tsx

@@ -661,20 +660,6 @@ export const NodeGenericInputField: FC<{
          handleInputClick={handleInputClick}
        />
      );
-    case "object":


this was an impossible case

ntindle · 2025-01-26T11:57:10Z

autogpt_platform/frontend/src/components/ui/form.stories.tsx

@@ -72,10 +80,300 @@ const FormExample = () => {
 };

 export const Default: Story = {
+  args: {


there has to be a better way to do this

ntindle · 2025-01-26T11:57:28Z

autogpt_platform/frontend/src/components/ui/tooltip.tsx

@@ -7,7 +7,13 @@ import { cn } from "@/lib/utils";

 const TooltipProvider = TooltipPrimitive.Provider;

-const Tooltip = ({ children, delayDuration = 10 }) => (
+const Tooltip = ({


missing type info -- added

ntindle · 2025-01-26T12:18:55Z

autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts

@@ -65,18 +65,21 @@ export type BlockIOObjectSubSchema = BlockIOSubSchemaMeta & {
  properties: { [key: string]: BlockIOSubSchema };
  default?: { [key: keyof BlockIOObjectSubSchema["properties"]]: any };
  required?: (keyof BlockIOObjectSubSchema["properties"])[];
+  secret?: boolean;


Do these changes need mirrored to the backend anywhere?

qodo-merge-pro · 2025-01-26T12:23:15Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Data Loss When deleting a node, only node.data is saved in history payload instead of full node object, which could lead to incomplete undo functionality payload: { node: deletedNodeData.data }, Type Error Environment variable comparison uses strict equality with 'true' string instead of checking for string value 'true', which could cause feature flag to be incorrectly disabled process.env.NEXT_PUBLIC_LAUNCHDARKLY_ENABLED === "true" && !process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID

ntindle added 2 commits January 26, 2025 11:18

fix: stories being broken

e1f8882

ci: typechecker for frontend

66a87e5

github-actions bot changed the base branch from master to dev January 26, 2025 11:36

github-actions bot added platform/frontend AutoGPT Platform - Front end platform/backend AutoGPT Platform - Back end size/xl labels Jan 26, 2025

ntindle added 15 commits January 26, 2025 11:40

fix: remove unused classnames

5ae9282

fix: fully disable unused page

9350fe1

fix: add missing import

31fd0b5

fix: use proper state object

c2c3c29

feat: take in props for navbar

06e845a

Is this desired?

fix: expose interface for sub object so it can be used in other place…

f5394f6

…s to fix type errors

fix: coalesce types and use a default

e860bde

@aarushik93 is this okay?

fix: take in classnames as used by the outer component

669c61d

we probbaly shouldn't be doing this?

fix: user correct object when deleting

66a15a7

fix: remove import + impossible case

3a2c3de

fix: pass correct subclass

745137f

fix: type the params

2daf084

fix: type the params

ffaf77d

fix: missing attribute

d4d9efc

fix: missing types

db068c5

ntindle commented Jan 26, 2025

View reviewed changes

autogpt_platform/frontend/src/app/marketplace/search/page.tsx Show resolved Hide resolved

ntindle commented Jan 26, 2025

View reviewed changes

autogpt_platform/frontend/src/components/Flow.tsx Show resolved Hide resolved

ntindle commented Jan 26, 2025

View reviewed changes

autogpt_platform/frontend/src/components/RunnerUIWrapper.tsx Show resolved Hide resolved

ntindle commented Jan 26, 2025

View reviewed changes

ntindle added 2 commits January 26, 2025 11:55

fix: formatting

a4eeb45

fix: more formatting

aaab8b1

ntindle commented Jan 26, 2025

View reviewed changes

ntindle requested review from Swiftyos, Pwuts, Bentlybro and aarushik93 January 26, 2025 11:58

ntindle added 4 commits January 26, 2025 12:11

fix: missing inputs based on changes

c6c2b85

fix: missing type addition

f0c378c

fix: add secret to all the subschemas

eedcc92

fix: formatting

927f43f

ntindle commented Jan 26, 2025

View reviewed changes

ntindle marked this pull request as ready for review January 26, 2025 12:22

ntindle requested review from a team as code owners January 26, 2025 12:22

qodo-merge-pro bot added the Review effort [1-5]: 2 label Jan 26, 2025

Significant-Gravitas deleted a comment from Karinza38 Jan 26, 2025

Merge branch 'dev' into open-2047-add-type-checking-step-to-front-end-ci

d725e10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ntindle commented Jan 26, 2025 •

edited

Loading

supabase bot commented Jan 26, 2025

github-actions bot commented Jan 26, 2025

netlify bot commented Jan 26, 2025 •

edited

Loading

ntindle Jan 26, 2025

netlify bot commented Jan 26, 2025 •

edited

Loading

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

ntindle Jan 26, 2025

qodo-merge-pro bot commented Jan 26, 2025

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

Are you sure you want to change the base?

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

Conversation

ntindle commented Jan 26, 2025 • edited Loading

Changes 🏗️

Checklist 📋

For code changes:

supabase bot commented Jan 26, 2025

github-actions bot commented Jan 26, 2025

netlify bot commented Jan 26, 2025 • edited Loading

✅ Deploy Preview for auto-gpt-docs canceled.

Choose a reason for hiding this comment

netlify bot commented Jan 26, 2025 • edited Loading

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qodo-merge-pro bot commented Jan 26, 2025

PR Reviewer Guide 🔍

ntindle commented Jan 26, 2025 •

edited

Loading

netlify bot commented Jan 26, 2025 •

edited

Loading

netlify bot commented Jan 26, 2025 •

edited

Loading