HLM-5342: Inbox Search Composer enhacement for MultiTab #219
Conversation
WalkthroughWalkthroughThe recent updates aim to enhance the user interface and functionality of the inbox and search components within a micro-UI. Changes include customizable tabs, pagination sizes, styling adjustments for visual coherence, and dynamic properties for improved user interaction, offering a flexible and user-friendly experience in managing inbox content. Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: CodeRabbit UI
Files selected for processing (7)
- micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss (1 hunks)
- micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/inbox.scss (1 hunks)
- micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SearchComponent.js (2 hunks)
- micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Table.js (2 hunks)
- micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposer.js (2 hunks)
- micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposerReducer.js (1 hunks)
- micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ResultsTable.js (4 hunks)
Additional comments: 7
micro-ui/web/micro-ui-internals/packages/css/src/components/inboxv2/inboxSearchComposer.scss (1)
- 102-109: The addition of the
.tabclass styling is well-implemented, providing clear visual differentiation for tabs within the Inbox Search Composer. The use ofbox-shadowon the.search-wrapperwithin the.tabclass enhances the UI's depth and focus. Ensure that the color and shadow values align with the project's design system for consistency.micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SearchComponent.js (1)
- 120-140: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [12-137]
The updates to
SearchComponentto includeshowTab,tabData,onTabChangeprops, and thecustomDefaultPaginationconstant are well-implemented. These changes enhance the component's flexibility and functionality within a MultiTab environment. Consider adding PropTypes or TypeScript interfaces to validate the new props and ensure they are used correctly throughout the application.+ import PropTypes from 'prop-types'; SearchComponent.propTypes = { showTab: PropTypes.bool, tabData: PropTypes.array, onTabChange: PropTypes.func, customDefaultPagination: PropTypes.object, };micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/ResultsTable.js (1)
- 92-98: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [79-126]
The introduction of
defaultValuesFromSessionto set default pagination values and the registration of "offset" and "limit" based onconfig.customDefaultPaginationare significant improvements for customizing pagination behavior. Additionally, thecustomPageSizesArrayprop adds flexibility in defining page sizes. Ensure that these configurations are documented and that default values are provided to maintain backward compatibility and prevent runtime errors.- const defaultValuesFromSession = config?.customDefaultPagination ? config?.customDefaultPagination : {limit:10,offset:0} + const defaultValuesFromSession = config && config.customDefaultPagination ? config.customDefaultPagination : {limit:10,offset:0}micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Table.js (1)
- 228-244: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [67-241]
The addition of the
customPageSizesArrayprop to customize pagination page sizes in theTablecomponent is a valuable enhancement for flexibility. Ensure that this prop is optional and has a default value to maintain backward compatibility. Also, consider adding prop validation forcustomPageSizesArrayto ensure it receives an array of numbers.+ Table.propTypes = { + customPageSizesArray: PropTypes.arrayOf(PropTypes.number), + }; + Table.defaultProps = { + customPageSizesArray: [10, 20, 30, 40, 50], + };micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/inbox.scss (1)
- 535-554: The styling updates in
inbox.scssfor.search-tabs-container,.search-tab-head, and.search-tab-head-selectedenhance the visual differentiation and interactivity of the search tabs. The use ofborder-radius,font-weight, andbackground-colorproperties aligns with modern UI design principles. Ensure that these styles are consistent with the overall design system of the project, particularly in terms of color and font size.micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/InboxSearchComposer.js (2)
- 19-19: The addition of
showTab,tabData, andonTabChangeparameters to enhance the MultiTab functionality is a good approach. Ensure their usage is optimized and does not introduce side effects or performance issues.- 29-33: The handling of
apiDetailsusinguseStateanduseEffectis appropriate for managing external configurations. However, consider verifying its impact on performance to ensure it does not cause unnecessary re-renders.
| export const initialInboxState = (config) => { | ||
| if (config?.sections?.searchResult?.uiConfig?.customDefaultPagination) { | ||
| return { | ||
| searchForm: {}, | ||
| filterForm: {}, | ||
| tableForm: { | ||
| ...config?.sections?.searchResult?.uiConfig?.customDefaultPagination, | ||
| }, | ||
| }; | ||
| } | ||
| return { | ||
| searchForm: {}, | ||
| filterForm: {}, | ||
| tableForm: { | ||
| limit: 10, | ||
| offset: 0, | ||
| } | ||
| }; | ||
| }, | ||
| }; |
There was a problem hiding this comment.
The modification to initialInboxState to accept a config parameter and conditionally set tableForm based on config?.sections?.searchResult?.uiConfig?.customDefaultPagination is a good approach for making the state initialization more dynamic and configurable. However, ensure that the config object structure is validated or has default values to avoid runtime errors due to undefined properties.
- if (config?.sections?.searchResult?.uiConfig?.customDefaultPagination) {
+ if (config && config.sections && config.sections.searchResult && config.sections.searchResult.uiConfig && config.sections.searchResult.uiConfig.customDefaultPagination) {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.
| export const initialInboxState = (config) => { | |
| if (config?.sections?.searchResult?.uiConfig?.customDefaultPagination) { | |
| return { | |
| searchForm: {}, | |
| filterForm: {}, | |
| tableForm: { | |
| ...config?.sections?.searchResult?.uiConfig?.customDefaultPagination, | |
| }, | |
| }; | |
| } | |
| return { | |
| searchForm: {}, | |
| filterForm: {}, | |
| tableForm: { | |
| limit: 10, | |
| offset: 0, | |
| } | |
| }; | |
| }, | |
| }; | |
| export const initialInboxState = (config) => { | |
| if (config && config.sections && config.sections.searchResult && config.sections.searchResult.uiConfig && config.sections.searchResult.uiConfig.customDefaultPagination) { | |
| return { | |
| searchForm: {}, | |
| filterForm: {}, | |
| tableForm: { | |
| ...config?.sections?.searchResult?.uiConfig?.customDefaultPagination, | |
| }, | |
| }; | |
| } | |
| return { | |
| searchForm: {}, | |
| filterForm: {}, | |
| tableForm: { | |
| limit: 10, | |
| offset: 0, | |
| }, | |
| }; |
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to path filters (1)
micro-ui/web/micro-ui-internals/packages/react-components/package.jsonis excluded by:!**/*.json
Files selected for processing (1)
- micro-ui/web/micro-ui-internals/packages/react-components/README.md (1 hunks)
Additional comments: 2
micro-ui/web/micro-ui-internals/packages/react-components/README.md (2)
- 87-131: The instructions for using the
InboxSearchComposercomponent to manage multiple tabs are clear and well-detailed. However, there are a few minor suggestions for improvement:
- Ensure consistent capitalization for
ShowTabin the instruction text to match the code snippet (showTab).- Consider clarifying the term "Config array" to specify where this configuration should be defined or how it's used within the application context.
- In the code snippets, ensure consistency in commenting style and clarity. For example, "This state will by default take the first object from the array config" could be rephrased for better understanding.
- Typographical error in "updaing" should be corrected to "updating" for clarity in the comments.
These minor adjustments will enhance the readability and accuracy of the documentation.
- 83-139: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [136-175]
The changelog is well-documented and clearly outlines the new features and fixes introduced in this release. It's a good practice to maintain such detailed records for users and developers to track changes over time.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 3
Configuration used: CodeRabbit UI
Files selected for processing (1)
- micro-ui/web/micro-ui-internals/packages/react-components/README.md (1 hunks)
Additional comments: 1
micro-ui/web/micro-ui-internals/packages/react-components/README.md (1)
- 83-143: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [140-168]
The changelog is well-documented and provides a clear history of the changes. No issues found here.
| /> | ||
| </React.Fragment> | ||
| ``` | ||
|
|
||
|
|
||
| To use the InboxSearchComposer component for managing multiple tabs, follow these steps: | ||
| 1. Set `ShowTab: true` in the Inboxconfig. | ||
| 2. In the Config array, include configuration objects for each tab. For example: | ||
| ```javascript | ||
| export const inboxconfig = { | ||
| tenantId: "pb", | ||
| moduleName: "inboxconfigUiConfig", | ||
| showTab: true, | ||
| inboxconfig: [ | ||
| { | ||
| ... | ||
| }, | ||
| { | ||
| ... | ||
| } | ||
| ] | ||
| ``` | ||
| 3. Implement custom limit offset by adding customDefaultPagination under uiConfig in the searchResult: | ||
| ```javascript | ||
| customDefaultPagination: { | ||
| limit: 5, | ||
| offset: 0, | ||
| }, | ||
| ``` | ||
| 4. For custom table sizes, add an array of page sizes in customPageSizesArray under uiConfig in the searchResult: | ||
| ```javascript | ||
| customPageSizesArray: [5, 10, 15, 20], | ||
| ``` | ||
| 5. In the Inbox Screen, initialize the following states: | ||
| This state will by default take first object from array config | ||
| ```javascript | ||
| const [config, setConfig] = useState(myCampaignConfig?.myCampaignConfig?.[0]); | ||
| ``` | ||
| TabData state used to fetch which tab is active | ||
| ```javascript | ||
| const [tabData, setTabData] = useState(myCampaignConfig?.myCampaignConfig?.map((i, n) => ({ key: n, label: i.label, active: n === 0 ? true : false }))); | ||
| ``` | ||
| Add function to perform when tab changes. Here we are setting the respective tab active and updaing its config | ||
| ```javascript | ||
| const onTabChange = (n) => { | ||
| setTabData((prev) => prev.map((i, c) => ({ ...i, active: c === n ? true : false }))); | ||
| setConfig(myCampaignConfig?.myCampaignConfig?.[n]); | ||
| }; | ||
| ``` | ||
| 6 At last pass all these in InboxSearchComposer props. | ||
|
|
||
| ```jsx | ||
| <InboxSearchComposer configs={config} showTab={true} tabData={tabData} onTabChange={onTabChange}></InboxSearchComposer> | ||
| ``` | ||
|
|
||
| ### Changelog | ||
|
|
||
| ```bash | ||
| 1.8.1-beta.6 Added feature for Multi Tab in InboxSearchComposer | ||
| 1.8.1-beta.5 Added without labelfieldpair config for removing default card | ||
| 1.8.1-beta.4 Added Previous button in From Composer | ||
| 1.8.1-beta.3 Added XlsPreview component to preview Xls file. |
There was a problem hiding this comment.
📝 NOTE
This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [5-5]
The sentence "digit-ui-react-components" should start with an uppercase letter for consistency with the rest of the document.
- # digit-ui-react-components
+ # Digit-UI-React-Components📝 NOTE
This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [21-21]
Consider adding a comma after "DIGIT-UI's" for grammatical correctness.
- This Package is more specific to DIGIT-UI's can be used across mission's
+ This Package is more specific to DIGIT-UI's, can be used across mission's| To use the InboxSearchComposer component for managing multiple tabs, follow these steps: | ||
| 1. Set `ShowTab: true` in the Inboxconfig. | ||
| 2. In the Config array, include configuration objects for each tab. For example: | ||
| ```javascript | ||
| export const inboxconfig = { | ||
| tenantId: "pb", | ||
| moduleName: "inboxconfigUiConfig", | ||
| showTab: true, | ||
| inboxconfig: [ | ||
| { | ||
| ... | ||
| }, | ||
| { | ||
| ... | ||
| } | ||
| ] | ||
| ``` | ||
| 3. Implement custom limit offset by adding customDefaultPagination under uiConfig in the searchResult: | ||
| ```javascript | ||
| customDefaultPagination: { | ||
| limit: 5, | ||
| offset: 0, | ||
| }, | ||
| ``` | ||
| 4. For custom table sizes, add an array of page sizes in customPageSizesArray under uiConfig in the searchResult: | ||
| ```javascript | ||
| customPageSizesArray: [5, 10, 15, 20], | ||
| ``` | ||
| 5. In the Inbox Screen, initialize the following states: | ||
| This state will by default take first object from array config | ||
| ```javascript | ||
| const [config, setConfig] = useState(myCampaignConfig?.myCampaignConfig?.[0]); | ||
| ``` | ||
| TabData state used to fetch which tab is active | ||
| ```javascript | ||
| const [tabData, setTabData] = useState(myCampaignConfig?.myCampaignConfig?.map((i, n) => ({ key: n, label: i.label, active: n === 0 ? true : false }))); | ||
| ``` | ||
| Add function to perform when tab changes. Here we are setting the respective tab active and updaing its config | ||
| ```javascript | ||
| const onTabChange = (n) => { | ||
| setTabData((prev) => prev.map((i, c) => ({ ...i, active: c === n ? true : false }))); | ||
| setConfig(myCampaignConfig?.myCampaignConfig?.[n]); | ||
| }; | ||
| ``` | ||
| 6 At last pass all these in InboxSearchComposer props. | ||
|
|
||
| ```jsx | ||
| <InboxSearchComposer configs={config} showTab={true} tabData={tabData} onTabChange={onTabChange}></InboxSearchComposer> | ||
| ``` |
There was a problem hiding this comment.
The documentation for using the InboxSearchComposer component is clear and well-structured. However, there are a few minor typographical and grammatical issues to address:
- "ShowTab" should be "showTab" for consistency with JavaScript property naming conventions.
- "Inboxconfig" should be "inboxConfig" to follow camelCase naming conventions.
- "updaing" should be corrected to "updating".
- Ensure that the code snippets are correctly formatted and indented for better readability.
- 1. Set `ShowTab: true` in the Inboxconfig.
+ 1. Set `showTab: true` in the inboxConfig.
...
- Add function to perform when tab changes. Here we are setting the respective tab active and updaing its config
+ Add function to perform when tab changes. Here we are setting the respective tab active and updating its configCommittable 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.
| To use the InboxSearchComposer component for managing multiple tabs, follow these steps: | |
| 1. Set `ShowTab: true` in the Inboxconfig. | |
| 2. In the Config array, include configuration objects for each tab. For example: | |
| ```javascript | |
| export const inboxconfig = { | |
| tenantId: "pb", | |
| moduleName: "inboxconfigUiConfig", | |
| showTab: true, | |
| inboxconfig: [ | |
| { | |
| ... | |
| }, | |
| { | |
| ... | |
| } | |
| ] | |
| ``` | |
| 3. Implement custom limit offset by adding customDefaultPagination under uiConfig in the searchResult: | |
| ```javascript | |
| customDefaultPagination: { | |
| limit: 5, | |
| offset: 0, | |
| }, | |
| ``` | |
| 4. For custom table sizes, add an array of page sizes in customPageSizesArray under uiConfig in the searchResult: | |
| ```javascript | |
| customPageSizesArray: [5, 10, 15, 20], | |
| ``` | |
| 5. In the Inbox Screen, initialize the following states: | |
| This state will by default take first object from array config | |
| ```javascript | |
| const [config, setConfig] = useState(myCampaignConfig?.myCampaignConfig?.[0]); | |
| ``` | |
| TabData state used to fetch which tab is active | |
| ```javascript | |
| const [tabData, setTabData] = useState(myCampaignConfig?.myCampaignConfig?.map((i, n) => ({ key: n, label: i.label, active: n === 0 ? true : false }))); | |
| ``` | |
| Add function to perform when tab changes. Here we are setting the respective tab active and updaing its config | |
| ```javascript | |
| const onTabChange = (n) => { | |
| setTabData((prev) => prev.map((i, c) => ({ ...i, active: c === n ? true : false }))); | |
| setConfig(myCampaignConfig?.myCampaignConfig?.[n]); | |
| }; | |
| ``` | |
| 6 At last pass all these in InboxSearchComposer props. | |
| ```jsx | |
| <InboxSearchComposer configs={config} showTab={true} tabData={tabData} onTabChange={onTabChange}></InboxSearchComposer> | |
| ``` | |
| To use the InboxSearchComposer component for managing multiple tabs, follow these steps: | |
| 1. Set `showTab: true` in the inboxConfig. | |
| 2. In the Config array, include configuration objects for each tab. For example: | |
| ```javascript | |
| export const inboxconfig = { | |
| tenantId: "pb", | |
| moduleName: "inboxconfigUiConfig", | |
| showTab: true, | |
| inboxconfig: [ | |
| { | |
| ... | |
| }, | |
| { | |
| ... | |
| } | |
| ] | |
| ``` | |
| 3. Implement custom limit offset by adding customDefaultPagination under uiConfig in the searchResult: | |
| ```javascript | |
| customDefaultPagination: { | |
| limit: 5, | |
| offset: 0, | |
| }, | |
| ``` | |
| 4. For custom table sizes, add an array of page sizes in customPageSizesArray under uiConfig in the searchResult: | |
| ```javascript | |
| customPageSizesArray: [5, 10, 15, 20], | |
| ``` | |
| 5. In the Inbox Screen, initialize the following states: | |
| This state will by default take first object from array config | |
| ```javascript | |
| const [config, setConfig] = useState(myCampaignConfig?.myCampaignConfig?.[0]); | |
| ``` | |
| TabData state used to fetch which tab is active | |
| ```javascript | |
| const [tabData, setTabData] = useState(myCampaignConfig?.myCampaignConfig?.map((i, n) => ({ key: n, label: i.label, active: n === 0 ? true : false }))); | |
| ``` | |
| Add function to perform when tab changes. Here we are setting the respective tab active and updating its config | |
| ```javascript | |
| const onTabChange = (n) => { | |
| setTabData((prev) => prev.map((i, c) => ({ ...i, active: c === n ? true : false }))); | |
| setConfig(myCampaignConfig?.myCampaignConfig?.[n]); | |
| }; | |
| ``` | |
| 6 At last pass all these in InboxSearchComposer props. | |
| ```jsx | |
| <InboxSearchComposer configs={config} showTab={true} tabData={tabData} onTabChange={onTabChange}></InboxSearchComposer> |
Summary by CodeRabbit