feat(ui): add temporary ui for connectors #1702

PetrBulanek · 2025-12-10T14:39:27Z

Summary

Adds temporary UI for connectors for better clarity until the final design is ready.

Linked Issues

Refs: #1442

Documentation

No Docs Needed:

gemini-code-assist · 2025-12-10T14:40:10Z

Summary of Changes

Hello @PetrBulanek, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a temporary user interface for managing connectors within the application. The primary goal is to provide better clarity and functionality for connector interactions until a final design is implemented. This involves creating new UI components for listing, adding, and managing connector states, along with refactoring existing table views to support search and action buttons. The changes also include updates to the underlying API interactions and state management for connectors.

Highlights

New UI for Connectors: A temporary user interface has been implemented for managing connectors, providing views for listing, adding, connecting, disconnecting, and deleting connectors. This replaces a basic form-based approach with a more structured table view.
Refactored Table Views: The TableView component now accepts a className prop for better styling flexibility, and a new TableViewWithSearch component has been introduced. This new component standardizes the display of data tables with built-in search functionality, headers, entries, and toolbar actions, including proper loading states.
API and Hook Updates for Connectors: Connector API functions and their corresponding React Query hooks (useConnectConnector, useCreateConnector, useDisconnect) have been updated. This includes using more consistent path parameter handling, improved state management for authorization flows, and better invalidation of cached data after mutations.
Dependency Update: The @hookform/resolvers package has been added to the project dependencies, enabling integration with schema validation libraries like Zod for form handling in new UI components.
Code Structure Improvements: Several components related to secrets and variables have been reorganized into dedicated components and hooks subdirectories, enhancing modularity and maintainability within the runs and providers modules.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

Signed-off-by: Petr Bulánek <[email protected]>

gemini-code-assist

Code Review

This pull request introduces a new TableViewWithSearch component to standardize table displays with search functionality across the application, replacing manual table implementations in ConnectorsView, ProvidersView, and VariablesView. It refactors connector-related API calls and hooks for improved type safety and state management, including adding a new AddConnectorModal and dedicated action buttons for connectors. The PR also updates various import paths, particularly for secret management components, and introduces Zod schemas for form validation. Review comments highlight a critical security vulnerability in [email protected] and a deprecated mintlify package, recommending immediate upgrades. Additionally, feedback suggests aligning @hookform/resolvers major version with react-hook-form v7, considering a more flexible generic constraint for TableViewWithSearch, making the redirect_url in connector API calls potentially dynamic, ensuring all queries are updated for the connectorKeys.all change, and improving the handling of OAuth popup closures.

pnpm-lock.yaml

apps/agentstack-ui/package.json

apps/agentstack-ui/src/components/TableView/TableViewWithSearch.tsx

apps/agentstack-ui/src/modules/connectors/api/index.ts

apps/agentstack-ui/src/modules/connectors/api/keys.ts

apps/agentstack-ui/src/modules/connectors/hooks/useConnectors.ts

apps/agentstack-ui/src/modules/connectors/types.ts

pnpm-lock.yaml

Signed-off-by: Petr Bulánek <[email protected]>

kapetr · 2025-12-11T10:38:03Z

apps/agentstack-ui/src/modules/connectors/api/index.ts

-  state: 'disconnected';
-}
+export async function deleteConnector(path: DeleteConnectorPath) {
+  const response = await api.DELETE('/api/v1/connectors/{connector_id}', { params: { path } });


I think we want to implement all api calls in the SDK and use them from there from now on. But we can leave that for #1692 .

kapetr · 2025-12-11T11:34:21Z

apps/agentstack-ui/src/modules/connectors/hooks/useConnectors.ts

-      authorizeOauth(result.auth_request.authorization_endpoint, handleAuthorizeCallback);
+      const result = await connectConnector({ connector_id: connectorId });
+
+      if (result && result.auth_request) {


if (result?.auth_request)

kapetr · 2025-12-11T11:47:28Z

apps/agentstack-ui/src/modules/providers/variables/components/DeleteVariableButton.tsx

+    <IconButton
+      label="Delete"
+      kind="ghost"
+      size="sm"
+      onClick={() =>


Maybe we could create a DeleteButton abstraction (not necessarily in this PR 😊 )

kapetr · 2025-12-11T11:48:50Z

apps/agentstack-ui/src/components/TableView/TableViewWithSearch.tsx

Signed-off-by: Petr Bulánek <[email protected]>

PetrBulanek requested review from kapetr, matoushavlena and tomkis December 10, 2025 14:39

dosubot bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Dec 10, 2025

PetrBulanek added 2 commits December 10, 2025 15:40

refactor(ui): create a common TableViewWithSearch component

4897cdf

Signed-off-by: Petr Bulánek <[email protected]>

refactor(ui): connectors api functions

a387a6b

Signed-off-by: Petr Bulánek <[email protected]>

gemini-code-assist bot reviewed Dec 10, 2025

View reviewed changes

feat(ui): add connectors modal

4b4d892

Signed-off-by: Petr Bulánek <[email protected]>

PetrBulanek force-pushed the ui/style-connectors branch from 9d35bb8 to 4b4d892 Compare December 10, 2025 14:49

PetrBulanek added 2 commits December 10, 2025 15:57

fixup! feat(ui): add connectors modal

ccd80c2

Signed-off-by: Petr Bulánek <[email protected]>

fixup! fixup! feat(ui): add connectors modal

7f2c252

Signed-off-by: Petr Bulánek <[email protected]>

kapetr approved these changes Dec 11, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Dec 11, 2025

fixup! fixup! fixup! feat(ui): add connectors modal

7a11666

Signed-off-by: Petr Bulánek <[email protected]>

kapetr approved these changes Dec 11, 2025

View reviewed changes

PetrBulanek merged commit eaa37db into main Dec 11, 2025
8 checks passed

PetrBulanek deleted the ui/style-connectors branch December 11, 2025 14:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): add temporary ui for connectors #1702

feat(ui): add temporary ui for connectors #1702

Uh oh!

PetrBulanek commented Dec 10, 2025

Uh oh!

gemini-code-assist bot commented Dec 10, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kapetr Dec 11, 2025

Uh oh!

kapetr Dec 11, 2025

Uh oh!

kapetr Dec 11, 2025

Uh oh!

kapetr Dec 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(ui): add temporary ui for connectors #1702

feat(ui): add temporary ui for connectors #1702

Uh oh!

Conversation

PetrBulanek commented Dec 10, 2025

Summary

Linked Issues

Documentation

Uh oh!

gemini-code-assist bot commented Dec 10, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kapetr Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

kapetr Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

kapetr Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

kapetr Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants