Feature/pi table ux tweaks

[jasquat]

Implements #1030

This adds some tweaks to the process instance list table.

Changes:

• clicking on the row will now longer take the user to the process instance show page
• an actual link has been added to both the process instance id and the process model identifier columns to take the user to the respective pages
• added a refresh button next to the title on the process instance list page to refresh the table manually

[coderabbitai]

Walkthrough

Walkthrough

The updates focus on enhancing the user interface and functionality of the process instance listing in a workflow management frontend. Key improvements include the introduction of new icons and components for a more intuitive navigation and filtering experience, a method for dynamically generating content tags for process models, and a more flexible way of setting table headers. Additionally, there's a simplification in the table's structure and an update to an interface to make a property optional, streamlining the customization and display of data.

Changes

Files	Summary
.../ProcessInstanceListTable.tsx, .../ProcessInstanceListTableWithFilters.tsx	- Introduced new imports (Renew, Stack, Link). - Added filterComponent prop and getProcessModelSpanTag function. - Enhanced formatting functions. - Implemented tableTitle function and refactored tableTitleLine. - Removed navigateToProcessInstance. - Refactored to include filterComponent.
.../interfaces.ts	- Made tooltip_text property optional in SpiffTableHeader interface.
.../routes/ProcessInstanceList.tsx	- Modified processInstanceTitleElement for dynamic header text based on variant prop.

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: 1

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 4cf70a8 and 959def8.

Files selected for processing (4)

• spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx (11 hunks)
• spiffworkflow-frontend/src/components/ProcessInstanceListTableWithFilters.tsx (3 hunks)
• spiffworkflow-frontend/src/interfaces.ts (1 hunks)
• spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx (1 hunks)

Additional comments: 10

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx (2)

• 44-48: The modification to dynamically set the header text based on the variant prop in the processInstanceTitleElement function enhances flexibility and customization. It's recommended to document the expected values of variant and their corresponding header texts for clarity and maintainability.
• 59-59: The use of the processInstanceTitleElement function to dynamically set the header text in the ProcessInstanceListTableWithFilters component is a good practice. It ensures that the header text can be customized based on the variant prop, improving the component's flexibility.

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

• 496-496: Making the tooltip_text property optional in the SpiffTableHeader interface increases flexibility and usability. Ensure that all usages of SpiffTableHeader properly handle cases where tooltip_text might be undefined.

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx (6)

• 1-14: The addition of new imports (Renew, Stack, Link) aligns with the PR objectives to enhance the user experience and functionality of the ProcessInstanceListTable component. Ensure that these imports are used effectively throughout the component.
• 47-47: The introduction of the filterComponent prop adds flexibility to the ProcessInstanceListTable component by allowing the injection of custom filter components. This is a good practice for enhancing modularity and reusability. Ensure that the type of filterComponent is properly defined to accept React components.
• 231-243: The getProcessModelSpanTag function is a valuable addition for creating links to process models within the table. It enhances code reusability and maintainability by centralizing the logic for generating these links. Consider adding TypeScript type annotations to the function parameters for improved type safety.
• 264-276: The update to the formatProcessInstanceId function to use the getProcessModelSpanTag function for generating links is a good practice. It ensures consistency in how links are generated across the component. Verify that the id parameter is correctly used within the link.
• 368-408: The tableTitle function's implementation to dynamically generate the table header based on the header prop enhances the component's flexibility. The handling of markdown-like syntax for bold text is a creative solution. Ensure that this behavior is documented for future maintainers.
• 610-620: The structural change to include the filterComponent in the component's return structure is in line with the PR objectives to enhance the table's functionality. Ensure that the filterComponent is invoked correctly and that its presence is conditional based on its definition.

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

• 1542-1557: The extraction of the filterComponent function and passing it as a prop to the ResultsTable component is a positive change towards enhancing code readability and maintainability. This modular approach allows for a clearer separation of concerns and makes the component easier to understand and modify in the future. It's a good practice to keep UI components lean and delegate complex logic to separate functions or components.