mandatory label fixes, rendering fixes, #2387
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📝 Walkthrough## Walkthrough
This set of changes focuses on UI enhancements and code refactoring within the campaign manager module of a micro-UI application. The `AppPreview` component now displays additional UI elements such as informational alerts and tooltips for fields with `infoText` or `helpText` properties. Several components, including `SetupCampaign`, `UpdateCampaign`, and `App`, have been refactored to apply `React.memo` at the export level instead of at declaration. Conditional rendering logic for buttons in the `Response` page has been improved, and loading states are now handled in the `ImpelComponentWrapper`. Property naming in app configuration restructuring functions has been updated, and minor formatting and import adjustments are present throughout.
## Changes
| File(s) | Change Summary |
|-------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `src/components/AppPreview.js` | Enhanced field rendering: displays `AlertCard` for `infoText`, tooltips for `helpText`, conditionally shows mandatory asterisk, and updates imports for new UI elements. |
| `src/components/CampaignCard.js` | Commented out a specific link object in the `links` array, making it inactive. No logic or rendering changes elsewhere. |
| `src/pages/employee/Response.js` | Reformatted imports and logic; removed commented-out code; improved conditional rendering for secondary action button in the `Footer` component. |
| `src/pages/employee/SetupCampaign.js`, `src/pages/employee/UpdateCampaign.js`, `src/pages/employee/index.js` | Refactored to declare components as plain functions and apply `React.memo` at export. Adjusted formatting and spacing throughout. No logic changes. |
| `src/pages/employee/appConfigurationRedesign/AppConfigurationParentLayer.js` | Changed property mapping from `required` to `Mandatory` in restructuring functions; removed a commented-out dispatch call. |
| `src/pages/employee/appConfigurationRedesign/AppFieldComposer.js` | Changed import to use `AlertCard` aliased as `InfoCard`; added `e.stopPropagation()` in click handlers to prevent event bubbling. No logic changes. |
| `src/pages/employee/appConfigurationRedesign/ImpelComponentWrapper.js` | Added loading state handling: displays `Loader` component while MDMS data is loading. |
| `src/pages/employee/appConfigurationRedesign/AppConfigurationWrapper.js` | Modified reducer "DELETE_FIELD" case to filter fields by `jsonPath` instead of `id`. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant AppPreview
participant AlertCard
participant TooltipWrapper
User->>AppPreview: Render preview of a card
AppPreview->>AppPreview: For each active field
AppPreview-->>AlertCard: If field.infoText exists, render AlertCard above field
AppPreview-->>TooltipWrapper: If field.helpText exists, render label with TooltipWrapper and InfoOutline
AppPreview->>AppPreview: Render field label (with asterisk if required/Mandatory)
AppPreview->>AppPreview: Render field UIPossibly related PRs
Suggested reviewers
Poem
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (9)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Response.js(3 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js(4 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateCampaign.js(14 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppConfigurationParentLayer.js(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppFieldComposer.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/ImpelComponentWrapper.js(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js(3 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/appConfigurationRedesign/AppFieldComposer.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/ImpelComponentWrapper.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppConfigurationParentLayer.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/components/CampaignCard.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Response.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/SetupCampaign.jshealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateCampaign.js
🧬 Code Graph Analysis (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/ImpelComponentWrapper.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationScreenParent/ImpelComponentWrapper.js (1)
isLoadingAppConfigMdmsData(8-20)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (1)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/NewCampaignCreate/AppFeatures.js (1)
AppFeatures(6-87)
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Response.js
[error] 65-71: 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
[error] 303-303: 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/UpdateCampaign.js
[error] 110-110: 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] 711-711: 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)
⏰ Context from checks skipped due to timeout of 10000ms (2)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (actions)
🔇 Additional comments (19)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js (3)
29-29: Component declaration style refactoredThe component declaration has been changed from using React.memo() at declaration to a regular functional component declaration. This is part of a pattern change to consistently apply memoization at export rather than declaration.
546-908: Enhanced submission handling with improved routingThe
onSubmitfunction now includes additional conditional handling for whenisSubmitis true. The new code properly setsshouldUpdateand adds navigation logic to redirect to view details page when certain key values are met.
1106-1108: Memoization moved to export statementThe memoization using React.memo has been moved from the component declaration to the export statement. This is a more standard pattern that helps with code readability while maintaining the performance benefits of memoization.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignCard.js (1)
71-76: Disabled App Configuration 3.0 navigation optionThe link to the App Configuration 3.0 page has been commented out, removing this navigation option from the campaign manager dashboard. This may be related to feature deprecation or work-in-progress functionality.
Make sure this change is intended and communicated to users who might be looking for this functionality.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppFieldComposer.js (1)
1-10: Replaced InfoCard with AlertCardThe component import has been changed to use
AlertCardfrom the component library but aliased asInfoCard. This suggests a UI enhancement where information cards are now being rendered as alert cards for better visibility or styling.While this change preserves the existing function calls throughout the code, consider updating the variable name for clarity in future refactorings to avoid confusion between component names and their actual imported identities.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/ImpelComponentWrapper.js (2)
4-4: Added Loader component importThe Loader component has been imported from the digit-ui-components package, enhancing the UI by providing a loading indicator for asynchronous operations.
24-24: Added loading state handlingA loading state check has been added to display a loader while MDMS data is being fetched. This improves user experience by providing visual feedback during data loading and prevents rendering issues when data isn't available yet.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/appConfigurationRedesign/AppConfigurationParentLayer.js (2)
76-76: Property naming standardizationThe property name has been changed from
requiredtoMandatoryin the restructure function, which aligns with the UI display standards used in related components.
141-141: Consistent property name changeThis change correctly updates the reverseRestructure function to derive the
requiredproperty fromMandatory, maintaining consistency with the change made in the restructure function.health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/index.js (2)
119-135: Improved memoization patternThe component has been refactored to apply React.memo at the export level instead of at declaration, which is a cleaner pattern that separates component logic from optimization concerns.
Also applies to: 204-206
199-199: Formatting improvementAdded space inside JSX component tag for better readability.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js (1)
1-4: Added imports for enhanced UI componentsNew imports for Fragment, AlertCard, TooltipWrapper, and InfoOutline enable the rendering of information alerts and tooltips in the UI.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Response.js (1)
1-4: Code formatting improvementsImport statements and function indentation have been standardized for better readability and consistency.
Also applies to: 17-28
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateCampaign.js (6)
21-21: AppliedReact.memoat export for consistency.The component is now declared as a plain function and memoized at export, aligning with other components in this module. This improves readability and consistency.
29-29: Double-checkUpdateBoundaryConfiginitial invocation.The initial
useStatecall usesUpdateBoundaryConfig(totalFormData, null, isSubmitting), while elsewhere (see line 219) it is invoked with a single object argument. Verify that theUpdateBoundaryConfigsignature supports both invocation styles and that no parameters are mismatched.
828-833: Approve loader usage for loading states.The component now returns a full-page
<Loader />when in preview or draft mode before data is fetched, improving UX during asynchronous operations.
839-839: VerifycustomStepsalignment with configuration.Ensure that the array of translation keys passed to
customStepsmatches the order and count of steps inUpdateBoundaryConfig. A mismatch can desynchronize the stepper UI from actual form steps.
859-859: Explicitly setnoCardStyleprop.The prop is correctly set to
true, making theFormComposerV2render without its default card style. This is a clear improvement over previous implicit usage.
875-875: Consistent memoization at export.By exporting the component as
React.memo(UpdateCampaign), re-renders are avoided for unchanged props, optimizing performance.
...cro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/AppPreview.js
Show resolved
Hide resolved
...o-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/Response.js
Show resolved
Hide resolved
...eb/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateCampaign.js
Show resolved
Hide resolved
...eb/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateCampaign.js
Show resolved
Hide resolved
...eb/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateCampaign.js
Show resolved
Hide resolved
jagankumar-egov
requested changes
Apr 29, 2025
| {t(field.label)} | ||
| {field.required && " *"} | ||
| <> | ||
| {field?.infoText && ( |
There was a problem hiding this comment.
what is info text ?
we have only innerLabel which acts as placeholder
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Bug Fixes
Refactor
Style