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/cypress/tests/integration/channels/channel_settings/channel_name_validations_spec.ts

@@ -14,15 +14,13 @@ import * as TIMEOUTS from '../../../fixtures/timeouts';
 import {getRandomId} from '../../../utils';
 
 describe('Channel routing', () => {
-    let testTeam: Cypress.Team;
-    let testUser: Cypress.UserProfile;
-    let testChannel: Cypress.Channel;
+    let testTeam: any;
+    let testUser: any;
 
     before(() => {
-        cy.apiInitSetup().then(({team, user, channel}) => {
+        cy.apiInitSetup().then(({team, user}) => {
             testTeam = team;
             testUser = user;
-            testChannel = channel;
 
             // # Login as test user and go to town square
             cy.apiLogin(testUser);
@@ -34,24 +32,25 @@ describe('Channel routing', () => {
         // # Create new test channel
         cy.uiCreateChannel({name: 'Test__Channel'});
 
-        // # Click on channel menu and press rename channel
-        cy.get('#channelHeaderTitle').click();
+        // # Open channel settings modal from channel header dropdown
+        cy.get('#channelHeaderDropdownButton').click();
+        cy.findByText('Channel Settings').click();
 
-        // * Channel Settings menu option should be visible
-        cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
-        cy.findByText('Rename Channel').click();
+        // # Assert if the channel settings modal is present
+        cy.get('.ChannelSettingsModal').should('be.visible');
 
-        // # Assert if the rename modal present
-        cy.get('[aria-labelledby="renameChannelModalLabel"').should('be.visible').within(() => {
-            // # type the two 26 character strings with 2 underscores between them and click on save
-            cy.get('#channel_name').clear().type('uzsfmtmniifsjgesce4u7yznyh__uzsfmtmniifsjgesce5u7yznyh', {force: true}).wait(TIMEOUTS.HALF_SEC);
-            cy.get('#save-button').should('be.visible').click();
+        // # Click on the URL input button to edit the URL
+        cy.get('.url-input-button').should('be.visible').click({force: true});
 
-            // # Assert the error occurred with the appropriate message
-            cy.get('.input__help').should('have.class', 'error');
-            cy.get('.input__help').should('have.text', 'User IDs are not allowed in channel URLs.');
-            cy.findByText('Cancel').click();
-        });
+        // # Type the two 26 character strings with 2 underscores between them
+        cy.get('.url-input-container input').clear().type('uzsfmtmniifsjgesce4u7yznyh__uzsfmtmniifsjgesce5u7yznyh', {force: true}).wait(TIMEOUTS.HALF_SEC);
+
+        // # Assert the error occurred with the appropriate message
+        cy.get('.SaveChangesPanel').should('contain', 'There are errors in the form above');
+        cy.get('.url-input-error').should('contain', 'User IDs are not allowed in channel URLs.');
+
+        // # Close the modal
+        cy.get('.GenericModal .modal-header button[aria-label="Close"]').click();
     });
 
     it('MM-T884_2 Creating new channel validates against two user IDs being used as channel name', () => {
@@ -97,42 +96,34 @@ describe('Channel routing', () => {
     it('MM-T883 Channel URL validation for spaces between characters', () => {
         const firstWord = getRandomId(26);
         const secondWord = getRandomId(26);
+        const channelName = 'test-channel-' + getRandomId(8);
 
-        // # In a test channel, click the "v" to the right of the channel name in the header
-        cy.findByText(`${testChannel.display_name}`).click();
-        cy.get('#channelHeaderTitle').click();
+        // # Create a new test channel and navigate to it
+        cy.apiCreateChannel(testTeam.id, channelName, 'Test Channel for URL Validation').then(({channel}) => {
+            cy.apiAddUserToChannel(channel.id, testUser.id);
+            cy.visit(`/${testTeam.name}/channels/${channel.name}`);
+        });
 
-        // * Channel Settings menu option should be visible
-        cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
-
-        // # Select "Rename Channel"
-        cy.findByText('Rename Channel').click();
+        // # Open channel settings modal from channel header dropdown
+        cy.get('#channelHeaderDropdownButton').click();
+        cy.findByText('Channel Settings').click();
 
         // # Change the channel name to {26 alphanumeric characters}[insert 2 spaces]{26 alphanumeric characters}
         //   i.e. a total of 54 characters separated by 2 spaces
-        cy.get('#display_name').clear().type(`${firstWord}${Cypress._.repeat(' ', 2)}${secondWord}`);
+        cy.get('#input_channel-settings-name').clear().type(`${firstWord}${Cypress._.repeat(' ', 2)}${secondWord}`);
 
-        // # Hit Save
-        cy.findByText('Save').click();
+        // # Save changes
+        cy.get('[data-testid="SaveChangesPanel__save-btn"]').click();
+
+        // * Verify changes are saved
+        cy.get('.SaveChangesPanel').should('contain', 'Settings saved');
+
+        // # Close the modal
+        cy.get('.GenericModal .modal-header button[aria-label="Close"]').click();
 
         // * The channel name should be updated to the characters you typed with only 1 space between the characters (extra spaces are trimmed)
         cy.get('#channelHeaderTitle').contains(`${firstWord} ${secondWord}`);
 
-        // # In a test channel, click the "v" to the right of the channel name in the header
-        cy.get('#channelHeaderTitle').click();
-
-        // * Channel Settings menu option should be visible
-        cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
-
-        // # Select "Rename Channel"
-        cy.findByText('Rename Channel').click();
-
-        // # Change the URL to {26 alphanumeric characters}--{26 alphanumeric characters}
-        cy.get('#channel_name').clear().type(`${firstWord}${Cypress._.repeat('-', 2)}${secondWord}`);
-
-        // # Hit Save
-        cy.findByText('Save').click();
-
         // * The channel URL should be updated to the characters you typed, separated by 2 dashes
         cy.url().should('equal', `${Cypress.config('baseUrl')}/${testTeam.name}/channels/${firstWord}${Cypress._.repeat('-', 2)}${secondWord}`);
     });