Feature/upgrade react router dom

[jasquat]

This updates the react-router-dom to match the react-router package in the frontend. It also updates the frontend to support this.

Changes:

• react-router-dom upgraded to 6.22.0
• routes in ContainerForExtensions updated to use data routes instead of BrowserRoutes
• removed the alert box when attempting to leave a process model edit page
  • react-router-dom no longer fully supports
  • instead adds a notification that changes have been made and the "Save" button is disabled until a change has been made
• notification that process model file has been saved now goes away after 3 seconds
• numerous fixes for random glitches when using extensions

Summary by CodeRabbit

• New Features
  • Enhanced Markdown rendering capabilities with new formatting services.
  • Introduced the ability to conditionally disable the Save button in the diagram editor.
  • Added support for custom data attributes in the Notification component for improved testing.
• Enhancements
  • Updated react-router-dom and related dependencies to improve navigation and routing within the app.
  • Reorganized context providers and routing setup for better performance and maintainability.
  • Consolidated modal components for a more organized approach to displaying notifications for unsaved changes.
• Refactor
  • Improved form data handling and component rendering logic in extension routes.
  • Updated test cases to use custom Cypress commands for better readability and maintenance.
• Bug Fixes
  • Fixed an issue with the path generation logic in the ProcessModelEditDiagram to handle null process_model_id values.

[coderabbitai]

Walkthrough

Walkthrough

The update focuses on modernizing the frontend by upgrading react-router-dom to version 6.22.0 and adjusting dependencies. It also includes restructuring the routing setup using createBrowserRouter and RouterProvider, enhancing component functionality, and improving user interface responsiveness. Notable changes involve context provider reordering, route definition updates, and better handling of unsaved changes and component reusability.

Changes

File(s)	Change Summary
.../package-lock.json, .../package.json	- Upgraded react-router-dom to 6.22.0 - Added dependencies for @remix-run/router and react-router - Updated Node engine requirement to >=14.0.0
src/App.tsx	- Reordered context providers, moving APIErrorProvider outside of AbilityContext.Provider
src/ContainerForExtensions.tsx, src/routes/EditorRoutes.tsx, src/routes/Extension.tsx, src/routes/ProcessModelEditDiagram.tsx	- Updated routing setup using createBrowserRouter, RouterProvider, and Outlet - Reorganized route definitions and layout - Refactored component rendering and form handling - Removed usePrompt - Added logic for disabling Save button and managing unsaved changes notifications
src/components/MarkdownRenderer.tsx	- Imported FormattingService for enhanced functionality - Introduced newMarkdown variable for improved markdown rendering logic
src/components/ReactDiagramEditor.tsx	- Added disableSaveButton prop for controlling the Save button state - Implemented conditional logic to disable the Save button based on the prop value
src/interfaces.ts	- Imported FunctionComponent from 'react' for better component type definitions

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

---

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>.
  • Generate unit-tests for this file.
• 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 generate unit tests for this file.
  • @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 generate interesting stats about this repository from git and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

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 as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• 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/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 3

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between c465efc and 7088100.

Files selected for processing (10)

• spiffworkflow-frontend/package-lock.json (5 hunks)
• spiffworkflow-frontend/package.json (1 hunks)
• spiffworkflow-frontend/src/App.tsx (2 hunks)
• spiffworkflow-frontend/src/ContainerForExtensions.tsx (2 hunks)
• spiffworkflow-frontend/src/components/MarkdownRenderer.tsx (2 hunks)
• spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (3 hunks)
• spiffworkflow-frontend/src/interfaces.ts (2 hunks)
• spiffworkflow-frontend/src/routes/EditorRoutes.tsx (1 hunks)
• spiffworkflow-frontend/src/routes/Extension.tsx (6 hunks)
• spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx (9 hunks)

Files skipped from review due to trivial changes (1)

• spiffworkflow-frontend/src/routes/EditorRoutes.tsx

Additional comments: 16

spiffworkflow-frontend/src/App.tsx (1)

• 12-16: Reordering context providers can impact the availability of context values in nested components. Verify that moving APIErrorProvider outside of AbilityContext.Provider does not affect any components relying on context values provided by AbilityContext.

spiffworkflow-frontend/src/components/MarkdownRenderer.tsx (3)

• 2-2: Importing FormattingService introduces a new dependency. Ensure that FormattingService is properly tested and its methods do not introduce side effects that could affect the rendering of markdown content.
• 6-6: The introduction of newMarkdown variable using FormattingService.checkForSpiffFormats(source) modifies the original markdown source. Confirm that this modification aligns with the application's requirements for markdown rendering and does not alter the intended content or formatting in an undesirable way.
• 16-16: Updating props passed to MDEditor.Markdown to include the modified source using spread syntax is a significant change. Ensure that all properties are correctly merged and that no properties are unintentionally overridden, leading to unexpected behavior.

