Dev --> SB

[tomer-shvadron]

User description

Description

Dev --> SB

---

Type

enhancement, bug_fix, documentation

---

Description

• Refactored Header.Navbar to use new Collapsible components for better navigation handling.
• Enhanced blocks.ts with new types and a creation function for better blocks management.
• Added dynamic interpolation support in CollectionFlowService for UI schema traversal.
• Implemented useNavbarLogic hook for managing navbar state and logic.
• Fixed UI issues in Cases.tsx and improved task element rendering in UIRenderer.
• Added automation script for deploying Ballerine with Docker.
• Updated and added Chinese translations for UI elements and validation messages.
• Introduced GitHub Actions workflow for PR Agent to automate PR management.

---

Changes walkthrough

	Relevant files
Enhancement	8 files Header.Navbar.tsx Refactor Navbar with Collapsible Components and Logic Hook apps/backoffice-v2/src/common/components/organisms/Header/Header.Navbar.tsx Refactored to use new Collapsible components for navigation items with children. Removed unused imports and hooks. Added new hook useNavbarLogic to manage navbar state and logic. +84/-55  blocks.ts Enhance Blocks with New Types and Creation Function            packages/blocks/src/blocks.ts Introduced new types for Cell, Block, Blocks, and utility types for blocks manipulation. Added BlocksClient interface for consumer cell type registration. Implemented createBlocks function for blocks creation with options. +126/-14 collection-flow.service.ts Support Dynamic Interpolation in UI Schema Traversal          services/workflows-service/src/collection-flow/collection-flow.service.ts Added context parameter to traverseUiSchema for dynamic translation interpolation. Updated getFlowConfiguration to pass context for UI schema traversal. Utilized lodash/get for accessing nested properties in context. +29/-6    useNavbarLogic.tsx Implement useNavbarLogic Hook for Navbar State Management apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx Created useNavbarLogic hook for managing navbar items and active states. Utilized useFiltersQuery to fetch filters for dynamic navbar items. Implemented logic to determine active filter groups. +68/-0    Router.tsx Implement Catch-All Route for NotFound Redirection              apps/backoffice-v2/src/Router/Router.tsx Added catch-all route for redirecting to NotFound page. +6/-0      Header.NavItem.tsx Improve NavLink Active State Styling in Navbar                      apps/backoffice-v2/src/common/components/organisms/Header/Header.NavItem.tsx Enhanced NavLink with active state styling. +13/-1    boot.sh Automation Script for Ballerine Deployment with Docker      deploy/scripts/boot.sh Added automation script for deploying Ballerine with Docker. Script handles Docker installation, environment setup, and Ballerine deployment. +60/-0    translation.json Update and Add Chinese Translations for UI and Validation Messages services/workflows-service/src/providers/translation/locales/cn/translation.json Added and updated Chinese translations for various UI elements and validation messages. +132/-12
Tests	1 files collection-flow.service.unit.test.ts Unit Tests for Dynamic Interpolation in CollectionFlowService services/workflows-service/src/collection-flow/collection-flow.service.unit.test.ts Added unit tests for CollectionFlowService covering new dynamic interpolation features. Updated existing tests to pass context to traverseUiSchema. +5/-1
Bug_fix	2 files Cases.tsx UI Fixes for Cases List and Filtering Logic Correction      apps/backoffice-v2/src/pages/Entities/components/Cases/Cases.tsx Adjusted cases list styles for better height management. Fixed filtering logic to correctly handle cases without tags. +5/-1      Task.tsx Fix Task Element Rendering in UIRenderer                                  apps/kyb-app/src/components/organisms/UIRenderer/elements/Task/Task.tsx Updated BlocksComponent usage with correct props and children rendering. Added @ts-ignore to bypass TypeScript errors temporarily. +8/-2
Configuration changes	1 files pr_agent.yml Introduce PR Agent GitHub Actions Workflow                              .github/workflows/pr_agent.yml Introduced GitHub Actions workflow for PR Agent to automate PR management. +27/-0

---

✨ Usage guide:

---

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe --pr_description.add_original_user_description=true" "--pr_description.keep_original_user_title=true", ...] meaning the describe tool will run automatically on every PR, will keep the original title, and will add the original user description above the generated description. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following: type: the PR type. summary: the PR summary. walkthrough: the PR walkthrough. Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: Main topic:performance - pr_agent:The main topic of this PR is performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Inline File Walkthrough 💎 For enhanced user experience, the describe tool can add file summaries directly to the "Files changed" tab in the PR page. This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs). To enable inline file summary, set pr_description.inline_file_summary in the configuration file, possible values are: 'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab. true: A collapsable file comment with changes title and a changes summary for each file in the PR. false (default): File changes walkthrough will be added only to the "Conversation" tab.

