Formula Screen

[Bhargav-egov]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a context provider for shared state management in the formula configuration components.
  • Enhanced navigation functionality with new methods for moving between steps in the microplan setup process.
  • Added pop-up notifications for confirming deletions and adding new formulas.

• Bug Fixes

  • Improved error handling and validation logic to prevent users from skipping required fields.

• Improvements

  • Enhanced user feedback mechanisms with toast notifications for actions and errors.
  • Updated rendering logic for better user experience during formula configuration and hypothesis management.
  • Expanded state management capabilities for improved user interaction within components.

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

📝 Walkthrough

Walkthrough

The pull request introduces significant enhancements to several components within the microplan module. Key changes include the addition of context providers and hooks for state management, new state variables, and refined navigation logic. The FormulaConfigWrapper and FormulaConfiguration components have been updated to utilize the new context for managing formulas, while the HypothesisWrapper and SetupMicroplan components have seen improvements in state handling and user navigation. Overall, these modifications enhance the functionality and user experience across the components involved.

Changes

File	Change Summary
.../FormulaConfigWrapper.js	Added FormulaContext for shared state management, introduced useFormulaContext hook, expanded state variables, refined useEffect hooks for side effects, updated navigation logic with handleNext, handleBack, and handleStepClick, and integrated a toast notification system.
.../FormulaConfiguration.js	Introduced new prop formulas:initialFormulas, expanded state variables for pop-up management, utilized useFormulaContext for context values, enhanced formula addition/deletion logic, and updated rendering logic to use dynamic filteredFormulas instead of static data.
.../HypothesisWrapper.js	Added AssumptionContext for state management, introduced new state variables, modified useEffect hooks for URL updates and initialization, enhanced validation in handleNext and handleStepClick, and improved error handling and conditional rendering of components.
.../createUpdatePlanProject.js	Extended createUpdatePlanProject function to handle "FORMULA_CONFIGURATION" case, modified file handling in "UPLOADBOUNDARYDATA" and "UPLOADFACILITYDATA" cases, and maintained error handling throughout the function.
.../SetupMicroplan.js	Added functions goToPreviousScreenFromFormula and moveToPreviousStep for improved navigation, updated onSecondayActionClick for nuanced control, and set up event listeners in useEffect for proper registration and cleanup.

Possibly related PRs

• Formula Screen #1599: The changes in the FormulaConfigWrapper and FormulaConfiguration components are directly related to the main PR, as they both involve enhancements to the formula management system, including the introduction of context for shared state management and new state variables for improved functionality.

Poem

🐇 In the garden of formulas, we hop and play,
With context and state, we brighten the day.
New paths to explore, as we leap and bound,
In the world of microplans, joy can be found!
So let’s toast to the changes, both big and small,
Together we flourish, together we’ll crawl! 🌼

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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 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.

[coderabbitai]

Actionable comments posted: 26

🧹 Outside diff range comments (5)

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SetupMicroplan.js (1)

Line range hint 215-232: LGTM: Event listeners for navigation.

The implementation of event listeners for navigation is clean and follows React best practices. The cleanup functions ensure that the listeners are properly removed when the component unmounts.

Consider combining these two useEffect hooks into a single hook for better organization:

useEffect(() => {
  const handlers = {
    moveToPrevious: moveToPreviousStep,
    revertToPreviousScreenFromFormula: goToPreviousScreenFromFormula
  };

  Object.entries(handlers).forEach(([event, handler]) => {
    window.addEventListener(event, handler);
  });

  return () => {
    Object.entries(handlers).forEach(([event, handler]) => {
      window.removeEventListener(event, handler);
    });
  };
}, []);

This approach reduces code duplication and makes it easier to add or remove event listeners in the future.

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HypothesisWrapper.js (4)

Line range hint 98-101: Uncomment and correct the error handling in the onError handler of handleNext function.

The setShowToast line in the onError handler is commented out, which prevents user feedback when an error occurs during the API call. Additionally, there is a syntax issue with extra parentheses in the setShowToast call.

Apply this diff to fix the error handling:

 onError: (error, variables) => {
     console.error(error)
     
-    //   setShowToast(({ key: "error", label: error?.message ? error.message : t("FAILED_TO_UPDATE_RESOURCE") }))
+    setShowToast({ key: "error", label: error?.message ? error.message : t("FAILED_TO_UPDATE_RESOURCE") })
 },

