Next Gen UI: November Updates #2042
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds instruction to always use the chrome mcp to verify visual and functional correctness. This ensures consistent testing and validation, particularly with the new site /next path.
Adds a separator line above the project data table for better visual separation of the header and content. This improves the overall layout and readability of the projects page.
Enhances authentication logic by directly checking the access token to avoid reactivity issues with PersistedState. Also, resets the access token to an empty string instead of null when a 401 error is encountered.
Adds a component to display the log level associated with a stack. This enhances the stack card by providing users with quick insights into the severity of events within a stack.
Enhances the stack filter tooltip to provide a better user experience by improving the visual appearance and interaction. The tooltip trigger now indicates it is clickable. It also now includes accessibility attributes.
Adds a skeleton loading indicator to the stack card while event counts are loading. This improves the user experience by providing visual feedback that data is being fetched.
Creates Storybook stories for Boolean, Date, Level, Number, Project, Reference, Session, Status, String, Tag, Type, and Version filter triggers. These stories provide visual examples of the filter trigger components, showcasing both "With Text" and "Icon Only" variations, facilitating easier development and testing. Also, refactors faceted filter trigger components to omit ButtonProps 'value' and sets the button class to 'cursor-pointer'. Removes the title const and adds a title property to the Button component.
Optimizes faceted filter queries by enabling them only when the dropdown is open, reducing unnecessary API calls and improving performance. Adds an `enabled` option to count queries to prevent fetching data until the filter dropdown is opened. This enhancement reduces initial load times and optimizes resource usage, specifically for the project and tag faceted filters.
Implements a WebSocket client with automatic reconnection capabilities. This change introduces a robust WebSocket client, managing connection state, and handling reconnections with exponential backoff. It addresses potential connection drops and ensures a stable communication channel. The client now handles authentication failures gracefully, preventing unnecessary reconnection attempts. It includes comprehensive tests to ensure reliability and proper behavior in various scenarios.
Improves the error handling in the layout to prevent infinite loops and unexpected behavior by more accurately determining which errors should be retried. This change also streamlines the authentication logic by clearing the access token only if it exists, preventing potential issues.
Increases the WebSocket connection timeout to provide a more reliable connection. Adds try/catch to WebSocket creation to handle errors. Adds enhanced logging for debugging purposes, providing more context on connection issues and authentication failures. Prevents reconnection attempts after authentication failures.
Introduces CachedPersistedState to improve token caching and prevent excessive reactive signal triggers. This reduces unnecessary reads from localStorage and optimizes the authentication flow. Adds vitest setup to mock local storage in client tests to avoid errors and warnings. Fixes a logout issue where the access token was not being cleared properly. svecosystem/runed#382
Specifies when to use context7 for documentation purposes, focusing on code generation, setup, configuration steps, and library/API details.
Extends the organization view model to include the last updated date. This allows clients to accurately reflect the most recent state of the organization.
Expands organization search to include organization ID, allowing users to find organizations by either name or ID.
Extends the notification component to support additional variants, including impersonation and information. These new variants allow for more versatile and informative notifications within the application. The component now accepts action and icon slots to further customize the notification's appearance and behavior, providing more context and interaction options.
Creates a notification component to inform users when they are impersonating another user. This component includes a button to stop impersonating and redirect the user to their default organization settings.
Ensures the organization list is not displayed when a user is impersonating another user. This prevents unintended actions or confusion when operating under a different user's context.
Introduces a new query for searching organizations in the admin section. This enables administrators to efficiently find organizations based on various criteria, improving overall management capabilities. Includes necessary interface definitions for request parameters and supports filtering by criteria, limit, mode, page, paid, and suspended status.
Adds a notification to inform users when they are impersonating an organization. This helps to improve transparency and awareness for global administrators. The notification is displayed only when a global admin is viewing an organization they do not belong to.
Adds red, amber, and orange color variants to the badge component. This allows for more diverse visual cues and improved user interface expressiveness.
Updates organization notification links to use the new app router. Adds organization over limit and suspension indicators to the organization table.
Updates svelte and lucide dependencies to their latest versions. These updates likely include bug fixes, performance improvements, and new features.
Moves the `GetAdminSearchOrganizationsParams` and `GetAdminSearchOrganizationsRequest` interfaces to the bottom of the file for better organization and readability.
Implements the ability for admin users to impersonate organizations. This includes a new dialog for selecting an organization to impersonate, the ability to stop impersonating, and updates to the sidebar to reflect the impersonation status. It introduces pagination for the organization selection list and provides filtering options based on plan type and suspension status. Also, the pagination component was refactored to use Radix UI primitives for improved accessibility and consistency.
Refactors the organization selection and display logic in the application layout. - Introduces a new `PageNumber` component for consistent pagination display. - Updates the organization switcher to handle impersonated organizations. - Redirects non-admin users to the add organization page if no organizations exist. - Ensures the first organization is selected if none is currently selected.
Improves the organization selection dialog by adding total count display and adjusting pagination layout for better responsiveness on smaller screens.
Simplifies organization notifications by using the current organization ID directly. This avoids storing the organization ID separately, streamlining the component's logic and ensuring it always reflects the currently selected organization.
Improves the organization impersonation feature by streamlining navigation and updating the organization context directly. This change simplifies the process of switching between organizations when impersonating, ensuring a smoother user experience. It also fixes an issue where query string parameters might be applied during redirection.
Updates all internal links to use the resolve function for improved route handling and consistency. This change ensures that all routes are correctly resolved, regardless of the base URL or environment configuration. It replaces hardcoded paths with dynamically generated paths using the resolve function.
Refactors several components to improve text wrapping and whitespace handling for better readability, especially in code and stack trace displays. Additionally, updates multiple components to use `$derived` for reactive property updates, ensuring UI elements are updated efficiently in response to data changes. This change enhances the user experience by ensuring text is displayed correctly and UI elements react appropriately to changes in data.
Ensures the application navigates to the main app route before updating the organization state during impersonation or when stopping impersonation. This resolves potential issues where the state update might occur before the route is fully loaded, leading to inconsistent behavior.
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request implements organization impersonation functionality for global admins and includes several infrastructure improvements. Key changes include:
- Impersonation Feature: Adds ability for global admins to view and manage organizations they're not members of, with visual indicators and proper UI/UX flow
- WebSocket Improvements: Implements robust reconnection logic with exponential backoff and comprehensive test coverage
- Performance Optimizations: Introduces
CachedPersistedStateto reduce localStorage reads and implements conditional query loading - UI Components: Adds pagination components, enhances notification styling, and creates organization management indicators
- Code Cleanup: Replaces hardcoded URLs with
resolve()calls throughout the application
Reviewed changes
Copilot reviewed 114 out of 116 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
ViewOrganization.cs |
Adds UpdatedUtc property and implements IHaveDates interface |
OrganizationRepository.cs |
Enhances search to support both ID and name criteria |
vitest-setup-server.ts |
Adds WebSocket polyfill for Node.js test environment |
vitest-setup-client.ts |
Implements localStorage mock for client tests |
vite.config.ts |
Configures server test setup file |
web-socket-client.svelte.ts |
Adds connection management, exponential backoff, and auth failure handling |
web-socket-client.test.ts |
Comprehensive WebSocket client test suite (494 lines) |
cached-persisted-state.svelte.ts |
Utility to cache PersistedState reads for performance |
cached-persisted-state.svelte.test.ts |
Test suite for cached state utility |
auth/index.svelte.ts |
Switches to CachedPersistedState for token storage |
pagination/* |
New pagination UI components (7 files) |
badge.svelte |
Adds red, amber, orange badge variants |
notification.svelte |
Adds impersonation variant, icon/action snippet support |
impersonate-organization-dialog.svelte |
Complex dialog for admin organization search and selection |
sidebar-user.svelte |
Adds impersonation controls and dialog trigger |
sidebar-organization-switcher.svelte |
Visual indicators for impersonation state |
organization-notifications.svelte |
Impersonation notification banner |
+layout.svelte |
Impersonation detection and state management |
routes.svelte.ts |
Adds impersonating to navigation context |
organizations/api.svelte.ts |
Admin organization search endpoint |
events/api.svelte.ts |
Conditional query enabling for count queries |
projects/api.svelte.ts |
Conditional query enabling for project queries |
| Various filter triggers | Consistent prop typing and cursor-pointer class |
| Multiple components | Replace hardcoded /next/ URLs with resolve() calls |
generated/api.ts |
API regeneration with formatting changes |
package.json |
Dependency updates including vitest-websocket-mock |
eslint.config.js |
Adds TanStack Query ESLint plugin |
Files not reviewed (1)
- src/Exceptionless.Web/ClientApp/package-lock.json: Language not supported
Comparing the uncommitted changes to the git branch version, here are the actual code differences (ignoring comments, whitespace, and quote styles): Key Changes: Added // @ts-nocheck at line 3 Moved StackStatus enum to the top of the file (before BillingStatus) Removed multi-line comment documentation for BillingStatus enum (the one explaining 0=Trialing, 1=Active, etc.) Removed multi-line comment documentation for StackStatus enum (the one explaining the enum values) Reordered enum exports - StackStatus now comes before BillingStatus Changed card_last4 property in ViewOrganization - was quoted as a string key ('card_last4') in the git version, now it's a regular identifier (card_last4) Removed multi-line comment for BillingStatus enum in the ViewOrganization class (the one explaining billing status values) Reformatted code with different indentation and line breaks (but this is purely whitespace) Summary: The substantive code changes are: Addition of @ts-nocheck directive Reordering of StackStatus and BillingStatus enums Removal of verbose comment documentation for enum values Fix of card_last4 property formatting (removed unnecessary quotes)
niemyjski
force-pushed
the
feature/october-updates
branch
from
9feeecc to
921074d
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Some updates for the next gen ui.,