feat(dashboard): Agent management page list view#10690
Merged
Conversation
Introduce conversational Agents feature: add API client (list/create/delete) and types, plus React components for listing, table view, create and delete dialogs with pagination, search, permissions and toasts. Wire the new AgentsList into the Agents page and gate it behind IS_CONVERSATIONAL_AGENTS_ENABLED feature flag. Also add QueryKeys.fetchAgents and the new feature flag enum entry.
Replace Add icon with RiRobot2Line and capitalize label for the create buttons. Revamp agents table UI: add a richer skeleton row component, import Skeleton primitive, set a fixed loading rows count (5), and update table header/cell padding and alignment for consistent spacing. Adjust row markup (icon sizing, name/identifier styling, description/date cell styles) to improve layout and visual hierarchy.
Add AgentIntegrationSummaryDto and include integrations on AgentResponseDto. Implement mapper to produce integration summaries and update ListAgents usecase to load, deduplicate and sort integrations per agent (using new AgentIntegrationRepository.findLinksForAgents and IntegrationRepository.find). Expose new types to the dashboard API and update agents list/table UI to render integration icons with tooltips, handle overflow, and improve provider icon sizing and skeleton row visuals.
✅ Deploy Preview for dashboard-v2-novu-staging canceled.
|
github-actions
bot
added
@novu/dal
@novu/shared
@novu/dashboard
@novu/api-service
labels
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughAdds agent integrations support and dashboard UI for managing agents. Introduces new DTOs, mapper, repository method, usecase wiring to load integration summaries, shared slug identifier constants, feature-flag gating, and new dashboard components and API client for list/create/delete flows. E2E test and minor UI/styling tweaks included. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AgentsList
participant ListAgentsUseCase
participant AgentRepo
participant AgentIntgRepo
participant IntegrationRepo
participant Mapper
User->>AgentsList: open list / request refresh
AgentsList->>ListAgentsUseCase: execute(params)
ListAgentsUseCase->>AgentRepo: find paginated agents
AgentRepo-->>ListAgentsUseCase: agents[]
ListAgentsUseCase->>AgentIntgRepo: findLinksForAgents(agentIds)
AgentIntgRepo-->>ListAgentsUseCase: links[] (_agentId, _integrationId)
ListAgentsUseCase->>IntegrationRepo: find integrations by IDs (env/org filtered)
IntegrationRepo-->>ListAgentsUseCase: integrations[]
ListAgentsUseCase->>Mapper: toAgentIntegrationSummary(integration)
Mapper-->>ListAgentsUseCase: summary
ListAgentsUseCase->>ListAgentsUseCase: dedupe & sort summaries per agent
ListAgentsUseCase-->>AgentsList: agents with integrations[]
AgentsList->>User: render table with provider icons
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
|
Hey there and thank you for opening this pull request! 👋 We require pull request titles to follow specific formatting rules and it looks like your proposed title needs to be adjusted. Your PR title is: Requirements:
Expected format: Details: PR title must end with 'fixes TICKET-ID' (e.g., 'fixes NOV-123') or include ticket ID in branch name |
Contributor
LaunchDarkly flag references🔍 1 flag added or modified
|
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
apps/api/src/app/agents/e2e/agents.e2e.ts (1)
64-71: Strengthen the 400 assertion to avoid false positives.This test currently validates only status code; asserting the validation message/content would ensure the failure is specifically from slug validation.
Suggested change
expect(res.status).to.equal(400); + expect(res.body.message).to.satisfy((message: string | string[]) => + Array.isArray(message) + ? message.some((m) => m.includes('identifier')) + : message.includes('identifier') + );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/api/src/app/agents/e2e/agents.e2e.ts` around lines 64 - 71, Update the test "should return 400 when identifier is not a valid slug" to assert the response body contains the specific validation message for the identifier slug (in addition to status 400); after performing session.testAgent.post('/v1/agents') and capturing res, check res.body (or res.body.error/message/validation) includes a clear indicator like "identifier" or "must be a valid slug" so the failure proves slug validation triggered (use the existing res variable and the same request).libs/dal/src/repositories/agent-integration/agent-integration.repository.ts (1)
27-27: Drop explicit return type in repository method.The explicit
Promise<Pick<...>[]>annotation is unnecessary here and goes against the repository typing convention.Suggested change
- }): Promise<Pick<AgentIntegrationEntity, '_agentId' | '_integrationId'>[]> { + }) {As per coding guidelines: "Return types are automatically inferred as
Pick<Entity, Keys>— do not manually annotate the return type."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/dal/src/repositories/agent-integration/agent-integration.repository.ts` at line 27, The repository method in agent-integration.repository.ts currently annotates its return as Promise<Pick<AgentIntegrationEntity, '_agentId' | '_integrationId'>[]>, which violates the repository typing convention; remove the explicit return type from that method signature so TypeScript infers the return as Pick<AgentIntegrationEntity, '_agentId' | '_integrationId'>[] (keep the method body unchanged) and ensure the method remains inside the same class (AgentIntegrationRepository or the existing exported repository function) so inference follows the project convention.packages/shared/src/consts/slug-identifier.ts (1)
7-9: Add a blank line beforereturninslugIdentifierFormatMessage.Suggested tweak
export function slugIdentifierFormatMessage(fieldName: string): string { + return `${fieldName} must be a valid slug format (letters, numbers, hyphens, dot and underscores only)`; }As per coding guidelines, "Include a blank line before every
returnstatement".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/shared/src/consts/slug-identifier.ts` around lines 7 - 9, The function slugIdentifierFormatMessage should have a blank line immediately before its return statement per coding guidelines; open the function definition for slugIdentifierFormatMessage and insert a single empty line before the existing return line so the function body has a blank line separating any preceding logic (or the function start) from the return.apps/api/src/app/agents/mappers/agent-response.mapper.ts (1)
25-32: Please add a blank line before thereturnin the new mapper function.Suggested tweak
export function toAgentIntegrationSummary( integration: Pick<IntegrationEntity, '_id' | 'identifier' | 'name' | 'providerId' | 'channel' | 'active'> ): AgentIntegrationSummaryDto { + return { integrationId: integration._id, providerId: integration.providerId, name: integration.name, identifier: integration.identifier, channel: integration.channel, active: integration.active, }; }As per coding guidelines, "Include a blank line before every
returnstatement".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/api/src/app/agents/mappers/agent-response.mapper.ts` around lines 25 - 32, Add a single blank line immediately before the return statement in the mapper function that constructs the object with integrationId, providerId, name, identifier, channel, and active (the new mapper in agent-response.mapper.ts); locate the function that returns { integrationId: integration._id, providerId: integration.providerId, name: integration.name, identifier: integration.identifier, channel: integration.channel, active: integration.active } and insert one empty line above that return to comply with the "blank line before return" guideline.apps/dashboard/src/components/agents/agents-list.tsx (1)
16-16: Keep the agents query key beside the agents API module.This feature already has a dedicated
apps/dashboard/src/api/agents.ts, but the query key still comes from@/utils/query-keys. Moving the key/helper next to the agents fetchers will keep fetching and invalidation coupled and matches the repo convention.As per coding guidelines,
apps/dashboard/src/api/**/*.{ts,tsx}:Co-locate query keys and fetcher functions in \src/api/` or alongside the feature they belong to`.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agents-list.tsx` at line 16, The agents query key is currently imported from QueryKeys in utils but should be co-located with the agents fetchers; add and export a dedicated query key (e.g., AGENTS_QUERY_KEY or a function getAgentsQueryKey) from the existing agents API module (apps/dashboard/src/api/agents.ts), update AgentsList to import that key from the agents API module instead of '@/utils/query-keys', and scan the repo for other imports of the agents key to update them to the new export so fetching and invalidation remain coupled with the agents fetchers.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dashboard/src/components/agents/agents-list.tsx`:
- Around line 84-88: The onSuccess handler currently just invalidates
QueryKeys.fetchAgents which can leave the UI stuck on an empty last page after
deleting the only agent on that page; update the onSuccess in AgentsList to
detect when the refetched page becomes empty and, if so and if there is a
previous page, move the pagination cursor back one page before
invalidating/refetching. Concretely: in the onSuccess callback (where
queryClient.invalidateQueries, showSuccessToast and setAgentToDelete are called)
use queryClient.getQueryData for [QueryKeys.fetchAgents, currentCursor] or the
same paginated query key to inspect the returned items count; if items.length
=== 0 and currentPage > 1 (or previousCursor exists) call the setter that
controls pagination (e.g. setPage or setCursor) to go to the previous page, then
invalidate/refetch the agents; otherwise proceed as today. Ensure you still call
setAgentToDelete(null) and showSuccessToast.
In `@apps/dashboard/src/components/agents/agents-table.tsx`:
- Around line 137-140: The last TableHead in agents-table.tsx is empty which
leaves the actions column unlabeled for screen readers; update that final
TableHead (the one with className "h-11 w-[52px] px-3 py-2.5") to include a
visually hidden label such as "Actions" (e.g., a span with the app's
screen-reader class like "sr-only" or the existing VisuallyHidden component if
available) so assistive tech announces the column heading while keeping the
label visually hidden.
- Around line 67-86: The TooltipTrigger is wrapped around a non-focusable div so
keyboard users cannot access integration labels; update the trigger to be
focusable (for example replace the plain div with a button or an element with
tabIndex=0) or surface the integration.name as visible/accessibly-hidden text
inside the cell so screen readers and keyboard users can read it; modify the
TooltipTrigger usage (component TooltipTrigger asChild) and ensure ProviderIcon
remains unchanged while adding the accessible label (integration.name) either as
visible text or inside an aria-label/visually-hidden element and keep
TooltipContent(integration.name) in sync.
---
Nitpick comments:
In `@apps/api/src/app/agents/e2e/agents.e2e.ts`:
- Around line 64-71: Update the test "should return 400 when identifier is not a
valid slug" to assert the response body contains the specific validation message
for the identifier slug (in addition to status 400); after performing
session.testAgent.post('/v1/agents') and capturing res, check res.body (or
res.body.error/message/validation) includes a clear indicator like "identifier"
or "must be a valid slug" so the failure proves slug validation triggered (use
the existing res variable and the same request).
In `@apps/api/src/app/agents/mappers/agent-response.mapper.ts`:
- Around line 25-32: Add a single blank line immediately before the return
statement in the mapper function that constructs the object with integrationId,
providerId, name, identifier, channel, and active (the new mapper in
agent-response.mapper.ts); locate the function that returns { integrationId:
integration._id, providerId: integration.providerId, name: integration.name,
identifier: integration.identifier, channel: integration.channel, active:
integration.active } and insert one empty line above that return to comply with
the "blank line before return" guideline.
In `@apps/dashboard/src/components/agents/agents-list.tsx`:
- Line 16: The agents query key is currently imported from QueryKeys in utils
but should be co-located with the agents fetchers; add and export a dedicated
query key (e.g., AGENTS_QUERY_KEY or a function getAgentsQueryKey) from the
existing agents API module (apps/dashboard/src/api/agents.ts), update AgentsList
to import that key from the agents API module instead of '@/utils/query-keys',
and scan the repo for other imports of the agents key to update them to the new
export so fetching and invalidation remain coupled with the agents fetchers.
In `@libs/dal/src/repositories/agent-integration/agent-integration.repository.ts`:
- Line 27: The repository method in agent-integration.repository.ts currently
annotates its return as Promise<Pick<AgentIntegrationEntity, '_agentId' |
'_integrationId'>[]>, which violates the repository typing convention; remove
the explicit return type from that method signature so TypeScript infers the
return as Pick<AgentIntegrationEntity, '_agentId' | '_integrationId'>[] (keep
the method body unchanged) and ensure the method remains inside the same class
(AgentIntegrationRepository or the existing exported repository function) so
inference follows the project convention.
In `@packages/shared/src/consts/slug-identifier.ts`:
- Around line 7-9: The function slugIdentifierFormatMessage should have a blank
line immediately before its return statement per coding guidelines; open the
function definition for slugIdentifierFormatMessage and insert a single empty
line before the existing return line so the function body has a blank line
separating any preceding logic (or the function start) from the return.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 13ee04d9-f013-4e14-ad6a-a566769acd0d
📒 Files selected for processing (23)
apps/api/src/app/agents/dtos/agent-integration-summary.dto.tsapps/api/src/app/agents/dtos/agent-response.dto.tsapps/api/src/app/agents/dtos/create-agent-request.dto.tsapps/api/src/app/agents/dtos/index.tsapps/api/src/app/agents/e2e/agents.e2e.tsapps/api/src/app/agents/mappers/agent-response.mapper.tsapps/api/src/app/agents/usecases/list-agents/list-agents.usecase.tsapps/api/src/app/workflows-v2/dtos/create-step.dto.tsapps/api/src/app/workflows-v2/dtos/create-workflow.dto.tsapps/api/src/app/workflows-v2/dtos/duplicate-workflow.dto.tsapps/dashboard/src/api/agents.tsapps/dashboard/src/components/agents/agents-list.tsxapps/dashboard/src/components/agents/agents-table.tsxapps/dashboard/src/components/agents/create-agent-dialog.tsxapps/dashboard/src/components/agents/delete-agent-dialog.tsxapps/dashboard/src/components/integrations/components/provider-icon.tsxapps/dashboard/src/components/workflow-editor/schema.tsapps/dashboard/src/pages/agents.tsxapps/dashboard/src/utils/query-keys.tslibs/dal/src/repositories/agent-integration/agent-integration.repository.tspackages/shared/src/consts/index.tspackages/shared/src/consts/slug-identifier.tspackages/shared/src/types/feature-flags.ts
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (4)
apps/dashboard/src/components/agents/agents-list.tsx (2)
147-156: Add blank line beforereturnin callback.Same as
handleNextPage- as per coding guidelines, include a blank line before everyreturnstatement.Suggested fix
const handlePreviousPage = useCallback(() => { const previous = listQuery.data?.previous; if (!previous) { + return; } setBefore(previous); setAfter(undefined); }, [listQuery.data?.previous]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agents-list.tsx` around lines 147 - 156, The callback handlePreviousPage should follow the coding guideline of having a blank line before every return; open the function (handlePreviousPage) and insert a single empty line immediately before the "return" statement that exits when previous is falsy, ensuring the spacing matches handleNextPage and the component's lint/style rules.
136-145: Add blank line beforereturnin callback.As per coding guidelines, include a blank line before every
returnstatement.Suggested fix
const handleNextPage = useCallback(() => { const next = listQuery.data?.next; - if (!next) { - return; - } + if (!next) { + + return; + } setAfter(next); setBefore(undefined); }, [listQuery.data?.next]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agents-list.tsx` around lines 136 - 145, The callback handleNextPage lacks a blank line immediately before its early return; update the function (the useCallback that reads listQuery.data?.next) to insert a blank line before the line "return" while keeping logic intact (leave the next-check, setAfter(next) and setBefore(undefined) behavior unchanged) so the blank-line-before-return coding guideline is satisfied.apps/dashboard/src/components/agents/agents-table.tsx (2)
100-129: Add blank line beforereturnstatement.As per coding guidelines, include a blank line before every
returnstatement.Suggested fix
function AgentsTableSkeletonRow() { + return ( <TableRow>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agents-table.tsx` around lines 100 - 129, In AgentsTableSkeletonRow, add a single blank line immediately before the "return (" statement so there is an empty line separating the function body start from the return; update the function declaration around AgentsTableSkeletonRow to include that blank line and ensure no other whitespace rules are violated.
48-50: Add blank line beforereturnstatement.As per coding guidelines, include a blank line before every
returnstatement.Suggested fix
function getProviderDisplayName(providerId: string): string { + return novuProviders.find((p) => p.id === providerId)?.displayName ?? providerId; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agents-table.tsx` around lines 48 - 50, Add a blank line before the return statement in the getProviderDisplayName function: locate the function getProviderDisplayName(providerId: string) which uses novuProviders.find(...) and insert a single empty line immediately above the return so the file follows the coding guideline of having a blank line before every return statement.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/components/agents/agents-list.tsx`:
- Around line 147-156: The callback handlePreviousPage should follow the coding
guideline of having a blank line before every return; open the function
(handlePreviousPage) and insert a single empty line immediately before the
"return" statement that exits when previous is falsy, ensuring the spacing
matches handleNextPage and the component's lint/style rules.
- Around line 136-145: The callback handleNextPage lacks a blank line
immediately before its early return; update the function (the useCallback that
reads listQuery.data?.next) to insert a blank line before the line "return"
while keeping logic intact (leave the next-check, setAfter(next) and
setBefore(undefined) behavior unchanged) so the blank-line-before-return coding
guideline is satisfied.
In `@apps/dashboard/src/components/agents/agents-table.tsx`:
- Around line 100-129: In AgentsTableSkeletonRow, add a single blank line
immediately before the "return (" statement so there is an empty line separating
the function body start from the return; update the function declaration around
AgentsTableSkeletonRow to include that blank line and ensure no other whitespace
rules are violated.
- Around line 48-50: Add a blank line before the return statement in the
getProviderDisplayName function: locate the function
getProviderDisplayName(providerId: string) which uses novuProviders.find(...)
and insert a single empty line immediately above the return so the file follows
the coding guideline of having a blank line before every return statement.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 49f2d0a9-f8aa-458d-91f2-d9153a2a7c85
📒 Files selected for processing (6)
apps/api/src/app/agents/e2e/agents.e2e.tsapps/api/src/app/agents/mappers/agent-response.mapper.tsapps/dashboard/src/api/agents.tsapps/dashboard/src/components/agents/agents-list.tsxapps/dashboard/src/components/agents/agents-table.tsxlibs/dal/src/repositories/agent-integration/agent-integration.repository.ts
✅ Files skipped from review due to trivial changes (1)
- libs/dal/src/repositories/agent-integration/agent-integration.repository.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/api/src/app/agents/e2e/agents.e2e.ts
- apps/api/src/app/agents/mappers/agent-response.mapper.ts
- apps/dashboard/src/api/agents.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed? Why was the change needed?
What changed
Added a full-featured Agent management list view to the dashboard with create and delete flows, identifier search, and cursor-based pagination; the UI is gated behind a new feature flag (IS_CONVERSATIONAL_AGENTS_ENABLED). Backend changes provide integration summaries per agent, enforce a shared slug identifier format, and add repository support to efficiently resolve agent–integration links so the list can show associated integrations.
Affected areas
api: Introduced AgentIntegrationSummaryDto and an integrations[] field on AgentResponseDto, added mapper logic and ListAgents usecase changes to load, dedupe, and sort integration summaries per agent, tightened CreateAgentRequestDto identifier validation, and added an e2e test for invalid identifiers.
dashboard: Added a typed agents API client (list/create/delete) and TanStack Query keys; new React components for listing and managing agents (AgentsList, AgentsTable, CreateAgentDialog, DeleteAgentDialog); page wiring to show the list when the conversational agents feature flag is enabled; minor ProviderIcon styling tweak.
dal: Added findLinksForAgents() to batch-fetch agent-integration link records scoped by environment and organization.
shared: Added SLUG_IDENTIFIER_REGEX and slugIdentifierFormatMessage(), and a new feature flag key IS_CONVERSATIONAL_AGENTS_ENABLED.
Key technical decisions
Testing
Added an E2E test asserting a 422 response for an agent identifier containing spaces; UI behavior relies on manual/QA verification and existing integration tests (no new unit tests in this PR).
Screenshots
Expand for optional sections
Related enterprise PR
Special notes for your reviewer