---

Line range hint 52-55: Verify the logic in the isLastStep function.

The isLastStep function is always setting isLastVerticalStep to false, which might not align with the expected behavior suggested by the function name. Ensure that isLastVerticalStep is set correctly based on whether the current step is the last step.

Consider updating the function to set isLastVerticalStep based on the current step:

 const isLastStep = () => {
-    Digit.Utils.microplanv1.updateUrlParams({ isLastVerticalStep:false }); 
+    const isLast = internalKey === assumptionCategories.length;
+    Digit.Utils.microplanv1.updateUrlParams({ isLastVerticalStep: isLast });
     Digit.Utils.microplanv1.updateUrlParams({ internalKey: internalKey }); 
 };  

---

Line range hint 175-180: Correct the typo in the Toast component property name.

The property isDleteBtn appears to have a typographical error. It should be isDeleteBtn.

Apply this diff to fix the typo:

                         onClose={() => {
                             setShowToast(false);
                         }}
-                        isDleteBtn={true}
+                        isDeleteBtn={true}
                     />

---

Line range hint 125-129: Add dependency array to useEffect to prevent excessive re-renders.

The useEffect hook that increments executionCount lacks a dependency array, causing it to run on every render. This may lead to performance issues.

Include an appropriate dependency array:

 useEffect(() => {
     if (executionCount < 5) {
         onSelect(customProps.name, { assumptionValues })
         setExecutionCount((prevCount) => prevCount + 1);
     }
- });
+ }, [executionCount, assumptionValues]);

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE

📥 Commits

Files that changed from the base of the PR and between 4594453 and c5fb459.

📒 Files selected for processing (5)

• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js (4 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HypothesisWrapper.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/hooks/services/createUpdatePlanProject.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SetupMicroplan.js (2 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HypothesisWrapper.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/hooks/services/createUpdatePlanProject.js (1)

Pattern **/*.js: check

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SetupMicroplan.js (1)

Pattern **/*.js: check

🪛 Biome

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigWrapper.js

[error] 42-42: 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] 25-25: Use Number.parseInt instead of the equivalent global.

ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.

(lint/style/useNumberNamespace)

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js

[error] 131-131: 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] 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] 209-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] 228-263: 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] 265-314: 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] 209-209: 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] 233-233: Avoid passing children using a prop

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

(lint/correctness/noChildrenProp)

---

[error] 234-234: 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] 242-250: 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] 251-257: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 270-270: Avoid passing children using a prop

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

(lint/correctness/noChildrenProp)

---

[error] 271-285: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

---

[error] 291-299: 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] 300-308: 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 (4)

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SetupMicroplan.js (2)

208-213: LGTM: New function for navigation.

The moveToPreviousStep function is a clean implementation for navigating to the previous step. It correctly updates both the currentStep and currentKey state variables.

---

Line range hint 1-424: Overall assessment: Good improvements with minor suggestions.

The changes to the SetupMicroplan component enhance its navigation capabilities, particularly in handling step transitions and formula-related navigation. The implementation is generally sound, following React best practices. Consider the suggestions for merging duplicate functions, combining useEffect hooks, and fixing the typo in the function name to further improve code quality and maintainability.

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfiguration.js (1)

271-285: ⚠️ Potential issue

Add a key prop to the Dropdown element in children array

In the children array of the second PopUp, the Dropdown element is missing a key prop.

Apply this diff to add the key prop:

 children={[
+  <Dropdown
+    key="addFormulaDropdown"
     variant="select-dropdown"
     t={t}
     // other props
   />,
 ]}

Likely invalid or redundant comment.

🧰 Tools

🪛 Biome

[error] 271-285: 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/FormulaConfigWrapper.js (1)

43-43: ⚠️ Potential issue

Simplify boolean expression by directly using !!microplanId.

The ternary operator microplanId ? true : false is unnecessary. You can simplify the expression by casting microplanId to a boolean.

Apply this diff to simplify the code:

-enabled: microplanId ? true : false,
+enabled: !!microplanId,

Likely invalid or redundant comment.

[nipunarora-eGov]

Resolved critical issues

Dismissing because this task needs to be reassigned and revisited. Will update