MM-63912 - enhance validation for channel banner colors (#30981)

* MM-63912 - enhance validation for channel banner colors

* fix tests

* fix unit tests

webapp/channels/src/components/channel_settings_modal/channel_settings_configuration_tab.test.tsx

@@ -337,4 +337,101 @@ describe('ChannelSettingsConfigurationTab', () => {
         const errorPanel = errorMessage.closest('.SaveChangesPanel');
         expect(errorPanel).toHaveClass('error');
     });
+
+    it('should save valid colors in hex format', async () => {
+        const {patchChannel} = require('mattermost-redux/actions/channels');
+        patchChannel.mockReturnValue({type: 'MOCK_ACTION', data: {}});
+
+        renderWithContext(<ChannelSettingsConfigurationTab {...baseProps}/>);
+
+        // Enable the banner
+        await act(async () => {
+            await userEvent.click(screen.getByTestId('channelBannerToggle-button'));
+        });
+
+        // Enter banner text
+        await act(async () => {
+            const textInput = screen.getByTestId('channel_banner_banner_text_textbox');
+            await userEvent.clear(textInput);
+            await userEvent.type(textInput, 'New banner text');
+        });
+
+        // Enter a valid hex color
+        await act(async () => {
+            const colorInput = screen.getByTestId('color-inputColorValue');
+            await userEvent.clear(colorInput);
+            await userEvent.type(colorInput, '#ff0000');
+        });
+
+        // Click the Save button
+        await act(async () => {
+            await userEvent.click(screen.getByRole('button', {name: 'Save'}));
+        });
+
+        // Verify patchChannel was called with the correct color
+        expect(patchChannel).toHaveBeenCalledWith('channel1', expect.objectContaining({
+            banner_info: expect.objectContaining({
+                background_color: expect.stringMatching(/#[0-9a-f]{6}/i), // Match any hex color
+            }),
+        }));
+    });
+
+    it('only valid colors will make the save changes panel visible', async () => {
+        const {patchChannel} = require('mattermost-redux/actions/channels');
+        patchChannel.mockReturnValue({type: 'MOCK_ACTION', data: {}});
+        patchChannel.mockClear(); // Clear any previous calls
+
+        const originalColor = '#DDDDDD'; // Original color
+
+        // Create a channel with an valid color
+        const channelWithValidColor = {
+            ...mockChannel,
+            banner_info: {
+                enabled: true,
+                text: 'Test text',
+                background_color: originalColor, // Valid color
+            },
+        };
+
+        // Render with the invalid color channel
+        renderWithContext(
+            <ChannelSettingsConfigurationTab
+                channel={channelWithValidColor}
+                setAreThereUnsavedChanges={jest.fn()}
+            />,
+        );
+
+        // Enter a invalid hex color
+        await act(async () => {
+            const colorInput = screen.getByTestId('color-inputColorValue');
+            await userEvent.clear(colorInput);
+            await userEvent.type(colorInput, 'not-a-color');
+        });
+
+        // Do another action to trigger blur on this input so color is validated
+        await act(async () => {
+            const textInput = screen.getByTestId('channel_banner_banner_text_textbox');
+            await userEvent.clear(textInput);
+            await userEvent.type(textInput, 'Test text');
+        });
+
+        // if invalid, the color automatically returns to the original color
+        expect(screen.getByTestId('color-inputColorValue')).toHaveValue(originalColor);
+
+        // Check that the save changes panel is not visible
+        expect(screen.queryByRole('button', {name: 'Save'})).not.toBeInTheDocument();
+
+        // Modify the color to a valid one
+        await act(async () => {
+            const colorInput = screen.getByTestId('color-inputColorValue');
+            await userEvent.clear(colorInput);
+            await userEvent.type(colorInput, '#123456');
+        });
+
+        // Add a small delay to ensure all state updates are processed
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        // Check that the save changes panel is visible
+        expect(screen.getByRole('button', {name: 'Save'})).toBeInTheDocument();
+    });
 });