Utilizing extra instructions The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: [pr_description] extra_instructions=""" - The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 80ee5b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

PR Description updated to latest commit (b1edefd)

[github-actions]

PR Review

PR feedback
⏱️ Estimated effort to review [1-5]	4, because the PR includes a wide range of changes across multiple files and services, including refactoring, feature enhancements, bug fixes, and dependency updates. The changes span across front-end components, back-end services, and configuration files, requiring a comprehensive review to ensure compatibility and adherence to best practices.
🧪 Relevant tests	Yes
🔍 Possible issues	The removal of useSelectEntityFilterOnMount hook usage in Header.Navbar.tsx might affect the initial filter selection state. The introduction of dynamic interpolation in CollectionFlowService for UI schema traversal could potentially introduce issues if not all edge cases are handled, especially with nested properties. Dependency updates in package.json files should be thoroughly tested to ensure no breaking changes affect the application. The addition of GitHub Actions workflow for PR management (pr_agent.yml) needs to be tested to ensure it triggers and executes as expected.
🔒 Security concerns	No

Code feedback:

---

relevant file	apps/backoffice-v2/src/common/components/organisms/Header/Header.Navbar.tsx
suggestion	Consider restoring or replacing the functionality provided by useSelectEntityFilterOnMount to ensure the initial filter state is correctly set. [important]
relevant line	import { useNavbarLogic } from '@/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic';

---

relevant file	services/workflows-service/src/collection-flow/collection-flow.service.ts
suggestion	Ensure thorough testing of the dynamic interpolation feature in traverseUiSchema to handle all possible edge cases, including deeply nested properties and arrays. [important]
relevant line	this.traverseUiSchema(uiSchema[key], context, language);

---

relevant file	apps/backoffice-v2/package.json
suggestion	After updating dependencies, perform comprehensive regression testing to ensure that the updates do not introduce any breaking changes or regressions. [important]
relevant line	"@ballerine/blocks": "0.1.26",

---

relevant file	.github/workflows/pr_agent.yml
suggestion	Test the new GitHub Actions workflow for PR management to ensure it triggers correctly for the specified events and executes the intended actions without errors. [medium]
relevant line	on:

---

---

✨ Usage guide:

---

Overview:
The review tool scans the PR code changes, and generates a PR review. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.
When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

Utilizing extra instructions The review tool can be configured with extra instructions, which can be used to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify the relevant sub-tool, and the relevant aspects of the PR that you want to emphasize. Examples for extra instructions: [pr_reviewer] # /review # extra_instructions=""" In the 'possible issues' section, emphasize the following: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

How to enable\disable automation When you first install PR-Agent app, the default mode for the review tool is: pr_commands = ["/review", ...] meaning the review tool will run automatically on every PR, with the default configuration. Edit this field to enable/disable the tool, or to change the used configurations

Auto-labels The review tool can auto-generate two specific types of labels for a PR: a possible security issue label, that detects possible security issues (enable_review_labels_security flag) a Review effort [1-5]: x label, where x is the estimated effort to review the PR (enable_review_labels_effort flag)

Extra sub-tools The review tool provides a collection of possible feedbacks about a PR. It is recommended to review the possible options, and choose the ones relevant for your use case. Some of the feature that are disabled by default are quite useful, and should be considered for enabling. For example: require_score_review, require_soc2_ticket, and more.

Auto-approve PRs By invoking: /review auto_approve The tool will automatically approve the PR, and add a comment with the approval. To ensure safety, the auto-approval feature is disabled by default. To enable auto-approval, you need to actively set in a pre-defined configuration file the following: [pr_reviewer] enable_auto_approval = true (this specific flag cannot be set with a command line argument, only in the configuration file, committed to the repository) You can also enable auto-approval only if the PR meets certain requirements, such as that the estimated_review_effort is equal or below a certain threshold, by adjusting the flag: [pr_reviewer] maximal_review_effort = 5

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the review usage page for a comprehensive guide on using this tool.

[github-actions]

PR Code Suggestions

	Suggestions
