Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add/edit mappings #2152

Open
wants to merge 2 commits into
base: console
Choose a base branch
from
Open

add/edit mappings #2152

wants to merge 2 commits into from

Conversation

suryansh-egov
Copy link
Contributor

@suryansh-egov suryansh-egov commented Jan 23, 2025

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

  • New Features

    • Added new component for managing campaign mappings.
    • Enhanced data upload and validation functionality.
    • Improved mapping and user management interfaces.
    • Introduced a new popup for adding data mappings.
  • Bug Fixes

    • Refined Excel data handling and validation processes.
  • Style

    • Updated CSS stylesheets to version 0.2.38.
    • Added custom popup and mapping styling.
  • Chores

    • Streamlined component configuration and validation logic.

@suryansh-egov suryansh-egov requested a review from a team as a code owner January 23, 2025 11:55
Copy link
Contributor

coderabbitai bot commented Jan 23, 2025

📝 Walkthrough

Walkthrough

This pull request introduces several changes across multiple files in the health micro-UI project. The modifications primarily focus on enhancing the campaign manager module, including updates to CSS styling, new React components for data mapping and upload, and improvements to data validation and configuration. The changes include a new AddOrEditMapping component, updates to data upload and validation logic, and CSS styling modifications for popup elements.

Changes

File Change Summary
health/micro-ui/web/micro-ui-internals/example/public/index.html
health/micro-ui/web/public/index.html
Updated CSS stylesheet version from 0.2.37 to 0.2.38
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss Added new CSS class .digit-popup-wrapper.custom-pop-up-mapping with custom styling for popup elements
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AddOrEditMapping.js New React component for managing mappings with dynamic input rendering
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js Added DataType import and simplified validation logic
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js Enhanced data mapping functionality with new state management, validation, and UI components
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/CampaignConfig.js Added validationType properties for facility and user mapping components
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useReadExcelData.js Added new column index tracking variables and refined Excel data update logic

Possibly related PRs

  • css update #780: This PR also updates the version of a CSS stylesheet in the same HTML file as the main PR, indicating a similar type of change.
  • updated css #804: Similar to the main PR, this PR updates the version of a CSS stylesheet in the same HTML file.
  • updated versions #1042: This PR updates the version of a CSS stylesheet in the same HTML file, reflecting a consistent pattern of version updates.

Suggested reviewers

  • jagankumar-egov
  • nabeelmd-eGov

Poem

🐰 Mapping magic, data's delight,

Popups dancing, styles so bright!

Excel sheets bow to our command,

With CodeRabbit's helping hand.

Campaign manager, now refined! 🚀

✨ Finishing Touches
  • 📝 Generate Docstrings (Beta)

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 25

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f117db and 4b87c9b.

⛔ Files ignored due to path filters (1)
  • health/micro-ui/web/micro-ui-internals/packages/css/package.json is excluded by !**/*.json
📒 Files selected for processing (8)
  • health/micro-ui/web/micro-ui-internals/example/public/index.html (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AddOrEditMapping.js (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (5 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js (10 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/CampaignConfig.js (2 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useReadExcelData.js (3 hunks)
  • health/micro-ui/web/public/index.html (1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/hooks/useReadExcelData.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AddOrEditMapping.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/CampaignConfig.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js (1)

Pattern **/*.js: check

🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AddOrEditMapping.js

[error] 28-28: 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] 52-52: 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] 66-66: 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] 67-67: 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] 119-119: 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] 144-144: 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)

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js

[error] 37-37: 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] 418-418: Unsafe usage of optional chaining.

If it short-circuits with 'undefined' the evaluation will throw TypeError here:

(lint/correctness/noUnsafeOptionalChaining)


[error] 435-435: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)


[error] 453-453: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)


[error] 412-412: 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] 413-413: 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] 414-414: 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] 415-415: 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] 439-455: 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] 440-440: 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] 441-441: 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] 525-525: Reassigning a function parameter is confusing.

The parameter is declared here:

Use a local variable instead.

(lint/style/noParameterAssign)


[error] 522-522: This let declares a variable that is only assigned once.

