Fixed Audit issues

[rachana-egov]

Summary by CodeRabbit

• New Features

  • Updated CSS version for the health UI component to improve styling and responsiveness.
  • Enhanced button appearance across various components with a new size property.

• Bug Fixes

  • Improved error handling and user feedback for employee assignment updates and API calls.

• UI Improvements

  • Adjusted layouts and spacing for better visual consistency and responsiveness in the microplanning UI.
  • Streamlined rendering logic for data tables and other components to enhance user interaction.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes in this pull request primarily involve updates to various components of the health micro-UI. Key modifications include updating the stylesheet link in HTML files, enhancing SCSS styles for layout and responsiveness, and adjusting properties of button components across multiple JavaScript files. Additionally, several components have seen improvements in state management, rendering logic, and error handling, particularly in relation to user interactions and data presentation.

Changes

File	Change Summary
health/micro-ui/web/micro-ui-internals/example/public/index.html	Updated CSS file version from 0.1.45 to 0.1.46.
health/micro-ui/web/public/index.html	Updated CSS file version from 0.1.45 to 0.1.46.
health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss	Adjusted styles for .kpi-container, .kpi-card, and other classes for improved layout and responsiveness. Added loading animation styles.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssigneeChips.js	Simplified inline styles and adjusted button rendering formatting.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js	Adjusted margin and added size="medium" to button. Streamlined rendering logic.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js	Added size="medium" to button and updated visibility toggling logic for boundary items.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js	Replaced outer fragment with a div and added size="medium" to buttons.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js	Adjusted outer <div> margin and added size="medium" to button.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js	Modified column definitions and enhanced rendering logic for editable fields.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js	Added new button styles and refined boundary and hierarchy change logic.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js	Updated button styles and improved error handling in employee update process.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js	Added size property to button based on props.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js	Enhanced state management and rendering logic for improved user interaction and data clarity.

Poem

🐇 In the garden where changes bloom,
Styles and buttons find more room.
From 0.1.45 to 0.1.46,
A hop, a skip, a clever fix!
With layouts neat and errors few,
Our micro-UI shines anew! 🌼

---

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

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

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

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

CodeRabbit Commands (Invoked using PR comments)

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

Other keywords and placeholders

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

CodeRabbit Configuration File (.coderabbit.yaml)

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

Documentation and Community

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

[coderabbitai]

Actionable comments posted: 3

🧹 Outside diff range comments (17)

health/micro-ui/web/micro-ui-internals/example/public/index.html (2)

Line range hint 11-16: Add subresource integrity (SRI) hashes for CDN resources

The CSS files are loaded from unpkg.com without SRI hashes, which poses a security risk if the CDN is compromised. Consider adding integrity attributes to the link tags.

Example fix for one of the CSS imports:

-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.46/dist/index.css" />
+  <link 
+    rel="stylesheet" 
+    href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.46/dist/index.css"
+    integrity="sha384-[HASH]"
+    crossorigin="anonymous"
+  />

---

Line range hint 1-32: Optimize resource loading for better performance

Consider the following performance improvements:

1. Add preconnect hints for the unpkg.com domain
2. Consider consolidating multiple CSS files from the same CDN

Example implementation:

   <meta charset="utf-8" />
+  <link rel="preconnect" href="https://unpkg.com">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="icon" href="https://egov-dev-assets.s3.ap-south-1.amazonaws.com/browser-icon.png" />

health/micro-ui/web/public/index.html (1)

Line range hint 9-13: Consider enhancing security for CDN resources

While using fixed versions from unpkg.com is good for stability, consider these security improvements:

1. Add integrity hashes for CDN resources to prevent tampering
2. Consider consolidating CSS files from the same CDN to reduce network requests
3. Implement a fallback mechanism in case the CDN is unavailable

Example implementation with integrity hash:

-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.46/dist/index.css" />
+  <link 
+    rel="stylesheet" 
+    href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.46/dist/index.css"
+    integrity="sha384-[HASH]"
+    crossorigin="anonymous"
+    onerror="this.onerror=null;this.href='[FALLBACK_URL]';"
+  />

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

Line range hint 1-57: Consider these improvements for better maintainability.

1. Move inline button styles to a CSS class to improve maintainability and consistency.
2. Consider making the text truncation length (64 characters) configurable via props.
3. Add prop-types validation for better type safety.

Example refactor for the button styles:

+ // Add to your CSS file
+ .more-button {
+   height: 2rem;
+   min-height: 2rem;
+   padding: 0.5rem;
+   min-width: 0px;
+   justify-content: center;
+   align-items: center;
+ }
+ 
+ .more-button-text {
+   height: auto;
+   font-size: 0.875rem;
+   font-weight: 400;
+   width: 100%;
+   line-height: 16px;
+   color: #C84C0E;
+ }

  <Button
    label={`+${assignees.length - 1} ${t("ES_MORE")}`}
    onClick={() => setShowPopUp(true)}
    variation="link"
-   style={{
-     height: "2rem",
-     minHeight: "2rem",
-     padding: "0.5rem",
-     minWidth: "0px",
-     justifyContent: "center",
-     alignItems: "center",
-   }}
-   textStyles={{
-     height: "auto",
-     fontSize: "0.875rem",
-     fontWeight: "400",
-     width: "100%",
-     lineHeight: "16px",
-     color: "#C84C0E",
-   }}
+   className="more-button"
+   textClassName="more-button-text"
  />

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

Line range hint 29-35: Consider enhancing button accessibility.

The edit button could benefit from improved accessibility attributes.

 <Button
   label={t("WBH_EDIT")}
   variation="secondary"
   size="medium"
   icon={"Edit"}
   type="button"
+  aria-label={t("WBH_EDIT")}
+  role="button"
   onClick={(e) => {
     editHandler();
   }}
 />

---

Line range hint 54-71: Consider moving inline styles to CSS for better maintainability.

The "Show More" button contains extensive inline styles that could be moved to a CSS class.

Consider creating a CSS class in your stylesheet:

.show-more-button {
  height: 2rem;
  min-width: 4.188rem;
  min-height: 2rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
}

.show-more-button-text {
  height: auto;
  font-size: 0.875rem;
  font-weight: 400;
  width: 100%;
  line-height: 16px;
  color: #C84C0E;
}

Then simplify the button:

 <Button
   label={`+${arr?.length - (10)} ${t("ES_MORE")}`}
   onClick={() => openPopUp()}
   variation="link"
-  style={{
-    height: "2rem",
-    minWidth: "4.188rem",
-    minHeight: "2rem",
-    padding: "0.5rem",
-    justifyContent: "center",
-    alignItems: "center",
-  }}
-  textStyles={{
-    height: "auto",
-    fontSize: "0.875rem",
-    fontWeight: "400",
-    width: "100%",
-    lineHeight: "16px",
-    color: "#C84C0E",
-  }}
+  className="show-more-button"
+  textClassName="show-more-button-text"
 />

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

Line range hint 18-28: Consider enhancing error handling and cleanup

The useEffect hook could benefit from:

1. Error handling for failed data loading scenarios
2. Cleanup function to prevent memory leaks

Consider updating the effect like this:

 useEffect(() => {
+    let isSubscribed = true;
     if (planConfigurations && planConfigurations.length > 0) {
         const tempDic = {};
         planConfigurations.forEach((ob) => {
             if (!tempDic[ob.category]) {
                 tempDic[ob.category] = [{ ...ob }];
             } else {
                 tempDic[ob.category].push({ ...ob });
             }
         });
-        setDictionary(tempDic);
+        if (isSubscribed) {
+            setDictionary(tempDic);
+        }
     }
+    return () => {
+        isSubscribed = false;
+    };
 }, [planConfigurations, customProps]);

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

Line range hint 11-19: Remove commented debug code

Consider removing the commented-out console.log and object structure as they don't provide value in production code.

-    // console.log("totalfiles", uploadedFiles);
-    // {
-    //     "filestoreId": "695334cb-5813-4892-a282-a46c075f0798",
-    //         "resourceId": "8650d05f-92dc-4410-b96b-29b39876f7c5",
-    //             "facilityname": "Population Template (19).xlsx",
-    //                 "type": "boundaryWithTarget",
-    //                     "inputFileType": "xlsx",
-    //                         "templateIdentifier": "Population"
-    // }

---

Line range hint 54-117: Consider reducing code duplication in download handlers

The downloadHandler logic is duplicated between the population and facilities sections. Consider extracting this into a reusable function.

+    const createDownloadHandler = (fileStoreId, fileName) => () => {
+        Digit.Utils.campaign.downloadExcelWithCustomName({
+            fileStoreId,
+            customName: String(fileName)
+        });
+    };

     // Then use it like:
     downloadHandler={createDownloadHandler(item?.filestoreId, fileName)}

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

Line range hint 1-109: Consider these code quality improvements

1. Extract "MIXED" as a constant
2. Simplify campaignAssumption object construction
3. Move orderedKeys outside component
4. Use Fragment with key prop instead of empty tags

+const DISTRIBUTION_STRATEGY = {
+  MIXED: "MIXED"
+};
+
+const ORDERED_KEYS = [
+  "selectedRegistrationProcess",
+  "selectedDistributionProcess",
+  "selectedRegistrationDistributionMode"
+];
+
 const AssumptionsList = ({ customProps, setupCompleted }) => {
     // ... existing code ...
-    if(campaign_dist!="MIXED"){
+    if(campaign_dist !== DISTRIBUTION_STRATEGY.MIXED){
     // ... existing code ...
     }
     
-    const orderedKeys = ["selectedRegistrationProcess", "selectedDistributionProcess", "selectedRegistrationDistributionMode"];
     
     return (
         // ... existing code ...
-        {orderedKeys.map((key, index) => {
+        {ORDERED_KEYS.map((key, index) => {
             return (
-                <>
+                <Fragment key={key}>
                     <LabelFieldPair>
                         // ... existing code ...
                     </LabelFieldPair>
-                </>
+                </Fragment>
             );
         })}
     );
 };

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

Line range hint 19-186: Remove commented-out code block

The large commented-out selectedData array should be removed as it appears to be test data that's no longer needed. This will improve code maintainability and readability.

---

Line range hint 1-449: Consider component decomposition for better maintainability

The component has grown complex with multiple responsibilities:

• Boundary hierarchy management
• Status management
• View more/less functionality
• Complex conditional rendering

Consider breaking it down into smaller, more focused components:

1. BoundaryHierarchyManager - for hierarchy and status management
2. BoundaryList - for rendering the boundary items
3. ViewMoreToggle - for handling view more/less functionality

This would improve:

• Code maintainability
• Testing capabilities
• Reusability
• Performance optimization opportunities

Would you like me to help create a detailed plan for this refactoring?

---

Line range hint 341-394: Simplify conditional rendering logic

The nested conditional rendering with multiple checks could be simplified. Consider extracting the rendering logic into separate methods or components, and using early returns to reduce nesting.

Example approach:

const renderBoundaryItem = (item1, idx) => {
  if (!Array.isArray(parents?.[item1])) return null;
  
  const shouldRender = !boundaryStatus?.[ind + 2] || 
                      (boundaryStatus?.[ind + 2] && (idx === 0 || idx === 1));
  
  if (!shouldRender) return null;
  
  return (
    <SubBoundaryView 
      style={{ gap: "1.5rem", marginBottom: "0px" }}
      key={`${item1}_${idx}`}
      title={item1}
      arr={parents?.[item1]}
    />
  );
};

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

Line range hint 273-279: Consider adding debounce to search function

The removal of length validation might lead to excessive API calls. Consider implementing debounce to optimize performance.

 const handleSearch = (query) => {
-  // if (query?.length >= 2) {
   setSearchQuery(query);
-  // } else {
-  // setSearchQuery(null);
-  // }
-  // Handle search logic, such as filtering or API calls
 };
+const debouncedHandleSearch = Digit.Utils.debounce((query) => {
+  setSearchQuery(query);
+}, 300);

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

Line range hint 432-442: Consider improving the phone number sorting implementation

The current implementation might not handle international phone number formats correctly. Consider using a more robust phone number parsing approach.

 sortFunction: (rowA, rowB) => {
-  const numberA = parseInt(rowA.number, 10);
-  const numberB = parseInt(rowB.number, 10);
-  if (isNaN(numberA)) return 1; // Treat invalid numbers as larger
-  if (isNaN(numberB)) return -1;
-
-  if (numberA < numberB) return -1;
-  if (numberA > numberB) return 1;
+  // Handle cases where either number is NA
+  if (!rowA.number || rowA.number === t("NA")) return 1;
+  if (!rowB.number || rowB.number === t("NA")) return -1;
+  
+  // Remove any non-numeric characters and compare
+  const cleanNumberA = rowA.number.replace(/\D/g, '');
+  const cleanNumberB = rowB.number.replace(/\D/g, '');
+  return cleanNumberA.localeCompare(cleanNumberB);
   return 0;
 }

---

Line range hint 365-392: Enhance error handling in employee assignment

While the error handling is implemented, it could be more specific to help users better understand and resolve issues.

 planEmployeeCreate(payload, {
   onSuccess: (data) => {
     queryClient.invalidateQueries("PLAN_SEARCH_EMPLOYEE_WITH_TAGGING");
     refetchHrms();
     setIsLoading(false);
     setShowToast({ key: "success", label: t("ASSIGNED_SUCCESSFULLY") });
   },
   onError: (error, variables) => {
     setIsLoading(false);
-    setShowToast({ key: "error", label: error?.message ? error.message : t("FAILED_TO_UPDATE_RESOURCE") });
+    const errorMessage = error?.response?.data?.Errors?.[0]?.message 
+      || error?.message 
+      || t("FAILED_TO_UPDATE_RESOURCE");
+    setShowToast({ 
+      key: "error", 
+      label: t(errorMessage),
+      transitionTime: 5000 
+    });
   },
 });

---

Line range hint 577-583: Add cleanup for toast timeouts to prevent memory leaks

The current implementation should clean up the timeout when the component unmounts or when the toast state changes.

 useEffect(() => {
   if (showToast) {
-    setTimeout(closeToast, 5000);
+    const timeoutId = setTimeout(closeToast, 5000);
+    return () => clearTimeout(timeoutId);
   }
 }, [showToast]);

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE

📥 Commits

Reviewing files that changed from the base of the PR and between 3621550 and 997e71c.

⛔ 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 (13)

• health/micro-ui/web/micro-ui-internals/example/public/index.html (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssigneeChips.js (2 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js (2 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js (4 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js (2 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js (0 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/RoleTableComposer.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js (1 hunks)
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js (0 hunks)
• health/micro-ui/web/public/index.html (1 hunks)

💤 Files with no reviewable changes (2)

• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/PopInboxTable.js
• health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/PlanInbox.js

🧰 Additional context used

📓 Path-based instructions (8)

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

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

Pattern **/*.js: check

📓 Learnings (1)

health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss (1)

Learnt from: siddhant-nawale-egov
PR: egovernments/DIGIT-Frontend#876
File: micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss:1940-2392
Timestamp: 2024-11-10T20:01:49.000Z
Learning: Classes related to interactive elements in the microplan preview section are mostly passed to Higher Order Components (HOCs), and ARIA attributes for non-HOC elements will be managed directly by adding them where necessary.

🔇 Additional comments (16)

health/micro-ui/web/micro-ui-internals/example/public/index.html (1)

15-15: Verify the changes in version 0.1.46

The CSS version bump from 0.1.45 to 0.1.46 needs verification to ensure it addresses the audit issues mentioned in the PR title.

health/micro-ui/web/public/index.html (1)

13-13: LGTM! Verify the changelog for version 0.1.46

The CSS version update appears to be related to fixing audit issues.

Let's verify the changes in this version:

✅ Verification successful

Let me try another approach to verify the version update by checking the repository for any changelog or commit history related to this package.

---

Let's check the content of the changelog files and package.json we found to understand the version update.

---

Let's check for any recent commits or pull requests that might explain the version bump to 0.1.46, since the changelog isn't up to date.

---

Let's check the specific PR content since we found relevant audit-related PRs.

---

Based on all the gathered information, I can now provide the final response:

Version update is part of UI/UX audit fixes

The version bump from 0.1.45 to 0.1.46 is part of PR #1758 "fixed assumption audit fixes" which includes:

• CSS improvements for better spacing and alignment
• Enhanced responsiveness and layout consistency
• Updates to microplanning and formula config styles
• Loading animation improvements

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check the package details and recent versions
# Note: This will help understand what changes were included in 0.1.46

# Get package information from npm
curl -s https://registry.npmjs.org/@egovernments/digit-ui-health-css | jq '.versions["0.1.46"].description, .versions["0.1.46"].time'

# Check for recent versions and their publish dates
curl -s https://registry.npmjs.org/@egovernments/digit-ui-health-css | jq '.time | with_entries(select(.key|match("0.1.4[5-9]")))' 

Length of output: 321

---

Script:

#!/bin/bash
# Search for changelog files or documentation about this package
fd -t f -e md -e txt changelog -i
fd -t f -e md -e txt changes -i

# Search for any references to this package version in the codebase
rg -i "digit-ui-health-css.*0\.1\.4[56]" --type md --type txt

# Look for package.json files that might reference this package
fd package.json --exec grep -l "digit-ui-health-css" {}

Length of output: 356

---

Script:

#!/bin/bash
# Check the changelog files
echo "=== Web Changelog ==="
cat health/micro-ui/web/CHANGELOG.md

echo -e "\n=== CSS Package Changelog ==="
cat health/micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md

echo -e "\n=== Package.json ==="
cat health/micro-ui/web/micro-ui-internals/packages/css/package.json

Length of output: 2264

---

Script:

#!/bin/bash
# Look for recent commits related to the CSS package
git log --since="2024-11-01" --grep="css\|audit" --oneline health/micro-ui/web/micro-ui-internals/packages/css/

# Check for any dependency updates in package.json
git log --since="2024-11-01" -p health/micro-ui/web/micro-ui-internals/packages/css/package.json

# Look for recent PRs mentioning audit fixes
gh pr list --search "audit css" --state merged --limit 5

Length of output: 461

---

Script:

#!/bin/bash
# Check the content of the most relevant PR
gh pr view 1758 --json title,body,files

# Also check the specific PR that might have introduced this version bump
git log -p --since="2024-11-01" health/micro-ui/web/public/index.html

Length of output: 1665

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

11-11: LGTM! Style simplification looks good.

The simplified style declaration maintains the intended layout while removing redundant properties.

---

28-28: Skip reviewing this formatting change.

This is a minor formatting change that doesn't affect functionality.

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

29-29: LGTM! Button size property addition is consistent with audit fixes.

The addition of size="medium" aligns with the UI consistency improvements across components.

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

39-39: LGTM: Margin adjustment improves UI density

The reduction in bottom margin helps in better space utilization while maintaining adequate visual separation.

---

55-55: LGTM: Button size standardization improves UI consistency

Adding size="medium" aligns with the application-wide button standardization effort, improving overall UI consistency.

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

24-24: LGTM: Appropriate use of margin for better spacing

The addition of a wrapper div with consistent margin improves the component's visual spacing and layout.

---

88-88: LGTM: Consistent button styling

The size="medium" prop matches the previous button, maintaining UI consistency throughout the component.

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

44-44: Verify spacing consistency across microplan components

The margin reduction might affect the visual hierarchy. Let's verify if this spacing is consistent with other components.

✅ Verification successful

Margin adjustment is consistent with design patterns

The margin change from 2.5rem to 1.5rem aligns with the established spacing patterns in the microplan module. The codebase shows:

• Cards with content sections consistently use 1.5rem bottom margin (e.g., in ActivityCard.js, DataMgmtComponent.js, FormulaConfigScreen.js)
• 2.5rem margin is primarily used for larger container blocks and wrapper components
• 1rem margin for headers and smaller elements
• 0rem for tight layouts and label-field pairs

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for similar margin patterns in other microplan components
rg -A 1 'marginBottom.*rem' health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/

Length of output: 12403

---

75-75: LGTM! Button size standardization is consistent

The addition of size="medium" aligns with similar updates across other components, improving UI consistency.

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

324-324: LGTM: Button size property addition

The addition of size="medium" property to the Button component improves UI consistency across the application.

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

260-262: LGTM: Button styling standardization

The button styling changes improve UI consistency by standardizing the size prop and ensuring proper width alignment.

---

Line range hint 89-102: LGTM: Improved error handling with user feedback

The error handling implementation properly manages state and provides clear feedback to users through toast notifications for both success and error cases.

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

449-450: LGTM! Button styling improvements enhance UI consistency

The addition of width and size properties aligns with the PR's audit fixes and maintains consistency with similar button components across the application.

health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss (1)

2622-2622: 🛠️ Refactor suggestion

Ensure text remains accessible when preventing wrapping.

While white-space: nowrap maintains clean aesthetics, it could cause accessibility issues if the text becomes too long and gets cut off, especially on mobile devices.

Consider adding text truncation with ellipsis for better handling of long text:

.kpi-card p {
  margin: 0;
  @extend .typography.heading-m;
  color: theme(digitv2.lightTheme.text-secondary);
- white-space: nowrap;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100%;
}