chore: 14277 studio pagination content #14278
Conversation
github-actions
bot
added
solution/studio/designer
wrt95
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #14278 +/- ##
=======================================
Coverage 95.65% 95.66%
=======================================
Files 1889 1891 +2
Lines 24550 24581 +31
Branches 2817 2822 +5
=======================================
+ Hits 23484 23515 +31
Misses 805 805
Partials 261 261 ☔ View full report in Codecov by Sentry. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
...tend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx
Outdated
Show resolved
Hide resolved
...tend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx
Outdated
Show resolved
Hide resolved
...libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx
Outdated
Show resolved
Hide resolved
...libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx
Outdated
Show resolved
Hide resolved
...libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx
Show resolved
Hide resolved
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-storybook". (The package "eslint-plugin-storybook" was not found when loaded as a Node module from the directory "/frontend/libs/studio-components".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-storybook" was referenced from the config file in "frontend/libs/studio-components/.eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📝 WalkthroughWalkthroughThe pull request introduces a new Changes
Possibly related PRs
Suggested labels
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: 2
🧹 Nitpick comments (10)
frontend/libs/studio-components/src/components/StudioPaginatedContent/types/StudioPaginatedNavigation.ts (1)
1-6: Consider adding error handling to navigation callbacksThe navigation callbacks
onNextandonPreviouscould benefit from error handling by returning a Promise or Result type. This would allow handling edge cases where navigation fails (e.g., due to unsaved changes).export type StudioPaginatedNavigation = { canGoNext?: boolean; canGoPrevious?: boolean; - onNext: () => void; - onPrevious: () => void; + onNext: () => Promise<void>; + onPrevious: () => Promise<void>; };frontend/libs/studio-components/src/components/StudioPaginatedContent/types/StudioPaginatedItem.ts (1)
3-6: Document default validation behaviorThe
validationRuleForNextButtonis optional with an implicit default oftrue(as seen in usePagination.ts). Consider adding JSDoc comments to document this default behavior for better developer experience.export type StudioPaginatedItem = { pageContent: ReactNode; + /** + * Optional validation rule for enabling the next button. + * @default true + */ validationRuleForNextButton?: boolean; };frontend/libs/studio-components/src/components/StudioPaginatedContent/hooks/usePagination.ts (1)
11-14: Optimize performance with useMemoConsider memoizing
validationRulesandpagesarrays to prevent unnecessary recalculations on re-renders.+import { useMemo } from 'react'; // ... - const validationRules: boolean[] = mapItemsToValidationRules(items); - const pages: ReactNode[] = mapItemsToPages(items); + const validationRules = useMemo(() => mapItemsToValidationRules(items), [items]); + const pages = useMemo(() => mapItemsToPages(items), [items]);frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx (2)
32-36: Consider adding argTypes for better story customization.Adding argTypes would allow users to experiment with different props in Storybook. Consider adding controls for:
- totalPages
- buttonTexts
- validationRules
38-72: Consider adding error handling for edge cases.While the implementation works correctly, consider handling these edge cases:
- Invalid input validation
- Empty input state
- Maximum input length
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx (1)
26-37: Consider adding more comprehensive rendering tests.While the basic tests are good, consider adding tests for:
- Error states
- Loading states
- Empty states
frontend/libs/studio-components/src/components/StudioPaginatedContent/hooks/usePagination.test.tsx (2)
1-20: Consider adding edge case tests.While the initial tests are good, consider adding tests for:
- Empty items array
- Single item array
- Maximum page limit
55-80: Consider adding error scenario tests.Add tests for error scenarios such as:
- Navigation with invalid page numbers
- Rapid navigation attempts
- Navigation during state updates
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.module.css (2)
1-17: Consider adding responsive design styles.The layout styles could benefit from responsive design considerations:
- Media queries for different screen sizes
- Flexible spacing using relative units
- Mobile-first approach
19-34: Use CSS variables consistently for colors.Replace hardcoded color value with a CSS variable for consistency:
- background: #e0e0e0; + background: var(--fds-semantic-surface-neutral-default);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.module.css(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/hooks/usePagination.test.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/hooks/usePagination.ts(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/index.ts(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/types/StudioPaginatedItem.ts(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/types/StudioPaginatedNavigation.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- frontend/libs/studio-components/src/components/StudioPaginatedContent/index.ts
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Typechecking and linting
- GitHub Check: Build environment and run e2e test
- GitHub Check: Testing
- GitHub Check: CodeQL
🔇 Additional comments (7)
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx (2)
45-62: Extract NavigationCircles to a separate fileConsider moving the NavigationCircles component to its own file for better code organization and maintainability. This aligns with the previous reviewer's suggestion to rename it to NavigationStepIndicator.
Additionally, enhance the accessibility by adding ARIA attributes for the progress indicator.
const NavigationCircles = ({ totalPages, currentPageNumber }: NavigationCirclesProps) => { return ( - <div className={classes.statusBarContainer}> + <div + className={classes.statusBarContainer} + role="progressbar" + aria-valuemin={0} + aria-valuemax={totalPages - 1} + aria-valuenow={currentPageNumber} + aria-label={`Page ${currentPageNumber + 1} of ${totalPages}`} + >
7-10: Move ButtonTexts type to StudioPaginatedNavigationAgree with the previous reviewer's suggestion to move ButtonTexts into StudioPaginatedNavigation type as it's closely related to navigation functionality.
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx (1)
1-28: LGTM! Well-structured story components.The child components are well-organized with proper type definitions and clear validation logic.
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx (3)
1-24: LGTM! Well-structured test setup.The test setup with mocks and default props is clean and comprehensive.
71-82: Update to userEvent for better interaction testing.As suggested in previous reviews, replace
fireEventwithuserEventfor more realistic user interaction testing.- fireEvent.click(screen.getByText('Previous')); + await userEvent.click(screen.getByText('Previous'));
93-95: LGTM! Well-implemented helper function.The render helper function is clean and properly typed.
frontend/libs/studio-components/src/components/StudioPaginatedContent/hooks/usePagination.test.tsx (1)
21-53: LGTM! Comprehensive validation rule testing.The tests thoroughly cover validation rules and state updates.
frontend/libs/studio-components/src/components/StudioPaginatedContent/hooks/usePagination.ts
Show resolved
Hide resolved
...tend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx (2)
45-65: Consider renaming and optimizing NavigationStepIndicator
- The component name could be more descriptive, e.g.,
NavigationStepIndicator.- Consider memoizing the component to prevent unnecessary re-renders when parent updates.
-const NavigationStepIndicator = ({ +const NavigationStepIndicator = React.memo(({ totalPages, currentPageNumber, -}: NavigationCirclesProps): React.ReactElement => { +}: NavigationCirclesProps): React.ReactElement => { return ( <div className={classes.statusBarContainer}> {getArrayFromLength(totalPages).map((_, index) => ( <div key={index} role='status' className={`${classes.statusBarPiece} ${index <= currentPageNumber ? classes.active : ''}`} /> ))} </div> ); -}; +});
67-68: Consider moving utility function closer to usageSince
getArrayFromLengthis only used withinNavigationStepIndicator, consider moving it inside the component's scope for better code organization.frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx (2)
13-28: Consider more descriptive names for story componentsThe current names (
Children1,Children2, etc.) are not descriptive of their purpose. Consider names that reflect their functionality, e.g.,ValidationInputPage,InfoPage, etc.
32-36: Enhance story documentation with argTypesAdd documentation for component props using argTypes to improve the story's usefulness:
const meta: Meta = { title: 'Components/StudioPaginatedContent', component: StudioPaginatedContent, - argTypes: {}, + argTypes: { + totalPages: { + description: 'Total number of pages in the pagination', + control: 'number', + }, + currentPageNumber: { + description: 'Current active page number (0-based index)', + control: 'number', + }, + navigationButtonTexts: { + description: 'Custom texts for navigation buttons', + }, + }, };frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx (1)
96-98: Consider adding cleanup to render helperAdd cleanup after each test to ensure a clean state:
const renderStudioPaginatedContent = (props: Partial<StudioPaginatedContentProps> = {}) => { - return render(<StudioPaginatedContent {...defaultProps} {...props} />); + const result = render(<StudioPaginatedContent {...defaultProps} {...props} />); + return { + ...result, + cleanup: () => result.unmount(), + }; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx(1 hunks)frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Build environment and run e2e test
- GitHub Check: CodeQL
- GitHub Check: Testing
- GitHub Check: Typechecking and linting
🔇 Additional comments (4)
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.tsx (2)
1-18: LGTM! Well-structured type definitions.The type definitions are clear, comprehensive, and provide good type safety.
20-43: Enhance accessibility for navigation buttonsAdd ARIA labels to navigation buttons to improve screen reader experience.
- <StudioButton variant='tertiary' size='sm' onClick={onPrevious} disabled={!canGoPrevious}> + <StudioButton + variant='tertiary' + size='sm' + onClick={onPrevious} + disabled={!canGoPrevious} + aria-label={`Previous page. ${!canGoPrevious ? 'Disabled' : ''}`} + > <ChevronLeftIcon className={classes.icon} /> {previousButtonText} </StudioButton> <NavigationStepIndicator totalPages={totalPages} currentPageNumber={currentPageNumber} /> - <StudioButton variant='tertiary' size='sm' onClick={onNext} disabled={!canGoNext}> + <StudioButton + variant='tertiary' + size='sm' + onClick={onNext} + disabled={!canGoNext} + aria-label={`Next page. ${!canGoNext ? 'Disabled' : ''}`} + >frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.stories.tsx (1)
38-72: Add error handling for edge casesConsider adding error handling for:
- Invalid input values
- Edge cases when pages array is empty
- Handling undefined currentPage
frontend/libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx (1)
1-25: LGTM! Well-structured test setup.The test setup follows best practices with clean mocks and comprehensive default props.
...libs/studio-components/src/components/StudioPaginatedContent/StudioPaginatedContent.test.tsx
Show resolved
Hide resolved
Description
Skjermopptak.2024-12-12.kl.18.02.09.mov
Related Issue(s)
Verification
Documentation
Summary by CodeRabbit
New Features
StudioPaginatedContentcomponent with advanced pagination functionality.Documentation
Tests
usePaginationhook.