'validate' is never reassigned.

Safe fix: Use const instead.

(lint/style/useConst)


[error] 720-720: 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] 823-823: 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] 691-691: 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] 794-794: 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] 880-880: Avoid passing children using a prop

The canonical way to pass children in React is to use JSX elements

(lint/correctness/noChildrenProp)


[error] 889-897: 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] 898-908: 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 (7)
health/micro-ui/web/public/index.html (1)

13-13: LGTM! Version update is consistent.

The CSS version update matches the change in the other HTML file, maintaining consistency across the application.

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (2)

277-290: LGTM! Well-structured button layout.

The grid layout for footer buttons is well-implemented:

  • Equal width columns using 1fr 1fr
  • Full-width buttons within their containers
  • Consistent styling for both primary and secondary buttons

292-295: Verify overflow visibility requirement.

Setting overflow: visible on the popup children wrap might lead to content overlapping outside the popup boundaries. Please ensure this is the intended behavior and necessary for the UI requirements.

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)

783-791: ⚠️ Potential issue

Verify empty sheet handling.

The commented-out empty sheet validation has been removed. Please verify:

  1. Is there alternative validation for empty sheets?
  2. What is the expected behavior when an empty sheet is uploaded?
  3. Could this lead to potential issues downstream?

Consider either:

  1. Restoring the empty sheet validation
  2. Implementing alternative validation
  3. Documenting why empty sheets are now allowed
+          if (jsonData.length === 0) {
+            const errorMessage = t("HCM_EMPTY_SHEET");
+            setErrorsType((prevErrors) => ({
+              ...prevErrors,
+              [type]: errorMessage,
+            }));
+            setIsError(true);
+            return;
+          }
✅ Verification successful

Empty sheet handling is properly implemented

The commented-out validation was replaced with a better approach: empty sheets are now silently skipped using if (jsonData.length == 0) continue; at line 608. This is actually a more user-friendly approach for multi-sheet files, preventing unnecessary error messages while maintaining data integrity.

🏁 Scripts executed

The following scripts were executed for the analysis:

Error: No shell scripts found


Script:

#!/bin/bash
# Search for empty sheet validation patterns and HCM_EMPTY_SHEET usage
echo "=== Searching for empty sheet validations ==="
rg "jsonData\.length\s*(===|==)\s*0" -A 3 -B 3

echo -e "\n=== Searching for HCM_EMPTY_SHEET usage ==="
rg "HCM_EMPTY_SHEET" -A 2 -B 2

echo -e "\n=== Looking for other sheet validation patterns ==="
rg "setErrorsType.*type.*empty" -A 3 -B 3

echo -e "\n=== Examining the data processing flow ==="
ast-grep --pattern 'const jsonData = $_'

Length of output: 7061

health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/CampaignConfig.js (3)

286-286: Verify validation type consistency with facility mapping.

The validationType: "facilityWithBoundary" aligns with the component's type: "facilityWithBoundaryMapping", but there's a slight naming inconsistency between them.

✅ Verification successful

The validationType: "facilityWithBoundary" is correct and consistent with codebase usage.

The validation type follows the standard naming convention used throughout the codebase. It's the type: "facilityWithBoundaryMapping" that should be updated to match this convention.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other instances of these validation types to ensure consistent naming
rg -l 'facilityWithBoundary|facilityWithBoundaryMapping' --type js

Length of output: 1402


Script:

#!/bin/bash
# Check usage context in relevant files
echo "=== UploadData.js ==="
rg -A 2 -B 2 'facilityWithBoundary|facilityWithBoundaryMapping' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js

echo -e "\n=== UploadDataMapping.js ==="
rg -A 2 -B 2 'facilityWithBoundary|facilityWithBoundaryMapping' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js

echo -e "\n=== schemaConfig.js ==="
rg -A 2 -B 2 'facilityWithBoundary|facilityWithBoundaryMapping' health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/schemaConfig.js

Length of output: 7056


339-339: 🛠️ Refactor suggestion

Verify validation type consistency with user mapping.

The validationType: "userWithBoundary" seems inconsistent with the component's type: "userMapping". This naming mismatch might cause validation issues.

