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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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,
{}} // Handled by parent div
+ onChange={() => toggleChannel(channel.id)}
onClick={(e) => e.stopPropagation()}
/>
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(, 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(, initialState);