Next: December Updates #2057
Merged
Next: December Updates #2057
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
Migrates from Superforms to TanStack Form for improved form management and validation. This change introduces Zod for schema definition and validation, and leverages TanStack Form's capabilities for handling form state and server-side error integration, and includes guidelines for form handling with TanStack Form and Zod, reactive bindings, safe data cloning, dialogs, and trigger components. Updates frontend instructions to reflect the new form handling approach.
Updates the API model generation process to use Zod schemas, improving type safety and validation. This change replaces the previous class-validator based approach with Zod, offering a more modern and flexible solution for defining and validating API data contracts. The update also includes removing the no longer used class-validator dependencies and templates. This aligns with improved type generation and client side form validation as the single source of truth.
Replaces the existing api.ts file with a new version. Adds a schemas.ts file containing schema definitions. The new api.ts file includes interfaces and enums representing the API's data structures. The schemas.ts file defines Zod schemas for data validation. These changes provide strongly-typed API definitions for improved code maintainability and data validation capabilities.
Removes form components that are no longer in use, cleaning up the codebase and reducing unnecessary code.
Implements a set of reusable UI field components for form creation. These components include Field, Set, Legend, Group, Content, Label, Title, Description, Separator, and Error. The Field component provides layout and styling, while the others handle specific aspects like labels, descriptions, and error messages.
Updates the chart tooltip type definitions to use `unknown` instead of `any`. This change ensures better type safety and prevents potential issues related to using `any` type, improving the overall code quality.
Adds `@tanstack/svelte-form` package. Removes unused packages related to form validation.
Improves documentation for handling forms, including error conversion and data initialization. Explains patterns for server-side error handling using `problemDetailsToFormErrors()`, covering both API exception and response object scenarios. Clarifies form initialization techniques, demonstrating simple and reactive approaches with `structuredCloneState()` for preventing cache mutation.
Refines the AGENTS.md documentation to improve clarity on UI patterns, specifically focusing on TanStack Form usage with Zod schemas for form validation. Also updates documentation to reflect Svelte 5 syntax changes.
Updates various dependencies to their latest versions, ensuring compatibility and incorporating bug fixes and performance improvements. Removes the `perfectionist/sort-enums` rule from the ESLint configuration. This rule was causing issues and doesn't align with the desired code style.
Configures the "aspire" server within the mcp.json file. This enables the use of the aspire MCP server via stdio with the command "aspire mcp start".
Updates API generation templates to correctly handle nullable properties. - Modifies the class data contract template to use the `nullable` flag to determine if a field is optional. - Adjusts the Zod schema generation to use the `nullable` flag to make a field optional. - Regenerates the API definition file with the updated templates. This ensures that API clients correctly interpret which properties are optional.
Updates user-related API calls and components to use the `ViewCurrentUser` type. This change improves code maintainability and clarity by consolidating user model definitions and ensuring consistency across the application. It also leverages the generated API types for better type safety.
Updates component files to import type definitions directly, rather than importing the actual class. This reduces code duplication and improves maintainability by centralizing type information.
This commit introduces a new login page with form validation using Zod for schema definition and TanStack Form for form state management. It replaces the previous implementation that relied on sveltekit-superforms and class-validator. This improves the user experience by providing client-side validation and clear error messages. Also includes OAuth Login.
Automates schema generation for API contracts, enhancing type safety and validation. This change introduces a new EJS template to create Zod schemas based on the API definitions. It streamlines data validation and reduces manual effort. It also adds validation to string and number types based on min/max length/value. It also supports array and enum types. The change also updates the validation file to add a helper to check if a field is invalid.
Replaces inline error checks with a dedicated `ariaInvalid` function for better accessibility. This change enhances the user experience for assistive technologies by providing a more robust and consistent way to determine form field validity.
Updates the authentication schemas to utilize generated schemas. This change ensures consistency and maintainability by leveraging the generated schemas for login and signup functionality.
Replaces the custom form button component with the more generic UI button component in the logout page. This change standardizes the button usage and improves the overall user interface consistency.
Updates the PersistentEvent model definition to use a type alias with optional data and type properties. Removes the class-validator decorators and class-based implementation for a simpler type-based approach. This cleans up the model definition and avoids unnecessary dependencies and complexity, simplifying the data structure.
Updates multiple package dependencies to their latest versions. These updates include bug fixes, performance improvements, and new features. Keeps the project up-to-date with the latest standards and best practices.
Implements a new page for creating projects, including form validation using Zod. This replaces the previous implementation using sveltekit-superforms. The page allows users to input a project name and triggers a mutation to create a new project in the system. Upon successful creation, the user is redirected to the project configuration page.
Refactors the project management page to use `@tanstack/svelte-form` and generated schemas for updating project settings. This improves type safety and reduces code duplication. It also addresses issues with form validation and server-side error handling.
Updates the project configuration dialogs to use tanstack-svelte-form instead of superforms for form management and validation. This change provides better control and customization over form handling, and fixes issues with sveltekit stealing focus. It also includes improved error handling and form validation.
Simplifies the project config API by using a type alias for the request body. Refactors the table options component to directly assign key-value pairs instead of creating a class instance. Removes the `ValueFromBody` class as the API now directly accepts a string value.
Migrates organization management and creation forms to use Tanstack Svelte Form. This change improves form handling by leveraging a dedicated form library, allowing for more robust validation and a cleaner implementation. It also removes the dependency on `sveltekit-superforms` and `class-validator`.
Updates the suspend organization dialog to use TanStack Form. This provides improved form handling and validation capabilities. Removes the dependency on sveltekit-superforms.
Migrates the update token notes dialog to use tanstack form. This change replaces the previous superform implementation with a tanstack form, providing a more robust and flexible approach to handling form state and validation. It also simplifies the component by removing unnecessary dependencies.
Migrates the account management page to use @tanstack/svelte-form. This improves form handling and validation. It replaces the previous sveltekit-superforms implementation.
Updates the organization context when a new organization is created or selected from the list. This ensures that the sidebar accurately reflects the currently selected organization even after navigating to a new organization or creating one.
Replaces `sveltekit-superforms` with `@tanstack/svelte-form` in the set bonus dialog. This simplifies the form handling and validation logic, and provides a more integrated solution for form management within the Svelte application. Removes reliance on server-side form validation library.
Moves organization bonus and suspension form and schema definitions to separate files for better organization. Removes superforms and applies tanstack forms for notification settings to allow more flexibility and control. The previous superform implementation was not working as expected, this change also fixes an issue where notification settings were not being saved correctly. Adds error handling and display for form submissions.
Implements a new component for defining custom date ranges, allowing users to specify start and end dates using relative or absolute timestamps. Replaces existing component and migrates validation to Zod schema and refactors validation logic. Updates organization post success to set query data.
Introduces a dialog for creating new webhooks, allowing users to specify the URL and event types to trigger the webhook. This enhances the system's ability to notify external services of events.
Migrates the invite user dialog to use tanstack form. This change improves the dialog's usability and maintainability. It switches from sveltekit-superforms to tanstack-svelte-form
Migrates "Add Reference Link" and "Mark Stack as Fixed" dialogs from sveltekit-superforms to tanstack/svelte-form. This change aims to improve form state management and validation within the application, and it uses zod schemas instead of class-validator for form validation. It also updates the "API Key Notes" dialog to use tanstack forms and correctly sets the initial notes value.
Improves error handling by providing a more informative message to the user when an unexpected error occurs in forms. Updates chart tooltips to ensure correct date formatting. Refactors organization user invitation to simplify the code and fix a bug where the invitation was not being sent correctly. Removes unnecessary code and improves consistency across the application.
Introduces a signup page that allows users to create an account via email and password, or through social login providers if configured. The page includes form validation and handles the signup process, redirecting the user to the project creation page upon success.
Implements the reset password page where users can change their password after requesting a password reset. Includes handling for valid and invalid tokens, displaying appropriate messages, and redirection to the login page upon success or cancellation.
Implements the forgot password page, allowing users to request a password reset email. This enhancement streamlines the password recovery process, improving user experience and security.
Adds a new page to allow users to change their password. It includes form validation, error handling, and success/error notifications. The form adapts based on whether the user has an existing local account password set.
Adds a page to manage linked social accounts for single sign-on, allowing users to link/unlink accounts from various providers (Microsoft, Google, Facebook, GitHub). Also adds route to access the external login management page and conditionally displays the route based on whether OAuth logins are enabled.
Refactors authentication logic into a dedicated `api.svelte.ts` file for better organization and reusability. Introduces form validation using Zod schemas, including custom validation for email availability, improving user experience and data integrity. Enhances email address update process with real-time validation, providing immediate feedback to the user.
Moves the `gotoLogin` function to the bottom of the `index.svelte.ts` file for better organization. Updates faceted filter builders to use getters for properties, avoiding the `state_referenced_locally` warning. Adds a `$effect.pre` to faceted filter components to correctly initialize state. Updates the projects query in `ProjectFacetedFilter` to reactively update when the organization changes. Updates the chart id to be a derived value to update when the id changes.
Contributor
There was a problem hiding this comment.
Pull request overview
This is a comprehensive December update that migrates the application from sveltekit-superforms with class-validator to @tanstack/svelte-form with Zod validation schemas. The PR also transitions from class-based models to interface-based types and updates the UI component library.
Key Changes:
- Migration from
sveltekit-superformsto@tanstack/svelte-formfor form management - Replacement of
class-validatordecorators with Zod schemas for validation - Conversion of class-based models to TypeScript interfaces
- Replacement of Form components with Field components across the application
- Updates to UI components (styling, structure, accessibility improvements)
- Addition of new authentication-related pages (signup, forgot-password, reset-password, external-logins)
Reviewed changes
Copilot reviewed 246 out of 249 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/Exceptionless.Web/ClientApp/src/routes/status/+page.svelte |
Updated Card styling from max-w-sm to w-sm |
src/Exceptionless.Web/ClientApp/src/routes/routes.svelte.ts |
Changed User import to ViewCurrentUser for type consistency |
src/Exceptionless.Web/ClientApp/src/routes/(auth)/signup/+page.svelte |
New signup page using TanStack Form with Zod validation |
src/Exceptionless.Web/ClientApp/src/routes/(auth)/reset-password/[token]/+page.svelte |
New password reset page with form validation |
src/Exceptionless.Web/ClientApp/src/routes/(auth)/logout/+page.svelte |
Migrated to use Button component and updated Card styling |
src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte |
Migrated from superforms to TanStack Form with Field components |
src/Exceptionless.Web/ClientApp/src/routes/(auth)/forgot-password/+page.svelte |
New forgot password page using TanStack Form |
src/Exceptionless.Web/ClientApp/src/routes/(app)/project/add/+page.svelte |
Migrated form handling to TanStack Form |
src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte |
Added type assertion for Chart tooltip formatter |
src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/settings/+page.svelte |
Updated to use interface types and object literals |
src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte |
Migrated from superforms to TanStack Form |
src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte |
Updated imports to use type imports |
src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configuration-values/+page.svelte |
Updated imports to use type imports |
src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/api-keys/+page.svelte |
Changed from class instantiation to object literal |
src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/list/+page.svelte |
Updated to set organization context on navigation |
src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/add/+page.svelte |
Migrated to TanStack Form and updates organization context |
src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte |
Refactored mutation to use reactive getters |
src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte |
Added type assertion for Chart tooltip formatter |
src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte |
Migrated from superforms to TanStack Form |
src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte |
Complete rewrite with TanStack Form, simplified to password management only |
src/Exceptionless.Web/ClientApp/src/routes/(app)/account/routes.svelte.ts |
Added external logins route and updated security page |
src/Exceptionless.Web/ClientApp/src/routes/(app)/account/manage/+page.svelte |
Migrated to TanStack Form with email validation |
src/Exceptionless.Web/ClientApp/src/routes/(app)/account/external-logins/+page.svelte |
New page for managing OAuth account connections |
src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte |
Removed model validator setup |
src/Exceptionless.Web/ClientApp/src/lib/generated/schemas.ts |
New Zod schemas generated from API types |
src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts |
Converted from class-based to interface-based types |
| Various UI component files | Updated styling with reorganized Tailwind classes and accessibility improvements |
| Various model files | Converted from classes with decorators to TypeScript interfaces |
| Validation files | Replaced class-validator helpers with TanStack Form utilities |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Adds a function to validate and sanitize redirect URLs, preventing potential open redirect vulnerabilities. This function is used in the login and status pages to ensure safe navigation after authentication. The logic ensures that only relative URLs within the application's domain are allowed, falling back to a default or null URL if the provided redirect is invalid. Also, includes unit tests for the new functionality.
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.
Pull request overview
This is a comprehensive December update that migrates the application from
sveltekit-superformswithclass-validatorto@tanstack/svelte-formwith Zod validation schemas. The PR also transitions from class-based models to interface-based types and updates the UI component library.Key Changes:
sveltekit-superformsto@tanstack/svelte-formfor form managementclass-validatordecorators with Zod schemas for validation