Consider aligning the naming conventions. Either:

-                type: "userMapping",
-                validationType: "userWithBoundary"
+                type: "userWithBoundaryMapping",
+                validationType: "userWithBoundary"

Or:

-                type: "userMapping",
-                validationType: "userWithBoundary"
+                type: "userMapping",
+                validationType: "userMapping"

286-286: Verify DataUploadWrapper component handles these validation types.

The new validationType properties are being passed to the DataUploadWrapper component. Ensure this component is updated to handle these validation types.

Also applies to: 339-339

✅ Verification successful

Validation types are properly handled in the DataUploadWrapper component

The component correctly handles both "facilityWithBoundary" and "userWithBoundary" validation types through a comprehensive validation system that includes schema validation, type checking, and boundary validation with proper error handling and user feedback.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for DataUploadWrapper component implementation
echo "Searching for DataUploadWrapper component definition..."
fd -e js -e jsx DataUploadWrapper

# Search for validation type handling
echo "Searching for validation type handling..."
rg -A 5 'validationType.*(?:facilityWithBoundary|userWithBoundary)' --type js

Length of output: 2061


Script:

#!/bin/bash
# Check DataUploadWrapper implementation
echo "Content of DataUploadWrapper.js:"
cat "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadWrapper.js"

# Search for validation-related imports or constants
echo -e "\nSearching for validation-related code:"
rg -l "validation" --type js --glob "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/**"

Length of output: 5002


Script:

#!/bin/bash
# Check UploadDataMappingWrapper implementation
echo "Content of UploadDataMappingWrapper.js:"
cat "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMappingWrapper.js"

# Check UploadDataMapping implementation
echo -e "\nContent of UploadDataMapping.js:"
cat "health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadDataMapping.js"

Length of output: 43413

<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].37/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].38/dist/index.css" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Invalid package version detected

The specified version 0.2.38 of @egovernments/digit-ui-health-css does not exist in the npm registry. The latest published version is 0.2.1, and the highest available version in the 0.2.x series is 0.2.37. This will cause CSS loading failures.

  • health/micro-ui/web/public/index.html
  • health/micro-ui/web/micro-ui-internals/example/public/index.html
🔗 Analysis chain

Verify version compatibility and changelog.

The CSS version update from 0.2.36 to 0.2.38 should be reviewed for any breaking changes.

Run this script to check package information and recent versions:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check package versions and changelog
curl -s "https://registry.npmjs.org/@egovernments/digit-ui-health-css" | jq -r '.["dist-tags"].latest, .versions | keys[]' | sort -V

Length of output: 187


Script:

#!/bin/bash
# Check package information with corrected jq query
echo "Package information:"
curl -s "https://registry.npmjs.org/@egovernments/digit-ui-health-css" | jq -r '."dist-tags".latest as $latest | "Latest version: \($latest)\nAvailable versions:", (.versions | keys[]) // empty'

echo -e "\nChecking for other occurrences in the codebase:"
rg -l "digit-ui-health-css@" --type html

Length of output: 1052


Script:

#!/bin/bash
echo "Checking version in health/micro-ui/web/public/index.html:"
cat health/micro-ui/web/public/index.html | grep "digit-ui-health-css@"

Length of output: 307

@@ -266,3 +266,31 @@
.app-config-actionBar {
z-index: 9999;
}

