Skip to content

Conversation

Raubzeug
Copy link
Contributor

@Raubzeug Raubzeug commented Sep 9, 2025

Stand with error

Stand

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total Passed Failed Flaky Skipped
378 373 0 3 2
Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

  1. Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
  2. Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: 🔺

Current: 85.41 MB | Main: 85.41 MB
Diff: +4.55 KB (0.01%)

⚠️ Bundle size increased. Please review.

ℹ️ CI Information
  • Test recordings for failed tests are available in the full report.
  • Bundle size is measured for the entire 'dist' directory.
  • 📊 indicates links to detailed reports.
  • 🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

Greptile Summary

Updated On: 2025-09-09 14:45:15 UTC

This PR introduces a comprehensive access error configuration system across the YDB Embedded UI application. The main change adds a new optional clusterOrDatabaseAccessError property to the UIFactory interface, allowing different deployments to customize how access denied (401/403) errors are displayed to users.

The implementation follows a consistent pattern throughout the codebase: when access errors are detected using the isAccessError utility, components now wrap their content in a PageError component that displays an AccessDenied state instead of the normal page content. This provides a much better user experience for authentication and authorization failures.

Key architectural changes include:

  • UIFactory Enhancement: The core UIFactory interface now supports clusterOrDatabaseAccessError configuration of type Partial<EmptyStateProps>, enabling customization of error titles, descriptions, images, and actions
  • Component Flexibility: Both EmptyState and AccessDenied components have been made more configurable, supporting custom titles (now React.ReactNode), page titles, sizing, and styling
  • Layout Improvements: The PageError component received new CSS grid styling for better vertical centering and layout control
  • Consistent Error Handling: Multiple container components (Clusters, Tenant, App/Content, Header) now properly handle access errors using the same pattern

The changes maintain backward compatibility while providing a foundation for customizable error experiences across different deployment environments. The UI factory pattern allows external consumers to override default error messaging and styling without modifying core component code.

Important Files Changed

Changed Files
Filename Score Overview
src/uiFactory/types.ts 5/5 Adds optional clusterOrDatabaseAccessError configuration to UIFactory interface for customizable access error handling
src/containers/Clusters/Clusters.tsx 4/5 Implements access error detection and wraps page in PageError component with configurable error display
src/components/Errors/PageError/PageError.tsx 4/5 Enhances component with better styling, sizing control, and page title support for error pages
src/components/Errors/403/AccessDenied.tsx 4/5 Refactors to be more flexible and configurable, allowing custom images, descriptions, and sizing
src/components/Errors/PageError/PageError.scss 5/5 Adds CSS grid layout for proper vertical centering and full-height error page display
src/containers/Tenant/Tenant.tsx 4/5 Integrates configurable access error display through uiFactory pattern
src/containers/App/Content.tsx 4/5 Adds configurable error handling for user authentication with app title support
src/components/EmptyState/EmptyState.tsx 4/5 Enhances component with page title support, exports sizing constants, and improves layout flexibility
src/containers/Header/Header.tsx 4/5 Prevents Add Cluster button display when access errors occur, improving UX for unauthorized users
src/components/EmptyState/EmptyState.scss 4/5 Refactors CSS layout from complex 3-area grid to simpler 2-area layout with improved spacing

Confidence score: 3/5

  • This PR requires careful review due to potential error display conflicts and complex component interactions
  • Score reflects the architectural improvements but is lowered due to a specific issue with double error display in the Clusters component that needs resolution
  • Pay close attention to src/containers/Clusters/Clusters.tsx where ResponseError may still display alongside PageError for access errors

Sequence Diagram

sequenceDiagram
    participant User
    participant Container as "Container (Clusters/Tenant/etc)"
    participant UIFactory
    participant PageError as "PageError Component"
    participant AccessDenied as "AccessDenied Component"
    participant EmptyState as "EmptyState Component"

    User->>Container: "Navigate to page"
    Container->>Container: "Load data (useQuery)"
    Container->>Container: "Check isAccessError(error)"
    alt Access Error Detected
        Container->>UIFactory: "Get clusterOrDatabaseAccessError config"
        UIFactory-->>Container: "Return Partial<EmptyStateProps> config"
        Container->>PageError: "Render with error and config props"
        PageError->>PageError: "Check isAccessError(error)"
        PageError->>AccessDenied: "Render with title, description from config"
        AccessDenied->>EmptyState: "Render with custom or default props"
        EmptyState-->>User: "Display configured access denied state"
    else No Access Error
        Container->>Container: "Render normal page content"
        Container-->>User: "Display page content"
    end
Loading

@Raubzeug
Copy link
Contributor Author

Raubzeug commented Sep 9, 2025

Updated EmptyState view:
Screenshot 2025-09-09 at 17 13 34

@astandrik astandrik requested a review from Copilot September 9, 2025 14:15
Copilot

This comment was marked as outdated.

@astandrik
Copy link
Collaborator

bugbot run
/claude_review

cursor[bot]

This comment was marked as outdated.

@ydb-platform ydb-platform deleted a comment from claude bot Sep 9, 2025
@astandrik
Copy link
Collaborator

@greptile

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

10 files reviewed, no comments

Edit Code Review Bot Settings | Greptile

{i18n('clusters-count', {count: filteredClusters?.length})}
</Text>
) : null}
{query.isError ? <ResponseError error={query.error} /> : null}
Copy link
Contributor

Choose a reason for hiding this comment

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

logic: Potential double error display: ResponseError is still shown even when PageError handles access errors. Consider adding conditional logic to prevent showing both.

Suggested change
{query.isError ? <ResponseError error={query.error} /> : null}
{query.isError && !showBlockingError ? <ResponseError error={query.error} /> : null}

Copy link
Collaborator

Choose a reason for hiding this comment

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

@greptile there is no error doubling - check again

Copy link
Contributor

Choose a reason for hiding this comment

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

You're absolutely right! Looking at the code more carefully, there's no double error display issue here.

The logic is already properly structured:

  • Line 141: const showBlockingError = isAccessError(query.error);
  • Line 144-147: PageError only shows when showBlockingError is true (access errors)
  • Line 219: ResponseError only shows when query.isError is true but there's no access error condition

When showBlockingError is true, the PageError component wraps the entire content and would handle the error display. When it's false, the ResponseError on line 219 can still show for other types of errors.

These are handling different scenarios:

  1. Access errors (401/403): Handled by PageError wrapper
  2. Other API errors: Handled by ResponseError

There's no overlap or double display. My original suggestion was incorrect - the current implementation is working as intended.

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

10 files reviewed, no comments

Edit Code Review Bot Settings | Greptile

@Raubzeug Raubzeug added this pull request to the merge queue Sep 9, 2025
Merged via the queue into main with commit 2e6adf9 Sep 9, 2025
13 checks passed
@Raubzeug Raubzeug deleted the tune-errors branch September 9, 2025 14:55
@Raubzeug Raubzeug linked an issue Sep 10, 2025 that may be closed by this pull request
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.

Welcome Screen: Global Error State for Invalid URLs/Navigation

2 participants