Feature/boundary ss #1490
Feature/boundary ss #1490
Conversation
📝 Walkthrough📝 WalkthroughWalkthroughThe pull request introduces several changes across multiple files, primarily focusing on updating CSS stylesheet versions, enhancing the styling and functionality of React components related to boundary management, and adding new components for managing boundary data. Key updates include the addition of new components like Changes
Possibly related PRs
Suggested reviewers
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 62
🧹 Outside diff range comments (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (2)
Line range hint
37-37: Consider removing or uncommenting commented-out code.There are commented-out lines related to
SelectingBoundaryComponent. If this component is no longer needed, consider removing these lines. If it's still required, please uncomment and ensure it's properly integrated.Also applies to: 145-145
Line range hint
1-205: Consider refactoring for improved modularity.This file contains multiple responsibilities, including component definition, hook overrides, and component registration. Consider splitting it into smaller, more focused modules to improve maintainability and readability. For example:
- A file for the CampaignModule component
- A file for component registration
- A file for hook and library overrides
This separation of concerns could make the codebase easier to navigate and maintain.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
⛔ Files ignored due to path filters (2)
health/micro-ui/web/micro-ui-internals/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/packages/css/package.jsonis excluded by!**/*.json
📒 Files selected for processing (15)
- health/micro-ui/web/micro-ui-internals/example/public/index.html (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (2 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js (2 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/XlsPreviewNew.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/ShapeFileIcon.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/UICustomizations.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/boundarySearchConfig.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/GeoPode.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewBoundary.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (2 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/downloadTemplate.js (1 hunks)
- health/micro-ui/web/public/index.html (1 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/XlsPreviewNew.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/ShapeFileIcon.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/UICustomizations.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/boundarySearchConfig.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/GeoPode.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewBoundary.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/downloadTemplate.js (1)
Pattern
**/*.js: check
🪛 Biome
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/XlsPreviewNew.js
[error] 9-9: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/ShapeFileIcon.js
[error] 4-4: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/UICustomizations.js
[error] 78-78: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.The declaration is defined in this switch clause:
Unsafe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
[error] 71-71: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 75-75: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 81-81: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js
[error] 161-161: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 122-122: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/GeoPode.js
[error] 410-410: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 432-432: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 438-438: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 470-470: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 477-477: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 514-514: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 520-520: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 642-642: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 646-646: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 665-665: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 671-671: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 42-42: This let declares a variable that is only assigned once.
'receivedData' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 288-288: This let declares a variable that is only assigned once.
'file' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 289-289: This let declares a variable that is only assigned once.
'fileDataTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 295-295: This let declares a variable that is only assigned once.
'fileStoreId' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 353-353: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 366-374: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 375-386: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js
[error] 207-207: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
[error] 209-209: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
[error] 245-245: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 263-263: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 284-284: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 303-303: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 404-404: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 123-123: This let declares a variable that is only assigned once.
'file' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 124-124: This let declares a variable that is only assigned once.
'fileDataTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 130-130: This let declares a variable that is only assigned once.
'fileStoreIdTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 370-379: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 380-389: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 408-417: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 418-426: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/downloadTemplate.js
[error] 51-51: This let declares a variable that is only assigned once.
'child' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 58-58: This let declares a variable that is only assigned once.
'allDatas' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 168-168: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
[error] 303-303: This let declares a variable that is only assigned once.
'messages' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 313-313: This let declares a variable that is only assigned once.
'hierarchy' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 327-327: This let declares a variable that is only assigned once.
'localisedArray' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 333-333: This let declares a variable that is only assigned once.
'localisedData' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 344-344: This let declares a variable that is only assigned once.
'expectedName' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
🔇 Additional comments (19)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewBoundary.js (2)
7-7: LGTM: Proper use of internationalization.The
useTranslationhook is correctly implemented, allowing for easy localization of the component's text content. This is a good practice for creating multilingual applications.
31-31: LGTM: Proper component export.The component is correctly exported as the default export, following common React patterns.
health/micro-ui/web/micro-ui-internals/example/public/index.html (2)
Line range hint
1-38: Improve HTML structure and follow best practices.While the overall structure of the HTML file is correct, there are several areas where it can be improved:
- Remove commented-out code to improve readability and maintainability.
- Consider using local stylesheets instead of CDN links to improve performance and reliability.
- Combine and minify CSS files to reduce the number of HTTP requests.
- Add a meta description tag for better SEO.
- Consider adding a language attribute to the html tag for accessibility.
Here's a suggested refactoring of the
<head>section:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#00bcd1" /> <meta name="description" content="DIGIT - Digital Infrastructure for Governance, Impact & Transformation" /> <link rel="icon" href="https://egov-dev-assets.s3.ap-south-1.amazonaws.com/browser-icon.png" /> <title>DIGIT</title> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/styles/combined.min.css" /> <script src="%REACT_APP_GLOBAL%"></script> </head>To assist in consolidating and optimizing CSS files, run the following script to list all external resources:
#!/bin/bash # Description: List all external resources (CSS and JS) used in the file echo "External CSS resources:" rg --no-filename '<link.*href="(https?://[^"]+\.css)"' health/micro-ui/web/micro-ui-internals/example/public/index.html -or '$1' | sort | uniq echo -e "\nExternal JS resources:" rg --no-filename '<script.*src="(https?://[^"]+\.js)"' health/micro-ui/web/micro-ui-internals/example/public/index.html -or '$1' | sort | uniqReview the output to identify resources that can be combined, minified, or served locally to improve performance.
Line range hint
13-23: Consider consolidating CSS library versions.The file currently includes multiple versions of @egovernments/digit-ui-css (1.8.2-beta.34, 1.8.0-alpha.6, 1.0.77-campaign, 1.0.50-microplan) and @egovernments/digit-ui-components-css (0.0.2-beta.36). This approach may lead to:
- Potential styling conflicts
- Increased page load time
- Difficulty in maintaining consistent styles across the application
Consider the following recommendations:
- Consolidate to a single, stable version of @egovernments/digit-ui-css that includes all required styles.
- If different modules require specific CSS versions, consider using a CSS management system or build tool to merge and minimize conflicts.
- Remove or update commented-out CSS links to reduce confusion.
- Document the reason for using multiple CSS versions if it's absolutely necessary for your use case.
To assist in consolidation, run the following script to identify which HTML elements are using styles from each CSS version:
#!/bin/bash # Description: Identify HTML elements using styles from each CSS version echo "Searching for usage of styles from different CSS versions:" rg --type html -A 5 'class="[^"]*"' health/micro-ui/web/micro-ui-internals/example/public/index.htmlReview the output to determine which styles are essential and which versions can be safely consolidated or removed.
health/micro-ui/web/public/index.html (1)
15-15: LGTM. Verify visual consistency after CSS update.The update of the @egovernments/digit-ui-css package from version 1.0.76-campaign to 1.0.77-campaign looks good. This keeps the project up-to-date with the latest styles.
To ensure this update doesn't introduce any unexpected visual changes, please verify the following:
- Check if there are any breaking changes or significant updates in the changelog for this version.
- Test the application thoroughly, especially pages that heavily rely on custom styling.
- Verify that all components render correctly and maintain their expected appearance.
Run the following script to check for any potential visual regressions:
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/icons/ShapeFileIcon.js (2)
1-3: LGTM: Import and component declaration are correct.The React import and the component declaration as a named export using arrow function syntax are implemented correctly.
49-49: LGTM: Text element is well-positioned and styledThe text element displaying ".SHP" is correctly implemented, with appropriate positioning and styling that matches the overall design of the icon.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/XlsPreviewNew.js (1)
69-69: LGTM! Well-structured component with room for minor improvements.The
XlsPreviewNewcomponent is well-structured and correctly exported as the default export. It provides a good foundation for previewing Excel files.To further improve the component:
- Consider implementing error handling for cases where the file might not load correctly.
- Add PropTypes or TypeScript types for better type checking and documentation.
- If this component is part of a larger form or workflow, consider adding some context or comments explaining its role in the broader application.
Overall, good job on creating this preview component!
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/boundarySearchConfig.js (2)
31-65:⚠️ Potential issueClarify and complete search form configuration
The search form configuration appears to be incomplete or in progress:
Only one search field ("Hierarchy Name") is currently defined. Is this intentional, or are additional search fields planned?
There are commented-out code blocks for a "Type of Campaign" field. Please clarify if this field should be included or removed entirely.
The
minReqFieldsis set to 0, allowing empty searches. Consider if this is the intended behavior or if at least one search parameter should be required.The
isMandatoryfield for "Hierarchy Name" is set to "false" (as a string). This should be a boolean value:isMandatory: false,
- The
populatorsobject for the "Hierarchy Name" field includes anoptionsKey, but nooptionsarray. If this is meant to be a dropdown, please provide the options or clarify how they will be populated.Could you please clarify the intended search functionality and complete the configuration accordingly?
66-97:⚠️ Potential issueRefine search results configuration
The search results configuration has a few areas that need attention:
The
jsonpathfor the "Levels" column currently points toauditDetails.createdBy. This doesn't seem correct for displaying the number of levels in a hierarchy. Please provide the correct path for this information.The
Actioncolumn usesjsonPath(camelCase) instead ofjsonpath(lowercase) like the other columns. Ensure consistent naming across all columns:{ label: "Action", jsonpath: "isActive", additionalCustomization: true }
All columns have
additionalCustomizationset to true. Please clarify what this property does and if it's necessary for all columns.The
Creation Datecolumn usesauditDetails.createdTime. Ensure that this value is properly formatted for display in the UI.Consider adding a formatter function for the
isActivefield in the "Action" column to display a more user-friendly value (e.g., "Active" or "Inactive" instead of true/false).Could you please address these points and provide any necessary clarifications?
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (2)
14-17: LGTM: New component imports added correctly.The new import statements for Boundary, GeoPode, ViewBoundary, and ViewHierarchy components are correctly formatted and consistent with the existing code style.
14-17: Verify the implementation of new components.The new routes and imports for Boundary, GeoPode, ViewBoundary, and ViewHierarchy components have been added correctly. To ensure completeness of the review:
Please run the following script to check the implementation of these new components:
This script will help verify that the new component files exist and have a basic React component structure.
Also applies to: 122-125
✅ Verification successful
Implementation of new components verified.
The new components
Boundary,GeoPode,ViewBoundary, andViewHierarchyare correctly exported as default exports in their respective files. All necessary component files are present and properly implemented.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of new components # Test: Check if the new component files exist echo "Checking for new component files:" fd -e js -p "Boundary.js|GeoPode.js|ViewBoundary.js|ViewHierarchy.js" health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ # Test: Check the basic structure of new components echo "\nChecking basic structure of new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js:" ast-grep --lang javascript --pattern $'export default function $_($$_) { $$$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js doneLength of output: 2036
Script:
#!/bin/bash # Description: Verify the implementation of new components with alternative export patterns # Test: Check if the new component files exist echo "Re-checking for new component files:" fd -e js -p "Boundary.js|GeoPode.js|ViewBoundary.js|ViewHierarchy.js" health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ # Test: Check for arrow function exports echo "\nChecking for arrow function exports in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Arrow Function Export):" ast-grep --lang javascript --pattern $'export const $_ = ($$_) => { $$$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js done # Test: Check for class-based exports echo "\nChecking for class-based exports in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Class-Based Export):" ast-grep --lang javascript --pattern $'export default class $_ extends React.Component { $$$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js doneLength of output: 3777
Script:
#!/bin/bash # Description: Verify the implementation of new components with additional export patterns # Test: Check for named function exports echo "Checking for named function exports in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Named Function Export):" ast-grep --lang javascript --pattern $'export function $_($$_) { $$$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js done # Test: Check for default exports without function or class declarations echo "\nChecking for default exports with variable declarations in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Default Export with Variable Declaration):" ast-grep --lang javascript --pattern $'const $_ = ($$_) => { $$$ } export default $_;' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js done # Test: Check for multiple exports in the component files echo "\nChecking for multiple exports in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Multiple Exports):" ast-grep --lang javascript --pattern $'export {$$$}' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js doneLength of output: 6388
Script:
#!/bin/bash # Description: Verify the implementation of new components with corrected and additional export patterns # Test: Check for named function exports echo "Checking for named function exports in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Named Function Export):" ast-grep --lang javascript --pattern 'export function $_($_) { $$$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js done # Test: Check for named arrow function exports echo "\nChecking for named arrow function exports in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Named Arrow Function Export):" ast-grep --lang javascript --pattern 'export const $_ = ($_ ) => { $$$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js done # Test: Check for default exports with variable declarations (separated) echo "\nChecking for default exports with variable declarations in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Variable Declaration):" ast-grep --lang javascript --pattern 'const $_ = ($_ ) => { $$$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js echo "\n$file.js (Default Export of Variable):" ast-grep --lang javascript --pattern 'export default $_;' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js done # Test: Check for multiple exports in the component files echo "\nChecking for multiple exports in new components:" for file in Boundary GeoPode ViewBoundary ViewHierarchy; do echo "\n$file.js (Multiple Exports):" ast-grep --lang javascript --pattern 'export { $$ }' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/${file}.js doneLength of output: 9849
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (2)
50-53: LGTM: New component imports added correctly.The new imports for Boundary, GeoPode, ViewBoundary, and ViewHierarchy components are correctly added and follow the existing import pattern and naming conventions.
140-143: LGTM: New components correctly registered.The Boundary, GeoPode, ViewBoundary, and ViewHierarchy components are correctly added to the componentsToRegister object, following the existing pattern.
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (3)
963-966: LGTM: Appropriate spacing for dustbin iconThe
.dustbin-iconclass adds suitable vertical margins to the icon, providing good spacing and visual separation. The slightly larger bottom margin (1rem) compared to the top margin (0.7rem) may help with visual balance, especially if there's more content below the icon.
972-973: LGTM with a suggestion for layout verificationSetting
width: 100%for all directdivchildren of.digit-action-bar-wrapensures they take up the full width of their container. This can provide a consistent layout for action bar items.However, it's important to verify that this change doesn't unintentionally affect the layout of action bar items. Please run the following script to check the usage of
.digit-action-bar-wrap:#!/bin/bash # Check for usage of .digit-action-bar-wrap in JavaScript files rg -t js '\.digit-action-bar-wrap' # Check for usage of .digit-action-bar-wrap in JSX files rg -t jsx '\.digit-action-bar-wrap'Review the results to ensure that the layout of action bar items still appears as intended across different components and screen sizes.
968-970: LGTM with a suggestion for accessibility verificationThe use of
display: contentsfor.custom-action-bar .digit-action-bar-fieldscan provide more flexible layouts while preserving the HTML structure. This is generally a good approach for custom styling.However, it's important to verify that this doesn't negatively impact accessibility, especially for screen readers. Please run the following script to check for potential accessibility issues:
This script will search for ARIA attributes and roles in your JavaScript files, which might be affected by the
display: contentsproperty. Review the results to ensure that important accessibility information is not being hidden or misrepresented due to this CSS change.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js (1)
30-30: Verify the necessity of theisLoadingvariableThe
isLoadingvariable is destructured from the hook but not used in the component. If it's unnecessary, consider removing it.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/downloadTemplate.js (1)
324-324: 🧹 Nitpick (assertive)Correct pluralization in console log message
In the console log, "all datas" should be "all data" as "data" is already plural.
Apply this diff:
- console.log("all datas", allDatas); + console.log("all data", allDatas);Likely invalid or redundant comment.
| return ( | ||
| <div> | ||
| <Header styles={{ fontSize: "32px", marginBottom:"2rem", marginTop:"2rem"}}>{t("CURRENT_HIERARCHIES")}</Header> | ||
| <div className="inbox-search-wrapper"> | ||
| {/* Pass defaultValues as props to InboxSearchComposer */} | ||
| <InboxSearchComposer configs={boundarySearchConfig?.[0]} | ||
| // defaultValues={defaultValues} | ||
| additionalConfig={{ | ||
| resultsTable: { | ||
| // onClickRow, | ||
| }, | ||
| }} | ||
| > | ||
| </InboxSearchComposer> | ||
| </div> | ||
| </div> | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve component structure and remove unused code.
The component's structure is generally good, but consider the following improvements:
- Move inline styles to a separate CSS file for better maintainability.
- Remove commented out code (
defaultValuesprop andonClickRowfunction) if they are not needed. - Simplify the
additionalConfigprop ifonClickRowis not used.
Here's a suggested refactor:
- return (
- <div>
- <Header styles={{ fontSize: "32px", marginBottom:"2rem", marginTop:"2rem"}}>{t("CURRENT_HIERARCHIES")}</Header>
- <div className="inbox-search-wrapper">
- {/* Pass defaultValues as props to InboxSearchComposer */}
- <InboxSearchComposer configs={boundarySearchConfig?.[0]}
- // defaultValues={defaultValues}
- additionalConfig={{
- resultsTable: {
- // onClickRow,
- },
- }}
- >
- </InboxSearchComposer>
- </div>
- </div>
- )
+ return (
+ <div>
+ <Header className="view-boundary-header">{t("CURRENT_HIERARCHIES")}</Header>
+ <div className="inbox-search-wrapper">
+ <InboxSearchComposer configs={boundarySearchConfig?.[0]} />
+ </div>
+ </div>
+ )Don't forget to add the corresponding CSS:
.view-boundary-header {
font-size: 32px;
margin-bottom: 2rem;
margin-top: 2rem;
}| import React, { useEffect, useState , useRef} from "react"; | ||
| import { Header, InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | ||
| import { boundarySearchConfig } from "../../configs/boundarySearchConfig"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| const ViewBoundary = () => { |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove unused imports to improve code cleanliness.
The following hooks are imported but not used in the component:
useStateuseEffectuseRef
Consider removing these unused imports to keep the code clean and potentially improve performance.
Apply this diff to remove unused imports:
-import React, { useEffect, useState , useRef} from "react";
+import React from "react";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import React, { useEffect, useState , useRef} from "react"; | |
| import { Header, InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | |
| import { boundarySearchConfig } from "../../configs/boundarySearchConfig"; | |
| import { useTranslation } from "react-i18next"; | |
| const ViewBoundary = () => { | |
| import React from "react"; | |
| import { Header, InboxSearchComposer } from "@egovernments/digit-ui-react-components"; | |
| import { boundarySearchConfig } from "../../configs/boundarySearchConfig"; | |
| import { useTranslation } from "react-i18next"; | |
| const ViewBoundary = () => { |
| @@ -18,7 +18,7 @@ | |||
| <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> | |||
|
|
|||
| <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> | |||
| <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].76-campaign/dist/index.css" /> | |||
| <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].77-campaign/dist/index.css" /> | |||
There was a problem hiding this comment.
💡 Codebase verification
Multiple CSS library versions detected.
Multiple versions of @egovernments/digit-ui-css are linked in the HTML file, which can lead to styling conflicts and inconsistent behaviors. Please consolidate to a single, stable version to ensure consistent styling and improve maintainability.
🔗 Analysis chain
Approved: CSS library version update.
The update from version 1.0.76-campaign to 1.0.77-campaign of @egovernments/digit-ui-css is a minor version change, which typically indicates bug fixes or small improvements. This change is acceptable.
However, please ensure that this update is compatible with the other versions of the CSS library used in this file. Run the following script to list all versions of @egovernments/digit-ui-css being used:
Review the output to confirm that using multiple versions is intentional and doesn't cause any styling conflicts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: List all versions of @egovernments/digit-ui-css used in the file
echo "Versions of @egovernments/digit-ui-css found in the file:"
rg --no-filename '@egovernments/digit-ui-css@\d+\.\d+\.\d+' health/micro-ui/web/micro-ui-internals/example/public/index.html | sort | uniq
Length of output: 989
| <rect | ||
| x="5" | ||
| y="5" | ||
| width="86" | ||
| height="110" | ||
| rx="10" | ||
| ry="10" | ||
| fill="url(#gradient)" // Gradient fill | ||
| stroke="#DAA520" // Golden outline | ||
| strokeWidth="2" | ||
| /> | ||
|
|
||
| {/* File fold at the top-right corner */} | ||
| <path | ||
| d="M64 0V24H88" | ||
| fill="url(#foldGradient)" | ||
| stroke="#DAA520" | ||
| strokeWidth="1" | ||
| /> | ||
|
|
||
| {/* Shadow under the fold */} | ||
| <path | ||
| d="M64 24L88 24" | ||
| stroke="#FFD700" | ||
| strokeOpacity="0.5" | ||
| strokeWidth="1.5" | ||
| /> | ||
|
|
||
| {/* Add subtle shadow for depth */} | ||
| <rect | ||
| x="5" | ||
| y="5" | ||
| width="86" | ||
| height="110" | ||
| rx="10" | ||
| ry="10" | ||
| fill="none" | ||
| stroke="rgba(0,0,0,0.2)" // Shadow | ||
| strokeWidth="4" | ||
| strokeLinecap="round" | ||
| /> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
LGTM: SVG shapes and styling are well-implemented
The SVG shapes and their styling are correctly defined, creating a visually appealing icon with depth and gradient effects. The code is also well-commented, which aids in understanding the purpose of each shape.
For consistency, consider using hex color codes throughout instead of mixing with color names. For example, replace #FFD700 with #DAA520 (golden color) where appropriate.
| <defs> | ||
| <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> | ||
| <stop offset="0%" style={{ stopColor: "#FFD700", stopOpacity: 1 }} /> | ||
| <stop offset="100%" style={{ stopColor: "#FFEA00", stopOpacity: 1 }} /> | ||
| </linearGradient> | ||
|
|
||
| {/* Gradient for the folded corner */} | ||
| <linearGradient id="foldGradient" x1="0%" y1="0%" x2="100%" y2="100%"> | ||
| <stop offset="0%" style={{ stopColor: "#FFDE5A", stopOpacity: 1 }} /> | ||
| <stop offset="100%" style={{ stopColor: "#FFD700", stopOpacity: 0.8 }} /> | ||
| </linearGradient> | ||
| </defs> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
LGTM: Gradient definitions are correct and enhance the design
The linear gradients for the main file icon and the folded corner are well-defined, adding depth and visual appeal to the icon.
For improved maintainability, consider extracting the color values into constants at the top of the file. This would make it easier to update the color scheme in the future. For example:
const GOLDEN_COLOR = "#DAA520";
const LIGHT_GOLDEN_COLOR = "#FFD700";
const PALE_GOLDEN_COLOR = "#FFEA00";
// Then use these constants in your gradient definitions| let file = files[0]; | ||
| let fileDataTemp = {}; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Use 'const' instead of 'let' for variables not reassigned
Variables file and fileDataTemp are not reassigned after their initial assignment. Using const instead of let communicates that these variables are constants.
Apply this diff:
-let file = files[0];
-let fileDataTemp = {};
+const file = files[0];
+const fileDataTemp = {};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| let file = files[0]; | |
| let fileDataTemp = {}; | |
| const file = files[0]; | |
| const fileDataTemp = {}; |
🧰 Tools
🪛 Biome
[error] 288-288: This let declares a variable that is only assigned once.
'file' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 289-289: This let declares a variable that is only assigned once.
'fileDataTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
| const response = await Digit.UploadServices.Filestorage(module, file, tenantId); | ||
| // console.log("respose from file storage is", response); | ||
| fileDataTemp.fileStoreId = response?.data?.[0]?.fileStoreId; | ||
| let fileStoreId = response?.data?.files?.[0]?.fileStoreId; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Use 'const' for 'fileStoreId'
The variable fileStoreId is not reassigned after its initial assignment. It's better to declare it using const.
Apply this diff:
-let fileStoreId = response?.data?.files?.[0]?.fileStoreId;
+const fileStoreId = response?.data?.files?.[0]?.fileStoreId;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| let fileStoreId = response?.data?.files?.[0]?.fileStoreId; | |
| const fileStoreId = response?.data?.files?.[0]?.fileStoreId; |
🧰 Tools
🪛 Biome
[error] 295-295: This let declares a variable that is only assigned once.
'fileStoreId' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
| const goBackToBoundary = ()=> { | ||
| window.history.pushState( | ||
| { | ||
| data:data |
There was a problem hiding this comment.
'data' is undefined in 'goBackToBoundary' function
The variable data used in window.history.pushState is not defined within the scope of the goBackToBoundary function. This will result in a ReferenceError when the function is called.
To fix this issue, define data before using it or remove it if it's not necessary:
window.history.pushState(
{
- data:data
+ // data: data
},
"",
`/${window.contextPath}/employee/campaign/boundary-management?defaultHierarchyType=${defaultHierarchyType}&hierarchyType=${hierarchyType}`
);Committable suggestion was skipped due to low confidence.
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | ||
| <DustbinIcon /> | ||
| </div> |
There was a problem hiding this comment.
Replace 'div' with 'button' for accessibility
The div element with an onClick handler should be replaced with a button element to ensure keyboard accessibility. This allows users who navigate via keyboard to interact with the element.
Apply this diff to enhance accessibility:
-<div className="dustbin-icon" onClick={() => removeLevel(index)}>
+<button className="dustbin-icon" onClick={() => removeLevel(index)} type="button">
<DustbinIcon />
-</div>
+</button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | |
| <DustbinIcon /> | |
| </div> | |
| <button className="dustbin-icon" onClick={() => removeLevel(index)} type="button"> | |
| <DustbinIcon /> | |
| </button> |
🧰 Tools
🪛 Biome
[error] 432-432: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
| className={"custom-popup"} | ||
| type={"default"} | ||
| heading={t("ADD_BOUNDARY_HIERARCHY_LEVEL")} | ||
| children={[ |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Avoid passing 'children' as a prop
Passing children directly as a prop is not recommended in React. Instead, include child elements between the opening and closing tags of the component.
Update the PopUp component usage:
<PopUp
className={"custom-popup"}
type={"default"}
heading={t("ADD_BOUNDARY_HIERARCHY_LEVEL")}
- children={[
- ]}
onClose={()=>{
setShowPopUp(false);
}}
onOverlayClick={()=>{
setShowPopUp(false);
}}
style={{
width: "50rem"
}}
footerChildren={[
// Footer buttons
]}
sortFooterChildren={true}
>
{/* Include any child components or elements here */}
</PopUp>Committable suggestion was skipped due to low confidence.
🧰 Tools
🪛 Biome
[error] 353-353: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
There was a problem hiding this comment.
Actionable comments posted: 22
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
📒 Files selected for processing (4)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/GeoPode.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js (1 hunks)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/Svgicon.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/GeoPode.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js (1)
Pattern
**/*.js: checkhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/Svgicon.js (1)
Pattern
**/*.js: check
🪛 Biome
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js
[error] 158-158: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 117-117: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/GeoPode.js
[error] 158-158: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 165-165: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 205-205: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 211-211: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 320-320: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 324-324: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 342-342: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 348-348: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 24-24: This let declares a variable that is only assigned once.
'receivedData' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 161-161: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 191-191: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 236-236: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 249-257: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 258-268: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 279-287: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 288-297: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 328-328: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 372-372: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js
[error] 135-135: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
[error] 137-137: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
[error] 171-171: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 183-183: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 210-210: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 230-230: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 315-315: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 93-93: This let declares a variable that is only assigned once.
'file' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 94-94: This let declares a variable that is only assigned once.
'fileDataTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 99-99: This let declares a variable that is only assigned once.
'fileStoreIdTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 281-290: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 291-300: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 319-328: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
[error] 329-338: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/Svgicon.js
[error] 5-5: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
🔇 Additional comments (6)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/utils/Svgicon.js (1)
1-3: LGTM: Import and component declaration look good.The import statement and component declaration follow React best practices. Using a named export for the
Svgiconcomponent is appropriate.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Boundary.js (3)
102-107: Verify the correct usage of loading indicatorsYou are using
isFetchingto determine the loading state:if (isFetching) { return <Loader />; }Ensure that
isFetchingis the appropriate flag from your custom hook to indicate loading. IfisLoadingmore accurately represents the loading state, consider using it instead.
113-154: Avoid passing 'children' prop directlyPassing
childrenas a prop to a component is unnecessary and not a standard practice in React. Instead, you should pass children as nested JSX elements within the component. In your<PopUp>component, you can remove thechildrenprop and nest the content directly:🧰 Tools
🪛 Biome
[error] 117-117: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
158-158: Use self-closing tags for empty JSX elementsThe
<div>element on line 158 is empty. In JSX, it's cleaner to use a self-closing tag for elements without children:🧰 Tools
🪛 Biome
[error] 158-158: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js (1)
322-324: Review theisDisabledlogic on the Back buttonThe Back button's
isDisabledprop is set todisable, which may unintentionally disable the button when it should be enabled. Verify if the button should be disabled based on the application's state, and adjust the logic accordingly to ensure proper navigation.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/GeoPode.js (1)
97-107:⚠️ Potential issue
datais undefined ingoBackToBoundaryfunctionThe variable
dataused inwindow.history.pushStateis not defined within the scope of thegoBackToBoundaryfunction. This will result in aReferenceErrorwhen the function is called.To fix this issue, define
databefore using it or remove it if it's not necessary:window.history.pushState( { - data: data + // data: data (Remove or define 'data' variable) }, "", `/${window.contextPath}/employee/campaign/boundary-management?defaultHierarchyType=${defaultHierarchyType}&hierarchyType=${hierarchyType}` );Likely invalid or redundant comment.
| export const Svgicon = () => ( | ||
|
|
||
| <svg width="69" height="72" viewBox="0 0 69 72" fill="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> | ||
| <rect width="69" height="72" fill="url(#pattern0_12654_28443)" /> | ||
| <defs> | ||
| <pattern id="pattern0_12654_28443" patternContentUnits="objectBoundingBox" width="1" height="1"> | ||
| <use href="#image0_12654_28443" transform="matrix(0.00771642 0 0 0.00699301 -0.0015674 0)" /> | ||
| </pattern> | ||
| <image id="image0_12654_28443" width="130" height="143" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACPCAYAAAA2nQMjAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAArUSURBVHgB7Z1dbBTXFcfP7CxrQ/xVbEpjF3AgMSRKHAdhAyIKOApSm2Ds5qmRqCD0LQoNfknT5gF4aJU3J7hN3hqj5KFSJb5atX2gQCgoCbYIBZUPpwUTgsHEJjaYYBvPTu4561n2e2ft3Z0Z+/+Tlp3xzo6Hub8599xzx7saZYHO9pZ1PtNoDhLVkakeRGUEEuPTdtZvO7iLXIZGU4AFINPYoRp/HQH7uFCGSYvQ2b5hBwW1nbysB+bQD2rWUOmiZ2h2+UJZB/Hc6j5OV4/9SZY10raseOPgHnIJkxKha3fTh6ZJW3i54sn19KPlzWh8m9w4dYD61EMI6o31rfuPkgvIWITO3RvbyDS3c8NXr3+dih5eRiAzImQYNINGY0Pr30+Tw/gy2fjk7qYtlgRLNrwJCSYJR9C5qitVlPl8+r4v2lqqyWFsi/ApH6xJO3h5vvqPzJ67kMDkWfDcL+VCMomqDZ9xxGkZbIswSzd2qH6kmpPCeSovAFOHu1ZOrlmGcd84RwbHht22ROADNE2thZc5rIHsYOVZgaIKtabVjevGPnIIWyLc1w0lgVnGoSx00CBb8PnkfEvOq6rH8IiMHMCWCGqjtfxcouoEIPtYMnCE4GF5Z/vGHZRnbImgugUuG6vkZimB3CAyvPRmaCVo7sy3DDaTRVNE4MQG5A4+vwue2xpaUTJ0vbdxM+WJtCJYmSwqh/lhbs2zMjxnTDI7OtvUfE4eSCvCyMRMIkTIHzwys2Qgn7HvZNuLdZRjMqosgvzBMlSE6jV5qT5CBBdTteoVNaO7PC/VR4jgchas3RquPk7IkJPqI0RwOTLB91Ko4DRRij5COQAieABrttcqReei+ggRPEKuq48QwUNY1UcZyme5+ggRPAYnjpWrfh5aUTJ8trtpO2UBiOBBuPpYqYaWjG5SWzZK0RDBo/DNQRGl6HenWn2ECB4msvqo+fQpFZwggsfh6qN1I+xUqo8QYRrA+cJUq48QYRqQqPqYqQwQYZoQW300dKMtk/dDhGlEXPVxd5NtGSDCNCOq+mjS9q72phY774MI0xBOHEuqQ3eca6a9z6qACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACEDQjn3wWMovi9JMf5lmBur4c/vwlcDe4d7AV2SMfUemNnLa1IKDqbY19ECrn7+qPtVGJo2rnY1T8P53dP9GPwEPocm/dfwBzanwG6Nl6BqAABGAABGAABGAABGAABGAABGA4KcZykPlj9OSZ98Or4+P3aZz/3iNZiozVgR/QQmVVjaE10fuXKOZDLoGIEAEIEAEIEAEIEAEIEwrEXgk4OZ95uL4soWnh4+llStpUf02VRNYFnWS7w6cp+H+83Sl8w80eudrygTeT1XtZvrh0pepsLgq/POh3pPUd2Ev9V3cm/B9sXWJoWuf05WudjlG3h8PVa1jHB+9TQM9hyZ1fLnCkyIUFv+Yap5/J6oOEAk3Cj/mq8bsPdNB/z/xe7IDv+eJn74fJYAF/y55VDVQ9+G34l6PrUvwvSBVY3do8ZrfJtyWj40fXylZrnS2k9N4TgSW4KnmjxI2ViIqa7eQrk58osaLxB8oplq133Thmxvvroo2187sSbldmZKiLImokSxcsU0iRLr95RrPibBwxetREvBJ5BDLoZbh1zgUlz/yQngbbryBS4fC2yQiMmxz+L/bf4H0QAkVVSyj+ctejjmGbbYbzmrkUVW5TLW/vov7ZFun8JwIpVUro9YvqbAf2W9znzvU+7lc3dw/W1Q9vTmlCAznFmcO/CKuQbj8zLmIBUvD3Qhvn639VT61WboJp/DUqIFPWGyXMKgaPRF9F/ZFrReoLiUV3Fj/VZNOia7K3rN74n5eVPE4pSPZ/rjBh2KOOzZK5BtPRQQ+qfyI7MfLVITgbD4WjhLJMvyE+1aJ3WiSiafQ772T8fBvNMVEFndntc0PIhYLzvt3qnvwXB0hNhzXNL4zMYJYSfmkwGaymoxE3Qp3N07huRyBs//QqOFBqLeGYgyP94f7z9HA5X/FhV83wVf+yO1rVFjyQCiOCkPkDJ6LCJxonVUJ2EiSQgyP5avUkJGTxfpNR8KCgNR4ssTMMnR+/LxEh/7Lh5L2q3yFcbexJEFRB0Tj6RJzZELIOQL3seWLX4gr5HBRieVxumgTi7+gOGrdyTrCtJl04nyg92yH6jY2qWjRGNd1sAxugnOc2FGIk7fLeSoicN//UMT4nYeNiRJCPqHdh38jeYJF4RSz/GwTO0/C0SBdgSqXuE4ELvwYY7cThkkess1f+rPwOs8PJBsZcF3Aabi7SnR8HAkWRlQWGR7tOIlrugYOlbXNH1PDpsO0emtXVAnWYuBydImY5xN4XiERi9ScRCSDDpzoJ37yx7hRC0tQm2DSLFFRLJ+4JiJUTszZW/BETL+aKIoMl3x1sQyRE0qL17yt1tdL7SBU/SuWkx/b/9504ETzMfCoha9+rjLysRUUVcUdG4980s2D5BrXiMBhPu5nCUq63Ufeotrij6JyBetegWTwfH8m5eZswQkrRzq++pPlKLzNpRO/I6dxTdfA07CRjEzMIsbCucOpvzRL446kubuHXz/3z9ccm9VLVfhiuLvi2clRF/xxjXbs/cdMcgl81fAtYhzib3bvTTuuDt0VtFJuVSsseVByHv7mvHQpqUrM1lSyRbqsPXYug6e7I4d7/HrkKIX59wc14dc4YlnHOD465KoSuKaZja4SwcukEsHtsAi4nR0IEAEIEAEIEAEIEAEIM/aDMrIN1wJiayFeAiJkCS4cdR/+NXkVdA1AgAhAgAhAgAhA8F+9NHj6/phRl3QDfRY9+shS0gvmUOWqVwh4g1tfHqe7vRfJ9N3ruK8NfpJq23HN3+O/+b9vGo1AgL/FJaEMhQWzSa8upYC/guY9+iIBb3Cv9zqNmDfIFyz9ZPWvOjvSbe9r3U+D+thYo1o+TWDGIjkCZADhZBEyzGyiRg2QYeYSN3yEDDOThHUEyDDzSFpQsmTw6T7I4EGCY/fk2TRo0M72KSuLLMPqp9dyZJBvFQXewRgNtZdJ+tRFYJ5p3a92pA2yCJDBO1htZRJlRwRBM6V74O8bBu6HJbDaqqF1v62u3ZYImqn9h5+HrnxBwP0MX78YWtDoqN332BLBDAb38/O33ScIuJ9vvwy1k0oUbX9EjC0R6lv/dpTt4pBzCzK4mrHhfhrqOSXLs0g/avd9tu9HsOzqO3UASaOL4fZhNI06VKLfY/d9tkVoaP1rB0cFNq73sz8TcB8sAUdsjbQe3dB3ZfLejO5QGjf0V3koeav7eNg84A44f7sx0SbBoLkrk2jAaJQhnW0b1pFP4xtZaN6T62n+8mbSA3MIOAdflJYEFNR21bce3EkZkrEITFdbU4vp0z5UmUNZoKhCZJhbs4ZAfhm+fkFJcFCehUlKwExKBObTtpZq3Rc8opFZzescFYoeXkaF5QsoUFxOIDcYo/doZOCqqumcCiftnBOoIf6rMrqbJJMWweJkW9MWzae9oaJDHYE8ow2qhOA9P/nfDU0FTGFPlCUkQpCxTklRrWnaIgK5wTSGzKDWoxZOTyUCxPI9S6knPN2AEnUAAAAASUVORK5CYII=" /> | ||
| </defs> | ||
| </svg> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider improving component reusability and performance.
While the current implementation works, there are a few suggestions to enhance the component:
-
Make the component more reusable by accepting props for customization:
- Allow width and height to be passed as props.
- Accept an
ariaLabelprop for accessibility.
-
The base64 encoded image significantly increases the file size. Consider:
- Using a separate image file and referencing it via URL.
- If the image is small and frequently used, consider using an SVG sprite.
Here's an example of how you could refactor the component:
import React from "react";
export const Svgicon = ({ width = 69, height = 72, ariaLabel = "Default description" }) => (
<svg
width={width}
height={height}
viewBox="0 0 69 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
role="img"
aria-label={ariaLabel}
>
{/* SVG content */}
</svg>
);This refactoring allows for more flexible usage of the component while addressing the accessibility concern.
🧰 Tools
🪛 Biome
[error] 5-5: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
| <svg width="69" height="72" viewBox="0 0 69 72" fill="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> | ||
| <rect width="69" height="72" fill="url(#pattern0_12654_28443)" /> | ||
| <defs> | ||
| <pattern id="pattern0_12654_28443" patternContentUnits="objectBoundingBox" width="1" height="1"> | ||
| <use href="#image0_12654_28443" transform="matrix(0.00771642 0 0 0.00699301 -0.0015674 0)" /> | ||
| </pattern> | ||
| <image id="image0_12654_28443" width="130" height="143" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACPCAYAAAA2nQMjAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAArUSURBVHgB7Z1dbBTXFcfP7CxrQ/xVbEpjF3AgMSRKHAdhAyIKOApSm2Ds5qmRqCD0LQoNfknT5gF4aJU3J7hN3hqj5KFSJb5atX2gQCgoCbYIBZUPpwUTgsHEJjaYYBvPTu4561n2e2ft3Z0Z+/+Tlp3xzo6Hub8599xzx7saZYHO9pZ1PtNoDhLVkakeRGUEEuPTdtZvO7iLXIZGU4AFINPYoRp/HQH7uFCGSYvQ2b5hBwW1nbysB+bQD2rWUOmiZ2h2+UJZB/Hc6j5OV4/9SZY10raseOPgHnIJkxKha3fTh6ZJW3i54sn19KPlzWh8m9w4dYD61EMI6o31rfuPkgvIWITO3RvbyDS3c8NXr3+dih5eRiAzImQYNINGY0Pr30+Tw/gy2fjk7qYtlgRLNrwJCSYJR9C5qitVlPl8+r4v2lqqyWFsi/ApH6xJO3h5vvqPzJ67kMDkWfDcL+VCMomqDZ9xxGkZbIswSzd2qH6kmpPCeSovAFOHu1ZOrlmGcd84RwbHht22ROADNE2thZc5rIHsYOVZgaIKtabVjevGPnIIWyLc1w0lgVnGoSx00CBb8PnkfEvOq6rH8IiMHMCWCGqjtfxcouoEIPtYMnCE4GF5Z/vGHZRnbImgugUuG6vkZimB3CAyvPRmaCVo7sy3DDaTRVNE4MQG5A4+vwue2xpaUTJ0vbdxM+WJtCJYmSwqh/lhbs2zMjxnTDI7OtvUfE4eSCvCyMRMIkTIHzwys2Qgn7HvZNuLdZRjMqosgvzBMlSE6jV5qT5CBBdTteoVNaO7PC/VR4jgchas3RquPk7IkJPqI0RwOTLB91Ko4DRRij5COQAieABrttcqReei+ggRPEKuq48QwUNY1UcZyme5+ggRPAYnjpWrfh5aUTJ8trtpO2UBiOBBuPpYqYaWjG5SWzZK0RDBo/DNQRGl6HenWn2ECB4msvqo+fQpFZwggsfh6qN1I+xUqo8QYRrA+cJUq48QYRqQqPqYqQwQYZoQW300dKMtk/dDhGlEXPVxd5NtGSDCNCOq+mjS9q72phY774MI0xBOHEuqQ3eca6a9z6qACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACEDQjn3wWMovi9JMf5lmBur4c/vwlcDe4d7AV2SMfUemNnLa1IKDqbY19ECrn7+qPtVGJo2rnY1T8P53dP9GPwEPocm/dfwBzanwG6Nl6BqAABGAABGAABGAABGAABGAABGA4KcZykPlj9OSZ98Or4+P3aZz/3iNZiozVgR/QQmVVjaE10fuXKOZDLoGIEAEIEAEIEAEIEAEIEwrEXgk4OZ95uL4soWnh4+llStpUf02VRNYFnWS7w6cp+H+83Sl8w80eudrygTeT1XtZvrh0pepsLgq/POh3pPUd2Ev9V3cm/B9sXWJoWuf05WudjlG3h8PVa1jHB+9TQM9hyZ1fLnCkyIUFv+Yap5/J6oOEAk3Cj/mq8bsPdNB/z/xe7IDv+eJn74fJYAF/y55VDVQ9+G34l6PrUvwvSBVY3do8ZrfJtyWj40fXylZrnS2k9N4TgSW4KnmjxI2ViIqa7eQrk58osaLxB8oplq133Thmxvvroo2187sSbldmZKiLImokSxcsU0iRLr95RrPibBwxetREvBJ5BDLoZbh1zgUlz/yQngbbryBS4fC2yQiMmxz+L/bf4H0QAkVVSyj+ctejjmGbbYbzmrkUVW5TLW/vov7ZFun8JwIpVUro9YvqbAf2W9znzvU+7lc3dw/W1Q9vTmlCAznFmcO/CKuQbj8zLmIBUvD3Qhvn639VT61WboJp/DUqIFPWGyXMKgaPRF9F/ZFrReoLiUV3Fj/VZNOia7K3rN74n5eVPE4pSPZ/rjBh2KOOzZK5BtPRQQ+qfyI7MfLVITgbD4WjhLJMvyE+1aJ3WiSiafQ772T8fBvNMVEFndntc0PIhYLzvt3qnvwXB0hNhzXNL4zMYJYSfmkwGaymoxE3Qp3N07huRyBs//QqOFBqLeGYgyP94f7z9HA5X/FhV83wVf+yO1rVFjyQCiOCkPkDJ6LCJxonVUJ2EiSQgyP5avUkJGTxfpNR8KCgNR4ssTMMnR+/LxEh/7Lh5L2q3yFcbexJEFRB0Tj6RJzZELIOQL3seWLX4gr5HBRieVxumgTi7+gOGrdyTrCtJl04nyg92yH6jY2qWjRGNd1sAxugnOc2FGIk7fLeSoicN//UMT4nYeNiRJCPqHdh38jeYJF4RSz/GwTO0/C0SBdgSqXuE4ELvwYY7cThkkess1f+rPwOs8PJBsZcF3Aabi7SnR8HAkWRlQWGR7tOIlrugYOlbXNH1PDpsO0emtXVAnWYuBydImY5xN4XiERi9ScRCSDDpzoJ37yx7hRC0tQm2DSLFFRLJ+4JiJUTszZW/BETL+aKIoMl3x1sQyRE0qL17yt1tdL7SBU/SuWkx/b/9504ETzMfCoha9+rjLysRUUVcUdG4980s2D5BrXiMBhPu5nCUq63Ufeotrij6JyBetegWTwfH8m5eZswQkrRzq++pPlKLzNpRO/I6dxTdfA07CRjEzMIsbCucOpvzRL446kubuHXz/3z9ccm9VLVfhiuLvi2clRF/xxjXbs/cdMcgl81fAtYhzib3bvTTuuDt0VtFJuVSsseVByHv7mvHQpqUrM1lSyRbqsPXYug6e7I4d7/HrkKIX59wc14dc4YlnHOD465KoSuKaZja4SwcukEsHtsAi4nR0IEAEIEAEIEAEIEAEIM/aDMrIN1wJiayFeAiJkCS4cdR/+NXkVdA1AgAhAgAhAgAhA8F+9NHj6/phRl3QDfRY9+shS0gvmUOWqVwh4g1tfHqe7vRfJ9N3ruK8NfpJq23HN3+O/+b9vGo1AgL/FJaEMhQWzSa8upYC/guY9+iIBb3Cv9zqNmDfIFyz9ZPWvOjvSbe9r3U+D+thYo1o+TWDGIjkCZADhZBEyzGyiRg2QYeYSN3yEDDOThHUEyDDzSFpQsmTw6T7I4EGCY/fk2TRo0M72KSuLLMPqp9dyZJBvFQXewRgNtZdJ+tRFYJ5p3a92pA2yCJDBO1htZRJlRwRBM6V74O8bBu6HJbDaqqF1v62u3ZYImqn9h5+HrnxBwP0MX78YWtDoqN332BLBDAb38/O33ScIuJ9vvwy1k0oUbX9EjC0R6lv/dpTt4pBzCzK4mrHhfhrqOSXLs0g/avd9tu9HsOzqO3UASaOL4fZhNI06VKLfY/d9tkVoaP1rB0cFNq73sz8TcB8sAUdsjbQe3dB3ZfLejO5QGjf0V3koeav7eNg84A44f7sx0SbBoLkrk2jAaJQhnW0b1pFP4xtZaN6T62n+8mbSA3MIOAdflJYEFNR21bce3EkZkrEITFdbU4vp0z5UmUNZoKhCZJhbs4ZAfhm+fkFJcFCehUlKwExKBObTtpZq3Rc8opFZzescFYoeXkaF5QsoUFxOIDcYo/doZOCqqumcCiftnBOoIf6rMrqbJJMWweJkW9MWzae9oaJDHYE8ow2qhOA9P/nfDU0FTGFPlCUkQpCxTklRrWnaIgK5wTSGzKDWoxZOTyUCxPI9S6knPN2AEnUAAAAASUVORK5CYII=" /> | ||
| </defs> | ||
| </svg> |
There was a problem hiding this comment.
Add accessibility attributes to the SVG element.
The SVG structure is well-formed, but it lacks accessibility attributes. To improve accessibility:
- Add a
role="img"attribute to the<svg>element. - Add an
aria-labelattribute with a descriptive text.
Here's an example of how to modify the SVG opening tag:
- <svg width="69" height="72" viewBox="0 0 69 72" fill="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+ <svg width="69" height="72" viewBox="0 0 69 72" fill="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" role="img" aria-label="Description of the image">Replace "Description of the image" with a brief, meaningful description of what the image represents.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <svg width="69" height="72" viewBox="0 0 69 72" fill="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> | |
| <rect width="69" height="72" fill="url(#pattern0_12654_28443)" /> | |
| <defs> | |
| <pattern id="pattern0_12654_28443" patternContentUnits="objectBoundingBox" width="1" height="1"> | |
| <use href="#image0_12654_28443" transform="matrix(0.00771642 0 0 0.00699301 -0.0015674 0)" /> | |
| </pattern> | |
| <image id="image0_12654_28443" width="130" height="143" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACPCAYAAAA2nQMjAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAArUSURBVHgB7Z1dbBTXFcfP7CxrQ/xVbEpjF3AgMSRKHAdhAyIKOApSm2Ds5qmRqCD0LQoNfknT5gF4aJU3J7hN3hqj5KFSJb5atX2gQCgoCbYIBZUPpwUTgsHEJjaYYBvPTu4561n2e2ft3Z0Z+/+Tlp3xzo6Hub8599xzx7saZYHO9pZ1PtNoDhLVkakeRGUEEuPTdtZvO7iLXIZGU4AFINPYoRp/HQH7uFCGSYvQ2b5hBwW1nbysB+bQD2rWUOmiZ2h2+UJZB/Hc6j5OV4/9SZY10raseOPgHnIJkxKha3fTh6ZJW3i54sn19KPlzWh8m9w4dYD61EMI6o31rfuPkgvIWITO3RvbyDS3c8NXr3+dih5eRiAzImQYNINGY0Pr30+Tw/gy2fjk7qYtlgRLNrwJCSYJR9C5qitVlPl8+r4v2lqqyWFsi/ApH6xJO3h5vvqPzJ67kMDkWfDcL+VCMomqDZ9xxGkZbIswSzd2qH6kmpPCeSovAFOHu1ZOrlmGcd84RwbHht22ROADNE2thZc5rIHsYOVZgaIKtabVjevGPnIIWyLc1w0lgVnGoSx00CBb8PnkfEvOq6rH8IiMHMCWCGqjtfxcouoEIPtYMnCE4GF5Z/vGHZRnbImgugUuG6vkZimB3CAyvPRmaCVo7sy3DDaTRVNE4MQG5A4+vwue2xpaUTJ0vbdxM+WJtCJYmSwqh/lhbs2zMjxnTDI7OtvUfE4eSCvCyMRMIkTIHzwys2Qgn7HvZNuLdZRjMqosgvzBMlSE6jV5qT5CBBdTteoVNaO7PC/VR4jgchas3RquPk7IkJPqI0RwOTLB91Ko4DRRij5COQAieABrttcqReei+ggRPEKuq48QwUNY1UcZyme5+ggRPAYnjpWrfh5aUTJ8trtpO2UBiOBBuPpYqYaWjG5SWzZK0RDBo/DNQRGl6HenWn2ECB4msvqo+fQpFZwggsfh6qN1I+xUqo8QYRrA+cJUq48QYRqQqPqYqQwQYZoQW300dKMtk/dDhGlEXPVxd5NtGSDCNCOq+mjS9q72phY774MI0xBOHEuqQ3eca6a9z6qACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACEDQjn3wWMovi9JMf5lmBur4c/vwlcDe4d7AV2SMfUemNnLa1IKDqbY19ECrn7+qPtVGJo2rnY1T8P53dP9GPwEPocm/dfwBzanwG6Nl6BqAABGAABGAABGAABGAABGAABGA4KcZykPlj9OSZ98Or4+P3aZz/3iNZiozVgR/QQmVVjaE10fuXKOZDLoGIEAEIEAEIEAEIEAEIEwrEXgk4OZ95uL4soWnh4+llStpUf02VRNYFnWS7w6cp+H+83Sl8w80eudrygTeT1XtZvrh0pepsLgq/POh3pPUd2Ev9V3cm/B9sXWJoWuf05WudjlG3h8PVa1jHB+9TQM9hyZ1fLnCkyIUFv+Yap5/J6oOEAk3Cj/mq8bsPdNB/z/xe7IDv+eJn74fJYAF/y55VDVQ9+G34l6PrUvwvSBVY3do8ZrfJtyWj40fXylZrnS2k9N4TgSW4KnmjxI2ViIqa7eQrk58osaLxB8oplq133Thmxvvroo2187sSbldmZKiLImokSxcsU0iRLr95RrPibBwxetREvBJ5BDLoZbh1zgUlz/yQngbbryBS4fC2yQiMmxz+L/bf4H0QAkVVSyj+ctejjmGbbYbzmrkUVW5TLW/vov7ZFun8JwIpVUro9YvqbAf2W9znzvU+7lc3dw/W1Q9vTmlCAznFmcO/CKuQbj8zLmIBUvD3Qhvn639VT61WboJp/DUqIFPWGyXMKgaPRF9F/ZFrReoLiUV3Fj/VZNOia7K3rN74n5eVPE4pSPZ/rjBh2KOOzZK5BtPRQQ+qfyI7MfLVITgbD4WjhLJMvyE+1aJ3WiSiafQ772T8fBvNMVEFndntc0PIhYLzvt3qnvwXB0hNhzXNL4zMYJYSfmkwGaymoxE3Qp3N07huRyBs//QqOFBqLeGYgyP94f7z9HA5X/FhV83wVf+yO1rVFjyQCiOCkPkDJ6LCJxonVUJ2EiSQgyP5avUkJGTxfpNR8KCgNR4ssTMMnR+/LxEh/7Lh5L2q3yFcbexJEFRB0Tj6RJzZELIOQL3seWLX4gr5HBRieVxumgTi7+gOGrdyTrCtJl04nyg92yH6jY2qWjRGNd1sAxugnOc2FGIk7fLeSoicN//UMT4nYeNiRJCPqHdh38jeYJF4RSz/GwTO0/C0SBdgSqXuE4ELvwYY7cThkkess1f+rPwOs8PJBsZcF3Aabi7SnR8HAkWRlQWGR7tOIlrugYOlbXNH1PDpsO0emtXVAnWYuBydImY5xN4XiERi9ScRCSDDpzoJ37yx7hRC0tQm2DSLFFRLJ+4JiJUTszZW/BETL+aKIoMl3x1sQyRE0qL17yt1tdL7SBU/SuWkx/b/9504ETzMfCoha9+rjLysRUUVcUdG4980s2D5BrXiMBhPu5nCUq63Ufeotrij6JyBetegWTwfH8m5eZswQkrRzq++pPlKLzNpRO/I6dxTdfA07CRjEzMIsbCucOpvzRL446kubuHXz/3z9ccm9VLVfhiuLvi2clRF/xxjXbs/cdMcgl81fAtYhzib3bvTTuuDt0VtFJuVSsseVByHv7mvHQpqUrM1lSyRbqsPXYug6e7I4d7/HrkKIX59wc14dc4YlnHOD465KoSuKaZja4SwcukEsHtsAi4nR0IEAEIEAEIEAEIEAEIM/aDMrIN1wJiayFeAiJkCS4cdR/+NXkVdA1AgAhAgAhAgAhA8F+9NHj6/phRl3QDfRY9+shS0gvmUOWqVwh4g1tfHqe7vRfJ9N3ruK8NfpJq23HN3+O/+b9vGo1AgL/FJaEMhQWzSa8upYC/guY9+iIBb3Cv9zqNmDfIFyz9ZPWvOjvSbe9r3U+D+thYo1o+TWDGIjkCZADhZBEyzGyiRg2QYeYSN3yEDDOThHUEyDDzSFpQsmTw6T7I4EGCY/fk2TRo0M72KSuLLMPqp9dyZJBvFQXewRgNtZdJ+tRFYJ5p3a92pA2yCJDBO1htZRJlRwRBM6V74O8bBu6HJbDaqqF1v62u3ZYImqn9h5+HrnxBwP0MX78YWtDoqN332BLBDAb38/O33ScIuJ9vvwy1k0oUbX9EjC0R6lv/dpTt4pBzCzK4mrHhfhrqOSXLs0g/avd9tu9HsOzqO3UASaOL4fZhNI06VKLfY/d9tkVoaP1rB0cFNq73sz8TcB8sAUdsjbQe3dB3ZfLejO5QGjf0V3koeav7eNg84A44f7sx0SbBoLkrk2jAaJQhnW0b1pFP4xtZaN6T62n+8mbSA3MIOAdflJYEFNR21bce3EkZkrEITFdbU4vp0z5UmUNZoKhCZJhbs4ZAfhm+fkFJcFCehUlKwExKBObTtpZq3Rc8opFZzescFYoeXkaF5QsoUFxOIDcYo/doZOCqqumcCiftnBOoIf6rMrqbJJMWweJkW9MWzae9oaJDHYE8ow2qhOA9P/nfDU0FTGFPlCUkQpCxTklRrWnaIgK5wTSGzKDWoxZOTyUCxPI9S6knPN2AEnUAAAAASUVORK5CYII=" /> | |
| </defs> | |
| </svg> | |
| <svg width="69" height="72" viewBox="0 0 69 72" fill="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" role="img" aria-label="Description of the image"> | |
| <rect width="69" height="72" fill="url(#pattern0_12654_28443)" /> | |
| <defs> | |
| <pattern id="pattern0_12654_28443" patternContentUnits="objectBoundingBox" width="1" height="1"> | |
| <use href="#image0_12654_28443" transform="matrix(0.00771642 0 0 0.00699301 -0.0015674 0)" /> | |
| </pattern> | |
| <image id="image0_12654_28443" width="130" height="143" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACPCAYAAAA2nQMjAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAArUSURBVHgB7Z1dbBTXFcfP7CxrQ/xVbEpjF3AgMSRKHAdhAyIKOApSm2Ds5qmRqCD0LQoNfknT5gF4aJU3J7hN3hqj5KFSJb5atX2gQCgoCbYIBZUPpwUTgsHEJjaYYBvPTu4561n2e2ft3Z0Z+/+Tlp3xzo6Hub8599xzx7saZYHO9pZ1PtNoDhLVkakeRGUEEuPTdtZvO7iLXIZGU4AFINPYoRp/HQH7uFCGSYvQ2b5hBwW1nbysB+bQD2rWUOmiZ2h2+UJZB/Hc6j5OV4/9SZY10raseOPgHnIJkxKha3fTh6ZJW3i54sn19KPlzWh8m9w4dYD61EMI6o31rfuPkgvIWITO3RvbyDS3c8NXr3+dih5eRiAzImQYNINGY0Pr30+Tw/gy2fjk7qYtlgRLNrwJCSYJR9C5qitVlPl8+r4v2lqqyWFsi/ApH6xJO3h5vvqPzJ67kMDkWfDcL+VCMomqDZ9xxGkZbIswSzd2qH6kmpPCeSovAFOHu1ZOrlmGcd84RwbHht22ROADNE2thZc5rIHsYOVZgaIKtabVjevGPnIIWyLc1w0lgVnGoSx00CBb8PnkfEvOq6rH8IiMHMCWCGqjtfxcouoEIPtYMnCE4GF5Z/vGHZRnbImgugUuG6vkZimB3CAyvPRmaCVo7sy3DDaTRVNE4MQG5A4+vwue2xpaUTJ0vbdxM+WJtCJYmSwqh/lhbs2zMjxnTDI7OtvUfE4eSCvCyMRMIkTIHzwys2Qgn7HvZNuLdZRjMqosgvzBMlSE6jV5qT5CBBdTteoVNaO7PC/VR4jgchas3RquPk7IkJPqI0RwOTLB91Ko4DRRij5COQAieABrttcqReei+ggRPEKuq48QwUNY1UcZyme5+ggRPAYnjpWrfh5aUTJ8trtpO2UBiOBBuPpYqYaWjG5SWzZK0RDBo/DNQRGl6HenWn2ECB4msvqo+fQpFZwggsfh6qN1I+xUqo8QYRrA+cJUq48QYRqQqPqYqQwQYZoQW300dKMtk/dDhGlEXPVxd5NtGSDCNCOq+mjS9q72phY774MI0xBOHEuqQ3eca6a9z6qACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACECACEDQjn3wWMovi9JMf5lmBur4c/vwlcDe4d7AV2SMfUemNnLa1IKDqbY19ECrn7+qPtVGJo2rnY1T8P53dP9GPwEPocm/dfwBzanwG6Nl6BqAABGAABGAABGAABGAABGAABGA4KcZykPlj9OSZ98Or4+P3aZz/3iNZiozVgR/QQmVVjaE10fuXKOZDLoGIEAEIEAEIEAEIEAEIEwrEXgk4OZ95uL4soWnh4+llStpUf02VRNYFnWS7w6cp+H+83Sl8w80eudrygTeT1XtZvrh0pepsLgq/POh3pPUd2Ev9V3cm/B9sXWJoWuf05WudjlG3h8PVa1jHB+9TQM9hyZ1fLnCkyIUFv+Yap5/J6oOEAk3Cj/mq8bsPdNB/z/xe7IDv+eJn74fJYAF/y55VDVQ9+G34l6PrUvwvSBVY3do8ZrfJtyWj40fXylZrnS2k9N4TgSW4KnmjxI2ViIqa7eQrk58osaLxB8oplq133Thmxvvroo2187sSbldmZKiLImokSxcsU0iRLr95RrPibBwxetREvBJ5BDLoZbh1zgUlz/yQngbbryBS4fC2yQiMmxz+L/bf4H0QAkVVSyj+ctejjmGbbYbzmrkUVW5TLW/vov7ZFun8JwIpVUro9YvqbAf2W9znzvU+7lc3dw/W1Q9vTmlCAznFmcO/CKuQbj8zLmIBUvD3Qhvn639VT61WboJp/DUqIFPWGyXMKgaPRF9F/ZFrReoLiUV3Fj/VZNOia7K3rN74n5eVPE4pSPZ/rjBh2KOOzZK5BtPRQQ+qfyI7MfLVITgbD4WjhLJMvyE+1aJ3WiSiafQ772T8fBvNMVEFndntc0PIhYLzvt3qnvwXB0hNhzXNL4zMYJYSfmkwGaymoxE3Qp3N07huRyBs//QqOFBqLeGYgyP94f7z9HA5X/FhV83wVf+yO1rVFjyQCiOCkPkDJ6LCJxonVUJ2EiSQgyP5avUkJGTxfpNR8KCgNR4ssTMMnR+/LxEh/7Lh5L2q3yFcbexJEFRB0Tj6RJzZELIOQL3seWLX4gr5HBRieVxumgTi7+gOGrdyTrCtJl04nyg92yH6jY2qWjRGNd1sAxugnOc2FGIk7fLeSoicN//UMT4nYeNiRJCPqHdh38jeYJF4RSz/GwTO0/C0SBdgSqXuE4ELvwYY7cThkkess1f+rPwOs8PJBsZcF3Aabi7SnR8HAkWRlQWGR7tOIlrugYOlbXNH1PDpsO0emtXVAnWYuBydImY5xN4XiERi9ScRCSDDpzoJ37yx7hRC0tQm2DSLFFRLJ+4JiJUTszZW/BETL+aKIoMl3x1sQyRE0qL17yt1tdL7SBU/SuWkx/b/9504ETzMfCoha9+rjLysRUUVcUdG4980s2D5BrXiMBhPu5nCUq63Ufeotrij6JyBetegWTwfH8m5eZswQkrRzq++pPlKLzNpRO/I6dxTdfA07CRjEzMIsbCucOpvzRL446kubuHXz/3z9ccm9VLVfhiuLvi2clRF/xxjXbs/cdMcgl81fAtYhzib3bvTTuuDt0VtFJuVSsseVByHv7mvHQpqUrM1lSyRbqsPXYug6e7I4d7/HrkKIX59wc14dc4YlnHOD465KoSuKaZja4SwcukEsHtsAi4nR0IEAEIEAEIEAEIEAEIM/aDMrIN1wJiayFeAiJkCS4cdR/+NXkVdA1AgAhAgAhAgAhA8F+9NHj6/phRl3QDfRY9+shS0gvmUOWqVwh4g1tfHqe7vRfJ9N3ruK8NfpJq23HN3+O/+b9vGo1AgL/FJaEMhQWzSa8upYC/guY9+iIBb3Cv9zqNmDfIFyz9ZPWvOjvSbe9r3U+D+thYo1o+TWDGIjkCZADhZBEyzGyiRg2QYeYSN3yEDDOThHUEyDDzSFpQsmTw6T7I4EGCY/fk2TRo0M72KSuLLMPqp9dyZJBvFQXewRgNtZdJ+tRFYJ5p3a92pA2yCJDBO1htZRJlRwRBM6V74O8bBu6HJbDaqqF1v62u3ZYImqn9h5+HrnxBwP0MX78YWtDoqN332BLBDAb38/O33ScIuJ9vvwy1k0oUbX9EjC0R6lv/dpTt4pBzCzK4mrHhfhrqOSXLs0g/avd9tu9HsOzqO3UASaOL4fZhNI06VKLfY/d9tkVoaP1rB0cFNq73sz8TcB8sAUdsjbQe3dB3ZfLejO5QGjf0V3koeav7eNg84A44f7sx0SbBoLkrk2jAaJQhnW0b1pFP4xtZaN6T62n+8mbSA3MIOAdflJYEFNR21bce3EkZkrEITFdbU4vp0z5UmUNZoKhCZJhbs4ZAfhm+fkFJcFCehUlKwExKBObTtpZq3Rc8opFZzescFYoeXkaF5QsoUFxOIDcYo/doZOCqqumcCiftnBOoIf6rMrqbJJMWweJkW9MWzae9oaJDHYE8ow2qhOA9P/nfDU0FTGFPlCUkQpCxTklRrWnaIgK5wTSGzKDWoxZOTyUCxPI9S6knPN2AEnUAAAAASUVORK5CYII=" /> | |
| </defs> | |
| </svg> |
🧰 Tools
🪛 Biome
[error] 5-5: Alternative text title element cannot be empty
For accessibility purposes, SVGs should have an alternative text, provided via title element. If the svg element has role="img", you should add the aria-label or aria-labelledby attribute.
(lint/a11y/noSvgWithoutTitle)
| import { useTranslation } from "react-i18next"; | ||
| import { useHistory } from "react-router-dom/cjs/react-router-dom.min"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { setAllDocuments } from "@cyntler/react-doc-viewer/dist/esm/store/actions"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid deep imports from third-party libraries
Importing from deep within a library's internal modules ("@cyntler/react-doc-viewer/dist/esm/store/actions") can lead to potential issues if the library's internal structure changes. It's recommended to import from the library's public API to ensure stability and maintainability.
| const hierarchyType = searchParams.get("hierarchyType"); | ||
| const [showPopUp, setShowPopUp] = useState(false); | ||
| const stateData = window.history.state; | ||
| const [geoPodeData, setGeoPodeData] = useState(false); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Rename boolean state variable for clarity
The state variable geoPodeData is used as a boolean flag, but its name suggests it contains data. To improve readability, consider renaming it to hasGeoPodeData or isGeoPodeDataAvailable.
| } catch (error) { | ||
| } |
There was a problem hiding this comment.
Handle errors properly in the catch block
The catch block in your fetchData function is empty, which means any errors during the API call will be ignored silently. This can make debugging difficult and may hide potential issues. Consider adding error handling logic, such as logging the error or setting an error state to inform the user.
Apply this change:
} catch (error) {
-}
+ console.error('Error fetching data:', error);
+ // Optionally, set an error state to display an error message to the user
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } catch (error) { | |
| } | |
| } catch (error) { | |
| console.error('Error fetching data:', error); | |
| // Optionally, set an error state to display an error message to the user | |
| } |
| return prevItems.map((item, idx) => { | ||
| if(idx===0) | ||
| { | ||
| if(newHierarchy) item.parentBoundaryType=null; | ||
| else{ | ||
| if(boundaryData.length === 0) item.parentBoundaryType=null; | ||
| else item.parentBoundaryType = boundaryData[boundaryData.length-1].boundaryType; | ||
|
|
||
| } | ||
| } | ||
| if (idx > 0) { | ||
| item.parentBoundaryType = prevItems[idx - 1].boundaryType; | ||
| } | ||
| return item; | ||
| }); |
There was a problem hiding this comment.
Avoid mutating state directly in addParents function
Directly mutating state can lead to unexpected behavior in React. In the addParents function, you're modifying the item object directly. Instead, create a new object for each item to maintain immutability.
Apply this diff to prevent direct mutation:
return prevItems.map((item, idx) => {
+ const newItem = { ...item };
if(idx === 0) {
if(newHierarchy)
- item.parentBoundaryType = null;
+ newItem.parentBoundaryType = null;
else {
if(boundaryData.length === 0)
- item.parentBoundaryType = null;
+ newItem.parentBoundaryType = null;
else
- item.parentBoundaryType = boundaryData[boundaryData.length-1].boundaryType;
+ newItem.parentBoundaryType = boundaryData[boundaryData.length-1].boundaryType;
}
}
if (idx > 0) {
- item.parentBoundaryType = prevItems[idx - 1].boundaryType;
+ newItem.parentBoundaryType = prevItems[idx - 1].boundaryType;
}
- return item;
+ return newItem;
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return prevItems.map((item, idx) => { | |
| if(idx===0) | |
| { | |
| if(newHierarchy) item.parentBoundaryType=null; | |
| else{ | |
| if(boundaryData.length === 0) item.parentBoundaryType=null; | |
| else item.parentBoundaryType = boundaryData[boundaryData.length-1].boundaryType; | |
| } | |
| } | |
| if (idx > 0) { | |
| item.parentBoundaryType = prevItems[idx - 1].boundaryType; | |
| } | |
| return item; | |
| }); | |
| return prevItems.map((item, idx) => { | |
| const newItem = { ...item }; | |
| if(idx===0) | |
| { | |
| if(newHierarchy) newItem.parentBoundaryType=null; | |
| else{ | |
| if(boundaryData.length === 0) newItem.parentBoundaryType=null; | |
| else newItem.parentBoundaryType = boundaryData[boundaryData.length-1].boundaryType; | |
| } | |
| } | |
| if (idx > 0) { | |
| newItem.parentBoundaryType = prevItems[idx - 1].boundaryType; | |
| } | |
| return newItem; | |
| }); |
| <div> | ||
| <div style={{fontWeight:"600", fontSize:"1.2rem"}}> | ||
| {item?.boundaryType} | ||
| </div> | ||
| <div style={{height:"1rem"}}></div> | ||
| <Card type={"primary"} variant={"form"} className={"question-card-container"} > | ||
| <div style={{display:"flex", gap:"2rem"}}> | ||
| <Svgicon /> | ||
| <div style={{display:"flex", alignItems:"center", fontWeight:"600"}}> | ||
| {item?.boundaryType}{".shp"} | ||
| </div> | ||
| </div> | ||
| </Card> | ||
| <hr style={{borderTop:"1px solid #ccc", margin:"1rem 0"}}/> | ||
| </div> | ||
| ))} |
There was a problem hiding this comment.
Add 'key' prop to list items in boundaryData.map
When rendering lists in React using map(), each element should have a unique key prop. This helps React optimize rendering and identify which items have changed or moved.
Apply this diff to add the key prop:
{boundaryData.map((item, index) => (
- <div>
+ <div key={index}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div> | |
| <div style={{fontWeight:"600", fontSize:"1.2rem"}}> | |
| {item?.boundaryType} | |
| </div> | |
| <div style={{height:"1rem"}}></div> | |
| <Card type={"primary"} variant={"form"} className={"question-card-container"} > | |
| <div style={{display:"flex", gap:"2rem"}}> | |
| <Svgicon /> | |
| <div style={{display:"flex", alignItems:"center", fontWeight:"600"}}> | |
| {item?.boundaryType}{".shp"} | |
| </div> | |
| </div> | |
| </Card> | |
| <hr style={{borderTop:"1px solid #ccc", margin:"1rem 0"}}/> | |
| </div> | |
| ))} | |
| {boundaryData.map((item, index) => ( | |
| <div key={index}> | |
| <div style={{fontWeight:"600", fontSize:"1.2rem"}}> | |
| {item?.boundaryType} | |
| </div> | |
| <div style={{height:"1rem"}}></div> | |
| <Card type={"primary"} variant={"form"} className={"question-card-container"} > | |
| <div style={{display:"flex", gap:"2rem"}}> | |
| <Svgicon /> | |
| <div style={{display:"flex", alignItems:"center", fontWeight:"600"}}> | |
| {item?.boundaryType}{".shp"} | |
| </div> | |
| </div> | |
| </Card> | |
| <hr style={{borderTop:"1px solid #ccc", margin:"1rem 0"}}/> | |
| </div> | |
| ))} |
🧰 Tools
🪛 Biome
[error] 165-165: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 161-161: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | ||
| <DustbinIcon /> | ||
| </div> |
There was a problem hiding this comment.
Replace div with button for accessibility
For consistency and accessibility, replace the div element with a button element to ensure keyboard interaction is possible.
Apply this diff:
-<div className="dustbin-icon" onClick={() => removeLevel(index)}>
+<button className="dustbin-icon" onClick={() => removeLevel(index)} type="button">
<DustbinIcon />
-</div>
+</button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | |
| <DustbinIcon /> | |
| </div> | |
| <button className="dustbin-icon" onClick={() => removeLevel(index)} type="button"> | |
| <DustbinIcon /> | |
| </button> |
🧰 Tools
🪛 Biome
[error] 342-342: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
| <div> | ||
| <div style={{display:"flex"}}> | ||
| <div style={{width:"20rem", marginTop:"0.6rem", fontWeight:"600"}}>{t("LEVEL")} {index + 1}</div> | ||
| <div style={{display:"flex", gap:"1rem"}}> | ||
| <TextInput | ||
| type={"text"} | ||
| populators={{ | ||
| resizeSmart: false | ||
| }} | ||
| style={{width:"27rem", display:"flex", justifyContent:"flex-end"}} | ||
| value={item?.boundaryType} | ||
| onChange={(event)=>addLevelName(event.target.value, index)} | ||
| placeholder={""} | ||
| /> | ||
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | ||
| <DustbinIcon /> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div style={{height:"1.5rem"}}></div> | ||
| </div> | ||
| )) |
There was a problem hiding this comment.
Add 'key' prop to list items in newBoundaryData.map
Again, ensure that each item rendered in the list has a unique key prop to prevent potential rendering issues.
Apply this diff:
{newBoundaryData.map((item, index) => (
- <div>
+ <div key={index}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div> | |
| <div style={{display:"flex"}}> | |
| <div style={{width:"20rem", marginTop:"0.6rem", fontWeight:"600"}}>{t("LEVEL")} {index + 1}</div> | |
| <div style={{display:"flex", gap:"1rem"}}> | |
| <TextInput | |
| type={"text"} | |
| populators={{ | |
| resizeSmart: false | |
| }} | |
| style={{width:"27rem", display:"flex", justifyContent:"flex-end"}} | |
| value={item?.boundaryType} | |
| onChange={(event)=>addLevelName(event.target.value, index)} | |
| placeholder={""} | |
| /> | |
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | |
| <DustbinIcon /> | |
| </div> | |
| </div> | |
| </div> | |
| <div style={{height:"1.5rem"}}></div> | |
| </div> | |
| )) | |
| {newBoundaryData.map((item, index) => ( | |
| <div key={index}> | |
| <div style={{display:"flex"}}> | |
| <div style={{width:"20rem", marginTop:"0.6rem", fontWeight:"600"}}>{t("LEVEL")} {index + 1}</div> | |
| <div style={{display:"flex", gap:"1rem"}}> | |
| <TextInput | |
| type={"text"} | |
| populators={{ | |
| resizeSmart: false | |
| }} | |
| style={{width:"27rem", display:"flex", justifyContent:"flex-end"}} | |
| value={item?.boundaryType} | |
| onChange={(event)=>addLevelName(event.target.value, index)} | |
| placeholder={""} | |
| /> | |
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | |
| <DustbinIcon /> | |
| </div> | |
| </div> | |
| </div> | |
| <div style={{height:"1.5rem"}}></div> | |
| </div> | |
| )) |
🧰 Tools
🪛 Biome
[error] 342-342: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 348-348: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 328-328: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
| <div> | ||
| <div style={{display:"flex"}}> | ||
| <div style={{width:"20rem", marginTop:"0.6rem", fontWeight:"600"}}>{t("LEVEL")} {boundaryData.length + index + 1}</div> | ||
| <div style={{display:"flex", gap:"1rem"}}> | ||
| <TextInput | ||
| type={"text"} | ||
| populators={{ | ||
| resizeSmart: false | ||
| }} | ||
| style={{width:"27rem", display:"flex", justifyContent:"flex-end"}} | ||
| value={item?.boundaryType} | ||
| onChange={(event)=>addLevelName(event.target.value, index)} | ||
| placeholder={""} | ||
| /> | ||
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | ||
| <DustbinIcon /> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div style={{height:"1.5rem"}}></div> | ||
| </div> | ||
| )) | ||
| } |
There was a problem hiding this comment.
Add 'key' prop to list items in newBoundaryData.map
Similar to the previous comment, please add a unique key prop to each element in your newBoundaryData.map to help React manage the list efficiently.
Apply this diff:
{newBoundaryData.map((item, index) => (
- <div>
+ <div key={index}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div> | |
| <div style={{display:"flex"}}> | |
| <div style={{width:"20rem", marginTop:"0.6rem", fontWeight:"600"}}>{t("LEVEL")} {boundaryData.length + index + 1}</div> | |
| <div style={{display:"flex", gap:"1rem"}}> | |
| <TextInput | |
| type={"text"} | |
| populators={{ | |
| resizeSmart: false | |
| }} | |
| style={{width:"27rem", display:"flex", justifyContent:"flex-end"}} | |
| value={item?.boundaryType} | |
| onChange={(event)=>addLevelName(event.target.value, index)} | |
| placeholder={""} | |
| /> | |
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | |
| <DustbinIcon /> | |
| </div> | |
| </div> | |
| </div> | |
| <div style={{height:"1.5rem"}}></div> | |
| </div> | |
| )) | |
| } | |
| {newBoundaryData.map((item, index) => ( | |
| <div key={index}> | |
| <div style={{display:"flex"}}> | |
| <div style={{width:"20rem", marginTop:"0.6rem", fontWeight:"600"}}>{t("LEVEL")} {boundaryData.length + index + 1}</div> | |
| <div style={{display:"flex", gap:"1rem"}}> | |
| <TextInput | |
| type={"text"} | |
| populators={{ | |
| resizeSmart: false | |
| }} | |
| style={{width:"27rem", display:"flex", justifyContent:"flex-end"}} | |
| value={item?.boundaryType} | |
| onChange={(event)=>addLevelName(event.target.value, index)} | |
| placeholder={""} | |
| /> | |
| <div className="dustbin-icon" onClick={() => removeLevel(index)}> | |
| <DustbinIcon /> | |
| </div> | |
| </div> | |
| </div> | |
| <div style={{height:"1.5rem"}}></div> | |
| </div> | |
| )) | |
| } |
🧰 Tools
🪛 Biome
[error] 205-205: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 211-211: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 191-191: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
…gn-manager/src/components/CampaignCard.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
📒 Files selected for processing (1)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js (1)
Pattern
**/*.js: check
| { | ||
| label: t("BOUNDARY_MANAGEMENT"), | ||
| link: `/${window?.contextPath}/employee/campaign/boundary-management?defaultHierarchyType=HIERARCHYTEST&hierarchyType=DEMOTEST6`, | ||
| roles: ROLES.CAMPAIGN_MANAGER, | ||
| // count: isLoading?"-":data |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Approve new "Boundary Management" link with suggestion for improvement
The addition of the "Boundary Management" link is approved and aligns with the PR objectives. However, to improve maintainability and flexibility, consider using configuration variables for defaultHierarchyType and hierarchyType instead of hardcoding the values.
Consider refactoring the link construction as follows:
const HIERARCHY_CONFIG = {
defaultHierarchyType: "HIERARCHYTEST",
hierarchyType: "DEMOTEST6"
};
// In the links array
{
label: t("BOUNDARY_MANAGEMENT"),
link: `/${window?.contextPath}/employee/campaign/boundary-management?defaultHierarchyType=${HIERARCHY_CONFIG.defaultHierarchyType}&hierarchyType=${HIERARCHY_CONFIG.hierarchyType}`,
roles: ROLES.CAMPAIGN_MANAGER,
}This approach allows for easier updates to hierarchy types in the future and improves the overall code maintainability.
| uiConfig: { | ||
| columns: [ | ||
| { | ||
| label: "Hierarchy Name", |
|
|
||
| const callGeoPode = (val)=>{ | ||
|
|
||
| window.history.pushState( |
There was a problem hiding this comment.
dont use window .histrory
| }, | ||
| requestBody: { | ||
| BoundaryTypeHierarchySearchCriteria: { | ||
| "tenantId": "mz", |
There was a problem hiding this comment.
tenantid hardcoded
| break; | ||
| case "Action": | ||
| console.log("download button") | ||
| return( |
| @@ -0,0 +1,65 @@ | |||
| import React from "react"; | |||
|
|
|||
| export const ShpFileIcon = () => ( | |||
There was a problem hiding this comment.
move to svg library
|
clean up the code |
Summary by CodeRabbit
Release Notes
New Features
Boundary,GeoPode,ViewBoundary, andViewHierarchy.Enhancements
Bug Fixes