.digit-popup-wrapper.custom-pop-up-mapping {
width: fit-content !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Consider alternatives to !important.

Using !important for width override suggests potential specificity issues in the CSS cascade. Consider refactoring the selectors to achieve higher specificity without !important.

@@ -9,6 +9,7 @@ import { InfoCard, PopUp, Toast, Button} from "@egovernments/digit-ui-components
import { downloadExcelWithCustomName } from "../utils";
import { CONSOLE_MDMS_MODULENAME } from "../Module";
import TagComponent from "./TagComponent";
import { DataType } from "ajv/dist/compile/validate/dataType";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Remove unused import.

The DataType import from ajv is not used anywhere in the code. Consider removing it to avoid unnecessary bundle size increase.

-import { DataType } from "ajv/dist/compile/validate/dataType";

Comment on lines +738 to +746
// if (jsonData.length == 0) {
// const errorMessage = t("HCM_FACILITY_USAGE_VALIDATION");
// setErrorsType((prevErrors) => ({
// ...prevErrors,
// [type]: errorMessage,
// }));
// setIsError(true);
// return;
// }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Remove commented-out code.

Instead of keeping commented-out code, consider:

  1. Removing it if it's no longer needed
  2. Moving it to a separate document if it might be needed later
  3. Creating a new Git branch if it's a work in progress
-              // if (jsonData.length == 0) {
-              //   const errorMessage = t("HCM_FACILITY_USAGE_VALIDATION");
-              //   setErrorsType((prevErrors) => ({
-              //     ...prevErrors,
-              //     [type]: errorMessage,
-              //   }));
-              //   setIsError(true);
-              //   return;
-              // }

Comment on lines +711 to +720
if (type === "boundary") {
if (workbook?.SheetNames.filter(sheetName => sheetName !== t("HCM_ADMIN_CONSOLE_BOUNDARY_DATA")).length == 0) {
const errorMessage = t("HCM_INVALID_BOUNDARY_SHEET");
setErrorsType((prevErrors) => ({
...prevErrors,
[type]: errorMessage,
}));
setIsError(true);
return;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

LGTM! Consider simplifying the sheet validation.

The boundary sheet validation logic is correct, but it could be more concise.

-if (workbook?.SheetNames.filter(sheetName => sheetName !== t("HCM_ADMIN_CONSOLE_BOUNDARY_DATA")).length == 0) {
+const hasBoundarySheets = workbook?.SheetNames.some(sheetName => sheetName !== t("HCM_ADMIN_CONSOLE_BOUNDARY_DATA"));
+if (!hasBoundarySheets) {
📝 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.

Suggested change
if (type === "boundary") {
if (workbook?.SheetNames.filter(sheetName => sheetName !== t("HCM_ADMIN_CONSOLE_BOUNDARY_DATA")).length == 0) {
const errorMessage = t("HCM_INVALID_BOUNDARY_SHEET");
setErrorsType((prevErrors) => ({
...prevErrors,
[type]: errorMessage,
}));
setIsError(true);
return;
}
if (type === "boundary") {
const hasBoundarySheet = workbook?.SheetNames.some(sheetName => sheetName === t("HCM_ADMIN_CONSOLE_BOUNDARY_DATA"));
if (!hasBoundarySheet) {
const errorMessage = t("HCM_INVALID_BOUNDARY_SHEET");
setErrorsType((prevErrors) => ({
...prevErrors,
[type]: errorMessage,
}));
setIsError(true);
return;
}

{
return (
<div style={{ marginBottom: "1rem" }}>
<label>{t("CHOOSE_BOUNDARY_LEVEL")}</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Associate <label> elements with their corresponding inputs for accessibility

Ensure the <label> is associated with the dropdown by using the htmlFor attribute.

Apply this diff:

-<label>{t("CHOOSE_BOUNDARY_LEVEL")}</label>
+<label htmlFor="boundary-level-dropdown">{t("CHOOSE_BOUNDARY_LEVEL")}</label>

And update the <Dropdown> component:

<Dropdown
  id="boundary-level-dropdown"
  ...
/>
🧰 Tools
🪛 Biome (1.9.4)

[error] 52-52: 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)

t={t}
/>
<div style={{height:"1rem"}}></div>
<label>{t("CHOOSE_BOUNDARY")}</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Associate <label> elements with their corresponding inputs for accessibility

The label should be associated with the MultiSelectDropdown component.

Apply this diff:

-<label>{t("CHOOSE_BOUNDARY")}</label>
+<label htmlFor="boundary-multiselect">{t("CHOOSE_BOUNDARY")}</label>

And update the MultiSelectDropdown:

<MultiSelectDropdown
  id="boundary-multiselect"
  ...
/>
🧰 Tools
🪛 Biome (1.9.4)

[error] 67-67: 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)

return (
<div key={column.name} style={{ marginBottom: "1rem" }}>
<div style={{display:"flex"}}>
<label>{column.description}</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Associate <label> elements with their corresponding inputs for accessibility

Ensure the label is linked to the input control.

Apply this diff:

-<label>{column.description}</label>
+<label htmlFor={`input-${column.name}`}>{column.description}</label>

And update the input:

<TextInput
  id={`input-${column.name}`}
  ...
/>
🧰 Tools
🪛 Biome (1.9.4)

[error] 119-119: 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)

return (
<div key={column.name} style={{ marginBottom: "1rem" }}>
<div style={{display:"flex"}}>
<label>{column.description}</label>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Associate <label> elements with their corresponding inputs for accessibility

Link the label to the dropdown component for better accessibility.

Apply this diff:

-<label>{column.description}</label>
+<label htmlFor={`dropdown-${column.name}`}>{column.description}</label>

And update the <Dropdown> component:

<Dropdown
  id={`dropdown-${column.name}`}
  ...
/>
🧰 Tools
🪛 Biome (1.9.4)

[error] 144-144: 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)

Comment on lines +98 to +133
updatedData.forEach((newData, rowIndex) => {
const cell = targetSheet.getCell(rowIndex + 2, boundaryCodeColumnIndex);
const statusCell = targetSheet.getCell(rowIndex + 2, statusColumnIndex);

if (sheetNameToUpdate === "HCM_ADMIN_CONSOLE_USER_LIST") {
// Update user-specific fields
const userRoleCell = targetSheet.getCell(rowIndex + 2, userRoleColumnIndex);
const employmentTypeCell = targetSheet.getCell(rowIndex + 2, employmentTypeColumnIndex);
const phoneNumberCell = targetSheet.getCell(rowIndex + 2, phoneNumberColumnIndex);
const userNameCell = targetSheet.getCell(rowIndex + 2, userNameColumnIndex);

// Update boundary code and status
cell.value = newData?.[t(schemas?.find((i) => i.description === "Boundary Code (Mandatory)")?.name)];
statusCell.value = newData?.[t(schemas?.find((i) => i.description === "User Usage")?.name)];

// Update user-specific fields
userRoleCell.value = newData?.[t(schemas?.find((i) => i.description === "User Role")?.name)];
employmentTypeCell.value = newData?.[t(schemas?.find((i) => i.description === "Employement Type")?.name)];
phoneNumberCell.value = Number(newData?.[t(schemas?.find((i) => i.description === "Phone Number")?.name)] || 0);
userNameCell.value = newData?.[t(schemas?.find((i) => i.description === "User Name")?.name)];

} else if (sheetNameToUpdate === "HCM_ADMIN_CONSOLE_FACILITIES") {
// Keep existing facility update logic
const facilityTypeCell = targetSheet.getCell(rowIndex + 2, facilityTypeColumnIndex);
const facilityNameCell = targetSheet.getCell(rowIndex + 2, facilityNameColumnIndex);
const capacityCell = targetSheet.getCell(rowIndex + 2, capacityColumnIndex);
const facilityStatusCell = targetSheet.getCell(rowIndex + 2, facilityStatusColumnIndex);

cell.value = newData?.[t(schemas?.find((i) => i.description === "Boundary Code")?.name)];
statusCell.value = newData?.[t(schemas?.find((i) => i.description === "Facility usage")?.name)];
facilityTypeCell.value = newData?.[t(schemas?.find((i) => i.description === "Facility type")?.name)];
facilityNameCell.value = newData?.[t(schemas?.find((i) => i.description === "Facility Name")?.name)];
capacityCell.value = Number(newData?.[t(schemas?.find((i) => i.description === "Capacity")?.name)] || 0);
facilityStatusCell.value = newData?.[t(schemas?.find((i) => i.description === "Facility status")?.name)];
}
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Validate column indices before accessing them to prevent runtime errors

Ensure that all required column indices (like userRoleColumnIndex, employmentTypeColumnIndex, etc.) are properly initialized before accessing cells at those indices. Accessing a cell with a null index can lead to errors.

Proposed solution:

  • Add validation checks for each necessary column index:
if (sheetNameToUpdate === "HCM_ADMIN_CONSOLE_USER_LIST") {
  if (userRoleColumnIndex === null) {
    console.error('Column "User Role" not found!');
    return;
  }
  if (employmentTypeColumnIndex === null) {
    console.error('Column "Employment Type" not found!');
    return;
  }
  // Repeat for other columns...
}

This will ensure that if a column is missing, the function will handle it gracefully rather than causing a runtime error.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

♻️ Duplicate comments (1)
health/micro-ui/web/micro-ui-internals/example/public/index.html (1)

15-15: ⚠️ Potential issue

Invalid package version detected.

The specified version 0.2.38 of @egovernments/digit-ui-health-css does not exist in the npm registry. This will cause CSS loading failures.

Let's verify the current status:

#!/bin/bash
# Description: Check latest available versions of the package
echo "Available versions:"
curl -s "https://registry.npmjs.org/@egovernments/digit-ui-health-css" | jq -r '.versions | keys[]' | sort -V
📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4b87c9b and 8ec10c9.

📒 Files selected for processing (3)
  • health/micro-ui/web/micro-ui-internals/example/public/index.html (1 hunks)
  • health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (5 hunks)
  • health/micro-ui/web/public/index.html (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)

Pattern **/*.js: check

🔇 Additional comments (3)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (3)

12-12: Remove unused import.

The DataType import from ajv is not used anywhere in the code. Consider removing it to avoid unnecessary bundle size increase.

-import { DataType } from "ajv/dist/compile/validate/dataType";

739-747: Remove commented-out code.

Instead of keeping commented-out code, consider:

  1. Removing it if it's no longer needed
  2. Moving it to a separate document if it might be needed later
  3. Creating a new Git branch if it's a work in progress
-              // if (jsonData.length == 0) {
-              //   const errorMessage = t("HCM_FACILITY_USAGE_VALIDATION");
-              //   setErrorsType((prevErrors) => ({
-              //     ...prevErrors,
-              //     [type]: errorMessage,
-              //   }));
-              //   setIsError(true);
-              //   return;
-              // }

-          // if (jsonData.length == 0) {
-          //   const errorMessage = t("HCM_EMPTY_SHEET");
-          //   setErrorsType((prevErrors) => ({
-          //     ...prevErrors,
-          //     [type]: errorMessage,
-          //   }));
-          //   setIsError(true);
-          //   return;
-          // }

Also applies to: 784-792


712-721: 🧹 Nitpick (assertive)

Simplify the boundary sheet validation logic.

The current validation logic is correct but could be more readable. Consider using a more straightforward approach:

-if (workbook?.SheetNames.filter(sheetName => sheetName !== t("HCM_ADMIN_CONSOLE_BOUNDARY_DATA")).length == 0) {
+const hasOtherSheets = workbook?.SheetNames.some(sheetName => sheetName !== t("HCM_ADMIN_CONSOLE_BOUNDARY_DATA"));
+if (!hasOtherSheets) {
   const errorMessage = t("HCM_INVALID_BOUNDARY_SHEET");
   setErrorsType((prevErrors) => ({
     ...prevErrors,
     [type]: errorMessage,
   }));
   setIsError(true);
   return;
}

Likely invalid or redundant comment.

@@ -10,7 +10,7 @@
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
<!-- added below css for hcm-workbench module inclusion-->
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].37/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].38/dist/index.css" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Production CSS loading will fail due to invalid package version.

The specified version 0.2.38 of @egovernments/digit-ui-health-css does not exist in the npm registry. This is particularly critical as this is the production HTML file.

Recommendations:

  1. Use the latest published version 0.2.37
  2. Ensure both HTML files use the same version
  3. If version 0.2.38 contains necessary changes, publish it to npm first
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
📝 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.

Suggested change
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].38/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].37/dist/index.css" />

reject("HCM_FILE_UNAVAILABLE");
}
};

reader.readAsArrayBuffer(selectedFile);
});
};

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Remove unnecessary whitespace.

Remove the extra blank line to maintain consistent code formatting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant