Rolebasedlanding updated #1577
Rolebasedlanding updated #1577
Conversation
📝 WalkthroughWalkthroughThe changes in this pull request primarily focus on the 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: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
📒 Files selected for processing (1)
- micro-ui/web/micro-ui-internals/packages/modules/core/src/components/RoleBasedEmployeeHome.js (5 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
micro-ui/web/micro-ui-internals/packages/modules/core/src/components/RoleBasedEmployeeHome.js (1)
Pattern
**/*.js: check
🪛 Biome
micro-ui/web/micro-ui-internals/packages/modules/core/src/components/RoleBasedEmployeeHome.js
[error] 229-229: 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] 188-188: 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)
| const MODULE_CONFIG = { | ||
| PGR: { | ||
| howItWorksLink: "HOW_IT_WORKS_PGR", | ||
| userManualLink: "PGR_INFO_LINK", | ||
| }, | ||
| HRMS: { | ||
| howItWorksLink: "HOW_IT_WORKS_HRMS", | ||
| userManualLink: "HRMS_INFO_LINK", | ||
| }, | ||
| // Add more modules as needed here | ||
| }; | ||
|
|
There was a problem hiding this comment.
Remove the unused MODULE_CONFIG constant
The MODULE_CONFIG constant declared here is not being used anywhere in the code. Removing unused variables helps keep the codebase clean and maintainable.
Apply this diff to remove the unused constant:
-const MODULE_CONFIG = {
- PGR: {
- howItWorksLink: "HOW_IT_WORKS_PGR",
- userManualLink: "PGR_INFO_LINK",
- },
- HRMS: {
- howItWorksLink: "HOW_IT_WORKS_HRMS",
- userManualLink: "HRMS_INFO_LINK",
- },
- // Add more modules as needed here
-};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const MODULE_CONFIG = { | |
| PGR: { | |
| howItWorksLink: "HOW_IT_WORKS_PGR", | |
| userManualLink: "PGR_INFO_LINK", | |
| }, | |
| HRMS: { | |
| howItWorksLink: "HOW_IT_WORKS_HRMS", | |
| userManualLink: "HRMS_INFO_LINK", | |
| }, | |
| // Add more modules as needed here | |
| }; |
| ] | ||
| : null, | ||
| }; | ||
|
|
There was a problem hiding this comment.
Include a key prop in the mapped component
When rendering a list of components using map, each root element should have a unique key prop.
Apply this diff to add the key prop to LandingPageCard:
- return <LandingPageCard buttonSize={"medium"} {...propsForModuleCard} />;
+ return <LandingPageCard key={current} buttonSize={"medium"} {...propsForModuleCard} />;Committable suggestion was skipped due to low confidence.
| <div>{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>, | ||
| userManual && ( | ||
| <Button | ||
| variation="teritiary" | ||
| label={userManual?.label} | ||
| icon={userManual?.icon} | ||
| type="button" | ||
| size={"medium"} | ||
| onClick={() => window.open(userManual?.link, "_blank")} | ||
| style={{ padding: "0px" }} | ||
| /> | ||
| ), |
There was a problem hiding this comment.
Add key props to elements in arrays
When rendering arrays of React elements, each element should have a unique key prop to help React identify which items have changed, are added, or are removed.
Apply this diff to add key props to the elements in centreChildren:
centreChildren: [
- <div>{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>,
+ <div key="module-description">{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>,
userManual && (
+ <Button
+ key="user-manual-button"
variation="teritiary"
label={userManual?.label}
icon={userManual?.icon}
type="button"
size={"medium"}
onClick={() => window.open(userManual?.link, "_blank")}
style={{ padding: "0px" }}
- />
+ />,
),
],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div>{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>, | |
| userManual && ( | |
| <Button | |
| variation="teritiary" | |
| label={userManual?.label} | |
| icon={userManual?.icon} | |
| type="button" | |
| size={"medium"} | |
| onClick={() => window.open(userManual?.link, "_blank")} | |
| style={{ padding: "0px" }} | |
| /> | |
| ), | |
| <div key="module-description">{t(Digit.Utils.locale.getTransformedLocale(`MODULE_CARD_DESC_${current}`))}</div>, | |
| userManual && ( | |
| <Button | |
| key="user-manual-button" | |
| variation="teritiary" | |
| label={userManual?.label} | |
| icon={userManual?.icon} | |
| type="button" | |
| size={"medium"} | |
| onClick={() => window.open(userManual?.link, "_blank")} | |
| style={{ padding: "0px" }} | |
| />, | |
| ), |
🧰 Tools
🪛 Biome
[error] 188-188: 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)
| // Function to get links by type from the module configuration | ||
| const getLinkByType = (moduleData, type) => { | ||
| const moduleConfig = moduleConfigData.find((config) => config.moduleName === moduleData.module); | ||
| if (!moduleConfig) return null; | ||
|
|
||
| const linkKey = moduleConfig[type]; | ||
| return moduleData?.links?.find((item) => item?.displayName === linkKey); | ||
| }; | ||
|
|
||
| // Function to filter links dynamically based on module config | ||
| const getFilteredLinks = (moduleData) => { | ||
| const moduleConfig = moduleConfigData.find((config) => config.moduleName === moduleData.module); | ||
| return moduleData.links?.filter((item) => { | ||
| const displayName = item.displayName; | ||
| const isNotConfigureMaster = displayName !== "Configure_master"; | ||
| const isNotHowItWorks = displayName !== moduleConfig?.howItWorksLink; | ||
| const isNotUserManual = displayName !== moduleConfig?.userManualLink; | ||
|
|
||
| return isNotConfigureMaster && isNotHowItWorks && isNotUserManual; | ||
| }); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Ensure moduleConfigData is defined before usage
In the functions getLinkByType and getFilteredLinks, moduleConfigData is used without checking if it's defined. If moduleConfigData is undefined (e.g., before the data is loaded), this could lead to a runtime error.
Consider defaulting moduleConfigData to an empty array if it's undefined:
+ const safeModuleConfigData = moduleConfigData || [];
// Function to get links by type from the module configuration
const getLinkByType = (moduleData, type) => {
- const moduleConfig = moduleConfigData.find((config) => config.moduleName === moduleData.module);
+ const moduleConfig = safeModuleConfigData.find((config) => config.moduleName === moduleData.module);
if (!moduleConfig) return null;
const linkKey = moduleConfig[type];
return moduleData?.links?.find((item) => item?.displayName === linkKey);
};
// Function to filter links dynamically based on module config
const getFilteredLinks = (moduleData) => {
- const moduleConfig = moduleConfigData.find((config) => config.moduleName === moduleData.module);
+ const moduleConfig = safeModuleConfigData.find((config) => config.moduleName === moduleData.module);
return moduleData.links?.filter((item) => {
const displayName = item.displayName;
const isNotConfigureMaster = displayName !== "Configure_master";
const isNotHowItWorks = displayName !== moduleConfig?.howItWorksLink;
const isNotUserManual = displayName !== moduleConfig?.userManualLink;
return isNotConfigureMaster && isNotHowItWorks && isNotUserManual;
});
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Function to get links by type from the module configuration | |
| const getLinkByType = (moduleData, type) => { | |
| const moduleConfig = moduleConfigData.find((config) => config.moduleName === moduleData.module); | |
| if (!moduleConfig) return null; | |
| const linkKey = moduleConfig[type]; | |
| return moduleData?.links?.find((item) => item?.displayName === linkKey); | |
| }; | |
| // Function to filter links dynamically based on module config | |
| const getFilteredLinks = (moduleData) => { | |
| const moduleConfig = moduleConfigData.find((config) => config.moduleName === moduleData.module); | |
| return moduleData.links?.filter((item) => { | |
| const displayName = item.displayName; | |
| const isNotConfigureMaster = displayName !== "Configure_master"; | |
| const isNotHowItWorks = displayName !== moduleConfig?.howItWorksLink; | |
| const isNotUserManual = displayName !== moduleConfig?.userManualLink; | |
| return isNotConfigureMaster && isNotHowItWorks && isNotUserManual; | |
| }); | |
| }; | |
| const safeModuleConfigData = moduleConfigData || []; | |
| // Function to get links by type from the module configuration | |
| const getLinkByType = (moduleData, type) => { | |
| const moduleConfig = safeModuleConfigData.find((config) => config.moduleName === moduleData.module); | |
| if (!moduleConfig) return null; | |
| const linkKey = moduleConfig[type]; | |
| return moduleData?.links?.find((item) => item?.displayName === linkKey); | |
| }; | |
| // Function to filter links dynamically based on module config | |
| const getFilteredLinks = (moduleData) => { | |
| const moduleConfig = safeModuleConfigData.find((config) => config.moduleName === moduleData.module); | |
| return moduleData.links?.filter((item) => { | |
| const displayName = item.displayName; | |
| const isNotConfigureMaster = displayName !== "Configure_master"; | |
| const isNotHowItWorks = displayName !== moduleConfig?.howItWorksLink; | |
| const isNotUserManual = displayName !== moduleConfig?.userManualLink; | |
| return isNotConfigureMaster && isNotHowItWorks && isNotUserManual; | |
| }); | |
| }; |
role based landing page decouple from modules
Summary by CodeRabbit
New Features
Bug Fixes