refactor(primevue): use new tab components #836
Conversation
antoinezanardi
added
the
🔩 refactor
|
Important Review skippedReview was skipped due to path filters Files ignored due to path filters (5)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughThe pull request introduces significant changes to the tab management system within the application. It replaces the existing Changes
Possibly related PRs
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
Documentation and Community
Tip Early access features: enabledWe are currently testing the following features in early access:
Note:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (12)
tests/acceptance/screenshots/darwin/Game Lobby Options Hub on Composition tab.pngis excluded by!**/*.pngtests/acceptance/screenshots/darwin/Game Lobby Options Hub on Roles tab.pngis excluded by!**/*.pngtests/acceptance/screenshots/darwin/Game Lobby Options Hub on Votes tab.pngis excluded by!**/*.pngtests/acceptance/screenshots/darwin/Witch uses death potion Playground.pngis excluded by!**/*.pngtests/acceptance/screenshots/darwin/Witch uses life potion Playground.pngis excluded by!**/*.pngtests/acceptance/screenshots/linux/Game Lobby Options Hub on Composition tab.pngis excluded by!**/*.pngtests/acceptance/screenshots/linux/Game Lobby Options Hub on Roles tab.pngis excluded by!**/*.pngtests/acceptance/screenshots/linux/Game Lobby Options Hub on Votes tab.pngis excluded by!**/*.pngtests/acceptance/screenshots/linux/Witch uses death potion Playground.pngis excluded by!**/*.pngtests/acceptance/screenshots/linux/Witch uses life potion Playground.pngis excluded by!**/*.pngtests/unit/specs/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/__snapshots__/GameLobbyOptionsHubTabView.nuxt.spec.ts.snapis excluded by!**/*.snaptests/unit/specs/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/__snapshots__/WitchUsePotionsTabView.nuxt.spec.ts.snapis excluded by!**/*.snap
Files selected for processing (4)
- app/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubTabView.vue (1 hunks)
- app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.vue (4 hunks)
- nuxt.config.ts (1 hunks)
- tests/unit/specs/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.nuxt.spec.ts (11 hunks)
Additional comments not posted (18)
nuxt.config.ts (1)
155-158: Updatedprimevuecomponents configuration appropriately.The addition of "Tabs", "TabList", "TabPanels", and "Tab" to the
primevuecomponents configuration, and the removal of "TabView", align with the PR's objectives. These changes update the available UI components effectively.Please ensure that the integration of these new components with the rest of the application is tested to confirm that there are no breaks in existing functionality.
tests/unit/specs/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.nuxt.spec.ts (7)
4-6: Update import statements to reflect component changes.The import statements have been updated to reflect the new component structure:
TabreplacesTabPanelto align with the new tab management system.Tabsis added to handle the grouping ofTabcomponents.Ensure that these changes are consistent across all test files that use these components.
Line range hint
70-89: Correctly updated test for active tab management.The test case has been updated to check the
valueattribute instead ofactive-index, aligning with the newTabscomponent structure. This change correctly reflects the component's expected behavior based on the active potion state.Ensure that this behavior is consistent with the actual component implementation.
Run the following script to verify the integration with the actual component:
Verification successful
Verification successful:
Tabscomponent usesvalueattribute correctly.The
Tabscomponent inWitchUsePotionsTabView.vuecorrectly uses thevalueattribute to manage the active tab, aligning with the test case's expectations. This confirms the correctness of the test setup and its integration with the component.
WitchUsePotionsTabView.vue::value="tabViewActiveIndex"Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the `Tabs` component correctly handles the `value` attribute in the actual component implementation. # Test: Search for the `Tabs` component usage in the actual component file. rg --type vue -A 5 $'Tabs'Length of output: 53
Script:
#!/bin/bash # Description: Verify that the `Tabs` component correctly handles the `value` attribute in the actual component implementation. # Test: Search for the `Tabs` component usage in .vue files. rg --glob '*.vue' -A 5 'Tabs'Length of output: 3950
173-175: Correctly updated test for enabling tabs based on game conditions.This test case accurately checks the absence of the
disabledattribute on theTabcomponent when the witch still has a life potion. This aligns with the new component structure and expected behavior.Verify that this behavior is consistent with the actual component implementation.
Run the following script to verify the integration with the actual component:
Verification successful
Integration of
Tabcomponent verified with actual implementation.The
PrimeVueTabcomponent inWitchUsePotionsTabView.vuecorrectly manages thedisabledattribute based on thehasWitchUsedLifePotionproperty, aligning with the test case logic. This confirms the integration is consistent with the expected behavior.
WitchUsePotionsTabView.vue:PrimeVueTabcomponent uses:disabled="hasWitchUsedLifePotion".Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the `Tab` component correctly handles the absence of the `disabled` attribute in the actual component implementation. # Test: Search for the `Tab` component usage in the actual component file. rg --type vue -A 5 $'Tab'Length of output: 52
Script:
#!/bin/bash # Description: Verify that the `Tab` component correctly handles the absence of the `disabled` attribute in the actual component implementation. # Test: Search for the `Tab` component usage in .vue files. rg --glob '*.vue' -A 5 'Tab'Length of output: 117611
Line range hint
92-111: Properly updated test for active tab management.This test case has been updated to check the
valueattribute for the "death-potion" state, aligning with the newTabscomponent structure. This ensures that the component behaves as expected when the witch does not have a life potion anymore.Verify that this behavior is consistent with the actual component implementation.
Run the following script to verify the integration with the actual component:
Verification successful
Test Case Correctly Verifies Tabs Component Behavior
The test case accurately checks the
valueattribute for the "death-potion" state, aligning with theTabscomponent's implementation inWitchUsePotionsTabView.vue. Thevalueattribute is bound totabViewActiveIndex, confirming that the component behaves as expected when the witch does not have a life potion anymore. No further action is needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the `Tabs` component correctly handles the `value` attribute in the actual component implementation. # Test: Search for the `Tabs` component usage in the actual component file. rg --type vue -A 5 $'Tabs'Length of output: 53
Script:
#!/bin/bash # Description: Verify that the `Tabs` component correctly handles the `value` attribute in the actual component implementation. # Test: Search for the `Tabs` component usage in .vue files. rg -g '*.vue' -A 5 'Tabs'Length of output: 3946
273-275: Correctly updated test for enabling panels based on game conditions.This test case accurately checks the absence of the
disabledattribute on theTabPanelcomponent when the witch still has a death potion. This aligns with the new component structure and expected behavior.Verify that this behavior is consistent with the actual component implementation.
Run the following script to verify the integration with the actual component:
Verification successful
Test case correctly reflects component behavior for enabling the death potion panel.
The
WitchUsePotionsTabView.vuefile uses thehasWitchUsedDeathPotionvariable to conditionally apply thedisabledattribute to theTabPanelcomponent. The test case accurately checks for the absence of this attribute, confirming that the panel is enabled when the potion has not been used. This aligns with the expected behavior and component implementation.
WitchUsePotionsTabView.vue::disabled="hasWitchUsedDeathPotion"Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the `TabPanel` component correctly handles the absence of the `disabled` attribute in the actual component implementation. # Test: Search for the `TabPanel` component usage in the actual component file. rg --type vue -A 5 $'TabPanel'Length of output: 57
Script:
#!/bin/bash # Description: Verify that the `TabPanel` component correctly handles the absence of the `disabled` attribute in the actual component implementation. # Test: Search for the `TabPanel` component usage in .vue files. rg --glob '*.vue' -A 5 'TabPanel'Length of output: 8708
Script:
#!/bin/bash # Description: Search for the logic related to the `disabled` attribute in the `WitchUsePotionsTabView.vue` file. # Test: Search for the `disabled` attribute logic in the `WitchUsePotionsTabView.vue` file. rg --glob 'WitchUsePotionsTabView.vue' -A 10 'disabled'Length of output: 4066
Line range hint
220-242: Accurately updated test for disabling panels based on game conditions.This test case correctly checks the
disabledattribute of theTabPanelcomponent to ensure it reflects the game state when the witch does not have a death potion anymore. This aligns with the new component structure and expected behavior.Verify that this behavior is consistent with the actual component implementation.
Run the following script to verify the integration with the actual component:
Line range hint
115-144: Accurately updated test for disabling tabs based on game conditions.This test case correctly checks the
disabledattribute of theTabcomponent to ensure it reflects the game state when the witch does not have a life potion anymore. This aligns with the new component structure and expected behavior.Verify that this behavior is consistent with the actual component implementation.
Run the following script to verify the integration with the actual component:
Verification successful
Test case correctly reflects component logic for disabling the "life-potion" tab.
The
PrimeVueTabcomponent inWitchUsePotionsTabView.vuecorrectly uses thedisabledattribute bound tohasWitchUsedLifePotion, aligning with the test case logic. This confirms that the component implementation is consistent with the expected behavior when the witch does not have a life potion anymore.
WitchUsePotionsTabView.vue:PrimeVueTabwithid="life-potion-tab"uses:disabled="hasWitchUsedLifePotion"Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the `Tab` component correctly handles the `disabled` attribute in the actual component implementation. # Test: Search for the `Tab` component usage in the actual component file. rg --type vue -A 5 $'Tab'Length of output: 52
Script:
#!/bin/bash # Description: Verify that the `Tab` component correctly handles the `disabled` attribute in the actual component implementation. # Test: Search for the `Tab` component usage in .vue files. rg --glob '*.vue' -A 5 'Tab'Length of output: 117611
app/components/pages/game-lobby/GameLobbyOptionsHub/GameLobbyOptionsHubTabView/GameLobbyOptionsHubTabView.vue (3)
63-86: Approved: New content structure with<PrimeVueTabPanels>and<PrimeVueTabPanel>.The introduction of
<PrimeVueTabPanels>and individual<PrimeVueTabPanel>components for "roles", "composition", and "votes" is well-implemented. Each panel is clearly defined with specific ids and values, enhancing the component's readability and maintainability.Consider assessing the performance implications of this new structure, especially if the content of the tabs is complex or requires significant resources to initialize.
2-6: Approved: New<PrimeVueTabs>component setup.The introduction of
<PrimeVueTabs>with appropriate attributes (id,class, andvalue) is well-implemented. Thevalueattribute is set to "roles", indicating the default active tab. Ensure this setting aligns with the intended default behavior in the application context.Verification successful
Consistent Usage of Default Active Tab Setting in Component
The
value="roles"setting is consistently used within theGameLobbyOptionsHubTabView.vuecomponent at lines 6, 14, and 67. This indicates that the default active tab is set to "roles" within this component. If a broader application-wide consistency check is required, please verify manually.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the default active tab setting in the application context. # Test: Search for the usage of the default active tab setting. Expect: Consistent usage across the application. rg --type vue -A 5 $'value="roles"'Length of output: 64
Script:
#!/bin/bash # Description: Verify the default active tab setting in the application context. # Find all .vue files and search for the usage of the default active tab setting. fd --extension vue --exec rg 'value="roles"' {}Length of output: 113
Script:
#!/bin/bash # Description: Verify the default active tab setting in the application context with detailed output. # Find all .vue files and search for the usage of the default active tab setting, including file names and line numbers. fd --extension vue --exec rg --with-filename --line-number 'value="roles"' {}Length of output: 487
8-60: Approved: New tab structure with<PrimeVueTabList>and<PrimeVueTab>.The restructuring with
<PrimeVueTabList>and individual<PrimeVueTab>components for "roles", "composition", and "votes" is well-implemented. Each tab is clearly defined with specific ids and values, enhancing the component's readability and maintainability.Consider verifying the accessibility of these tabs, especially ensuring that they are keyboard navigable and properly labeled for screen readers.
app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.vue (7)
2-4: Correct usage ofPrimeVueTabs.The
PrimeVueTabscomponent is correctly configured with thevalueprop bound totabViewActiveIndex, aligning with the new tab management approach.
10-27: Well-configuredPrimeVueTabfor 'life potion'.The tab is correctly set up with appropriate properties for ID, class, disabled state, and value. The use of
NuxtImgwith relevant attributes is well implemented, enhancing the tab's visual representation.
29-46: Consistent and correct configuration for 'death potion' tab.The tab configuration for "death potion" mirrors that of the "life potion" tab, maintaining consistency and ensuring correct functionality.
49-52: Correct usage ofPrimeVueTabPanels.The
PrimeVueTabPanelscomponent is correctly configured with thevalueprop bound totabViewActiveIndex, aligning with the new tab management approach.
Line range hint
53-65: Well-configuredPrimeVueTabPanelfor 'give life potion'.The tab panel is correctly set up with appropriate properties for ID, class, and value. The use of
GamePlaygroundPlayerCardwith relevant attributes is well implemented, enhancing the panel's functionality.
Line range hint
67-79: Consistent and correct configuration for 'give death potion' panel.The tab panel configuration for "give death potion" mirrors that of the "give life potion" panel, maintaining consistency and ensuring correct functionality.
105-105: Enhanced clarity and type safety intabViewActiveIndex.The modification of the
tabViewActiveIndexcomputed property to return specific string values instead of numeric indices enhances clarity and type safety in the component's logic.
...PlaygroundContent/GameUsePotionsPlayground/WitchUsePotionsTabView/WitchUsePotionsTabView.vue
Show resolved
Hide resolved
|
## [1.32.0](v1.31.0...v1.32.0) (2024-09-18) ### 🚀 Features * **audio:** audio settings in local storage ([#831](#831)) ([cd8a2cb](cd8a2cb)) * **game-lobby:** all game lobby is responsive ([#877](#877)) ([aaccf38](aaccf38)) * **game-lobby:** auto-focus on player name input ([#860](#860)) ([7897da3](7897da3)) * **game-lobby:** auto-focus on player name input even after changing page ([#873](#873)) ([3bb8401](3bb8401)) * **game-lobby:** display disclaimer for small screens ([#853](#853)) ([81029b8](81029b8)) * **game-lobby:** game options confirm step in lobby ([#845](#845)) ([20cc2ce](20cc2ce)) * **game:** all game screens are responsive ([#880](#880)) ([b54b1dc](b54b1dc)) * **game:** game over screens are responsive ([#883](#883)) ([aacb761](aacb761)) * **misc-pages:** responsive for canceled game and not found game pages ([#888](#888)) ([deeb7b2](deeb7b2)) * **nuxt:** set route announcer ([#835](#835)) ([dd1115f](dd1115f)) * **nuxt:** typecheck on hooks and ci ([#832](#832)) ([794157f](794157f)) ### 🐛 Bug Fixes * **deps:** update dependency @primevue/themes to ^4.0.6 ([#842](#842)) ([4d3e063](4d3e063)) * **deps:** update dependency @primevue/themes to ^4.0.7 ([#855](#855)) ([2b80485](2b80485)) * **deps:** update dependency primevue to ^4.0.6 ([#843](#843)) ([3a20f01](3a20f01)) * **deps:** update dependency primevue to ^4.0.7 ([#856](#856)) ([6c75a61](6c75a61)) * **game-events:** icon animation null instance handler ([#889](#889)) ([ee0a17e](ee0a17e)) * **pwa:** remove redirect fallback ([#830](#830)) ([69c2c21](69c2c21)) ### 🔩 Refactor * **primevue:** use new accordion component ([#834](#834)) ([f611995](f611995)) * **primevue:** use new tab components ([#836](#836)) ([4f9c1b9](4f9c1b9)) ### ✅ Tests * **scapegoat:** acceptance tests ([#884](#884)) ([add895e](add895e)) ### 🔁 CI * **node:** use last node version in ci ([#848](#848)) ([aa047b3](aa047b3)) ### 🧹 Chore * **deps:** update commitlint monorepo to ^19.5.0 ([#852](#852)) ([cefe4af](cefe4af)) * **deps:** update dependency @cucumber/cucumber to ^11.0.1 ([#869](#869)) ([c00d3e7](c00d3e7)) * **deps:** update dependency @cucumber/cucumber to v11 ([#817](#817)) ([dcbad46](dcbad46)) * **deps:** update dependency @faker-js/faker to ^9.0.1 ([#870](#870)) ([da15f7c](da15f7c)) * **deps:** update dependency @nuxt/test-utils to ^3.14.2 ([#846](#846)) ([f0f715a](f0f715a)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.2 ([#764](#764)) ([0fe9bf0](0fe9bf0)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.3 ([#849](#849)) ([1689312](1689312)) * **deps:** update dependency @nuxtjs/robots to ^4.1.7 ([#861](#861)) ([4cf88c8](4cf88c8)) * **deps:** update dependency @primevue/nuxt-module to ^4.0.6 ([#841](#841)) ([7384c1e](7384c1e)) * **deps:** update dependency @primevue/nuxt-module to ^4.0.7 ([#854](#854)) ([22c3f4a](22c3f4a)) * **deps:** update dependency @stylistic/eslint-plugin to ^2.8.0 ([#838](#838)) ([1c15410](1c15410)) * **deps:** update dependency @types/qs to ^6.9.16 ([#868](#868)) ([8560a5d](8560a5d)) * **deps:** update dependency @vueuse/core to ^11.1.0 ([#875](#875)) ([b568680](b568680)) * **deps:** update dependency @vueuse/nuxt to ^11.1.0 ([#876](#876)) ([0f358b6](0f358b6)) * **deps:** update dependency circle-progress.vue to ^3.2.2 ([#878](#878)) ([4cd09ac](4cd09ac)) * **deps:** update dependency husky to ^9.1.6 ([#858](#858)) ([03b278b](03b278b)) * **deps:** update dependency msw to ^2.4.3 ([#827](#827)) ([6cd07ef](6cd07ef)) * **deps:** update dependency msw to ^2.4.4 ([#833](#833)) ([44814db](44814db)) * **deps:** update dependency msw to ^2.4.5 ([#850](#850)) ([773674a](773674a)) * **deps:** update dependency msw to ^2.4.6 ([#864](#864)) ([93b4a45](93b4a45)) * **deps:** update dependency msw to ^2.4.7 ([#871](#871)) ([b6cef68](b6cef68)) * **deps:** update dependency msw to ^2.4.8 ([#882](#882)) ([96d9d56](96d9d56)) * **deps:** update dependency node to v22.9.0 ([#886](#886)) ([8f28e99](8f28e99)) * **deps:** update dependency sass to ^1.79.1 ([#887](#887)) ([02e728a](02e728a)) * **deps:** update dependency semantic-release to ^24.1.1 ([#851](#851)) ([9a5d974](9a5d974)) * **deps:** update dependency tailwindcss to ^3.4.11 ([#857](#857)) ([74668ab](74668ab)) * **deps:** update dependency tailwindcss to ^3.4.12 ([#885](#885)) ([b2d182d](b2d182d)) * **deps:** update dependency tsx to ^4.19.1 ([#859](#859)) ([6e771c3](6e771c3)) * **deps:** update dependency type-fest to ^4.26.1 ([#829](#829)) ([7b715fd](7b715fd)) * **deps:** update dependency typescript to ^5.6.2 ([#839](#839)) ([69b99b1](69b99b1)) * **deps:** update dependency vue to ^3.5.4 ([#844](#844)) ([09fd254](09fd254)) * **deps:** update dependency vue to ^3.5.5 ([#865](#865)) ([13ae2b7](13ae2b7)) * **deps:** update dependency vue to ^3.5.6 ([#874](#874)) ([77302a2](77302a2)) * **deps:** update dependency vue-router to ^4.4.4 ([#847](#847)) ([23430aa](23430aa)) * **deps:** update dependency vue-router to ^4.4.5 ([#863](#863)) ([28a6c29](28a6c29)) * **deps:** update nuxtjs monorepo to ^3.13.2 ([#872](#872)) ([28e0e43](28e0e43)) * **deps:** update playwright monorepo to ^1.47.1 ([#866](#866)) ([ae9e014](ae9e014)) * **deps:** update pnpm to v9.10.0 ([#837](#837)) ([05be262](05be262)) * **deps:** update typescript-eslint monorepo to ^8.5.0 ([#840](#840)) ([b230013](b230013)) * **deps:** update typescript-eslint monorepo to ^8.6.0 ([#881](#881)) ([c291635](c291635)) * **deps:** update vitest monorepo to ^2.1.0 ([#862](#862)) ([b25b312](b25b312)) * **deps:** update vitest monorepo to ^2.1.1 ([#867](#867)) ([a1ad2f8](a1ad2f8)) * **screenshots:** missing screenshots for linux ([8bfa635](8bfa635))
|
🎉 This PR is included in version 1.32.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Tests