MM-41586: Team setting modal UI update (#25729)

* add new sections

* remove section related code

* add some todos

* convert team setting to functional component

* remove unused props from main_menu

* remove unused collapseModal

* create 2 sections files

* clean info section

* cleanup access tab

* further clean team info setting component

* fix input fields

* fix description input field

* reorganize files

* add team icon when there is no team image

* improve layout

* fix autofocus

* delete empty file

* add note related to learna bout teams link

* add edit icon

* add upload functionality

* finish image upload

* implement logic for handle save

* add remove icon button

* fix remove button color

* fix styling on image remove and upload

* fix image remove feature

* show remove image button dynamically

* fix height

* update haveImageChanges on handleTeamIconRemove cl

* fix spacing inside input

* fix cursor point

* access tab basis

* add some todo

* add baseline for client error

* handle desc and image client errors

* move folders

* rename section to tab

* move the name section to new file

* dedicated description component

* dedicated image section

* convert to functional component

* remove unnecessary fetchTeam

* remove havechanges  state

* remove not needed folder

* rename from section to tab

* convert access tab to FC

* fix invite section input

* finalize team invite code section

* add checkbox

* add select_text_input

* finish allowed domains

* fix save changes panel style

* convert open_invite

* add logic for show save changes panel globally

* handle server errors

* combine client errors

* fix save changes issue

* clean colors used in css

* fix style

* fix type issues

* fix another type

* fix allowed domains

* fix type error

* add save changes panel to access tab

* add success state to save changes panel

* remove unused prop

* cleanup css

* fix save changes modal position

* fix title font size

* remove not used prop

* fix mobile view width

* fix mobile view

* add group constraint text

* handle invite code error

* update snapshots

* fix input height

* fix tests

* write tests for open_invite

* write tests for team_info_tab

* write tests for team_access_tab

* Refactor setTeamIcon test in teams.test.ts

* Refactor team access and team info tabs for save changes panel

* Add useEffect hook to set inviteId in AccessTab component

* fix lint

* fix lint

* fix i18

* remove old todo

* fix text

* fix css

* fix css

* fix padding

* fix mobile view

* update snapshot

* performance improvements

* fix type

* improve translation passing to components

* fix lint

* rename saving to editing

* fix empty allowed domains

* complete renaming of saving

* seperate AllowedDomainsSelect

* seperate InviteSectionInput

* fix i18n

* capitalize translation id

* final fix for i18n

* remove empty file

* fix lint and test

* fix rgb values

* remove action related types from index file

* add last_team_icon_update to Team type

* fix unnecessary null check operator

* fix more types

* add new features for text selector

* update text for select text input

* fix style issues on save changes

* fix lint check

* add animation for save changes panel

* remove unused type

* fix test

* fix theming issues

* fix MM-T385

* fix MM-T388

* fix MM-T387 and MM-T2341

* fix MM-T391

* Fix MM-T2318, MM-T2317, MM-T2312, MM-T2322, MM-T2335

* fix top padding

---------

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

e2e-tests/cypress/tests/integration/channels/team_settings/closed_team_invite_by_email_spec.js

@@ -59,13 +59,16 @@ describe('Team Settings', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            cy.get('#open_inviteDesc').should('have.text', 'No');
+            // # Go to Access section
+            cy.get('#accessButton').click();
 
-            // # Click on the 'Allow only users with a specific email domain to join this team' edit button
-            cy.get('#allowed_domainsEdit').should('be.visible').click();
+            cy.get('.access-allowed-domains-section').should('exist').within(() => {
+                // # Click on the 'Allow only users with a specific email domain to join this team' checkbox
+                cy.get('.mm-modal-generic-section-item__input-checkbox').should('not.be.checked').click();
+            });
 
             // * Verify that the '#allowedDomains' input field is empty
-            cy.get('#allowedDomains').should('be.empty');
+            cy.get('#allowedDomains').should('have.text', 'corp.mattermost.com, mattermost.com');
 
             // # Close the modal
             cy.get('#teamSettingsModalLabel').find('button').should('be.visible').click();

e2e-tests/cypress/tests/integration/channels/team_settings/invite_user_to_closed_team_spec.js

@@ -38,12 +38,16 @@ describe('Team Settings', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            // # Click on the 'Allow only users with a specific email domain to join this team' edit button
-            cy.get('#allowed_domainsEdit').should('be.visible').click();
+            // # Go to Access section
+            cy.get('#accessButton').click();
+
+            cy.get('.access-allowed-domains-section').should('exist').within(() => {
+                // # Click on the 'Allow only users with a specific email domain to join this team' checkbox
+                cy.get('.mm-modal-generic-section-item__input-checkbox').should('not.be.checked').click();
+            });
 
             // # Set 'sample.mattermost.com' as the only allowed email domain and save
-            cy.wait(TIMEOUTS.HALF_SEC);
-            cy.focused().type(emailDomain);
+            cy.get('#allowedDomains').click().type(emailDomain).type(' ');
             cy.findByText('Save').should('be.visible').click();
 
             // # Close the modal

e2e-tests/cypress/tests/integration/channels/team_settings/join_closed_team_with_not_allowed_email_spec.js

@@ -11,7 +11,6 @@
 // Group: @channels @team_settings
 
 import {getRandomId, stubClipboard} from '../../../utils';
-import * as TIMEOUTS from '../../../fixtures/timeouts';
 
 describe('Team Settings', () => {
     const randomId = getRandomId();
@@ -47,15 +46,22 @@ describe('Team Settings', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            // # Click on the 'Allow only users with a specific email domain to join this team' edit button
-            cy.get('#allowed_domainsEdit').should('be.visible').click();
+            // # Go to Access section
+            cy.get('#accessButton').click();
 
-            // # Set 'sample.mattermost.com' as the only allowed email domain, save then close
-            cy.wait(TIMEOUTS.HALF_SEC);
-            cy.focused().type(emailDomain);
-            cy.uiSaveAndClose();
+            // # Click on the 'Allow only users with a specific email domain to join this team' edit button
+            cy.get('.access-allowed-domains-section').should('exist').within(() => {
+                // # Click on the 'Allow only users with a specific email domain to join this team' checkbox
+                cy.get('.mm-modal-generic-section-item__input-checkbox').should('not.be.checked').click();
+            });
+
+            // # Set 'sample.mattermost.com' as the only allowed email domain and save
+            cy.get('#allowedDomains').click().type(emailDomain).type(' ');
+            cy.findByText('Save').should('be.visible').click();
         });
 
+        cy.uiClose();
+
         // # Open team menu and click 'Invite People'
         cy.uiOpenTeamMenu('Invite People');
 
@@ -92,26 +98,26 @@ describe('Team Settings', () => {
 
         // * Check that the 'Team Settings' modal was opened
         cy.get('#teamSettingsModal').should('exist').within(() => {
-            // # Click on the 'Allow any user with an account on this server to join this team' edit button
-            cy.get('#open_inviteEdit').should('be.visible').click();
+            // # Go to Access section
+            cy.get('#accessButton').click();
 
-            // # Enable any user with an account on the server to join the team
-            cy.get('#teamOpenInvite').should('be.visible').check();
-
-            // # Save and verify it took effect
-            cy.uiSave();
-            cy.get('#open_inviteDesc').should('be.visible').and('have.text', 'Yes');
+            cy.get('.access-invite-domains-section').should('exist').within(() => {
+                // # Enable any user with an account on the server to join the team
+                cy.get('.mm-modal-generic-section-item__input-checkbox').should('not.be.checked').click();
+            });
 
             // # Click on the 'Allow only users with a specific email domain to join this team' edit button
-            cy.get('#allowed_domainsEdit').should('be.visible').click();
+            cy.get('.access-allowed-domains-section').should('exist').within(() => {
+                // # Click on the 'Allow only users with a specific email domain to join this team' checkbox
+                cy.get('.mm-modal-generic-section-item__input-checkbox').should('not.be.checked').click();
+            });
 
             // # Set 'sample.mattermost.com' as the only allowed email domain and save
-            cy.wait(TIMEOUTS.HALF_SEC);
-            cy.findByRole('textbox', {name: 'Allowed Domains'}).should('be.visible').and('be.focused').type(emailDomain);
+            cy.get('#allowedDomains').click().type(emailDomain).type(' ');
+            cy.findByText('Save').should('be.visible').click();
 
             // # Save and verify it took effect
             cy.uiSave();
-            cy.get('#allowed_domainsDesc').should('be.visible').and('have.text', emailDomain);
 
             // # Close the modal
             cy.uiClose();

e2e-tests/cypress/tests/integration/channels/team_settings/remove_team_icon_spec.js

@@ -28,56 +28,34 @@ describe('Teams Settings', () => {
         // # Open team settings dialog
         openTeamSettingsDialog();
 
-        // * Verify the settings picture button is visible to click
-        cy.findByTestId('inputSettingPictureButton').should('be.visible').click();
-
-        // * Before uploading the picture the save button must be disabled
-        cy.uiSaveButton().should('be.disabled');
-
         // # Upload a file on center view
         cy.findByTestId('uploadPicture').attachFile('mattermost-icon.png');
 
-        // * Save then close
-        cy.uiSaveAndClose();
+        // * Save
+        cy.uiSave();
 
         // * Verify team icon
-        cy.get(`#${testTeam.name}TeamButton`).within(() => {
-            cy.findByTestId('teamIconImage').should('be.visible');
-            cy.findByTestId('teamIconInitial').should('not.exist');
-        });
-
-        // # Open the team settings dialog
-        openTeamSettingsDialog();
-
-        // # Click on 'X' icon to remove the image
-        cy.findByTestId('removeSettingPicture').should('be.visible').click();
-
-        // # Click on the cancel button
-        cy.findByTestId('cancelSettingPicture').should('be.visible').click();
+        cy.get('#teamIconImage').should('be.visible');
+        cy.get('#teamIconInitial').should('not.exist');
 
         // # Close the team settings dialog
         cy.uiClose();
 
-        // * Verify the team icon image is visible and initial team holder is not visible
-        cy.get(`#${testTeam.name}TeamButton`).within(() => {
-            cy.findByTestId('teamIconImage').should('be.visible');
-            cy.findByTestId('teamIconInitial').should('not.exist');
-        });
-
-        // # Open team settings dialog
+        // # Open the team settings dialog
         openTeamSettingsDialog();
 
-        // # Click on 'X' icon to remove the image
-        cy.findByTestId('removeSettingPicture').should('be.visible').click();
+        // # Click on 'Remove Image' button to remove the image
+        cy.findByTestId('removeImageButton').should('be.visible').click();
 
-        // # Save and close the modal
-        cy.uiSaveAndClose();
+        // # Close the modal
+        cy.uiClose();
+
+        // # Open the team settings dialog
+        openTeamSettingsDialog();
 
         // * After removing the team icon initial team holder is visible but not team icon holder
-        cy.get(`#${testTeam.name}TeamButton`).within(() => {
-            cy.findByTestId('teamIconImage').should('not.exist');
-            cy.findByTestId('teamIconInitial').should('be.visible');
-        });
+        cy.get('#teamIconImage').should('not.exist');
+        cy.get('#teamIconInitial').should('be.visible');
     });
 });
 
@@ -88,9 +66,11 @@ function openTeamSettingsDialog() {
     // * Verify the team settings dialog is open
     cy.get('#teamSettingsModalLabel').should('be.visible').and('contain', 'Team Settings');
 
-    // * Verify the edit icon is visible
-    cy.get('#team_iconEdit').should('be.visible');
+    cy.get('.team-picture-section').within(() => {
+        // * Verify the edit icon is visible
+        cy.get('.icon-pencil-outline').should('be.visible');
 
-    // # Click on edit button
-    cy.get('#team_iconEdit').click();
+        // # Click on edit button
+        cy.get('.icon-pencil-outline').click();
+    });
 }

e2e-tests/cypress/tests/integration/channels/team_settings/teams_spec.js

@@ -186,6 +186,9 @@ describe('Teams Suite', () => {
         // # Open team menu and click "Team Settings"
         cy.uiOpenTeamMenu('Team Settings');
 
+        // # Go to Access section
+        cy.get('#accessButton').click();
+
         // # Open edit settings for invite code
         cy.findByText('Invite Code').should('be.visible').click();
 
@@ -213,11 +216,8 @@ describe('Teams Suite', () => {
         // # Change team name in the input
         cy.get('#teamName').should('be.visible').clear().type(teamName);
 
-        // Save new team name
-        cy.findByText(/save/i).click();
-
-        // # Close the team settings
-        cy.get('body').typeWithForce('{esc}');
+        // Save new team name annd close<
+        cy.uiSaveAndClose();
 
         // Team display name shows as "Testing Team" at top of team menu
         cy.uiGetLHSHeader().findByText(teamName);
@@ -238,9 +238,6 @@ describe('Teams Suite', () => {
         // # Open team menu and click "Team Settings"
         cy.uiOpenTeamMenu('Team Settings');
 
-        // # Click on the team description menu item
-        cy.findByText('Team Description').should('be.visible').click();
-
         // # Change team description in the input
         cy.get('#teamDescription').should('be.visible').clear().type(teamDescription);
         cy.get('#teamDescription').should('have.value', teamDescription);
@@ -252,7 +249,7 @@ describe('Teams Suite', () => {
         cy.uiOpenTeamMenu('Team Settings');
 
         // * Verify team description is updated
-        cy.get('#descriptionDesc').should('have.text', teamDescription);
+        cy.get('#teamDescription').should('have.text', teamDescription);
     });
 
     it('MM-T2318 Allow anyone to join this team', () => {
@@ -262,17 +259,16 @@ describe('Teams Suite', () => {
         // # Open team menu and click "Team Settings"
         cy.uiOpenTeamMenu('Team Settings');
 
-        // # Click on the team description menu item
-        cy.findByText('Allow any user with an account on this server to join this team').should('be.visible').click();
+        // # Go to Access section
+        cy.get('#accessButton').click();
 
-        // # Change team description in the input
-        cy.get('#teamOpenInvite').click();
+        cy.get('.access-invite-domains-section').should('exist').within(() => {
+            // # Click on the 'Allow any user with an account on this server to join this team' checkbox
+            cy.get('.mm-modal-generic-section-item__input-checkbox').should('not.be.checked').click();
+        });
 
-        // Save new team description
-        cy.findByText(/save/i).click();
-
-        // # Close the team settings
-        cy.get('body').typeWithForce('{esc}');
+        // # Save and close
+        cy.uiSaveAndClose();
 
         // # Login as new user
         cy.apiLogin(newUser);
@@ -302,14 +298,16 @@ describe('Teams Suite', () => {
         // # Open team menu and click "Team Settings"
         cy.uiOpenTeamMenu('Team Settings');
 
-        // # Click on the team description menu item
-        cy.findByText('Allow any user with an account on this server to join this team').should('be.visible').click();
+        // # Go to Access section
+        cy.get('#accessButton').click();
 
-        // # Change team description in the input
-        cy.get('#teamOpenInviteNo').click();
+        cy.get('.access-invite-domains-section').should('exist').within(() => {
+            // # Click on the 'Allow any user with an account on this server to join this team' checkbox
+            cy.get('.mm-modal-generic-section-item__input-checkbox').should('not.be.checked');
+        });
 
-        // Save new team description and close team settings
-        cy.uiSaveAndClose();
+        // # Save and close
+        cy.uiClose();
 
         // # Login as new user
         cy.apiLogin(testUser);