feature/HCMPRE-1766: App Configuration fixes for web & app #2246
Conversation
* validation from ui (#1981) * validation from ui * empty top rows considered * info card added for error in place of toast * review changes * file name added * file name added * Updated the branch name validation (#1997) * Update README.md * Updated the branch name validation * Updated the branch name validator to have title check as well (#2002) * review changes --------- Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
Co-authored-by: Nipun Arora <aroranipun1@gmail.com>
…en (#2012) * adding mapping screen for facility and user screen * Update health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMappingWrapper.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* Update MicroplanSearch.js * Pagination issues --------- Co-authored-by: Nipun Arora <aroranipun1@gmail.com>
FEATURE/HCMPRE-1634: Fixed all the version updates
Sample Ticket for reference #2042
FEATURE/HCMPRE-1644: Changed download template name Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
#2047) BUGFIX/HCMPRE-1505 : Updated Core Version To Fix Validation Issue on Profile Update
* added geojson view and edit * resolved pr comments --------- Co-authored-by: nabeelmd-eGov <nabeel.md@egovernments.org> Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
* fixes current key * fixes --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com>
…hecklist search screens (#2044) * last modified date added in campaign search and checklist search screens * lat modified date corrected --------- Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
* fixes current key * fixes * added check --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com>
…added more date info on Hierarchy (#2054) * showcase review points * logs rmoved --------- Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
* PAYMENTS Module setup * updated module index file * updated comments * HCMPRE-1717:: Removed other modules dependency from Payments * added static view screen * Updated dependencies * Updated Roles and label for Payments Card * HCMPRE-1717:: Payments Base Module Setup * Resolved code rabbit comments * Update package.json * Rename view_attendance.js to ViewAttendance.js * Update attendanceManagementTable.js * Update build-config.yml * Update Module.js * Update Module.js --------- Co-authored-by: rachana-egov <rachana.singh@egovernment.org> Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
* FEATURE/HCMPRE-1717 :: added payment module build * Update build-config.yml
Health Payments Module Build issue fix
* BUGFIX/HCMPRE-1730 & HCMPRE-1731 * fixes --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com>
Co-authored-by: rachana-egov <rachana.singh@egovernment.org>
* BUGFIX/HCMPRE-1730 & HCMPRE-1731 * fixes * BUGFIX/HCMPRE_1730: Fix pagination --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com>
FEATURE/HCMPRE-1209 : Added co-del project type Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
* changes to createUpdatePlan * Changes to UI, createUpdatePlan * Putting the Hierarchy near the name * Loc change * Resolved comments * Null check for Hierarchy level * Changes * Indirectly Mutating planObject * changes * changes --------- Co-authored-by: Abishek <abishek.t@egovernments.org>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 20
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss(4 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js(5 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.js`: check
**/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js
🧠 Learnings (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)
Learnt from: siddhant-nawale-egov
PR: egovernments/DIGIT-Frontend#741
File: micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/Module.js:15-15
Timestamp: 2024-11-10T20:01:49.000Z
Learning: When adding a new module code like "campaignmanager" to `moduleCode`, ensure that it is properly handled in all relevant conditional checks and function parameters across the codebase.
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js
[error] 5-5: Shouldn't redeclare 'LabelFieldPair'. Consider to delete it or rename it.
'LabelFieldPair' is defined here:
(lint/suspicious/noRedeclare)
[error] 176-176: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 184-192: 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)
⏰ Context from checks skipped due to timeout of 10000ms (2)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (25)
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (19)
70-76: [Campaign Table Hover Enhancement]
Within the.campaign-tablesection, the hover styling for table cells has been refined by explicitly targeting thetdelement and adding a pointer cursor. Verify that the inserted space (or formatting change) aligns with your design system and that the use of the Sassrgba(#f47738, 0.12)function produces the expected visual effect across browsers.
115-122: [Campaign Setup Layering Adjustments]
A new block for.setup-campaignhas been introduced with nested styling for.digit-success(usingz-index: 1000) and.digit-error(usingz-index: 900). These changes help manage the stacking context for success and error messages. Please ensure these z-index values do not conflict with other overlay elements in your application.
123-131: [Timeline Component Styling]
New styling for.timeline-user(flex display with space-between alignment) and a nested.upcoming-timeline .timeline-label(with a specific text color) has been added. Confirm that these changes are consistent with the overall timeline design across the application.
138-141: [Stepper Card Dimension Adjustment]
The.stepper-cardclass now has a reduced height of37remand a removal of margin-bottom (in favor ofpadding-top: 0rem). Verify that the internal content remains well-aligned with this new sizing across different screen sizes.
142-144: [Stepper Subheader Color Assignment]
A new.stepper-subheaderstyle has been added with its text color set via a theme variable. Ensure that the referenced theme property (digitv2.lightTheme.header-sidenav) is defined and renders correctly.
145-151: [Full-Width Container Introduction]
The.container-fullclass has been added to provide a full-height flex container with appropriate spacing. This should facilitate layouts that require full vertical stretching; please confirm its usage does not interfere with other container components.
186-203: [Hierarchy Font Family Consistency]
The hierarchy-related classes (.hierarchy-boundary-heading,.hierarchy-boundary-sub-heading, and.hierarchy-boundary-sub-heading2) now use double-quoted font-family values (e.g.,"Roboto Condensed"and"Roboto"). This improves consistency and may enhance cross-browser reliability.
204-208: [Campaign Preview Flex Layout]
The new.campaign-previewclass adopts a flex layout to better align its child elements and set an appropriate gap. This change should help ensure a consistent presentation of campaign previews.
209-211: [Card Container Full Width]
The.card-container1class is introduced with a simple full-width setup. Make sure that its naming and styling don’t conflict with other card container classes used elsewhere in the project.
221-225: [Popup Mapping Overflow Adjustment]
A specific style for.digit-popup-wrapper.dataMappingensures that its child wrapper allows overflow to be visible. This is important for scenarios where popup content might extend beyond its container.
226-228: [Data Mapping Card Scroll Configuration]
The.dataMappingCardclass now forces vertical scrolling withoverflow-y: scroll. Verify this behavior against content that may vary in height so that usability remains intact.
232-236: [Data Mapping Filter Switch Positioning]
The.data-mapping-filter-switchstyling floats the element to the right and applies specific margins. This should position the filter switch correctly; just ensure that on responsive layouts, it maintains its intended alignment.
243-247: [Date Style Flex Layout]
Introducing the.date-styleclass with a maximum width, flex display, and a defined gap should help organize date-related elements more cleanly.
257-271: [Mobile Top Bar Comprehensive Styling]
The.mobile-topclass now incorporates theme-based background and color settings, full-width, flex alignment, and border radius for the top corners. Ensure that thetheme()calls resolve properly and deliver the intended styles on all supported devices.
273-282: [App Config Label Field Styling]
New styles for.appConfiglabelFieldand its.selectedvariant provide clear visual differentiation through background colors, borders, and padding. These changes foster better user feedback in configuration screens.
283-285: [App Config Flow Stepper Margin]
The.appConfig-flow-stepperclass now applies a top margin of2rem, ensuring sufficient spacing in multi-step layouts.
286-290: [App Config Add Section Spacing]
The.app-config-add-sectionclass centers the section horizontally and applies both top and bottom margins to create a balanced layout.
291-293: [App Config Screen Card Separation]
A simple margin-bottom of2remhas been applied via.appConfigScreenCardto ensure consistent spacing between screen cards.
297-299: [App Config ActionBar Layering]
Setting a highz-indexof9999for.app-config-actionBarensures that it overlays other content as needed. Double-check that this does not inadvertently obscure other interactive elements.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js (2)
114-114: Updated Header component usageThe Header component has been replaced with HeaderComponent. This is good, but ensure this change is consistent across the codebase.
199-206: Good use of AlertCard for user informationThe AlertCard is well-implemented to provide important information to users about campaign type updates.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (4)
54-61: Good component organization with clear importsNew components are imported with descriptive names that make their purposes clear.
110-110: Enhanced loader with better propsThe Loader component now includes additional props (page and variant) for better UI experience.
116-123: Improved component props formattingThe props for the EmployeeApp component are now formatted on separate lines, which improves readability.
66-66:❓ Verification inconclusive
Consistent module name usage
Based on retrieved learnings, ensure that new module codes like "appconfiguration" added to moduleCode are properly handled across the codebase.
🏁 Script executed:
#!/bin/bash # Check for consistent usage of "appconfiguration" module code echo "Checking for consistent usage of 'appconfiguration' module code..." rg "appconfiguration" --glob "*.js" --glob "*.jsx" | grep -v "Module.js"Length of output: 396
Consistent Module Code Usage – Verify Across Modules
We've verified that the new module code is being referenced correctly in parts of the codebase. In particular, the search output shows that in
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreen/AppLocalisationWrapper.jsthe module is defined as"hcm-appconfiguration". Meanwhile, inModule.jsthe exported constant remains as"HCM-ADMIN-CONSOLE". Please ensure that:
- The new module code
"appconfiguration"is consistently formatted (e.g., with the"hcm-"prefix) in all relevant files.- Any new entries in the module configuration are handled uniformly across the codebase (e.g., verify that if
"hcm-appconfiguration"is used in components likeAppLocalisationWrapper.js, similar naming is applied elsewhere if intended).- The difference between the admin console module and the new module code is deliberate and documented.
| .summary-header { | ||
| @extend .typography.text-heading-l; | ||
| font-size: 2.25rem; | ||
| margin-bottom: 1.5rem !important; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Summary Header Spacing Update]
The .summary-header class now includes a margin-bottom: 1.5rem !important; which helps ensure consistent spacing below the header. Consider whether the use of !important is necessary or if a higher specificity rule can achieve the same effect without compromising maintainability.
| .container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: 1.5rem; | ||
| align-items: stretch; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Generic Container Styling]
The newly introduced .container class applies a flex layout with row direction, gap, and stretching alignment. Note that "container" is a common class name; ensure it does not unintentionally clash with other frameworks or existing styles.
| .name-container-label { | ||
| .label-field-wrapper { | ||
| width: -webkit-fill-available; | ||
| } | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Responsive Label Field Wrapper]
Within .name-container-label, the nested .label-field-wrapper is set to width: -webkit-fill-available;. While this works for WebKit browsers, consider adding cross-browser compatible alternatives in case other rendering engines are used.
| .campaign-tag { | ||
| border: 0.5px solid #0b4b66; | ||
| margin-bottom: 1rem; | ||
| height: 3.3rem; | ||
| .digit-tag-text{ | ||
| .digit-tag-text { | ||
| font-size: 1.5rem; | ||
| font-weight: 700; | ||
| } | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Campaign Tag Styling Enhancement]
The .campaign-tag block now defines a 0.5px solid border with color #0b4b66, sets a bottom margin, and a fixed height. Additionally, inner .digit-tag-text elements have adjusted font size and weight. Confirm that the 0.5px border appears as expected on all target devices and that the styling meets design guidelines.
| .dataMappingDropdown { | ||
| min-width: 13rem !important; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Data Mapping Dropdown Minimum Width]
Setting a minimum width of 13rem with !important in .dataMappingDropdown ensures consistency in appearance. Please check if the use of !important is essential or if the same effect can be achieved with more specific selectors.
| {/* <Button | ||
| type={"button"} | ||
| size={"large"} | ||
| variation={"secondary"} | ||
| label={t("PREVIEW")} | ||
| onClick={() => { | ||
| setShowPopUp1(true); | ||
| }} | ||
| /> */} |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove commented code
The button for triggering the preview popup is commented out, making the popup inaccessible to users. Either remove this code or uncomment it if the feature is needed.
- {/* <Button
- type={"button"}
- size={"large"}
- variation={"secondary"}
- label={t("PREVIEW")}
- onClick={() => {
- setShowPopUp1(true);
- }}
- /> */}📝 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.
| {/* <Button | |
| type={"button"} | |
| size={"large"} | |
| variation={"secondary"} | |
| label={t("PREVIEW")} | |
| onClick={() => { | |
| setShowPopUp1(true); | |
| }} | |
| /> */} |
| {showPopUp1 && ( | ||
| <PopUp | ||
| className={"custom-pop-up"} | ||
| type={"default"} | ||
| heading={t("CHECKLIST_PREVIEW")} | ||
| children={[]} | ||
| onOverlayClick={() => { | ||
| setShowPopUp1(false); | ||
| }} | ||
| onClose={() => { | ||
| setShowPopUp1(false); | ||
| }} | ||
| footerChildren={[ | ||
| <Button | ||
| type={"button"} | ||
| size={"large"} | ||
| variation={"primary"} | ||
| label={t("CLOSE")} | ||
| onClick={() => { | ||
| setShowPopUp1(false); | ||
| }} | ||
| />, | ||
| ]} | ||
| sortFooterChildren={true} | ||
| > | ||
| <AppPreview /> | ||
| </PopUp> | ||
| )} |
There was a problem hiding this comment.
Fix popup implementation issues
The popup implementation has several issues:
- It uses an empty array for children but also includes children in the component body
- The footer children are missing key props for iterable elements
{showPopUp1 && (
<PopUp
className={"custom-pop-up"}
type={"default"}
heading={t("CHECKLIST_PREVIEW")}
- children={[]}
onOverlayClick={() => {
setShowPopUp1(false);
}}
onClose={() => {
setShowPopUp1(false);
}}
footerChildren={[
<Button
+ key="close-button"
type={"button"}
size={"large"}
variation={"primary"}
label={t("CLOSE")}
onClick={() => {
setShowPopUp1(false);
}}
/>,
]}
sortFooterChildren={true}
>
<AppPreview />
</PopUp>
)}📝 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.
| {showPopUp1 && ( | |
| <PopUp | |
| className={"custom-pop-up"} | |
| type={"default"} | |
| heading={t("CHECKLIST_PREVIEW")} | |
| children={[]} | |
| onOverlayClick={() => { | |
| setShowPopUp1(false); | |
| }} | |
| onClose={() => { | |
| setShowPopUp1(false); | |
| }} | |
| footerChildren={[ | |
| <Button | |
| type={"button"} | |
| size={"large"} | |
| variation={"primary"} | |
| label={t("CLOSE")} | |
| onClick={() => { | |
| setShowPopUp1(false); | |
| }} | |
| />, | |
| ]} | |
| sortFooterChildren={true} | |
| > | |
| <AppPreview /> | |
| </PopUp> | |
| )} | |
| {showPopUp1 && ( | |
| <PopUp | |
| className={"custom-pop-up"} | |
| type={"default"} | |
| heading={t("CHECKLIST_PREVIEW")} | |
| onOverlayClick={() => { | |
| setShowPopUp1(false); | |
| }} | |
| onClose={() => { | |
| setShowPopUp1(false); | |
| }} | |
| footerChildren={[ | |
| <Button | |
| key="close-button" | |
| type={"button"} | |
| size={"large"} | |
| variation={"primary"} | |
| label={t("CLOSE")} | |
| onClick={() => { | |
| setShowPopUp1(false); | |
| }} | |
| />, | |
| ]} | |
| sortFooterChildren={true} | |
| > | |
| <AppPreview /> | |
| </PopUp> | |
| )} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 176-176: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 184-192: 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)
| import { TourProvider } from "@egovernments/digit-ui-react-components"; | ||
| import { Loader } from "@egovernments/digit-ui-components"; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Improve import organization
The imports have been separated, but consider organizing them more consistently.
-import { TourProvider } from "@egovernments/digit-ui-react-components";
-import { Loader } from "@egovernments/digit-ui-components";
+import { TourProvider } from "@egovernments/digit-ui-react-components";
+import { Loader, ErrorBoundary } from "@egovernments/digit-ui-components";📝 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 { TourProvider } from "@egovernments/digit-ui-react-components"; | |
| import { Loader } from "@egovernments/digit-ui-components"; | |
| import { TourProvider } from "@egovernments/digit-ui-react-components"; | |
| import { Loader, ErrorBoundary } from "@egovernments/digit-ui-components"; |
| const moduleCode = BOUNDARY_HIERARCHY_TYPE | ||
| ? [`boundary-${BOUNDARY_HIERARCHY_TYPE}`] | ||
| : ["campaignmanager", "schema", "admin-schemas", "checklist", "appconfiguration" , "dummy-module"]; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Review moduleCode fallback list
The moduleCode fallback list includes "dummy-module" which suggests temporary code that might not be intended for production.
🏁 Script executed:
#!/bin/bash
# Check if "dummy-module" is being used or referenced elsewhere in the codebase
echo "Searching for references to 'dummy-module' in the codebase..."
rg "dummy-module" -A 3 -B 3 --glob "*.js" --glob "*.ts" --glob "*.jsx" --glob "*.tsx"Length of output: 3703
Action Required: Address Fallback Module Naming Inconsistency
The fallback list in the Module.js file (lines 96–98) includes "dummy-module", which appears to be a temporary placeholder. However, our search also revealed references to "hcm-dummy-module" in other parts of the code (e.g., in AppConfigurationWrapper.js and AppLocalisationWrapper.js). This naming inconsistency suggests that one of the values may be outdated or unintentional for production use.
Please verify whether both entries are needed or if they should be unified/removed. If "dummy-module" was only meant for temporary testing, consider updating or removing it to ensure consistency with the rest of the module references.
| MultiSelectDropdownBoundary: MultiSelectDropdown, | ||
| GeoPode, | ||
| ViewBoundary, | ||
| ViewHierarchy, | ||
| BoundarySummary, | ||
| MapView, | ||
| NoResultsFound | ||
| NoResultsFound, | ||
| UploadDataMappingWrapper, | ||
| DataUploadWrapper, | ||
| AppPreview, | ||
| // AppConfigurationWrapper: AppLocalisationWrapper, | ||
| AppConfigurationWrapper: ImpelComponentWrapper, | ||
| AppConfigurationParentLayer: AppConfigurationParentLayer, | ||
| FormBuilder |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Review commented code and component registration
There's commented code in the component registration section that should be removed or documented.
MultiSelectDropdownBoundary: MultiSelectDropdown,
NoResultsFound,
UploadDataMappingWrapper,
DataUploadWrapper,
AppPreview,
- // AppConfigurationWrapper: AppLocalisationWrapper,
AppConfigurationWrapper: ImpelComponentWrapper,
AppConfigurationParentLayer: AppConfigurationParentLayer,
FormBuilder📝 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.
| MultiSelectDropdownBoundary: MultiSelectDropdown, | |
| GeoPode, | |
| ViewBoundary, | |
| ViewHierarchy, | |
| BoundarySummary, | |
| MapView, | |
| NoResultsFound | |
| NoResultsFound, | |
| UploadDataMappingWrapper, | |
| DataUploadWrapper, | |
| AppPreview, | |
| // AppConfigurationWrapper: AppLocalisationWrapper, | |
| AppConfigurationWrapper: ImpelComponentWrapper, | |
| AppConfigurationParentLayer: AppConfigurationParentLayer, | |
| FormBuilder | |
| MultiSelectDropdownBoundary: MultiSelectDropdown, | |
| GeoPode, | |
| ViewBoundary, | |
| ViewHierarchy, | |
| BoundarySummary, | |
| NoResultsFound, | |
| UploadDataMappingWrapper, | |
| DataUploadWrapper, | |
| AppPreview, | |
| AppConfigurationWrapper: ImpelComponentWrapper, | |
| AppConfigurationParentLayer: AppConfigurationParentLayer, | |
| FormBuilder |
…rontend into feature/HCMPRE-1766
There was a problem hiding this comment.
Actionable comments posted: 10
♻️ Duplicate comments (6)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)
1-2: 🧹 Nitpick (assertive)Improve import organization.
The imports have been rearranged, but consider grouping them more consistently by library/source.
-import { TourProvider } from "@egovernments/digit-ui-react-components"; -import { Loader } from "@egovernments/digit-ui-components"; +import { Loader, ErrorBoundary } from "@egovernments/digit-ui-components"; +import { TourProvider } from "@egovernments/digit-ui-react-components";health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (2)
157-157: 🧹 Nitpick (assertive)Remove unreachable
breakstatement afterreturn.After returning
null, the subsequentbreakis never executed.156 return null; -157 break;🧰 Tools
🪛 Biome (1.9.4)
[error] 157-157: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
20-36: 🧹 Nitpick (assertive)Remove unreachable
breakstatements afterreturn.All the
breakstatements in this switch block are unreachable because each case returns immediately. Removing unreachable statements makes the code clearer.15 case "infoText": ... 19 return "text"; -20 break; 21 case "min": ... 25 return "number"; -26 break; 27 case "startDate": ... 29 return "date"; -30 break; 31 case "countryPrefix": ... 32 return "prefix"; -33 break; ... 34 return false; -35 break;🧰 Tools
🪛 Biome (1.9.4)
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: 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/appConfigurationScreenParent/AppConfigurationWrapper.js (3)
252-253: 🧹 Nitpick (assertive)Use
Number.POSITIVE_INFINITYinstead ofInfinity.ES2015 moved some globals into the Number namespace for consistency.
-252 cacheTime: Infinity, -253 staleTime: Infinity, +252 cacheTime: Number.POSITIVE_INFINITY, +253 staleTime: Number.POSITIVE_INFINITY,🧰 Tools
🪛 Biome (1.9.4)
[error] 252-252: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
[error] 253-253: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
60-66: 🛠️ Refactor suggestionGuard against spreading undefined in
item?.cards.If
item?.cardsisundefined, spreading it will throw an error. Provide a fallback array to avoid runtime errors.60 cards: [ -61 ...item?.cards, +61 ...(item?.cards || []), 62 { 63 fields: [], 64 header: "Header", 65 ... 66 },🧰 Tools
🪛 Biome (1.9.4)
[error] 61-61: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
376-380:⚠️ Potential issuePrevent potential spread of undefined in
card?.fields?.map().If
card?.fieldsisundefined, spreading its result will cause a runtime error. Provide a fallback array to ensure safety.377 ...card?.fields?.map((field) => ({ message: field?.label })), -378 ...card?.headerFields?.map((headerField) => ({ message: headerField?.value })), +378 ...(card?.headerFields ? card.headerFields.map((headerField) => ({ message: headerField?.value })) : []),Alternatively, guard both fields and headerFields:
377 ...(card?.fields ? card.fields.map((field) => ({ message: field?.label })) : []), 378 ...(card?.headerFields ? card.headerFields.map((headerField) => ({ message: headerField?.value })) : []),🧰 Tools
🪛 Biome (1.9.4)
[error] 377-377: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 378-378: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (3)
health/micro-ui/web/micro-ui-internals/example/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.jsonis excluded by!**/*.json
📒 Files selected for processing (5)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js(5 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/FormBuilder.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js(8 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.js`: check
**/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/FormBuilder.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js
🧠 Learnings (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)
Learnt from: siddhant-nawale-egov
PR: egovernments/DIGIT-Frontend#741
File: micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/Module.js:15-15
Timestamp: 2024-11-10T20:01:49.000Z
Learning: When adding a new module code like "campaignmanager" to `moduleCode`, ensure that it is properly handled in all relevant conditional checks and function parameters across the codebase.
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js
[error] 61-61: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 377-377: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 378-378: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 252-252: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 253-253: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 331-331: 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] 338-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)
[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)
[error] 373-373: 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] 391-399: 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] 400-400: 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] 416-416: 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] 417-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)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 157-157: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 235-253: 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] 270-270: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 212-212: 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/index.js
[error] 41-48: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 53-53: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 58-58: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 63-63: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
⏰ Context from checks skipped due to timeout of 10000ms (2)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (14)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (1)
168-169: Good addition of new routes for app configuration.The new routes for
app-configuration-parentandform-builder-configurationenhance the application's capabilities for managing configurations. The implementation correctly follows the existing pattern for route definitions.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (4)
93-95: Review moduleCode fallback list.The moduleCode fallback list includes "dummy-module" which suggests temporary code that might not be intended for production. Based on retrieved learnings, ensure that new module codes are properly handled across the codebase.
#!/bin/bash # Check if "dummy-module" is being used or referenced elsewhere in the codebase echo "Searching for references to 'dummy-module' in the codebase..." rg "dummy-module" -A 3 -B 3 --glob "*.js" --glob "*.ts" --glob "*.jsx" --glob "*.tsx"
107-107: Enhanced loader implementation.The addition of
page={true}andvariant={"PageLoader"}props to the Loader component provides a better user experience by clearly indicating that the entire page is loading.
113-120: Improved code formatting for EmployeeApp component.The reformatting of the EmployeeApp component's props improves readability and follows better coding practices for JSX.
172-176: Good addition of new components to the registry.The new components have been properly registered, enhancing the campaign manager module's capabilities for data mapping, app configuration, and form building.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (3)
55-55: Simplify boolean ternary usage. (Duplicate)Use a direct boolean expression instead of the
?:conditional withtrueandfalsefor more concise code.🧰 Tools
🪛 Biome (1.9.4)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
212-212: Provide a key prop for mapped dropdown items. (Duplicate)When rendering a list using
.map(), each element in the array must have a uniquekeyprop to help React track element identity.🧰 Tools
🪛 Biome (1.9.4)
[error] 212-212: 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)
235-253: Add keyboard event for accessibility. (Duplicate)Actions triggered by
onClickshould also include a corresponding keyboard event, such asonKeyUporonKeyDown, to ensure accessibility for keyboard-only users.🧰 Tools
🪛 Biome (1.9.4)
[error] 235-253: 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)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (6)
331-331: Add akeyproperty for the array element inclosedFooter. (Duplicate)Each React element in an array must include a unique
keyto help React manage rendering.🧰 Tools
🪛 Biome (1.9.4)
[error] 331-331: 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)
338-338: Include a unique key for the element inheader. (Duplicate)When returning arrays of JSX elements, each element must have a unique
keyprop.🧰 Tools
🪛 Biome (1.9.4)
[error] 338-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)
372-372: Avoid passing children as a prop directly. (Duplicate)The canonical way to pass children in React is to nest them within the component rather than using the
childrenprop array.🧰 Tools
🪛 Biome (1.9.4)
[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)
373-373: Assign a unique key to this array element. (Duplicate)When rendering an array of elements, each element must include a
keyprop for React’s reconciliation.🧰 Tools
🪛 Biome (1.9.4)
[error] 373-373: 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)
391-400: Addkeyprops to eachButtonin the footerChildren array. (Duplicate)Providing distinct keys prevents warnings and ensures React can track changes properly.
🧰 Tools
🪛 Biome (1.9.4)
[error] 391-399: 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] 400-400: 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)
416-417: Supply uniquekeyprops to elements in theactionFieldsarray. (Duplicate)Each array element must have a key to help React manage updates.
🧰 Tools
🪛 Biome (1.9.4)
[error] 416-416: 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] 417-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)
| const queryClient = useQueryClient(); | ||
| const formId = searchParams.get("formId"); | ||
| const module = "dummy-localisation"; | ||
| const { data: storeData, isLoading: isStoreLoading } = Digit.Hooks.useStore.getInitData(); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove unused variables.
The code fetches store data and declares initData but never uses them. Removing unused variables improves code readability and maintainability.
- const { data: storeData, isLoading: isStoreLoading } = Digit.Hooks.useStore.getInitData();
-
- const initData = Digit.SessionStorage.get("cachingService") ;Also applies to: 18-18
| if (isLoadingFormBuilderConfig) { | ||
| return <Loader />; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add fallback UI for missing configuration data.
The component renders the form without checking if the configuration data actually exists or is valid. Consider adding a check to render a fallback UI when configuration data is missing or invalid.
if (isLoadingFormBuilderConfig) {
return <Loader />;
}
+
+ if (!formBuilderConfig || !formBuilderConfig[0]?.data) {
+ return (
+ <div className="error-container">
+ <p>{t("ERROR_FORM_CONFIGURATION_NOT_FOUND")}</p>
+ </div>
+ );
+ }
return (
<div>
<FormComposerV2
config={[formBuilderConfig?.[0]?.data]?.map((c) => {
return {
...c,
};
})}
onSubmit={() => {}}
label={t("SUBMIT_BUTTON")}
showMultipleCardsWithoutNavs={true}
fieldStyle={{ marginRight: 0 }}
noBreakLine={true}
cardClassName={"page-padding-fix"}
onFormValueChange={() => {}}
actionClassName={"addProductActionClass"}
showSecondaryLabel={false}
/>
</div>
);Also applies to: 40-58
| const { isLoading: isLoadingFormBuilderConfig, data: formBuilderConfig } = Digit.Hooks.campaign.useMDMSV2Search({ | ||
| tenantId: tenantId, | ||
| moduleName: moduleName, | ||
| masterName: masterName, | ||
| formId: formId, | ||
| config: { | ||
| enabled: true, | ||
| staleTime: 0, | ||
| cacheTime: 0, | ||
| select: (data) => { | ||
| return data; | ||
| }, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Add error handling for failed API requests.
The component doesn't handle potential errors when fetching the form builder configuration. Consider adding error handling to provide feedback to users when the configuration fails to load.
const { isLoading: isLoadingFormBuilderConfig, data: formBuilderConfig } = Digit.Hooks.campaign.useMDMSV2Search({
tenantId: tenantId,
moduleName: moduleName,
masterName: masterName,
formId: formId,
config: {
enabled: true,
staleTime: 0,
cacheTime: 0,
select: (data) => {
return data;
},
+ onError: (error) => {
+ Digit.Hooks.useToast.error("Failed to load form configuration");
+ console.error("Error loading form configuration:", error);
+ }
},
});📝 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.
| const { isLoading: isLoadingFormBuilderConfig, data: formBuilderConfig } = Digit.Hooks.campaign.useMDMSV2Search({ | |
| tenantId: tenantId, | |
| moduleName: moduleName, | |
| masterName: masterName, | |
| formId: formId, | |
| config: { | |
| enabled: true, | |
| staleTime: 0, | |
| cacheTime: 0, | |
| select: (data) => { | |
| return data; | |
| }, | |
| }, | |
| }); | |
| const { isLoading: isLoadingFormBuilderConfig, data: formBuilderConfig } = Digit.Hooks.campaign.useMDMSV2Search({ | |
| tenantId: tenantId, | |
| moduleName: moduleName, | |
| masterName: masterName, | |
| formId: formId, | |
| config: { | |
| enabled: true, | |
| staleTime: 0, | |
| cacheTime: 0, | |
| select: (data) => { | |
| return data; | |
| }, | |
| onError: (error) => { | |
| Digit.Hooks.useToast.error("Failed to load form configuration"); | |
| console.error("Error loading form configuration:", error); | |
| } | |
| }, | |
| }); |
| const tenantId = Digit.ULBService.getCurrentTenantId(); | ||
| const moduleName = searchParams.get("moduleName"); | ||
| const masterName = searchParams.get("masterName"); | ||
| const queryClient = useQueryClient(); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove unused React Query client.
The queryClient is imported and initialized but never used in the component.
- const queryClient = useQueryClient();📝 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.
| const queryClient = useQueryClient(); |
| const masterName = searchParams.get("masterName"); | ||
| const queryClient = useQueryClient(); | ||
| const formId = searchParams.get("formId"); | ||
| const module = "dummy-localisation"; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove unused constant declaration.
The constant module is declared but never used in the component. This unused declaration could cause confusion for developers maintaining the code.
- const module = "dummy-localisation";📝 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.
| const module = "dummy-localisation"; |
| onSubmit={() => {}} | ||
| label={t("SUBMIT_BUTTON")} | ||
| showMultipleCardsWithoutNavs={true} | ||
| fieldStyle={{ marginRight: 0 }} | ||
| noBreakLine={true} | ||
| cardClassName={"page-padding-fix"} | ||
| onFormValueChange={() => {}} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Implement proper form submission handling.
The current form submission handler is empty (onSubmit={() => {}}), which means the form doesn't actually do anything when submitted. Consider implementing proper form submission logic or add a TODO comment if this is intentional.
🌐 Web query:
What are best practices for handling form submissions in React applications?
💡 Result:
Handling form submissions in React effectively requires a combination of state management, validation strategies, and performance optimization. Here are key best practices:
Use Controlled Components for Real-Time Validation
- State synchronization: Maintain form data in React state for dynamic validation and error handling.
const [formData, setFormData] = useState({ username: '', password: '' });
const handleChange = (e) => {
setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
};- Prevent default behavior: Use
e.preventDefault()to manage submissions manually[1][2][6].
Optimize Form Submission Logic
- Handle multi-field forms efficiently:
const handleSubmit = (e) => {
e.preventDefault();
// Validate and submit data
};- Leverage uncontrolled components for performance:
- Use
FormDatato retrieve values without per-input state management[5][17]:
- Use
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
};Implement Robust Validation
- Client-side validation:
- Use HTML attributes (
required,pattern) and custom checks[3][8][11]. - Display actionable error messages:
- Use HTML attributes (
{errors.email && <span>Invalid email format</span>}- Schema validation: Integrate libraries like Yup for complex rules[7][11]:
import * as Yup from 'yup';
const schema = Yup.object().shape({
email: Yup.string().email().required(),
});Leverage Form Libraries for Complex Use Cases
- React Hook Form: Minimizes re-renders and simplifies validation[10][11]:
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email", { required: true })} />
{errors.email && <span>Required</span>}
</form>
);- Formik: Streamlines state and error handling[7][9].
Performance Considerations
- Avoid unnecessary re-renders:
- Use uncontrolled components or optimized libraries like React Hook Form[5][17].
- Memoize expensive validation logic[1][17].
Accessibility and User Experience
- Semantic HTML: Use
<label>,aria-describedby, and error role alerts[8][16]. - Immediate feedback: Validate on blur and display errors contextually[3][8].
By combining controlled/uncontrolled approaches, robust validation, and performance optimizations, React forms can deliver seamless user experiences while maintaining code quality. For complex forms, libraries like React Hook Form or Formik reduce boilerplate and improve maintainability[7][10][11].
Citations:
- 1: https://www.angularminds.com/blog/best-practices-of-form-handling-and-event-binding-in-react
- 2: https://www.w3schools.com/react/react_forms.asp
- 3: https://www.dhiwise.com/post/react-form-validation-best-practices-with-tips-and-tricks
- 4: https://learnetto.com/tutorials/handling-form-submissions-in-react
- 5: https://dev.to/ajones_codes/a-better-guide-to-forms-in-react-47f0
- 6: https://www.freecodecamp.org/news/how-to-build-forms-in-react/
- 7: https://leanylabs.com/blog/form-validation-in-react/
- 8: https://daily.dev/blog/form-on-react-best-practices
- 9: https://formspree.io/blog/react-form-validation/
- 10: https://www.freecodecamp.org/news/how-to-validate-forms-in-react/
- 11: https://www.dhiwise.com/blog/design-converter/react-forms-best-practices-for-better-user-experience
- 12: https://legacy.reactjs.org/docs/forms.html
- 13: https://www.react-hook-form.com/api/useform/
- 14: https://www.fullstackfoundations.com/blog/react-forms-best-practices
- 15: https://react.dev/reference/react-dom/components/form
- 16: https://soldevelo.com/blog/mastering-input-validation-in-react/
- 17: https://www.epicreact.dev/improve-the-performance-of-your-react-forms
- 18: https://www.youtube.com/watch?v=_QpTQrxzY8A
Action Required: Implement Robust Form Submission Handling
The current implementation uses an empty onSubmit callback, which means the form does nothing when submitted. Based on React best practices, consider updating this handler to:
- Prevent the Default Behavior: Call
e.preventDefault()to manage submission manually. - Validate and Process Data: Retrieve form values, perform necessary validations, and then process or submit the data. You may use controlled components or libraries like React Hook Form or Formik to improve state management and reduce boilerplate.
- Clear Developer Intent: If the empty handler is merely a placeholder, include a descriptive TODO comment to clarify the intent.
Please update the code in health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/FormBuilder.js (lines 48-54) accordingly.
| show: | ||
| pathVar === "my-campaign" || | ||
| pathVar === "checklist/search" || | ||
| pathVar === "checklist/create" || | ||
| pathVar === "checklist/view" || | ||
| pathVar === "checklist/update" || | ||
| pathVar === "update-dates-boundary" | ||
| ? true | ||
| : false, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Simplify boolean expressions in breadcrumb logic.
The ternary expressions that return true or false can be simplified to direct boolean expressions for better readability and performance.
- show:
- pathVar === "my-campaign" ||
- pathVar === "checklist/search" ||
- pathVar === "checklist/create" ||
- pathVar === "checklist/view" ||
- pathVar === "checklist/update" ||
- pathVar === "update-dates-boundary"
- ? true
- : false,
+ show: pathVar === "my-campaign" ||
+ pathVar === "checklist/search" ||
+ pathVar === "checklist/create" ||
+ pathVar === "checklist/view" ||
+ pathVar === "checklist/update" ||
+ pathVar === "update-dates-boundary",📝 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.
| show: | |
| pathVar === "my-campaign" || | |
| pathVar === "checklist/search" || | |
| pathVar === "checklist/create" || | |
| pathVar === "checklist/view" || | |
| pathVar === "checklist/update" || | |
| pathVar === "update-dates-boundary" | |
| ? true | |
| : false, | |
| show: pathVar === "my-campaign" || | |
| pathVar === "checklist/search" || | |
| pathVar === "checklist/create" || | |
| pathVar === "checklist/view" || | |
| pathVar === "checklist/update" || | |
| pathVar === "update-dates-boundary", |
🧰 Tools
🪛 Biome (1.9.4)
[error] 41-48: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
| }, | ||
| { | ||
| path: "", | ||
| content: t("ACTION_LABEL_CONFIGURE_APP"), | ||
| show:pathVar === "checklist/search" ? true : false, | ||
| show: pathVar === "checklist/search" ? true : false, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Simplify boolean expressions in breadcrumb logic.
The ternary expression that returns true or false can be simplified to direct boolean expression.
- show: pathVar === "checklist/search" ? true : false,
+ show: pathVar === "checklist/search",📝 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.
| show: pathVar === "checklist/search" ? true : false, | |
| show: pathVar === "checklist/search", |
🧰 Tools
🪛 Biome (1.9.4)
[error] 63-63: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
| }, | ||
| { | ||
| path: pathVar === "update-dates-boundary" ? "" : `/${window?.contextPath}/employee/campaign/my-campaign`, | ||
| content: t("UPDATE_DATE_CHANGE"), | ||
| show: pathVar === "update-dates-boundary" ? true: false, | ||
| show: pathVar === "update-dates-boundary" ? true : false, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Simplify boolean expressions in breadcrumb logic.
The ternary expression that returns true or false can be simplified to direct boolean expression.
- show: pathVar === "update-dates-boundary" ? true : false,
+ show: pathVar === "update-dates-boundary",📝 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.
| show: pathVar === "update-dates-boundary" ? true : false, | |
| show: pathVar === "update-dates-boundary", |
🧰 Tools
🪛 Biome (1.9.4)
[error] 58-58: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
| }, | ||
| { | ||
| path: pathVar === "setup-campaign" ? "" : `/${window?.contextPath}/employee/campaign/setup-campaign`, | ||
| content: t("CREATE_NEW_CAMPAIGN"), | ||
| show: pathVar === "setup-campaign" ? true : false, | ||
| show: pathVar === "setup-campaign" ? true : false, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Simplify boolean expressions in breadcrumb logic.
The ternary expression that returns true or false can be simplified to direct boolean expression.
- show: pathVar === "setup-campaign" ? true : false,
+ show: pathVar === "setup-campaign",📝 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.
| show: pathVar === "setup-campaign" ? true : false, | |
| show: pathVar === "setup-campaign", |
🧰 Tools
🪛 Biome (1.9.4)
[error] 53-53: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
* Updated Core Version - user profile issues fix * BUGFIX/HCMPRE-243 : Allowing DUCE as branch and pr title name (#2270) Update branch-name-check.yml * Updated React Component Version * Updated Libraries version --------- Co-authored-by: Nipun Arora <aroranipun1@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (16)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (12)
62-62:⚠️ Potential issueGuard the spread operator against undefined.
This can throw at runtime ifitem?.cardsis undefined, as...undefinedin an array literal will cause a TypeError.- cards: [ - ...item?.cards, - { + cards: [ + ...(item?.cards || []), + { fields: [], ...🧰 Tools
🪛 Biome (1.9.4)
[error] 62-62: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
254-255: 🧹 Nitpick (assertive)Use Number.POSITIVE_INFINITY instead of the global Infinity.
UsingNumber.POSITIVE_INFINITYis aligned with ES2015 standards and typically preferred for consistency.- cacheTime: Infinity, - staleTime: Infinity, + cacheTime: Number.POSITIVE_INFINITY, + staleTime: Number.POSITIVE_INFINITY,🧰 Tools
🪛 Biome (1.9.4)
[error] 254-254: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
[error] 255-255: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
313-313: 🧹 Nitpick (assertive)Avoid leaving debug statements in production code.
Remove or comment outconsole.logonce the debugging phase is complete.- console.log(`${locale} localisation data sent successfully`); + // console.log(`${locale} localisation data sent successfully`);
333-333: 🧹 Nitpick (assertive)Add a unique key for array-based children.
React requires akeyprop when rendering elements in an array for proper reconciliation.- closedFooter={[<en />]} + closedFooter={[<en key="closedFooter-en" />]}🧰 Tools
🪛 Biome (1.9.4)
[error] 333-333: 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)
340-340: 🧹 Nitpick (assertive)Provide a key prop for each element in an array.
When returning arrays, each child must include a uniquekeyprop so React can identify updates correctly.- header={[ - <div className="typography heading-m" style={{ color: "#0B4B66" }}> + header={[ + <div key="div-header-field-config" className="typography heading-m" style={{ color: "#0B4B66" }}> {t("FIELD_CONFIGURATION")} </div>, ]}🧰 Tools
🪛 Biome (1.9.4)
[error] 340-340: 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)
384-384: 🧹 Nitpick (assertive)Pass children as JSX rather than an explicit array in props.
Using thechildrenprop with an empty array can trigger warnings; prefer proper JSX composition.- children={[]} + // Instead of passing an array to `children`, render the elements directly inside the component.🧰 Tools
🪛 Biome (1.9.4)
[error] 384-384: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
392-401: 🧹 Nitpick (assertive)Assign unique keys to items in the footerChildren array.
React needs distinct keys for each element in an array.- footerChildren={[ - <Button ... />, - ]} + footerChildren={[ + <Button key="close-preview-btn" ... />, + ]}🧰 Tools
🪛 Biome (1.9.4)
[error] 392-400: 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)
411-411: 🧹 Nitpick (assertive)Use JSX rather than passing an array through the
childrenprop.
Passing children as an array in props is discouraged in React.- children={[ - <div> + // Render your <div> directly within the PopUp component: + children={<div> ... </div>}🧰 Tools
🪛 Biome (1.9.4)
[error] 411-411: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
412-412: 🧹 Nitpick (assertive)Ensure each array element has a unique key.
React demands a uniquekeyprop on each array item.- <div> + <div key="localisation-entries"> { /* content here */ } </div>🧰 Tools
🪛 Biome (1.9.4)
[error] 412-412: 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)
415-418:⚠️ Potential issueSafeguard optional chaining when spreading arrays.
Ifcard?.fieldsorcard?.headerFieldsis undefined, then...[undefined]can cause a runtime error.- [ - ...card?.fields?.map((field) => ({ message: field?.label })), - ...card?.headerFields?.map((headerField) => ({ message: headerField?.value })), - ] + [ + ...(card?.fields ? card.fields.map((field) => ({ message: field.label })) : []), + ...(card?.headerFields ? card.headerFields.map((headerField) => ({ message: headerField.value })) : []), + ]🧰 Tools
🪛 Biome (1.9.4)
[error] 416-416: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 417-417: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
430-440: 🧹 Nitpick (assertive)Add unique keys to the array elements in the pop-up footer.
Each<Button>in an array must have a distinctkeyprop.- footerChildren={[ - <Button ... />, - <Button ... /> - ]} + footerChildren={[ + <Button key="popUp-close-btn" ... />, + <Button key="popUp-submit-btn" ... /> + ]}🧰 Tools
🪛 Biome (1.9.4)
[error] 430-438: 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] 439-439: 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)
455-456: 🧹 Nitpick (assertive)Assign unique keys to elements in the actionFields array.
React warns about missingkeyprops for array-rendered children.- actionFields={[ - <Button ... />, - <Button ... /> + actionFields={[ + <Button key="back-btn" ... />, + <Button key="next-btn" ... /> ]}🧰 Tools
🪛 Biome (1.9.4)
[error] 455-455: 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] 456-456: 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/components/AppPreview.js (4)
106-121: 🧹 Nitpick (assertive)Improve the DobPicker component implementation.
The DobPicker component has empty onChange handlers and only one disabled text input, which limits functionality. Either implement the actual handlers or make all inputs consistent for this preview component.
const DobPicker = ({ t }) => { return ( <div className="dob-picker"> <Card type="secondary"> <div>{t("HCM_DATE_OF_BIRTH")}</div> - <TextInput name="numeric" onChange={() => {}} type={"date"} /> + <TextInput name="numeric" onChange={() => {}} type={"date"} disabled={true} /> <div>({t("HCM_OR")})</div> <div>{t("HCM_AGE")}</div> <div className="date-style"> <TextInput name="numeric" onChange={() => {}} placeholder={t("HCM_YEARS")} disabled={true} /> <TextInput name="numeric" onChange={() => {}} placeholder={t("HCM_MONTHS")} disabled={true} /> </div> </Card> </div> ); };
123-193: 🧹 Nitpick (assertive)Enhance the renderField function with proper error handling.
The renderField function should include validation of inputs before processing to prevent potential errors if invalid props are passed.
const renderField = (field, t) => { + if (!field || !field.type) { + return <div style={{ color: "red", marginTop: "5px" }}>Invalid field configuration</div>; + } switch (field.type) { case "text": return <TextInput name="name" value={field?.name || ""} onChange={() => {}} disabled={true} />; // ...other cases default: - return <div style={{ color: "red", marginTop: "5px" }}>Unsupported field type: {field.type}</div>; + console.warn(`Unsupported field type: ${field.type}`); + return <div style={{ color: "red", marginTop: "5px" }}>Unsupported field type: {field.type}</div>; } };
195-229: 🧹 Nitpick (assertive)Improve component organization and accessibility.
The AppPreview component could benefit from better organization and accessibility features to ensure it's usable by all users.
const AppPreview = ({ data = dummydata }) => { - console.log("dataDummy", data); const { t } = useTranslation(); return ( <div className="app-preview"> <div className="mobile-top"> - <div className="mobile-menu-icon">☰</div> + <div className="mobile-menu-icon" aria-label={t("Menu")} role="button" tabIndex="0">☰</div> </div> {data.cards.map((card, index) => ( - <Card key={index}> + <Card key={`card-${index}`} role="region" aria-label={`Form section ${index + 1}`}> {card.headerFields.map((headerField, headerIndex) => ( - <div key={headerIndex}> - {console.log("NABEEL", headerField)} + <div key={`header-${index}-${headerIndex}`}> {headerField.jsonPath === "ScreenHeading" ? <CardHeader>{headerField.label}</CardHeader> : <CardText>{headerField.label}</CardText>} </div> ))} {card.fields .filter((field) => field.active) .map((field, fieldIndex) => ( - <div key={fieldIndex} style={{ margin: "10px 0" }}> + <div key={`field-${index}-${fieldIndex}`} style={{ margin: "10px 0" }}> <div> {field.label} {field.required && " *"} </div> {/* Call renderField function to render the specific component */} {renderField(field, t)} </div> ))} </Card> ))} </div> ); };
5-104: 🧹 Nitpick (assertive)Consider making the data object configurable.
The dummydata object is hardcoded with static values. For better reusability, consider moving this to a separate file or configuration. This would make it easier to update the preview data structure without modifying the component code.
-const dummydata = { +// Move this to a separate file, e.g., dummydata.js +export const defaultPreviewData = { name: "HOUSEHOLD_LOCATION", cards: [ // ... rest of the object ] }; // Then import it in the AppPreview.js file +import { defaultPreviewData } from './dummydata';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js(4 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.js`: check
**/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js
[error] 62-62: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 416-416: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 417-417: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 254-254: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 255-255: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 333-333: 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] 340-340: 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] 384-384: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 392-400: 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] 411-411: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 412-412: 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] 430-438: 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] 439-439: 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] 455-455: 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] 456-456: 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)
⏰ Context from checks skipped due to timeout of 10000ms (2)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js (3)
111-111: LGTM! Component replacement looks good.The
HeaderComponentis now being used consistently in place of the previousHeadercomponent.
159-166: Good addition of informational alert.The addition of the
AlertCardcomponent provides useful context to the user about campaign type updates.
168-210:⚠️ Potential issueFix PopUp implementation issues.
The popup implementation has several issues:
- It uses an array for children but also includes children in the component body
- The footer children are missing key props for iterable elements
{showPopUp && ( <PopUp className={"boundaries-pop-module"} type={"default"} heading={t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_HEADER")} - children={[ - <div> - <CardText style={{ margin: 0 }}>{t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT") + " "}</CardText> - </div>, - ]} onOverlayClick={() => { setShowPopUp(false); }} onClose={() => { setShowPopUp(false); }} footerChildren={[ <Button + key="cancel-button" className={"campaign-type-alert-button"} type={"button"} size={"large"} variation={"secondary"} label={t("ES_CAMPAIGN_BOUNDARY_MODAL_BACK")} onClick={() => { setShowPopUp(false); setCanUpdate(true); }} />, <Button + key="submit-button" className={"campaign-type-alert-button"} type={"button"} size={"large"} variation={"primary"} label={t("ES_CAMPAIGN_BOUNDARY_MODAL_SUBMIT")} onClick={() => { setShowPopUp(false); setCanUpdate(false); }} />, ]} sortFooterChildren={true} - ></PopUp> + > + <div> + <CardText style={{ margin: 0 }}>{t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT") + " "}</CardText> + </div> + </PopUp> )}🧰 Tools
🪛 Biome (1.9.4)
[error] 169-209: 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] 175-175: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
[error] 173-173: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 174-174: 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] 185-195: 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] 196-206: 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)
| @@ -1,8 +1,7 @@ | |||
| import React, { useState, useMemo, useRef, useEffect, Fragment } from "react"; | |||
| import { UploadIcon, FileIcon, DeleteIconv2, Toast, Header } from "@egovernments/digit-ui-react-components"; | |||
| import { UploadIcon, FileIcon, DeleteIconv2, Toast, Header } from "@egovernments/digit-ui-react-components"; | |||
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove unused Header import.
The Header component is imported but has been replaced with HeaderComponent as seen in line 111. Remove this unused import to keep the code clean.
-import { UploadIcon, FileIcon, DeleteIconv2, Toast, Header } from "@egovernments/digit-ui-react-components";
+import { UploadIcon, FileIcon, DeleteIconv2, Toast } from "@egovernments/digit-ui-react-components";📝 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 { UploadIcon, FileIcon, DeleteIconv2, Toast, Header } from "@egovernments/digit-ui-react-components"; | |
| -import { UploadIcon, FileIcon, DeleteIconv2, Toast, Header } from "@egovernments/digit-ui-react-components"; | |
| +import { UploadIcon, FileIcon, DeleteIconv2, Toast } from "@egovernments/digit-ui-react-components"; |
...cro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js
Outdated
Show resolved
Hide resolved
...cro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 24
♻️ Duplicate comments (9)
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (3)
4-8: 🧹 Nitpick (assertive)[Summary Header Spacing] Reconsider the use of
!importantin.summary-headermargin-bottom
The new declarationmargin-bottom: 1.5rem !important;may be required in some cases; however, please verify if increasing selector specificity can achieve the same effect without resorting to!important. This aligns with prior feedback.
152-156: 🧹 Nitpick (assertive)[Responsive Label Width] Cross-browser compatibility for
-webkit-fill-available
While-webkit-fill-availableworks in WebKit-based browsers, consider adding standard or alternative properties (e.g., usingwidth: 100%;with appropriate constraints) to ensure consistent rendering across all browsers.
301-326: 🛠️ Refactor suggestion[Custom Popup Mapping Styling] Review grid layout and
!importantusage
The custom popup mapping styling uses!importantforpadding-topand width settings within footer buttons. Consider refactoring these rules to minimize the reliance on!importantwhile ensuring the intended layout, and verify that the grid structure behaves responsively.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (1)
72-79: 🧹 Nitpick (assertive)Remove unreachable
breakstatements
After returning from the function, the subsequentbreaklines at 72 and 79 are never executed. Removing them clarifies control flow.return { validation: { min: field.min, max: field.max, }, }; - break; case "datePicker": ... - break;🧰 Tools
🪛 Biome (1.9.4)
[error] 72-72: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 79-79: 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/appConfigurationScreenParent/DrawerFieldComposer.js (4)
55-55: 🧹 Nitpick (assertive)Simplify boolean ternary usage
The ternarydrawerState?.[panelItem.label] ? true : falsecan be replaced with the shorter!!drawerState?.[panelItem.label].- isCheckedInitially={drawerState?.[panelItem.label] ? true : false} + isCheckedInitially={!!drawerState?.[panelItem.label]}🧰 Tools
🪛 Biome (1.9.4)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
212-212:⚠️ Potential issueAdd a unique key to array elements
Rendering items in a loop without a unique key prop can break React’s reconciliation process.-{drawerState?.dropDownOptions?.map((item, index) => ( - <div style={{ display: "flex", gap: "1rem" }}> +{drawerState?.dropDownOptions?.map((item) => ( + <div key={item.id} style={{ display: "flex", gap: "1rem" }}> ... </div> ))}🧰 Tools
🪛 Biome (1.9.4)
[error] 212-212: 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)
20-37: 🧹 Nitpick (assertive)Remove unreachable
breakstatements inwhenToShow
Each case in this switch returns a string before hittingbreak;, making thosebreak;statements unreachable. Removing them will clarify code flow.case "infoText": ... return "text"; - break; case "min": ... return "number"; - break; ...🧰 Tools
🪛 Biome (1.9.4)
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
235-253: 🧹 Nitpick (assertive)Add keyboard accessibility for onClick handler
Elements withonClickshould also handleonKeyUporonKeyDownfor keyboard-only navigation.<div onClick={() => ...} + onKeyUp={(event) => { + if (event.key === "Enter" || event.key === " ") { + setDrawerState((prev) => ({ + ...prev, + dropDownOptions: ... + })); + } + }} tabIndex={0} role="button" >🧰 Tools
🪛 Biome (1.9.4)
[error] 235-253: 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)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (1)
13-13:⚠️ Potential issueAdd a unique key for mapped elements
Each list item in<CheckBoxes>needs a uniquekeyto help React properly track changes in the list.-{option?.map((item, index) => ( - <CheckBox onChange={(e) => {}} value={""} label={t(`${item?.[optionKey]}`)} isLabelFirst={isLabelFirst} /> -))} +{option?.map((item, index) => ( + <CheckBox + key={item.id || index} + onChange={(e) => {}} + value={""} + label={t(`${item?.[optionKey]}`)} + isLabelFirst={isLabelFirst} + /> +))}🧰 Tools
🪛 Biome (1.9.4)
[error] 13-13: 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)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (9)
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss(4 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DraggableField.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.js`: check
**/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DraggableField.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js
[error] 71-71: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 38-38: 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] 40-59: 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] 66-107: 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/appConfigurationScreenParent/DrawerFieldComposer.js
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 157-157: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 235-253: 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] 270-270: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 212-212: 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/appConfigurationScreenParent/AppLocalisationWrapper.js
[error] 50-50: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js
[error] 81-96: 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] 152-168: 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] 215-231: 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] 277-293: 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] 339-355: 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] 400-416: 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] 462-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] 522-537: 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] 589-604: 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] 103-103: This code is unreachable
(lint/correctness/noUnreachable)
[error] 175-175: This code is unreachable
(lint/correctness/noUnreachable)
[error] 238-238: This code is unreachable
(lint/correctness/noUnreachable)
[error] 300-300: This code is unreachable
(lint/correctness/noUnreachable)
[error] 613-613: This code is unreachable
(lint/correctness/noUnreachable)
[error] 640-647: 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] 13-13: 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] 75-75: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 137-137: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 209-209: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 271-271: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 333-333: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 394-394: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 456-456: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 516-516: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 576-576: 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/appConfigurationScreenParent/ImpelComponentWrapper.js
[error] 72-72: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 79-79: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 13-13: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 14-14: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js
[error] 90-90: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 181-181: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 189-189: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 201-201: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 202-202: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 203-203: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 369-369: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 67-67: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 68-68: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js
[error] 62-62: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 416-416: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 417-417: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 254-254: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 255-255: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 333-333: 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] 340-340: 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] 384-384: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 392-400: 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] 411-411: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 412-412: 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] 430-438: 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] 439-439: 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] 455-455: 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] 456-456: 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)
🔇 Additional comments (36)
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (16)
132-137: [Generic Container Styling] Avoid potential naming clashes with.container
The new flex container defined here is useful; however, note that.containeris a very common class name. Make sure it does not inadvertently override or get overridden by styles elsewhere in the project.
186-189: [Hierarchy Heading Consistency] Double quotes for font-family are applied
The updated font-family declaration now uses double quotes for"Roboto Condensed", sans-serif, which aligns with style consistency.
192-197: [Hierarchy Sub-heading Styling] Consistent font declaration with double quotes
The changes for.hierarchy-boundary-sub-headingcorrectly apply double quotes to the font-family, ensuring consistency with other components.
199-203: [Hierarchy Sub-heading2 Styling] Verified font-family update
The updates for.hierarchy-boundary-sub-heading2reflect consistent styling practices.
204-208: [Campaign Preview Layout] Confirm flex display meets design requirements
The new flex-based layout for.campaign-previewis straightforward. Ensure that the gap and alignment suit the overall design aesthetics.
212-220: [Campaign Tag Styling Update] Confirm border and text adjustments
The border is now defined as0.5px solid #0b4b66(with a lowercase hex value) and the.digit-tag-texthas adjusted font properties. Please ensure the subtle border and text size render uniformly across devices.
229-231: [Data Mapping Dropdown Width] Reassess necessity of!important
The declarationmin-width: 13rem !important;ensures consistency; however, if possible, try to achieve this with more specific selectors to reduce reliance on!important.
237-241: [Multiselect Label Field Adjustment] Confirm layout proportions
The fixed width of69%for the first child in.digit-label-field-pair.multiselect-label-fieldis consistent with previous adjustments. Please verify that this does not break the layout on smaller screens.
248-256: [App Preview Card Styling] Consider usingborder: none;for clarity
While the current style usesborder: 0rem solid #ccc;, usingborder: none;could improve readability and maintainability. Confirm that the intended design is preserved.
283-285: [Flow Stepper Spacing] Simple margin update appears correct
The margin update for.appConfig-flow-stepperis minimal and seems acceptable.
286-290: [App Config Add Section] Confirm centering and spacing
Usingmargin-inline: auto;along with top and bottom margins should center the section appropriately. Please double-check on different viewports.
291-293: [Screen Card Margin] Margin update for screen cards looks good
Themargin-bottom: 2rem;for.appConfigScreenCardis clear and should work well with adjacent elements.
294-296: [App Config Label Field Label Width] Revisit fixed width on smaller screens
The fixed width of25remfor.appConfiglabelField-labelmight cause layout issues on smaller devices. If this style is essential for desktop, consider adding media queries for mobile responsiveness.
327-330: [Table Body Styling Overrides] Confirm necessity of!important
The usage of!importantin.rdt_TableBodyto enforce width and border might override necessary scoped styles. Please verify that this is the only solution to achieve the desired table styling without causing unintended side effects.
331-333: [RDT Table Styling] Validate full-width enforcement
Similar to.rdt_TableBody, thewidth: 100% !important;on.rdt_Tableshould be examined to ensure it does not conflict with other table styles.
138-141:❓ Verification inconclusive
[Stepper Card Dimensions] Verify the updated height and padding of
.stepper-card
Reducing the height to37remand removing the bottom margin (settingpadding-top: 0rem;) may affect the layout. Please confirm that this update complies with the overall design specifications and responsiveness requirements.
Below is a shell script to search for all occurrences of
.stepper-cardin the repository so we can check its usage context and verify whether the updated dimensions align with the design specifications:#!/bin/bash # Search for all references to ".stepper-card" across the repository, # which may reveal additional context or documentation regarding its design usage. rg "\.stepper-card" -n .Please run this script and share the results so we can ensure that reducing the height to
37remand settingpadding-topto0remcomplies with the overall design and responsiveness requirements.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js (4)
36-38: Add a unique key prop for each Card in the map.React needs a stable identifier for each item in a list. Failing to provide a key may cause performance issues and unexpected behavior when the list is re-ordered.
-<Card className="appConfigScreenCard"> +<Card className="appConfigScreenCard" key={index}>🧰 Tools
🪛 Biome (1.9.4)
[error] 38-38: 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)
39-60: Add a unique key prop for each AppFieldComposer in the headerFields map.Each element in a mapped array should have its own key prop.
-{headerFields?.map(({ type, label, active, required, value }, indx, cx) => ( - <AppFieldComposer - type={type} - ... - /> -))} +{headerFields?.map(({ type, label, active, required, value }, indx, cx) => ( + <AppFieldComposer + key={indx} + type={type} + ... + /> +))}🧰 Tools
🪛 Biome (1.9.4)
[error] 40-59: 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)
66-107: Add a unique key prop for each DraggableField in the fields map.This is required for React list rendering to ensure stable identity across re-renders.
-{fields?.map((field, i, c) => { - return ( - <DraggableField - type={field.type} - ... - /> - ); -})} +{fields?.map((field, i, c) => { + return ( + <DraggableField + key={i} + type={field.type} + ... + /> + ); +})}🧰 Tools
🪛 Biome (1.9.4)
[error] 71-71: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 66-107: 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)
71-71: Simplify the conditional expression for isDelete.Using a ternary with boolean literals is redundant. You can invert the logic or compare directly.
-isDelete={deleteFlag === false ? false : true} +isDelete={deleteFlag !== false}🧰 Tools
🪛 Biome (1.9.4)
[error] 71-71: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationWrapper.js (2)
17-17: Use a default block instead of 'case "default"'.When using switch statements in JavaScript, the fallback scenario should be handled by
default:rather than a case label named"default".- case "default": + default: return state;
50-50: Eliminate the unnecessary boolean literal in the ternary operator.Replace the ternary expression with a direct boolean check for improved clarity.
-isMultipleLocale: enabledModules?.length > 1 ? true : false, +isMultipleLocale: enabledModules?.length > 1,🧰 Tools
🪛 Biome (1.9.4)
[error] 50-50: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DraggableField.js (1)
4-4: Remove the unusedHTML5Backendimport.This import is never referenced, and deleting it will keep the codebase clean.
-import { HTML5Backend } from "react-dnd-html5-backend";health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (2)
13-14: Use Number.POSITIVE_INFINITY instead of Infinity
This update aligns with ES2015 guidelines and avoids direct usage of the global Infinity constant.- cacheTime: Infinity, - staleTime: Infinity, + cacheTime: Number.POSITIVE_INFINITY, + staleTime: Number.POSITIVE_INFINITY,🧰 Tools
🪛 Biome (1.9.4)
[error] 13-13: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
[error] 14-14: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
22-23: Improve function and variable naming
Use more descriptive parameter and return variable names to make the code more self-explanatory.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js (7)
25-45: Reducer logic is succinct and extensible
The dispatcher cleanly handles multiple actions and ensures the default case returns the current state. This approach is maintainable and straightforward.
67-68: Use Number.POSITIVE_INFINITY for consistency
This line uses the globalInfinity. ES2015 recommendsNumber.POSITIVE_INFINITY.- cacheTime: Infinity, - staleTime: Infinity, + cacheTime: Number.POSITIVE_INFINITY, + staleTime: Number.POSITIVE_INFINITY,🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
[error] 68-68: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
90-90: Eliminate unnecessary boolean ternary
Directly assign the result without using? true : false.- enabled: formId ? true : false, + enabled: !!formId,🧰 Tools
🪛 Biome (1.9.4)
[error] 90-90: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
189-189: Simplify unnecessary boolean ternary
Use direct boolean comparisons or double NOT to remove the extra ternary.- return { parent: i, active: index === 0 ? true : false, code: index + 1 }; + return { parent: i, active: index === 0, code: index + 1 };🧰 Tools
🪛 Biome (1.9.4)
[error] 189-189: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
201-203: Remove redundant boolean ternaries
Avoid returning? true : falsewhen a direct condition is sufficient.- isLast: j === t.length - 1 ? true : false, - isFirst: j === 0 ? true : false, - active: j === 0 ? true : false, + isLast: j === t.length - 1, + isFirst: j === 0, + active: j === 0,🧰 Tools
🪛 Biome (1.9.4)
[error] 201-201: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 202-202: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 203-203: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
369-369: Avoid spreading a potentially undefined array
Use a fallback array or conditional to prevent errors fromstepper?.map(...)ifstepperis undefined.- customSteps={[...stepper?.map((i) => i.name)]} + customSteps={stepper ? stepper.map((i) => i.name) : []}🧰 Tools
🪛 Biome (1.9.4)
[error] 369-369: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
226-232:✅ Verification successful
Verify safe access to data arrays
When variant is "app", ensureparentState?.currentTemplateandnumberTabsare never null prior to checking.length. A missing or undefined array can lead to unexpected behavior.
🏁 Script executed:
#!/bin/bash # Confirm that parentState.currentTemplate and numberTabs are defined or defaulted in all usage contexts rg --multiline --context 5 'currentTemplate|numberTabs'Length of output: 23848
Safe Data Access Confirmed
The current implementation already uses optional chaining and proper defaulting—such as
(parentState?.currentTemplate || [])and initializingnumberTabswith an empty array—to ensure safe access. Given that both arrays are verified to be defined or fallback to safe default values in all usage contexts whenvariantis "app", no changes are required.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (4)
62-62: Provide a fallback array to avoid spreading undefined
Ifitem?.cardsis undefined, this spread operator can throw an error.- ...item?.cards, + ...(item?.cards || []),🧰 Tools
🪛 Biome (1.9.4)
[error] 62-62: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
254-255: Use Number.POSITIVE_INFINITY over Infinity
ES2015 standards recommendNumber.POSITIVE_INFINITYfor consistency.- cacheTime: Infinity, - staleTime: Infinity, + cacheTime: Number.POSITIVE_INFINITY, + staleTime: Number.POSITIVE_INFINITY,🧰 Tools
🪛 Biome (1.9.4)
[error] 254-254: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
[error] 255-255: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
415-418: Safeguard optional chaining in.map()calls
Unconditionally calling.map()oncard?.fieldsorcard?.headerFieldscan cause a TypeError if either is undefined.- ...card?.fields?.map((field) => ({ message: field?.label })), - ...card?.headerFields?.map((headerField) => ({ message: headerField?.value })), + ...(card?.fields ? card.fields.map((field) => ({ message: field?.label })) : []), + ...(card?.headerFields ? card.headerFields.map((headerField) => ({ message: headerField?.value })) : []),🧰 Tools
🪛 Biome (1.9.4)
[error] 416-416: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 417-417: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
333-333: Assign unique keys for array‑rendered elements
When rendering elements in arrays (e.g., side panel contents, pop-up footers, children props), each element must have a uniquekeyprop. This helps React track and efficiently update these items.- closedFooter={[<en />]} + closedFooter={[<en key="localised-en" />]} - footerChildren={[ - <Button ... />, + footerChildren={[ + <Button key="close-btn" ... />, ...Apply similar changes for all mapped arrays or static child arrays.
Also applies to: 340-340, 392-400, 411-412, 430-440, 455-456
🧰 Tools
🪛 Biome (1.9.4)
[error] 333-333: 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)
| tr:hover { | ||
| td{ | ||
| td { | ||
| background: rgba(#f47738, 0.12); | ||
| cursor: pointer; | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Campaign Table Hover Effect] Verify hover state styling for table cells
The addition of cursor: pointer; on td within the tr:hover block improves interactivity. Double-check that the background color (rgba(#f47738, 0.12)) meets your design and accessibility standards across browsers.
| .setup-campaign { | ||
| .digit-success { | ||
| z-index: 1000; | ||
| } | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Setup Campaign Z-index] Confirm stacking context in .setup-campaign
The new .setup-campaign block setting .digit-success { z-index: 1000; } should be reviewed to ensure it overlays elements as intended without conflicting with other components.
| .digit-error { | ||
| z-index: 900; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Digit Error Z-index] Validate z-index for error messages
Assigning z-index: 900; to .digit-error appears appropriate, but please verify its interaction with other overlay elements to ensure consistent layered behavior.
| .timeline-user { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Timeline User Styling] Check flex layout for .timeline-user
The newly added flex properties should ensure proper distribution of child elements. Confirm that the layout behaves as expected on various screen sizes.
| .upcoming-timeline { | ||
| .timeline-label { | ||
| color: #b1b4b6; | ||
| } | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
[Upcoming Timeline Label] Confirm color usage for timeline labels
The nested .timeline-label now uses the specific color #b1b4b6. Please ensure that this color maintains sufficient contrast and aligns with your design system’s guidelines.
| return <AppLocalisationWrapper onSubmit={onSubmit} back={back} showBack={showBack} screenConfig={screenConfig} parentDispatch={parentDispatch} />; | ||
| } | ||
|
|
||
| export default React.memo(ImpelComponentWrapper); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Consider adding more robust error handling or validations
Currently, onSubmit passes data directly to the submit callback. If the data structure is missing critical fields or is malformed, no errors or warnings appear to be triggered.
Would you like an example of more comprehensive validation logic or a fallback to handle unexpected data?
| <div | ||
| onClick={(e) => { | ||
| onDelete(); | ||
| }} | ||
| style={{ | ||
| cursor: "pointer", | ||
| fontWeight: "600", | ||
| marginLeft: "1rem", | ||
| fontSize: "1rem", | ||
| color: PRIMARY_COLOR, | ||
| display: "flex", | ||
| gap: "0.5rem", | ||
| alignItems: "center", | ||
| marginTop: "1rem", | ||
| }} | ||
| > |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Ensure keyboard accessibility
All clickable divs have onClick but no corresponding keyboard event. Make them keyboard-accessible using onKeyUp (or onKeyDown) and add tabIndex and role="button" as needed. This benefits screen-reader and keyboard-only users.
Also applies to: 152-168, 215-231, 277-293, 339-355, 400-416, 462-477, 522-537, 589-604, 640-647
🧰 Tools
🪛 Biome (1.9.4)
[error] 81-96: 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)
| </LabelFieldPair> | ||
| </> | ||
| ); | ||
| break; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove unreachable break statements
After returning from the switch cases, break; lines at 103, 175, 238, 300, and 613 are not reached. Removing them makes control flow clearer.
Also applies to: 175-175, 238-238, 300-300, 613-613
🧰 Tools
🪛 Biome (1.9.4)
[error] 103-103: This code is unreachable
(lint/correctness/noUnreachable)
| const Tabs = ({ numberTabs, onTabChange }) => { | ||
| const { t } = useTranslation(); | ||
| return ( | ||
| <div className="campaign-tabs"> | ||
| {numberTabs.map((_, index) => ( | ||
| <button | ||
| key={index} | ||
| type="button" | ||
| className={`campaign-tab-head ${_.active === true ? "active" : ""} hover`} | ||
| onClick={() => onTabChange(_, index)} | ||
| > | ||
| <p style={{ margin: 0, position: "relative", top: "-0 .1rem" }}>{t(_.parent)}</p> | ||
| </button> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Encapsulate tab labels for i18n and reusability
The Tabs component correctly renders the supplied parent labels. However, consider wrapping each label and related logic in a shared or reusable function to more easily maintain and internationalize tab labels when the application grows.
| const submit = async (screenData) => { | ||
| if (variant === "web") { | ||
| if (formId && formData) { | ||
| const updatedFormData = formData[0]; | ||
|
|
||
| const newFormContent = screenData?.[0]; | ||
|
|
||
| // Update the data property while maintaining the required structure | ||
| updatedFormData.data = { | ||
| head: newFormContent.head, | ||
| description: newFormContent.description, | ||
| body: newFormContent.body, | ||
| }; | ||
| await updateMutate( | ||
| { | ||
| moduleName: "HCM-ADMIN-CONSOLE", | ||
| masterName: "FormBuilderFormComposerConfig", | ||
| data: updatedFormData, | ||
| }, | ||
| { | ||
| onError: (error, variables) => { | ||
| setShowToast({ key: "error", label: error?.message ? error?.message : error }); | ||
| }, | ||
| onSuccess: async (data) => { | ||
| setShowToast({ key: "success", label: "APP_CONFIGURATION_SUCCESS" }); | ||
| history.push( | ||
| `/${window.contextPath}/employee/campaign/form-builder-configuration?moduleName=HCM-ADMIN-CONSOLE&masterName=FormBuilderFormComposerConfig&formId=${data?.mdms?.[0]?.id}` | ||
| ); | ||
| }, | ||
| } | ||
| ); | ||
| } else { | ||
| await mutate( | ||
| { | ||
| moduleName: "HCM-ADMIN-CONSOLE", | ||
| masterName: "FormBuilderFormComposerConfig", | ||
| data: { ...screenData?.[0] }, | ||
| }, | ||
| { | ||
| onError: (error, variables) => { | ||
| setShowToast({ key: "error", label: error?.message ? error?.message : error }); | ||
| }, | ||
| onSuccess: async (data) => { | ||
| setShowToast({ key: "success", label: "APP_CONFIGURATION_SUCCESS" }); | ||
| history.push( | ||
| `/${window.contextPath}/employee/campaign/form-builder-configuration?moduleName=HCM-ADMIN-CONSOLE&masterName=FormBuilderFormComposerConfig&formId=${data?.mdms?.[0]?.id}` | ||
| ); | ||
| }, | ||
| } | ||
| ); | ||
| } | ||
| } else { | ||
| parentDispatch({ | ||
| key: "SETBACK", | ||
| data: screenData, | ||
| }); | ||
| if (stepper?.find((i) => i.active)?.isLast) { | ||
| const nextTabAvailable = numberTabs.some((tab) => tab.code > currentStep.code && tab.active); | ||
| await mutate( | ||
| { | ||
| moduleName: "HCM-ADMIN-CONSOLE", | ||
| masterName: "DummyAppConfig", | ||
| data: { ...screenData?.[0] }, | ||
| }, | ||
| { | ||
| onError: (error, variables) => { | ||
| setShowToast({ key: "error", label: error?.message ? error?.message : error }); | ||
| }, | ||
| onSuccess: async (data) => { | ||
| setShowToast({ key: "success", label: "APP_CONFIGURATION_SUCCESS" }); | ||
| history.push( | ||
| `/${window.contextPath}/employee/campaign/form-builder-configuration?moduleName=HCM-ADMIN-CONSOLE&masterName=DummyAppConfig&formId=${data?.mdms?.[0]?.id}` | ||
| ); | ||
| }, | ||
| } | ||
| ); | ||
| // if (nextTabAvailable) { | ||
| // setNumberTabs((prev) => { | ||
| // return prev.map((tab) => { | ||
| // // Activate only the next tab (currentStep.code + 1) | ||
| // if (tab.code === prev.find((j) => j.active).code + 1) { | ||
| // return { ...tab, active: true }; // Activate the next tab | ||
| // } | ||
| // return { ...tab, active: false }; // Deactivate all others | ||
| // }); | ||
| // }); | ||
| // return; | ||
| // } else { | ||
| // setShowToast({ key: "success", label: "APP_CONFIGURATION_SUCCESS" }); | ||
| // return; | ||
| // } | ||
| } else { | ||
| setCurrentStep((prev) => prev + 1); | ||
| } | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Prevent multiple concurrent form submissions
While the submission and mutation logic is correct, consider disabling or hiding the submit button while the request is in progress to avoid accidental double‑clicks and repeated requests.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (1)
222-222: 🧹 Nitpick (assertive)Refine boolean assignment
Avoid the? true : falsepattern; use a direct boolean or!!cast for clarity.-isCheckedInitially={drawerState?.isMdms ? true : false} +isCheckedInitially={!!drawerState?.isMdms}🧰 Tools
🪛 Biome (1.9.4)
[error] 222-222: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.js`: check
**/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js
[error] 123-138: 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] 194-210: 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] 269-285: 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] 333-349: 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] 395-411: 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] 457-473: 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] 518-534: 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] 580-595: 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] 640-655: 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] 707-722: 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] 145-145: This code is unreachable
(lint/correctness/noUnreachable)
[error] 217-217: This code is unreachable
(lint/correctness/noUnreachable)
[error] 292-292: This code is unreachable
(lint/correctness/noUnreachable)
[error] 356-356: This code is unreachable
(lint/correctness/noUnreachable)
[error] 418-418: This code is unreachable
(lint/correctness/noUnreachable)
[error] 731-731: This code is unreachable
(lint/correctness/noUnreachable)
[error] 758-765: 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] 13-13: 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] 117-117: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 179-179: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 251-251: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 327-327: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 389-389: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 451-451: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 512-512: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 574-574: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 634-634: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 694-694: 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/appConfigurationScreenParent/DrawerFieldComposer.js
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 157-157: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 222-222: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 270-288: 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] 305-305: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 247-247: 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)
🔇 Additional comments (10)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (5)
12-14: Add a unique key for mapped items
This mapping block lacks a unique key for each rendered element, which helps React track updates and reorder items efficiently.🧰 Tools
🪛 Biome (1.9.4)
[error] 13-13: 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)
117-117: Avoid passing elements as thechildrenprop
It's more conventional to nest the element between<TooltipWrapper>tags rather than using thechildrenprop.-<TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> +<TooltipWrapper content={t(helpText)}> + <InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} /> +</TooltipWrapper>Also applies to: 179-179, 251-251, 327-327, 389-389, 451-451, 512-512, 574-574, 634-634, 694-694
🧰 Tools
🪛 Biome (1.9.4)
[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)
123-138: Add keyboard event handlers for accessibility
Enabling keyboard interaction ensures accessibility for all users.-<div - onClick={(e) => { - onDelete(); - }} - style={{ ... }} -> +<div + onClick={(e) => { + onDelete(); + }} + onKeyUp={(e) => { + if (e.key === "Enter" || e.key === " ") { + onDelete(); + } + }} + tabIndex={0} + role="button" + style={{ ... }} +>🧰 Tools
🪛 Biome (1.9.4)
[error] 123-138: 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)
145-145: Remove unreachablebreakstatements
Eachreturnin the switch case already exits the function, so the subsequentbreakis never reached.switch(foo) { case "bar": return something; - break; default: return null; - break; }Also applies to: 217-217, 292-292, 356-356, 418-418, 731-731
🧰 Tools
🪛 Biome (1.9.4)
[error] 145-145: This code is unreachable
(lint/correctness/noUnreachable)
1-792: Overall Code Looks Good
No major functional blockers found, aside from the noted fixes and improvements.🧰 Tools
🪛 Biome (1.9.4)
[error] 123-138: 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] 194-210: 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] 269-285: 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] 333-349: 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] 395-411: 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] 457-473: 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] 518-534: 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] 580-595: 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] 640-655: 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] 707-722: 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] 145-145: This code is unreachable
(lint/correctness/noUnreachable)
[error] 217-217: This code is unreachable
(lint/correctness/noUnreachable)
[error] 292-292: This code is unreachable
(lint/correctness/noUnreachable)
[error] 356-356: This code is unreachable
(lint/correctness/noUnreachable)
[error] 418-418: This code is unreachable
(lint/correctness/noUnreachable)
[error] 731-731: This code is unreachable
(lint/correctness/noUnreachable)
[error] 758-765: 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] 13-13: 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] 117-117: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 179-179: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 251-251: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 327-327: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 389-389: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 451-451: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 512-512: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 574-574: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 634-634: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 694-694: 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/appConfigurationScreenParent/DrawerFieldComposer.js (5)
20-20: Remove unreachablebreakstatements
Eachreturnin these switch cases already terminates the flow, sobreakis never executed.switch (panelItem?.label) { case "infoText": return "text"; - break; default: return false; - break; }Also applies to: 25-25, 29-29, 32-32, 35-35, 157-157
🧰 Tools
🪛 Biome (1.9.4)
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
55-55: Simplify boolean ternary usage
No need to wrap a boolean expression with? true : false; directly pass the expression.-isCheckedInitially={drawerState?.[panelItem.label] ? true : false} +isCheckedInitially={!!drawerState?.[panelItem.label]}🧰 Tools
🪛 Biome (1.9.4)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
247-247: Add a unique key to dropdown items
A key prop is required for each item in an array for React to track changes.{drawerState?.dropDownOptions?.map((item, index) => ( - <div style={{ display: "flex", gap: "1rem" }}> + <div key={item.id} style={{ display: "flex", gap: "1rem" }}> ... </div> ))}🧰 Tools
🪛 Biome (1.9.4)
[error] 247-247: 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)
270-288: Add keyboard interactions for onClick
Ensure keyboard accessibility by adding an onKeyUp/Down handler,tabIndex, androle="button".-<div - onClick={() => { - ... - }} - style={{ ... }} -> +<div + onClick={() => { + ... + }} + onKeyUp={(e) => { + if (e.key === "Enter" || e.key === " ") { + ... + } + }} + tabIndex={0} + role="button" + style={{ ... }} +>🧰 Tools
🪛 Biome (1.9.4)
[error] 270-288: 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)
1-327: No Major Blockers - Good Job
These updates enhance custom drawer functionality. Thank you for promptly addressing prior feedback.🧰 Tools
🪛 Biome (1.9.4)
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 157-157: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 222-222: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 270-288: 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] 305-305: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 247-247: 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 | ||
| onClick={(e) => { | ||
| // e.stopPropagation(); | ||
| onDelete(); | ||
| }} | ||
| style={{ | ||
| cursor: "pointer", | ||
| fontWeight: "600", | ||
| marginLeft: "1rem", | ||
| fontSize: "1rem", | ||
| color: PRIMARY_COLOR, | ||
| display: "flex", | ||
| gap: "0.5rem", | ||
| alignItems: "center", | ||
| marginTop: "1rem", | ||
| }} | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Include keyboard events for clickable divs
These elements rely solely on onClick, preventing keyboard-only users from triggering them. Add an appropriate keyboard handler along with tabIndex and role="button".
-<div
- onClick={...}
- style={{ ... }}
->
+<div
+ onClick={...}
+ onKeyUp={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ // same logic as onClick
+ }
+ }}
+ tabIndex={0}
+ role="button"
+ style={{ ... }}
+>Also applies to: 269-285, 333-349, 395-411, 457-473, 518-534, 580-595, 640-655, 707-722, 758-765
🧰 Tools
🪛 Biome (1.9.4)
[error] 194-210: 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)
...ules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js
Show resolved
Hide resolved
#2273) * FEATURE/HCMPRE-1000 : Added Localization code for Rows Per Page in Data Table * Fixed import
Api call loop fixes and mapping screen fixes Co-authored-by: NabeelAyubee <nayubi7@gmail.com>
* Api call loop fixes and mapping screen fixes * fixes stepper click --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com>
import loader fix Co-authored-by: NabeelAyubee <nayubi7@gmail.com>
…2286) Loader For uploading
* Donwload Template Loader * typo in name
* localisation module added for checklsit * consoles removed * review changes * changes * integrated with new components and removed hardcoded locales * fix * change * integrated with tab * added update localisation messages * changes css version --------- Co-authored-by: Bhavya-egov <bhavya.mangal@egovernments.org> Co-authored-by: Bhavya-egov <137176879+Bhavya-egov@users.noreply.github.com>
* CO-Delivery Rerender UI fixes * Update health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Added draft validator function which takes in plan-config object and tells whether draft can be downloaded or not
…ng (#2303) Fixed Search Results Update Issue-Facility Mapping
There was a problem hiding this comment.
Actionable comments posted: 19
♻️ Duplicate comments (21)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/index.js (1)
67-68: 🧹 Nitpick (assertive)Consider removing empty sample function if not used.
The
samplefunction in the browser object appears to be empty and may not serve any purpose. Consider removing it if it's not being used elsewhere in the codebase.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js (1)
63-107: 🧹 Nitpick (assertive)Add a unique key prop to the
<DraggableField>element and simplify the ternary expression.
- Each
<DraggableField>in a mapped list requires a distinctkeyprop.- The
isDeleteprop can be simplified by removing unnecessary boolean literals.Below is an example diff that covers both suggestions:
{fields?.map( ({ ...args, deleteFlag }, i, c) => { return ( - <DraggableField + <DraggableField + key={i} isDelete={deleteFlag === false ? false : true} ... /> ); } )}- isDelete={deleteFlag === false ? false : true} + isDelete={deleteFlag !== false}🧰 Tools
🪛 Biome (1.9.4)
[error] 70-70: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 65-106: 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/appConfigurationScreenParent/DrawerFieldComposer.js (7)
10-36: 🧹 Nitpick (assertive)Remove unreachable
breakstatements afterreturn.Within the
whenToShowfunction, eachreturncompletes execution of the switch case. Therefore,break;statements followingreturncalls are unreachable and can be removed.case "text": return "text"; - break; case "number": return "number"; - break; ... default: return false; - break;🧰 Tools
🪛 Biome (1.9.4)
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
55-55: 🧹 Nitpick (assertive)Simplify the boolean ternary for
isCheckedInitially.Use direct boolean evaluation instead of
?: true : falsefor better readability.- isCheckedInitially={drawerState?.[panelItem.label] ? true : false} + isCheckedInitially={!!drawerState?.[panelItem.label]}🧰 Tools
🪛 Biome (1.9.4)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
278-278: 🧹 Nitpick (assertive)Use a direct boolean expression instead of
? true : false.This shortens code and reduces potential confusion.
- isCheckedInitially={drawerState?.isMdms ? true : false} + isCheckedInitially={!!drawerState?.isMdms}🧰 Tools
🪛 Biome (1.9.4)
[error] 278-278: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
293-293: 🧹 Nitpick (assertive)Use direct evaluation for the
isApitoggle.Same reasoning applies here to reduce redundant boolean literals.
- isCheckedInitially={drawerState?.isApi ? true : false} + isCheckedInitially={!!drawerState?.isApi}🧰 Tools
🪛 Biome (1.9.4)
[error] 293-293: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
329-329: 🧹 Nitpick (assertive)Add a
keyprop to elements in<dropDownOptions>.map().Each item in the list needs a unique
keyproperty to help React manage state changes efficiently.{drawerState?.dropDownOptions?.map((item, index) => ( - <div style={{ display: "flex", gap: "1rem" }}> + <div key={item.id ?? index} style={{ display: "flex", gap: "1rem" }}> ... </div> ))}🧰 Tools
🪛 Biome (1.9.4)
[error] 329-329: 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)
352-370: 🧹 Nitpick (assertive)Provide keyboard event support for accessibility.
Actions triggered by onClick should also be accessible via keyboard events. Consider adding
onKeyUporonKeyDownand usingrole="button"with a proper tabIndex.Do you want me to open a ticket to add keyboard navigation support for these interactive elements?
🧰 Tools
🪛 Biome (1.9.4)
[error] 352-370: 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)
414-435: 🧹 Nitpick (assertive)Include a
keyprop for child elements passed viafooterChildren.When returning a list of elements, each should have a unique key for React to handle updates properly.
footerChildren={[ - <Button ... />, - <Button ... />, + <Button key="closeBtn" ... />, + <Button key="confirmBtn" ... />, ]}🧰 Tools
🪛 Biome (1.9.4)
[error] 414-423: 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] 424-434: 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/appConfigurationScreenParent/AppConfigurationParentLayer.js (2)
202-205: 🧹 Nitpick (assertive)Simplify boolean ternaries in
isLast,isFirst, andactive.
These assignments can be direct without the? true : false.-isLast: j === t.length - 1 ? true : false, -isFirst: j === 0 ? true : false, -active: j === 0 ? true : false, +isLast: j === t.length - 1, +isFirst: j === 0, +active: j === 0,🧰 Tools
🪛 Biome (1.9.4)
[error] 202-202: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 203-203: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 204-204: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
389-389: 🛠️ Refactor suggestionGuard optional chaining when spreading arrays.
stepper?.map(...)can throw an error ifstepperisundefined. Provide a fallback.- customSteps={[...stepper?.map((i) => i.name)]} + customSteps={stepper ? stepper.map((i) => i.name) : []}🧰 Tools
🪛 Biome (1.9.4)
[error] 389-389: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (2)
22-46: 🧹 Nitpick (assertive)Improve naming for readability.
Variables liketempandxxcan be renamed for clarity (e.g.,inputDataandstructuredPages).-function restructure(temp) { - const xx = temp.map((item, index, arr) => { +function restructure(inputData) { + const structuredPages = inputData.map((item, index, arr) => {
161-169: 🧹 Nitpick (assertive)Consider validation before calling
submit.
onSubmitcould fail ifstate?.screenDatais missing. Validate the data to prevent errors.const onSubmit = (state) => { + if (!state?.screenData) { + console.error("No screen data provided!"); + return; + } ... }health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (2)
415-417:⚠️ Potential issueHandle undefined
.map()calls.
The chained.map((field) => ...)can fail ifcard?.fieldsorcard?.headerFieldsis undefined.+(card?.fields || []).map((field) => ({ message: field?.label })), +(card?.headerFields || []).map((headerField) => ({ message: headerField?.value })),🧰 Tools
🪛 Biome (1.9.4)
[error] 415-415: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 416-416: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
62-62: 🧹 Nitpick (assertive)Guard your optional chaining usage.
Spreading or accessingitem?.cardsmight throw an error ifcardsis undefined. Provide a fallback array.cards: [ - ...item?.cards, + ...(item?.cards || []), { fields: [], ... }, ],🧰 Tools
🪛 Biome (1.9.4)
[error] 62-62: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (6)
83-144:⚠️ Potential issueSwitch case for "text" or "textInput" fields.
- The break statement after the return is unreachable.
- Prefer removing the
break;to avoid confusion.return ( <> ... </> ); - break;🧰 Tools
🪛 Biome (1.9.4)
[error] 123-138: 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] 117-117: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
802-809: 🛠️ Refactor suggestionAdd keyboard accessibility to onClick container.
For accessibility, also handleonKeyUporonKeyDownwithrole="button",tabIndex="0"so keyboard users can interact.<div ref={componentRef} onClick={(e) => { onSelectField(); }} + onKeyUp={(e) => { if (e.key === "Enter" || e.key === " ") onSelectField(); }} + role="button" + tabIndex="0" className="app-config-field-wrapper" style={{ width: "50%" }} >🧰 Tools
🪛 Biome (1.9.4)
[error] 802-809: 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)
9-17:⚠️ Potential issueAdd a unique key for mapped CheckBoxes.
When mapping overoption?.map(...), each rendered<CheckBox>should have akeyprop.{option?.map((item, index) => ( - <CheckBox onChange={(e) => {}} value={""} label={t(`${item?.[optionKey]}`)} isLabelFirst={isLabelFirst} /> + <CheckBox + key={index} + onChange={(e) => {}} + value={""} + label={t(`${item?.[optionKey]}`)} + isLabelFirst={isLabelFirst} + /> ))}🧰 Tools
🪛 Biome (1.9.4)
[error] 13-13: 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)
294-356: 🧹 Nitpick (assertive)dobPicker / datePicker fields.
- The break after
returnis unreachable.- Consider adding min/max date constraints if needed.
- break;🧰 Tools
🪛 Biome (1.9.4)
[error] 333-349: 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] 356-356: This code is unreachable
(lint/correctness/noUnreachable)
[error] 327-327: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
603-662: 🧹 Nitpick (assertive)Switch case for "textarea".
- The break after
returnis unreachable.- Confirm if multiline behavior meets your requirements.
- break;🧰 Tools
🪛 Biome (1.9.4)
[error] 640-655: 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] 634-634: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
663-729: 🧹 Nitpick (assertive)Switch case for "mobileNumber".
- The break after
returnis unreachable.- You may consider basic validation for the phone number format (length, digits only, etc.).
- break;🧰 Tools
🪛 Biome (1.9.4)
[error] 707-722: 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] 694-694: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (11)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/index.js(3 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useUpsertSchemaConfig.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js(8 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.js`: check
**/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useUpsertSchemaConfig.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/index.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js
🧬 Code Definitions (10)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js (9)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (5)
useAppConfigContext(17-19)useAppConfigContext(17-19)searchParams(243-243)useTranslation(241-241)state(239-239)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (2)
useAppConfigContext(798-798)useTranslation(797-797)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (5)
useAppConfigContext(164-164)searchParams(41-41)projectType(42-42)useTranslation(40-40)useTranslation(162-162)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js (4)
searchParams(52-52)formId(55-55)useTranslation(8-8)useTranslation(49-49)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (1)
searchParams(6-6)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (3)
searchParams(30-30)formId(35-35)useTranslation(29-29)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (2)
location(105-105)useTranslation(28-28)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationTable.js (1)
useTranslation(8-8)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/useCustomT.js (2)
useCustomT(3-20)useCustomT(3-20)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js (9)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js (1)
useTranslation(7-7)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (1)
useTranslation(241-241)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/OldCampaignCard.js (1)
useTranslation(18-18)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (1)
useTranslation(797-797)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js (2)
useTranslation(8-8)useTranslation(49-49)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js (1)
useTranslation(15-15)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (1)
useTranslation(29-29)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (1)
useTranslation(28-28)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (2)
useTranslation(40-40)useTranslation(162-162)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js (2)
searchParams(12-12)projectType(13-13)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (1)
searchParams(6-6)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/useCustomT.js (3)
useCustomT(3-20)useCustomT(3-20)useAppLocalisationContext(8-8)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationWrapper.js (3)
updateLocalization(37-42)useAppLocalisationContext(7-9)useAppLocalisationContext(7-9)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js (5)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (3)
tenantId(240-240)MODULE_CONSTANTS(235-235)searchParams(243-243)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (1)
Digit(33-44)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (4)
tenantId(31-31)searchParams(30-30)masterName(33-33)formId(35-35)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (2)
AppConfigurationParentLayer(116-116)location(105-105)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationWrapper.js (1)
MODULE_CONSTANTS(30-30)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (3)
searchParams(243-243)tenantId(240-240)module(245-245)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (1)
searchParams(6-6)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationWrapper.js (6)
initialState(4-4)updateLocalization(37-42)MODULE_CONSTANTS(30-30)useAppLocalisationContext(7-9)useAppLocalisationContext(7-9)locState(33-33)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationTable.js (4)
useAppLocalisationContext(25-25)useTranslation(8-8)AppLocalisationTable(24-70)AppLocalisationTable(24-70)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (7)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js (4)
MODULE_CONSTANTS(51-51)searchParams(52-52)isLoadingAppConfigMdmsData(62-74)Digit(163-163)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (4)
MODULE_CONSTANTS(235-235)searchParams(243-243)fieldMasterName(244-244)isLoadingAppConfigMdmsData(249-269)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationWrapper.js (1)
MODULE_CONSTANTS(30-30)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (1)
searchParams(41-41)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (1)
searchParams(30-30)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (1)
location(105-105)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (1)
Digit(33-44)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useUpsertSchemaConfig.js (4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationParentLayer.js (2)
tenantId(48-48)Digit(163-163)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (1)
tenantId(240-240)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (1)
tenantId(31-31)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (1)
Digit(33-44)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (3)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js (2)
Digit(42-42)SetupCampaign(29-1104)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/FormBuilder.js (1)
FormBuilder(7-60)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (1)
SchemaBuilder(28-77)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (9)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (1)
useTranslation(29-29)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js (3)
useTranslation(241-241)useAppConfigContext(17-19)useAppConfigContext(17-19)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/DrawerFieldComposer.js (3)
useTranslation(40-40)useTranslation(162-162)useAppConfigContext(164-164)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js (2)
useTranslation(15-15)useAppConfigContext(11-11)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/OldCampaignCard.js (1)
useTranslation(18-18)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js (1)
useTranslation(196-196)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (1)
useTranslation(28-28)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js (1)
useTranslation(28-28)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppLocalisationTable.js (1)
useTranslation(8-8)
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js
[error] 70-70: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 38-38: 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] 40-59: 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] 65-106: 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/appConfigurationScreenParent/DrawerFieldComposer.js
[error] 20-20: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 25-25: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 29-29: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 32-32: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 35-35: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 55-55: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 157-157: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 223-223: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 278-278: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 293-293: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 352-370: 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] 387-387: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 329-329: 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] 409-409: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 414-423: 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] 424-434: 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/appConfigurationScreenParent/AppConfigurationParentLayer.js
[error] 90-90: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 182-182: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 190-190: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 202-202: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 203-203: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 204-204: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 389-389: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 67-67: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 68-68: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppConfigurationWrapper.js
[error] 62-62: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 415-415: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 416-416: Unsafe usage of optional chaining.
If it short-circuits with 'undefined' the evaluation will throw TypeError here:
(lint/correctness/noUnsafeOptionalChaining)
[error] 254-254: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 255-255: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 332-332: 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] 339-339: 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] 383-383: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 391-399: 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] 410-410: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 411-411: 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] 429-437: 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] 438-438: 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] 454-454: 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] 455-455: 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/appConfigurationScreenParent/ImpelComponentWrapper.js
[error] 76-76: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 83-83: This code is unreachable
... because this statement will return from the function beforehand
(lint/correctness/noUnreachable)
[error] 13-13: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 14-14: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useUpsertSchemaConfig.js
[error] 5-5: This is an unexpected use of the debugger statement.
Unsafe fix: Remove debugger statement
(lint/suspicious/noDebugger)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js
[error] 42-49: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 54-54: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 59-59: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 64-64: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js
[error] 123-138: 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] 194-210: 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] 269-285: 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] 333-349: 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] 395-411: 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] 457-473: 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] 518-534: 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] 580-595: 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] 640-655: 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] 707-722: 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] 753-768: 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] 145-145: This code is unreachable
(lint/correctness/noUnreachable)
[error] 217-217: This code is unreachable
(lint/correctness/noUnreachable)
[error] 292-292: This code is unreachable
(lint/correctness/noUnreachable)
[error] 356-356: This code is unreachable
(lint/correctness/noUnreachable)
[error] 418-418: This code is unreachable
(lint/correctness/noUnreachable)
[error] 775-775: This code is unreachable
(lint/correctness/noUnreachable)
[error] 802-809: 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] 13-13: 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] 117-117: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 179-179: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 251-251: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 327-327: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 389-389: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 451-451: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 512-512: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 574-574: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 634-634: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 694-694: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🔇 Additional comments (30)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/index.js (2)
20-25: LGTM! Good addition of new hooks.The new hooks are properly imported and added to the campaign object, which enhances the functionality for schema configuration management, form building, and Excel data handling.
Also applies to: 51-58
73-74: LGTM! Proper formatting.The trailing comma added to the campaign object in Utils improves code consistency and makes future additions easier.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js (4)
106-121: Improve the DobPicker component implementationThe DobPicker component has inconsistent behavior - the date input is interactive while age inputs are disabled. Consider making all inputs disabled for consistency in this preview component.
- <TextInput name="numeric" onChange={() => {}} type={"date"} /> + <TextInput name="numeric" onChange={() => {}} type={"date"} disabled={true} />
123-193: Enhance error handling and validation in the renderField functionThe renderField function needs better error handling for edge cases and doesn't validate field configurations before rendering.
-const renderField = (field, t) => { +const renderField = (field, t) => { + if (!field || !field.type) { + return <div style={{ color: "red", marginTop: "5px" }}>Invalid field configuration</div>; + } + switch (field.type) { // cases... default: - return <div style={{ color: "red", marginTop: "5px" }}>Unsupported field type: {field.type}</div>; + console.warn(`Unsupported field type: ${field.type}`); + return <div style={{ color: "red", marginTop: "5px" }}>Unsupported field type: {field.type}</div>; } };
195-226: Improve component organization and accessibilityThe AppPreview component needs better key management and accessibility attributes. Consider using more semantic keys and adding appropriate ARIA attributes.
{data.cards.map((card, index) => ( - <Card key={index}> + <Card key={`card-${index}`} role="region" aria-label={`Form section ${index + 1}`}> {card.headerFields + .filter((headerField) => headerField.active) .map((headerField, headerIndex) => ( - <div key={headerIndex}> + <div key={`header-${index}-${headerIndex}`}> {headerField.jsonPath === "ScreenHeading" ? <CardHeader>{headerField.label}</CardHeader> : <CardText>{headerField.label}</CardText>} </div> ))} {card.fields .filter((field) => field.active) .map((field, fieldIndex) => ( - <div key={fieldIndex} style={{ margin: "10px 0" }}> + <div key={`field-${index}-${fieldIndex}`} style={{ margin: "10px 0" }}> <div> {field.label} {field.required && " *"} </div> {renderField(field, t)} </div> ))}
5-104: Consider making the dummydata object configurable from an external sourceThe current implementation uses a hardcoded static data object. For better flexibility and testing, consider moving this to a separate file or loading it dynamically.
-const dummydata = { +// Import from a separate configuration file +import { defaultFormConfig } from './defaultFormConfig'; + +// Or define it in a separate file and export it +export const dummydata = { // ...configuration }; -const AppPreview = ({ data = dummydata }) => { +// Use the imported or exported configuration +const AppPreview = ({ data = defaultFormConfig }) => {Also applies to: 195-196
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldScreenWrapper.js (2)
36-38: Add a unique key prop to the<Card>element.When mapping over arrays in React, each element needs a unique
keyprop to help React track and manage list changes more efficiently.You can fix this by adding a
keyprop, for example:{currentCard?.cards?.map(({ fields, description, header, headerFields }, index, card) => { return ( - <Card className="appConfigScreenCard"> + <Card className="appConfigScreenCard" key={index}> ... </Card> ); })}🧰 Tools
🪛 Biome (1.9.4)
[error] 38-38: 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)
39-60: Add a unique key prop to the<AppFieldComposer>element.Similar to the previous comment, when using map to render multiple
<AppFieldComposer>elements, ensure each item has a uniquekeyprop.Here’s a quick fix:
{headerFields?.map(({ type, label, active, required, value }, indx, cx) => ( - <AppFieldComposer + <AppFieldComposer + key={indx} type={type} ... /> ))}🧰 Tools
🪛 Biome (1.9.4)
[error] 40-59: 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/appConfigurationScreenParent/DrawerFieldComposer.js (1)
157-157: Remove unreachablebreakafterreturn null.Once
nullis returned, the switch case is exited, making thebreak;redundant.🧰 Tools
🪛 Biome (1.9.4)
[error] 157-157: 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/appConfigurationScreenParent/AppConfigurationParentLayer.js (2)
67-68: UseNumber.POSITIVE_INFINITYinstead ofInfinity.
ES2015 recommends usingNumber.POSITIVE_INFINITYfor consistency. This is a repeated suggestion from past reviews.- cacheTime: Infinity, - staleTime: Infinity, + cacheTime: Number.POSITIVE_INFINITY, + staleTime: Number.POSITIVE_INFINITY,🧰 Tools
🪛 Biome (1.9.4)
[error] 67-67: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
[error] 68-68: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
90-90: Avoid unnecessary ternary for booleans.
ChangeformId ? true : falseto a direct boolean conversion (!!formId) for clarity. This has been flagged previously.- enabled: formId ? true : false, + enabled: !!formId,🧰 Tools
🪛 Biome (1.9.4)
[error] 90-90: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (1)
13-14: UseNumber.POSITIVE_INFINITYinstead ofInfinity.
This ensures alignment with ES2015 standards.- cacheTime: Infinity, - staleTime: Infinity, + cacheTime: Number.POSITIVE_INFINITY, + staleTime: Number.POSITIVE_INFINITY,🧰 Tools
🪛 Biome (1.9.4)
[error] 13-13: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
[error] 14-14: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.(lint/style/useNumberNamespace)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (11)
7-7: No issues with the named import.
This import statement correctly brings in the named exportCreateChecklist.
17-19: Imports for new components are consistent.
The usage ofFetchFromMicroplan,FormBuilder, andSchemaBuilderis verified in the routes below, so there are no concerns.
29-29: No significant changes detected.
This line change appears to be whitespace or a minor addition, with no functional impact.
41-49: Simplify boolean expression.
Ternary returningtrue : falsecan be replaced by a direct boolean expression to improve readability. This was previously raised by other reviewers.- show: - pathVar === "my-campaign" || - pathVar === "checklist/search" || - pathVar === "checklist/create" || - pathVar === "checklist/view" || - pathVar === "checklist/update" || - pathVar === "update-dates-boundary" - ? true - : false, + show: + pathVar === "my-campaign" || + pathVar === "checklist/search" || + pathVar === "checklist/create" || + pathVar === "checklist/view" || + pathVar === "checklist/update" || + pathVar === "update-dates-boundary",🧰 Tools
🪛 Biome (1.9.4)
[error] 42-49: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
54-54: Simplify boolean expression.
Use direct boolean evaluation instead of? true : false. This was also previously noted.- show: pathVar === "setup-campaign" ? true : false, + show: pathVar === "setup-campaign",🧰 Tools
🪛 Biome (1.9.4)
[error] 54-54: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
59-59: Simplify boolean expression.
Use direct boolean evaluation instead of? true : false.- show: pathVar === "update-dates-boundary" ? true : false, + show: pathVar === "update-dates-boundary",🧰 Tools
🪛 Biome (1.9.4)
[error] 59-59: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
64-64: Simplify boolean expression.
Use direct boolean evaluation instead of? true : false.- show: pathVar === "checklist/search" ? true : false, + show: pathVar === "checklist/search",🧰 Tools
🪛 Biome (1.9.4)
[error] 64-64: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
90-90: Simplify boolean expression.
Use direct boolean evaluation instead of? true : false.- show: pathVar.match("update-campaign") ? true : false, + show: !!pathVar.match("update-campaign"),
148-151: Route for setting up a campaign is properly defined.
No issues found. The route naming and hierarchy params look consistent.
163-166: Boundary management routes look consistent.
All four routes appear logically grouped. No concerns on naming or usage.
169-171: New app configuration routes.
No issues with these routes. They appear to successfully point to the relevant components.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/AppFieldComposer.js (7)
1-8: Imports and initial setup look good.
The selected imports align with usage in this file. TheuseTranslationhook and a customuseAppConfigContextare properly used.
19-59: MDMS Dropdown usage is consistent, but verify fallback.
The component checksmoduleNameandmasterNamebefore rendering. Ensure you handle cases where data is empty or never loads. A loading UI is provided, so no additional changes are required.
357-418: Switch case for "counter".
Break is unreachable. Remove it to follow best practices.- break;🧰 Tools
🪛 Biome (1.9.4)
[error] 395-411: 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] 418-418: This code is unreachable
(lint/correctness/noUnreachable)
[error] 389-389: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
481-541: Switch case for "checkbox".
- The break is unreachable.
- Each
<CheckBox>is rendered in a subcomponent; the key fix was addressed above.- break;🧰 Tools
🪛 Biome (1.9.4)
[error] 518-534: 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] 512-512: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
542-602: Switch case for "time".
- The break after
returnis unreachable.- Consider adding 24-hour vs. 12-hour format controls.
🧰 Tools
🪛 Biome (1.9.4)
[error] 580-595: 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] 574-574: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
835-836: Memo usage for performance is good.
ExportingAppFieldComposerwrapped inReact.memocan help prevent unnecessary re-renders. No issues found.
419-480: 🧹 Nitpick (assertive)Switch case for "number".
- The break after
returnis unreachable.- Consider validating numeric inputs (e.g., using
patternor min/max).- break;Likely an incorrect or invalid review comment.
🧰 Tools
🪛 Biome (1.9.4)
[error] 457-473: 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] 451-451: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
| const useUpsertSchemaConfig = (tenantId) => { | ||
| return useMutation((reqData) => { | ||
| return upsertSchemaConfig(reqData, tenantId); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Add JSDoc documentation to the hook.
Consider adding JSDoc documentation to the useUpsertSchemaConfig hook to describe its purpose, parameters, and return value.
+/**
+ * Custom hook for upserting schema configuration
+ * @param {string} tenantId - The tenant ID for the configuration
+ * @returns {Object} - The mutation object from react-query
+ */
const useUpsertSchemaConfig = (tenantId) => {📝 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.
| const useUpsertSchemaConfig = (tenantId) => { | |
| return useMutation((reqData) => { | |
| return upsertSchemaConfig(reqData, tenantId); | |
| }); | |
| }; | |
| /** | |
| * Custom hook for upserting schema configuration | |
| * @param {string} tenantId - The tenant ID for the configuration | |
| * @returns {Object} - The mutation object from react-query | |
| */ | |
| const useUpsertSchemaConfig = (tenantId) => { | |
| return useMutation((reqData) => { | |
| return upsertSchemaConfig(reqData, tenantId); | |
| }); | |
| }; |
| } catch (error) { | ||
| throw new Error(error?.response?.data?.Errors?.[0].description); | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Enhance error handling.
The current error handling only extracts the description from the error response. Consider adding more comprehensive error handling for cases when the error structure might be different.
} catch (error) {
- throw new Error(error?.response?.data?.Errors?.[0].description);
+ const errorMessage = error?.response?.data?.Errors?.[0]?.description || 'Failed to upsert schema configuration';
+ throw new Error(errorMessage);
}📝 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) { | |
| throw new Error(error?.response?.data?.Errors?.[0].description); | |
| } | |
| } catch (error) { | |
| const errorMessage = error?.response?.data?.Errors?.[0]?.description || 'Failed to upsert schema configuration'; | |
| throw new Error(errorMessage); | |
| } |
|
|
||
| const upsertSchemaConfig = async (req, tenantId) => { | ||
| try { | ||
| debugger; |
There was a problem hiding this comment.
Remove the debugger statement.
Debugger statements should not be left in production code as they can cause the application to pause execution in development environments.
- debugger;📝 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.
| debugger; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: This is an unexpected use of the debugger statement.
Unsafe fix: Remove debugger statement
(lint/suspicious/noDebugger)
| const upsertSchemaConfig = async (req, tenantId) => { | ||
| try { | ||
| debugger; | ||
|
|
||
| const mdms_context_path = window?.globalConfigs?.getConfig("MDMS_V2_CONTEXT_PATH") || "mdms-v2"; | ||
|
|
||
| const response = await Digit.CustomService.getResponse({ | ||
| url: `/${mdms_context_path}/v2/_create/${req.moduleName}.${req.masterName}`, | ||
| body: { | ||
| Mdms: { | ||
| tenantId: tenantId, | ||
| schemaCode: `${req.moduleName}.${req.masterName}`, | ||
| data: { ...req.data }, | ||
| }, | ||
| }, | ||
| }); | ||
| return response; | ||
| } catch (error) { | ||
| throw new Error(error?.response?.data?.Errors?.[0].description); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Add JSDoc documentation to function.
Consider adding JSDoc documentation to describe the purpose, parameters, and return value of this function to improve code readability and maintainability.
+/**
+ * Upserts schema configuration data to the MDMS service
+ * @param {Object} req - The request object containing moduleName, masterName and data
+ * @param {string} tenantId - The tenant ID for the configuration
+ * @returns {Promise<Object>} - The response from the API
+ */
const upsertSchemaConfig = async (req, tenantId) => {📝 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.
| const upsertSchemaConfig = async (req, tenantId) => { | |
| try { | |
| debugger; | |
| const mdms_context_path = window?.globalConfigs?.getConfig("MDMS_V2_CONTEXT_PATH") || "mdms-v2"; | |
| const response = await Digit.CustomService.getResponse({ | |
| url: `/${mdms_context_path}/v2/_create/${req.moduleName}.${req.masterName}`, | |
| body: { | |
| Mdms: { | |
| tenantId: tenantId, | |
| schemaCode: `${req.moduleName}.${req.masterName}`, | |
| data: { ...req.data }, | |
| }, | |
| }, | |
| }); | |
| return response; | |
| } catch (error) { | |
| throw new Error(error?.response?.data?.Errors?.[0].description); | |
| } | |
| }; | |
| /** | |
| * Upserts schema configuration data to the MDMS service | |
| * @param {Object} req - The request object containing moduleName, masterName and data | |
| * @param {string} tenantId - The tenant ID for the configuration | |
| * @returns {Promise<Object>} - The response from the API | |
| */ | |
| const upsertSchemaConfig = async (req, tenantId) => { | |
| try { | |
| debugger; | |
| const mdms_context_path = window?.globalConfigs?.getConfig("MDMS_V2_CONTEXT_PATH") || "mdms-v2"; | |
| const response = await Digit.CustomService.getResponse({ | |
| url: `/${mdms_context_path}/v2/_create/${req.moduleName}.${req.masterName}`, | |
| body: { | |
| Mdms: { | |
| tenantId: tenantId, | |
| schemaCode: `${req.moduleName}.${req.masterName}`, | |
| data: { ...req.data }, | |
| }, | |
| }, | |
| }); | |
| return response; | |
| } catch (error) { | |
| throw new Error(error?.response?.data?.Errors?.[0].description); | |
| } | |
| }; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 5-5: This is an unexpected use of the debugger statement.
Unsafe fix: Remove debugger statement
(lint/suspicious/noDebugger)
| const dummydata = { | ||
| name: "HOUSEHOLD_LOCATION", | ||
| cards: [ | ||
| { | ||
| fields: [ | ||
| { | ||
| type: "text", | ||
| label: "Address Line 1", | ||
| active: true, | ||
| jsonPath: "Description", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| { | ||
| type: "Selection", | ||
| label: "Address Line 1", | ||
| active: true, | ||
| jsonPath: "Description", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| { | ||
| type: "numeric", | ||
| label: "Address Line 1", | ||
| active: true, | ||
| jsonPath: "Description", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| { | ||
| type: "dropdown", | ||
| label: "Address Line 2", | ||
| active: true, | ||
| jsonPath: "Description", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| { | ||
| type: "date", | ||
| label: "Address Line 2", | ||
| active: true, | ||
| jsonPath: "Description", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| { | ||
| type: "dob", | ||
| label: "Address Line 4", | ||
| active: true, | ||
| jsonPath: "Description", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| ], | ||
| header: "Header", | ||
| description: "Desc", | ||
| headerFields: [ | ||
| { | ||
| type: "text", | ||
| label: "SCREEN_HEADING", | ||
| active: true, | ||
| jsonPath: "ScreenHeading", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| { | ||
| type: "text", | ||
| label: "SCREEN_DESCRIPTION", | ||
| active: true, | ||
| jsonPath: "Description", | ||
| metaData: {}, | ||
| required: true, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| order: 1, | ||
| config: { | ||
| enableComment: true, | ||
| enableFieldAddition: true, | ||
| allowFieldsAdditionAt: ["body"], | ||
| enableSectionAddition: true, | ||
| allowCommentsAdditionAt: ["body"], | ||
| }, | ||
| parent: "REGISTRATION", | ||
| headers: [ | ||
| { | ||
| type: "header", | ||
| label: "KJHSJKDHKJH", | ||
| }, | ||
| { | ||
| type: "info", | ||
| label: "KJHSJKDHKJH", | ||
| }, | ||
| { | ||
| type: "description", | ||
| label: "KJHSJKDHKJH", | ||
| }, | ||
| ], | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Replace placeholder labels with meaningful content
The dummydata object contains non-descriptive placeholder labels (e.g., "KJHSJKDHKJH") and repetitive field labels (multiple "Address Line X"). Consider using more realistic and descriptive sample data.
headers: [
{
type: "header",
- label: "KJHSJKDHKJH",
+ label: "Household Registration",
},
{
type: "info",
- label: "KJHSJKDHKJH",
+ label: "Please fill in all required fields",
},📝 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.
| const dummydata = { | |
| name: "HOUSEHOLD_LOCATION", | |
| cards: [ | |
| { | |
| fields: [ | |
| { | |
| type: "text", | |
| label: "Address Line 1", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "Selection", | |
| label: "Address Line 1", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "numeric", | |
| label: "Address Line 1", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "dropdown", | |
| label: "Address Line 2", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "date", | |
| label: "Address Line 2", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "dob", | |
| label: "Address Line 4", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| ], | |
| header: "Header", | |
| description: "Desc", | |
| headerFields: [ | |
| { | |
| type: "text", | |
| label: "SCREEN_HEADING", | |
| active: true, | |
| jsonPath: "ScreenHeading", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "text", | |
| label: "SCREEN_DESCRIPTION", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| ], | |
| }, | |
| ], | |
| order: 1, | |
| config: { | |
| enableComment: true, | |
| enableFieldAddition: true, | |
| allowFieldsAdditionAt: ["body"], | |
| enableSectionAddition: true, | |
| allowCommentsAdditionAt: ["body"], | |
| }, | |
| parent: "REGISTRATION", | |
| headers: [ | |
| { | |
| type: "header", | |
| label: "KJHSJKDHKJH", | |
| }, | |
| { | |
| type: "info", | |
| label: "KJHSJKDHKJH", | |
| }, | |
| { | |
| type: "description", | |
| label: "KJHSJKDHKJH", | |
| }, | |
| ], | |
| }; | |
| const dummydata = { | |
| name: "HOUSEHOLD_LOCATION", | |
| cards: [ | |
| { | |
| fields: [ | |
| { | |
| type: "text", | |
| label: "Address Line 1", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "Selection", | |
| label: "Address Line 1", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "numeric", | |
| label: "Address Line 1", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "dropdown", | |
| label: "Address Line 2", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "date", | |
| label: "Address Line 2", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "dob", | |
| label: "Address Line 4", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| ], | |
| header: "Header", | |
| description: "Desc", | |
| headerFields: [ | |
| { | |
| type: "text", | |
| label: "SCREEN_HEADING", | |
| active: true, | |
| jsonPath: "ScreenHeading", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| { | |
| type: "text", | |
| label: "SCREEN_DESCRIPTION", | |
| active: true, | |
| jsonPath: "Description", | |
| metaData: {}, | |
| required: true, | |
| }, | |
| ], | |
| }, | |
| ], | |
| order: 1, | |
| config: { | |
| enableComment: true, | |
| enableFieldAddition: true, | |
| allowFieldsAdditionAt: ["body"], | |
| enableSectionAddition: true, | |
| allowCommentsAdditionAt: ["body"], | |
| }, | |
| parent: "REGISTRATION", | |
| headers: [ | |
| { | |
| type: "header", | |
| label: "Household Registration", | |
| }, | |
| { | |
| type: "info", | |
| label: "Please fill in all required fields", | |
| }, | |
| { | |
| type: "description", | |
| label: "KJHSJKDHKJH", | |
| }, | |
| ], | |
| }; |
| @@ -95,7 +104,7 @@ const CampaignBreadCrumb = ({ location, defaultPath }) => { | |||
| const App = ({ path, BOUNDARY_HIERARCHY_TYPE, hierarchyData }) => { | |||
| const location = useLocation(); | |||
| const userId = Digit.UserService.getUser().info.uuid; | |||
| const microplanStatus = "RESOURCE_ESTIMATIONS_APPROVED" | |||
| const microplanStatus = "RESOURCE_ESTIMATIONS_APPROVED"; | |||
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Unused local variable.
microplanStatus is not referenced elsewhere in this file. Consider removing it if it has no usage.
- const microplanStatus = "RESOURCE_ESTIMATIONS_APPROVED";📝 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.
| const microplanStatus = "RESOURCE_ESTIMATIONS_APPROVED"; |
| {Mandatory && <span className="mandatory-span">*</span>} | ||
| {helpText && ( | ||
| <span className="icon-wrapper"> | ||
| <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Use children as a nested element instead of passing them as a prop.
Each <TooltipWrapper> uses children={<InfoOutline ... />}. Wrap <InfoOutline /> directly within <TooltipWrapper> instead.
- <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} />
+ <TooltipWrapper content={t(helpText)}>
+ <InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />
+ </TooltipWrapper>Also applies to: 179-179, 251-251, 327-327, 389-389, 451-451, 512-512, 574-574, 634-634, 694-694
🧰 Tools
🪛 Biome (1.9.4)
[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)
| case "MdmsDropdown": | ||
| return ( | ||
| <> | ||
| {infoText && ( | ||
| <InfoCard | ||
| populators={{ | ||
| name: "infocard", | ||
| }} | ||
| variant="default" | ||
| text={t(infoText)} | ||
| /> | ||
| )} | ||
| <LabelFieldPair | ||
| className={ | ||
| !headerFields | ||
| ? `appConfiglabelField ${ | ||
| config?.id | ||
| ? config?.id === state?.drawerField?.id | ||
| ? "selected" | ||
| : "" | ||
| : config?.jsonPath === state?.drawerField?.jsonPath | ||
| ? "selected" | ||
| : "" | ||
| }` | ||
| : "" | ||
| } | ||
| > | ||
| <div className="appConfiglabelField-label"> | ||
| <span>{`${t(label)}`}</span> | ||
| {required && <span className="mandatory-span">*</span>} | ||
| {helpText && ( | ||
| <span className="icon-wrapper"> | ||
| <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> | ||
| </span> | ||
| )} | ||
| </div> | ||
| <MdmsDropdown | ||
| className="appConfiglabelField-Input" | ||
| variant={""} | ||
| t={t} | ||
| option={dropDownOptions} | ||
| optionKey={"code"} | ||
| selected={null} | ||
| select={() => {}} | ||
| props={props} | ||
| moduleName={rest?.moduleMaster?.moduleName} | ||
| masterName={rest?.moduleMaster?.masterName} | ||
| rest={rest} | ||
| /> | ||
| {isDelete && ( | ||
| <div | ||
| onClick={(e) => { | ||
| // e.stopPropagation(); | ||
| onDelete(); | ||
| }} | ||
| style={{ | ||
| cursor: "pointer", | ||
| fontWeight: "600", | ||
| marginLeft: "1rem", | ||
| fontSize: "1rem", | ||
| color: PRIMARY_COLOR, | ||
| display: "flex", | ||
| gap: "0.5rem", | ||
| alignItems: "center", | ||
| marginTop: "1rem", | ||
| }} | ||
| > | ||
| <DustbinIcon /> | ||
| </div> | ||
| )} | ||
| </LabelFieldPair> | ||
| </> | ||
| ); | ||
| break; |
There was a problem hiding this comment.
Switch case for "MdmsDropdown".
- The break after
returnis again unreachable. - For improved clarity, remove the
break;.
return (
<>
...
</>
);
- break;📝 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.
| case "MdmsDropdown": | |
| return ( | |
| <> | |
| {infoText && ( | |
| <InfoCard | |
| populators={{ | |
| name: "infocard", | |
| }} | |
| variant="default" | |
| text={t(infoText)} | |
| /> | |
| )} | |
| <LabelFieldPair | |
| className={ | |
| !headerFields | |
| ? `appConfiglabelField ${ | |
| config?.id | |
| ? config?.id === state?.drawerField?.id | |
| ? "selected" | |
| : "" | |
| : config?.jsonPath === state?.drawerField?.jsonPath | |
| ? "selected" | |
| : "" | |
| }` | |
| : "" | |
| } | |
| > | |
| <div className="appConfiglabelField-label"> | |
| <span>{`${t(label)}`}</span> | |
| {required && <span className="mandatory-span">*</span>} | |
| {helpText && ( | |
| <span className="icon-wrapper"> | |
| <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> | |
| </span> | |
| )} | |
| </div> | |
| <MdmsDropdown | |
| className="appConfiglabelField-Input" | |
| variant={""} | |
| t={t} | |
| option={dropDownOptions} | |
| optionKey={"code"} | |
| selected={null} | |
| select={() => {}} | |
| props={props} | |
| moduleName={rest?.moduleMaster?.moduleName} | |
| masterName={rest?.moduleMaster?.masterName} | |
| rest={rest} | |
| /> | |
| {isDelete && ( | |
| <div | |
| onClick={(e) => { | |
| // e.stopPropagation(); | |
| onDelete(); | |
| }} | |
| style={{ | |
| cursor: "pointer", | |
| fontWeight: "600", | |
| marginLeft: "1rem", | |
| fontSize: "1rem", | |
| color: PRIMARY_COLOR, | |
| display: "flex", | |
| gap: "0.5rem", | |
| alignItems: "center", | |
| marginTop: "1rem", | |
| }} | |
| > | |
| <DustbinIcon /> | |
| </div> | |
| )} | |
| </LabelFieldPair> | |
| </> | |
| ); | |
| break; | |
| case "MdmsDropdown": | |
| return ( | |
| <> | |
| {infoText && ( | |
| <InfoCard | |
| populators={{ | |
| name: "infocard", | |
| }} | |
| variant="default" | |
| text={t(infoText)} | |
| /> | |
| )} | |
| <LabelFieldPair | |
| className={ | |
| !headerFields | |
| ? `appConfiglabelField ${ | |
| config?.id | |
| ? config?.id === state?.drawerField?.id | |
| ? "selected" | |
| : "" | |
| : config?.jsonPath === state?.drawerField?.jsonPath | |
| ? "selected" | |
| : "" | |
| }` | |
| : "" | |
| } | |
| > | |
| <div className="appConfiglabelField-label"> | |
| <span>{`${t(label)}`}</span> | |
| {required && <span className="mandatory-span">*</span>} | |
| {helpText && ( | |
| <span className="icon-wrapper"> | |
| <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> | |
| </span> | |
| )} | |
| </div> | |
| <MdmsDropdown | |
| className="appConfiglabelField-Input" | |
| variant={""} | |
| t={t} | |
| option={dropDownOptions} | |
| optionKey={"code"} | |
| selected={null} | |
| select={() => {}} | |
| props={props} | |
| moduleName={rest?.moduleMaster?.moduleName} | |
| masterName={rest?.moduleMaster?.masterName} | |
| rest={rest} | |
| /> | |
| {isDelete && ( | |
| <div | |
| onClick={(e) => { | |
| // e.stopPropagation(); | |
| onDelete(); | |
| }} | |
| style={{ | |
| cursor: "pointer", | |
| fontWeight: "600", | |
| marginLeft: "1rem", | |
| fontSize: "1rem", | |
| color: PRIMARY_COLOR, | |
| display: "flex", | |
| gap: "0.5rem", | |
| alignItems: "center", | |
| marginTop: "1rem", | |
| }} | |
| > | |
| <DustbinIcon /> | |
| </div> | |
| )} | |
| </LabelFieldPair> | |
| </> | |
| ); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 269-285: 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] 292-292: This code is unreachable
(lint/correctness/noUnreachable)
[error] 251-251: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
| case "dropDown": | ||
| case "dropdown": | ||
| return ( | ||
| <> | ||
| {infoText && ( | ||
| <InfoCard | ||
| populators={{ | ||
| name: "infocard", | ||
| }} | ||
| variant="default" | ||
| text={t(infoText)} | ||
| /> | ||
| )} | ||
| <LabelFieldPair | ||
| className={ | ||
| !headerFields | ||
| ? `appConfiglabelField ${ | ||
| config?.id | ||
| ? config?.id === state?.drawerField?.id | ||
| ? "selected" | ||
| : "" | ||
| : config?.jsonPath === state?.drawerField?.jsonPath | ||
| ? "selected" | ||
| : "" | ||
| }` | ||
| : "" | ||
| } | ||
| > | ||
| <div className="appConfiglabelField-label"> | ||
| <span>{`${t(label)}`}</span> | ||
| {required && <span className="mandatory-span">*</span>} | ||
| {helpText && ( | ||
| <span className="icon-wrapper"> | ||
| <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> | ||
| </span> | ||
| )} | ||
| </div> | ||
| <Dropdown | ||
| className="appConfiglabelField-Input" | ||
| // style={} | ||
| variant={""} | ||
| t={t} | ||
| option={dropDownOptions} | ||
| optionKey={"name"} | ||
| selected={null} | ||
| select={() => {}} | ||
| /> | ||
| {isDelete && ( | ||
| <div | ||
| onClick={(e) => { | ||
| // e.stopPropagation(); | ||
| onDelete(); | ||
| }} | ||
| style={{ | ||
| cursor: "pointer", | ||
| fontWeight: "600", | ||
| marginLeft: "1rem", | ||
| fontSize: "1rem", | ||
| color: PRIMARY_COLOR, | ||
| display: "flex", | ||
| gap: "0.5rem", | ||
| alignItems: "center", | ||
| marginTop: "1rem", | ||
| }} | ||
| > | ||
| <DustbinIcon /> | ||
| </div> | ||
| )} | ||
| </LabelFieldPair> | ||
| </> | ||
| ); | ||
| break; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Switch case for "dropDown"/"dropdown".
- Consider passing a
selectedvalue andselectcallback for the dropdown if applicable. - The break after
returnis unreachable.
return (
<>
...
</>
);
- break;📝 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.
| case "dropDown": | |
| case "dropdown": | |
| return ( | |
| <> | |
| {infoText && ( | |
| <InfoCard | |
| populators={{ | |
| name: "infocard", | |
| }} | |
| variant="default" | |
| text={t(infoText)} | |
| /> | |
| )} | |
| <LabelFieldPair | |
| className={ | |
| !headerFields | |
| ? `appConfiglabelField ${ | |
| config?.id | |
| ? config?.id === state?.drawerField?.id | |
| ? "selected" | |
| : "" | |
| : config?.jsonPath === state?.drawerField?.jsonPath | |
| ? "selected" | |
| : "" | |
| }` | |
| : "" | |
| } | |
| > | |
| <div className="appConfiglabelField-label"> | |
| <span>{`${t(label)}`}</span> | |
| {required && <span className="mandatory-span">*</span>} | |
| {helpText && ( | |
| <span className="icon-wrapper"> | |
| <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> | |
| </span> | |
| )} | |
| </div> | |
| <Dropdown | |
| className="appConfiglabelField-Input" | |
| // style={} | |
| variant={""} | |
| t={t} | |
| option={dropDownOptions} | |
| optionKey={"name"} | |
| selected={null} | |
| select={() => {}} | |
| /> | |
| {isDelete && ( | |
| <div | |
| onClick={(e) => { | |
| // e.stopPropagation(); | |
| onDelete(); | |
| }} | |
| style={{ | |
| cursor: "pointer", | |
| fontWeight: "600", | |
| marginLeft: "1rem", | |
| fontSize: "1rem", | |
| color: PRIMARY_COLOR, | |
| display: "flex", | |
| gap: "0.5rem", | |
| alignItems: "center", | |
| marginTop: "1rem", | |
| }} | |
| > | |
| <DustbinIcon /> | |
| </div> | |
| )} | |
| </LabelFieldPair> | |
| </> | |
| ); | |
| break; | |
| case "dropDown": | |
| case "dropdown": | |
| return ( | |
| <> | |
| {infoText && ( | |
| <InfoCard | |
| populators={{ | |
| name: "infocard", | |
| }} | |
| variant="default" | |
| text={t(infoText)} | |
| /> | |
| )} | |
| <LabelFieldPair | |
| className={ | |
| !headerFields | |
| ? `appConfiglabelField ${ | |
| config?.id | |
| ? config?.id === state?.drawerField?.id | |
| ? "selected" | |
| : "" | |
| : config?.jsonPath === state?.drawerField?.jsonPath | |
| ? "selected" | |
| : "" | |
| }` | |
| : "" | |
| } | |
| > | |
| <div className="appConfiglabelField-label"> | |
| <span>{`${t(label)}`}</span> | |
| {required && <span className="mandatory-span">*</span>} | |
| {helpText && ( | |
| <span className="icon-wrapper"> | |
| <TooltipWrapper content={t(helpText)} children={<InfoOutline fill={"#C84C0E"} width={"20px"} height={"20px"} />} /> | |
| </span> | |
| )} | |
| </div> | |
| <Dropdown | |
| className="appConfiglabelField-Input" | |
| // style={} | |
| variant={""} | |
| t={t} | |
| option={dropDownOptions} | |
| optionKey={"name"} | |
| selected={null} | |
| select={() => {}} | |
| /> | |
| {isDelete && ( | |
| <div | |
| onClick={(e) => { | |
| // e.stopPropagation(); | |
| onDelete(); | |
| }} | |
| style={{ | |
| cursor: "pointer", | |
| fontWeight: "600", | |
| marginLeft: "1rem", | |
| fontSize: "1rem", | |
| color: PRIMARY_COLOR, | |
| display: "flex", | |
| gap: "0.5rem", | |
| alignItems: "center", | |
| marginTop: "1rem", | |
| }} | |
| > | |
| <DustbinIcon /> | |
| </div> | |
| )} | |
| </LabelFieldPair> | |
| </> | |
| ); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 194-210: 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] 217-217: This code is unreachable
(lint/correctness/noUnreachable)
[error] 179-179: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
| return ( | ||
| <> | ||
| <LabelFieldPair | ||
| className={ | ||
| !headerFields | ||
| ? `appConfiglabelField ${ | ||
| config?.id | ||
| ? config?.id === state?.drawerField?.id | ||
| ? "selected" | ||
| : "" | ||
| : config?.jsonPath === state?.drawerField?.jsonPath | ||
| ? "selected" | ||
| : "" | ||
| }` | ||
| : "" | ||
| } | ||
| > | ||
| <div className="appConfiglabelField-label"> | ||
| <span>{`${t(label)}`}</span> | ||
| {Mandatory && <span className="mandatory-span">*</span>} | ||
| </div> | ||
| <TextInput className="appConfiglabelField-Input" name={""} value={value} onChange={(event) => onChange(event)} /> | ||
| {isDelete && ( | ||
| <div | ||
| onClick={(e) => { | ||
| onDelete(); | ||
| }} | ||
| style={{ | ||
| cursor: "pointer", | ||
| fontWeight: "600", | ||
| marginLeft: "1rem", | ||
| fontSize: "1rem", | ||
| color: PRIMARY_COLOR, | ||
| display: "flex", | ||
| gap: "0.5rem", | ||
| alignItems: "center", | ||
| marginTop: "1rem", | ||
| }} | ||
| > | ||
| <DustbinIcon /> | ||
| </div> | ||
| )} | ||
| </LabelFieldPair> | ||
| </> | ||
| ); | ||
| break; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Default case.
- The break after
returnis unreachable. - It could be beneficial to log or handle unrecognized types to avoid silent fallback.
- break;📝 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 ( | |
| <> | |
| <LabelFieldPair | |
| className={ | |
| !headerFields | |
| ? `appConfiglabelField ${ | |
| config?.id | |
| ? config?.id === state?.drawerField?.id | |
| ? "selected" | |
| : "" | |
| : config?.jsonPath === state?.drawerField?.jsonPath | |
| ? "selected" | |
| : "" | |
| }` | |
| : "" | |
| } | |
| > | |
| <div className="appConfiglabelField-label"> | |
| <span>{`${t(label)}`}</span> | |
| {Mandatory && <span className="mandatory-span">*</span>} | |
| </div> | |
| <TextInput className="appConfiglabelField-Input" name={""} value={value} onChange={(event) => onChange(event)} /> | |
| {isDelete && ( | |
| <div | |
| onClick={(e) => { | |
| onDelete(); | |
| }} | |
| style={{ | |
| cursor: "pointer", | |
| fontWeight: "600", | |
| marginLeft: "1rem", | |
| fontSize: "1rem", | |
| color: PRIMARY_COLOR, | |
| display: "flex", | |
| gap: "0.5rem", | |
| alignItems: "center", | |
| marginTop: "1rem", | |
| }} | |
| > | |
| <DustbinIcon /> | |
| </div> | |
| )} | |
| </LabelFieldPair> | |
| </> | |
| ); | |
| break; | |
| } | |
| return ( | |
| <> | |
| <LabelFieldPair | |
| className={ | |
| !headerFields | |
| ? `appConfiglabelField ${ | |
| config?.id | |
| ? config?.id === state?.drawerField?.id | |
| ? "selected" | |
| : "" | |
| : config?.jsonPath === state?.drawerField?.jsonPath | |
| ? "selected" | |
| : "" | |
| }` | |
| : "" | |
| } | |
| > | |
| <div className="appConfiglabelField-label"> | |
| <span>{`${t(label)}`}</span> | |
| {Mandatory && <span className="mandatory-span">*</span>} | |
| </div> | |
| <TextInput | |
| className="appConfiglabelField-Input" | |
| name={""} | |
| value={value} | |
| onChange={(event) => onChange(event)} | |
| /> | |
| {isDelete && ( | |
| <div | |
| onClick={(e) => { | |
| onDelete(); | |
| }} | |
| style={{ | |
| cursor: "pointer", | |
| fontWeight: "600", | |
| marginLeft: "1rem", | |
| fontSize: "1rem", | |
| color: PRIMARY_COLOR, | |
| display: "flex", | |
| gap: "0.5rem", | |
| alignItems: "center", | |
| marginTop: "1rem", | |
| }} | |
| > | |
| <DustbinIcon /> | |
| </div> | |
| )} | |
| </LabelFieldPair> | |
| </> | |
| ); | |
| } |
🧰 Tools
🪛 Biome (1.9.4)
[error] 753-768: 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] 775-775: This code is unreachable
(lint/correctness/noUnreachable)
There was a problem hiding this comment.
Actionable comments posted: 51
🔭 Outside diff range comments (9)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/fetchFromMicroplan.js (5)
197-209: 🛠️ Refactor suggestionReplace async in useEffect with proper pattern
Using
asyncdirectly inuseEffectis an anti-pattern as the cleanup function returned by useEffect cannot be from an async function. This could lead to memory leaks or unexpected behavior.- useEffect(async () => { + useEffect(() => { if (currentStep === steps.length && microplan) { setShowToast({ key: "success", label: t("CMN_ALL_DATA_FETCH_DONE") }); - const navigateTimeout = setTimeout(() => { + const navigateTimeout = setTimeout(async () => { searchParams?.set("id", data?.updatedCampaignData?.id); searchParams?.set("microName", data?.updatedCampaignData?.campaignName); history.push(`/${window?.contextPath}/employee/campaign/setup-campaign?${searchParams?.toString()}`); }, 1500); return () => clearTimeout(navigateTimeout); // Cleanup timeout } }, [currentStep, microplan]);
132-137: 🧹 Nitpick (assertive)Inconsistent equality check
Line 132 uses
==for equality comparison while most other places in the code use===. Using strict equality (===) is generally recommended for consistency and to avoid unexpected type coercion.- if (showToast?.key == "error") { + if (showToast?.key === "error") {
147-147: 🧹 Nitpick (assertive)Inconsistent equality check
Similar to the previous comment, this line uses
!=instead of!==for inequality comparison.- if (showToast?.key != "error" && error) { + if (showToast?.key !== "error" && error) {
178-178: 🧹 Nitpick (assertive)Inconsistent equality check
Another instance of
==instead of===for equality comparison.- if (response?.resources && response?.resources?.length == 3) { + if (response?.resources && response?.resources?.length === 3) {
226-226: 🧹 Nitpick (assertive)Inconsistent equality check
Another instance of
!=instead of!==for inequality comparison.- {showToast?.key != "error" && <Loader page={true} variant={"PageLoader"} loaderText={t(" ")}/>} + {showToast?.key !== "error" && <Loader page={true} variant={"PageLoader"} loaderText={t(" ")}/>}health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/createLocalisationService.js (1)
1-1: 🧹 Nitpick (assertive)Consider Cleaning Up Unused Parameter:
Since thelocaleparameter is no longer used (as evidenced by its commented-out usage), consider either removing it from the function signature or adding inline documentation to clarify that it is deprecated. This will help prevent confusion for future maintainers.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
8-8: 🧹 Nitpick (assertive)TagComponent Usage
You introduced theTagComponentimport. Ensure that it's consistently styled across the application and reused where appropriate.health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js (2)
507-511: 🧹 Nitpick (assertive)Use Number.POSITIVE_INFINITY instead of global Infinity.
Per static analysis, the recommended approach is to prefer
Number.POSITIVE_INFINITYfor ES2015 compliance.- return (statusOrderMap[keyA] || Infinity) - (statusOrderMap[keyB] || Infinity); + return (statusOrderMap[keyA] ?? Number.POSITIVE_INFINITY) - (statusOrderMap[keyB] ?? Number.POSITIVE_INFINITY);
598-598: 🧹 Nitpick (assertive)Optional chain can simplify the check.
Consider using optional chaining instead of the explicit
&&check:-if (processData && processData.some((instance) => instance.action === config?.disableInstanceAction)) { +if (processData?.some((instance) => instance.action === config?.disableInstanceAction)) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (13)
.github/workflows/branch-name-check.ymlis excluded by!**/*.ymlhealth/micro-ui/web/console/inter-package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/console/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/core/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/example/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/packages/css/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/micro-ui-internals/packages/modules/workbench-hcm/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/microplan/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/package.jsonis excluded by!**/*.jsonhealth/micro-ui/web/workbench/package.jsonis excluded by!**/*.json
📒 Files selected for processing (37)
health/micro-ui/web/micro-ui-internals/example/public/index.html(1 hunks)health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js(7 hunks)health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss(1 hunks)health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss(4 hunks)health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/mapview.scss(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js(5 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js(12 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/fetchFromMicroplan.js(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/createLocalisationService.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useBoundaryRelationshipSearch.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js(13 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js(7 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js(13 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js(18 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js(8 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ActivityCard.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FileComponent.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/MapViewPopup.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js(4 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UploadDataCustom.js(4 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js(6 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/ChooseActivity.js(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.js(4 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js(19 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PopInbox.js(13 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/TablePage.js(3 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js(3 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/utils/utilities.js(2 hunks)health/micro-ui/web/public/index.html(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.js`: check
**/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/ChooseActivity.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/createLocalisationService.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useBoundaryRelationshipSearch.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FileComponent.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/fetchFromMicroplan.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ActivityCard.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PopInbox.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/TablePage.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UploadDataCustom.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/utils/utilities.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/MapViewPopup.jshealth/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.jshealth/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js
🧠 Learnings (4)
health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss (1)
Learnt from: siddhant-nawale-egov
PR: egovernments/DIGIT-Frontend#675
File: micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss:33-58
Timestamp: 2025-04-03T14:36:15.419Z
Learning: The use of `!important` in the `.wbh-header-container` and `.guideline-actionbar-content` CSS classes within `microplanning.scss` is necessary to prevent these styles from being overridden.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PopInbox.js (1)
Learnt from: rachana-egov
PR: egovernments/DIGIT-Frontend#1832
File: health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PopInbox.js:592-594
Timestamp: 2025-04-03T14:36:15.419Z
Learning: In `PopInbox.js`, when integrating the `ConfirmationPopUp` component, error handling for API failures is managed internally within the component, so explicitly passing an `onError` prop is not necessary.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js (1)
Learnt from: rachana-egov
PR: egovernments/DIGIT-Frontend#1847
File: health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js:308-314
Timestamp: 2025-04-03T14:36:32.634Z
Learning: In `PlanInbox.js`, the variable `planWithCensus?.StatusCount[selectedFilter]` is always defined in the given context, so null checks are unnecessary.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)
Learnt from: siddhant-nawale-egov
PR: egovernments/DIGIT-Frontend#741
File: micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/Module.js:15-15
Timestamp: 2025-04-03T14:36:15.419Z
Learning: When adding a new module code like "campaignmanager" to `moduleCode`, ensure that it is properly handled in all relevant conditional checks and function parameters across the codebase.
🧬 Code Definitions (15)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.js (7)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)
useTranslation(17-17)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
useTranslation(11-11)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FileComponent.js (1)
useTranslation(10-10)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js (1)
useTranslation(9-9)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/TablePage.js (1)
useTranslation(60-60)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
useTranslation(12-12)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js (2)
useTranslation(295-295)useTranslation(322-322)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/MapViewPopup.js (1)
MapViewPopupWrapper(299-331)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ActivityCard.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/ChooseActivity.js (1)
onClickCard(142-162)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddProductscontext.js (2)
tenantId(21-21)data(40-40)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/TablePage.js (14)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js (1)
useTranslation(18-18)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FacilityPopup.js (1)
useTranslation(13-13)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js (2)
useTranslation(13-13)useTranslation(39-39)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js (1)
useTranslation(21-21)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js (1)
useTranslation(38-38)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js (1)
useTranslation(45-45)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PopInbox.js (1)
useTranslation(18-18)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.js (1)
useTranslation(9-9)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)
useTranslation(17-17)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
useTranslation(11-11)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FileComponent.js (1)
useTranslation(10-10)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js (1)
useTranslation(9-9)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
useTranslation(12-12)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js (2)
useTranslation(295-295)useTranslation(322-322)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PopInbox.js (8)
config(16-16)selectedFilter(33-33)currentPage(36-36)rowsPerPage(37-37)activeLink(17-17)actionsToHide(313-313)actionIconMap(566-566)getButtonState(568-572)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/hooks/useThrottleUnique.js (1)
useThrottleUnique(3-17)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (3)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ConfigureApp.js (1)
ConfigureApp(29-136)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/FormBuilder.js (1)
FormBuilder(7-60)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/SchemaBuilder.js (1)
SchemaBuilder(28-77)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (9)
showLocalisationPopup(44-44)localisationData(45-45)storeData(46-46)storeData(47-47)Digit(32-32)Digit(97-97)currentLocales(48-48)locale(31-31)localisationMutateAsync(33-33)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.js (2)
translations(11-11)LocalisationEditorPopup(8-85)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js (9)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TimelineComponent.js (2)
reqCriteria(77-83)tenantId(36-36)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateCampaign.js (5)
reqCriteria(88-103)hierarchyType(62-62)currentStep(28-28)onStepClick(684-700)filteredConfig(790-790)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundaryComponent.js (1)
reqCriteria(136-147)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/BoundaryRelationCreate.js (1)
hierarchyType(18-18)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js (1)
hierarchyType(20-20)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js (1)
tenantId(323-323)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (2)
tenantId(22-22)currentStep(77-77)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1)
onStepClick(121-126)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ConfigureApp.js (1)
filteredConfig(83-83)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/MapViewPopup.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (1)
useTranslation(29-29)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js (1)
health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js (5)
EstimationsfileId(804-804)EstimationsfileId(977-977)handleDownload(813-825)handleFileDownload(978-990)onOptionSelect(1028-1049)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (9)
localisationData(51-51)storeData(52-52)storeData(53-53)Digit(44-44)currentLocales(54-54)locale(43-43)tenantId(18-18)module(36-36)localisationMutateAsync(57-57)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.js (2)
translations(11-11)LocalisationEditorPopup(8-85)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/FormBuilder.js (1)
moduleName(11-11)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/BoundaryRelationCreate.js (3)
Digit(41-46)modulePrefix(37-37)moduleCode(40-40)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewHierarchy.js (3)
Digit(56-61)modulePrefix(53-53)moduleCode(55-55)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useBoundaryRelationshipSearch.js (1)
hierarchyData(17-17)
health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js (5)
EstimationsfileId(86-86)EstimationsfileId(258-258)handleDownload(95-106)handleFileDownload(259-271)onOptionSelect(309-330)
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js
[error] 1203-1203: A form label must be associated with an input.
Consider adding a for or htmlFor attribute to the label element or moving the input element to inside the label element.
(lint/a11y/noLabelWithoutControl)
[error] 1219-1228: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
[error] 1233-1242: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
[error] 1247-1256: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
[error] 1261-1270: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
[error] 1361-1371: 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/microplan/src/components/FileComponent.js
[error] 54-54: 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)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.js
[error] 49-49: 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/microplan/src/pages/employee/PopInbox.js
[error] 158-158: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 420-420: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 420-420: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js
[error] 495-499: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 541-548: 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/microplan/src/pages/employee/PlanInbox.js
[error] 307-307: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 511-511: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 511-511: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 598-598: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js
[error] 42-49: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 54-54: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 59-59: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 64-64: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
[error] 221-221: This let declares a variable that is only assigned once.
'activeCounters' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 226-226: This let declares a variable that is only assigned once.
'roleTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 227-227: This let declares a variable that is only assigned once.
'helpTextCode' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 277-277: This let declares a variable that is only assigned once.
'roleTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 447-447: This let declares a variable that is only assigned once.
'roleTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 483-483: This let declares a variable that is only assigned once.
'allLocalisations' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/MapViewPopup.js
[error] 32-32: 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)
[error] 42-42: 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)
[error] 69-69: Use let or const instead of var.
A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.
(lint/style/noVar)
[error] 70-70: Use let or const instead of var.
A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.
(lint/style/noVar)
[error] 111-111: This let declares a variable that is only assigned once.
'baseMaps' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 162-162: This let declares a variable that is only assigned once.
'mapConfig' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 170-170: This let declares a variable that is only assigned once.
'map_i' 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)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js
[error] 86-86: 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] 309-330: 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] 321-321: 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)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js
[error] 163-163: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 165-165: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 166-166: Use Number.POSITIVE_INFINITY instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.POSITIVE_INFINITY instead.
(lint/style/useNumberNamespace)
[error] 194-194: This let declares a variable that is only assigned once.
'activeCounters' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 199-199: This let declares a variable that is only assigned once.
'roleTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 200-200: This let declares a variable that is only assigned once.
'helpTextCode' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 241-241: Template literals are preferred over string concatenation.
Unsafe fix: Use a template literal.
(lint/style/useTemplate)
[error] 241-241: Reassigning a function parameter is confusing.
The parameter is declared here:
Use a local variable instead.
(lint/style/noParameterAssign)
[error] 247-247: This let declares a variable that is only assigned once.
'moduleChecklist' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 249-249: This let declares a variable that is only assigned once.
'roleTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 253-253: This let declares a variable that is only assigned once.
'formattedString' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 275-275: This let declares a variable that is only assigned once.
'formattedStringTemp' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 460-460: This let declares a variable that is only assigned once.
'allLocalisations' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
[error] 572-584: 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] 663-663: 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/example/src/UICustomizations.js
[error] 804-804: 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] 1028-1049: 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] 1040-1040: 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)
🔇 Additional comments (123)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (8)
1-1: Imports properly organized for new app configuration components.The imports have been well-organized to include the newly added FormBuilder and SchemaBuilder components from the appConfigurationScreenParent directory. The useMemo import is also appropriately added to support the performance optimizations.
Also applies to: 7-7, 18-19
41-49: Simplify boolean expressions in breadcrumb logic.The ternary expressions that return
trueorfalsecan be simplified to direct boolean expressions for better readability and performance.- show: - pathVar === "my-campaign" || - pathVar === "checklist/search" || - pathVar === "checklist/create" || - pathVar === "checklist/view" || - pathVar === "checklist/update" || - pathVar === "update-dates-boundary" - ? true - : false, + show: pathVar === "my-campaign" || + pathVar === "checklist/search" || + pathVar === "checklist/create" || + pathVar === "checklist/view" || + pathVar === "checklist/update" || + pathVar === "update-dates-boundary",🧰 Tools
🪛 Biome (1.9.4)
[error] 42-49: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
54-54: Simplify boolean expressions in breadcrumb logic.The ternary expression that returns
trueorfalsecan be simplified to direct boolean expression.- show: pathVar === "setup-campaign" ? true : false, + show: pathVar === "setup-campaign",🧰 Tools
🪛 Biome (1.9.4)
[error] 54-54: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
59-59: Simplify boolean expressions in breadcrumb logic.The ternary expression that returns
trueorfalsecan be simplified to direct boolean expression.- show: pathVar === "update-dates-boundary" ? true : false, + show: pathVar === "update-dates-boundary",🧰 Tools
🪛 Biome (1.9.4)
[error] 59-59: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
64-64: Simplify boolean expressions in breadcrumb logic.The ternary expression that returns
trueorfalsecan be simplified to direct boolean expression.- show: pathVar === "checklist/search" ? true : false, + show: pathVar === "checklist/search",🧰 Tools
🪛 Biome (1.9.4)
[error] 64-64: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
104-104: Good use of parameter aliasing and useMemo for performance optimization.The parameter aliasing improves readability by using more descriptive names, and the useMemo hooks optimize performance by preventing unnecessary re-renders when these dependencies haven't changed. This is especially useful for potentially complex data structures like hierarchies.
Also applies to: 107-108
109-109: Unused local variable.
microplanStatusis not referenced elsewhere in this file. Consider removing it if it has no usage.- const microplanStatus = "RESOURCE_ESTIMATIONS_APPROVED";
118-118: App configuration routes properly added.The new routes for app configuration have been properly added, providing access to the FormBuilder, SchemaBuilder, and AppConfigurationParentLayer components. The component retrieval pattern using Digit.ComponentRegistryService is consistent with the rest of the codebase.
Also applies to: 171-173
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js (6)
6-6: Library import path updated to match newer component library structure.The update changes the import path from
digit-ui-react-componentstodigit-ui-componentsfor Stepper, Toast, Button, Footer, and Loader components, ensuring consistency with the newer component library structure.
29-29: Performance improvement using React.memo.Wrapping the SetupCampaign component with React.memo is a good optimization that prevents unnecessary re-renders when props haven't changed. This is especially beneficial for complex components with extensive state management like this one.
96-109: Good optimization: Memoizing the request criteria object.The
reqCriteriaobject is now wrapped in useMemo with the correct dependencies (tenantIdandhierarchyType). This prevents unnecessary object recreation on each render and potential redundant API calls.
962-962: Loader component usage standardized with additional props.The Loader component is now consistently using
page={true}andvariant={"PageLoader"}props across all instances, providing a more consistent loading experience throughout the application.Also applies to: 966-966, 1016-1016
1047-1052: Button label rendering logic improved.The conditional rendering for button labels is now more explicit, properly handling cases for changes in dates, action status, and form completion state.
1095-1095: React.memo properly implemented.The closing bracket for React.memo correctly matches the opening wrapper, completing the performance optimization for the component.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/fetchFromMicroplan.js (2)
216-216: Component update looks goodThe replacement of the
Headercomponent withHeaderComponentis consistent with the broader refactoring across the campaign manager module.
226-226: Loader implementation looks goodThe replacement of
LoaderWithGapwithLoaderusing the specific props (page={true},variant={"PageLoader"},loaderText={t(" ")}) is consistent with similar changes across other components in the module.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/createLocalisationService.js (1)
9-9:❓ Verification inconclusive
Review Removal of Locale from Request Payload:
The change on line 9 comments out thelocaleproperty from the request body. Please ensure that this removal is intentional and aligns with the overall app configuration updates for both web and app platforms. Validate that no dependent services or components rely on thelocalefield being present.
Below is a shell script that will search across the repository for any usage of the
locale:property as well as for references to thecreateLocalisationServicefunction. This will help us verify if any other parts of the codebase besides this file depend on the presence of thelocalefield.Once you run this script and review the output:
- If you find no dependent code or tests relying on
localein the request payload, you can confidently confirm that the change is intentional.- If there are any references where
localeis expected, please double-check that those cases are updated accordingly across both web and app configurations.
Confirmed: Removal of
localefrom Request Payload is Intentional
After reviewing the codebase (using the scripts above), no dependent services or components were found to rely on thelocalefield. Please ensure that this removal in
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/services/createLocalisationService.js(line 9) aligns with the latest configuration updates for both web and app platforms.
- Action: Verify that downstream services and tests have been updated to remove any dependency on the
localefield.
🏁 Script executed:
#!/bin/bash # Search for occurrences of the "locale:" property across the entire repository. echo "Searching for 'locale:' occurrences..." rg --ignore-case "locale:" -n . # Search for references to createLocalisationService to check its usage context. echo "Searching for 'createLocalisationService' occurrences..." rg --ignore-case "createLocalisationService" -n .Length of output: 7156
Ensure Consistency of Locale Handling Across Modules
The repository search confirms that while thelocaleproperty is still actively used in many parts of the application (for example, in various pages and services within the workbench and libraries), the removal oflocalefrom the request payload increateLocalisationService.jsis isolated to that service. Note that although the function signature still accepts alocaleparameter and its caller (useUpsertLocalisation.js) passes a value, the payload no longer includes it.Please double-check that this targeted removal aligns with recent configuration updates for both web and app platforms and that no downstream consumers rely on the presence of the
localefield in the request payload from this service. If confirmed, consider whether the function signature should also be updated to reflect the removal.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js (8)
66-80: Good improvement to conditional MDMS hook usageThe changes to the
useCustomMDMShook implementation are well done. Using theenabledoption to conditionally fetch data based on the presence ofschemaCodeis the correct pattern and will prevent unnecessary API calls.The select function's null handling is also improved, making the code more robust against potential errors.
187-187: Consistent margin handling improves UI consistencyThe addition of
style={{ marginBottom: "0rem" }}to all LabelFieldPair components creates a more consistent UI layout throughout the form.Also applies to: 202-202, 220-220, 234-234, 250-250
267-267: Defensive programming to prevent dropdown errorsGood addition of a fallback empty array for dropdown options when they might be undefined or null, preventing potential runtime errors when mapping over options.
279-279: Improved deletion UI with standard Button componentReplacing the custom delete UI with the standard Button component improves consistency and accessibility.
482-503: Delivery type radio buttons implementation improvedThe restructured delivery type radio buttons section is cleaner and more maintainable. The conditional rendering logic is appropriate.
🧰 Tools
🪛 Biome (1.9.4)
[error] 495-499: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
627-628: Standardized icon usage improves consistencyUsing the standard "AddIcon" rather than custom SVG icons improves consistency with the rest of the application and simplifies maintenance.
Also applies to: 637-638
219-219: Improved grid layout for ranged inputsThe grid layout for the IN_BETWEEN operator inputs creates a cleaner side-by-side display of the from/to fields.
297-297:❓ Verification inconclusive
Potential attribute filtering issue
The change to filter attributes based on
projectTypemight be intentional, but it's worth verifying that this doesn't exclude necessary attributes.
🏁 Script executed:
#!/bin/bash # Check what projectTypes are available in attributeConfig and which one is used rg -A 3 "projectTypes" --type jsLength of output: 22828
Verify attribute filtering logic in deliveryRule/AddDeliverycontext.js
The updated filtering at line 297 now uses:return attributeConfig.filter((attribute) => attribute.projectTypes?.includes(projectType));While this may be intentional, please double-check that the types are consistent. Specifically, confirm that the values in each attribute’s
projectTypesarray directly match the type ofprojectType. In other parts of the code (e.g., in getDeliveryConfig.js), filtering is done by comparing a property (such ase.code) withprojectType. Ifattribute.projectTypesactually stores objects rather than primitive values (like strings), you may need to update the logic to something like:attribute.projectTypes?.some((pt) => pt.code === projectType)to avoid accidentally filtering out valid attributes.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
4-4: Minor Import Expansion
You've addedTextInputandLoaderto the imports. They appear to be used in the component and look correct.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/LocalisationEditorPopup.js (4)
1-6: New File Introduction
These import statements are standard and appear correct. As this is a new file, ensure each dependency is really needed.
8-8: Component Declaration
DefiningLocalisationEditorPopupas a functional component is good. Keep it focused on handling only translations to maintain single-responsibility.
13-44: Column Definitions
Your columns array is well-structured. The usage ofwrap,style, andwidthensures better readability. Verify that large text doesn't break UI for narrower screens.
85-87: Default Export
ExportingLocalisationEditorPopupby default is fine. Confirm that no other named exports are needed here.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (8)
2-2: Import Additions
Added extra UI components (TextInput,Loader), likely for enhanced user experience. Ensure that all newly imported components are effectively used.
11-12: LocalisationEditorPopup Import
You introduced the custom popup for handling translations. Good approach to modularizing localization.
132-132: Preview Popup Toggle
SwitchingshowPopUpto true is straightforward. Ensure there's no race condition if other modals or popups depend on the same state.
230-243: Global Localisation Data
You push the main campaign, role, and help text localizations. This is effective. Keep an eye on potential duplication across different modules or repeated campaign IDs.
476-476: Extended onSubmit Signature
Addingtranslationsas a parameter to incorporate new localizations is a good design. Fewer side effects, more explicit data flow.
483-486: Merge Localisations
CombininguniqueLocalandtranslationsensures no duplicates. Good approach using array filtering for uniqueness.🧰 Tools
🪛 Biome (1.9.4)
[error] 483-483: This let declares a variable that is only assigned once.
'allLocalisations' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
490-496: Aggregating Translations by Locale
Using a reduce to group entries is neat. Double-check for any collisions if the same code-locale pair shows up in different places.
609-613: Triggering Localisation Flow
Generating codes, settinglocalisationData, and then opening the localization popup is well-chained. This improves user clarity by showing them translations right after preview.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (5)
4-4: UI Imports
Expanding the imports withTextInputandLoaderis consistent. Confirm that these components are actually utilized for the updated checklist logic.
9-9: LocalisationEditorPopup Import
Similar to CreateChecklist, the popup is integrated for translations, promoting consistent patterns across creation & update flows.
54-54: PopUp Toggle
setShowPopUp(true)is straightforward. Ensure concurrency or multiple popups won't cause unexpected states.
174-185: Localisation Data Enrichment
enrichLocalizationDatamerges code-locale entries. Confirm that collisions are handled gracefully for codes that appear in older translations.
572-584: Popup Button Elements
When returning elements in arrays, each child should have a unique key property to help React identify them. Otherwise, the order changes can cause unexpected re-renders.🧰 Tools
🪛 Biome (1.9.4)
[error] 572-584: 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/microplan/src/components/FacilityPopup.js (1)
552-552: Added localization for pagination textGood addition of internationalization support for the "Rows per page" text. This change improves the user experience by ensuring consistency in translated text throughout the application.
health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss (1)
564-567: Added dropdown menu width specificationGood addition of a specific width for the microplans action dropdown menu. The use of
!importantis justified in this case to prevent style overrides from other CSS rules, consistent with the project's styling approach.health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js (1)
234-234: Good addition for localization support.Adding the
paginationComponentOptionswith a translated label for "rows per page" improves the internationalization support of the table, ensuring consistent user experience across languages.health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js (1)
355-355: Good addition for localization support.Adding the
paginationComponentOptionswith a translated text for "rows per page" improves the internationalization support of the DataTable component, ensuring the pagination UI is properly localized across different languages.health/micro-ui/web/public/index.html (1)
10-13:❓ Verification inconclusive
CSS library versions updated.
The CSS library versions have been updated:
- digit-ui-css: 1.8.13 → 1.8.23
- digit-ui-components-css: 0.0.2-beta.44 → 0.2.0 (significant upgrade from beta)
- digit-ui-health-css: 0.3.0 → 0.2.51 (version downgrade)
The version downgrade for digit-ui-health-css (0.3.0 → 0.2.51) is unusual and should be verified.
🏁 Script executed:
#!/bin/bash # Check if there are any references to the specific CSS versions in the codebase or package.json files echo "Searching for digit-ui-health-css version references in package.json files..." find . -name "package.json" -type f -exec grep -l "digit-ui-health-css" {} \;Length of output: 243
Action: Confirm CSS version changes and validate intentional downgrade for digit-ui-health-css.
- The digit-ui-css and digit-ui-components-css updates (1.8.23 and 0.2.0 respectively) appear consistent with intended improvements.
- The digit-ui-health-css version was changed from 0.3.0 to 0.2.51. Our check across package.json files shows no dependency reference for this library, indicating it’s solely linked via CDN.
- Please verify that downgrading digit-ui-health-css to 0.2.51 is intentional—confirm via release notes or with the maintainers that this version is correct and compatible with your requirements.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/ChooseActivity.js (1)
3-3: Good addition of React Router history.Adding the useHistory hook is appropriate for programmatic navigation in React Router.
Also applies to: 10-10
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js (2)
216-216: Good enhancement of component configurabilityReplacing hardcoded pagination options with a prop-based approach allows for more flexible configuration by parent components.
220-220: Improved internationalization supportAdding translation for the "Rows per page" text enhances the component's internationalization capabilities, ensuring a consistent multilingual experience.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js (2)
67-67: Proper data passing to child componentAdding the
rowDetailsprop passes the complete item data to the FileComponent, allowing it to access eitherfileStoreIdorfilestoreIdproperties as needed. This supports the fallback mechanism added in FileComponent.js.
117-117: Consistent implementation of data passingSame enhancement as above, maintaining consistency across both file types (uploadedFiles and uploadedFacilities).
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ActivityCard.js (1)
36-37: Improved component architecture with separation of concernsThe change correctly delegates navigation responsibility to the parent component through the onClickCard callback instead of handling it directly. This makes the ActivityCard component more reusable and allows the parent component to implement more complex navigation logic, as seen in the ChooseActivity.js implementation.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js (10)
1-1: LGTM! Added CardHeader import.The additional import for CardHeader from the Digit UI components library helps with UI consistency.
10-10: LGTM! Added CustomSVG import.The import for CustomSVG is a good addition that enables the usage of icons in the custom pagination component.
694-694: LGTM! Fixed currentCategories parameter in dispatch actions.Properly passing the currentCategories parameter in dispatch actions for both "ADD_DATA" and "EDIT_DATA" ensures consistent behavior across the component.
Also applies to: 702-702
834-834: Button style enhancement: Changed from "tertiary" to "link".Changing the button variation from "tertiary" to "link" provides better visual hierarchy and improves UI consistency.
853-853: UI enhancement: Added icons to edit and delete buttons.Adding "Edit" and "Delete" icons to the buttons makes their purpose more visually identifiable.
Also applies to: 872-872
979-979: Button style enhancement: Changed variation to "link".Updating the button variation to "link" for the boundary change/add action improves visual hierarchy in the UI.
997-998: LGTM! Consistent styling for action buttons.Updating the button variations to "primary" and adding corresponding icons for Edit and Delete actions ensures visual consistency across the interface.
Also applies to: 1015-1017
1034-1034: UI improvement: Using CardHeader for section title.Replaced custom heading with a standard CardHeader component, which improves UI consistency and follows better component pattern usage.
1168-1168: Enhanced loader component.Updated the Loader component with specific page and variant properties to better indicate loading state.
1177-1178: LGTM! Improved table styling.Added width styling to ensure the table takes up the full available space.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/FacilityCatchmentMapping.js (2)
25-25: LGTM! Added refreshKey state variable.Adding a refreshKey state variable will help trigger re-renders when needed and maintain component reactivity.
191-191: LGTM! Component refresh mechanism implemented.Good implementation of the refresh mechanism:
- Using the refreshKey as the key prop for the container div to force re-render
- Incrementing refreshKey when the popup is closed to refresh the assigned villages count
This approach ensures the UI stays in sync with data changes.
Also applies to: 246-246
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/TablePage.js (3)
6-6: LGTM! Added useTranslation import.Added import for the useTranslation hook from react-i18next, enabling internationalization support.
60-60: LGTM! Initialized translation hook.Properly initialized the useTranslation hook to enable internationalization support in the component.
112-112: LGTM! Added internationalization for pagination text.Added translation support for the "Rows per page" text in the pagination component, enhancing the internationalization of the UI.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/index.js (3)
25-25: LGTM! Added MapViewPopupWrapper import.Importing the MapViewPopupWrapper component to replace the previous map view implementation.
144-145: LGTM! Added new configuration entries.Added "PopConfig" and "PlanInboxConfiguration" to the microplan MDMS data configuration to support additional functionality.
268-268: LGTM! Updated map view component.Replaced MapViewComponent with MapViewPopupWrapper for the /map-view route. The new component provides a better encapsulation of the map view functionality with a popup interface.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PopInbox.js (6)
1-6: Good addition of the context hook import.The addition of
useMyContextimport is well-placed and prepares the component for the configuration-based approach implemented throughout the file.
15-17: Good implementation of context-based configuration.Extracting configuration from the context allows for centralized configuration management, making the component more maintainable and customizable without code changes.
33-37: Configuration-driven state initialization is a good practice.Using configuration values for initial state variables improves consistency across the application and makes the component more adaptable to different use cases.
566-566: Good use of configuration for action icons.Centralizing the action icon mapping in configuration improves maintainability and makes UI customizations easier.
655-664: Well-implemented tab configuration with dynamic display.Using configuration for tab options and labels improves localization support and ensures consistent UI across the application.
773-773: Good use of configuration for table pagination options.Making the pagination options configurable improves adaptability to different screen sizes and user preferences.
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/mapview.scss (1)
44-74: Well-structured CSS for map sub-components.The new
.bottom-right-map-subcomponentsclass and its nested elements follow a consistent styling pattern and provide good flexibility for map elements positioning. The use of z-index ensures proper layering, and the flex layout provides consistent alignment.The styling is well-organized with appropriate nesting, spacing, and color definitions. The
.map-view-element-wrapper,.map-view-element-label, and.map-view-element-iconclasses have clear, specific purposes which promotes reusability.health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js (4)
10-11: Good addition of throttling utility.The addition of the
useThrottleUniquehook is appropriate for preventing rapid successive API calls that could lead to race conditions or excessive server load.
304-305: Well-implemented throttled function for employee assignment.Creating a throttled version of the assignment function with a 5-second delay is a good practice to prevent accidental double submissions and reduce server load.
461-461: Improved user action handling with throttling.The updated
onClickhandler now passes the user ID as a unique identifier to the throttled function, ensuring throttling works correctly per user rather than globally.The change from
handleAssignEmployee(row)tohandleAssignEmployeeThrottled(row.userServiceUuid, row)ensures each employee assignment is throttled separately.
581-581: Enhanced user experience with localized pagination text.Adding the
rowsPerPageTexttranslation provides better internationalization support and improves the user experience for non-English users.health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (3)
42-42: Improved layout with responsive minimum height.The addition of
min-height: calc(100vh - 10em)ensures the main content area fills the viewport appropriately while accounting for headers and footers, preventing unwanted scrollbars or empty space.
506-506: Better spacing in login form.Adding margin-bottom to the header content in the login form improves visual separation and enhances the overall layout.
635-639: Updated class selector and improved margin consistency.The change from
.label-field-pairto.digit-label-field-pairaligns with naming conventions, and the explicit margin settings ensure consistent spacing.The explicit margins with
!importantflags ensure that the styling is consistently applied even when there are competing styles from other components.health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/configs/UICustomizations.js (8)
126-126: Good practice to disable button if file not found.The button’s
isDisabled={!EstimationsfileId}logic is a solid approach to prevent clicks when the file is not ready.
346-369: Dropdown action button usage is well-structured.
- Using
isDisabled={!EstimationsfileId}enforces a solid UX pattern.- The callback
onOptionSelectis properly passed in viaonOptionSelect={(option) => onOptionSelect(option)}.No major issues.
495-495: No concerns – referencingactionsToHide.This single-line change seems straightforward, retrieving an array of user-defined hidden actions.
500-504: Initialize and store the status order map safely.Properly creating a
statusOrderMapfromconfig?.filterConfig.filterOptionsis a clear approach. Ensure you handle potential null references forfilterOptions.
529-531: Use consistent fallback defaults.Line 529 uses
|| 0while line 531 omits it. Confirm if both lines need a similar fallback or if they differ intentionally.🧰 Tools
🪛 Biome (1.9.4)
[error] 530-530: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 531-531: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
537-537: Dependency array updated to include planWithCensusToAll.Including
planWithCensusToAllin dependencies ensures the effect properly refetches whenever that data changes. No concerns.
559-562: Efficiently handling assigned counts.Be sure to confirm logic if one of these counts is undefined. The fallback here is direct usage. Quick verification is recommended.
604-604: Verifying disabledTabStatus logic.Ensure
selectedFilter?.statusis set as intended when tab statuses differ. This condition might hide the tab entirely.health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js (7)
37-37: Default filter extraction looks good.Using
config?.filterConfig?.defaultActiveFilterforselectedFilterensures dynamic defaulting.
42-43: Recommended to unify naming for clarity.
currentPagevs.rowsPerPageis consistent, but ensure the table usage also matches these variable names in all references.
53-53: Effective approach for setting the default active tab.
config?.tabConfig?.defaultActiveTabis a clear pattern to dynamically align with the config’s default.
64-64: Mapping user roles with minimal overhead.No issues with
map((roleData) => roleData?.code);– just confirm role checks usage.
279-355: Separate data fetch forplanWithCensusToAll.This new hook invocation is well-structured. Please confirm that the fields
planWithCensusToAll?.TotalCountandplanWithCensusToAll?.StatusCountdo not overlap or conflict with the main fetch.🧰 Tools
🪛 Biome (1.9.4)
[error] 307-307: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
366-366: Dependency array ensures re-calculation upon relevant changes.Including
planWithCensus, planWithCensusToAll, activeLinkis correct for the effect block.
604-604: Disable tab logic.When
selectedFilter?.statusequalsconfig?.tabConfig?.disabledTabStatus, the entire tab is hidden. Confirm if the user must be notified of the hidden state.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (8)
1-1: Importing TourProvider is properly placed.Ensures the user onboarding tours remain accessible.
56-58: Adding new components for app configuration workflow.Registering
AppPreview,AppConfigurationParentLayer, andFormBuilderis logical for the extended campaign manager functionality.
73-73: Obtaining module name dynamically.
Digit.Utils.campaign.getModuleName()is a robust approach, but verify if fallback is needed if no module is found.
80-80: Filtering MDMS data by dynamic moduleName.Ensure
moduleNameis nonempty to avoid returning unwanted data.
88-88: Explicitly specifying schemaCode for clarity.Good practice to explicitly name
"HierarchySchema"for MDMS queries.
94-96: Fallback module list includes “dummy-module.”Static references to “dummy-module” may be experimental. Confirm if needed in production.
108-108: Loader with variant “PageLoader.”All good. The user sees a full-page loader while data is fetched.
175-177: Registering newly introduced components.Clear approach to ensure they are discoverable through the registry service.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UploadDataCustom.js (7)
27-29: Added new state variables for improved file download handling.The new state variables (
fileData,isDownloadDisabled,isPolling) improve the template download functionality by introducing proper state management for file data and enabling polling mechanism.
68-68: Tracking download button click state.The
isDownloadClickedstate variable helps track user interaction with the download button and ensures the download process continues even if file data isn't immediately available.
611-624: Polling implementation with proper cleanup.The polling mechanism correctly implements a timeout-based approach with proper cleanup in the useEffect's return function to prevent memory leaks.
626-630: Auto-download when data becomes available.This useEffect elegantly handles the case where a user clicks download before the file is ready, automatically triggering the download once the data is available.
637-641: Early return condition in downloadTemplate function.The early return condition ensures that the download process doesn't continue unnecessarily when required data isn't available, preventing potential errors.
646-669: File download logic with proper error handling.The function handles the file download process with appropriate error states and user feedback through toast messages.
734-737: Updated download button click handler.The new click handler properly sets the download clicked state before initiating the download process, enabling better tracking of user intention.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/utils/utilities.js (2)
512-532: New validation function for plan config.The
validatePlanConfigForDraftDownloadfunction provides a structured approach to validate the plan configuration before draft download, implementing an early return pattern for efficient validation.
592-593: Updated exports with new validation function.The export object has been properly updated to include the new
validatePlanConfigForDraftDownloadfunction.health/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js (2)
845-845: Button handling is properly updated to check for Estimations file.The button is now correctly disabled when the Estimations file ID is not available, which prevents user frustration by disabling the action when it cannot be completed.
977-989: Consistent implementation of EstimationsfileId in MyMicroplanSearchConfig.The handling of the Estimations file ID is consistent with the implementation in other parts of the code.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/MapViewPopup.js (3)
11-25: Good implementation of utility functions with error handling.The utility functions are well-structured with appropriate error handling in
removeAllLayers. The implementation checks for undefined map or layers before attempting to remove them, which prevents potential runtime errors.
138-156: Good implementation of custom SVG marker with conditional rendering.The implementation of the custom SVG marker with conditional rendering based on the location type is well-structured. The icon properties are properly configured for appropriate positioning on the map.
299-331: Well-structured component with proper default values.The
MapViewPopupWrappercomponent is well-structured with appropriate default values for its props. The comments clearly indicate that the hardcoded default values should be removed after implementation, which is good practice.
| import { LoaderWithGap } from "@egovernments/digit-ui-react-components"; | ||
| import { AlertCard, Toast ,HeaderComponent, Loader } from "@egovernments/digit-ui-components"; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Remove unused import LoaderWithGap
The LoaderWithGap component is imported in line 5 but is no longer used in the code since it has been replaced with the Loader component from @egovernments/digit-ui-components on line 226. Removing unused imports improves code maintainability and reduces bundle size.
-import { LoaderWithGap } from "@egovernments/digit-ui-react-components";
-import { AlertCard, Toast ,HeaderComponent, Loader } from "@egovernments/digit-ui-components";
+import { AlertCard, Toast, HeaderComponent, Loader } from "@egovernments/digit-ui-components";📝 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 { LoaderWithGap } from "@egovernments/digit-ui-react-components"; | |
| import { AlertCard, Toast ,HeaderComponent, Loader } from "@egovernments/digit-ui-components"; | |
| import { AlertCard, Toast, HeaderComponent, Loader } from "@egovernments/digit-ui-components"; |
| <PopUp | ||
| className={"campaign-product-wrapper"} | ||
| type={"default"} | ||
| heading={t(`CAMPAIGN_PRODUCTS_MODAL_HEADER_TEXT`)} | ||
| onOverlayClick={() => { | ||
| setShowModal(false); | ||
| }} | ||
| onClose={() => { | ||
| setShowModal(false); | ||
| }} | ||
| footerChildren={[ | ||
| <Button | ||
| // className={"campaign-type-alert-button"} | ||
| type={"button"} | ||
| size={"large"} | ||
| variation={"primary"} | ||
| label={t("CAMPAIGN_PRODUCTS_MODAL_SUBMIT_TEXT")} | ||
| onClick={confirmResources} | ||
| />, | ||
| ]} | ||
| > | ||
| <AddProducts | ||
| stref={prodRef} | ||
| selectedDelivery={delivery} | ||
| confirmResources={confirmResources} | ||
| showToast={showToast} | ||
| closeToast={closeToast} | ||
| selectedProducts={delivery?.products} | ||
| /> | ||
| </PopUp> |
There was a problem hiding this comment.
Modal replacement improves consistency with component library
Replacing the custom modal with the PopUp component from your component library is a good practice for maintaining consistency across the application.
However, there's a React issue to address:
The Button element in the footerChildren array is missing a key prop. React requires keys for elements in arrays to maintain component identity during re-renders:
footerChildren={[
<Button
+ key="confirm-resources"
type={"button"}
size={"large"}
variation={"primary"}
label={t("CAMPAIGN_PRODUCTS_MODAL_SUBMIT_TEXT")}
onClick={confirmResources}
/>,
]}📝 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.
| <PopUp | |
| className={"campaign-product-wrapper"} | |
| type={"default"} | |
| heading={t(`CAMPAIGN_PRODUCTS_MODAL_HEADER_TEXT`)} | |
| onOverlayClick={() => { | |
| setShowModal(false); | |
| }} | |
| onClose={() => { | |
| setShowModal(false); | |
| }} | |
| footerChildren={[ | |
| <Button | |
| // className={"campaign-type-alert-button"} | |
| type={"button"} | |
| size={"large"} | |
| variation={"primary"} | |
| label={t("CAMPAIGN_PRODUCTS_MODAL_SUBMIT_TEXT")} | |
| onClick={confirmResources} | |
| />, | |
| ]} | |
| > | |
| <AddProducts | |
| stref={prodRef} | |
| selectedDelivery={delivery} | |
| confirmResources={confirmResources} | |
| showToast={showToast} | |
| closeToast={closeToast} | |
| selectedProducts={delivery?.products} | |
| /> | |
| </PopUp> | |
| <PopUp | |
| className={"campaign-product-wrapper"} | |
| type={"default"} | |
| heading={t(`CAMPAIGN_PRODUCTS_MODAL_HEADER_TEXT`)} | |
| onOverlayClick={() => { | |
| setShowModal(false); | |
| }} | |
| onClose={() => { | |
| setShowModal(false); | |
| }} | |
| footerChildren={[ | |
| <Button | |
| key="confirm-resources" | |
| // className={"campaign-type-alert-button"} | |
| type={"button"} | |
| size={"large"} | |
| variation={"primary"} | |
| label={t("CAMPAIGN_PRODUCTS_MODAL_SUBMIT_TEXT")} | |
| onClick={confirmResources} | |
| />, | |
| ]} | |
| > | |
| <AddProducts | |
| stref={prodRef} | |
| selectedDelivery={delivery} | |
| confirmResources={confirmResources} | |
| showToast={showToast} | |
| closeToast={closeToast} | |
| selectedProducts={delivery?.products} | |
| /> | |
| </PopUp> |
🧰 Tools
🪛 Biome (1.9.4)
[error] 541-548: 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)
| filteredDeliveryConfig?.deliveryConfig?.find((i, n) => n === targetedData?.deliveryIndex - 1)?.conditionConfig?.[ | ||
| delivery?.ruleKey - 1 | ||
| ]?.disableDeliveryType | ||
| ? true | ||
| : false |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Simplify boolean conditional expression
The ternary operator returning true/false can be simplified.
- disabled={
- filteredDeliveryConfig?.deliveryConfig?.find((i, n) => n === targetedData?.deliveryIndex - 1)?.conditionConfig?.[
- delivery?.ruleKey - 1
- ]?.disableDeliveryType
- ? true
- : false
- }
+ disabled={!!filteredDeliveryConfig?.deliveryConfig?.find((i, n) => n === targetedData?.deliveryIndex - 1)?.conditionConfig?.[
+ delivery?.ruleKey - 1
+ ]?.disableDeliveryType}📝 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.
| filteredDeliveryConfig?.deliveryConfig?.find((i, n) => n === targetedData?.deliveryIndex - 1)?.conditionConfig?.[ | |
| delivery?.ruleKey - 1 | |
| ]?.disableDeliveryType | |
| ? true | |
| : false | |
| disabled={!!filteredDeliveryConfig?.deliveryConfig?.find((i, n) => n === targetedData?.deliveryIndex - 1)?.conditionConfig?.[ | |
| delivery?.ruleKey - 1 | |
| ]?.disableDeliveryType} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 495-499: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
| @@ -14,7 +14,7 @@ export const useBoundaryRelationshipSearch = ({BOUNDARY_HIERARCHY_TYPE , tenantI | |||
| }, | |||
| }; | |||
|
|
|||
| const { data: hierarchyData, refetch, isLoading } = Digit.Hooks.useCustomAPIHook(reqCriteria); | |||
| const { data: hierarchyData, isLoading } = Digit.Hooks.useCustomAPIHook(reqCriteria); | |||
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Consider handling the refetch functionality removal
The removal of the refetch property from the destructured return value may impact components that relied on manual data refetching. If this was intentional, ensure that any component using this hook has alternative means to refresh data if needed.
- const { data: hierarchyData, isLoading } = Digit.Hooks.useCustomAPIHook(reqCriteria);
+ const { data: hierarchyData, isLoading, error } = Digit.Hooks.useCustomAPIHook(reqCriteria);Additionally, consider returning both isLoading and potential error states from this hook to allow consuming components to handle loading and error states appropriately:
- return hierarchyData?.TenantBoundary?.[0]?.boundary;
+ return {
+ boundaries: hierarchyData?.TenantBoundary?.[0]?.boundary,
+ isLoading,
+ error
+ };| return ( | ||
| <div style={{ minWidth: "min-content" }}> | ||
| <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "1rem" }}></div> | ||
|
|
||
| <Tab | ||
| activeLink = {activeLocale} | ||
| configItemKey="value" | ||
| configNavItems={languages} | ||
| onTabClick={(v)=>{}} | ||
| setActiveLink={setActiveLocale} | ||
| showNav | ||
| style={{}} | ||
| /> | ||
|
|
||
| <DataTable columns={columns} data={localisationData} pagination highlightOnHover noHeader persistTableHead /> | ||
|
|
||
| <div style={{ display: "flex", gap: "1rem", justifyContent: "flex-end", marginTop: "2rem" }}> | ||
| <Button label={t("CANCEL")} variation="secondary" onClick={onClose} /> | ||
| <Button | ||
| label={t("SAVE_TRANSLATIONS")} | ||
| variation="primary" | ||
| onClick={() => { | ||
| const formatted = Object.entries(translations) | ||
| .flatMap(([code, localesMap]) => | ||
| Object.entries(localesMap).map(([locale, message]) => ({ | ||
| code, | ||
| message: message.trim(), // Remove whitespace | ||
| module: "hcm-checklist", | ||
| locale, | ||
| })) | ||
| ) | ||
| .filter((entry) => entry.message !== ""); // Filter out empty translations | ||
| onSave(formatted); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Render & UI
The overall layout of the popup with DataTable, Tab, and Buttons is coherent. Be cautious about accessibility (ARIA labels, tab order) if you expand functionality.
🧰 Tools
🪛 Biome (1.9.4)
[error] 49-49: 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)
| const fileId = row?.files.find((item) => item.templateIdentifier === "Estimations")?.filestoreId; | ||
| if (!fileId) { | ||
| console.error("Population template file not found"); |
There was a problem hiding this comment.
Fix inconsistency between variable lookup and error message.
The code searches for "Estimations" template but the error message still references "Population" template.
const fileId = row?.files.find((item) => item.templateIdentifier === "Estimations")?.filestoreId;
if (!fileId) {
- console.error("Population template file not found");
+ console.error("Estimations template file not found");
return;
}📝 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.
| const fileId = row?.files.find((item) => item.templateIdentifier === "Estimations")?.filestoreId; | |
| if (!fileId) { | |
| console.error("Population template file not found"); | |
| const fileId = row?.files.find((item) => item.templateIdentifier === "Estimations")?.filestoreId; | |
| if (!fileId) { | |
| console.error("Estimations template file not found"); | |
| return; | |
| } |
| <Button | ||
| type={"button"} | ||
| size={"large"} | ||
| variation={"primary"} | ||
| label={t("Close")} | ||
| onClick={() => { | ||
| setShowPopup(false); | ||
| }} | ||
| style={{ width: "12.5rem" }} | ||
| />, |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Add key prop to iterable element.
The button element in footerChildren array needs a key prop to help React efficiently update the DOM.
footerChildren={[
<Button
+ key="close-button"
type={"button"}
size={"large"}
variation={"primary"}
label={t("Close")}
onClick={() => {
setShowPopup(false);
}}
style={{ width: "12.5rem" }}
/>,
]}📝 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.
| <Button | |
| type={"button"} | |
| size={"large"} | |
| variation={"primary"} | |
| label={t("Close")} | |
| onClick={() => { | |
| setShowPopup(false); | |
| }} | |
| style={{ width: "12.5rem" }} | |
| />, | |
| footerChildren={[ | |
| <Button | |
| key="close-button" | |
| type={"button"} | |
| size={"large"} | |
| variation={"primary"} | |
| label={t("Close")} | |
| onClick={() => { | |
| setShowPopup(false); | |
| }} | |
| style={{ width: "12.5rem" }} | |
| />, | |
| ]} |
🧰 Tools
🪛 Biome (1.9.4)
[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)
| var [map, setMap] = useState(null); | ||
| var [_mapNode, set__mapNode] = useState("map"); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Replace var with const or let.
Using var for variable declarations is discouraged as it can lead to scope issues due to variable hoisting.
- var [map, setMap] = useState(null);
- var [_mapNode, set__mapNode] = useState("map");
+ const [map, setMap] = useState(null);
+ const [_mapNode, set__mapNode] = useState("map");📝 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.
| var [map, setMap] = useState(null); | |
| var [_mapNode, set__mapNode] = useState("map"); | |
| const [map, setMap] = useState(null); | |
| const [_mapNode, set__mapNode] = useState("map"); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 69-69: Use let or const instead of var.
A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.
(lint/style/noVar)
[error] 70-70: Use let or const instead of var.
A variable declared with var is accessible in the whole body of the function. Thus, the variable can be accessed before its initialization and outside the block where it is declared.
See MDN web docs for more details.
Unsafe fix: Use 'const' instead.
(lint/style/noVar)
| let baseMaps = {}; | ||
| let defaultBaseMap = undefined; | ||
| BaseMapLayers.forEach((item) => { | ||
| if (item.url) { | ||
| const layer = L.tileLayer(item.url, { | ||
| minZoom: item?.minZoom, | ||
| maxZoom: item?.maxZoom, | ||
| attribution: item?.attribution, | ||
| }); | ||
| baseMaps[item?.name] = { | ||
| metadata: item, | ||
| layer, | ||
| }; | ||
| if (!defaultBaseMap) | ||
| defaultBaseMap = { | ||
| name: item?.name, | ||
| layer, | ||
| }; | ||
| } | ||
| }); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Use const for variables that are only assigned once.
Several variables are declared with let but are never reassigned, which could lead to accidental reassignment.
- let baseMaps = {};
- let defaultBaseMap = undefined;
+ const baseMaps = {};
+ let defaultBaseMap = undefined; // This remains 'let' as it's reassignedSimilarly, apply this change to mapConfig at line 162 and map_i at line 170.
📝 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 baseMaps = {}; | |
| let defaultBaseMap = undefined; | |
| BaseMapLayers.forEach((item) => { | |
| if (item.url) { | |
| const layer = L.tileLayer(item.url, { | |
| minZoom: item?.minZoom, | |
| maxZoom: item?.maxZoom, | |
| attribution: item?.attribution, | |
| }); | |
| baseMaps[item?.name] = { | |
| metadata: item, | |
| layer, | |
| }; | |
| if (!defaultBaseMap) | |
| defaultBaseMap = { | |
| name: item?.name, | |
| layer, | |
| }; | |
| } | |
| }); | |
| const baseMaps = {}; | |
| let defaultBaseMap = undefined; // This remains 'let' as it's reassigned | |
| BaseMapLayers.forEach((item) => { | |
| if (item.url) { | |
| const layer = L.tileLayer(item.url, { | |
| minZoom: item?.minZoom, | |
| maxZoom: item?.maxZoom, | |
| attribution: item?.attribution, | |
| }); | |
| baseMaps[item?.name] = { | |
| metadata: item, | |
| layer, | |
| }; | |
| if (!defaultBaseMap) | |
| defaultBaseMap = { | |
| name: item?.name, | |
| layer, | |
| }; | |
| } | |
| }); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 111-111: This let declares a variable that is only assigned once.
'baseMaps' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
| const ViewElement = ({ type, label }) => { | ||
| const renderIcon = () => { | ||
| switch (type) { | ||
| case "Village": | ||
| return ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> | ||
| <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#C2C80E" stroke="#D6D5D4" /> | ||
| <path | ||
| d="M5 18V10.5L9.5 6L14 10.5V18H10.25V14.25H8.75V18H5ZM8.75 12.75H10.25V11.25H8.75V12.75ZM15.5 18V9.88125L11.6188 6H13.7375L17 9.2625V18H15.5ZM18.5 18V8.64375L15.8563 6H17.975L20 8.025V18H18.5Z" | ||
| fill="white" | ||
| /> | ||
| </svg> | ||
| ); | ||
| case "Facility": | ||
| return ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> | ||
| <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#C84C0E" stroke="#D6D5D4" /> | ||
| <path | ||
| d="M5 18V10.5L9.5 6L14 10.5V18H10.25V14.25H8.75V18H5ZM8.75 12.75H10.25V11.25H8.75V12.75ZM15.5 18V9.88125L11.6188 6H13.7375L17 9.2625V18H15.5ZM18.5 18V8.64375L15.8563 6H17.975L20 8.025V18H18.5Z" | ||
| fill="white" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
| }; | ||
| return ( | ||
| <div className="map-view-element-wrapper" style={{ display: "flex" }}> | ||
| <div className="map-view-element-icon">{renderIcon()}</div> | ||
| <div className="map-view-element-label">{label}</div> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Add accessibility attributes to SVG elements.
The SVG elements lack accessibility attributes which makes them inaccessible to screen readers.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+ <title>Village Location Icon</title>
<rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#C2C80E" stroke="#D6D5D4" />
<path
d="M5 18V10.5L9.5 6L14 10.5V18H10.25V14.25H8.75V18H5ZM8.75 12.75H10.25V11.25H8.75V12.75ZM15.5 18V9.88125L11.6188 6H13.7375L17 9.2625V18H15.5ZM18.5 18V8.64375L15.8563 6H17.975L20 8.025V18H18.5Z"
fill="white"
/>
</svg>Similar fix needed for the Facility icon SVG.
📝 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.
| const ViewElement = ({ type, label }) => { | |
| const renderIcon = () => { | |
| switch (type) { | |
| case "Village": | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#C2C80E" stroke="#D6D5D4" /> | |
| <path | |
| d="M5 18V10.5L9.5 6L14 10.5V18H10.25V14.25H8.75V18H5ZM8.75 12.75H10.25V11.25H8.75V12.75ZM15.5 18V9.88125L11.6188 6H13.7375L17 9.2625V18H15.5ZM18.5 18V8.64375L15.8563 6H17.975L20 8.025V18H18.5Z" | |
| fill="white" | |
| /> | |
| </svg> | |
| ); | |
| case "Facility": | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#C84C0E" stroke="#D6D5D4" /> | |
| <path | |
| d="M5 18V10.5L9.5 6L14 10.5V18H10.25V14.25H8.75V18H5ZM8.75 12.75H10.25V11.25H8.75V12.75ZM15.5 18V9.88125L11.6188 6H13.7375L17 9.2625V18H15.5ZM18.5 18V8.64375L15.8563 6H17.975L20 8.025V18H18.5Z" | |
| fill="white" | |
| /> | |
| </svg> | |
| ); | |
| } | |
| }; | |
| return ( | |
| <div className="map-view-element-wrapper" style={{ display: "flex" }}> | |
| <div className="map-view-element-icon">{renderIcon()}</div> | |
| <div className="map-view-element-label">{label}</div> | |
| </div> | |
| ); | |
| }; | |
| const ViewElement = ({ type, label }) => { | |
| const renderIcon = () => { | |
| switch (type) { | |
| case "Village": | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <title>Village Location Icon</title> | |
| <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#C2C80E" stroke="#D6D5D4" /> | |
| <path | |
| d="M5 18V10.5L9.5 6L14 10.5V18H10.25V14.25H8.75V18H5ZM8.75 12.75H10.25V11.25H8.75V12.75ZM15.5 18V9.88125L11.6188 6H13.7375L17 9.2625V18H15.5ZM18.5 18V8.64375L15.8563 6H17.975L20 8.025V18H18.5Z" | |
| fill="white" | |
| /> | |
| </svg> | |
| ); | |
| case "Facility": | |
| return ( | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <title>Facility Icon</title> | |
| <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" fill="#C84C0E" stroke="#D6D5D4" /> | |
| <path | |
| d="M5 18V10.5L9.5 6L14 10.5V18H10.25V14.25H8.75V18H5ZM8.75 12.75H10.25V11.25H8.75V12.75ZM15.5 18V9.88125L11.6188 6H13.7375L17 9.2625V18H15.5ZM18.5 18V8.64375L15.8563 6H17.975L20 8.025V18H18.5Z" | |
| fill="white" | |
| /> | |
| </svg> | |
| ); | |
| default: | |
| return null; | |
| } | |
| }; | |
| return ( | |
| <div className="map-view-element-wrapper" style={{ display: "flex" }}> | |
| <div className="map-view-element-icon">{renderIcon()}</div> | |
| <div className="map-view-element-label">{label}</div> | |
| </div> | |
| ); | |
| }; |
🧰 Tools
🪛 Biome (1.9.4)
[error] 32-32: 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)
[error] 42-42: 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)
Choose the appropriate template for your PR:
Feature PR
Feature Request
JIRA ID
Module
Description
Related Issues
Bugfix PR
Bugfix Request
JIRA ID
Module
Description
Root Cause
Related Issues
Release PR
Summary by CodeRabbit