Fix PayrollListPresentation type issues after cherry-pick #586
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add PayrollLanding component with RunPayroll and PayrollHistory tabs - Fix TypeScript interface to include resource key generic - Add comprehensive unit tests focused on component orchestration - Add translation support with Payroll.PayrollLanding namespace - Fix ESLint import order in PayrollHistory.stories.tsx - Fix failing test in PayrollHistoryPresentation with waitFor - Add demo story for PayrollLanding (uses presentation components directly) - Update PayrollLanding to use proper BaseComponentInterface typing
jeffredodd
commented
Sep 22, 2025
| <Flex flexDirection="column" alignItems="center" gap={24}> | ||
| <div className={styles.doneIcon}>✓</div> | ||
| <Text>{t('emptyState')}</Text> | ||
| <Flex flexDirection="column" gap={16}> |
There was a problem hiding this comment.
Wrapped this in the same flex layout I've been using in Payroll History for consistent spacing
jeffredodd
commented
Sep 22, 2025
| @@ -0,0 +1,18 @@ | |||
| import { I18nextProvider } from 'react-i18next' | |||
There was a problem hiding this comment.
Seemed like the best way to bring app i18n context to a story that had compound i18n dictionaries.
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a centralized Payroll Landing component that consolidates the Payroll History and Run Payroll flows into a tabbed navigation interface. It also fixes type safety issues in the PayrollListPresentation component where nullable date fields from the embedded API model were being passed to functions expecting non-null strings.
- Centralizes payroll flows into a new tabbed interface structure
- Resolves type errors by adding null checks before date parsing operations
- Updates component exports and entry points to use the new landing component
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/i18n/en/Payroll.PayrollList.json | Adds "title" translation for upcoming payroll section |
| src/i18n/en/Payroll.PayrollLanding.json | New translation file for tab labels and accessibility text |
| src/components/Payroll/index.ts | Exports the new PayrollLanding component |
| src/components/Payroll/RunPayrollFlow/RunPayrollFlow.tsx | Simplifies to use PayrollLanding instead of direct RunPayroll |
| src/components/Payroll/PayrollList/PayrollListPresentation.tsx | Fixes type safety with null checks for date parsing |
| src/components/Payroll/PayrollLanding/PayrollLanding.tsx | New tabbed interface component for payroll flows |
| src/components/Payroll/PayrollLanding/PayrollLanding.test.tsx | Comprehensive test coverage for the new component |
| src/components/Payroll/PayrollLanding/PayrollLanding.stories.tsx | Storybook implementation for design system integration |
| src/components/Payroll/PayrollHistory/PayrollHistoryPresentation.tsx | Minor layout alignment adjustment |
| src/components/Payroll/PayrollHistory/PayrollHistory.stories.tsx | Adds I18n wrapper for proper localization |
| .ladle/helpers/I18nWrapper.tsx | New helper component for storybook internationalization |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Introduces a Payroll Landing component that centralizes Payroll History and Run Payroll flows inside tabbed navigation.
Also resolves type errors in the
PayrollListPresentationcomponent.These errors occurred because the embedded API model now exposes nullable date fields, but
parseDateStringToLocalexpects string parameters.Changes
Screenshots