Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Conversation

Cahllagerfeld
Copy link
Contributor

@Cahllagerfeld Cahllagerfeld commented Jul 29, 2025

Summary by CodeRabbit

  • New Features

    • Added ability to edit and display user and service account avatars throughout the app, including profile and settings pages.
    • Introduced admin and bot badges for user and service account identification.
    • Enhanced run stop actions with confirmation dialogs for graceful and immediate termination.
    • Improved artifact and step details navigation in DAG visualizations with global sheet management.
    • Added new components for service account headers and avatars.
  • Improvements

    • Avatars now show images, usernames, and service account status in lists, tables, dropdowns, and detail views.
    • User and service account metadata (e.g., avatar URL, full name) are now more prominently displayed and editable.
    • Pagination controls in log viewer now include "First" and "Last" navigation.
    • Avatar URLs are sanitized before rendering for improved security.
  • Bug Fixes

    • Improved fallback handling for missing user or avatar information.
  • Documentation

    • Expanded API documentation on service account and API key operations, including new error cases and metadata fields.
  • Refactor

    • Internal logic for avatar rendering, run stop actions, and DAG sheet management was streamlined for better maintainability and consistency.
    • Removed deprecated sheet components and centralized sheet context management in DAG visualizer.
    • Refactored stop run button to delegate confirmation dialogs externally.
  • Chores

    • Updated dependency overrides for security and compatibility.

Copy link
Contributor

coderabbitai bot commented Jul 29, 2025

"""

Walkthrough

This set of changes introduces enhanced avatar rendering across the application, enriching user and service account displays with avatar images, service account indicators, and badges. It refactors avatar-related components, adds new UI dialogs for stopping runs, and restructures DAG sheet logic with new context providers. Additional schema and documentation updates expand user, service account, and error metadata.

Changes

Cohort / File(s) Change Summary
Avatar Rendering & Enrichment
src/components/InlineAvatar.tsx, src/components/avatars/service-account-avatar.tsx, src/components/avatars/user-or-service-account.tsx, src/components/bot-badge.tsx, src/components/admin-badge.tsx
Refactored InlineAvatar to use a new avatar component supporting user/service account avatars, added bot/admin badges, and introduced new avatar components for service accounts and conditional rendering.
Avatar Usage Across App
src/app/components/columns.tsx, src/app/overview/welcome.tsx, src/app/pipelines/[namespace]/columns.tsx, src/app/runs/columns.tsx, src/app/settings/connectors/columns.tsx, src/app/settings/connectors/create/success/columns.tsx, src/app/settings/members/columns.tsx, src/app/settings/secrets/columns.tsx, src/app/stacks/columns.tsx, src/app/stacks/create/manual/ComponentSelection.tsx, src/components/artifacts/artifact-node-sheet/DetailCards.tsx, src/components/stack-components/component-detail/ConfigTab.tsx, src/components/stack-components/component-sheet/stacks-tab/columns.tsx, src/components/steps/step-sheet/DetailsTab.tsx, src/layouts/settings/project-settings/layout.tsx, src/layouts/settings/settings-layout/layout.tsx
Updated avatar rendering in all relevant columns, detail views, and lists to use new avatar components with enriched props (avatarUrl, isServiceAccount, badges).
Avatar Image Integration & URL Sanitization
src/components/avatar-stack.tsx, src/layouts/AuthenticatedLayout/UserDropdown.tsx, src/app/settings/profile/page.tsx, src/app/overview/welcome.tsx
Integrated AvatarImage for user avatars and sanitized avatar URLs before rendering.
Service Account Avatar Table Update
src/app/settings/service-accounts/columns.tsx
Replaced static lock icon with dynamic service account avatar in table.
Profile Avatar Editing
src/app/settings/profile/edit-avatar-dialog.tsx, src/app/settings/profile/page.tsx
Added a dialog for editing avatar URLs and integrated it into the profile page.
Service Account Header Refactor
src/app/settings/service-accounts/[service-account-id]/header.tsx, src/app/settings/service-accounts/[service-account-id]/page.tsx
Moved service account header logic to a new component and simplified the page component accordingly.
DAG Visualizer Sheet Refactor
src/components/dag-visualizer/ArtifactNode.tsx, src/components/dag-visualizer/StepNode.tsx, src/components/dag-visualizer/global-sheets.tsx, src/components/dag-visualizer/sheet-context.tsx, src/app/runs/[id]/Dag.tsx
Replaced per-node sheet logic with a global sheet context and provider, refactored node components to use new context for sheet control.
Removed Redundant Sheet Components
src/components/artifacts/artifact-node-sheet/index.tsx, src/components/steps/step-sheet/index.tsx
Deleted obsolete sheet components now superseded by global sheet context.
Run Stop Dialog Refactor
src/components/runs/stop-group/stop-alert.tsx, src/components/runs/stop-group/stop-button.tsx, src/components/runs/stop-group/stop-dropdown.tsx, src/components/runs/stop-group/use-stop-run.tsx
Moved stop logic into new alert dialog components for graceful and immediate run stops, updated hooks and button/dropdown components to use dialogs.
Log Viewer Pagination Enhancement
src/components/logs/enhanced-log-viewer.tsx
Added "First" and "Last" page navigation buttons and refactored pagination controls for consistency.
Miscellaneous UI & Import Updates
src/app/settings/connectors/[id]/configuration/params.tsx, src/app/overview/pipelines-grid/pipeline-sheet.tsx, src/components/form/FieldHint.tsx
Minor import cleanups, prop updates, and button type specification.
Schema & API Documentation Updates
src/types/core.ts
Added new exception info schema, enriched user/service account metadata, and documented possible errors for relevant API operations.
Dependency Override
package.json
Added explicit brace-expansion version overrides in pnpm.overrides.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI
    participant InlineAvatar
    participant UserOrServiceAccountAvatar
    participant ServiceAccountAvatar

    User->>UI: View table/list/detail with author/service account
    UI->>InlineAvatar: Render with {username, avatarUrl, isServiceAccount}
    InlineAvatar->>UserOrServiceAccountAvatar: Pass props
    alt isServiceAccount
        UserOrServiceAccountAvatar->>ServiceAccountAvatar: Render service account avatar
    else
        UserOrServiceAccountAvatar->>UI: Render user avatar image/fallback
    end
    InlineAvatar->>UI: Render badges (bot/admin) as needed
Loading
sequenceDiagram
    participant User
    participant RunUI
    participant StopRunButton
    participant StopGracefullyAlert
    participant useStopRun

    User->>StopRunButton: Click "Stop Run"
    StopRunButton->>StopGracefullyAlert: Open confirmation dialog
    User->>StopGracefullyAlert: Confirm stop
    StopGracefullyAlert->>useStopRun: Trigger stop mutation
    useStopRun-->>StopGracefullyAlert: On success/error, close dialog
Loading
sequenceDiagram
    participant User
    participant DAG
    participant SheetProvider
    participant NodeComponent
    participant GlobalSheets

    User->>NodeComponent: Click node (step/artifact)
    NodeComponent->>SheetProvider: openStepSheet/openArtifactSheet(id)
    SheetProvider->>GlobalSheets: Sheet open with content
    GlobalSheets->>UI: Render StepSheet/ArtifactSheet as needed
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • Dependency Update to main #710: Both PRs modify package.json to add or adjust package overrides, though for different packages.
  • Release #740: Both PRs change the "Author" column rendering logic, but in opposite directions (one enriches, the other simplifies).

Suggested reviewers

  • schustmi

Poem

A bunny hopped in, with avatars to mend,
Now faces and bots have a friend to send.
With badges of honor, and images bright,
Service accounts join the user delight.
Sheets now appear with a global embrace,
And stopping a run? There's a dialog in place!
🐰✨
"""

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 758a379 and d3d8c20.

