-
Notifications
You must be signed in to change notification settings - Fork 18
Release #786
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Release #786
Conversation
""" WalkthroughThis 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
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
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
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
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this 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 withsaltValue > 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 beundefined
during the pending state. Ensure theuseServiceAccountDetailBreadcrumbs
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
⛔ 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 tototalPages
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
andStopGracefullyAlert
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 forbrace-expansion
overrides
- Verified that
brace-expansion@1
is pinned to 1.1.12 andbrace-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 thegetClassVariant
switch cases.src/components/admin-badge.tsx (1)
1-9
: Consistent and well-implemented badge component!The
AdminBadge
follows the same excellent pattern asBotBadge
, 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
andSheetProvider
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 ofGlobalSheets
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
andisServiceAccount
props toInlineAvatar
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
andisServiceAccount
props toInlineAvatar
is consistent with the application-wide avatar enhancement pattern. Usinguser.name
directly instead ofgetUsername
is appropriate since theInlineAvatar
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 toAvatarImage
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
withavatarUrl
andisServiceAccount
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:
- Null safety: Properly checks for
data.resources?.user
existence before rendering- Enriched avatar data: Passes
avatarUrl
,username
, andisServiceAccount
props toInlineAvatar
- Graceful fallback: Shows "Not available" when user data is absent
- 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
, andisServiceAccount
- Safe property access: Uses optional chaining for
data.body?.avatar_url
- Type conversion: Properly converts
is_service_account
to booleanThis 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 loadThis 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
includingavatarUrl
andisServiceAccount
- 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
tocomp.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
interfacesrc/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 toAvatarImage
, which is important for security. The fallback chain toAvatarFallback
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 theInlineAvatar
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
anduseMemo
- Good error handling in the custom hook
- Helpful comment explaining why
lastContent
persists during closing animationThe 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
whenisServiceAccount
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 anduseSheetContext
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 theServiceAccountDetail
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:
- Enhanced type safety: Extending
HTMLAttributes<HTMLDivElement>
provides better prop forwarding and flexibility- Rich avatar rendering: The new
avatarUrl
andisServiceAccount
props enable more sophisticated avatar displays- Clear service account indication: The conditional
BotBadge
provides immediate visual distinction for service accounts- Consistent architecture: Using
UserOrServiceAccountAvatar
aligns with the broader avatar component systemThe 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:
- Performance optimization: Wrapping with
memo
prevents unnecessary re-renders in the DAG visualization- Cleaner state management: Using
useSheetContext
centralizes sheet opening logic and eliminates the need for direct store manipulation- Simplified click handling: The direct
openStepSheet
call is more intuitive than the previous approachThis 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 inLogsRequest
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 toScheduleUpdate
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 newExceptionInfo
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.
Summary by CodeRabbit
New Features
Improvements
Bug Fixes
Documentation
Refactor
Chores