mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-01-29 17:08:01 -05:00

Files

Ubbe 375d33cca9 fix(frontend): agent credentials improvements (#11763 )

## Changes 🏗️

### System credentials in Run Modal

We had the issue that "system" credentials were mixed with "user"
credentials in the run agent modal:

#### Before

<img width="400" height="466" alt="Screenshot 2026-01-14 at 19 05 56"
src="https://github.com/user-attachments/assets/9d1ee766-5004-491f-ae14-a0cf89a9118e"
/>

This created confusion among the users. This "system" credentials are
supplied by AutoGPT ( _most of the time_ ) and a user running an agent
should not bother with them ( _unless they want to change them_ ). For
example in this case, the credential that matters is the **Google** one
🙇🏽

### After

<img width="400" height="350" alt="Screenshot 2026-01-14 at 19 04 12"
src="https://github.com/user-attachments/assets/e2bbc015-ce4c-496c-a76f-293c01a11c6f"
/>

<img width="400" height="672" alt="Screenshot 2026-01-14 at 19 04 19"
src="https://github.com/user-attachments/assets/d704dae2-ecb2-4306-bd04-3d812fed4401"
/>

"System" credentials are collapsed by default, reducing noise in the
Task Credentials section. The user can still see and change them by
expanding the accordion.

<img width="400" height="190" alt="Screenshot 2026-01-14 at 19 04 27"
src="https://github.com/user-attachments/assets/edc69612-4588-48e4-981a-f59c26cfa390"
/>

If some "system" credentials are missing, there is a red label
indicating so, it wasn't that obvious with the previous implementation,

<img width="400" height="309" alt="Screenshot 2026-01-14 at 19 04 30"
src="https://github.com/user-attachments/assets/f27081c7-40ad-4757-97b3-f29636616fc2"
/>

### New endpoint

There is a new REST endpoint, `GET /providers/system`, to list system
credential providers so it is easy to access in the Front-end to group
them together vs user ones.

### Other improvements

#### `<CredentialsInput />` refinements

<img width="715" height="200" alt="Screenshot 2026-01-14 at 19 09 31"
src="https://github.com/user-attachments/assets/01b39b16-25f3-428d-a6c8-da608038a38b"
/>

Use a normal browser `<select>` for the Credentials Dropdown ( _when you
have more than 1 for a provider_ ). This simplifies the UI shennagians a
lot and provides a better UX in 📱 ( _eventually we should move all our
selects to the native ones as they are much better for mobile and touch
screens and less code to maintain our end_ ).

I also renamed some files for clarity and tidied up some of the existing
logic.

#### Other

- Fix **Open telemetry** warnings on the server console by making the
packages external
- Fix `require-in-the-middle` console warnings
- Prettier tidy ups

## 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:
  - [x] Run the app locally and test the above

2026-01-15 17:44:44 +07:00

2.2 KiB

Raw Blame History

Frontend Testing 🧪

Quick Start (local) 🚀

Start the backend + Supabase stack:
- From autogpt_platform: docker compose --profile local up deps_backend -d
- Or run the full stack: docker compose up -d
Seed rich E2E data (creates test123@gmail.com with library agents):
- From autogpt_platform/backend: poetry run python test/e2e_test_data.py
Run Playwright:
- From autogpt_platform/frontend: pnpm test or pnpm test-ui

How Playwright setup works 🎭

Playwright runs from frontend/playwright.config.ts with a global setup step.
The global setup creates a user pool via the real signup UI and stores it in frontend/.auth/user-pool.json.
Most tests call getTestUser() (from src/tests/utils/auth.ts) which pulls a random user from that pool.
- these users do not contain library agents, it's user that just "signed up" on the platform, hence some tests to make use of users created via script (see below) with more data

Test users 👤

User pool (basic users)
Created automatically by the Playwright global setup through /signup.
Used by getTestUser() in src/tests/utils/auth.ts.
Rich user with library agents
Created by backend/test/e2e_test_data.py.
Accessed via getTestUserWithLibraryAgents() in src/tests/credentials/index.ts.

Use the rich user when a test needs existing library agents (e.g. library.spec.ts).

Resetting or wiping the DB 🔁

If you reset the Docker DB and logins start failing:

Delete frontend/.auth/user-pool.json so the pool is regenerated.
Re-run the E2E data script to recreate the rich user + library agents:
- poetry run python test/e2e_test_data.py

Storybook 📚

Flow diagram 🗺️

flowchart TD
  A[Start Docker stack] --> B[Run e2e_test_data.py]
  B --> C[Run Playwright tests]
  C --> D[Global setup creates user pool]
  D --> E{Test needs rich data?}
  E -->|No| F[getTestUser from user pool]
  E -->|Yes| G[getTestUserWithLibraryAgents]

pnpm storybook – Run Storybook locally
pnpm build-storybook – Build a static Storybook
CI runner: pnpm test-storybook
When changing components in src/components, update or add stories and verify in Storybook/Chromatic.

2.2 KiB Raw Blame History Unescape Escape