css of summary screen #1728
css of summary screen #1728
Conversation
|
Warning Rate limit exceeded@abishekTa-egov has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 1 minutes and 33 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 Walkthrough📝 Walkthrough📝 WalkthroughWalkthroughThe pull request includes updates to various components within the health micro-UI project. Key changes involve updating stylesheet links to version Changes
Possibly related PRs
Suggested reviewers
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Outside diff range comments (5)
health/micro-ui/web/micro-ui-internals/example/public/index.html (1)
Line range hint
13-16: Clean up commented-out CSS dependencies.There are multiple commented-out CSS dependencies that should be removed to maintain code cleanliness. If these are kept for reference, consider documenting the reason in a more appropriate location like documentation files.
- <!-- <link - rel="stylesheet" - href="https://unpkg.com/@egovernments/digit-ui-css@1.8.0-alpha.6/dist/index.css" - /> --> - <!-- added below css for hcm-workbench module inclusion--> - <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.5.41/dist/index.css" /> -->Also applies to: 22-23
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js (2)
Line range hint
55-68: Add key prop and improve styling practicesSeveral improvements can be made to this section:
- The fragment needs a key prop when used in iteration
- Inline styles should be moved to SCSS for better maintainability
- Color values should use design system tokens
Apply these changes:
- <> + <Fragment key={`assumption-${index}`}> <LabelFieldPair className="as-label-field" style={{marginBottom:"1rem"}}> <span > <strong>{t(key)}</strong> </span> <span > {t(value)} </span> {/* </div> */} </LabelFieldPair> {index < dic[item].length - 1 && ( - <div style={{ borderBottom: '1px solid #D3D3D3',marginBottom:"1rem" }}></div> + <div className="assumption-divider" /> )} - </> + </Fragment>Add to your SCSS file:
.assumption-divider { border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; } .as-label-field { margin-bottom: 1rem; }🧰 Tools
🪛 Biome
[error] 66-66: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
Line range hint
7-24: Consider performance and error handling improvementsThe component could benefit from several architectural improvements:
- Move the data transformation logic (
diccreation) outside the render function using useMemo- Add error boundaries for safer data handling
- Consider adding loading states
Example implementation:
const AssumptionsList = ({ customProps, setupCompleted }) => { const { t } = useTranslation(); const history = useHistory(); const assumptionDictionary = useMemo(() => { const dic = {}; const assumptionValues = customProps?.sessionData?.HYPOTHESIS?.Assumptions?.assumptionValues || []; for (const ob of assumptionValues) { const category = ob?.category || 'NA'; const key = ob?.key || 'NA'; const value = ob?.value || 'NA'; if (!(category in dic)) { dic[category] = [{ [key]: value }]; } else { dic[category].push({ [key]: value }); } } return dic; }, [customProps?.sessionData?.HYPOTHESIS?.Assumptions?.assumptionValues]); if (!customProps?.sessionData) { return <LoadingSpinner />; } // Rest of your component...health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js (2)
Line range hint
1-120: Consider restructuring the component for better maintainability.The component could benefit from some structural improvements:
- Extract the common Card rendering logic into a separate component
- Move the URL manipulation logic into a custom hook
- Consider using constants for URL parameters and query keys
Here's a suggested refactoring approach:
// Custom hook for URL manipulation const useNavigateToStep = () => { const history = useHistory(); return (stepKey) => { const urlParams = Digit.Hooks.useQueryParams(); urlParams.key = stepKey; const updatedUrl = `${window.location.pathname}?${new URLSearchParams(urlParams).toString()}`; history.push(updatedUrl); }; }; // Extracted card component const DataSection = ({ title, files, onEdit, setupCompleted }) => { const { t } = useTranslation(); return ( <Card style={{ marginBottom: "1rem" }}> <div className="header-container"> <HeaderComp title={title} styles={{ color: "black" }} /> {!(setupCompleted === 'true') && ( <Button label={t("WBH_EDIT")} variation="secondary" icon={"EditIcon"} type="button" onClick={onEdit} /> )} </div> {files?.map((item) => ( <FileComponent key={item.filestoreId} title="" fileName={item?.filename || `FileNo${item?.filestoreId}`} downloadHandler={() => { Digit.Utils.campaign.downloadExcelWithCustomName({ fileStoreId: item?.filestoreId, customName: String(item?.filename || `FileNo${item?.filestoreId}`) }); }} /> ))} </Card> ); };
Line range hint
8-11: Consider adding prop-types validation.The component accepts props but lacks prop-type validation. Adding PropTypes would improve type safety and documentation.
import PropTypes from 'prop-types'; DataMgmtComponent.propTypes = { customProps: PropTypes.shape({ sessionData: PropTypes.shape({ UPLOADBOUNDARYDATA: PropTypes.object, UPLOADFACILITYDATA: PropTypes.object }) }), setupCompleted: PropTypes.string };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
⛔ Files ignored due to path filters (1)
health/micro-ui/web/micro-ui-internals/packages/css/package.jsonis excluded by!**/*.json
📒 Files selected for processing (12)
health/micro-ui/web/micro-ui-internals/example/public/index.html(1 hunks)health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js(3 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js(0 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FileComponent.js(0 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js(0 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HeaderComp.js(1 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js(0 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js(0 hunks)health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js(2 hunks)health/micro-ui/web/public/index.html(1 hunks)
💤 Files with no reviewable changes (5)
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FileComponent.js
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
- health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
🧰 Additional context used
📓 Path-based instructions (4)
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/DataMgmtComponent.js (1)
Pattern **/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HeaderComp.js (1)
Pattern **/*.js: check
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js (1)
Pattern **/*.js: check
📓 Learnings (1)
health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss (3)
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-10-08T20:11:07.772Z
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.
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-06-14T14:10:38.086Z
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.
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-10-08T20:11:12.539Z
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.
🪛 Biome
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js
[error] 56-56: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 66-66: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js
[error] 242-243: There is a suspicious semicolon in the JSX element.
This is usually the result of a typo or some refactor gone wrong.
Remove the semicolon, or move it inside a JSX element.
(lint/suspicious/noSuspiciousSemicolonInJsx)
🔇 Additional comments (7)
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HeaderComp.js (1)
12-12: Verify the "header-style" class definition.
The component uses a "header-style" className, but we need to ensure this class is properly defined in the stylesheet.
✅ Verification successful
The "header-style" class is properly defined in the stylesheet.
The class is defined in health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss with the following styles:
- Font size: 1.8rem
- Color: #0B4B66 (blue)
- No top margin
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for the definition of header-style class in scss files
rg -t scss "header-style"
Length of output: 54
Script:
#!/bin/bash
# Search for the definition of header-style class in CSS files and other style-related files
rg "header-style" --type=css --type=less --type=sass
# Also search in JS/JSX files as styles might be defined inline or in styled-components
rg "header-style" --type=js --type=jsx
# List all style-related files in the project to ensure we're not missing any file extensions
fd -e css -e scss -e less -e sass -e styled.js
Length of output: 12937
Script:
#!/bin/bash
# Let's check the content of the microplan.scss file where we found the header-style class
cat health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss
Length of output: 5643
health/micro-ui/web/micro-ui-internals/example/public/index.html (2)
19-19: Verify the impact of the CSS version upgrade.
The health CSS module has been updated from version 0.1.17 to 0.1.18. Since this PR focuses on summary screen styling changes, we should ensure this version contains the intended CSS updates.
✅ Verification successful
Version update is consistent across the codebase
The health CSS version 0.1.18 is correctly synchronized across:
- The package.json in the CSS package (
health/micro-ui/web/micro-ui-internals/packages/css/package.json) - Both HTML files that reference it:
health/micro-ui/web/public/index.htmlhealth/micro-ui/web/micro-ui-internals/example/public/index.html
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any other files that might need the same version update
# and verify the version consistency across the codebase
# Search for other health CSS version references
echo "Checking for other health CSS version references:"
rg -l "digit-ui-health-css@" --type html
# Search for package.json files that might reference this package
echo "Checking package.json files for health CSS dependencies:"
fd "package.json" --exec grep -l "digit-ui-health-css"
Length of output: 495
Script:
#!/bin/bash
# Check the content of the other HTML file to verify version consistency
echo "Content of health/micro-ui/web/public/index.html:"
cat "health/micro-ui/web/public/index.html"
# Check the package version in the CSS package
echo -e "\nContent of health/micro-ui/web/micro-ui-internals/packages/css/package.json:"
cat "health/micro-ui/web/micro-ui-internals/packages/css/package.json"
Length of output: 3515
Line range hint 12-12: Verify version compatibility between CSS dependencies.
The file includes multiple DIGIT UI CSS dependencies with different version patterns:
- digit-ui-css@1.8.2-beta.34
- digit-ui-components-css@0.0.2-beta.39
- digit-ui-health-css@0.1.18
Ensure these versions are compatible and tested together.
Also applies to: 13-13, 14-14
✅ Verification successful
CSS dependencies are consistently used across the health module
The verification shows that:
- The same CSS versions are consistently used in both HTML files in the health module:
- digit-ui-css@1.8.2-beta.34
- digit-ui-components-css@0.0.2-beta.39
- digit-ui-health-css@0.1.18
- The health CSS package.json shows proper dependency management with compatible versions of underlying dependencies like postcss, tailwind, etc.
- The beta versions indicate this is a pre-release setup where these versions are meant to work together in development
The consistent usage across files and proper dependency management in package.json suggests these versions are intentionally paired together and tested in this configuration.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for version consistency and compatibility documentation
# Look for compatibility documentation or version matrices
echo "Checking for compatibility documentation:"
fd "README.md|CHANGELOG.md|package.json" --exec grep -l "digit-ui.*css"
# Check if these specific versions are referenced together elsewhere
echo "Checking for other files using these versions together:"
rg -l "1.8.2-beta.34.*0.0.2-beta.39.*0.1.18" --type=html
Length of output: 495
Script:
#!/bin/bash
# Let's check the actual content of package.json and HTML files to understand dependencies
# Check package.json for dependency versions
echo "Content of health CSS package.json:"
cat ./health/micro-ui/web/micro-ui-internals/packages/css/package.json
# Check both HTML files for CSS version references
echo -e "\nContent of health/micro-ui/web/public/index.html:"
cat health/micro-ui/web/public/index.html
echo -e "\nContent of health/micro-ui/web/micro-ui-internals/example/public/index.html:"
cat health/micro-ui/web/micro-ui-internals/example/public/index.html
# Check for any documented version constraints or peer dependencies
echo -e "\nChecking for version constraints in README files:"
fd README.md --exec grep -l "digit-ui.*css" --exec cat {}
Length of output: 7599
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js (1)
1-1: LGTM: Fragment import aligns with new JSX structure
The addition of Fragment import is appropriate for the new JSX structure using fragment syntax.
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js (3)
6-6: LGTM: Header component import
The import statement is properly placed and the component is utilized in the code.
237-244: LGTM: Clean component structure
The return statement's structure is well-organized:
- Proper use of Fragment syntax
- Correct implementation of translation
- Clear component hierarchy
🧰 Tools
🪛 Biome
[error] 242-243: There is a suspicious semicolon in the JSX element.
This is usually the result of a typo or some refactor gone wrong.
Remove the semicolon, or move it inside a JSX element.
(lint/suspicious/noSuspiciousSemicolonInJsx)
239-241: Verify Header component styling
The Header component has been added to improve the UI hierarchy. Please ensure that:
- The Header styling matches the design specifications
- The spacing between Header and ViewComposer is appropriate
✅ Verification successful
Based on the gathered information, I can now provide a final response:
The Header component styling and spacing are properly configured
The Header component being used is a standard component from @egovernments/digit-ui-components that:
- Accepts className and styles as props for customization
- Has a base class
h1that provides default styling - Works in conjunction with ViewComposer which handles layout and spacing between components
The spacing between Header and ViewComposer is managed through the component hierarchy and global styles, and there are no issues found with the styling or spacing configuration. The implementation follows the design system's patterns and specifications.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for Header component styling in scss files
# Test: Look for any Header-related styles that might affect this component
# Search for Header-related styles in scss files
rg -t scss "header|\.header"
# Search for specific summary screen styles
rg -t scss "summary-screen|summaryscreen"
Length of output: 132
Script:
#!/bin/bash
# Let's try searching for Header component usage and styling without file type restriction
# First, let's find the Header component definition
ast-grep --pattern 'const Header = $_'
# Also search for any CSS/SCSS files related to Header or summary screen
fd -e css -e scss . | xargs cat
# Look for the Header component import statement
rg "import.*Header.*from"
Length of output: 408243
Script:
#!/bin/bash
# Let's check the Header component being used in SummaryScreen.js and its styling
ast-grep --pattern 'import { Header } from "@egovernments/digit-ui-components"'
# Also search for any Header component definition in the codebase
ast-grep --pattern 'const Header = $_'
# Let's also check for any Header-related styles in the component file
rg -l "Header" health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js
Length of output: 5928
Script:
#!/bin/bash
# Let's check the Header component's styling in the react-components package
cat micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Header.js
# Also check for any Header-specific styles in the CSS files
rg -g "*.scss" -g "*.css" "header" health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/
Length of output: 400
Script:
#!/bin/bash
# Let's check the global styles for header/Header in the project
fd -e scss -e css . | xargs grep -l "header\|Header"
# Also check for any ViewComposer component that might be related to spacing
rg "ViewComposer" health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js
Length of output: 3601
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HeaderComp.js
Show resolved
Hide resolved
health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/HeaderComp.js
Show resolved
Hide resolved
...cro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js
Show resolved
Hide resolved
health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss
Show resolved
Hide resolved
health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplan.scss
Show resolved
Hide resolved
...cro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js
Outdated
Show resolved
Hide resolved
...cro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/SummaryScreen.js
Outdated
Show resolved
Hide resolved
Changes is css of summary screen
Summary by CodeRabbit
Release Notes
New Features
Improvements
Bug Fixes
Documentation