fix: fixed rendering of csv documents #3460
Conversation
|
|
Warning Rate limit exceeded@chesterkmr has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 22 minutes and 23 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (4)
WalkthroughThe changes introduce support for handling base64-encoded document files, particularly for CSVs. The backend now fetches CSV files, encodes them in base64, and includes this data in the document response. The frontend adapts by adding the Changes
Sequence Diagram(s)sequenceDiagram
participant Client (Frontend)
participant DocumentService (Backend)
participant Remote Storage
Client->>DocumentService: Request documents
alt CSV file with imageUrl exists
DocumentService->>Remote Storage: HTTP GET CSV file (arraybuffer)
Remote Storage-->>DocumentService: CSV file data
DocumentService->>DocumentService: Convert CSV to base64 data URL
DocumentService->>Client: Return document with base64 property
else Non-CSV or no imageUrl
DocumentService->>Client: Return document as usual
end
Client->>Client: Filter and display documents with imageUrl or base64
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx (1)
6-9: LGTM: Proper memoization with correct logic.The
useMemooptimization correctly filters documents based on the presence of eitherimageUrlorbase64properties, and the dependency array is properly set. This supports the new CSV base64 functionality while maintaining performance.Consider wrapping the component with
React.memofor additional optimization, especially if the parent component re-renders frequently:+import { FunctionComponent, useMemo, memo } from 'react'; -export const MultiDocuments: FunctionComponent<IMultiDocumentsProps> = ({ value }) => { +export const MultiDocuments: FunctionComponent<IMultiDocumentsProps> = memo(({ value }) => { // ... component logic -}; +});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
apps/backoffice-v2/src/domains/documents/hooks/adapters/useWorkflowDocumentsAdapter/useWorkflowDocumentsAdapter.tsx(2 hunks)apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx(1 hunks)apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/interfaces.ts(1 hunks)apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/helpers.ts(1 hunks)apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts(1 hunks)services/workflows-service/prisma/data-migrations(1 hunks)services/workflows-service/src/document/document.module.ts(2 hunks)services/workflows-service/src/document/document.service.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`apps/backoffice-v2/**/*.{ts,tsx}`: Use functional components with TypeScript. I...
apps/backoffice-v2/**/*.{ts,tsx}: Use functional components with TypeScript.
Implement smart/dumb component pattern.
Place components in feature-based directories.
Use compound components for complex UIs.
Follow atomic design principles.
Use React Query for server state and API calls.
Use Context for shared state.
Implement state machines for complex flows.
Use local state for UI-only state.
Follow unidirectional data flow.
Use strict TypeScript configuration.
Define interfaces for all props.
Use discriminated unions for state.
Leverage type inference.
Use Radix UI for accessible components.
Implement proper ARIA attributes.
Follow consistent styling patterns.
Use composition over inheritance.
Keep components small and focused.
Use React Hook Form for forms.
Implement Zod for validation.
Handle form submission states.
Show validation feedback.
Use controlled inputs when needed.
Implement proper loading states for data fetching.
Handle error states gracefully.
Cache responses appropriately.
Type API responses.
Use error boundaries.
Implement fallback UI.
Handle async errors.
Show user-friendly error messages.
Log errors appropriately.
Use React.memo wisely.
Implement proper code splitting.
Use lazy loading for routes.
Optimize re-renders.
Profile performance regularly.
Write unit tests for components.
Use React Testing Library.
Mock external dependencies in tests.
Maintain good test coverage.
Follow feature-based organization.
Use index files for exports.
Keep related files together.
Use consistent naming.
Implement barrel exports.
Use Tailwind CSS for styling.
Follow utility-first approach for styling.
Use CSS variables for theming.
Keep styles maintainable.
Use CSS modules when needed.
Document complex logic.
Write clear component documentation.
Keep documentation up to date.
Use JSDoc when helpful.
Follow ESLint rules.
Use consistent formatting.
Write clear variable names.
Keep functions pure.
Use meaningful types.
Validate user input.
Implement proper authentication.
Handle sensitive data carefully.
Follow security best practices.
Use HTTPS for API calls.
Follow WCAG guidelines for accessibility.
Use semantic HTML.
Test with screen readers.
Ensure keyboard navigation.
Provide proper focus management.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/backoffice-v2.mdc)
List of files the instruction was applied to:
apps/backoffice-v2/src/domains/documents/hooks/adapters/useWorkflowDocumentsAdapter/useWorkflowDocumentsAdapter.tsxapps/backoffice-v2/src/pages/Entity/components/Case/interfaces.tsapps/backoffice-v2/src/lib/blocks/components/MultiDocuments/interfaces.tsapps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/helpers.tsapps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx
`services/workflows-service/**/*.service.ts`: Service implementation files must be placed in feature modules and named with the .service.ts suffix.
services/workflows-service/**/*.service.ts: Service implementation files must be placed in feature modules and named with the .service.ts suffix.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/workflows-service.mdc)
List of files the instruction was applied to:
services/workflows-service/src/document/document.service.ts
🧠 Learnings (5)
services/workflows-service/prisma/data-migrations (2)
undefined
<retrieved_learning>
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/data-migrations.mdc:0-0
Timestamp: 2025-06-24T09:35:54.963Z
Learning: In Ballerine's workflow migration scripts (TypeScript), always establish the relationship between workflow definitions and UI definitions solely through the 'workflowDefinitionId' field in the UiDefinition model; do not create a separate junction table or relation.
</retrieved_learning>
<retrieved_learning>
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/data-migrations.mdc:0-0
Timestamp: 2025-06-24T09:35:54.963Z
Learning: Use consistent naming conventions for related components (workflows, UI definitions, filters) in Ballerine migrations to improve maintainability and clarity.
</retrieved_learning>
services/workflows-service/src/document/document.module.ts (1)
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/data-migrations.mdc:0-0
Timestamp: 2025-06-24T09:35:54.963Z
Learning: In Ballerine's workflow migration scripts (TypeScript), always establish the relationship between workflow definitions and UI definitions solely through the 'workflowDefinitionId' field in the UiDefinition model; do not create a separate junction table or relation.
apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts (10)
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: Define interfaces for all component props in TypeScript to ensure type safety and self-documenting code.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: In the apps/backoffice-v2 React TypeScript codebase, always use functional components and TypeScript for all UI components to ensure consistency and type safety.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: Enable strict TypeScript configuration and define interfaces for all component props to ensure type safety and clarity.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: Use React Context for shared state that needs to be accessed by multiple components, and implement state machines for managing complex flows.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: In React TypeScript projects, prefer functional components and use the FunctionComponent type for clarity and type safety.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: Keep components small, focused, and handle edge cases and loading states appropriately for robust React applications.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: For complex UIs in React, use the compound component pattern to allow flexible composition and encapsulation of related subcomponents.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: Export both components and hooks as named exports to improve discoverability and enable easier refactoring.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/workflows-dashboard.mdc:0-0
Timestamp: 2025-06-24T09:37:03.204Z
Learning: In React TypeScript projects, using the container/presenter pattern helps separate business logic from UI rendering, improving maintainability and testability.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: Adopt the smart/dumb (container/presentational) component pattern in React to separate business logic from UI rendering, improving maintainability and testability.
apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx (9)
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: Use React.memo to optimize performance for components with expensive renders, and always specify proper dependency arrays in hooks.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: In the apps/backoffice-v2 React TypeScript codebase, always use functional components and TypeScript for all UI components to ensure consistency and type safety.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: Use React.memo and code splitting judiciously to optimize performance, and profile the application regularly to identify bottlenecks.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: In React TypeScript projects, prefer functional components and use the FunctionComponent type for clarity and type safety.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: Export both components and hooks as named exports to improve discoverability and enable easier refactoring.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: For complex UIs in React, use the compound component pattern to allow flexible composition and encapsulation of related subcomponents.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/backoffice-v2.mdc:0-0
Timestamp: 2025-06-24T09:35:48.303Z
Learning: Use React Context for shared state that needs to be accessed by multiple components, and implement state machines for managing complex flows.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/kyb-app.mdc:0-0
Timestamp: 2025-06-24T09:36:16.111Z
Learning: Keep components small, focused, and handle edge cases and loading states appropriately for robust React applications.
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/workflows-dashboard.mdc:0-0
Timestamp: 2025-06-24T09:37:03.204Z
Learning: In React TypeScript projects, using the container/presenter pattern helps separate business logic from UI rendering, improving maintainability and testability.
services/workflows-service/src/document/document.service.ts (1)
Learnt from: CR
PR: ballerine-io/ballerine#0
File: .cursor/rules/workflows-service.mdc:0-0
Timestamp: 2025-06-24T09:37:14.531Z
Learning: Use the PrismaService for all database operations and wrap multiple operations in transactions for atomicity.
🧬 Code Graph Analysis (2)
apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/helpers.ts (2)
apps/backoffice-v2/src/common/utils/is-csv/is-csv.ts (1)
isCsv(1-2)apps/backoffice-v2/src/common/utils/convert-csv-to-pdf-base64-string/convert-csv-to-pdf-base64-string.ts (1)
convertCsvToPdfBase64String(9-36)
apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx (1)
apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/interfaces.ts (1)
IMultiDocumentsProps(1-14)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Analyze (javascript)
- GitHub Check: test_linux
- GitHub Check: spell_check
- GitHub Check: build (ubuntu-latest)
- GitHub Check: lint
- GitHub Check: format
🔇 Additional comments (9)
services/workflows-service/prisma/data-migrations (1)
1-1: Confirm that the new submodule commit includes the expected migration(s).The PR only updates the submodule pointer to
493a222….
Please double-check that:
- The referenced commit actually contains the new/updated Prisma migration files that enable CSV/base64 support.
- The CI pipeline (or your local workflow) runs
git submodule update --init --recursiveso the new commit is fetched in all environments.- Any downstream services that apply these migrations have been tested against this commit to avoid runtime schema drift.
If everything looks good, no further action is needed.
services/workflows-service/src/document/document.module.ts (1)
13-13: LGTM: HttpModule dependency correctly added.The addition of
HttpModuleto support HTTP requests for CSV file fetching aligns with the PR objective to fix CSV document rendering.Also applies to: 23-23
apps/backoffice-v2/src/domains/documents/hooks/adapters/useWorkflowDocumentsAdapter/useWorkflowDocumentsAdapter.tsx (1)
54-54: LGTM: Base64 property correctly propagated through data flow.The changes properly extract and include the
base64property when mapping document files, enabling downstream components to access base64-encoded content.Also applies to: 67-67
apps/backoffice-v2/src/pages/Entity/components/Case/interfaces.ts (1)
41-41: LGTM: Base64 property correctly added as optional.The optional
base64property appropriately supports documents with base64-encoded content while maintaining compatibility with existing documents.apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/helpers.ts (1)
7-8: LGTM: CSV conversion logic correctly updated to use base64.The condition properly checks for both CSV file type and base64 presence, and correctly passes the
base64data toconvertCsvToPdfBase64Stringinstead ofimageUrl. This aligns with the function signature that expects base64-encoded CSV content.apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/MultiDocuments.tsx (1)
1-1: LGTM: Clean import optimization.Good practice to import only the specific React hooks needed rather than the entire React object.
services/workflows-service/src/document/document.service.ts (3)
51-51: LGTM: Proper dependency injection.The
HttpServiceinjection follows NestJS patterns correctly for enabling HTTP requests.Also applies to: 64-64
1172-1204: LGTM: Good async transformation with concurrent processing.The conversion from synchronous map to
Promise.allwith async processing correctly handles the new CSV to base64 conversion requirements while maintaining performance through concurrent file processing.
1206-1208: LGTM: Clear CSV detection logic.The MIME type checking covers both common CSV content types correctly.
apps/backoffice-v2/src/lib/blocks/components/MultiDocuments/interfaces.ts
Outdated
Show resolved
Hide resolved
apps/backoffice-v2/src/pages/Entity/components/Case/hooks/useDocuments/helpers.ts
Outdated
Show resolved
Hide resolved
Summary by CodeRabbit
New Features
Improvements
Chores