spiffworkflow-frontend/package.json (1)

• 54-54: Updating react-router-dom to "^6.22.0" is a major version change. Confirm that this version is fully compatible with the rest of the project's dependencies and that there are no breaking changes affecting the application's routing functionality.

spiffworkflow-frontend/src/ContainerForExtensions.tsx (3)

• 2-2: Switching to createBrowserRouter, RouterProvider, and Outlet from react-router-dom represents a significant change in routing strategy. Ensure that this new approach is compatible with the application's architecture and that all routes are correctly configured and accessible.
• 103-111: The transition to an array-based format for defining routes requires careful validation to ensure that all paths are correctly mapped to their respective components. Double-check that the paths and elements are correctly associated and that no routes are missing or incorrectly configured.
• 142-148: Creating the router with createBrowserRouter and configuring it with the new route structure is a critical part of the routing update. Verify that the Component property in the route configuration is correctly utilized and that the children routes are properly nested and rendered.

spiffworkflow-frontend/src/interfaces.ts (1)

• 1-1: Adding FunctionComponent from 'react' as a type for values in ObjectWithStringKeysAndFunctionValues is a type refinement. Ensure that all uses of ObjectWithStringKeysAndFunctionValues throughout the application are compatible with this change and that it does not introduce type errors or require additional prop definitions for the components.

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (3)

• 95-95: The disableSaveButton prop is correctly added to the OwnProps type, ensuring type safety for the new functionality.
• 126-126: Ensure the disableSaveButton prop is destructured from the component's props, aligning with the existing pattern of prop management.
• 714-716: The disableSaveButton prop is effectively used to conditionally disable the Save button. This implementation follows best practices for conditional rendering based on prop values.

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx (4)

• 1051-1057: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [1054-1063]

The handling of process_model_id being null in generatePath calls is correct, ensuring the application can gracefully handle cases where the process_model_id is not available.

• 1085-1085: The addition of disableSaveButton={!diagramHasChanges} in two instances correctly implements conditional disabling of the Save button based on whether there are unsaved changes. This enhances user interaction by preventing unnecessary save operations when there are no changes.

Also applies to: 1122-1122

• 1143-1152: The unsavedChangesMessage function correctly displays a notification for unsaved changes, improving user feedback and preventing data loss. This is a valuable addition to the user interface.
• 1154-1164: Consolidating modal components into the pageModals function improves code organization and maintainability by centralizing modal rendering logic. This is a good practice for managing multiple modal components in a single file.

[coderabbitai]

Review Status

Actionable comments generated: 2

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 7088100 and 99e133b.

Files selected for processing (8)

• spiffworkflow-frontend/cypress/e2e/process_instances.cy.js (2 hunks)
• spiffworkflow-frontend/cypress/e2e/process_models.cy.js (2 hunks)
• spiffworkflow-frontend/src/components/Notification.tsx (4 hunks)
• spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (3 hunks)
• spiffworkflow-frontend/src/extension_ui_schema_interfaces.ts (2 hunks)
• spiffworkflow-frontend/src/interfaces.ts (1 hunks)
• spiffworkflow-frontend/src/routes/Extension.tsx (8 hunks)
• spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx (8 hunks)

Files skipped from review as they are similar to previous changes (4)

• spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
• spiffworkflow-frontend/src/interfaces.ts
• spiffworkflow-frontend/src/routes/Extension.tsx
• spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

Additional comments: 6

spiffworkflow-frontend/src/components/Notification.tsx (1)

• 21-21: The addition of the 'data-qa' prop is a good practice for facilitating testing. It's correctly defined as an optional string prop and conditionally applied to the component's root div, enhancing testability without affecting production behavior.

spiffworkflow-frontend/src/extension_ui_schema_interfaces.ts (1)

• 7-7: Importing FunctionComponent from 'react' is necessary for the new type definition introduced in this file. Good practice to keep imports organized.

spiffworkflow-frontend/cypress/e2e/process_models.cy.js (2)

• 85-86: Replacing direct cy.contains('Save').click() calls with cy.getBySel('process-model-file-save-button').click() is a good improvement for test readability and maintainability. Using custom Cypress commands like getBySel helps abstract specific selectors, making the tests more robust and easier to update.
• 105-105: The use of custom Cypress commands for saving actions, as seen here, enhances test readability and maintainability. This practice should be consistently applied across all tests for consistency and ease of updates.

spiffworkflow-frontend/cypress/e2e/process_instances.cy.js (2)

• 39-39: The update to use cy.getBySel('process-model-file-save-button').click() for saving actions is a good practice, enhancing test readability and maintainability. Consistently using custom Cypress commands across tests is beneficial.
• 50-50: Using custom Cypress commands for saving actions, as done here, improves test readability and maintainability. This approach should be consistently applied to ensure uniformity across the test suite.