-
Notifications
You must be signed in to change notification settings - Fork 21
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
BUGFIX/HCMPRE- :made ui/ux changes for campaign name #2066
Conversation
📝 Walkthrough📝 WalkthroughWalkthroughThis pull request encompasses multiple changes across the health micro UI project, primarily focusing on updating stylesheet links, refining CSS styles, and making minor modifications to various React components. The changes span multiple files within the campaign manager module, involving updates to HTML files, SCSS stylesheets, and React components. The modifications are predominantly cosmetic and structural, with a consistent theme of enhancing visual representation and streamlining component logic. Changes
Possibly related PRs
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 11
🔭 Outside diff range comments (27)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)
Line range hint
7-377
: Consider architectural improvements for better maintainabilityThe component could benefit from the following improvements:
- Move the complex data transformation functions (
mergeObjects
,loopAndReturn
,reverseDeliveryRemap
) to a separate utility file to improve maintainability and testability- Consider splitting the component into smaller, more focused components to follow the Single Responsibility Principle
- Implement a more robust error boundary for better error handling
Would you like me to help create a detailed refactoring plan that includes:
- A new utility file structure for the data transformation functions
- A component breakdown strategy
- Implementation of an error boundary?
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (3)
Line range hint
169-182
: Fix PopUp component children prop usageThe PopUp component has an empty children array but renders MobileChecklist outside of it. This is inconsistent and could lead to confusion.
Apply this fix:
<PopUp className={"custom-pop-up"} type={"default"} heading={t("CHECKLIST_PREVIEW")} - children={[ - - ]} onOverlayClick={() => { setShowPopUp(false); }} onClose={() => { setShowPopUp(false); }}
Line range hint
35-54
: Add cleanup functions to useEffect hooksThe useEffect hooks should include cleanup functions to prevent memory leaks, especially for data fetching operations.
Consider updating the useEffect:
useEffect(() => { + let isSubscribed = true; if (data) { data.forEach((question) => { if (question.type.code === "String") { question.type.code = "Short Answer"; } }); - setViewData(data); + if (isSubscribed) { + setViewData(data); + } } + return () => { + isSubscribed = false; + }; }, [data])
Line range hint
1-230
: Consider breaking down the component for better maintainabilityThe ViewChecklist component is handling multiple responsibilities including:
- Data fetching and transformation
- Question organization
- Preview functionality
- Form rendering
Consider extracting these into separate components or custom hooks for better maintainability and reusability.
Suggested structure:
- Create a custom hook for data fetching and transformation
- Extract QuestionOrganizer into a separate utility
- Move PreviewPopup into its own component
- Create a separate FormSection component
Would you like me to help generate the refactored component structure?
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (2)
Line range hint
30-154
: Consider refactoring hooks for better maintainabilityThe component logic could benefit from some refactoring:
- Consider consolidating the URL parameter management into a custom hook (e.g.,
useUrlParams
)- Toast management logic could be extracted into a reusable hook (e.g.,
useToast
)- The multiple
useEffect
hooks could potentially be consolidatedExample implementation of
useToast
:const useToast = (duration = 5000) => { const [toast, setToast] = useState(null); useEffect(() => { if (toast) { const timer = setTimeout(() => setToast(null), duration); return () => clearTimeout(timer); } }, [toast, duration]); return [toast, setToast]; };
Line range hint
156-176
: Consider improving component structure and CSS organizationThe component structure could benefit from some improvements:
- The nested div structure with multiple className assignments suggests potential CSS maintainability issues
- Loading state handling could be consolidated into a single pattern
- Consider using CSS modules or styled-components for better CSS organization
Consider extracting the card container structure into a separate component:
const SummaryCardContainer = ({ children, className }) => ( <div className={`card-container ${className || ''}`}> {children} </div> );health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1)
Line range hint
1-190
: Consider architectural improvements for better maintainabilityThe component handles multiple responsibilities that could be better organized:
- URL parameter management could be extracted into a custom hook:
const useUrlParams = () => { const history = useHistory(); const updateParams = (params) => { const url = new URL(window.location.href); Object.entries(params).forEach(([key, value]) => { url.searchParams.set(key, value); }); window.history.replaceState({}, "", url); }; return { updateParams }; };
- Toast management could be extracted into a reusable hook:
const useToast = (duration = 5000) => { const [toast, setToast] = useState(null); useEffect(() => { if (toast) { const timer = setTimeout(() => setToast(null), duration); return () => clearTimeout(timer); } }, [toast, duration]); return [toast, setToast]; };
- Step management could be simplified by using an enum or constants for step values.
These changes would improve code organization and reusability across the application.
Would you like me to provide more detailed implementations for any of these suggestions?
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (3)
Line range hint
76-80
: Critical: Fix infinite loop in useEffectThis useEffect hook has no dependency array and runs on every render, potentially causing an infinite loop and performance issues. Additionally, it's limited to 5 executions which is a code smell.
Suggested fix:
- useEffect(() => { - if (executionCount < 5) { - onSelect("campaignDates", { startDate: startDate, endDate: endDate }); - setExecutionCount((prevCount) => prevCount + 1); - } - }); + useEffect(() => { + onSelect("campaignDates", { startDate: startDate, endDate: endDate }); + }, [startDate, endDate]);
Line range hint
41-47
: Refactor: Optimize state updates from propsThe useEffect hook directly sets state based on props without proper dependency array, which could cause unnecessary re-renders.
Suggested improvement:
useEffect(() => { setDates({ startDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate, endDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate, }); setStartDate(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate); setEndDate(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate); -}, [props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates]); +}, [props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate, + props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate]);
Line range hint
49-59
: Refactor: Consolidate date validation logicThe component has multiple useEffect hooks handling validation with overlapping responsibilities. This could lead to confusing behavior and makes the code harder to maintain.
Consider consolidating the validation logic into a single useEffect:
+ const validateDates = () => { + if (props?.props?.isSubmitting) { + if (!startDate && !endDate) { + return { startDate: "CAMPAIGN_FIELD_MANDATORY", endDate: "CAMPAIGN_FIELD_MANDATORY" }; + } + if (!startDate) { + return { startDate: "CAMPAIGN_FIELD_MANDATORY" }; + } + if (!endDate) { + return { endDate: "CAMPAIGN_FIELD_MANDATORY" }; + } + } + + if (startValidation) { + if (!startDate) { + return { startDate: "CAMPAIGN_START_DATE_ERROR" }; + } + if (!endDate) { + return { endDate: "CAMPAIGN_END_DATE_ERROR" }; + } + if (new Date(endDate).getTime() < new Date(startDate).getTime()) { + return { endDate: "CAMPAIGN_END_DATE_BEFORE_ERROR" }; + } + if (new Date(endDate).getTime() === new Date(startDate).getTime()) { + return { endDate: "CAMPAIGN_END_DATE_SAME_ERROR" }; + } + } + + return null; + }; + + useEffect(() => { + const validationError = validateDates(); + setError(validationError); + + if (!validationError && (startDate || endDate)) { + onSelect("campaignDates", { startDate, endDate }); + } + }, [startDate, endDate, props?.props?.isSubmitting, startValidation]);Also applies to: 60-73
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (1)
Line range hint
200-200
: Consider enhancing campaign tag styles for better accessibilityThe simplified
.campaign-tag
styling might benefit from additional improvements:Consider adding these properties for better visual hierarchy and accessibility:
.campaign-tag { margin-bottom: 1rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; + min-height: 2rem; }health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (3)
Line range hint
48-82
: Add type checking and defensive programming to boundaryDataGrp functionThe function has been enhanced to support hierarchy-based ordering, but could benefit from additional safeguards:
function boundaryDataGrp(boundaryData, hierarchyDefinition) { - if (!hierarchyDefinition) return []; + if (!boundaryData?.length) return []; + if (!hierarchyDefinition?.BoundaryHierarchy?.[0]?.boundaryHierarchy?.length) { + // Fallback to original grouping if hierarchy is not properly defined + return Object.entries( + boundaryData.reduce((acc, item) => { + acc[item.type] = [...(acc[item.type] || []), item]; + return acc; + }, {}) + ).map(([type, boundaries]) => ({ type, boundaries })); + } const groupedData = {};
Line range hint
363-371
: Remove duplicate resources propThe CampaignResourceDocuments component has duplicate resources props:
props: { isUserGenerate: true, - resources: processid, resources: resourceIdArr, },
Line range hint
419-424
: Fix potential memory leak in useEffectThe setTimeout cleanup should be handled properly:
useEffect(() => { if (showToast) { - setTimeout(closeToast, 5000); + const timer = setTimeout(closeToast, 5000); + return () => clearTimeout(timer); } }, [showToast]);health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (3)
Line range hint
25-27
: Fix infinite loop in useEffect hook.The current useEffect implementation creates an infinite loop because:
- It updates
campaignName
state whencampaignName
changes- This state update triggers a re-render
- The re-render causes the effect to run again, creating an infinite cycle
-useEffect(() => { - setCampaignName(campaignName); -}, campaignName);If you need to sync the URL param with state, consider:
useEffect(() => { const name = searchParams.get("name"); if (name !== campaignName) { setCampaignName(name); } }, [searchParams]); // Only react to URL changes
Line range hint
91-95
: Document the reason for disabling step navigation.The function now prevents navigation and shows an error, but:
- The commented-out navigation code should be removed for maintainability
- Consider adding a comment explaining why campaign steps can't be clicked
-const onStepClick = (step) => { - setShowToast({ key: "error", label: "CAMPAIGN_CANNOT_CLICK" }); - return; - // history.push(`/${window.contextPath}/employee/campaign/setup-campaign?id=${id}&preview=true&action=false&actionBar=true&key=13&summary=true`); -}; +// Steps are disabled in search view to prevent navigation during checklist configuration +const onStepClick = () => { + setShowToast({ key: "error", label: "CAMPAIGN_CANNOT_CLICK" }); +};
Line range hint
1-248
: Consider component refactoring for maintainability.The component would benefit from the following architectural improvements:
- Extract the popup form into a separate component
- Remove large blocks of commented code (e.g., Stepper, Card sections)
- Consider splitting the search functionality into a separate container component
This would:
- Improve code maintainability
- Make the component's responsibilities clearer
- Make testing easier
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (3)
Line range hint
391-424
: Consider enhancing error handling in onSubmit functionThe current error handling only shows a generic toast message. Consider:
- Adding specific error messages based on the error type
- Logging detailed errors for debugging
- Implementing retry logic for network failures
try { const data = await mutateAsync(payload); // ... existing success handling } catch (error) { - setShowToast({ label: "CHECKLIST_UPDATE_FAILED", isError: "true" }); + const errorMessage = error.response?.data?.message || "CHECKLIST_UPDATE_FAILED"; + console.error("Checklist update failed:", error); + setShowToast({ + label: errorMessage, + isError: "true" + }); }
Line range hint
1-586
: Consider refactoring for better maintainabilityThe component is quite large and handles multiple responsibilities. Consider:
- Extract question transformation logic into a separate utility file
- Create custom hooks for data fetching and state management
- Split the preview functionality into a separate component
Example structure:
// hooks/useChecklistData.js export const useChecklistData = (tenantId, serviceCode) => { // Move data fetching logic here }; // utils/questionTransformer.js export const transformQuestions = (questions, tenantId, idCodeMap) => { // Move question transformation logic here }; // components/ChecklistPreview.js export const ChecklistPreview = ({ previewData, onClose }) => { // Move preview popup logic here };
Consider using uuid package instead of crypto.randomUUID()
The codebase already has the
uuid
package as a dependency (version ^9.0.1). Instead of usingcrypto.randomUUID()
which has limited browser support, useuuid.v4()
from the uuid package which is more widely supported and serves the same purpose.Locations that need to be updated:
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreateQuestion.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CreateQuestionContext.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
🔗 Analysis chain
Line range hint
108-108
: Ensure browser compatibility for crypto.randomUUID()The usage of
crypto.randomUUID()
might not be supported in older browsers. Consider adding a fallback mechanism.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for crypto.randomUUID() usage across the codebase rg -l "crypto\.randomUUID\(\)" # Check for existing polyfills rg -l "polyfill.*crypto"Length of output: 500
Script:
#!/bin/bash # Check for any crypto polyfill or UUID generation utility implementations rg -l "uuid|UUID|generateUUID|getUUID" # Check the content of package.json for UUID-related dependencies fd "package.json" --exec cat {} \; | grep -i "uuid" # Look at the actual usage context of crypto.randomUUID rg "crypto\.randomUUID" -A 2 -B 2Length of output: 18783
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js (2)
Line range hint
183-306
: Consider refactoring for better maintainability.The
reverseDeliveryRemap
function has become quite complex. Consider:
- Breaking down the condition parsing logic into separate functions
- Adding error handling for malformed conditions
- Adding JSDoc documentation for the complex logic
Example refactor:
+ /** + * Parses a preview condition string into attribute objects + * @param {string} condition - The condition string to parse + * @returns {Array<Object>} Array of parsed attributes + */ + function parsePreviewCondition(condition) { + const attributes = []; + const inBetweenMatch = condition.match(/(\d+)(<=|<|>=|>)(\w+)and(\w+)(<=|<|>=|>)(\d+)/); + if (inBetweenMatch) { + return parseInBetweenCondition(inBetweenMatch); + } + return parseRegularCondition(condition); + } function reverseDeliveryRemap(data, t) { if (!data) return null; // ... existing setup code ... const parseConditionAndCreateRules = (condition, ruleKey, products) => { let attributes = []; if (isPreview) { - // Handle preview condition... - const inBetweenMatch = condition.match... + attributes = parsePreviewCondition(condition); } else { // ... rest of the code } return [{ ruleKey: ruleKey + 1, delivery: {}, products, attributes, }]; }; // ... rest of the code }
Line range hint
799-806
: Avoid direct object mutation in React.Direct mutation of the
updatedObject
inside useEffect could lead to unexpected behavior. Consider using proper state management.Consider this approach:
-const updatedObject = { ...data }; +const [updatedData, setUpdatedData] = useState(data); useEffect(() => { - updatedObject.data.startDate = startDate; - updatedObject.data.endDate = endDate; - updatedObject.cards[0].sections[0].values[2].value = Digit.Utils.date.convertEpochToDate(startDate); - updatedObject.cards[0].sections[0].values[3].value = Digit.Utils.date.convertEpochToDate(endDate); + setUpdatedData(prevData => ({ + ...prevData, + data: { + ...prevData.data, + startDate, + endDate + }, + cards: prevData.cards.map((card, index) => + index === 0 ? { + ...card, + sections: card.sections.map(section => ({ + ...section, + values: section.values.map((value, i) => ({ + ...value, + value: i === 2 ? Digit.Utils.date.convertEpochToDate(startDate) : + i === 3 ? Digit.Utils.date.convertEpochToDate(endDate) : + value.value + })) + })) + } : card + ) + })); }, [startDate, endDate]);health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js (1)
Line range hint
53-54
: Improve style organization in JSXThe inline styles could be moved to the corresponding SCSS file for better maintainability.
Consider moving the inline styles to SCSS:
-<div className="digit-tag-container" style={{ display: "flex", maxWidth: "100%" , margin: "0rem" }}> +<div className="digit-tag-container">And add to your SCSS file:
.digit-tag-container { display: flex; max-width: 100%; margin: 0; }health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (2)
Line range hint
39-56
: Refactor validation logic for better maintainability.The validation logic has multiple nested conditions and repetitive checks. Consider extracting these into separate helper functions.
+ const isValidMRDNProject = (data, cycles) => { + return data?.startDate && + data?.endDate && + cycles?.every(cycle => cycle?.startDate && cycle?.endDate); + }; + + const isValidNonMRDNProject = (data) => { + return data?.startDate && data?.endDate; + }; + const checkValid = (data) => { - if (DateWithBoundary) { - const temp = data?.dateWithBoundary; - const allCycleDateValid = temp?.projectType === "MR-DN" - ? temp.map((i) => i?.additionalDetails?.projectType?.cycles.every((j) => j?.startDate && j?.endDate)).every((k) => k === true) - : true; - const allDateValid = temp.every((i) => i?.startDate && i?.endDate); - - if (temp?.projectType === "MR-DN" && allCycleDateValid && allDateValid) { - return true; - } - else if (temp?.projectType !== "MR-DN" && allDateValid) { - return true; - } - return false; - } else if (!DateWithBoundary) { - const cycleDateValid = data?.dateAndCycle?.additionalDetails?.projectType?.cycles?.every((item) => item?.startDate && item?.endDate); - if (data?.dateAndCycle?.projectType === "MR-DN" && data?.dateAndCycle?.startDate && data?.dateAndCycle?.endDate && cycleDateValid) { - return true; - } - else if (data?.dateAndCycle?.projectType !== "MR-DN" && data?.dateAndCycle?.startDate && data?.dateAndCycle?.endDate) { - return true; - } - return false; - } + const PROJECT_TYPE = { + MR_DN: "MR-DN" + }; + + if (!data) return false; + + const formData = DateWithBoundary ? data?.dateWithBoundary : data?.dateAndCycle; + const projectType = DateWithBoundary ? formData?.projectType : formData?.projectType; + const cycles = DateWithBoundary + ? formData?.additionalDetails?.projectType?.cycles + : formData?.additionalDetails?.projectType?.cycles; + + return projectType === PROJECT_TYPE.MR_DN + ? isValidMRDNProject(formData, cycles) + : isValidNonMRDNProject(formData); };
Line range hint
91-106
: Remove or update commented code in onConfirm.The commented code for endDate adjustment suggests incomplete changes. Either implement the functionality or remove the comments to maintain clean code.
- // updating the endDate by +1 sec and -1 sec so that backend logic for ancestor update work - const payload = formData?.dateWithBoundary?.map((item) => { - let itemEndDate = item?.endDate; - let endDate = new Date(item?.endDate); - let endSecond = endDate?.getSeconds(); - // if (endSecond < 59) { - // return { - // ...item, - // endDate: itemEndDate + 1000, - // }; - // } else { - // return { - // ...item, - // endDate: itemEndDate - 1000, - // }; - // } - });health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (2)
Line range hint
7-157
: Clean up commented code.There are large blocks of commented-out functions (
restructureData
andbbb
) that should be removed if they are no longer needed. If these functions might be needed in the future, consider moving them to a separate utility file.
Line range hint
282-299
: Fix indentation for better readability.The indentation in this section is inconsistent. Consider using a consistent indentation level (2 or 4 spaces) throughout the file.
Example fix for the Tag component section:
- <Tag icon="" label={campaignName} labelStyle={{}} showIcon={false} className={"campaign-tag"} type={"monochrome"} stroke={true}/> - <Header> - {t( - `CAMPAIGN_PROJECT_${ - tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code - ? tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code?.toUpperCase() - : tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.toUpperCase() - }` - )} - </Header> + <Tag + icon="" + label={campaignName} + labelStyle={{}} + showIcon={false} + className={"campaign-tag"} + type={"monochrome"} + stroke={true} + /> + <Header> + {t( + `CAMPAIGN_PROJECT_${ + tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code + ? tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.code?.toUpperCase() + : tempSession?.HCM_CAMPAIGN_TYPE?.projectType?.toUpperCase() + }` + )} + </Header>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ 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 (22)
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/css/src/pages/employee/index.scss
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js
(1 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/MultiTabcontext.js
(1 hunks)health/micro-ui/web/public/index.html
(1 hunks)
🧰 Additional context used
📓 Path-based instructions (18)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.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/pages/employee/CreateChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js (1)
Pattern **/*.js
: check
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js
[error] 405-408: 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)
🔇 Additional comments (22)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)
1135-1135
: Use of the Tag component with new styling attributes looks consistent
The Tag component is appropriately updated with type={"monochrome"} and stroke={true}, aligning with the styling changes described in the summary. This ensures a uniform look-and-feel across the application’s tag-based UI elements.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)
355-355
: LGTM! UI enhancement for campaign name tag
The addition of type="monochrome"
and stroke={true}
props to the Tag component aligns with the UI/UX improvements across the campaign manager module.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
143-143
: LGTM: Tag styling update aligns with module-wide changes
The Tag component update maintains functionality while improving visual consistency across the campaign manager module.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1)
155-155
: LGTM: Tag component update aligns with UI/UX improvements
The addition of type="monochrome"
and stroke={true}
to the Tag component is consistent with the UI/UX improvements being made across the campaign manager module.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (2)
516-516
: LGTM! Robust implementation of form submission and data handling
The implementation shows good practices:
- Proper error handling with user feedback
- Loading states management
- Comprehensive data transformation
- Localization support
Also applies to: 517-517, 518-597
Line range hint 598-626
: LGTM! Well-structured UI implementation
The UI implementation demonstrates good practices:
- Clear user feedback mechanisms
- Proper loading state handling
- Preview functionality
- Consistent styling
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1)
218-218
: LGTM! UI enhancement for campaign name tag
The addition of type="monochrome"
and stroke={true}
props to the Tag component aligns with the PR objective of improving the campaign name's UI/UX.
Let's verify the Tag component accepts these props:
✅ Verification successful
LGTM! UI enhancement for campaign name tag is consistent across the codebase
The verification shows that the type="monochrome"
and stroke={true}
props are consistently used across multiple files in the campaign-manager module, specifically for styling campaign name tags. The same pattern appears in 16 different files, indicating this is an established UI pattern in the application.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Tag component props in the codebase
# Search for Tag component definition and usage patterns
# Look for Tag component definition
ast-grep --pattern 'export $_ function Tag({ type, stroke, $$$}) {
$$$
}'
# Look for other usages of Tag with monochrome type
rg 'Tag.*type="monochrome".*stroke={true}'
Length of output: 274
Script:
#!/bin/bash
# Search for Tag component definition with a more flexible pattern
ast-grep --pattern 'export $_ function Tag($_) {
$$$
}'
# Look for Tag component props interface or type definition
ast-grep --pattern 'interface TagProps {
$$$
}'
# Look for other usages of Tag with monochrome type (fixed regex)
rg 'Tag.*type="monochrome"'
# Look for Tag component imports to trace its source
rg '@egovernments.*Tag'
Length of output: 167
Script:
#!/bin/bash
# Look for Tag component in node_modules or any local components directory
fd -t f "Tag.js|Tag.jsx|Tag.tsx"
# Look for any file importing Tag component
rg -l "import.*Tag"
# Look for any usage of Tag component with type prop
rg "<Tag.*type="
Length of output: 7563
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (1)
134-134
: LGTM! UI enhancement for campaign name tag
The addition of type="monochrome"
and stroke={true}
properties to the Tag component improves visual consistency across the campaign management interface.
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss (1)
138-140
: Verify the stepper card height reduction impact
The height reduction from 39rem to 37rem might affect content visibility. Please ensure that all content fits properly within the reduced height and there's no content overflow.
Run the following script to check for potential overflow issues:
✅ Verification successful
Height reduction appears safe for stepper card content
The height reduction from 39rem to 37rem appears to be safe because:
- The stepper card is used across multiple campaign management components (CampaignName, CampaignType, UploadData, etc.) with vertical steppers that typically show 2-4 steps
- No overflow or scroll styles are defined in the campaign.scss file, indicating the content is designed to fit within the container
- The padding-top: 0rem adjustment helps optimize the vertical space
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Search for stepper content that might be affected by height reduction
# Look for stepper content structure
ast-grep --pattern 'className="stepper-card"'
# Search for potential scroll/overflow handling
rg -l 'overflow|scroll' --type js --type jsx
Length of output: 122
Script:
#!/bin/bash
# Search for stepper-card class usage in all files
rg -l "stepper-card" --type-add 'jsx:*.{jsx,js}' --type jsx
# Search for overflow/scroll styles in SCSS files
rg -l "overflow|scroll" --type css
# Look for the stepper component implementation
rg -A 5 "stepper-card" --type-add 'jsx:*.{jsx,js}' --type jsx
Length of output: 20107
Script:
#!/bin/bash
# Search for stepper-card class styles and its content
rg -A 10 "stepper-card" health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss
# Look for any overflow or scroll styles in the campaign.scss file
rg "overflow|scroll" health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss
Length of output: 437
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
Line range hint 143-175
: Remove commented code and verify error handling
The commented out useEffect block contains error handling logic. If this functionality is no longer needed, the code should be removed rather than commented out. If it is still needed, we should understand why it was commented out and ensure error handling is properly implemented elsewhere.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
465-465
: LGTM: Tag component styling enhancement
The updated Tag properties improve visual consistency and align with the UI/UX objectives.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js (2)
Line range hint 91-116
: LGTM! Good improvement in API call handling.
The addition of the config
object with conditional enabling based on projectId
prevents unnecessary API calls.
376-390
: LGTM! Clean up of commented code.
Good removal of commented-out code in favor of cleaner conditional rendering.
health/micro-ui/web/micro-ui-internals/example/public/index.html (1)
15-15
: Verify version consistency across the application
The health CSS version has been updated to 0.2.4. Let's verify this version is used consistently.
✅ Verification successful
Version 0.2.4 is consistently used across the application
The health CSS version 0.2.4 is consistently used in all relevant files:
- Both HTML files use version 0.2.4 in their CDN links
- The package.json of the CSS package itself is at version 0.2.4
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any remaining references to older versions of digit-ui-health-css
rg -l "digit-ui-health-css@(0\.2\.[0-3]|0\.1\.|0\.0\.)" --type html
Length of output: 69
Script:
#!/bin/bash
# Let's search for all references to digit-ui-health-css to get a complete picture
rg -l "digit-ui-health-css@" --type html
# Also search for any package.json files that might reference this dependency
rg -l "digit-ui-health-css" --type json
Length of output: 248
Script:
#!/bin/bash
# Let's check the content of both HTML files and the package.json to verify versions
echo "=== Content of health/micro-ui/web/public/index.html ==="
cat health/micro-ui/web/public/index.html | grep "digit-ui-health-css"
echo -e "\n=== Content of health/micro-ui/web/micro-ui-internals/example/public/index.html ==="
cat health/micro-ui/web/micro-ui-internals/example/public/index.html | grep "digit-ui-health-css"
echo -e "\n=== Content of health/micro-ui/web/micro-ui-internals/packages/css/package.json ==="
cat health/micro-ui/web/micro-ui-internals/packages/css/package.json | grep -A 5 -B 5 "digit-ui-health-css"
Length of output: 1167
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js (1)
50-50
: 🧹 Nitpick (assertive)
Consider consistent class naming between summary and popup views
The component uses different class names (summary-parent-group
vs parent-group
) for similar elements in different contexts. Consider using consistent class names or adding a clear comment explaining the intentional difference.
Also applies to: 103-103
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (2)
Line range hint 21-31
: LGTM! Well-implemented error handling and user feedback.
The error handling implementation is comprehensive with:
- Proper use of try-catch blocks
- Internationalized error messages
- Auto-dismissing toast notifications
- Graceful handling of backend errors
Also applies to: 224-234
149-149
: LGTM! Verify CSS class existence.
The Tag component updates align with the UI/UX improvements objective.
✅ Verification successful
Tag component styling is properly implemented
The campaign-tag
class is correctly defined in the SCSS file at health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss
with appropriate margin styling, supporting the Tag component's visual presentation.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Verify the existence of campaign-tag class in SCSS files
rg -l "campaign-tag" --type scss
Length of output: 61
Script:
#!/bin/bash
# Let's try searching for the CSS class in all possible stylesheet formats
rg -l "campaign-tag" --type css
rg -l "campaign-tag" -g "*.scss"
rg -l "campaign-tag" -g "*.less"
rg -l "campaign-tag" -g "*.module.css"
rg -l "campaign-tag" -g "*.css"
# Also search in JS/JSX files as the styles might be defined inline or in a styled-component
rg -l "campaign-tag" -g "*.js"
rg -l "campaign-tag" -g "*.jsx"
Length of output: 2315
Script:
#!/bin/bash
# Let's check the actual implementation of the campaign-tag class in the SCSS file
rg "campaign-tag" health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaign.scss -C 2
Length of output: 164
health/micro-ui/web/public/index.html (1)
13-13
: Verify the version update of digit-ui-health-css.
The CSS library version has been updated from 0.2.2
to 0.2.4
.
✅ Verification successful
Version update from 0.2.2 to 0.2.4 is safe to proceed
The version update is verified through multiple sources:
- The package's own package.json confirms 0.2.4 as the current version
- The example application also uses version 0.2.4
- The CHANGELOG.md shows active maintenance with recent updates
- No breaking changes are indicated between these minor version updates
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for the latest version and any breaking changes
# Check package.json files for any other references to this package
rg -l "@egovernments/digit-ui-health-css"
# Check for version constraints in package.json files
rg "\"@egovernments/digit-ui-health-css\": \"[^\"]+"
Length of output: 382
Script:
#!/bin/bash
# Let's check the content of these files to understand the version usage
cat health/micro-ui/web/micro-ui-internals/packages/css/package.json
cat health/micro-ui/web/micro-ui-internals/example/src/index.js
cat health/micro-ui/web/micro-ui-internals/example/public/index.html
# Also check git history for recent changes to these files
git log -n 5 --oneline -- health/micro-ui/web/public/index.html
# Check for any changelog or release notes
cat health/micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md 2>/dev/null || echo "No changelog found"
Length of output: 6722
health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss (3)
241-241
: LGTM! Spacing adjustment for campaign product table.
The removal of margin-bottom improves the layout consistency.
794-795
: LGTM! Padding adjustment for parent group.
The addition of padding-bottom: 0rem helps maintain consistent spacing.
797-806
: LGTM! New summary parent group styles.
The new summary-parent-group class provides consistent styling for summary sections with appropriate spacing and borders.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)
282-282
: LGTM! UI enhancement for campaign name tag.
The Tag component changes align with the PR objectives of improving UI/UX. The addition of type="monochrome"
and stroke={true}
provides a consistent visual style across the campaign manager module.
...web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js
Outdated
Show resolved
Hide resolved
...micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js
Show resolved
Hide resolved
...micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js
Outdated
Show resolved
Hide resolved
...b/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
Outdated
Show resolved
Hide resolved
...i-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js
Show resolved
Hide resolved
...icro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
Outdated
Show resolved
Hide resolved
...micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js
Outdated
Show resolved
Hide resolved
...b/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js
Outdated
Show resolved
Hide resolved
...i/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js
Show resolved
Hide resolved
...icro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js
Show resolved
Hide resolved
There was a problem hiding this 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
🔭 Outside diff range comments (29)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (2)
Line range hint
9-108
: Consider breaking down the component for better maintainability.The UpdateBoundaryWrapper component handles multiple responsibilities including data management, state updates, and API response handling. Consider breaking it down into smaller, more focused components:
- A container component for data fetching and state management
- A presentation component for rendering the boundary selection UI
- A separate hook for boundary data management
This would improve:
- Code maintainability
- Testing capabilities
- Reusability
Line range hint
41-42
: Add error handling for API calls.The API calls using
useCustomAPIHook
anduseBoundaryRelationshipSearch
lack error handling. Consider:
- Adding error states
- Showing appropriate error messages to users
- Implementing retry mechanisms for failed requests
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
Line range hint
48-82
: Improved boundary data grouping with hierarchy supportThe updated boundaryDataGrp function now properly handles hierarchy definition and ordering, making the boundary type organization more robust.
Consider adding JSDoc documentation to explain:
- The expected structure of hierarchyDefinition
- The ordering logic in getOrderedBoundaryTypes
- The return value format
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (4)
Line range hint
69-77
: Remove unconditional useEffect causing unnecessary rerendersThe useEffect without dependencies is causing up to 5 unnecessary rerenders. This affects performance and may lead to unexpected behavior.
Consider removing this effect and moving the state update logic to the appropriate event handlers or combine it with other effects:
- useEffect(() => { - if (executionCount < 5) { - const updatedState = { - ...state, - deliveryConfig: filteredDeliveryConfig, - }; - onSelect("cycleConfigure", updatedState); - setExecutionCount((prevCount) => prevCount + 1); - } - });
Line range hint
79-94
: Enhance input validation and error handlingThe cycle and delivery input validation could be improved to provide better user feedback and handle edge cases.
Consider implementing the following improvements:
const updateCycle = (d) => { - if (d === 0 || d > 5) return; - if (Number(d?.target?.value) === 0 || Number(d?.target?.value) > 5) return; + const value = d?.target?.value; + if (value === '') { + dispatch({ type: "UPDATE_CYCLE", payload: value }); + return; + } + const numValue = Number(value); + if (numValue <= 0 || numValue > 5) { + // Consider showing validation error to user + return; + } + dispatch({ type: "UPDATE_CYCLE", payload: numValue }); };
Line range hint
41-57
: Consider implementing error boundaries and loading statesThe component lacks proper error handling for failed data fetching and loading states for async operations.
Consider adding error boundaries and improving loading states:
function CycleConfiguration({ onSelect, formData, control, ...props }) { const tenantId = Digit.ULBService.getCurrentTenantId(); const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); + + if (error) { + return <ErrorComponent error={error} onRetry={() => setError(null)} />; + } + + if (isLoading) { + return <Loader />; + }
Line range hint
1-400
: Consider performance optimizationsSeveral performance optimizations could be implemented to improve the component's efficiency.
Consider the following optimizations:
- Memoize expensive calculations and callbacks using useMemo and useCallback
- Implement React.memo for child components if they don't need frequent updates
- Batch state updates where possible
- Consider using a form library like react-hook-form or formik for better form state management
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (3)
Line range hint
466-476
: Consider moving inline styles to styled components or CSS modulesThe current implementation uses inline styles for layout and typography, which makes maintenance difficult and violates separation of concerns. Consider:
- Moving styles to a separate CSS module or styled components
- Using design system tokens for typography and spacing
- Creating reusable layout components
Example refactor:
- <div style={{ display: "flex", justifyContent: "space-between", height: "5.8rem", marginTop:"-1.2rem" }}> - <div> - <h2 style={{ fontSize: "2.5rem", fontWeight: "700", fontFamily: "Roboto Condensed" }}> + <StyledHeader> + <HeaderTitle> + <Heading> {t("UPDATE_CHECKLIST")} - </h2> - </div> + </Heading> + </HeaderTitle>
Line range hint
150-270
: Consider breaking down the complex generateCodes functionThe
generateCodes
function has high cyclomatic complexity with deeply nested logic. Consider:
- Extracting the code generation logic into separate functions
- Using a more functional approach with map/reduce
- Implementing a proper strategy pattern for different question types
Example refactor approach:
const generateQuestionCode = (question, index, prefix = '') => { return prefix ? `${prefix}.SN${index + 1}` : `SN${index + 1}`; }; const generateOptionCodes = (options, questionCode) => { return options.map(option => ({ code: transformToCode(option.label), message: option.label })); }; const generateCodes = (questions) => { const codes = {}; const local = []; const processQuestion = (question, index, prefix = '') => { const code = generateQuestionCode(question, index, prefix); codes[question.id] = code; if (question.isActive) { local.push(generateLocalisation(question, code)); } if (question.options) { local.push(...generateOptionCodes(question.options, code)); } return { codes, local }; }; questions.forEach((question, index) => { processQuestion(question, index); }); return { codes, local }; };
Line range hint
271-365
: Improve error handling in onSubmit functionThe current error handling uses generic error messages. Consider:
- Adding specific error handling for different failure scenarios
- Implementing proper error boundaries
- Providing more detailed feedback to users
Example improvement:
try { const data = await mutateAsync(payload); if (data.success) { const localisationResult = await localisationMutateAsync(localisations); if (!localisationResult.success) { - setShowToast({ label: "CHECKLIST_UPDATE_LOCALISATION_ERROR", isError: "true" }); + setShowToast({ + label: `CHECKLIST_UPDATE_LOCALISATION_ERROR.${localisationResult.errorCode}`, + isError: true, + details: localisationResult.errorDetails + }); return; } // ... success handling } } catch (error) { - setShowToast({ label: "CHECKLIST_UPDATE_FAILED", isError: "true" }); + const errorCode = error?.response?.data?.errorCode || 'UNKNOWN_ERROR'; + setShowToast({ + label: `CHECKLIST_UPDATE_FAILED.${errorCode}`, + isError: true, + details: error?.response?.data?.errorDetails || error.message + }); + Digit.Utils.logError('UpdateChecklist', error); }health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (4)
Line range hint
279-391
: Add error handling in generateCodes functionThe generateCodes function handles complex nested data structures but lacks proper error handling. Consider adding try-catch blocks and input validation to make it more robust.
const generateCodes = (questions) => { + if (!Array.isArray(questions)) { + throw new Error('Input must be an array of questions'); + } const codes = {}; const local = []; let activeCounters = { top: 0 }; // Rest of the function... try { // Existing code... } catch (error) { console.error('Error generating codes:', error); throw error; } };
Line range hint
392-451
: Avoid mutating input data in payloadData functionThe payloadData function directly modifies the input data by changing question types. This could lead to unexpected side effects. Consider creating a deep copy of the data before modification.
const payloadData = (data) => { + // Create a deep copy of the data + const processedQuestions = JSON.parse(JSON.stringify(data)); - data.forEach((question) => { + processedQuestions.forEach((question) => { if (question.type.code === "Short Answer") { question.type.code = "String"; delete question.options; } }); - processedData = organizeQuestions(data); + processedData = organizeQuestions(processedQuestions); // Rest of the function... };
Line range hint
452-507
: Enhance error handling in onSubmit functionThe error handling in onSubmit function could be more specific and informative. Consider categorizing errors and providing more detailed feedback to users.
try { const data = await mutateAsync(payload); // ... existing code ... } catch (error) { - setShowToast({ label: "CHECKLIST_CREATED_FAILED", isError: "true" }); + const errorMessage = error.response?.data?.message || "CHECKLIST_CREATED_FAILED"; + setShowToast({ + label: errorMessage, + isError: "true", + details: error.message // Additional details for logging + }); + console.error("Checklist creation failed:", { + error: error.message, + payload, + context: "onSubmit" + }); } finally { setSubmitting(false); }
Line range hint
41-107
: Consider using custom hooks for better state managementThe component has multiple useEffect hooks and state variables that could be organized better. Consider extracting related logic into custom hooks for better maintainability and reusability.
Example of how to extract the checklist data fetching logic:
// useChecklistData.js const useChecklistData = (tenantId, role, checklistType) => { const [loading, setLoading] = useState(true); const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const res = await callSearch(tenantId, role, checklistType); if (res?.mdms?.[0]?.data?.data) { setData(res.mdms[0].data.data); } } catch (err) { setError(err); } finally { setLoading(false); } }; fetchData(); }, [tenantId, role, checklistType]); return { loading, data, error }; };health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (4)
Line range hint
6-6
: Consider restructuring props handling and URL managementThe component could benefit from some structural improvements:
- Destructure nested props to improve readability
- Consider using React Context or a state management solution to avoid prop drilling
- Extract URL parameter management logic into a custom hook
Example refactor:
-const CampaignDates = ({ onSelect, formData, ...props }) => { +const CampaignDates = ({ + onSelect, + formData, + sessionData, + isSubmitting, + ...props +}) => {// New custom hook for URL management const useUrlParams = () => { const [params, setParams] = useState(new URLSearchParams(location.search)); const updateParams = useCallback((newParams) => { const url = new URL(window.location.href); Object.entries(newParams).forEach(([key, value]) => { url.searchParams.set(key, value); }); window.history.replaceState({}, "", url); setParams(new URLSearchParams(url.search)); }, []); return [params, updateParams]; };Also applies to: 134-134
Line range hint
41-54
: Consolidate and simplify validation logicThe current validation logic is spread across multiple useEffect hooks, making it harder to maintain and understand the validation flow.
Consider consolidating the validation logic:
const validateDates = useCallback((startDate, endDate, isSubmitting) => { if (isSubmitting) { if (!startDate && !endDate) return { startDate: "CAMPAIGN_FIELD_MANDATORY", endDate: "CAMPAIGN_FIELD_MANDATORY" }; if (!startDate) return { startDate: "CAMPAIGN_FIELD_MANDATORY" }; if (!endDate) return { endDate: "CAMPAIGN_FIELD_MANDATORY" }; } if (startDate && endDate) { const start = new Date(startDate).getTime(); const end = new Date(endDate).getTime(); if (end < start) return { endDate: "CAMPAIGN_END_DATE_BEFORE_ERROR" }; if (end === start) return { endDate: "CAMPAIGN_END_DATE_SAME_ERROR" }; } return null; }, []); useEffect(() => { const validationError = validateDates(startDate, endDate, props?.props?.isSubmitting); setError(validationError); if (!validationError && (startDate || endDate)) { onSelect("campaignDates", { startDate, endDate }); } }, [startDate, endDate, props?.props?.isSubmitting]);Also applies to: 55-69
Line range hint
70-75
: Fix potential infinite render loopThe useEffect hook without a dependency array will run after every render, potentially causing performance issues.
Fix the infinite loop by adding proper dependencies:
useEffect(() => { if (executionCount < 5) { onSelect("campaignDates", { startDate: startDate, endDate: endDate }); setExecutionCount((prevCount) => prevCount + 1); } - }); + }, [startDate, endDate]);
Line range hint
9-21
: Simplify state managementThe component maintains redundant state with both a dates object and individual date states.
Consider consolidating the state:
const [dates, setDates] = useState({ startDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate || today, endDate: props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate || today, }); const updateDates = useCallback((field, value) => { setDates(prev => { const newDates = { ...prev, [field]: value }; onSelect("campaignDates", newDates); return newDates; }); }, [onSelect]);health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (3)
Line range hint
180-190
: Clean up commented code and improve translation handling.A few suggestions for improvement:
- Remove the commented out PreviewComponent code.
- Remove the empty div from footerChildren.
- Consider using proper translation key composition instead of string concatenation.
Apply these changes:
- {/* <PreviewComponent - questionsArray={previewData}></PreviewComponent> */} <MobileChecklist questions={previewData} campaignName={campaignName} - checklistRole={t(`${roleLocal}`)} - typeOfChecklist={t(`${checklistTypeLocal}`)} + checklistRole={t(roleLocal)} + typeOfChecklist={t(checklistTypeLocal)} />And in the PopUp footerChildren:
footerChildren={[ - <div></div>, <Button type={"button"} size={"large"} variation={"primary"} label={t("CLOSE")} onClick={() => { setShowPopUp(false); }} /> ]}
Line range hint
71-106
: Consider optimizing the question organization logic.The
organizeQuestions
function performs a deep clone usingJSON.parse(JSON.stringify())
which can be performance-intensive for large datasets and doesn't handle circular references or special types (Date, undefined, etc.).Consider using a more efficient approach:
function organizeQuestions(questions) { - const clonedQuestions = JSON.parse(JSON.stringify(questions)); + // Create a new array with mapped questions to avoid mutating the original + const clonedQuestions = questions.map(q => ({...q})); const questionMap = new Map(); const optionMap = new Map(); const organizedQuestions = []; // ... rest of the function }
Line range hint
38-63
: Consider consolidating useEffect hooks.The component has multiple useEffect hooks that could potentially be combined to reduce re-renders and improve code organization.
Consider consolidating the data transformation logic:
- useEffect(() => { - if (data) { - data.forEach((question) => { - if (question.type.code === "String") { - question.type.code = "Short Answer"; - } - }); - setViewData(data); - } - }, [data]) - useEffect(() => { - const currentTime = new Date(); - if (viewData !== null) { - setConfig(checklistCreateConfig(viewData, currentTime, "view")); - } - }, [viewData]) + useEffect(() => { + if (data) { + const transformedData = data.map(question => ({ + ...question, + type: { + ...question.type, + code: question.type.code === "String" ? "Short Answer" : question.type.code + } + })); + setViewData(transformedData); + setConfig(checklistCreateConfig(transformedData, new Date(), "view")); + } + }, [data])Also applies to: 108-115
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (5)
Line range hint
24-26
: Remove redundant useEffect hookThe current useEffect implementation creates a potential infinite loop and doesn't serve any purpose as it's just setting the state to its own value.
Remove the redundant useEffect:
-useEffect(() => { - setCampaignName(campaignName); -}, campaignName);
Line range hint
29-31
: Implement the onClickRow handlerThe click handler is marked with a TODO comment but left unimplemented, which could affect functionality.
Would you like me to help implement a proper row click handler based on your requirements?
Line range hint
42-136
: Clean up commented codeThe file contains significant amounts of commented-out code, including Stepper implementation and card components. This affects code readability and maintenance.
Remove all commented code sections if they're no longer needed, or implement them properly if they're planned features.
Also applies to: 195-211
Line range hint
42-83
: Consolidate MDMS data fetching logicThe component has separate useEffect hooks and API calls for fetching MDMS data. This could be optimized.
Consider consolidating the MDMS data fetching:
const fetchMDMSData = async () => { const [rolesData, checklistData] = await Promise.all([ Digit.Hooks.useCustomAPIHook(reqCriteria), Digit.Hooks.useCustomAPIHook(reqCriteria1) ]); if (rolesData?.mdms) { setCodesOpt(rolesData.mdms.map(item => ({ code: `ACCESSCONTROL_ROLES_ROLES_${item?.data?.code}` }))); } if (checklistData?.mdms) { setListsOpt(checklistData.mdms.map(item => ({ list: `HCM_CHECKLIST_TYPE_${item?.data?.code}` }))); } }; useEffect(() => { fetchMDMSData(); }, []);
Line range hint
84-88
: Improve error handling in onStepClickThe current implementation shows a toast message and returns early without proper error handling or user feedback.
Consider implementing a more robust error handling approach:
const onStepClick = (step) => { try { if (!isStepClickable(step)) { setShowToast({ key: "error", label: "CAMPAIGN_CANNOT_CLICK", transitionTime: 5000 }); return; } // Handle valid step click } catch (error) { console.error('Step click error:', error); setShowToast({ key: "error", label: "CAMPAIGN_STEP_ERROR", transitionTime: 5000 }); } };health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (3)
Line range hint
42-57
: Refactor validation logic for better maintainability.The validation logic is complex and contains repeated project type checks. Consider extracting the validation logic into separate utility functions.
+const isValidCycleDates = (cycles) => cycles?.every((j) => j?.startDate && j?.endDate); +const isValidBoundaryDates = (temp) => temp.every((i) => i?.startDate && i?.endDate); + +const isMRDNProjectType = (projectType) => projectType === "MR-DN"; + const checkValid = (data) => { if (DateWithBoundary) { const temp = data?.dateWithBoundary; - const allCycleDateValid = temp?.projectType === "MR-DN" - ? temp.map((i) => i?.additionalDetails?.projectType?.cycles.every((j) => j?.startDate && j?.endDate)).every((k) => k === true) - : true; - const allDateValid = temp.every((i) => i?.startDate && i?.endDate); + const allCycleDateValid = isMRDNProjectType(temp?.projectType) + ? temp.map((i) => isValidCycleDates(i?.additionalDetails?.projectType?.cycles)).every(Boolean) + : true; + const allDateValid = isValidBoundaryDates(temp); - if (temp?.projectType === "MR-DN" && allCycleDateValid && allDateValid) { - return true; - } - else if (temp?.projectType !== "MR-DN" && allDateValid) { - return true; - } - return false; + return isMRDNProjectType(temp?.projectType) + ? allCycleDateValid && allDateValid + : allDateValid; } // ... rest of the function };
Line range hint
91-117
: Clean up commented code and improve error handling.The onConfirm function contains commented out code and could benefit from more specific error handling.
- Remove commented out code if it's no longer needed
- Consider adding more specific error messages
- Extract success/error handling logic into separate functions
const onConfirm = async (formData) => { setShowPopUp(null); try { if (DateWithBoundary) { - // updating the endDate by +1 sec and -1 sec so that backend logic for ancestor update work const payload = formData?.dateWithBoundary?.map((item) => { let itemEndDate = item?.endDate; let endDate = new Date(item?.endDate); let endSecond = endDate?.getSeconds(); - // if (endSecond < 59) { - // return { - // ...item, - // endDate: itemEndDate + 1000, - // }; - // } else { - // return { - // ...item, - // endDate: itemEndDate - 1000, - // }; - // } }); + const temp = await Digit.Hooks.campaign.useProjectUpdateWithBoundary({ formData: formData?.dateWithBoundary }); history.push(`/${window.contextPath}/employee/campaign/response?isSuccess=${true}`, { message: t("ES_CAMPAIGN_DATE_CHANGE_WITH_BOUNDARY_SUCCESS"), actionLabel: t("HCM_DATE_CHANGE_SUCCESS_RESPONSE_ACTION"), actionLink: `/${window.contextPath}/employee/campaign/setup-campaign?id=${id}&preview=true&action=false&actionBar=true&key=14&summary=true` }); } // ... rest of the function } catch (error) { - setShowToast({ isError: true, label: error?.response?.data?.Errors?.[0]?.message ? error?.response?.data?.Errors?.[0]?.message : error }); + const errorMessage = error?.response?.data?.Errors?.[0]?.message || 'Failed to update campaign dates'; + setShowToast({ isError: true, label: errorMessage }); } };
Line range hint
21-31
: Improve component structure and state management.Consider the following improvements:
- Extract toast management into a custom hook
- Remove empty form value change handler if not needed
- Consider using a reducer for state management
+const useToast = (duration = 5000) => { + const [toast, setToast] = useState(null); + + useEffect(() => { + if (toast) { + const timer = setTimeout(() => setToast(null), duration); + return () => clearTimeout(timer); + } + }, [toast, duration]); + + return [toast, setToast]; +}; function UpdateDatesWithBoundaries() { - const [showToast, setShowToast] = useState(null); + const [showToast, setShowToast] = useToast(); // ... other state declarations - const closeToast = () => { - setShowToast(null); - }; - - useEffect(() => { - if (showToast) { - setTimeout(closeToast, 5000); - } - }, [showToast]); - const onFormValueChange = (setValue, formData, formState, reset, setError, clearErrors, trigger, getValues) => { - return; - };Also applies to: 76-78
♻️ Duplicate comments (2)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (1)
137-137
: 🧹 Nitpick (assertive)Consider improving style maintainability.
- The style object could be more readable with proper formatting.
-style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}} +style={{ + margin: "0rem", + maxWidth: "100%", + marginTop: "1.5rem", + marginBottom: "2rem" +}}
- Consider moving these styles to a CSS class for better maintainability.
+// In your CSS file +.info-card { + margin: 0; + max-width: 100%; + margin-top: 1.5rem; + margin-bottom: 2rem; +} -style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}} +className="info-card"health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)
517-517
: 🧹 Nitpick (assertive)Consider improving Tag component placement
The Tag component's placement at the top of the page could be enhanced for better visual hierarchy. Consider adding margin-bottom to create better spacing between the tag and the heading.
- <Tag label={campaignName} showIcon={false} type={"monochrome"} stroke={true} /> + <Tag + label={campaignName} + showIcon={false} + type={"monochrome"} + stroke={true} + style={{ marginBottom: "1rem" }} + />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (16)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js
(1 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/MultiTabcontext.js
(1 hunks)
👮 Files not reviewed due to content moderation or server errors (3)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js
🧰 Additional context used
📓 Path-based instructions (16)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.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/SelectingBoundariesDuplicate.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)
Pattern **/*.js
: check
🔇 Additional comments (11)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)
1135-1135
: LGTM! Tag component styling update is consistent.
The addition of type="monochrome"
and stroke={true}
props to the Tag component aligns with similar updates made across other components in the campaign manager module.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (2)
79-79
: Consider moving styles to CSS for better maintainability.
The Tag component styling could be moved to a dedicated CSS file using className-based styling.
104-104
: Consider using theme-based spacing variables.
Using inline styles with hard-coded values reduces maintainability. Consider using theme-based spacing variables for consistency.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (1)
115-115
: Consider adding ARIA attributes for accessibility.
The Tag component styling changes align with the UI/UX improvements. However, since this displays the campaign name, consider enhancing accessibility.
-<Tag label={campaignName} showIcon={false} className={"campaign-tag"} type={"monochrome"} stroke={true}/>
+<Tag
+ icon=""
+ label={campaignName}
+ labelStyle={{}}
+ showIcon={false}
+ className={"campaign-tag"}
+ type={"monochrome"}
+ stroke={true}
+ role="status"
+ aria-label={`Current campaign: ${campaignName}`}
+/>
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js (1)
307-307
: LGTM! Tag component updates improve visual consistency
The Tag component changes appropriately simplify the props while maintaining functionality.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)
355-355
: LGTM! Tag component updates maintain consistency
The Tag component changes align with the UI/UX improvements across the application.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
447-449
: Move inline styles to CSS file
The inline styles should be moved to a CSS file for better maintainability.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1)
218-218
: LGTM: Tag component styling update
The Tag component styling update is consistent with the UI/UX improvements being made across the campaign manager module.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
465-465
: LGTM: Tag component styling enhancement
The Tag component update with type="monochrome"
and stroke={true}
improves visual consistency.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (1)
134-134
: LGTM: Visual styling update for Tag component
The addition of type="monochrome"
and stroke={true}
props aligns with the UI/UX improvements mentioned in the PR objectives.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
143-143
: LGTM! Verify consistent Tag styling across the application.
The Tag component update aligns with the UI/UX improvements mentioned in the PR objectives.
Let's verify the consistent Tag styling across other files:
✅ Verification successful
Tag component styling is consistent across the campaign-manager module
The verification shows that all 16 instances of the Tag component in the campaign-manager module use consistent props:
type="monochrome"
stroke={true}
showIcon={false}
label={campaignName}
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for Tag component usage to ensure consistent styling
rg --type js 'Tag.*label.*showIcon.*type.*stroke' ./health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/
Length of output: 3717
...b/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js
Outdated
Show resolved
Hide resolved
...-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js
Outdated
Show resolved
Hide resolved
...i/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 8
🔭 Outside diff range comments (8)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1)
Line range hint
10-31
: Consider moving utility function to a separate fileThe
boundaryDataGrp
function is a pure utility function that could be moved to a separate utils file for better code organization and reusability.Consider moving this function to a new file like
utils/boundaryUtils.js
:// utils/boundaryUtils.js export function boundaryDataGrp(boundaryData) { const groupedData = {}; boundaryData?.forEach((item) => { const { type } = item; if (!groupedData[type]) { groupedData[type] = []; } groupedData[type].push(item); }); return Object.keys(groupedData).map((type) => ({ type, boundaries: groupedData[type], })); }health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (2)
Line range hint
89-103
: Clean up commented code in onConfirm functionThe commented code related to endDate adjustment should either be removed or implemented if needed. Keeping commented code can lead to confusion.
Line range hint
42-57
: Enhance form validation logicThe checkValid function could be simplified and made more maintainable. Consider extracting the validation logic for different project types into separate functions.
const checkValid = (data) => { if (DateWithBoundary) { const temp = data?.dateWithBoundary; - const allCycleDateValid = temp?.projectType === "MR-DN" - ? temp.map((i) => i?.additionalDetails?.projectType?.cycles.every((j) => j?.startDate && j?.endDate)).every((k) => k === true) - : true; - const allDateValid = temp.every((i) => i?.startDate && i?.endDate); + const validateCycleDates = (data) => + data?.projectType === "MR-DN" + ? data.map(i => i?.additionalDetails?.projectType?.cycles + .every(j => j?.startDate && j?.endDate)) + .every(k => k === true) + : true; + + const validateDates = data => + data.every(i => i?.startDate && i?.endDate); + + const allCycleDateValid = validateCycleDates(temp); + const allDateValid = validateDates(temp); if (temp?.projectType === "MR-DN" && allCycleDateValid && allDateValid) { return true; } // ... rest of the functionhealth/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (2)
Line range hint
22-24
: Fix useEffect dependency causing potential infinite loopThe useEffect dependency on campaignName while setting the same state could cause an infinite loop.
-useEffect(() => { - setCampaignName(campaignName); -}, campaignName); +useEffect(() => { + if (searchParams.get("name")) { + setCampaignName(searchParams.get("name")); + } +}, [searchParams]);
Line range hint
138-230
: Clean up commented codeThere's a significant amount of commented code that should be removed if it's no longer needed. This includes the Stepper component and card container code. Keeping commented code makes the file harder to maintain.
🧰 Tools
🪛 Biome (1.9.4)
[error] 138-138: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
Line range hint
33-57
: Add error handling to boundaryDataGrp functionThe boundary data grouping function should handle potential edge cases and invalid input.
function boundaryDataGrp(boundaryData, hierarchyDefinition) { + if (!boundaryData || !Array.isArray(boundaryData)) { + console.warn('Invalid or missing boundary data'); + return []; + } + if (!hierarchyDefinition) return []; const groupedData = {}; function getOrderedBoundaryTypes(hierarchy) { + if (!hierarchy?.BoundaryHierarchy?.[0]?.boundaryHierarchy) { + console.warn('Invalid hierarchy definition structure'); + return []; + } + const result = []; let currentItem = hierarchy?.BoundaryHierarchy?.[0]?.boundaryHierarchy.find(item => item.parentBoundaryType === null); while (currentItem) { result.push(currentItem.boundaryType); currentItem = hierarchy?.BoundaryHierarchy?.[0]?.boundaryHierarchy.find(item => item.parentBoundaryType === currentItem.boundaryType); } return result; } const orderedBoundaryTypes = getOrderedBoundaryTypes(hierarchyDefinition); + if (!orderedBoundaryTypes.length) { + console.warn('No boundary types found in hierarchy'); + return []; + }health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)
Line range hint
371-424
: Enhance error handling in onSubmit functionThe error handling could be improved by:
- Adding specific error types/codes handling
- Providing more detailed error messages to users
- Implementing retry logic for transient failures
const onSubmit = async (formData, flag = 0, preview = null) => { let payload; if (flag === 1) { payload = payloadData(preview); } else { payload = payloadData(formData?.createQuestion?.questionData); } setSubmitting(true); try { const data = await mutateAsync(payload); if (data.success) { const localisations = uniqueLocal; const localisationResult = await localisationMutateAsync(localisations); if (!localisationResult.success) { - setShowToast({ label: "CHECKLIST_CREATED_LOCALISATION_ERROR", isError: "true" }); + setShowToast({ + label: "CHECKLIST_CREATED_LOCALISATION_ERROR", + isError: "true", + details: localisationResult.error?.message || "Unknown error" + }); return; } history.push(`/${window.contextPath}/employee/campaign/response?isSuccess=${true}`, { message: "ES_CHECKLIST_CREATE_SUCCESS_RESPONSE", preText: "ES_CHECKLIST_CREATE_SUCCESS_RESPONSE_PRE_TEXT", actionLabel: "HCM_CONFIGURE_APP_RESPONSE_ACTION", actionLink: `/${window.contextPath}/employee/campaign/checklist/search?name=${projectName}&campaignId=${campaignId}&projectType=${projectType}`, secondaryActionLabel: "MY_CAMPAIGN", secondaryActionLink: `/${window?.contextPath}/employee/campaign/my-campaign`, }); } else { - setShowToast({ label: "CHECKLIST_CREATED_FAILED", isError: "true" }); + setShowToast({ + label: "CHECKLIST_CREATED_FAILED", + isError: "true", + details: data.error?.message || "Unknown error" + }); } } catch (error) { - setShowToast({ label: "CHECKLIST_CREATED_FAILED", isError: "true" }); + setShowToast({ + label: "CHECKLIST_CREATED_FAILED", + isError: "true", + details: error?.response?.data?.error?.message || error.message || "Unknown error" + }); + // Implement retry logic for network errors + if (error.isAxiosError && error.code === "ECONNABORTED") { + // Handle timeout + setShowToast({ + label: "NETWORK_TIMEOUT_ERROR", + isError: "true", + details: "Please try again" + }); + } } finally { setSubmitting(false); } };🧰 Tools
🪛 Biome (1.9.4)
[error] 11-12: This let declares a variable that is only assigned once.
'temp_data' is never reassigned.
Safe fix: Use const instead.
(lint/style/useConst)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)
Line range hint
392-614
: Extract file validation logic into a separate utilityThe file validation logic is complex and could be moved to a separate utility file for better maintainability and reusability.
Consider creating a new utility file
fileValidationUtils.js
to house these functions:
- validateExcel
- validateMultipleTargets
- validateTarget
- validateTargetData
This would:
- Improve code organization
- Make the component more focused
- Make the validation logic reusable
- Facilitate testing
♻️ Duplicate comments (3)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js (1)
105-105
: 🧹 Nitpick (assertive)Consider using theme-based spacing
The InfoCard styling improvements enhance layout consistency. However, consider using theme-based spacing variables instead of hard-coded values for better maintainability.
-style={{ margin: "0rem", maxWidth: "100%" , marginTop: "1.5rem" , marginBottom: "2rem"}} +className="info-card info-card--campaign"health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
466-466
: 🛠️ Refactor suggestionUse self-closing syntax for TagComponent
The TagComponent without children should use self-closing syntax.
-<TagComponent campaignName={campaignName}></TagComponent> +<TagComponent campaignName={campaignName} />🧰 Tools
🪛 Biome (1.9.4)
[error] 466-466: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)
1135-1135
: 🛠️ Refactor suggestionUse self-closing syntax for TagComponent
The TagComponent without children should use self-closing syntax.
-<TagComponent campaignName={campaignName}></TagComponent> +<TagComponent campaignName={campaignName} />🧰 Tools
🪛 Biome (1.9.4)
[error] 1135-1135: 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)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (18)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js
(3 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TagComponent.js
(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js
(3 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js
(2 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js
(2 hunks)
👮 Files not reviewed due to content moderation or server errors (6)
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js
- health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js
🧰 Additional context used
📓 Path-based instructions (18)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/TagComponent.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.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/DataUploadSummary.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js (1)
Pattern **/*.js
: check
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js (1)
Pattern **/*.js
: check
🪛 Biome (1.9.4)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundarySummary.js
[error] 155-155: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js
[error] 355-355: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/SelectingBoundariesDuplicate.js
[error] 116-116: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js
[error] 448-448: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js
[error] 283-283: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDetailsSummary.js
[error] 162-162: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CreateChecklist.js
[error] 518-518: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js
[error] 466-466: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/ViewChecklist.js
[error] 144-144: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js
[error] 138-138: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UpdateBoundaryWrapper.js
[error] 80-80: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js
[error] 1135-1135: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DataUploadSummary.js
[error] 308-308: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js
[error] 219-219: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateDatesWithBoundaries.js
[error] 150-150: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js
[error] 135-135: 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)
🔇 Additional comments (6)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/Module.js (1)
165-166
: LGTM! Component registration looks good
The TagComponent has been properly registered in the componentsToRegister object.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js (1)
138-138
: Use self-closing syntax for TagComponent
Follow JSX best practices by using self-closing syntax when the component has no children.
-<TagComponent campaignName={campaignName}></TagComponent>
+<TagComponent campaignName={campaignName} />
🧰 Tools
🪛 Biome (1.9.4)
[error] 138-138: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/DeliveryDetailsSummary.js (1)
356-356
: Move inline styles to CSS file
The inline styles should be moved to a CSS file for better maintainability.
-<div style={{ display: "flex", justifyContent: "space-between" }}>
+<div className="campaign-summary-header">
Add to your CSS file:
.campaign-summary-header {
display: flex;
justify-content: space-between;
}
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js (1)
449-449
: Move inline styles to CSS file
The inline styles should be moved to a CSS file for better maintainability.
-<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "-1.5rem" }}>
+<div className="campaign-summary-header">
Add to your CSS file:
.campaign-summary-header {
display: flex;
justify-content: space-between;
margin-bottom: -1.5rem;
}
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/UpdateChecklist.js (1)
Line range hint 316-378
: Enhance error handling in onSubmit function
Similar error handling improvements as suggested for CreateChecklist.js should be applied here for consistency.
health/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/UploadData.js (1)
Line range hint 1017-1029
: Well implemented template download tracking
The implementation of downloaded templates tracking is clean and effective. It:
- Properly manages state for different template types
- Correctly handles the popup visibility
- Persists download status across component lifecycle
Summary by CodeRabbit
New Features
TagComponent
for improved rendering of campaign names across multiple components.Bug Fixes
Chores