From 1e47436308cade18ae56cda0cb652e7a80945681 Mon Sep 17 00:00:00 2001
From: Nick Misasi <nick.misasi@mattermost.com>
Date: Tue, 10 Mar 2026 09:49:51 -0400
Subject: [PATCH] Fix create recap channel checkbox selection (#35533)

* Add agent-browser skill

* Update AGENTS.CURSOR.md

* Add guidance for localization

* Fix recap channel checkbox selection

Co-authored-by: Nick Misasi <nick13misasi@gmail.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../channel_selector.test.tsx                 | 35 +++++++++++++++++++
 .../create_recap_modal/channel_selector.tsx   |  2 +-
 .../create_recap_modal.test.tsx               | 29 +++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/create_recap_modal/channel_selector.test.tsx b/webapp/channels/src/components/create_recap_modal/channel_selector.test.tsx
index 5b4ca75a3cc..ea6c56dfb97 100644
--- a/webapp/channels/src/components/create_recap_modal/channel_selector.test.tsx
+++ b/webapp/channels/src/components/create_recap_modal/channel_selector.test.tsx
@@ -218,6 +218,23 @@ describe('ChannelSelector', () => {
             expect(setSelectedChannelIds).toHaveBeenCalledWith(['channel1']);
         });
 
+        it('should call setSelectedChannelIds when checkbox is clicked', async () => {
+            const setSelectedChannelIds = jest.fn();
+            renderWithContext(
+                <ChannelSelector
+                    {...defaultProps}
+                    setSelectedChannelIds={setSelectedChannelIds}
+                />,
+            );
+
+            const checkbox = screen.getByText('Town Square').closest('.channel-selector-item')?.querySelector('input[type="checkbox"]');
+            expect(checkbox).not.toBeNull();
+
+            await userEvent.click(checkbox!);
+
+            expect(setSelectedChannelIds).toHaveBeenCalledWith(['channel1']);
+        });
+
         it('should add channel to selection when unselected channel is clicked', async () => {
             const setSelectedChannelIds = jest.fn();
             renderWithContext(
@@ -249,6 +266,24 @@ describe('ChannelSelector', () => {
 
             expect(setSelectedChannelIds).toHaveBeenCalledWith(['channel2']);
         });
+
+        it('should remove channel from selection when selected checkbox is clicked', async () => {
+            const setSelectedChannelIds = jest.fn();
+            renderWithContext(
+                <ChannelSelector
+                    {...defaultProps}
+                    selectedChannelIds={['channel1', 'channel2']}
+                    setSelectedChannelIds={setSelectedChannelIds}
+                />,
+            );
+
+            const checkbox = screen.getByText('Town Square').closest('.channel-selector-item')?.querySelector('input[type="checkbox"]');
+            expect(checkbox).not.toBeNull();
+
+            await userEvent.click(checkbox!);
+
+            expect(setSelectedChannelIds).toHaveBeenCalledWith(['channel2']);
+        });
     });
 
     describe('Channel Icons', () => {
diff --git a/webapp/channels/src/components/create_recap_modal/channel_selector.tsx b/webapp/channels/src/components/create_recap_modal/channel_selector.tsx
index 640460f0da5..dd15557bc0a 100644
--- a/webapp/channels/src/components/create_recap_modal/channel_selector.tsx
+++ b/webapp/channels/src/components/create_recap_modal/channel_selector.tsx
@@ -76,7 +76,7 @@ const ChannelSelector = ({selectedChannelIds, setSelectedChannelIds, myChannels,
                     <input
                         type='checkbox'
                         checked={isSelected}
-                        onChange={() => {}} // Handled by parent div
+                        onChange={() => toggleChannel(channel.id)}
                         onClick={(e) => e.stopPropagation()}
                     />
                 </div>
diff --git a/webapp/channels/src/components/create_recap_modal/create_recap_modal.test.tsx b/webapp/channels/src/components/create_recap_modal/create_recap_modal.test.tsx
index 8d3d675cd63..cdd899fe75d 100644
--- a/webapp/channels/src/components/create_recap_modal/create_recap_modal.test.tsx
+++ b/webapp/channels/src/components/create_recap_modal/create_recap_modal.test.tsx
@@ -267,6 +267,35 @@ describe('CreateRecapModal', () => {
         });
     });
 
+    test('should enable Next on channel selection step when a checkbox is clicked', async () => {
+        renderWithContext(<CreateRecapModal {...defaultProps}/>, initialState);
+
+        await waitFor(() => {
+            const dropdownButton = screen.getByLabelText('Agent selector');
+            expect(dropdownButton).toHaveTextContent('Copilot');
+        });
+
+        const nameInput = screen.getByPlaceholderText('Give your recap a name');
+        await userEvent.type(nameInput, 'Test Recap');
+
+        const selectedChannelsButton = screen.getByText('Recap selected channels');
+        await userEvent.click(selectedChannelsButton);
+
+        const nextButton = screen.getByRole('button', {name: /next/i});
+        await userEvent.click(nextButton);
+
+        await waitFor(() => {
+            expect(screen.getByPlaceholderText('Search and select channels')).toBeInTheDocument();
+        });
+
+        const channelCheckbox = screen.getAllByRole('checkbox')[0];
+        expect(nextButton).toBeDisabled();
+
+        await userEvent.click(channelCheckbox);
+
+        await waitFor(() => expect(nextButton).not.toBeDisabled());
+    });
+
     test('should maintain selected bot across step navigation', async () => {
         renderWithContext(<CreateRecapModal {...defaultProps}/>, initialState);