Channel banner misc fixes (#30907)

* Fixed save state panel for channel banner

* Defined default background color

* Updated test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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

@@ -83,6 +83,29 @@ describe('ChannelSettingsConfigurationTab', () => {
         expect(screen.queryByTestId('channel_banner_banner_background_color_picker')).not.toBeInTheDocument();
     });
 
+    it('should render with the correct default values when banner is enabled', async () => {
+        const channelWithNoColor = {...mockChannelWithBanner, banner_info: undefined};
+        renderWithContext(<ChannelSettingsConfigurationTab {...{...baseProps, channel: channelWithNoColor}}/>);
+
+        // Check that the toggle is enabled
+        const toggle = screen.getByTestId('channelBannerToggle-button');
+        expect(toggle).toBeInTheDocument();
+        expect(toggle).not.toHaveClass('active');
+
+        // Click the toggle to enable the banner
+        await act(async () => {
+            await userEvent.click(screen.getByTestId('channelBannerToggle-button'));
+        });
+
+        // Banner text and color inputs should be visible when banner is enabled
+        expect(screen.getByTestId('channel_banner_banner_text_textbox')).toBeInTheDocument();
+        expect(screen.getByTestId('channel_banner_banner_text_textbox')).toHaveValue('');
+
+        // Check that the color picker has the correct value
+        expect(screen.getByTestId('color-inputColorValue')).toBeInTheDocument();
+        expect(screen.getByTestId('color-inputColorValue')).toHaveValue('#DDDDDD');
+    });
+
     it('should render with the correct initial values when banner is enabled', () => {
         renderWithContext(<ChannelSettingsConfigurationTab {...{...baseProps, channel: mockChannelWithBanner}}/>);
 
@@ -97,6 +120,7 @@ describe('ChannelSettingsConfigurationTab', () => {
 
         // Check that the color picker has the correct value
         expect(screen.getByTestId('color-inputColorValue')).toBeInTheDocument();
+        expect(screen.getByTestId('color-inputColorValue')).toHaveValue('#ff0000');
     });
 
     it('should show banner settings when toggle is clicked', async () => {

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

@@ -24,7 +24,7 @@ const CHANNEL_BANNER_MIN_CHARACTER_LIMIT = 0;
 
 const DEFAULT_CHANNEL_BANNER = {
     enabled: false,
-    background_color: '',
+    background_color: '#DDDDDD',
     text: '',
 };
 
@@ -69,6 +69,11 @@ function ChannelSettingsConfigurationTab({channel, setAreThereUnsavedChanges, sh
         setUpdatedChannelBanner(toUpdate);
     }, [initialBannerInfo, updatedChannelBanner]);
 
+    const resetFormErrors = useCallback(() => {
+        setFormError('');
+        setSaveChangesPanelState(undefined);
+    }, []);
+
     const handleTextChange = useCallback((e: React.ChangeEvent<TextboxElement>) => {
         setUpdatedChannelBanner({
             ...updatedChannelBanner,
@@ -88,17 +93,21 @@ function ChannelSettingsConfigurationTab({channel, setAreThereUnsavedChanges, sh
             }));
             setCharacterLimitExceeded(true);
         } else {
-            setFormError('');
+            resetFormErrors();
             setCharacterLimitExceeded(false);
         }
-    }, [formatMessage, updatedChannelBanner]);
+    }, [formatMessage, resetFormErrors, updatedChannelBanner]);
 
     const handleColorChange = useCallback((color: string) => {
         setUpdatedChannelBanner({
             ...updatedChannelBanner,
             background_color: color,
         });
-    }, [updatedChannelBanner]);
+
+        if (color) {
+            resetFormErrors();
+        }
+    }, [resetFormErrors, updatedChannelBanner]);
 
     const toggleTextPreview = useCallback(() => setShowBannerTextPreview((show) => !show), []);
 
@@ -165,8 +174,10 @@ function ChannelSettingsConfigurationTab({channel, setAreThereUnsavedChanges, sh
             setSaveChangesPanelState('error');
             return;
         }
+
+        resetFormErrors();
         setSaveChangesPanelState('saved');
-    }, [handleSave]);
+    }, [handleSave, resetFormErrors]);
 
     const handleCancel = useCallback(() => {
         setRequireConfirm(false);
@@ -175,6 +186,7 @@ function ChannelSettingsConfigurationTab({channel, setAreThereUnsavedChanges, sh
 
         setUpdatedChannelBanner(initialBannerInfo);
         setFormError('');
+        setSaveChangesPanelState(undefined);
         setCharacterLimitExceeded(false);
     }, [initialBannerInfo]);
 
@@ -187,6 +199,8 @@ function ChannelSettingsConfigurationTab({channel, setAreThereUnsavedChanges, sh
         characterLimitExceeded ||
         showTabSwitchError;
 
+    const showSaveChangesPanel = requireConfirm || saveChangesPanelState === 'saved';
+
     return (
         <div className='ChannelSettingsModal__configurationTab'>
             <div className='channel_banner_header'>
@@ -270,7 +284,7 @@ function ChannelSettingsConfigurationTab({channel, setAreThereUnsavedChanges, sh
                 </div>
             }
 
-            {requireConfirm && (
+            {showSaveChangesPanel && (
                 <SaveChangesPanel
                     handleSubmit={handleSaveChanges}
                     handleCancel={handleCancel}