Merge branch 'dev' into aarushikansal/feature-flagging-backend

Significant-Gravitas · Nov 27, 2024 · 365ad18 · 365ad18
2 parents 1af97a5 + 5dd151b
commit 365ad18
Show file tree

Hide file tree

Showing 21 changed files with 362 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -171,3 +171,5 @@ ig*
 .github_access_token
 LICENSE.rtf
 autogpt_platform/backend/settings.py
+/.auth
+/autogpt_platform/frontend/.auth
diff --git a/autogpt_platform/autogpt_libs/poetry.lock b/autogpt_platform/autogpt_libs/poetry.lock
diff --git a/autogpt_platform/autogpt_libs/pyproject.toml b/autogpt_platform/autogpt_libs/pyproject.toml
@@ -21,7 +21,7 @@ supabase = "^2.10.0"
 
 [tool.poetry.group.dev.dependencies]
 redis = "^5.2.0"
-ruff = "^0.7.4"
+ruff = "^0.8.0"
 
 [build-system]
 requires = ["poetry-core"]

diff --git a/autogpt_platform/frontend/src/app/profile/page.tsx b/autogpt_platform/frontend/src/app/profile/page.tsx
@@ -143,7 +143,9 @@ export default function PrivatePage() {
   return (
     <div className="mx-auto max-w-3xl md:py-8">
       <div className="flex items-center justify-between">
-        <p>Hello {user.email}</p>
+        <p>
+          Hello <span data-testid="profile-email">{user.email}</span>
+        </p>
         <Button onClick={() => supabase.auth.signOut()}>
           <LogOutIcon className="mr-1.5 size-4" />
           Log out

diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -28,6 +28,7 @@ import {
 } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import { TextRenderer } from "@/components/ui/render";
 import { history } from "./history";
 import NodeHandle from "./NodeHandle";
 import {
@@ -564,9 +565,13 @@ export function CustomNode({
         <div className="flex w-full flex-col">
           <div className="flex flex-row items-center justify-between">
             <div className="font-roboto flex items-center px-3 text-lg font-semibold">
-              {beautifyString(
-                data.blockType?.replace(/Block$/, "") || data.title,
-              )}
+              <TextRenderer
+                value={beautifyString(
+                  data.blockType?.replace(/Block$/, "") || data.title,
+                )}
+                truncateLengthLimit={80}
+              />
+
               <div className="px-2 text-xs text-gray-500">
                 #{id.split("-")[0]}
               </div>

diff --git a/autogpt_platform/frontend/src/components/NodeHandle.tsx b/autogpt_platform/frontend/src/components/NodeHandle.tsx
@@ -22,6 +22,7 @@ const NodeHandle: FC<HandleProps> = ({
   const typeName: Record<string, string> = {
     string: "text",
     number: "number",
+    integer: "integer",
     boolean: "true/false",
     object: "object",
     array: "list",

diff --git a/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx b/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
@@ -3,6 +3,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { TextRenderer } from "@/components/ui/render";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { beautifyString } from "@/lib/utils";
 import {
@@ -180,7 +181,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
           </CardHeader>
           <CardContent className="overflow-scroll border-t p-0">
             <ScrollArea
-              className="h-[60vh] w-fit w-full"
+              className="h-[60vh]"
               data-id="blocks-control-scroll-area"
             >
               {getFilteredBlockList().map((block) => (
@@ -202,13 +203,19 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                         className="block truncate pb-1 text-sm font-semibold"
                         data-id={`block-name-${block.id}`}
                       >
-                        {beautifyString(block.name).replace(/ Block$/, "")}
+                        <TextRenderer
+                          value={beautifyString(block.name).replace(
+                            / Block$/,
+                            "",
+                          )}
+                          truncateLengthLimit={45}
+                        />
                       </span>
-                      <span className="block break-words text-xs font-normal text-gray-500">
-                        {/* Cap description at 100 characters max */}
-                        {block.description?.length > 100
-                          ? block.description.slice(0, 100) + "..."
-                          : block.description}
+                      <span className="block break-all text-xs font-normal text-gray-500">
+                        <TextRenderer
+                          value={block.description}
+                          truncateLengthLimit={165}
+                        />
                       </span>
                     </div>
                     <div

diff --git a/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx b/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
@@ -115,6 +115,7 @@ export const SaveControl = ({
                 value={agentName}
                 onChange={(e) => onNameChange(e.target.value)}
                 data-id="save-control-name-input"
+                maxLength={100}
               />
               <Label htmlFor="description">Description</Label>
               <Input
@@ -124,6 +125,7 @@ export const SaveControl = ({
                 value={agentDescription}
                 onChange={(e) => onDescriptionChange(e.target.value)}
                 data-id="save-control-description-input"
+                maxLength={500}
               />
               {agentMeta?.version && (
                 <>

diff --git a/autogpt_platform/frontend/src/components/monitor/AgentFlowList.tsx b/autogpt_platform/frontend/src/components/monitor/AgentFlowList.tsx
@@ -2,6 +2,7 @@ import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
 import React, { useEffect, useMemo, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { TextRenderer } from "@/components/ui/render";
 import Link from "next/link";
 import {
   Dialog,
@@ -94,7 +95,10 @@ export const AgentFlowList = ({
                             });
                         }}
                       >
-                        {template.name}
+                        <TextRenderer
+                          value={template.name}
+                          truncateLengthLimit={30}
+                        />
                       </DropdownMenuItem>
                     ))}
                   </>
@@ -162,7 +166,9 @@ export const AgentFlowList = ({
                   onClick={() => onSelectFlow(flow)}
                   data-state={selectedFlow?.id == flow.id ? "selected" : null}
                 >
-                  <TableCell>{flow.name}</TableCell>
+                  <TableCell>
+                    <TextRenderer value={flow.name} truncateLengthLimit={30} />
+                  </TableCell>
                   {/* <TableCell><FlowStatusBadge status={flow.status ?? "active"} /></TableCell> */}
                   {/* <TableCell>
                   {flow.updatedAt ?? "???"}

diff --git a/autogpt_platform/frontend/src/components/monitor/FlowRunInfo.tsx b/autogpt_platform/frontend/src/components/monitor/FlowRunInfo.tsx
@@ -71,7 +71,7 @@ export const FlowRunInfo: React.FC<
         result: result.output_data?.output || undefined,
       })),
     );
-  }, [api, flow.id, flow.version, flowRun.id]);
+  }, [api, flow.id, flowRun.id]);
 
   // Fetch graph and execution data
   useEffect(() => {
@@ -80,7 +80,7 @@ export const FlowRunInfo: React.FC<
     }
 
     fetchBlockResults();
-  }, [isOutputOpen, blockOutputs]);
+  }, [isOutputOpen, blockOutputs, fetchBlockResults]);
 
   if (flowRun.graphID != flow.id) {
     throw new Error(
@@ -90,7 +90,7 @@ export const FlowRunInfo: React.FC<
 
   const handleStopRun = useCallback(() => {
     api.stopGraphExecution(flow.id, flowRun.id);
-  }, [flow.id, flowRun.id]);
+  }, [api, flow.id, flowRun.id]);
 
   return (
     <>

diff --git a/autogpt_platform/frontend/src/components/monitor/FlowRunsList.tsx b/autogpt_platform/frontend/src/components/monitor/FlowRunsList.tsx
@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/table";
 import moment from "moment/moment";
 import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
+import { TextRenderer } from "../ui/render";
 
 export const FlowRunsList: React.FC<{
   flows: GraphMeta[];
@@ -43,7 +44,10 @@ export const FlowRunsList: React.FC<{
               data-state={selectedRun?.id == run.id ? "selected" : null}
             >
               <TableCell>
-                {flows.find((f) => f.id == run.graphID)!.name}
+                <TextRenderer
+                  value={flows.find((f) => f.id == run.graphID)!.name}
+                  truncateLengthLimit={30}
+                />
               </TableCell>
               <TableCell>{moment(run.startTime).format("HH:mm")}</TableCell>
               <TableCell>

diff --git a/autogpt_platform/frontend/src/components/monitor/scheduleTable.tsx b/autogpt_platform/frontend/src/components/monitor/scheduleTable.tsx
@@ -30,6 +30,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { TextRenderer } from "../ui/render";
 
 interface SchedulesTableProps {
   schedules: Schedule[];
@@ -111,7 +112,7 @@ export const SchedulesTable = ({
             <SelectContent>
               {agents.map((agent, i) => (
                 <SelectItem key={agent.id + i} value={agent.id}>
-                  {agent.name}
+                  <TextRenderer value={agent.name} truncateLengthLimit={30} />
                 </SelectItem>
               ))}
             </SelectContent>

diff --git a/autogpt_platform/frontend/src/components/ui/render.tsx b/autogpt_platform/frontend/src/components/ui/render.tsx
@@ -76,15 +76,14 @@ const AudioRenderer: React.FC<{ audioUrl: string }> = ({ audioUrl }) => (
   </div>
 );
 
-const TextRenderer: React.FC<{ value: any; truncateLongData?: boolean }> = ({
-  value,
-  truncateLongData,
-}) => {
-  const maxChars = 100;
+export const TextRenderer: React.FC<{
+  value: any;
+  truncateLengthLimit?: number;
+}> = ({ value, truncateLengthLimit }) => {
   const text =
     typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
-  return truncateLongData && text.length > maxChars
-    ? text.slice(0, maxChars) + "..."
+  return truncateLengthLimit && text.length > truncateLengthLimit
+    ? text.slice(0, truncateLengthLimit) + "..."
     : text;
 };
 
@@ -101,5 +100,10 @@ export const ContentRenderer: React.FC<{
       return <AudioRenderer audioUrl={value} />;
     }
   }
-  return <TextRenderer value={value} truncateLongData={truncateLongData} />;
+  return (
+    <TextRenderer
+      value={value}
+      truncateLengthLimit={truncateLongData ? 100 : undefined}
+    />
+  );
 };
diff --git a/autogpt_platform/frontend/src/components/ui/scroll-area.tsx b/autogpt_platform/frontend/src/components/ui/scroll-area.tsx
@@ -14,7 +14,10 @@ const ScrollArea = React.forwardRef<
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport
+      className="h-full w-full rounded-[inherit]"
+      style={{ overflow: "scroll" }}
+    >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

diff --git a/autogpt_platform/frontend/src/lib/utils.ts b/autogpt_platform/frontend/src/lib/utils.ts
@@ -41,6 +41,7 @@ export function getTypeTextColor(type: string | null): string {
     {
       string: "text-green-500",
       number: "text-blue-500",
+      integer: "text-blue-500",
       boolean: "text-yellow-500",
       object: "text-purple-500",
       array: "text-indigo-500",
@@ -58,6 +59,7 @@ export function getTypeBgColor(type: string | null): string {
     {
       string: "border-green-500",
       number: "border-blue-500",
+      integer: "border-blue-500",
       boolean: "border-yellow-500",
       object: "border-purple-500",
       array: "border-indigo-500",
@@ -74,6 +76,7 @@ export function getTypeColor(type: string | null): string {
     {
       string: "#22c55e",
       number: "#3b82f6",
+      integer: "#3b82f6",
       boolean: "#eab308",
       object: "#a855f7",
       array: "#6366f1",

diff --git a/autogpt_platform/frontend/src/tests/auth.spec.ts b/autogpt_platform/frontend/src/tests/auth.spec.ts
@@ -1,46 +1,45 @@
-import { test, expect } from "./fixtures";
+// auth.spec.ts
+import { test } from "./fixtures";
 
 test.describe("Authentication", () => {
   test("user can login successfully", async ({ page, loginPage, testUser }) => {
-    await page.goto("/login"); // Make sure we're on the login page
+    await page.goto("/login");
     await loginPage.login(testUser.email, testUser.password);
-    // expect to be redirected to the home page
-    await expect(page).toHaveURL("/");
-    // expect to see the Monitor text
-    await expect(page.getByText("Monitor")).toBeVisible();
+    await test.expect(page).toHaveURL("/");
+    await test.expect(page.getByText("Monitor")).toBeVisible();
   });
 
   test("user can logout successfully", async ({
     page,
     loginPage,
     testUser,
   }) => {
-    await page.goto("/login"); // Make sure we're on the login page
+    await page.goto("/login");
     await loginPage.login(testUser.email, testUser.password);
 
-    // Expect to be on the home page
-    await expect(page).toHaveURL("/");
+    await test.expect(page).toHaveURL("/");
+
     // Click on the user menu
     await page.getByRole("button", { name: "CN" }).click();
     // Click on the logout menu item
     await page.getByRole("menuitem", { name: "Log out" }).click();
-    // Expect to be redirected to the login page
-    await expect(page).toHaveURL("/login");
+
+    await test.expect(page).toHaveURL("/login");
   });
 
   test("login in, then out, then in again", async ({
     page,
     loginPage,
     testUser,
   }) => {
-    await page.goto("/login"); // Make sure we're on the login page
+    await page.goto("/login");
     await loginPage.login(testUser.email, testUser.password);
     await page.goto("/");
     await page.getByRole("button", { name: "CN" }).click();
     await page.getByRole("menuitem", { name: "Log out" }).click();
-    await expect(page).toHaveURL("/login");
+    await test.expect(page).toHaveURL("/login");
     await loginPage.login(testUser.email, testUser.password);
-    await expect(page).toHaveURL("/");
-    await expect(page.getByText("Monitor")).toBeVisible();
+    await test.expect(page).toHaveURL("/");
+    await test.expect(page.getByText("Monitor")).toBeVisible();
   });
 });