Change Details

The wish and focus area view pages will have the HTML generated by the server. This would also include the voting button. **User story** As a wishlist participant, I want to be able to show my support to a wish so that the WMF knows which wish is important to me. Enable supporting individual wishes. User should be able to support a wish with or without adding a comment and remove a support. **Acceptance criteria** * Add any necessary config settings, including one to control whether voting is enabled * If enabled, add the voting button to the `renderWish` output * In the `BeforePageDisplay` hook, load the voting module (if voting is enabled and we're on a wish or focus area page) **Designs:** https://www.figma.com/design/JcTMFwbEJPpCKBiZ16Jkel/Future-of-the-Wishlist?node-id=3797-150914&t=H8DqOupKYrNx1LOk-1

The wish and focus area view pages will have the HTML generated by the server. This would also include the voting button. **User story** As a wishlist participant, I want to be able to show my support to a wish so that the WMF knows which wish is important to me. Enable supporting individual wishes. User should be able to support a wish with or without adding a comment and remove a support. **Acceptance criteria** * Add any necessary config settings, including one to control whether voting is enabled * If enabled, add the voting button to the `renderWish` output * In the `BeforePageDisplay` hook, load the voting module (if voting is enabled and we're on a wish or focus area page) **Designs:** https://www.figma.com/design/JcTMFwbEJPpCKBiZ16Jkel/Future-of-the-Wishlist?node-id=3797-150914&t=H8DqOupKYrNx1LOk-1 **Derived Requirement** Ensure that the voting Vue app is conditionally loaded on **wish** and **focus area** view pages. When voting is enabled via configuration, the page should display a voting button rendered by the Vue app, allowing users to support or remove support for a wish—with or without a comment. The voting module must be dynamically loaded using the `BeforePageDisplay` hook. ====Test Steps **Test Case 1: Verify voting module is loaded and voting button is visible on wish page when voting is enabled** *Precondition: Voting feature flag is enabled via config (`$wgCommunityRequestsWishVotingEnabled = true`)* 1. Log in to the beta wiki with a user account that has voting permissions. 2. Navigate to a **wish view page** (e.g., `Special:WishlistIntake/Community_Wishlist/Wishes/W1`). 3. ✅❓❌⬜ **AC1:** Verify that a voting button is visible inside the rendered wish view (as per Figma design). 4. ✅❓❌⬜ **AC2:** Click the voting button and confirm that support is registered. 5. ✅❓❌⬜ **AC3:** Optionally enter a comment and confirm that the comment is saved. 6. ✅❓❌⬜ **AC4:** Click again to remove support and verify that the vote is withdrawn. 7. ✅❓❌⬜ **AC5:** Reload the page and confirm that voting state persists as expected. **Test Case 2: Verify voting module is loaded and voting button is visible on focus area page when voting is enabled** 1. Navigate to a **focus area view page** (e.g., `Community_Wishlist/Focus_areas/FA3`). 2. ✅❓❌⬜ **AC6:** Confirm that the Vue-based voting app is loaded. 3. ✅❓❌⬜ **AC7:** Verify that a voting button is present and interactive. 4. ✅❓❌⬜ **AC8:** Test supporting and removing support for the focus area. 5. ✅❓❌⬜ **AC9:** Confirm UI updates immediately and is styled per Figma specs. **Test Case 3: Verify voting module is not loaded when voting is disabled** *Precondition: Voting is disabled via config (`$wgCommunityRequestsWishVotingEnabled = false;, $wgCommunityRequestsFocusAreaVotingEnabled = false;`)* 1. Log in as any user in Lcaol. 2. Visit a wish or focus area view page. 3. ✅❓❌⬜ **AC10:** AC10: Confirm that Vue voting app JavaScript is not loaded on the page. == QA Results - Commtech.toolforge/Local | **AC** | **Status** | **Details** | | ----- | ----- | ----- | | 1 | ✅|T388219#11059571 | 2 | ✅|T388219#11059571 | 3 | ❓|T388219#11059571 | 4 | ⬜|T388219#11059571 | 5 | ❌|T388219#11059571 | 6 | ✅|T388219#11059571 | 7 | ✅|T388219#11059571 | 8 | ❌|T388219#11059571 | 9 | ❌|T388219#11059571 | 10| ❌|T388219#11059571

The wish and focus area view pages will have the HTML generated by the server. This would also include the voting button. **User story** As a wishlist participant, I want to be able to show my support to a wish so that the WMF knows which wish is important to me. Enable supporting individual wishes. User should be able to support a wish with or without adding a comment and remove a support. **Acceptance criteria** * Add any necessary config settings, including one to control whether voting is enabled * If enabled, add the voting button to the `renderWish` output * In the `BeforePageDisplay` hook, load the voting module (if voting is enabled and we're on a wish or focus area page) **Designs:** https://www.figma.com/design/JcTMFwbEJPpCKBiZ16Jkel/Future-of-the-Wishlist?node-id=3797-150914&t=H8DqOupKYrNx1LOk-1 **Derived Requirement** Ensure that the voting Vue app is conditionally loaded on **wish** and **focus area** view pages. When voting is enabled via configuration, the page should display a voting button rendered by the Vue app, allowing users to support or remove support for a wish—with or without a comment. The voting module must be dynamically loaded using the `BeforePageDisplay` hook. ====Test Steps **Test Case 1: Verify voting module is loaded and voting button is visible on wish page when voting is enabled** *Precondition: Voting feature flag is enabled via config (`$wgCommunityRequestsWishVotingEnabled = true`)* 1. Log in to the beta wiki with a user account that has voting permissions. 2. Navigate to a **wish view page** (e.g., `Special:WishlistIntake/Community_Wishlist/Wishes/W1`). 3. ✅❓❌⬜ **AC1:** Verify that a voting button is visible inside the rendered wish view (as per Figma design). 4. ✅❓❌⬜ **AC2:** Click the voting button and confirm that support is registered. 5. ✅❓❌⬜ **AC3:** Optionally enter a comment and confirm that the comment is saved. 6. ✅❓❌⬜ **AC4:** Click again to remove support and verify that the vote is withdrawn. 7. ✅❓❌⬜ **AC5:** Reload the page and confirm that voting state persists as expected. **Test Case 2: Verify voting module is loaded and voting button is visible on focus area page when voting is enabled** 1. Navigate to a **focus area view page** (e.g., `Community_Wishlist/Focus_areas/FA3`). 2. ✅❓❌⬜ **AC6:** Confirm that the Vue-based voting app is loaded. 3. ✅❓❌⬜ **AC7:** Verify that a voting button is present and interactive. 4. ✅❓❌⬜ **AC8:** Test supporting and removing support for the focus area. 5. ✅❓❌⬜ **AC9:** Confirm UI updates immediately and is styled per Figma specs. **Test Case 3: Verify voting module is not loaded when voting is disabled** *Precondition: Voting is disabled via config (`$wgCommunityRequestsWishVotingEnabled = false;, $wgCommunityRequestsFocusAreaVotingEnabled = false;`)* 1. Log in as any user in Lcaol. 2. Visit a wish or focus area view page. 3. ✅❓❌⬜ **AC10:** AC10: Confirm that Vue voting app JavaScript is not loaded on the page. == QA Results - Commtech.toolforge/Local | **AC** | **Status** | **Details** | | ----- | ----- | ----- | | 1 | ✅|T388219#11059571 | 2 | ✅|T388219#11059571 | 3 | ❓|T388219#11059571 | 4 | ⬜|T388219#11059571 | 5 | ❌|T388219#11059571 | 6 | ✅|T388219#11059571 | 7 | ✅|T388219#11059571 | 8 | ❌|T388219#11059571 | 9 | ❌|T388219#11059571 | 10| ❌|T388219#11059571