📒 Files selected for processing (1)
  • scripts/check-links.js (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • scripts/check-links.js
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch staging

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@Cahllagerfeld Cahllagerfeld requested a review from schustmi July 29, 2025 09:27
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (6)
src/components/avatars/service-account-avatar.tsx (1)

11-24: Consider providing a default color variant.

The getClassVariant function returns an empty string for the default case, which means service accounts with saltValue > 4 won't have any background/text styling. Consider adding a default color variant to ensure consistent visual appearance.

 	default:
-		return "";
+		return "bg-neutral-100 text-neutral-600";
src/components/dag-visualizer/global-sheets.tsx (2)

14-16: Consider removing hardcoded timeout for better reliability.

The 100ms setTimeout appears to be a workaround for animation timing, but hardcoded delays can cause race conditions and are fragile. Consider using React Flow's built-in event handlers or animation completion callbacks instead.

-			setTimeout(() => {
-				addSelectedNodes([]);
-			}, 100);
+			addSelectedNodes([]);

If the delay is truly necessary for animations, consider making it configurable or using a more robust timing mechanism.


24-29: Add safety check for sheet content rendering.

The conditional rendering assumes sheetState.lastContent exists when the sheet is open, but there's no explicit null check. Consider adding a guard clause to prevent potential issues.

			<SheetContent className="w-[1000px] overflow-y-auto">
+				{!sheetState.lastContent && sheetState.isOpen && (
+					<div>No content available</div>
+				)}
				{sheetState.lastContent?.type === "step" && (
					<StepSheetContent stepId={sheetState.lastContent.id} />
				)}
				{sheetState.lastContent?.type === "artifact" && (
					<ArtifactSheetContent artifactVersionId={sheetState.lastContent.id} />
				)}
			</SheetContent>
src/app/settings/service-accounts/[service-account-id]/header.tsx (2)

15-17: Consider the timing of breadcrumb updates during loading states.

The breadcrumb hook is called with serviceAccount.data which will be undefined during the pending state. Ensure the useServiceAccountDetailBreadcrumbs hook handles undefined data gracefully, or consider moving this call after the loading check.


17-17: Consider providing user feedback for error states.

Returning null on error means users won't see any indication of what went wrong. Consider showing an error message or retry option instead of silently failing.

-	if (serviceAccount.isError) return null;
+	if (serviceAccount.isError) return (
+		<div className="text-theme-text-error">
+			Failed to load service account details
+		</div>
+	);
src/components/avatars/user-or-service-account.tsx (1)

29-29: Consider adding null check for name.

While the name prop is required, adding a null check would make the component more defensive against edge cases.

-			<AvatarFallback size={size}>{name[0]}</AvatarFallback>
+			<AvatarFallback size={size}>{name?.[0] ?? "?"}</AvatarFallback>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5d0a35c and 758a379.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (46)
  • package.json (1 hunks)
  • src/app/components/columns.tsx (2 hunks)
  • src/app/overview/pipelines-grid/pipeline-sheet.tsx (2 hunks)
  • src/app/overview/welcome.tsx (2 hunks)
  • src/app/pipelines/[namespace]/columns.tsx (1 hunks)
  • src/app/runs/[id]/Dag.tsx (2 hunks)
  • src/app/runs/[id]/_Tabs/Overview/Details.tsx (1 hunks)
  • src/app/runs/columns.tsx (1 hunks)
  • src/app/settings/connectors/[id]/configuration/params.tsx (1 hunks)
  • src/app/settings/connectors/columns.tsx (2 hunks)
  • src/app/settings/connectors/create/success/columns.tsx (2 hunks)
  • src/app/settings/members/columns.tsx (2 hunks)
  • src/app/settings/profile/edit-avatar-dialog.tsx (1 hunks)
  • src/app/settings/profile/page.tsx (2 hunks)
  • src/app/settings/secrets/columns.tsx (1 hunks)
  • src/app/settings/service-accounts/[service-account-id]/header.tsx (1 hunks)
  • src/app/settings/service-accounts/[service-account-id]/page.tsx (1 hunks)
  • src/app/settings/service-accounts/columns.tsx (2 hunks)
  • src/app/stacks/columns.tsx (1 hunks)
  • src/app/stacks/create/manual/ComponentSelection.tsx (1 hunks)
  • src/components/InlineAvatar.tsx (1 hunks)
  • src/components/admin-badge.tsx (1 hunks)
  • src/components/artifacts/artifact-node-sheet/DetailCards.tsx (1 hunks)
  • src/components/artifacts/artifact-node-sheet/index.tsx (0 hunks)
  • src/components/avatar-stack.tsx (2 hunks)
  • src/components/avatars/service-account-avatar.tsx (1 hunks)
  • src/components/avatars/user-or-service-account.tsx (1 hunks)
  • src/components/bot-badge.tsx (1 hunks)
  • src/components/dag-visualizer/ArtifactNode.tsx (1 hunks)
  • src/components/dag-visualizer/StepNode.tsx (1 hunks)
  • src/components/dag-visualizer/global-sheets.tsx (1 hunks)
  • src/components/dag-visualizer/sheet-context.tsx (1 hunks)
  • src/components/form/FieldHint.tsx (1 hunks)
  • src/components/logs/enhanced-log-viewer.tsx (2 hunks)
  • src/components/runs/stop-group/stop-alert.tsx (1 hunks)
  • src/components/runs/stop-group/stop-button.tsx (1 hunks)
  • src/components/runs/stop-group/stop-dropdown.tsx (1 hunks)
  • src/components/runs/stop-group/use-stop-run.tsx (2 hunks)
  • src/components/stack-components/component-detail/ConfigTab.tsx (1 hunks)
  • src/components/stack-components/component-sheet/stacks-tab/columns.tsx (1 hunks)
  • src/components/steps/step-sheet/DetailsTab.tsx (1 hunks)
  • src/components/steps/step-sheet/index.tsx (0 hunks)
  • src/layouts/AuthenticatedLayout/UserDropdown.tsx (3 hunks)
  • src/layouts/settings/project-settings/layout.tsx (1 hunks)
  • src/layouts/settings/settings-layout/layout.tsx (1 hunks)
  • src/types/core.ts (25 hunks)
💤 Files with no reviewable changes (2)
  • src/components/artifacts/artifact-node-sheet/index.tsx
  • src/components/steps/step-sheet/index.tsx
🧰 Additional context used
🧬 Code Graph Analysis (26)
src/app/components/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/pipelines/[namespace]/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/overview/welcome.tsx (1)
src/lib/url.ts (1)
  • sanitizeUrl (64-66)
src/components/avatar-stack.tsx (1)
src/lib/url.ts (1)
  • sanitizeUrl (64-66)
src/components/stack-components/component-detail/ConfigTab.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/layouts/AuthenticatedLayout/UserDropdown.tsx (1)
src/lib/url.ts (1)
  • sanitizeUrl (64-66)
src/components/runs/stop-group/use-stop-run.tsx (2)
src/router/queryclient.ts (1)
  • queryClient (10-25)
src/data/pipeline-runs/stop-run.ts (1)
  • useStopPipelineRun (39-46)
src/components/stack-components/component-sheet/stacks-tab/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/settings/connectors/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/components/steps/step-sheet/DetailsTab.tsx (2)
src/components/KeyValue.tsx (1)
  • KeyValue (39-46)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/settings/connectors/create/success/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/settings/members/columns.tsx (2)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/components/admin-badge.tsx (1)
  • AdminBadge (3-9)
src/app/stacks/create/manual/ComponentSelection.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/settings/connectors/[id]/configuration/params.tsx (2)
src/components/KeyValue.tsx (1)
  • KeyValue (39-46)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/settings/service-accounts/columns.tsx (1)
src/components/avatars/service-account-avatar.tsx (1)
  • ServiceAccountAvatar (26-48)
src/app/settings/secrets/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/components/dag-visualizer/StepNode.tsx (4)
src/components/dag-visualizer/sheet-context.tsx (1)
  • useSheetContext (68-74)
src/components/ExecutionStatus.tsx (2)
  • getExecutionStatusBackgroundColor (35-55)
  • ExecutionStatusIcon (81-118)
src/lib/code-snippets.ts (1)
  • getStepSnippet (8-13)
src/lib/dates.ts (1)
  • secondsToTimeString (39-43)
src/components/runs/stop-group/stop-dropdown.tsx (1)
src/components/runs/stop-group/stop-alert.tsx (1)
  • StopImmediatelyAlert (90-111)
src/app/settings/profile/page.tsx (2)
src/lib/url.ts (1)
  • sanitizeUrl (64-66)
src/app/settings/profile/edit-avatar-dialog.tsx (1)
  • EditAvatarDialog (28-119)
src/layouts/settings/project-settings/layout.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/components/avatars/service-account-avatar.tsx (2)
src/lib/images.ts (1)
  • generateNumberFromSalt (5-16)
src/lib/url.ts (1)
  • sanitizeUrl (64-66)
src/app/stacks/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/runs/[id]/_Tabs/Overview/Details.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/app/runs/columns.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
src/components/avatars/user-or-service-account.tsx (2)
src/components/avatars/service-account-avatar.tsx (1)
  • ServiceAccountAvatar (26-48)
src/lib/url.ts (1)
  • sanitizeUrl (64-66)
src/layouts/settings/settings-layout/layout.tsx (1)
src/components/InlineAvatar.tsx (1)
  • InlineAvatar (14-27)
🔇 Additional comments (98)
src/components/logs/enhanced-log-viewer.tsx (6)

58-60: LGTM! Clean implementation.

The handleFirstPage function correctly sets the current page to 1 and follows the same pattern as other pagination handlers in the component.


62-64: LGTM! Consistent with other handlers.

The handleLastPage function correctly sets the current page to totalPages and maintains consistency with the existing pagination handler pattern.


199-208: Well-implemented First page button.

The button correctly uses the component library's Button component with appropriate styling and disabled state. The disabled logic (currentPage === 1) properly prevents navigation when already on the first page.


209-218: Good refactor for UI consistency.

The Previous button has been successfully updated to use the component library's Button component while preserving all existing functionality. The styling now matches the other pagination buttons.


222-231: Consistent refactor maintaining functionality.

The Next button has been properly updated to use the component library's Button component. The disabled state logic (currentPage === totalPages) remains correct, and styling is now consistent with other pagination buttons.


232-241: Well-implemented Last page button.

The Last button correctly uses the component library's Button component with appropriate styling and disabled state. The disabled logic (currentPage === totalPages) properly prevents navigation when already on the last page, complementing the First button functionality.

src/components/runs/stop-group/use-stop-run.tsx (2)

5-5: LGTM: Function signature properly updated for alert management.

The addition of the closeAlert parameter enables proper dialog state management in the consuming components.


12-12: LGTM: Consistent alert closure handling.

The closeAlert() callback is correctly invoked in both success and error scenarios, ensuring the dialog closes regardless of the mutation outcome. This prevents the dialog from remaining open in error states.

Also applies to: 21-21

src/components/runs/stop-group/stop-button.tsx (3)

3-4: LGTM: Proper imports for new functionality.

The addition of useState and StopGracefullyAlert imports aligns with the refactored component architecture.


12-12: LGTM: Clean state management for dialog visibility.

The local state management for the alert dialog follows React best practices.


15-28: LGTM: Well-structured button and dialog integration.

The refactor properly separates concerns:

  • Button handles UI interaction and triggers dialog
  • Dialog manages the actual stop mutation
  • Fragment wrapper cleanly contains both elements

The button's disabled state correctly depends only on isActive, as the dialog now handles the pending state internally.

src/components/runs/stop-group/stop-dropdown.tsx (3)

13-13: LGTM: Appropriate import for immediate stop functionality.

The import of StopImmediatelyAlert aligns with the dropdown's purpose of providing the immediate stop option.


21-21: LGTM: Consistent state management pattern.

The alert dialog state management follows the same pattern as the button component, maintaining consistency across the codebase.


24-60: LGTM: Well-structured dropdown with proper alert integration.

The refactored component properly:

  • Manages two separate dialog states (dropdown and stop alert)
  • Simplifies button disabled logic to only consider isActive
  • Uses appropriate "Stop immediately" labeling with clear description
  • Integrates the alert dialog cleanly with the dropdown menu

The separation of concerns is well-maintained between UI interaction and mutation logic.

src/components/runs/stop-group/stop-alert.tsx (4)

1-12: LGTM: Comprehensive imports and proper separation.

The imports properly separate client-side (AlertDialog components) and server-side (Button) components, following the library's architecture. The inclusion of React types and the custom hook is appropriate.


21-61: LGTM: Well-designed base alert component.

The StopBaseAlert component demonstrates good design principles:

  • Reusable base component reduces code duplication
  • Props interface clearly defines required functionality
  • Proper accessibility attributes (role="alert", aria-busy)
  • Loading spinner with semantic markup
  • Clean separation between content and actions

The button disabled state correctly prevents double-submissions during pending operations.


68-88: LGTM: Clear graceful stop implementation.

The StopGracefullyAlert component properly:

  • Uses the updated useStopRun hook with close callback
  • Sets graceful: true parameter appropriately
  • Provides clear user messaging about allowing current step to finish
  • Follows consistent pattern with the base alert

90-111: LGTM: Clear immediate stop implementation.

The StopImmediatelyAlert component properly:

  • Uses the updated useStopRun hook with close callback
  • Sets graceful: false parameter appropriately
  • Provides clear warning messaging about immediate termination
  • Maintains consistency with the graceful variant

The messaging clearly communicates the more aggressive nature of immediate stopping.

src/components/form/FieldHint.tsx (1)

23-23: Excellent accessibility improvement!

Adding type="button" prevents unintended form submissions when users click the info icon, which is crucial for form field hints.

package.json (1)

91-92: Confirmed latest patch releases for brace-expansion overrides

  • Verified that brace-expansion@1 is pinned to 1.1.12 and brace-expansion@2 to 2.0.2, both published on 2025-06-11 and representing the latest patch versions in their respective major lines.
  • A quick npm audit (without a lockfile) didn’t flag any existing vulnerabilities for these versions.

Please ensure and document the specific security or compatibility fixes these overrides address (e.g., link to the CVE or issue tracking the underlying bug).

src/components/bot-badge.tsx (1)

1-9: Well-implemented badge component!

The BotBadge component follows React best practices with single responsibility, consistent styling, and proper use of the UI library. The static implementation ensures visual consistency across the application.

src/components/avatars/service-account-avatar.tsx (1)

26-48: Excellent implementation with strong security practices!

The component demonstrates several best practices:

  • Proper use of forwardRef for ref forwarding
  • URL sanitization for security (sanitizeUrl)
  • Deterministic color selection using salt-based hashing
  • Graceful fallback handling
  • Type-safe implementation

The salt calculation (generateNumberFromSalt(serviceAccountName ?? "") % 4) + 1 correctly produces values 1-4 that match the getClassVariant switch cases.

src/components/admin-badge.tsx (1)

1-9: Consistent and well-implemented badge component!

The AdminBadge follows the same excellent pattern as BotBadge, with appropriate color differentiation (blue for admin vs light-purple for bot) while maintaining visual consistency.

src/app/runs/[id]/Dag.tsx (2)

5-8: LGTM: Clean architectural refactoring to centralized sheet management.

The addition of GlobalSheets and SheetProvider imports aligns with the architectural shift from local sheet management in individual DAG nodes to a centralized provider pattern. This should improve maintainability and consistency across the DAG visualization.


63-94: LGTM: Provider pattern implementation looks solid.

The wrapping of ReactFlow with SheetProvider and the addition of GlobalSheets as a sibling component follows good React patterns. The ReactFlow props remain unchanged, which maintains existing functionality while enabling the new centralized sheet management system.

src/layouts/settings/settings-layout/layout.tsx (1)

22-26: LGTM: Enhanced avatar rendering with proper null safety.

The addition of avatarUrl and isServiceAccount props to InlineAvatar aligns with the application-wide avatar enhancement. The implementation properly handles undefined values using nullish coalescing and double negation for boolean conversion.

src/app/settings/connectors/[id]/configuration/params.tsx (1)

132-144: LGTM: Consistent avatar enhancement implementation.

The update to pass avatarUrl and isServiceAccount props to InlineAvatar is consistent with the application-wide avatar enhancement pattern. Using user.name directly instead of getUsername is appropriate since the InlineAvatar component now handles user display logic internally.

src/app/overview/welcome.tsx (3)

2-2: LGTM: Security enhancement with URL sanitization.

Adding the sanitizeUrl import is a good security practice for handling user-provided avatar URLs safely.


4-9: LGTM: Enhanced avatar component imports.

The addition of AvatarImage to the imports enables explicit avatar image rendering with proper fallback handling.


32-32: LGTM: Secure avatar image rendering.

Using sanitizeUrl to clean the avatar URL before passing it to AvatarImage is an excellent security practice that prevents potential XSS attacks through malicious URLs. The nullish coalescing properly handles undefined avatar URLs.

src/app/pipelines/[namespace]/columns.tsx (1)

158-165: LGTM: Consistent avatar enhancement in pipeline columns.

The enhancement of InlineAvatar with avatarUrl and isServiceAccount props follows the established pattern across the application. The implementation properly handles undefined values and maintains consistency with other similar updates.

src/components/steps/step-sheet/DetailsTab.tsx (1)

163-178: Enhanced avatar rendering with proper null handling.

The conditional rendering for the Author field is well-implemented. The changes improve the user experience by:

  1. Null safety: Properly checks for data.resources?.user existence before rendering
  2. Enriched avatar data: Passes avatarUrl, username, and isServiceAccount props to InlineAvatar
  3. Graceful fallback: Shows "Not available" when user data is absent
  4. Type safety: Uses optional chaining and nullish coalescing for avatar_url

The boolean conversion for isServiceAccount using !! is correct and ensures a proper boolean value.

src/components/stack-components/component-detail/ConfigTab.tsx (1)

92-102: Consistent avatar enhancement implementation.

The Author field implementation follows the same well-structured pattern as other components in this PR:

  • Conditional rendering: Properly checks for user existence
  • Enhanced props: Passes complete avatar metadata to InlineAvatar
  • Safe access: Uses optional chaining for user.body?.avatar_url
  • Proper fallback: Returns "Not available" when user data is missing

This maintains consistency with the broader avatar rendering improvements across the application.

src/layouts/settings/project-settings/layout.tsx (1)

23-27: Consistent avatar enhancement in layout component.

The InlineAvatar usage follows the established pattern with proper enhancement:

  • Complete avatar data: Passes avatarUrl, username, and isServiceAccount
  • Safe property access: Uses optional chaining for data.body?.avatar_url
  • Type conversion: Properly converts is_service_account to boolean

This maintains UI consistency across different parts of the application.

src/components/avatar-stack.tsx (3)

1-1: Good addition of URL sanitization utility.

The sanitizeUrl import is essential for securely handling user-provided avatar URLs.


3-7: Proper component library imports for avatar rendering.

The addition of AvatarImage to the imports enables proper image rendering within the avatar component.


32-32: Secure avatar image rendering with URL sanitization.

The implementation properly:

  • Sanitizes URLs: Uses sanitizeUrl() to prevent potential security issues from user-provided URLs
  • Handles missing data: Uses optional chaining and nullish coalescing for user.body?.avatar_url
  • Maintains fallback: Keeps the existing AvatarFallback for when images fail to load

This is a security-conscious enhancement that improves the visual experience while maintaining safety.

src/app/runs/columns.tsx (1)

156-167: Improved column rendering with enhanced avatar data.

The author column implementation shows good improvements:

  • Direct data access: Uses row.original.resources?.user for more direct access to user data
  • Null safety: Proper null check with early return prevents rendering errors
  • Enhanced avatar: Passes complete metadata to InlineAvatar including avatarUrl and isServiceAccount
  • Type safety: Uses optional chaining and proper boolean conversion

This aligns well with the broader avatar enhancement pattern across the application.

src/app/settings/profile/page.tsx (4)

2-10: LGTM - Well-organized imports for enhanced avatar functionality.

The imports are properly structured and necessary for the avatar enhancements:

  • sanitizeUrl for URL security
  • Avatar components for enhanced display
  • EditAvatarDialog for user editing capability

23-23: Consistent avatar design update.

The change from "rounded" to "square" avatar type aligns with the design system updates across the application.


24-24: Secure avatar image implementation.

Good use of sanitizeUrl for security and proper handling of optional avatar URL. The implementation prevents potential XSS vulnerabilities while gracefully handling missing avatar URLs.


28-28: Enhanced user experience with inline avatar editing.

The placement of EditAvatarDialog within the Avatar component provides intuitive editing functionality. Based on the component implementation, it includes proper form validation, error handling, and cache management.

src/app/stacks/create/manual/ComponentSelection.tsx (2)

105-105: More robust user existence check.

The condition change from checking comp.resources?.user?.name to comp.resources?.user is more robust and follows defensive programming practices, ensuring avatar renders when user data exists regardless of name field status.


106-110: Enhanced avatar display with rich user metadata.

Excellent enhancement of InlineAvatar props:

  • Proper optional chaining for avatarUrl
  • Service account detection with boolean conversion
  • Maintains existing username functionality

This aligns with the InlineAvatar component's enhanced interface and provides users with richer visual information including service account badges.

src/app/stacks/columns.tsx (2)

53-53: Simplified accessor function for better table operations.

The change to return just the user name string is appropriate for sorting and filtering operations, while the cell renderer independently accesses the full user object.


54-64: Well-implemented enhanced avatar rendering.

Excellent implementation with:

  • Proper access to full user object from original row data
  • Defensive null checking
  • Rich avatar metadata including avatar URL and service account status
  • Consistent with the enhanced InlineAvatar interface
src/components/artifacts/artifact-node-sheet/DetailCards.tsx (1)

65-78: Comprehensive author field enhancement with conditional rendering.

Excellent implementation featuring:

  • Proper conditional rendering based on user existence
  • Enhanced InlineAvatar with full metadata (avatar URL, username, service account status)
  • Clean integration within the existing KeyValue component structure
  • Consistent optional chaining and data handling
src/app/settings/service-accounts/columns.tsx (2)

1-1: Clean import organization for enhanced service account avatars.

The import changes properly support the transition from static icons to dynamic ServiceAccountAvatar components, with good organization and structure.

Also applies to: 5-5, 8-8


45-50: Significant upgrade from static icon to dynamic service account avatar.

Excellent replacement of the static icon with ServiceAccountAvatar:

  • Proper component sizing and styling
  • Rich metadata including service account name and avatar URL
  • Based on the component implementation, provides consistent visual variants, image display capabilities, and secure URL handling
  • Greatly enhances user experience with personalized service account representation
src/app/runs/[id]/_Tabs/Overview/Details.tsx (1)

159-163: LGTM! Well-implemented avatar enhancement.

The implementation correctly handles edge cases with proper null safety using optional chaining and provides appropriate fallbacks. The username fallback to "Unknown" and boolean conversion for isServiceAccount are well done.

src/app/settings/connectors/columns.tsx (1)

116-123: LGTM! Consistent avatar enhancement pattern.

The implementation follows the same solid patterns as other files in this PR - proper null safety, appropriate prop mapping, and good defensive programming with the null check for the user object.

src/layouts/AuthenticatedLayout/UserDropdown.tsx (1)

48-48: LGTM! Good security practice with URL sanitization.

The implementation properly sanitizes the avatar URL using sanitizeUrl before passing it to AvatarImage, which is important for security. The fallback chain to AvatarFallback ensures graceful degradation when no avatar is available.

src/app/settings/secrets/columns.tsx (1)

56-66: LGTM! Consistent implementation pattern.

The implementation follows the established pattern from other files in this PR with proper null safety, appropriate prop mapping, and good defensive programming practices. The user existence check prevents rendering issues.

src/app/settings/connectors/create/success/columns.tsx (1)

81-88: LGTM! Maintains consistency across the codebase.

This implementation follows the same solid pattern established in the other files in this PR, demonstrating good consistency in the codebase refactor. The null safety, prop mapping, and styling are all handled appropriately.

src/app/overview/pipelines-grid/pipeline-sheet.tsx (1)

29-29: LGTM! Clean implementation of dynamic status prop.

The isDone prop is properly integrated throughout the component hierarchy, enabling dynamic status display instead of hardcoded values. The prop flows correctly from the component interface to the SecondaryHeader component where it controls the status icon rendering.

Also applies to: 40-42, 51-51

src/components/stack-components/component-sheet/stacks-tab/columns.tsx (1)

42-48: LGTM! Proper enhancement of avatar display.

The implementation correctly extracts and passes the enhanced avatar props (avatarUrl, username, isServiceAccount) to the InlineAvatar component. The null check and prop extraction are handled appropriately, aligning with the component's updated interface.

src/components/dag-visualizer/sheet-context.tsx (1)

1-74: LGTM! Well-implemented React context pattern.

This context implementation follows React best practices:

  • Clean TypeScript interfaces with proper typing
  • Appropriate use of useState for state management
  • Proper memoization with useCallback and useMemo
  • Good error handling in the custom hook
  • Helpful comment explaining why lastContent persists during closing animation

The pattern centralizes sheet state management effectively and provides a clean API for opening different sheet types.

src/app/settings/service-accounts/[service-account-id]/header.tsx (1)

22-46: LGTM! Clean and accessible component structure.

The component properly uses the ServiceAccountAvatar with URL sanitization, includes proper status indication with semantic colors, and displays all relevant service account information clearly.

src/app/settings/members/columns.tsx (2)

17-17: LGTM! Simplified accessor function.

Returning just the name string is cleaner and more appropriate for sorting functionality.


18-29: Excellent enhancement of avatar rendering with richer metadata.

The updated cell rendering now provides:

  • Avatar URL for displaying actual user images
  • Service account detection for proper avatar styling
  • Standardized AdminBadge component for consistent UI

This aligns well with the application-wide avatar enhancement pattern.

src/app/settings/profile/edit-avatar-dialog.tsx (3)

22-24: Good URL sanitization in schema.

The string transformation that trims input is appropriate for URL handling, preventing whitespace-only entries.


33-50: Excellent error handling and cache management.

The mutation properly:

  • Invalidates relevant query caches on success
  • Provides user-friendly error feedback with toast notifications
  • Includes proper error type checking
  • Uses semantic UI elements (error icon, styling)

110-110: Proper form validation and loading state handling.

The submit button correctly disables during mutation pending state and when form is invalid, providing good UX feedback.

src/components/avatars/user-or-service-account.tsx (2)

16-25: LGTM! Clean conditional rendering for service accounts.

The component properly delegates to ServiceAccountAvatar when isServiceAccount is true, maintaining consistency with the specialized service account avatar handling.


27-32: Good security practice with URL sanitization.

The avatar URL is properly sanitized before use, and the fallback to the first character of the name provides a consistent user experience when no avatar is available.

src/components/dag-visualizer/ArtifactNode.tsx (3)

4-4: Good refactoring to centralized sheet management.

The addition of memo import and useSheetContext hook aligns with the new global sheet management approach, removing component-level state complexity.

Also applies to: 9-9


11-12: Clean integration with sheet context.

The component now properly delegates sheet opening to the centralized context, simplifying the component logic while maintaining the same user interaction.

Also applies to: 19-21


59-59: Good performance optimization with memoization.

Memoizing the component will prevent unnecessary re-renders, which is beneficial for DAG visualizer performance with potentially many nodes.

src/app/settings/service-accounts/[service-account-id]/page.tsx (1)

1-18: LGTM! Clean separation of concerns.

The refactoring successfully separates the page layout logic from the data fetching and rendering concerns by extracting the APIKeyHeader component. This makes the ServiceAccountDetail component focused solely on composition and layout, which is appropriate for a page component.

The simplified structure improves maintainability and follows React best practices for component organization.

src/components/InlineAvatar.tsx (1)

6-27: Excellent avatar system enhancement!

The refactoring successfully modernizes the InlineAvatar component with several key improvements:

  1. Enhanced type safety: Extending HTMLAttributes<HTMLDivElement> provides better prop forwarding and flexibility
  2. Rich avatar rendering: The new avatarUrl and isServiceAccount props enable more sophisticated avatar displays
  3. Clear service account indication: The conditional BotBadge provides immediate visual distinction for service accounts
  4. Consistent architecture: Using UserOrServiceAccountAvatar aligns with the broader avatar component system

The implementation properly handles prop spreading and maintains clean separation between user and service account rendering logic.

src/components/dag-visualizer/StepNode.tsx (3)

6-7: Great architectural improvement with context-based sheet management.

The refactoring successfully modernizes the component architecture:

  1. Performance optimization: Wrapping with memo prevents unnecessary re-renders in the DAG visualization
  2. Cleaner state management: Using useSheetContext centralizes sheet opening logic and eliminates the need for direct store manipulation
  3. Simplified click handling: The direct openStepSheet call is more intuitive than the previous approach

This aligns well with the broader DAG visualizer improvements and should provide better maintainability.

Also applies to: 12-12, 14-20


26-78: LGTM! Clean JSX reorganization with preserved functionality.

The JSX restructuring maintains all existing functionality while improving the layout:

  • Execution status icon, step name, and copy button are now properly grouped in the same flex container
  • Duration/failure information is cleanly separated in its own section
  • All styling and conditional logic for failed states is preserved
  • The button structure properly handles click events and accessibility

The visual hierarchy is clearer and the code is more maintainable.


80-80: Perfect memoization pattern.

Exporting the memoized version as StepNode follows React best practices and will help performance in DAG visualizations where many nodes might be rendered simultaneously.

src/types/core.ts (25)

1746-1749: LGTM! Clear error documentation added.

The addition of the IllegalOperationError documentation with specific conditions improves API clarity for developers integrating with service account operations.


1758-1761: LGTM! Consistent error documentation.

The error documentation follows the same pattern as the update operation, maintaining consistency across related service account operations.


1794-1797: LGTM! Consistent error handling for API key operations.

Extending the IllegalOperationError documentation to API key creation is logical since API keys are tied to service accounts.


1829-1832: LGTM! Maintains documentation consistency.

The error documentation pattern is consistently applied across all API key management operations.


1859-1862: LGTM! Completes the consistent error documentation pattern.

The API key rotation operation now has the same error documentation as other API key and service account operations, completing the consistent pattern.


4744-4753: LGTM! Well-designed exception schema.

The new ExceptionInfo schema appropriately captures exception details with required traceback information and optional line number context, which will be valuable for debugging step run failures.


4969-4973: LGTM! Improved API flexibility.

Making the source field optional in LogsRequest improves API usability by allowing clients to omit this field when a default value is appropriate.


7488-7489: LGTM! Valuable schedule functionality addition.

Adding the optional cron_expression field to ScheduleUpdate enhances scheduling capabilities while maintaining backward compatibility.


7820-7832: LGTM! Enhanced service account metadata support.

The schema improvements include clearer field descriptions, display name support, and avatar URL functionality that align well with the UI enhancements described in the PR summary.


7873-7884: LGTM! Response schema consistency maintained.

The ServiceAccountResponse schema updates maintain consistency with the corresponding request schema changes, ensuring proper bidirectional data flow.


7896-7897: LGTM! External authentication integration support.

Adding the external_user_id field to metadata enhances support for external authentication systems integration.


7913-7920: LGTM! Complete schema consistency across operations.

The ServiceAccountUpdate schema appropriately includes the new fields with optional semantics suitable for update operations, maintaining consistency across all service account schemas.


8996-8997: LGTM! Proper integration of exception handling.

The addition of the optional exception_info field appropriately integrates the new ExceptionInfo schema into step run requests for enhanced error tracking.


9082-9083: LGTM! Consistent exception info in response metadata.

The exception information is consistently added to response metadata, completing the integration pattern for step run exception handling.


9149-9150: LGTM! Exception info pattern completion.

Adding exception information to StepRunUpdate completes the consistent pattern across all step run related schemas for comprehensive exception tracking.


9619-9627: LGTM! User schema enhancements match service account pattern.

The avatar URL addition and improved full_name documentation maintain consistency with the service account schema enhancements, providing unified user experience capabilities.


9687-9690: LGTM! Consistent documentation improvement.

The full_name field documentation is consistently updated across user schemas to clarify its purpose as a display name.


9702-9703: LGTM! User response schema consistency.

The avatar URL field addition to UserResponse maintains consistency with the request schema and follows the established pattern from service account schemas.


9754-9759: LGTM! User update schema completion.

The user update schema appropriately includes the new avatar and display name fields with optional semantics suitable for update operations, completing the consistent pattern across all user schemas.


16336-16336: LGTM! External user ID parameter support.

Adding the optional external_user_id parameter supports external authentication integration functionality consistently with the schema changes.


16467-16470: LGTM! Operation-level documentation consistency.

The operation definition includes the same error documentation as the path-level documentation, maintaining consistency across different documentation contexts.


16516-16519: LGTM! Consistent delete operation documentation.

The delete operation documentation maintains the same error handling pattern as other service account operations, ensuring comprehensive API documentation.


16630-16633: LGTM! API key operation documentation consistency.

The create API key operation documentation extends the consistent error handling pattern to API key operations, maintaining comprehensive documentation coverage.


16736-16739: LGTM! API key update operation documentation.

The update API key operation documentation maintains consistency with other API key and service account operations, ensuring complete error handling documentation.


16835-16838: LGTM! Complete API documentation coverage.

The rotate API key operation documentation completes the comprehensive and consistent error handling documentation pattern across all service account and API key operations.

src/app/components/columns.tsx Show resolved Hide resolved
@Cahllagerfeld Cahllagerfeld merged commit 6236216 into main Jul 29, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Morty Proxy This is a proxified and sanitized view of the page, visit original site.