maintainability	Extract the Collapsible component into a separate file for better organization and reusability. Extract the Collapsible component into a separate file for better organization and reusability. apps/backoffice-v2/src/common/components/organisms/Header/Header.Navbar.tsx [28-80] -<Collapsible - key={`${navItem.key}-${isActiveFilterGroup}`} - defaultOpen={isActiveFilterGroup} - className={`space-y-2`} -> - <CollapsibleTrigger - className={ctw( - `flex w-full items-center gap-x-2 rounded-lg p-2 text-sm font-semibold text-[#8D93A5] [&[data-state=open]>svg]:rotate-0`, - { - 'bg-white text-[#20232E]': isActiveFilterGroup, - }, - )} - > - <div - className={ctw(`flex items-center gap-x-3 text-left`, { - '[&>svg]:stroke-[#B7BDCD]': !isActiveFilterGroup, - })} - > - {navItem.icon} - {navItem.text} - </div> - <ChevronDown - size={10} - className={`rotate-[-90deg] transition-transform duration-200 ease-in-out`} - /> - <span className="sr-only">Toggle</span> - </CollapsibleTrigger> - <CollapsibleContent> - <ul className={`w-full space-y-4 ps-[1.9rem]`}> - {!!navItem.children?.length && - navItem.children?.map(childNavItem => ( - <NavItem - href={childNavItem.href} - key={childNavItem.key} - className={ctw( - `gap-x-1 px-1.5 text-xs capitalize text-[#8D93A5] active:border`, - { - 'font-semibold text-[#20232E]': childNavItem.filterId === filterId, - 'aria-[current=page]:font-normal': childNavItem.filterId !== filterId, - }, - )} - > - <span>{childNavItem.icon}</span> - {childNavItem.text} - </NavItem> - ))} - {!navItem.children?.length && ( - <li className={`pe-1.5 ps-2.5 text-xs text-[#8D93A5]`}>No items found</li> - )} - </ul> - </CollapsibleContent> -</Collapsible> +<CollapsibleNavItem + navItem={navItem} + isActiveFilterGroup={isActiveFilterGroup} + filterId={filterId} +/> Remove the unused import statement for the result function from the lodash library. Remove the unused import statement for the result function from the lodash library. services/workflows-service/src/collection-flow/controllers/collection-flow.controller.ts [15] -import { result } from 'lodash'; +// import { result } from 'lodash'; Remove duplicate code for image URL                                           Remove duplicate code for image URL services/workflows-service/scripts/seed.ts [119] const customer1 = await createCustomer( client, '1', env.API_KEY, - 'https://blrn-cdn-prod.s3.eu-central-1.amazonaws.com/images/ballerine_logo.svg', '', `webhook-shared-secret-${env.API_KEY}`, ); Remove unnecessary comment                                                    Remove unnecessary comment apps/kyb-app/src/components/organisms/UIRenderer/elements/Task/Task.tsx [26] -// @ts-ignore ({ children }) => <>{children}</> Remove unused import                                                          Remove unused import apps/backoffice-v2/src/Router/types.ts [1] -import { ReactNode } from 'react'; + Remove unused import                                                          Remove unused import apps/backoffice-v2/src/Router/Router.tsx [17] -import { Locale } from '@/pages/Locale/Locale.page'; +
type annotation	Add type annotations to the context parameter in the traverseUiSchema method. Add type annotations to the context parameter in the traverseUiSchema method. services/workflows-service/src/collection-flow/collection-flow.service.ts [50] traverseUiSchema( uiSchema[key], - context, + context as WorkflowRuntimeData['context'], language, ) Add type annotations to the language parameter in the traverseUiSchema method. Add type annotations to the language parameter in the traverseUiSchema method. services/workflows-service/src/collection-flow/collection-flow.service.ts [50] traverseUiSchema( uiSchema[key], context, - language, + language as string, )
performance	Remove the unnecessary filter on the states object in the useCases hook. Remove the unnecessary filter on the states object in the useCases hook. apps/backoffice-v2/src/pages/Entities/components/Cases/hooks/useCases/useCases.tsx [55-57] -Object.keys(states || {}) - .filter(key => states?.[key]?.tags?.length) - .flatMap(key => states?.[key]?.tags) +Object.values(states || {}) + .flatMap(state => state.tags)
best practice	Remove unnecessary spread operator in div element                             Remove unnecessary spread operator in div element apps/backoffice-v2/src/pages/Entities/components/Cases/Cases.tsx [52-56] <div id={`cases-list`} className="flex min-h-0 min-w-[300px] flex-col justify-between pb-4" - {...props} > Add a comment to explain the purpose of the container_name property for the backoffice service. Add a meaningful comment explaining the purpose of the container_name property. deploy/docker-compose-build.yml [4-5] -4 + container_name: backoffice +4 + # Set a custom container name for the backoffice service +5 + container_name: backoffice Use environment variables for the CORS origins to make them configurable.     Use environment variables for the CORS origins instead of hardcoding them. deploy/docker-compose-build.yml [54-61] 54 + BACKOFFICE_CORS_ORIGIN: http://${DOMAIN_NAME:-localhost}:${BACKOFFICE_PORT} 55 + WORKFLOW_DASHBOARD_CORS_ORIGIN: http://${DOMAIN_NAME:-localhost}:${WORKFLOW_DASHBOARD_PORT} 56 PORT: ${WORKFLOW_SVC_PORT} 57 + KYB_EXAMPLE_CORS_ORIGIN: http://${DOMAIN_NAME:-localhost}:${KYB_APP_PORT} +58 + # Use environment variables for CORS origins +59 + BACKOFFICE_CORS_ORIGIN: http://${DOMAIN_NAME:-localhost}:${BACKOFFICE_PORT} +60 + WORKFLOW_DASHBOARD_CORS_ORIGIN: http://${DOMAIN_NAME:-localhost}:${WORKFLOW_DASHBOARD_PORT} +61 + KYB_EXAMPLE_CORS_ORIGIN: http://${DOMAIN_NAME:-localhost}:${KYB_APP_PORT} Add a comment to explain the purpose of the DB_URL environment variable. Add a comment to explain the purpose of the DB_URL environment variable. deploy/docker-compose-build.yml [46-47] -46 + DB_URL: postgres://${DB_USER}:${DB_PASSWORD}@postgres:${DB_PORT} +46 + # Set the URL for the PostgreSQL database +47 + DB_URL: postgres://${DB_USER}:${DB_PASSWORD}@postgres:${DB_PORT} Add a comment to explain the purpose of the ENVIRONMENT_NAME environment variable. Add a comment to explain the purpose of the ENVIRONMENT_NAME environment variable. deploy/docker-compose-build.yml [65-66] -65 + ENVIRONMENT_NAME: 'development' +65 + # Set the name of the environment +66 + ENVIRONMENT_NAME: 'development' Add a comment to explain the purpose of the WEBHOOK_SECRET environment variable. Add a comment to explain the purpose of the WEBHOOK_SECRET environment variable. deploy/docker-compose-build.yml [58-59] -58 + WEBHOOK_SECRET: webhook_secret +58 + # Set the secret for the webhook +59 + WEBHOOK_SECRET: webhook_secret
enhancement	Add a description for the "copyOfBusinessLicense" field.                      Add a description for the "copyOfBusinessLicense" field. services/workflows-service/src/providers/translation/locales/cn/translation.json [83-85] "copyOfBusinessLicense": { - "label": "营业执照副本" + "label": "营业执照副本", + "description": "..." }, Add a description for the "memorandumOfArticle" field.                        Add a description for the "memorandumOfArticle" field. services/workflows-service/src/providers/translation/locales/cn/translation.json [86-88] "memorandumOfArticle": { - "label": "公司章程备忘录（M&A）" + "label": "公司章程备忘录（M&A）", + "description": "..." }, Add a description for the "businessOwnershipStructureChart" field.            Add a description for the "businessOwnershipStructureChart" field. services/workflows-service/src/providers/translation/locales/cn/translation.json [89-91] "businessOwnershipStructureChart": { - "label": "企业所有权结构图" + "label": "企业所有权结构图", + "description": "..." }, Add a description for the "tenancyAgreement" field.                           Add a description for the "tenancyAgreement" field. services/workflows-service/src/providers/translation/locales/cn/translation.json [92-94] "tenancyAgreement": { - "label": "租赁协议" + "label": "租赁协议", + "description": "..." },

---

✨ Usage guide:

---

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.
When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the improve tool is: pr_commands = ["/improve --pr_code_suggestions.summarize=true", ...] meaning the improve tool will run automatically on every PR, with summarization enabled. Delete this line to disable the tool from running automatically.

Utilizing extra instructions Extra instructions are very important for the improve tool, since they enable to guide the model to suggestions that are more relevant to the specific needs of the project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify relevant aspects that you want the model to focus on. Examples for extra instructions: [pr_code_suggestions] # /improve # extra_instructions=""" Emphasize the following aspects: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

A note on code suggestions quality While the current AI for code is getting better and better (GPT-4), it's not flawless. Not all the suggestions will be perfect, and a user should not accept all of them automatically. Suggestions are not meant to be simplistic. Instead, they aim to give deep feedback and raise questions, ideas and thoughts to the user, who can then use his judgment, experience, and understanding of the code base. Recommended to use the 'extra_instructions' field to guide the model to suggestions that are more relevant to the specific needs of the project, or use the custom suggestions 💎 tool With large PRs, best quality will be obtained by using 'improve --extended' mode.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the improve usage page for a more comprehensive guide on using this tool.