MM61173 - settings modal base creation (#30338)

* MM-61173 - channel settings modal: base modal, initial commit, file creation and base component

* new enhancements to the base modal creation

* revert changes on textbox_links and edit channel header

* fix types and add back unintentioned deleted value

* add the preview textbox component

* extract logic for info tab into its own component

* add the purpose input to the window

* move other component logic to its own component and code clean up

* ability to update channel type

* more advances on the archive channel tab

* fix unit test in textbox

* fix translations

* do not show the archive modal in default channel

* fix issue with url editor not being resetted on undo action

* adjust text and styling for the header and purpose inputs

* remove textboxlinks and use button eye icon

* adjust test and preview button style

* add unit test to channel patch

* move logic from parent modal to info tab component

* fix border issues and focus back to preview textareas

* prevent saving changes when pressing enter when selecting an icon

* enhance input component to cover limits validations and enhances tests

* set default error message for save changes panel

* add props to provide custom value to the buttons

* remove channel input errors on reset button click

* create new component settings textbox

* rename component to advanced textbox and add unit tests

* styling of the info tab and add error state to advanced textbox

* add logic to prevent tab switch with unsaved changes

* adjust url error logic and code clean up

* code clean up and enhance comments

* add char min length to advanced textbox logic

* add the channel settings modal to the new menu

* add new test files and fix reset error

* remove unused error variables

* adjust translations and remove unncesary import

* enhance permissions for archive channels and manage channel settings

* Adjust permission tree so channel admins can convert from private to public

* enhance the test suit around channel conversion type

* fix some e2e tests and solve channel input name issue

* fix unit test by interacting first with the input element

* adjust e2e tests to channel settings modal changes

* remove commented tests and implement pr feedback

* adjust more pr feedback to the code

* more pr feedback enhancements

* further enhancements to tab navigation, and adjust more e2e tests

* remove unused components and fix e2e tests

* revert unnecessary permissions changes

* Add name label to textboxes

* adjust e2e and unit tests

* revert min lenght change value and adjust tests and snapshots

* Channel banner settings (#30721)

* Added channel banner setting header

* Updated section styling

* handled animation

* handled min and max lengths

* cleanup

* color change fix

* general improvements

* Fixed API test

* removed unused param className

* added e2e tests

* test: add channel settings configuration tab test file

* Based on the context, here's a concise commit message for this change:

feat: Add comprehensive tests for ChannelSettingsConfigurationTab

* added some more tests

* CI

* reverted package-lock.json changes in Playwright

* remove extra border from advaced textbox

* adjust styling for name label in advance texbox and restart preview state on modal close

* sync package.lock in playwright

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>
Co-authored-by: Harshil Sharma <18575143+harshilsharma63@users.noreply.github.com>

e2e-tests/playwright/specs/functional/channels/channel_banner/channel_banner.spec.ts

@@ -0,0 +1,76 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {test} from '@mattermost/playwright-lib';
+import {getRandomId} from 'utils/utils';
+
+test('Should show channel banner when configured', async ({pw}) => {
+    const {adminUser, adminClient} = await pw.initSetup();
+    const license = await adminClient.getClientLicenseOld();
+    test.skip(license.SkuShortName !== 'premium', 'Skipping test - server does not have Premium license');
+
+    const {channelsPage} = await pw.testBrowser.login(adminUser);
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    await channelsPage.newChannel(getRandomId(), 'O');
+
+    let settingsModal = await channelsPage.openChannelSettings();
+    let configurationTab = await settingsModal.openConfigurationTab();
+
+    await configurationTab.enableChannelBanner();
+    await configurationTab.setChannelBannerText('Example channel banner text');
+    await configurationTab.setChannelBannerTextColor('#77DD88');
+
+    await configurationTab.save();
+    await settingsModal.closeModal();
+
+    await channelsPage.centerView.assertChannelBanner('Example channel banner text', '#77DD88');
+
+    // Now we'll disable the channel banner
+    settingsModal = await channelsPage.openChannelSettings();
+    configurationTab = await settingsModal.openConfigurationTab();
+    await configurationTab.disableChannelBanner();
+
+    await configurationTab.save();
+    await settingsModal.closeModal();
+
+    await channelsPage.centerView.assertChannelBannerNotVisible();
+
+    // re-enabling channel banner should already have
+    // the previously configured text and color
+    settingsModal = await channelsPage.openChannelSettings();
+    configurationTab = await settingsModal.openConfigurationTab();
+    await configurationTab.enableChannelBanner();
+
+    await configurationTab.save();
+    await settingsModal.closeModal();
+
+    await channelsPage.centerView.assertChannelBanner('Example channel banner text', '#77DD88');
+});
+
+test('Should render markdown', async ({pw}) => {
+    const {adminUser, adminClient} = await pw.initSetup();
+    const license = await adminClient.getClientLicenseOld();
+    test.skip(license.SkuShortName !== 'premium', 'Skipping test - server does not have Premium license');
+
+    const {channelsPage} = await pw.testBrowser.login(adminUser);
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    await channelsPage.newChannel(getRandomId(), 'O');
+
+    const settingsModal = await channelsPage.openChannelSettings();
+    const configurationTab = await settingsModal.openConfigurationTab();
+
+    await configurationTab.enableChannelBanner();
+    await configurationTab.setChannelBannerText('**bold** *italic* ~~strikethrough~~');
+    await configurationTab.setChannelBannerTextColor('#77DD88');
+
+    await configurationTab.save();
+    await settingsModal.closeModal();
+
+    await channelsPage.centerView.assertChannelBannerHasBoldText('bold');
+    await channelsPage.centerView.assertChannelBannerHasItalicText('italic');
+    await channelsPage.centerView.assertChannelBannerHasStrikethroughText('strikethrough');
+});