From bff19228e1e572b44eff2e449a4246752ec0f476 Mon Sep 17 00:00:00 2001 From: "Sinan Sonmez (Chaush)" <37421564+sinansonmez@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:46:35 +0100 Subject: [PATCH] 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 --- .../closed_team_invite_by_email_spec.js | 11 +- .../invite_user_to_closed_team_spec.js | 12 +- ...closed_team_with_not_allowed_email_spec.js | 44 +- .../team_settings/remove_team_icon_spec.js | 60 +- .../channels/team_settings/teams_spec.js | 46 +- .../channel_name_form_field.tsx | 2 +- .../channel_notifications_modal.test.tsx.snap | 82 +- .../select_text_input/select_text_input.scss | 9 + .../select_text_input/select_text_input.tsx | 126 ++++ .../src/components/main_menu/index.tsx | 5 +- .../components/main_menu/main_menu.test.tsx | 5 - .../src/components/main_menu/main_menu.tsx | 5 - .../components/payment_form/address_form.tsx | 2 +- .../components/payment_form/payment_form.tsx | 2 +- .../channels/src/components/signup/signup.tsx | 2 +- .../__snapshots__/open_invite.test.tsx.snap | 129 ---- .../team_general_tab.test.tsx.snap | 361 --------- .../team_general_tab/open_invite.test.tsx | 60 -- .../team_general_tab/open_invite.tsx | 160 ---- .../team_general_tab/team_general_tab.scss | 17 - .../team_general_tab.test.tsx | 213 ------ .../team_general_tab/team_general_tab.tsx | 702 ------------------ .../allowed_domains_select.tsx | 83 +++ .../team_settings/team_access_tab/index.ts | 38 + .../team_access_tab/invite_section_input.tsx | 103 +++ .../team_access_tab/open_invite.test.tsx | 53 ++ .../team_access_tab/open_invite.tsx | 76 ++ .../team_access_tab/team_access_tab.scss | 34 + .../team_access_tab/team_access_tab.test.tsx | 123 +++ .../team_access_tab/team_access_tab.tsx | 161 ++++ .../team_info_tab}/index.ts | 25 +- .../team_description_section.tsx | 58 ++ .../team_info_tab/team_info_tab.scss | 26 + .../team_info_tab/team_info_tab.test.tsx | 183 +++++ .../team_info_tab/team_info_tab.tsx | 236 ++++++ .../team_info_tab/team_name_section.tsx | 59 ++ .../team_info_tab/team_picture_section.scss | 61 ++ .../team_info_tab/team_picture_section.tsx | 180 +++++ .../team_settings/team_settings.tsx | 50 +- .../team_settings_modal.test.tsx.snap | 93 --- .../components/team_settings_modal/index.ts | 3 - .../team_settings_modal.test.tsx | 24 +- .../team_settings_modal.tsx | 183 ++--- .../widgets/inputs/input/input.scss | 8 + .../components/widgets/inputs/input/input.tsx | 65 +- .../widgets/inputs/url_input/url_input.tsx | 8 +- .../modals/components/base_setting_item.scss | 29 +- .../modals/components/base_setting_item.tsx | 54 +- .../components/checkbox_setting_item.tsx | 6 + .../modals/components/modal_section.scss | 1 - .../modals/components/modal_section.tsx | 23 +- .../modals/components/save_changes_panel.scss | 114 ++- .../modals/components/save_changes_panel.tsx | 113 ++- webapp/channels/src/i18n/en.json | 39 +- .../src/sass/components/_settings-modal.scss | 2 + .../channels/src/sass/responsive/_mobile.scss | 3 + .../channels/src/sass/routes/_settings.scss | 8 +- webapp/channels/src/utils/utils.tsx | 2 +- webapp/platform/types/src/teams.ts | 1 + 59 files changed, 2254 insertions(+), 2129 deletions(-) create mode 100644 webapp/channels/src/components/common/select_text_input/select_text_input.scss create mode 100644 webapp/channels/src/components/common/select_text_input/select_text_input.tsx delete mode 100644 webapp/channels/src/components/team_general_tab/__snapshots__/open_invite.test.tsx.snap delete mode 100644 webapp/channels/src/components/team_general_tab/__snapshots__/team_general_tab.test.tsx.snap delete mode 100644 webapp/channels/src/components/team_general_tab/open_invite.test.tsx delete mode 100644 webapp/channels/src/components/team_general_tab/open_invite.tsx delete mode 100644 webapp/channels/src/components/team_general_tab/team_general_tab.scss delete mode 100644 webapp/channels/src/components/team_general_tab/team_general_tab.test.tsx delete mode 100644 webapp/channels/src/components/team_general_tab/team_general_tab.tsx create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/allowed_domains_select.tsx create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/index.ts create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/invite_section_input.tsx create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/open_invite.test.tsx create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/open_invite.tsx create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.scss create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.test.tsx create mode 100644 webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx rename webapp/channels/src/components/{team_general_tab => team_settings/team_info_tab}/index.ts (56%) create mode 100644 webapp/channels/src/components/team_settings/team_info_tab/team_description_section.tsx create mode 100644 webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.scss create mode 100644 webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.test.tsx create mode 100644 webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx create mode 100644 webapp/channels/src/components/team_settings/team_info_tab/team_name_section.tsx create mode 100644 webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.scss create mode 100644 webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.tsx delete mode 100644 webapp/channels/src/components/team_settings_modal/__snapshots__/team_settings_modal.test.tsx.snap diff --git a/e2e-tests/cypress/tests/integration/channels/team_settings/closed_team_invite_by_email_spec.js b/e2e-tests/cypress/tests/integration/channels/team_settings/closed_team_invite_by_email_spec.js index 2e1c148b05..f42dd3ccc7 100644 --- a/e2e-tests/cypress/tests/integration/channels/team_settings/closed_team_invite_by_email_spec.js +++ b/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(); diff --git a/e2e-tests/cypress/tests/integration/channels/team_settings/invite_user_to_closed_team_spec.js b/e2e-tests/cypress/tests/integration/channels/team_settings/invite_user_to_closed_team_spec.js index 19cbc1ceff..d9577a58d8 100644 --- a/e2e-tests/cypress/tests/integration/channels/team_settings/invite_user_to_closed_team_spec.js +++ b/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 diff --git a/e2e-tests/cypress/tests/integration/channels/team_settings/join_closed_team_with_not_allowed_email_spec.js b/e2e-tests/cypress/tests/integration/channels/team_settings/join_closed_team_with_not_allowed_email_spec.js index 3753e85dee..894f7daf1e 100644 --- a/e2e-tests/cypress/tests/integration/channels/team_settings/join_closed_team_with_not_allowed_email_spec.js +++ b/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(); diff --git a/e2e-tests/cypress/tests/integration/channels/team_settings/remove_team_icon_spec.js b/e2e-tests/cypress/tests/integration/channels/team_settings/remove_team_icon_spec.js index ba1c0a0389..ca9fb8547e 100644 --- a/e2e-tests/cypress/tests/integration/channels/team_settings/remove_team_icon_spec.js +++ b/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(); + }); } diff --git a/e2e-tests/cypress/tests/integration/channels/team_settings/teams_spec.js b/e2e-tests/cypress/tests/integration/channels/team_settings/teams_spec.js index 02d53bcc52..00fae8e087 100644 --- a/e2e-tests/cypress/tests/integration/channels/team_settings/teams_spec.js +++ b/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); diff --git a/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx b/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx index ae9d9f7fe9..6d208aa017 100644 --- a/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx +++ b/webapp/channels/src/components/channel_name_form_field/channel_name_form_field.tsx @@ -96,7 +96,7 @@ const ChannelNameFormField = (props: Props): JSX.Element => { } }, [props.onURLChange, displayName.current, url, displayNameModified]); - const handleOnURLChange = useCallback((e: React.ChangeEvent) => { + const handleOnURLChange = useCallback((e: React.ChangeEvent) => { e.preventDefault(); const {target: {value: url}} = e; diff --git a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap index d66b237494..d00414fa8d 100644 --- a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap +++ b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap @@ -76,7 +76,7 @@ Object { class="mm-modal-generic-section" >

Turns off notifications for this channel. You’ll still see badges if you’re mentioned.

@@ -121,6 +123,7 @@ Object { >

When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel

@@ -154,7 +158,7 @@ Object { class="mm-modal-generic-section" >

Notify me about…

Notify me about…

Turns off notifications for this channel. You’ll still see badges if you’re mentioned.

@@ -556,6 +567,7 @@ Object { >

When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel

@@ -589,7 +602,7 @@ Object { class="mm-modal-generic-section" >

Notify me about…

Notify me about…

Turns off notifications for this channel. You’ll still see badges if you’re mentioned.

@@ -1008,6 +1028,7 @@ Object { >

When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel

@@ -1041,7 +1063,7 @@ Object { class="mm-modal-generic-section" >

Notify me about…

Notify me about…

Turns off notifications for this channel. You’ll still see badges if you’re mentioned.

@@ -1443,6 +1472,7 @@ Object { >

When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel

@@ -1659,7 +1690,7 @@ Object { class="mm-modal-generic-section" >

Turns off notifications for this channel. You’ll still see badges if you’re mentioned.

@@ -1704,6 +1737,7 @@ Object { >

When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel

@@ -1737,7 +1772,7 @@ Object { class="mm-modal-generic-section" >

Notify me about…

Turns off notifications for this channel. You’ll still see badges if you’re mentioned.

@@ -2085,6 +2125,7 @@ Object { >

When enabled, @channel, @here and @all will not trigger mentions or mention notifications in this channel

@@ -2118,7 +2160,7 @@ Object { class="mm-modal-generic-section" >

Notify me about…

Notify me about…

void; + onChange: (option?: SelectTextInputOption[] | null) => void; + id?: string; + isClearable?: boolean; + description?: string; +} + +const styles = { + control: (baseStyles: CSSProperties) => ({ + ...baseStyles, + background: 'var(--center-channel-color-rgb)', + }), + input: (baseStyles: CSSProperties) => ({ + ...baseStyles, + color: 'rgba(var(--center-channel-color-rgb), 0.64)', + }), + multiValue: (baseStyles: CSSProperties) => ({ + ...baseStyles, + borderRadius: '10px', + background: 'rgba(var(--center-channel-color-rgb), 0.08)', + display: 'flex', + alignItems: 'center', + }), + multiValueLabel: (baseStyles: CSSProperties) => ({ + ...baseStyles, + padding: '4px 6px 4px 10px', + color: 'var(--center-channel-color)', + fontFamily: 'Open Sans', + fontSize: '10px', + fontWeight: 600, + lineHeight: '12px', + letterSpacing: '0.2px', + }), + multiValueRemove: (baseStyles: CSSProperties) => ({ + ...baseStyles, + borderRadius: '50%', + background: 'rgba(var(--center-channel-color-rgb), 0.32)', + fontFamily: 'compass-icons', + fontSize: '12px', + fontWeight: 400, + color: 'white', + width: '10px', + height: '10px', + padding: 0, + marginRight: '4px', + ':hover': { + background: 'rgba(var(--center-channel-color-rgb), 0.32)', + color: 'white', + }, + }), +}; + +const SelectTextInput = ({placeholder, value, handleNewSelection, onChange, id, isClearable, description}: Props) => { + const [inputValue, setInputValue] = React.useState(''); + + const handleTextEnter = useCallback(() => { + // do not add the value if already exists + if (value?.includes(inputValue.trim()) || inputValue.length === 0) { + return; + } + handleNewSelection(inputValue); + setInputValue(''); + }, [handleNewSelection, inputValue, value]); + + const handleKeyDown: KeyboardEventHandler = useCallback((event) => { + if (!inputValue) { + return; + } + switch (event.key) { + case ' ': + case ',': + case 'Enter': + handleTextEnter(); + event.preventDefault(); + } + }, [inputValue, handleTextEnter]); + + const selectValues = useMemo(() => { + return value.map((singleValue) => ({label: singleValue, value: singleValue})); + }, [value]); + + return ( + <> + onChange(value as SelectTextInputOption[]), [onChange])} + inputValue={inputValue} + isMulti={true} + menuIsOpen={false} + onInputChange={setInputValue} + onKeyDown={handleKeyDown} + placeholder={placeholder} + value={selectValues} + onBlur={handleTextEnter} + /> + {description ?

{description}

: undefined} + + ); +}; + +export default SelectTextInput; diff --git a/webapp/channels/src/components/main_menu/index.tsx b/webapp/channels/src/components/main_menu/index.tsx index 78de371585..b5fe13b1f7 100644 --- a/webapp/channels/src/components/main_menu/index.tsx +++ b/webapp/channels/src/components/main_menu/index.tsx @@ -16,9 +16,8 @@ import {haveICurrentTeamPermission, haveISystemPermission} from 'mattermost-redu import { getJoinableTeamIds, getCurrentTeam, - getCurrentRelativeTeamUrl, } from 'mattermost-redux/selectors/entities/teams'; -import {getCurrentUser, isFirstAdmin} from 'mattermost-redux/selectors/entities/users'; +import {getCurrentUser} from 'mattermost-redux/selectors/entities/users'; import {openModal} from 'actions/views/modals'; import {showMentions, showFlaggedPosts, closeRightHandSide, closeMenu as closeRhsMenu} from 'actions/views/rhs'; @@ -83,10 +82,8 @@ function mapStateToProps(state: GlobalState) { isMentionSearch: rhsState === RHSStates.MENTION, teamIsGroupConstrained: Boolean(currentTeam.group_constrained), isLicensedForLDAPGroups: state.entities.general.license.LDAPGroups === 'true', - teamUrl: getCurrentRelativeTeamUrl(state), guestAccessEnabled: config.EnableGuestAccounts === 'true', canInviteTeamMember, - isFirstAdmin: isFirstAdmin(state), isCloud, isStarterFree, isFreeTrial, diff --git a/webapp/channels/src/components/main_menu/main_menu.test.tsx b/webapp/channels/src/components/main_menu/main_menu.test.tsx index 2fb9a5825b..60f700af16 100644 --- a/webapp/channels/src/components/main_menu/main_menu.test.tsx +++ b/webapp/channels/src/components/main_menu/main_menu.test.tsx @@ -52,12 +52,7 @@ describe('components/Menu', () => { moreTeamsToJoin: false, pluginMenuItems: [], isMentionSearch: false, - isFirstAdmin: false, intl: createIntl({locale: 'en', defaultLocale: 'en', timeZone: 'Etc/UTC', textComponent: 'span'}), - teamUrl: '/team', - location: { - pathname: '/team', - }, guestAccessEnabled: true, canInviteTeamMember: true, actions: { diff --git a/webapp/channels/src/components/main_menu/main_menu.tsx b/webapp/channels/src/components/main_menu/main_menu.tsx index 5c5ee790e0..86973fa61c 100644 --- a/webapp/channels/src/components/main_menu/main_menu.tsx +++ b/webapp/channels/src/components/main_menu/main_menu.tsx @@ -61,15 +61,10 @@ export type Props = { teamIsGroupConstrained: boolean; isLicensedForLDAPGroups?: boolean; intl: IntlShape; - teamUrl: string; - isFirstAdmin: boolean; isCloud: boolean; isStarterFree: boolean; isFreeTrial: boolean; usageDeltaTeams: number; - location: { - pathname: string; - }; guestAccessEnabled: boolean; canInviteTeamMember: boolean; actions: { diff --git a/webapp/channels/src/components/payment_form/address_form.tsx b/webapp/channels/src/components/payment_form/address_form.tsx index 2734a0b91b..0d35068a8f 100644 --- a/webapp/channels/src/components/payment_form/address_form.tsx +++ b/webapp/channels/src/components/payment_form/address_form.tsx @@ -35,7 +35,7 @@ const AddressForm = (props: AddressFormProps) => { const handleInputChange = (key: keyof Address) => ( event: | React.ChangeEvent - | React.ChangeEvent, + | React.ChangeEvent, ) => { const target = event.target; const value = target.value; diff --git a/webapp/channels/src/components/payment_form/payment_form.tsx b/webapp/channels/src/components/payment_form/payment_form.tsx index 650e4eebb1..91ffe82166 100644 --- a/webapp/channels/src/components/payment_form/payment_form.tsx +++ b/webapp/channels/src/components/payment_form/payment_form.tsx @@ -65,7 +65,7 @@ const PaymentForm: React.FC = (props: Props) => { company_name: props.customer?.name || '', }); - const handleInputChange = (event: React.ChangeEvent | React.ChangeEvent) => { + const handleInputChange = (event: React.ChangeEvent | React.ChangeEvent) => { const target = event.target; const name = target.name; const value = target.value; diff --git a/webapp/channels/src/components/signup/signup.tsx b/webapp/channels/src/components/signup/signup.tsx index db97e26f94..78d13ecff0 100644 --- a/webapp/channels/src/components/signup/signup.tsx +++ b/webapp/channels/src/components/signup/signup.tsx @@ -679,7 +679,7 @@ const Signup = ({onCustomizeHeader}: SignupProps) => { ); }; - const handleOnBlur = (e: FocusEvent, inputId: string) => { + const handleOnBlur = (e: FocusEvent, inputId: string) => { const text = e.target.value; if (!text) { return; diff --git a/webapp/channels/src/components/team_general_tab/__snapshots__/open_invite.test.tsx.snap b/webapp/channels/src/components/team_general_tab/__snapshots__/open_invite.test.tsx.snap deleted file mode 100644 index de9e758967..0000000000 --- a/webapp/channels/src/components/team_general_tab/__snapshots__/open_invite.test.tsx.snap +++ /dev/null @@ -1,129 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/TeamSettings/OpenInvite should match snapshot on active with groupConstrained 1`] = ` - -
- -
-
, - ] - } - saving={false} - section="" - serverError="" - submit={[Function]} - title="Allow any user with an account on this server to join this team" - updateSection={[Function]} -/> -`; - -exports[`components/TeamSettings/OpenInvite should match snapshot on active without groupConstrained 1`] = ` - - - - -
- -
-
-
- -
-
-
- -
-

, - ] - } - saving={false} - section="" - serverError="" - submit={[Function]} - title="Allow any user with an account on this server to join this team" - updateSection={[Function]} -/> -`; - -exports[`components/TeamSettings/OpenInvite should match snapshot on non active allowing open invite 1`] = ` - -`; - -exports[`components/TeamSettings/OpenInvite should match snapshot on non active with groupConstrained 1`] = ` - -`; - -exports[`components/TeamSettings/OpenInvite should match snapshot on non active without groupConstrained 1`] = ` - -`; diff --git a/webapp/channels/src/components/team_general_tab/__snapshots__/team_general_tab.test.tsx.snap b/webapp/channels/src/components/team_general_tab/__snapshots__/team_general_tab.test.tsx.snap deleted file mode 100644 index 0873db9927..0000000000 --- a/webapp/channels/src/components/team_general_tab/__snapshots__/team_general_tab.test.tsx.snap +++ /dev/null @@ -1,361 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/TeamSettings hide invite code if no permissions for team inviting 1`] = ` -
-
- -

-
- - - -
- -

-
-
-
-

- -

- -
-
- -
- -
- - } - imageContext="team" - loadingPicture={false} - onFileChange={[Function]} - onRemove={[Function]} - onSubmit={[Function]} - serverError="" - src={null} - submitActive={false} - title="Team Icon" - updateSection={[Function]} - /> -
- -
- -
- -
-
-
-`; - -exports[`components/TeamSettings hide invite code if no permissions for team inviting 2`] = ` -
-
- -

-
- - - -
- -

-
-
-
-

- -

- -
-
- -
- -
- - } - imageContext="team" - loadingPicture={false} - onFileChange={[Function]} - onRemove={[Function]} - onSubmit={[Function]} - serverError="" - src={null} - submitActive={false} - title="Team Icon" - updateSection={[Function]} - /> -
- -
- -
-
-
-
-`; - -exports[`components/TeamSettings should match snapshot when team is group constrained 1`] = ` -
-
- -

-
- - - -
- -

-
-
-
-

- -

- -
-
- -
- -
- - } - imageContext="team" - loadingPicture={false} - onFileChange={[Function]} - onRemove={[Function]} - onSubmit={[Function]} - serverError="" - src={null} - submitActive={false} - title="Team Icon" - updateSection={[Function]} - /> -
- -
-
-
-`; diff --git a/webapp/channels/src/components/team_general_tab/open_invite.test.tsx b/webapp/channels/src/components/team_general_tab/open_invite.test.tsx deleted file mode 100644 index 13a5bd0e72..0000000000 --- a/webapp/channels/src/components/team_general_tab/open_invite.test.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {shallow} from 'enzyme'; -import React from 'react'; - -import OpenInvite from './open_invite'; - -describe('components/TeamSettings/OpenInvite', () => { - const patchTeam = jest.fn().mockReturnValue({data: true}); - const onToggle = jest.fn().mockReturnValue({data: true}); - const defaultProps = { - teamId: 'team_id', - isActive: false, - isGroupConstrained: false, - allowOpenInvite: false, - patchTeam, - onToggle, - }; - - test('should match snapshot on non active without groupConstrained', () => { - const props = {...defaultProps}; - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - - test('should match snapshot on non active allowing open invite', () => { - const props = {...defaultProps, allowOpenInvite: true}; - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - - test('should match snapshot on non active with groupConstrained', () => { - const props = {...defaultProps, isGroupConstrained: true}; - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - - test('should match snapshot on active without groupConstrained', () => { - const props = {...defaultProps, isActive: true}; - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - - test('should match snapshot on active with groupConstrained', () => { - const props = {...defaultProps, isActive: true, isGroupConstrained: true}; - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/webapp/channels/src/components/team_general_tab/open_invite.tsx b/webapp/channels/src/components/team_general_tab/open_invite.tsx deleted file mode 100644 index 8ed09d0296..0000000000 --- a/webapp/channels/src/components/team_general_tab/open_invite.tsx +++ /dev/null @@ -1,160 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useCallback, useState} from 'react'; -import {FormattedMessage, useIntl} from 'react-intl'; - -import type {Team} from '@mattermost/types/teams'; - -import type {ActionResult} from 'mattermost-redux/types/actions'; - -import ExternalLink from 'components/external_link'; -import SettingItemMax from 'components/setting_item_max'; -import SettingItemMin from 'components/setting_item_min'; - -type Props = { - teamId: string; - isActive: boolean; - isGroupConstrained?: boolean; - allowOpenInvite?: boolean; - onToggle: (active: boolean) => void; - patchTeam: (patch: Partial & {id: string}) => Promise; -}; - -const OpenInvite = (props: Props) => { - const {teamId, isActive, isGroupConstrained, onToggle, patchTeam} = props; - const intl = useIntl(); - const [serverError, setServerError] = useState(''); - const [allowOpenInvite, setAllowOpenInvite] = useState(props.allowOpenInvite); - - const submit = useCallback(() => { - setServerError(''); - const data = { - id: teamId, - allow_open_invite: allowOpenInvite, - }; - - patchTeam(data).then(({error}) => { - if (error) { - setServerError(error.message); - } else { - onToggle(false); - } - }); - }, [onToggle, patchTeam, teamId, allowOpenInvite]); - - const handleToggle = useCallback(() => { - if (isActive) { - onToggle(false); - } else { - onToggle(true); - setAllowOpenInvite(props.allowOpenInvite); - } - }, [isActive, onToggle]); - - if (!isActive) { - let describe = ''; - if (props.allowOpenInvite) { - describe = intl.formatMessage({id: 'general_tab.yes', defaultMessage: 'Yes'}); - } else if (isGroupConstrained) { - describe = intl.formatMessage({id: 'team_settings.openInviteSetting.groupConstrained', defaultMessage: 'No, members of this team are added and removed by linked groups.'}); - } else { - describe = intl.formatMessage({id: 'general_tab.no', defaultMessage: 'No'}); - } - - return ( - - ); - } - - let inputs; - - if (isGroupConstrained) { - inputs = [ -
-
- ( - - {msg} - - ), - }} - /> -
-
, - ]; - } else { - inputs = [ -
- - - -
- -
-
-
- -
-
-
- -
-
, - ]; - } - - return ( - - ); -}; - -export default OpenInvite; diff --git a/webapp/channels/src/components/team_general_tab/team_general_tab.scss b/webapp/channels/src/components/team_general_tab/team_general_tab.scss deleted file mode 100644 index 9b6fb70ff7..0000000000 --- a/webapp/channels/src/components/team_general_tab/team_general_tab.scss +++ /dev/null @@ -1,17 +0,0 @@ -.GeneralTab__header { - display: flex; - align-items: center; - justify-content: space-between; - margin: 20px 0; - - >h3 { - margin: 0; - - span { - display: inline-flex; - font-size: 20px; - font-weight: 600; - line-height: 28px; - } - } -} diff --git a/webapp/channels/src/components/team_general_tab/team_general_tab.test.tsx b/webapp/channels/src/components/team_general_tab/team_general_tab.test.tsx deleted file mode 100644 index a38bb343ee..0000000000 --- a/webapp/channels/src/components/team_general_tab/team_general_tab.test.tsx +++ /dev/null @@ -1,213 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import {shallow} from 'enzyme'; -import React from 'react'; -import type {ChangeEvent, ComponentProps} from 'react'; - -import {GeneralTab} from 'components/team_general_tab/team_general_tab'; - -import {type MockIntl} from 'tests/helpers/intl-test-helper'; -import {TestHelper} from 'utils/test_helper'; - -describe('components/TeamSettings', () => { - const getTeam = jest.fn().mockResolvedValue({data: true}); - const patchTeam = jest.fn().mockReturnValue({data: true}); - const regenerateTeamInviteId = jest.fn().mockReturnValue({data: true}); - const removeTeamIcon = jest.fn().mockReturnValue({data: true}); - const setTeamIcon = jest.fn().mockReturnValue({data: true}); - const baseActions = { - getTeam, - patchTeam, - regenerateTeamInviteId, - removeTeamIcon, - setTeamIcon, - }; - const defaultProps: ComponentProps = { - team: TestHelper.getTeamMock({id: 'team_id'}), - maxFileSize: 50, - activeSection: 'team_icon', - intl: { - formatMessage: jest.fn(), - } as MockIntl, - updateSection: jest.fn(), - closeModal: jest.fn(), - collapseModal: jest.fn(), - actions: baseActions, - canInviteTeamMembers: true, - isMobileView: false, - }; - - test('should handle bad updateTeamIcon function call', () => { - const wrapper = shallow(); - - wrapper.instance().updateTeamIcon(null as unknown as ChangeEvent); - - expect(wrapper.state('clientError')).toEqual('An error occurred while selecting the image.'); - }); - - test('should handle invalid file selection', () => { - const wrapper = shallow(); - - wrapper.instance().updateTeamIcon({ - target: { - files: [{ - type: 'text/plain', - }], - }, - } as unknown as ChangeEvent); - - expect(wrapper.state('clientError')).toEqual('Only BMP, JPG or PNG images may be used for team icons'); - }); - - test('should handle too large files', () => { - const wrapper = shallow(); - - wrapper.instance().updateTeamIcon({ - target: { - files: [{ - type: 'image/jpeg', - size: defaultProps.maxFileSize + 1, - }], - }, - } as unknown as ChangeEvent); - - expect(wrapper.state('clientError')).toEqual('Unable to upload team icon. File is too large.'); - }); - - test('should call actions.setTeamIcon on handleTeamIconSubmit', () => { - const actions = {...baseActions}; - const props = {...defaultProps, actions}; - const wrapper = shallow(); - - let teamIconFile = null; - wrapper.setState({teamIconFile, submitActive: true}); - wrapper.instance().handleTeamIconSubmit(); - expect(actions.setTeamIcon).not.toHaveBeenCalled(); - - teamIconFile = {file: 'team_icon_file'} as unknown as File; - wrapper.setState({teamIconFile, submitActive: false}); - wrapper.instance().handleTeamIconSubmit(); - expect(actions.setTeamIcon).not.toHaveBeenCalled(); - - wrapper.setState({teamIconFile, submitActive: true}); - wrapper.instance().handleTeamIconSubmit(); - - expect(actions.setTeamIcon).toHaveBeenCalledTimes(1); - expect(actions.setTeamIcon).toHaveBeenCalledWith(props.team?.id, teamIconFile); - }); - - test('should call actions.removeTeamIcon on handleTeamIconRemove', () => { - const actions = {...baseActions}; - const props = {...defaultProps, actions}; - const wrapper = shallow(); - - wrapper.instance().handleTeamIconRemove(); - - expect(actions.removeTeamIcon).toHaveBeenCalledTimes(1); - expect(actions.removeTeamIcon).toHaveBeenCalledWith(props.team?.id); - }); - - test('hide invite code if no permissions for team inviting', () => { - const props = {...defaultProps, canInviteTeamMembers: false}; - - const wrapper1 = shallow(); - const wrapper2 = shallow(); - - expect(wrapper1).toMatchSnapshot(); - expect(wrapper2).toMatchSnapshot(); - }); - - test('should call actions.patchTeam on handleAllowedDomainsSubmit', () => { - const actions = {...baseActions}; - const props = {...defaultProps, actions}; - const wrapper = shallow(); - - wrapper.instance().handleAllowedDomainsSubmit(); - - expect(actions.patchTeam).toHaveBeenCalledTimes(1); - expect(actions.patchTeam).toHaveBeenCalledWith({ - allowed_domains: '', - id: props.team?.id, - }); - }); - - test('should call actions.patchTeam on handleNameSubmit', () => { - const actions = {...baseActions}; - const props = {...defaultProps, actions}; - if (props.team) { - props.team.display_name = 'TestTeam'; - } - - const wrapper = shallow(); - - wrapper.instance().handleNameSubmit(); - - expect(actions.patchTeam).toHaveBeenCalledTimes(1); - expect(actions.patchTeam).toHaveBeenCalledWith({ - display_name: props.team?.display_name, - id: props.team?.id, - }); - }); - - test('should call actions.patchTeam on handleInviteIdSubmit', () => { - const actions = {...baseActions}; - const props = {...defaultProps, actions}; - if (props.team) { - props.team.invite_id = '12345'; - } - - const wrapper = shallow(); - - wrapper.instance().handleInviteIdSubmit(); - - expect(actions.regenerateTeamInviteId).toHaveBeenCalledTimes(1); - expect(actions.regenerateTeamInviteId).toHaveBeenCalledWith(props.team?.id); - }); - - test('should call actions.patchTeam on handleDescriptionSubmit', () => { - const actions = {...baseActions}; - const props = {...defaultProps, actions}; - - const wrapper = shallow(); - - const newDescription = 'The Test Team'; - wrapper.setState({description: newDescription}); - wrapper.instance().handleDescriptionSubmit(); - if (props.team) { - props.team.description = newDescription; - } - - expect(actions.patchTeam).toHaveBeenCalledTimes(1); - expect(actions.patchTeam).toHaveBeenCalledWith({ - description: newDescription, - id: props.team?.id, - }); - }); - - test('should match snapshot when team is group constrained', () => { - const props = {...defaultProps}; - if (props.team) { - props.team.group_constrained = true; - } - - const wrapper = shallow(); - - expect(wrapper).toMatchSnapshot(); - }); - - test('should call actions.getTeam on handleUpdateSection if invite_id is empty', () => { - const actions = {...baseActions}; - const props = {...defaultProps, actions}; - if (props.team) { - props.team.invite_id = ''; - } - - const wrapper = shallow(); - - wrapper.instance().handleUpdateSection('invite_id'); - - expect(actions.getTeam).toHaveBeenCalledTimes(1); - expect(actions.getTeam).toHaveBeenCalledWith(props.team?.id); - }); -}); diff --git a/webapp/channels/src/components/team_general_tab/team_general_tab.tsx b/webapp/channels/src/components/team_general_tab/team_general_tab.tsx deleted file mode 100644 index 9263f1d54c..0000000000 --- a/webapp/channels/src/components/team_general_tab/team_general_tab.tsx +++ /dev/null @@ -1,702 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import type {ChangeEvent, MouseEvent, ReactNode} from 'react'; -import {FormattedMessage, FormattedDate, injectIntl, type WrappedComponentProps} from 'react-intl'; - -import type {Team} from '@mattermost/types/teams'; - -import LearnAboutTeamsLink from 'components/main_menu/learn_about_teams_link'; -import SettingItemMax from 'components/setting_item_max'; -import SettingItemMin from 'components/setting_item_min'; -import SettingPicture from 'components/setting_picture'; -import BackIcon from 'components/widgets/icons/fa_back_icon'; - -import Constants from 'utils/constants'; -import {imageURLForTeam, localizeMessage, moveCursorToEnd} from 'utils/utils'; - -import OpenInvite from './open_invite'; - -import type {PropsFromRedux, OwnProps} from '.'; -import './team_general_tab.scss'; - -const ACCEPTED_TEAM_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/bmp']; - -type Props = PropsFromRedux & OwnProps & WrappedComponentProps; - -type State = { - name?: Team['display_name']; - invite_id?: Team['invite_id']; - description?: Team['description']; - allowed_domains?: Team['allowed_domains']; - serverError: ReactNode; - clientError: ReactNode; - teamIconFile: File | null; - loadingIcon: boolean; - submitActive: boolean; - isInitialState: boolean; - shouldFetchTeam?: boolean; -} - -export class GeneralTab extends React.PureComponent { - constructor(props: Props) { - super(props); - this.state = this.setupInitialState(props); - } - - updateSection = (section: string) => { - this.setState(this.setupInitialState(this.props)); - this.props.updateSection(section); - }; - - setupInitialState(props: Props) { - const team = props.team; - - return { - name: team?.display_name, - invite_id: team?.invite_id, - description: team?.description, - allowed_domains: team?.allowed_domains, - serverError: '', - clientError: '', - teamIconFile: null, - loadingIcon: false, - submitActive: false, - isInitialState: true, - }; - } - - static getDerivedStateFromProps(nextProps: Props, prevState: State) { - const {team} = nextProps; - if (!prevState.isInitialState) { - return { - name: team?.display_name, - description: team?.description, - allowed_domains: team?.allowed_domains, - invite_id: team?.invite_id, - isInitialState: false, - }; - } - return null; - } - - componentDidUpdate(prevProps: Props, prevState: State) { - if (!prevState.shouldFetchTeam && this.state.shouldFetchTeam) { - this.fetchTeam(); - } - } - - fetchTeam() { - if (this.state.serverError) { - return; - } - if (this.props.team) { - this.props.actions.getTeam(this.props.team.id).then(({error}) => { - const state = { - shouldFetchTeam: false, - serverError: '', - }; - if (error) { - state.serverError = error.message; - } - this.setState(state); - }); - } - } - - handleAllowedDomainsSubmit = async () => { - const state = {serverError: '', clientError: ''}; - - const data = { - id: this.props.team?.id, - allowed_domains: this.state.allowed_domains, - }; - const {error} = await this.props.actions.patchTeam(data); - - if (error) { - state.serverError = error.message; - this.setState(state); - } else { - this.updateSection(''); - } - }; - - handleNameSubmit = async () => { - const state: Pick = {serverError: '', clientError: ''}; - let valid = true; - - const name = this.state.name?.trim(); - - if (!name) { - state.clientError = localizeMessage('general_tab.required', 'This field is required'); - valid = false; - } else if (name.length < Constants.MIN_TEAMNAME_LENGTH) { - state.clientError = ( - - ); - - valid = false; - } else { - state.clientError = ''; - } - - this.setState(state); - - if (!valid) { - return; - } - - const data = { - id: this.props.team?.id, - display_name: this.state.name, - }; - const {error} = await this.props.actions.patchTeam(data); - - if (error) { - state.serverError = error.message; - this.setState(state); - } else { - this.updateSection(''); - } - }; - - handleInviteIdSubmit = async () => { - const state = {serverError: '', clientError: ''}; - this.setState(state); - - const {error} = await this.props.actions.regenerateTeamInviteId(this.props.team?.id || ''); - - if (error) { - state.serverError = error.message; - this.setState(state); - } else { - this.updateSection(''); - } - }; - - handleClose = () => this.updateSection(''); - - handleDescriptionSubmit = async () => { - const state = {serverError: '', clientError: ''}; - let valid = true; - - const description = this.state.description?.trim(); - if (description === this.props.team?.description) { - state.clientError = localizeMessage('general_tab.chooseDescription', 'Please choose a new description for your team'); - valid = false; - } else { - state.clientError = ''; - } - - this.setState(state); - - if (!valid) { - return; - } - - const data = { - id: this.props.team?.id, - description: this.state.description, - }; - const {error} = await this.props.actions.patchTeam(data); - - if (error) { - state.serverError = error.message; - this.setState(state); - } else { - this.updateSection(''); - } - }; - - handleTeamIconSubmit = async () => { - if (!this.state.teamIconFile || !this.state.submitActive) { - return; - } - - this.setState({ - loadingIcon: true, - clientError: '', - serverError: '', - }); - - const {error} = await this.props.actions.setTeamIcon(this.props.team?.id || '', this.state.teamIconFile); - - if (error) { - this.setState({ - loadingIcon: false, - serverError: error.message, - }); - } else { - this.setState({ - loadingIcon: false, - submitActive: false, - }); - this.updateSection(''); - } - }; - - handleTeamIconRemove = async () => { - this.setState({ - loadingIcon: true, - clientError: '', - serverError: '', - }); - - const {error} = await this.props.actions.removeTeamIcon(this.props.team?.id || ''); - - if (error) { - this.setState({ - loadingIcon: false, - serverError: error.message, - }); - } else { - this.setState({ - loadingIcon: false, - submitActive: false, - }); - this.updateSection(''); - } - }; - - componentDidMount() { - document.getElementById('team_settings')?.addEventListener('hidden.bs.modal', this.handleClose); - } - - componentWillUnmount() { - document.getElementById('team_settings')?.removeEventListener('hidden.bs.modal', this.handleClose); - } - - onOpenInviteToggle = (active: boolean) => this.handleUpdateSection(active ? 'open_invite' : ''); - - handleUpdateSection = (section: string) => { - if (section === 'invite_id' && this.props.activeSection !== section && !this.props.team?.invite_id) { - this.setState({shouldFetchTeam: true}, () => { - this.updateSection(section); - }); - return; - } - - this.updateSection(section); - }; - - updateName = (e: ChangeEvent) => this.setState({name: e.target.value}); - - updateDescription = (e: ChangeEvent) => this.setState({description: e.target.value}); - - updateTeamIcon = (e: ChangeEvent) => { - if (e && e.target && e.target.files && e.target.files[0]) { - const file = e.target.files[0]; - - if (!ACCEPTED_TEAM_IMAGE_TYPES.includes(file.type)) { - this.setState({ - clientError: localizeMessage('general_tab.teamIconInvalidFileType', 'Only BMP, JPG or PNG images may be used for team icons'), - }); - } else if (file.size > this.props.maxFileSize) { - this.setState({ - clientError: localizeMessage('general_tab.teamIconTooLarge', 'Unable to upload team icon. File is too large.'), - }); - } else { - this.setState({ - teamIconFile: e.target.files[0], - clientError: '', - submitActive: true, - }); - } - } else { - this.setState({ - teamIconFile: null, - clientError: localizeMessage('general_tab.teamIconError', 'An error occurred while selecting the image.'), - }); - } - }; - - updateAllowedDomains = (e: ChangeEvent) => this.setState({allowed_domains: e.target.value}); - - render() { - const team = this.props.team; - - const clientError = this.state.clientError; - const serverError = this.state.serverError ?? null; - - let inviteSection; - - if (this.props.activeSection === 'invite_id' && this.props.canInviteTeamMembers) { - const inputs = []; - - inputs.push( -
-
-
-
- - - - ), - }} - /> -
-
, - ); - - inviteSection = ( - - ); - } else if (this.props.canInviteTeamMembers) { - inviteSection = ( - - ); - } - - let nameSection; - - if (this.props.activeSection === 'name') { - const inputs = []; - - const teamNameLabel = this.props.isMobileView ? '' : ( - - ); - - inputs.push( -
- -
- -
-
, - ); - - const nameExtraInfo = {localizeMessage('general_tab.teamNameInfo', 'Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.')}; - - nameSection = ( - - ); - } else { - const describe = this.state.name; - - nameSection = ( - - ); - } - - let descriptionSection; - - if (this.props.activeSection === 'description') { - const inputs = []; - - const teamDescriptionLabel = this.props.isMobileView ? '' : ( - - ); - - inputs.push( -
- -
- -
-
, - ); - - const descriptionExtraInfo = {localizeMessage('general_tab.teamDescriptionInfo', 'Team description provides additional information to help users select the right team. Maximum of 50 characters.')}; - - descriptionSection = ( - - ); - } else { - const describeMsg = this.state.description ?? ( - - ); - - descriptionSection = ( - - ); - } - - let teamIconSection; - if (this.props.activeSection === 'team_icon') { - const helpText = ( - - ); - teamIconSection = ( - ) => { - this.updateSection(''); - e.preventDefault(); - }} - onFileChange={this.updateTeamIcon} - onSubmit={this.handleTeamIconSubmit} - onRemove={this.handleTeamIconRemove} - helpText={helpText} - /> - ); - } else { - let minMessage; - - if (team?.last_team_icon_update) { - minMessage = ( - - ), - }} - /> - ); - } else { - minMessage = this.props.isMobileView ? localizeMessage('general_tab.teamIconEditHintMobile', 'Click to upload an image') : localizeMessage('general_tab.teamIconEditHint', 'Click \'Edit\' to upload an image.'); - } - - teamIconSection = ( - - ); - } - - let allowedDomainsSection; - - if (this.props.activeSection === 'allowed_domains') { - const inputs = []; - - inputs.push( -
-
- -
-
, - ); - - const allowedDomainsInfo = {localizeMessage('general_tab.AllowedDomainsInfo', 'Users can only join the team if their email matches a specific domain (e.g. "mattermost.com") or list of comma-separated domains (e.g. "corp.mattermost.com, mattermost.com").')}; - - allowedDomainsSection = ( - - ); - } else { - const describeMsg = this.state.allowed_domains ?? ( - - ); - allowedDomainsSection = ( - - ); - } - - return ( -
-
- -

-
- - - -
- -

-
-
-
-

- -

- -
-
- {nameSection} -
- {descriptionSection} -
- {teamIconSection} - {!team?.group_constrained && - <> -
- {allowedDomainsSection} - - } -
- - {!team?.group_constrained && - <> -
- {inviteSection} - - } -
-
-
- ); - } -} - -export default injectIntl(GeneralTab); diff --git a/webapp/channels/src/components/team_settings/team_access_tab/allowed_domains_select.tsx b/webapp/channels/src/components/team_settings/team_access_tab/allowed_domains_select.tsx new file mode 100644 index 0000000000..7468cef11d --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/allowed_domains_select.tsx @@ -0,0 +1,83 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback, useState} from 'react'; +import {defineMessages, useIntl} from 'react-intl'; + +import SelectTextInput, {type SelectTextInputOption} from 'components/common/select_text_input/select_text_input'; +import CheckboxSettingItem from 'components/widgets/modals/components/checkbox_setting_item'; +import {type SaveChangesPanelState} from 'components/widgets/modals/components/save_changes_panel'; + +const translations = defineMessages({ + AllowedDomainsTitle: { + id: 'general_tab.AllowedDomainsTitle', + defaultMessage: 'Users with a specific email domain', + }, + AllowedDomainsInfo: { + id: 'general_tab.AllowedDomainsInfo', + defaultMessage: 'When enabled, users can only join the team if their email matches a specific domain (e.g. "mattermost.org")', + }, + AllowedDomains: { + id: 'general_tab.allowedDomains', + defaultMessage: 'Allow only users with a specific email domain to join this team', + }, +}); + +type Props = { + allowedDomains: string[]; + setAllowedDomains: (domains: string[]) => void; + setHasChanges: (hasChanges: boolean) => void; + setSaveChangesPanelState: (state: SaveChangesPanelState) => void; +} + +const AllowedDomainsSelect = ({allowedDomains, setAllowedDomains, setHasChanges, setSaveChangesPanelState}: Props) => { + const [showAllowedDomains, setShowAllowedDomains] = useState(allowedDomains.length > 0); + const {formatMessage} = useIntl(); + + const handleEnableAllowedDomains = useCallback((enabled: boolean) => { + setShowAllowedDomains(enabled); + if (!enabled) { + setAllowedDomains([]); + } + }, [setAllowedDomains]); + + const updateAllowedDomains = useCallback((domain: string) => { + setHasChanges(true); + setSaveChangesPanelState('editing'); + setAllowedDomains([...allowedDomains, domain]); + }, [allowedDomains, setAllowedDomains, setHasChanges, setSaveChangesPanelState]); + + const handleOnChangeDomains = useCallback((allowedDomainsOptions?: SelectTextInputOption[] | null) => { + setHasChanges(true); + setSaveChangesPanelState('editing'); + setAllowedDomains(allowedDomainsOptions?.map((domain) => domain.value) || []); + }, [setAllowedDomains, setHasChanges, setSaveChangesPanelState]); + return ( + <> + + {showAllowedDomains && + + } + + ); +}; + +export default AllowedDomainsSelect; diff --git a/webapp/channels/src/components/team_settings/team_access_tab/index.ts b/webapp/channels/src/components/team_settings/team_access_tab/index.ts new file mode 100644 index 0000000000..d74f0b8197 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/index.ts @@ -0,0 +1,38 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {connect} from 'react-redux'; +import type {ConnectedProps} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import type {Dispatch} from 'redux'; + +import type {Team} from '@mattermost/types/teams'; + +import {patchTeam, regenerateTeamInviteId} from 'mattermost-redux/actions/teams'; + +import TeamAccessTab from './team_access_tab'; + +export type OwnProps = { + team: Team; + hasChanges: boolean; + hasChangeTabError: boolean; + setHasChanges: (hasChanges: boolean) => void; + setHasChangeTabError: (hasChangesError: boolean) => void; + closeModal: () => void; + collapseModal: () => void; +}; + +function mapDispatchToProps(dispatch: Dispatch) { + return { + actions: bindActionCreators({ + patchTeam, + regenerateTeamInviteId, + }, dispatch), + }; +} + +const connector = connect(null, mapDispatchToProps); + +export type PropsFromRedux = ConnectedProps; + +export default connector(TeamAccessTab); diff --git a/webapp/channels/src/components/team_settings/team_access_tab/invite_section_input.tsx b/webapp/channels/src/components/team_settings/team_access_tab/invite_section_input.tsx new file mode 100644 index 0000000000..bc5ce3044d --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/invite_section_input.tsx @@ -0,0 +1,103 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback, useState, useEffect} from 'react'; +import {defineMessages, useIntl} from 'react-intl'; +import {useSelector} from 'react-redux'; + +import {RefreshIcon} from '@mattermost/compass-icons/components'; +import type {Team} from '@mattermost/types/teams'; + +import {Permissions} from 'mattermost-redux/constants'; +import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles'; +import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams'; +import type {ActionResult} from 'mattermost-redux/types/actions'; + +import Input from 'components/widgets/inputs/input/input'; +import type {BaseSettingItemProps} from 'components/widgets/modals/components/base_setting_item'; +import BaseSettingItem from 'components/widgets/modals/components/base_setting_item'; + +import type {GlobalState} from 'types/store'; + +const translations = defineMessages({ + OpenInviteDescriptionError: { + id: 'team_settings.openInviteDescription.error', + defaultMessage: 'There was an error generating the invite code, please try again', + }, + CodeTitle: { + id: 'general_tab.codeTitle', + defaultMessage: 'Invite Code', + }, + CodeLongDesc: { + id: 'general_tab.codeLongDesc', + defaultMessage: 'The Invite Code is part of the unique team invitation link which is sent to members you’re inviting to this team. Regenerating the code creates a new invitation link and invalidates the previous link.', + }, +}); + +type Props = { + regenerateTeamInviteId: (teamId: string) => Promise; +} + +const InviteSectionInput = ({regenerateTeamInviteId}: Props) => { + const team = useSelector((state: GlobalState) => getCurrentTeam(state)); + const canInviteTeamMembers = useSelector((state: GlobalState) => haveITeamPermission(state, team?.id || '', Permissions.INVITE_USER)); + const [inviteId, setInviteId] = useState(team?.invite_id ?? ''); + const [inviteIdError, setInviteIdError] = useState(); + const {formatMessage} = useIntl(); + + useEffect(() => { + setInviteId(team?.invite_id || ''); + }, [team?.invite_id]); + + const handleRegenerateInviteId = useCallback(async () => { + const {data, error} = await regenerateTeamInviteId(team?.id || ''); + + if (data?.invite_id) { + setInviteId(data.invite_id); + return; + } + + if (error) { + setInviteIdError(translations.OpenInviteDescriptionError); + } + }, [regenerateTeamInviteId, team?.id]); + + if (!canInviteTeamMembers) { + return null; + } + const inviteSectionInput = ( +
+ + +
+ ); + + return ( + + ); +}; + +export default InviteSectionInput; diff --git a/webapp/channels/src/components/team_settings/team_access_tab/open_invite.test.tsx b/webapp/channels/src/components/team_settings/team_access_tab/open_invite.test.tsx new file mode 100644 index 0000000000..3c0fdd8f57 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/open_invite.test.tsx @@ -0,0 +1,53 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {fireEvent, screen} from '@testing-library/react'; +import React, {type ComponentProps} from 'react'; + +import {renderWithContext} from 'tests/react_testing_utils'; + +import OpenInvite from './open_invite'; + +describe('components/TeamSettings/OpenInvite', () => { + const setAllowOpenInvite = jest.fn().mockReturnValue({data: true}); + const defaultProps: ComponentProps = { + isGroupConstrained: false, + allowOpenInvite: false, + setAllowOpenInvite, + }; + + test('should render correct title and link when the team is constrained', () => { + const props = {...defaultProps, isGroupConstrained: true}; + renderWithContext(); + const title = screen.getByText('Users on this server'); + expect(title).toBeInTheDocument(); + const externalLink = screen.getByText('Learn More'); + expect(externalLink).toBeInTheDocument(); + expect(externalLink).toHaveAttribute('href', 'https://mattermost.com/pl/default-ldap-group-constrained-team-channel.html?utm_source=mattermost&utm_medium=in-product&utm_content=open_invite&uid=&sid='); + }); + + test('should render the checkbox when the team is not constrained and not checked', () => { + renderWithContext(); + const checkbox = screen.getByRole('checkbox'); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).not.toBeChecked(); + }); + + test('should render the checkbox when the team is not constrained and checked', () => { + const props = {...defaultProps, allowOpenInvite: true}; + renderWithContext(); + const checkbox = screen.getByRole('checkbox'); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeChecked(); + }); + + test('should call setAllowOpenInvite when the checkbox is clicked', () => { + renderWithContext(); + const checkbox = screen.getByRole('checkbox'); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).not.toBeChecked(); + fireEvent.click(checkbox); + expect(setAllowOpenInvite).toHaveBeenCalledTimes(1); + expect(setAllowOpenInvite).toHaveBeenCalledWith(true); + }); +}); diff --git a/webapp/channels/src/components/team_settings/team_access_tab/open_invite.tsx b/webapp/channels/src/components/team_settings/team_access_tab/open_invite.tsx new file mode 100644 index 0000000000..8e76920b57 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/open_invite.tsx @@ -0,0 +1,76 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {defineMessages, useIntl} from 'react-intl'; + +import ExternalLink from 'components/external_link'; +import BaseSettingItem from 'components/widgets/modals/components/base_setting_item'; +import CheckboxSettingItem from 'components/widgets/modals/components/checkbox_setting_item'; + +type Props = { + allowOpenInvite: boolean; + isGroupConstrained?: boolean; + setAllowOpenInvite: (value: boolean) => void; +}; + +const translations = defineMessages({ + OpenInviteText: { + id: 'general_tab.openInviteText', + defaultMessage: 'Users on this server', + }, + OpenInviteDesc: { + id: 'general_tab.openInviteDesc', + defaultMessage: 'When enabled, a link to this team will be included on the landing page allowing anyone with an account to join this team. Changing this setting will create a new invitation link and invalidate the previous link.', + }, + OpenInviteTitle: { + id: 'general_tab.openInviteTitle', + defaultMessage: 'Allow only users with a specific email domain to join this team', + }, +}); + +const OpenInvite = ({isGroupConstrained, allowOpenInvite, setAllowOpenInvite}: Props) => { + const {formatMessage} = useIntl(); + if (isGroupConstrained) { + const groupConstrainedContent = ( +

{ + formatMessage({ + id: 'team_settings.openInviteDescription.groupConstrained', + defaultMessage: 'Members of this team are added and removed by linked groups. Learn More', + }, { + link: (msg: React.ReactNode) => ( + + {msg} + + ), + })} +

+ ); + return ( + + ); + } + + return ( + + ); +}; + +export default OpenInvite; diff --git a/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.scss b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.scss new file mode 100644 index 0000000000..84105e826a --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.scss @@ -0,0 +1,34 @@ +.modal-access-tab-content { + .divider-light { + margin: 24px 0; + } + + .mm-modal-generic-section-item__content { + margin-top: 24px; + } + + #allowedDomains { + margin-top: 16px; + } + + .access-invite-section { + gap: 0; + + #teamInviteContainer { + display: flex; + align-items: center; + + .Input_container { + margin-right: 8px; + + #teamInviteId { + background-color: unset; + } + } + } + } +} + +.modal-header { + background-color: var(--center-channel-bg); +} diff --git a/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.test.tsx b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.test.tsx new file mode 100644 index 0000000000..9a2d4ade7d --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.test.tsx @@ -0,0 +1,123 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import type {ComponentProps} from 'react'; +import {act} from 'react-dom/test-utils'; + +import {Permissions} from 'mattermost-redux/constants'; + +import {renderWithContext, screen, userEvent} from 'tests/react_testing_utils'; +import {TestHelper} from 'utils/test_helper'; + +import AccessTab from './team_access_tab'; + +describe('components/TeamSettings', () => { + const getTeam = jest.fn().mockResolvedValue({data: true}); + const patchTeam = jest.fn().mockReturnValue({data: true}); + const regenerateTeamInviteId = jest.fn().mockReturnValue({data: true}); + const removeTeamIcon = jest.fn().mockReturnValue({data: true}); + const setTeamIcon = jest.fn().mockReturnValue({data: true}); + const baseActions = { + getTeam, + patchTeam, + regenerateTeamInviteId, + removeTeamIcon, + setTeamIcon, + }; + const defaultProps: ComponentProps = { + team: TestHelper.getTeamMock({id: 'team_id'}), + closeModal: jest.fn(), + actions: baseActions, + hasChanges: true, + hasChangeTabError: false, + setHasChanges: jest.fn(), + setHasChangeTabError: jest.fn(), + collapseModal: jest.fn(), + }; + + test('should not render team invite section if no permissions for team inviting', () => { + const props = {...defaultProps, canInviteTeamMembers: false}; + renderWithContext(); + const inviteContainer = screen.queryByTestId('teamInviteContainer'); + expect(inviteContainer).toBeNull(); + }); + + test('should call regenerateTeamInviteId on handleRegenerateInviteId', () => { + const state = { + entities: { + roles: { + roles: { + team_admin: { + name: 'team_admin', + permissions: [Permissions.INVITE_USER], + }, + }, + }, + users: { + profiles: { + test_user: TestHelper.getUserMock({id: 'test_user', roles: 'team_admin'}), + }, + currentUserId: 'test_user', + }, + teams: { + currentTeamId: 'team_id', + teams: { + team_id: {...defaultProps.team}, + }, + }, + }, + }; + const wrapper = renderWithContext(, state); + wrapper.getByTestId('regenerateButton').click(); + expect(baseActions.regenerateTeamInviteId).toHaveBeenCalledTimes(1); + expect(baseActions.regenerateTeamInviteId).toHaveBeenCalledWith(defaultProps.team?.id); + }); + + test('should not render allowed domains checkbox if no permissions for team inviting', () => { + const props = {...defaultProps, canInviteTeamMembers: false}; + renderWithContext(); + const allowedDomainsCheckbox = screen.queryByTestId('allowedDomainsCheckbox'); + expect(allowedDomainsCheckbox).toBeNull(); + }); + + test('should not show allowed domains input if allowed domains is empty', () => { + const props = {...defaultProps, team: TestHelper.getTeamMock({allowed_domains: ''})}; + renderWithContext(); + const allowedDomainsInput = screen.queryByText('Seperate multiple domains with a space, comma, tab or enter.'); + expect(allowedDomainsInput).toBeNull(); + }); + + test('should show allowed domains input if allowed domains is not empty', () => { + const props = {...defaultProps, team: TestHelper.getTeamMock({allowed_domains: 'test.com'})}; + renderWithContext(); + const allowedDomainsInput = screen.getByText('Seperate multiple domains with a space, comma, tab or enter.'); + expect(allowedDomainsInput).toBeInTheDocument(); + const allowedDomainsInputValue = screen.getByText('test.com'); + expect(allowedDomainsInputValue).toBeInTheDocument(); + }); + + test('should call patchTeam on handleAllowedDomainsSubmit', async () => { + const props = {...defaultProps, team: TestHelper.getTeamMock({allowed_domains: 'test.com'})}; + renderWithContext(); + const allowedDomainsInput = screen.getAllByRole('textbox')[0]; + const newDomain = 'best.com'; + await act(async () => { + await allowedDomainsInput.focus(); + await userEvent.type(allowedDomainsInput, `${newDomain},`); + }); + + const newDomainText = screen.getByText(newDomain); + expect(newDomainText).toBeInTheDocument(); + + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + expect(baseActions.patchTeam).toHaveBeenCalledTimes(1); + expect(baseActions.patchTeam).toHaveBeenCalledWith({ + allowed_domains: 'test.com, best.com', + id: defaultProps.team?.id, + }); + }); +}); diff --git a/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx new file mode 100644 index 0000000000..1bc7d66bd0 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx @@ -0,0 +1,161 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback, useState} from 'react'; +import {useIntl} from 'react-intl'; + +import ModalSection from 'components/widgets/modals/components/modal_section'; +import SaveChangesPanel, {type SaveChangesPanelState} from 'components/widgets/modals/components/save_changes_panel'; + +import AllowedDomainsSelect from './allowed_domains_select'; +import InviteSectionInput from './invite_section_input'; +import OpenInvite from './open_invite'; + +import type {PropsFromRedux, OwnProps} from '.'; + +import './team_access_tab.scss'; + +const generateAllowedDomainOptions = (allowedDomains?: string) => { + if (!allowedDomains || allowedDomains.length === 0) { + return []; + } + const domainList = allowedDomains.includes(',') ? allowedDomains.split(',') : [allowedDomains]; + return domainList.map((domain) => domain.trim()); +}; + +type Props = PropsFromRedux & OwnProps; + +const AccessTab = ({closeModal, collapseModal, hasChangeTabError, hasChanges, setHasChangeTabError, setHasChanges, team, actions}: Props) => { + const [allowedDomains, setAllowedDomains] = useState(() => generateAllowedDomainOptions(team.allowed_domains)); + const [allowOpenInvite, setAllowOpenInvite] = useState(team.allow_open_invite ?? false); + const [saveChangesPanelState, setSaveChangesPanelState] = useState(); + const {formatMessage} = useIntl(); + + const handleAllowedDomainsSubmit = useCallback(async (): Promise => { + const {error} = await actions.patchTeam({ + id: team.id, + allowed_domains: allowedDomains.length === 1 ? allowedDomains[0] : allowedDomains.join(', '), + }); + if (error) { + return false; + } + return true; + }, [actions, allowedDomains, team]); + + const handleOpenInviteSubmit = useCallback(async (): Promise => { + if (allowOpenInvite === team.allow_open_invite) { + return true; + } + const data = { + id: team.id, + allow_open_invite: allowOpenInvite, + }; + + const {error} = await actions.patchTeam(data); + if (error) { + return false; + } + return true; + }, [actions, allowOpenInvite, team]); + + const updateOpenInvite = useCallback((value: boolean) => { + setHasChanges(true); + setSaveChangesPanelState('editing'); + setAllowOpenInvite(value); + }, [setHasChanges]); + + const handleClose = useCallback(() => { + setSaveChangesPanelState('editing'); + setHasChanges(false); + setHasChangeTabError(false); + }, [setHasChangeTabError, setHasChanges]); + + const handleCancel = useCallback(() => { + setAllowedDomains(generateAllowedDomainOptions(team.allowed_domains)); + setAllowOpenInvite(team.allow_open_invite ?? false); + handleClose(); + }, [handleClose, team.allow_open_invite, team.allowed_domains]); + + const collapseModalHandler = useCallback(() => { + if (hasChanges) { + setHasChangeTabError(true); + return; + } + collapseModal(); + }, [collapseModal, hasChanges, setHasChangeTabError]); + + const handleSaveChanges = useCallback(async () => { + const allowedDomainSuccess = await handleAllowedDomainsSubmit(); + const openInviteSuccess = await handleOpenInviteSubmit(); + if (!allowedDomainSuccess || !openInviteSuccess) { + setSaveChangesPanelState('error'); + return; + } + setSaveChangesPanelState('saved'); + setHasChangeTabError(false); + }, [handleAllowedDomainsSubmit, handleOpenInviteSubmit, setHasChangeTabError]); + + return ( + +
+ +

+
+ +
+ {formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})} +

+
+
+ {team.group_constrained ? + undefined : + + } +
+ +
+ {team.group_constrained ? + undefined : + + } + {hasChanges ? + : undefined} +
+ + } + /> + ); +}; +export default AccessTab; diff --git a/webapp/channels/src/components/team_general_tab/index.ts b/webapp/channels/src/components/team_settings/team_info_tab/index.ts similarity index 56% rename from webapp/channels/src/components/team_general_tab/index.ts rename to webapp/channels/src/components/team_settings/team_info_tab/index.ts index f3f3c8af50..9bd4f4e482 100644 --- a/webapp/channels/src/components/team_general_tab/index.ts +++ b/webapp/channels/src/components/team_settings/team_info_tab/index.ts @@ -8,35 +8,29 @@ import type {Dispatch} from 'redux'; import type {Team} from '@mattermost/types/teams'; -import {getTeam, patchTeam, removeTeamIcon, setTeamIcon, regenerateTeamInviteId} from 'mattermost-redux/actions/teams'; -import {Permissions} from 'mattermost-redux/constants'; +import {getTeam, patchTeam, removeTeamIcon, setTeamIcon} from 'mattermost-redux/actions/teams'; import {getConfig} from 'mattermost-redux/selectors/entities/general'; -import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles'; - -import {getIsMobileView} from 'selectors/views/browser'; import type {GlobalState} from 'types/store/index'; -import TeamGeneralTab from './team_general_tab'; +import TeamInfoTab from './team_info_tab'; export type OwnProps = { - updateSection: (section: string) => void; - team: Team & { last_team_icon_update?: number }; - activeSection: string; + team: Team; + hasChanges: boolean; + hasChangeTabError: boolean; + setHasChanges: (hasChanges: boolean) => void; + setHasChangeTabError: (hasChangesError: boolean) => void; closeModal: () => void; collapseModal: () => void; }; -function mapStateToProps(state: GlobalState, ownProps: OwnProps) { +function mapStateToProps(state: GlobalState) { const config = getConfig(state); const maxFileSize = parseInt(config.MaxFileSize ?? '', 10); - const canInviteTeamMembers = haveITeamPermission(state, ownProps.team?.id || '', Permissions.INVITE_USER); - return { maxFileSize, - canInviteTeamMembers, - isMobileView: getIsMobileView(state), }; } @@ -45,7 +39,6 @@ function mapDispatchToProps(dispatch: Dispatch) { actions: bindActionCreators({ getTeam, patchTeam, - regenerateTeamInviteId, removeTeamIcon, setTeamIcon, }, dispatch), @@ -56,4 +49,4 @@ const connector = connect(mapStateToProps, mapDispatchToProps); export type PropsFromRedux = ConnectedProps; -export default connector(TeamGeneralTab); +export default connector(TeamInfoTab); diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_description_section.tsx b/webapp/channels/src/components/team_settings/team_info_tab/team_description_section.tsx new file mode 100644 index 0000000000..cc3891c225 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_info_tab/team_description_section.tsx @@ -0,0 +1,58 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback} from 'react'; +import type {ChangeEvent} from 'react'; +import {defineMessages, useIntl} from 'react-intl'; + +import type {Team} from '@mattermost/types/teams'; + +import Input from 'components/widgets/inputs/input/input'; +import BaseSettingItem, {type BaseSettingItemProps} from 'components/widgets/modals/components/base_setting_item'; + +import Constants from 'utils/constants'; + +const translations = defineMessages({ + TeamDescriptionInfo: { + id: 'general_tab.teamDescriptionInfo', + defaultMessage: 'Team description provides additional information to help users select the right team. Maximum of 50 characters.', + }, +}); + +type Props = { + handleDescriptionChanges: (name: string) => void; + description: Team['description']; + clientError?: BaseSettingItemProps['error']; +}; + +const TeamDescriptionSection = ({handleDescriptionChanges, clientError, description}: Props) => { + const {formatMessage} = useIntl(); + + const updateDescription = useCallback((e: ChangeEvent) => { + handleDescriptionChanges(e.target.value); + }, [handleDescriptionChanges]); + + const descriptionSectionInput = ( + + ); + + return ( + + ); +}; + +export default TeamDescriptionSection; diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.scss b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.scss new file mode 100644 index 0000000000..84ee54ad88 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.scss @@ -0,0 +1,26 @@ +.modal-info-tab-content { + display: flex; + + .name-description-container { + flex: 2; + } + + .description-section-input { + fieldset { + height: 100%; + } + } + + #teamName, + #teamDescription { + background-color: unset; + } + + .description-setting-item { + margin-top: 24px; + } +} + +.modal-header { + background-color: var(--center-channel-bg); +} diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.test.tsx b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.test.tsx new file mode 100644 index 0000000000..d595424f71 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.test.tsx @@ -0,0 +1,183 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {screen} from '@testing-library/react'; +import React from 'react'; +import type {ComponentProps} from 'react'; +import {act} from 'react-dom/test-utils'; + +import {renderWithContext, userEvent} from 'tests/react_testing_utils'; +import Constants from 'utils/constants'; +import {TestHelper} from 'utils/test_helper'; + +import InfoTab from './team_info_tab'; + +describe('components/TeamSettings', () => { + const getTeam = jest.fn().mockResolvedValue({data: true}); + const patchTeam = jest.fn().mockReturnValue({data: true}); + const removeTeamIcon = jest.fn().mockReturnValue({data: true}); + const setTeamIcon = jest.fn().mockReturnValue({data: true}); + const baseActions = { + getTeam, + patchTeam, + removeTeamIcon, + setTeamIcon, + }; + const defaultProps: ComponentProps = { + team: TestHelper.getTeamMock({id: 'team_id', name: 'team_name', display_name: 'team_display_name', description: 'team_description'}), + maxFileSize: 50, + actions: baseActions, + hasChanges: true, + hasChangeTabError: false, + setHasChanges: jest.fn(), + setHasChangeTabError: jest.fn(), + closeModal: jest.fn(), + collapseModal: jest.fn(), + }; + + beforeEach(() => { + global.URL.createObjectURL = jest.fn(); + }); + + test('should show an error when pdf file is uploaded', () => { + renderWithContext(); + const file = new File(['pdf'], 'pdf.pdf', {type: 'application/pdf'}); + const input = screen.getByTestId('uploadPicture'); + userEvent.upload(input, file); + + const error = screen.getByTestId('mm-modal-generic-section-item__error'); + expect(error).toBeVisible(); + expect(error).toHaveTextContent('Only BMP, JPG or PNG images may be used for team icons'); + }); + + test('should show an error when too large file is uploaded with 40mb', () => { + renderWithContext(); + const file = new File(['test'], 'test.png', {type: 'image/png'}); + Object.defineProperty(file, 'size', {value: defaultProps.maxFileSize + 1}); + const input = screen.getByTestId('uploadPicture'); + userEvent.upload(input, file); + + const error = screen.getByTestId('mm-modal-generic-section-item__error'); + expect(error).toBeVisible(); + expect(error).toHaveTextContent('Unable to upload team icon. File is too large.'); + }); + + test('should call setTeamIcon when an image is uploaded and saved', async () => { + renderWithContext(); + const file = new File(['test'], 'test.png', {type: 'image/png'}); + const input = screen.getByTestId('uploadPicture'); + await act(async () => { + userEvent.upload(input, file); + }); + + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + + expect(setTeamIcon).toHaveBeenCalledTimes(1); + expect(setTeamIcon).toHaveBeenCalledWith(defaultProps.team?.id, file); + }); + + test('should call setTeamIcon when an image is removed', async () => { + renderWithContext(); + const file = new File(['test'], 'test.png', {type: 'image/png'}); + const input = screen.getByTestId('uploadPicture'); + await act(async () => { + userEvent.upload(input, file); + }); + + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + + const removeImageButton = screen.getByTestId('removeImageButton'); + await act(async () => { + userEvent.click(removeImageButton); + }); + + expect(removeTeamIcon).toHaveBeenCalledTimes(1); + expect(removeTeamIcon).toHaveBeenCalledWith(defaultProps.team?.id); + }); + + test('should show an error when team name is empty', async () => { + renderWithContext(); + const input = screen.getByTestId('teamNameInput'); + act(() => { + userEvent.clear(input); + }); + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + + const error = screen.getByTestId('mm-modal-generic-section-item__error'); + expect(error).toBeVisible(); + expect(error).toHaveTextContent('This field is required'); + }); + + test('should show an error when team name is too short', async () => { + renderWithContext(); + const input = screen.getByTestId('teamNameInput'); + await act(async () => { + await userEvent.clear(input); + await userEvent.type(input, 'a'); + }); + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + + const error = screen.getByTestId('mm-modal-generic-section-item__error'); + expect(error).toBeVisible(); + expect(error).toHaveTextContent(`Team Name must be ${Constants.MIN_TEAMNAME_LENGTH} or more characters up to a maximum of ${Constants.MAX_TEAMNAME_LENGTH}. You can add a longer team description.`); + }); + + test('should call patchTeam when team name is changed and clicked saved', async () => { + renderWithContext(); + const input = screen.getByTestId('teamNameInput'); + userEvent.clear(input); + userEvent.type(input, 'new_team_name'); + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + + expect(patchTeam).toHaveBeenCalledTimes(1); + expect(patchTeam).toHaveBeenCalledWith({id: defaultProps.team?.id, display_name: 'new_team_name', description: defaultProps.team?.description}); + }); + + test('should call patchTeam when team description is changed and clicked saved', async () => { + renderWithContext(); + const input = screen.getByTestId('teamDescriptionInput'); + await act(async () => { + await userEvent.clear(input); + await userEvent.type(input, 'new_team_description'); + }); + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + + expect(patchTeam).toHaveBeenCalledTimes(1); + expect(patchTeam).toHaveBeenCalledWith({id: defaultProps.team?.id, display_name: defaultProps.team?.display_name, description: 'new_team_description'}); + }); + + test('should call patchTeam when team name and description are change and clicked saved', async () => { + renderWithContext(); + const nameInput = screen.getByTestId('teamNameInput'); + const descriptionInput = screen.getByTestId('teamDescriptionInput'); + userEvent.clear(nameInput); + userEvent.type(nameInput, 'new_team_name'); + userEvent.clear(descriptionInput); + userEvent.type(descriptionInput, 'new_team_description'); + const saveButton = screen.getByTestId('mm-save-changes-panel__save-btn'); + await act(async () => { + userEvent.click(saveButton); + }); + + expect(patchTeam).toHaveBeenCalledTimes(1); + expect(patchTeam).toHaveBeenCalledWith({id: defaultProps.team?.id, display_name: 'new_team_name', description: 'new_team_description'}); + }); +}); diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx new file mode 100644 index 0000000000..5da24c3a99 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx @@ -0,0 +1,236 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback, useState} from 'react'; +import type {ChangeEvent} from 'react'; +import {defineMessages, useIntl} from 'react-intl'; + +import type {Team} from '@mattermost/types/teams'; + +import type {BaseSettingItemProps} from 'components/widgets/modals/components/base_setting_item'; +import ModalSection from 'components/widgets/modals/components/modal_section'; +import SaveChangesPanel, {type SaveChangesPanelState} from 'components/widgets/modals/components/save_changes_panel'; + +import Constants from 'utils/constants'; + +import TeamDescriptionSection from './team_description_section'; +import TeamNameSection from './team_name_section'; +import TeamPictureSection from './team_picture_section'; + +import type {PropsFromRedux, OwnProps} from '.'; + +import './team_info_tab.scss'; + +const ACCEPTED_TEAM_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/bmp']; +const translations = defineMessages({ + Required: { + id: 'general_tab.required', + defaultMessage: 'This field is required', + }, + TeamNameRestrictions: { + id: 'general_tab.teamNameRestrictions', + defaultMessage: 'Team Name must be {min} or more characters up to a maximum of {max}. You can add a longer team description.', + values: {min: Constants.MIN_TEAMNAME_LENGTH, max: Constants.MAX_TEAMNAME_LENGTH}, + }, + TeamIconInvalidFileType: { + id: 'general_tab.teamIconInvalidFileType', + defaultMessage: 'Only BMP, JPG or PNG images may be used for team icons', + }, + TeamIconTooLarge: { + id: 'general_tab.teamIconTooLarge', + defaultMessage: 'Unable to upload team icon. File is too large.', + }, + TeamIconError: { + id: 'general_tab.teamIconError', + defaultMessage: 'An error occurred while selecting the image.', + }, +}); +type Props = PropsFromRedux & OwnProps; + +const InfoTab = ({team, hasChanges, maxFileSize, closeModal, collapseModal, hasChangeTabError, setHasChangeTabError, setHasChanges, actions}: Props) => { + const [name, setName] = useState(team.display_name); + const [description, setDescription] = useState(team.description); + const [teamIconFile, setTeamIconFile] = useState(); + const [loading, setLoading] = useState(false); + const [imageClientError, setImageClientError] = useState(); + const [nameClientError, setNameClientError] = useState(); + const [saveChangesPanelState, setSaveChangesPanelState] = useState(); + const {formatMessage} = useIntl(); + + const handleNameDescriptionSubmit = useCallback(async (): Promise => { + if (name.trim() === team.display_name && description === team.description) { + return true; + } + + if (!name) { + setNameClientError(translations.Required); + return false; + } else if (name.length < Constants.MIN_TEAMNAME_LENGTH) { + setNameClientError(translations.TeamNameRestrictions); + return false; + } + setNameClientError(undefined); + const {error} = await actions.patchTeam({id: team.id, display_name: name, description}); + if (error) { + return false; + } + return true; + }, [actions, description, name, team.description, team.display_name, team.id]); + + const handleTeamIconSubmit = useCallback(async (): Promise => { + if (!teamIconFile) { + return true; + } + setLoading(true); + setImageClientError(undefined); + const {error} = await actions.setTeamIcon(team.id, teamIconFile); + setLoading(false); + if (error) { + return false; + } + return true; + }, [actions, team, teamIconFile]); + + const handleSaveChanges = useCallback(async () => { + const nameDescriptionSuccess = await handleNameDescriptionSubmit(); + const teamIconSuccess = await handleTeamIconSubmit(); + if (!teamIconSuccess || !nameDescriptionSuccess) { + setSaveChangesPanelState('error'); + return; + } + setSaveChangesPanelState('saved'); + setHasChangeTabError(false); + }, [handleNameDescriptionSubmit, handleTeamIconSubmit, setHasChangeTabError]); + + const handleClose = useCallback(() => { + setSaveChangesPanelState('editing'); + setHasChanges(false); + setHasChangeTabError(false); + }, [setHasChangeTabError, setHasChanges]); + + const handleCancel = useCallback(() => { + setName(team.display_name ?? team.name); + setDescription(team.description); + setTeamIconFile(undefined); + setImageClientError(undefined); + setNameClientError(undefined); + handleClose(); + }, [handleClose, team.description, team.display_name, team.name]); + + const handleTeamIconRemove = useCallback(async () => { + setLoading(true); + setImageClientError(undefined); + setTeamIconFile(undefined); + handleClose(); + + const {error} = await actions.removeTeamIcon(team.id); + setLoading(false); + if (error) { + setSaveChangesPanelState('error'); + setHasChanges(true); + setHasChangeTabError(true); + } + }, [actions, handleClose, setHasChangeTabError, setHasChanges, team.id]); + + const updateTeamIcon = useCallback((e: ChangeEvent) => { + if (e && e.target && e.target.files && e.target.files[0]) { + const file = e.target.files[0]; + + if (!ACCEPTED_TEAM_IMAGE_TYPES.includes(file.type)) { + setImageClientError(translations.TeamIconInvalidFileType); + } else if (file.size > maxFileSize) { + setImageClientError(translations.TeamIconTooLarge); + } else { + setTeamIconFile(file); + setImageClientError(undefined); + setSaveChangesPanelState('editing'); + setHasChanges(true); + } + } else { + setTeamIconFile(undefined); + setImageClientError(translations.TeamIconError); + } + }, [maxFileSize, setHasChanges]); + + const handleNameChanges = useCallback((name: string) => { + setHasChanges(true); + setSaveChangesPanelState('editing'); + setName(name); + }, [setHasChanges]); + + const handleDescriptionChanges = useCallback((description: string) => { + setHasChanges(true); + setSaveChangesPanelState('editing'); + setDescription(description); + }, [setHasChanges]); + + const handleCollapseModal = useCallback(() => { + if (hasChanges) { + setHasChangeTabError(true); + return; + } + collapseModal(); + }, [collapseModal, hasChanges, setHasChangeTabError]); + + const modalSectionContent = ( + <> +
+ +

+
+ +
+ {formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})} +

+
+
+
+ + +
+ + {hasChanges ? + : undefined} +
+ + ); + + return ; +}; +export default InfoTab; diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_name_section.tsx b/webapp/channels/src/components/team_settings/team_info_tab/team_name_section.tsx new file mode 100644 index 0000000000..660444f173 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_info_tab/team_name_section.tsx @@ -0,0 +1,59 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback} from 'react'; +import type {ChangeEvent} from 'react'; +import {defineMessages, useIntl} from 'react-intl'; + +import type {Team} from '@mattermost/types/teams'; + +import Input from 'components/widgets/inputs/input/input'; +import BaseSettingItem, {type BaseSettingItemProps} from 'components/widgets/modals/components/base_setting_item'; + +import Constants from 'utils/constants'; + +const translations = defineMessages({ + TeamInfo: { + id: 'general_tab.teamInfo', + defaultMessage: 'Team info', + }, + TeamNameInfo: { + id: 'general_tab.teamNameInfo', + defaultMessage: 'This name will appear on your sign-in screen and at the top of the left sidebar.', + }, +}); + +type Props = { + handleNameChanges: (name: string) => void; + name: Team['display_name']; + clientError: BaseSettingItemProps['error']; +}; + +const TeamNameSection = ({clientError, handleNameChanges, name}: Props) => { + const {formatMessage} = useIntl(); + + const updateName = useCallback((e: ChangeEvent) => handleNameChanges(e.target.value), [handleNameChanges]); + + const nameSectionInput = ( + + ); + + return ( + + ); +}; + +export default TeamNameSection; diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.scss b/webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.scss new file mode 100644 index 0000000000..d621f04d99 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.scss @@ -0,0 +1,61 @@ +.picture-setting-item { + flex: 1; + margin-left: 40px; + + &__remove-button { + display: flex; + align-items: center; + margin-top: 18px; + color: var(--dnd-indicator); + text-align: left; + + svg { + margin-right: 6px; + } + } + + .team-picture-section { + position: relative; + width: fit-content; + + &__team-icon { + display: flex; + width: 120px; + height: 120px; + align-items: center; + justify-content: center; + background-color: var(--sidebar-header-bg); + border-radius: 24px; + cursor: pointer; + } + + &__team-name { + color: #fff; + font-family: Metropolis; + font-size: 56px; + font-style: normal; + font-weight: 600; + line-height: 56px; + text-align: center; + } + + .icon-pencil-outline { + position: absolute; + right: -6px; + bottom: -6px; + padding: 4px; + border: 1px solid rgba(var(--center-channel-color-rgb), 0.16); + background: var(--center-channel-bg, #fff); + border-radius: 20px; + box-shadow: 0 2px 3px 0 var(--elevation-1); + cursor: pointer; + } + + .team-img-preview { + width: 120px; + height: 120px; + border-radius: 24px; + cursor: pointer; + } + } +} diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.tsx b/webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.tsx new file mode 100644 index 0000000000..dcf1c94ee8 --- /dev/null +++ b/webapp/channels/src/components/team_settings/team_info_tab/team_picture_section.tsx @@ -0,0 +1,180 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {type ChangeEvent, useRef, useState, useEffect, useCallback} from 'react'; +import {defineMessages, useIntl} from 'react-intl'; + +import {TrashCanOutlineIcon} from '@mattermost/compass-icons/components'; +import type {Team} from '@mattermost/types/teams'; + +import EditIcon from 'components/widgets/icons/fa_edit_icon'; +import BaseSettingItem from 'components/widgets/modals/components/base_setting_item'; +import type {BaseSettingItemProps} from 'components/widgets/modals/components/base_setting_item'; + +import Constants from 'utils/constants'; +import * as FileUtils from 'utils/file_utils'; +import {imageURLForTeam} from 'utils/utils'; +import './team_picture_section.scss'; + +const translations = defineMessages({ + Title: { + id: 'setting_picture.title', + defaultMessage: 'Team Icon', + }, + Profile: { + id: 'setting_picture.help.profile', + defaultMessage: 'Upload a picture in BMP, JPG, JPEG, or PNG format. Maximum file size: {max}', + values: {max: '50MB'}, + }, +}); + +type Props = { + team: Team; + file?: File | null; + teamName: string; + disabled: boolean; + onFileChange: (e: ChangeEvent) => void; + onRemove: () => void; + clientError?: BaseSettingItemProps['error']; +}; + +const TeamPictureSection = ({team, file, teamName, disabled, onFileChange, onRemove, clientError}: Props) => { + const selectInput = useRef(null); + const [image, setImage] = useState(''); + const [orientationStyles, setOrientationStyles] = useState<{transform: string; transformOrigin: string}>(); + const {formatMessage} = useIntl(); + + const teamImageSource = imageURLForTeam(team); + + const handleInputFile = useCallback(() => { + if (selectInput.current) { + selectInput.current.value = ''; + selectInput.current.click(); + } + }, []); + + const editIcon = () => { + return ( + <> + + + + + + ); + }; + + const teamImage = () => { + if (file) { + const imageStyles = { + backgroundImage: 'url(' + image + ')', + backgroundSize: 'cover', + backgroundRepeat: 'round', + ...orientationStyles, + }; + + return ( +
+ ); + } + if (teamImageSource) { + return ( + + ); + } + return ( +
+ {teamName.charAt(0).toUpperCase() + teamName.charAt(1)} +
+ ); + }; + + const setPicture = (file: File) => { + if (file) { + const previewBlob = URL.createObjectURL(file); + + const reader = new FileReader(); + reader.onload = (e) => { + const orientation = FileUtils.getExifOrientation(e.target!.result! as ArrayBuffer); + const orientationStyles = FileUtils.getOrientationStyles(orientation); + + setImage(previewBlob); + setOrientationStyles(orientationStyles); + }; + reader.readAsArrayBuffer(file); + } + }; + + useEffect(() => { + if (file) { + setPicture(file); + } + }, [file]); + + const removeImageButton = () => { + if (file || teamImageSource) { + return ( + + ); + } + + return null; + }; + + const teamPictureSection = ( + <> +
+ {teamImage()} + {editIcon()} +
+ {removeImageButton()} + + ); + + return ( + + ); +}; + +export default TeamPictureSection; diff --git a/webapp/channels/src/components/team_settings/team_settings.tsx b/webapp/channels/src/components/team_settings/team_settings.tsx index 19b53e1fd5..c3d747b714 100644 --- a/webapp/channels/src/components/team_settings/team_settings.tsx +++ b/webapp/channels/src/components/team_settings/team_settings.tsx @@ -5,24 +5,29 @@ import React from 'react'; import type {Team} from '@mattermost/types/teams'; -import GeneralTab from 'components/team_general_tab'; +import AccessTab from './team_access_tab'; +import InfoTab from './team_info_tab'; type Props = { activeTab: string; - activeSection: string; - updateSection: (section: string) => void; + hasChanges: boolean; + hasChangeTabError: boolean; + setHasChanges: (hasChanges: boolean) => void; + setHasChangeTabError: (hasChangesError: boolean) => void; closeModal: () => void; collapseModal: () => void; - team?: Team; + team: Team; }; const TeamSettings = ({ activeTab = '', - activeSection = '', - updateSection, closeModal, collapseModal, team, + hasChanges, + hasChangeTabError, + setHasChanges, + setHasChangeTabError, }: Props): JSX.Element | null => { if (!team) { return null; @@ -30,17 +35,30 @@ const TeamSettings = ({ let result; switch (activeTab) { - case 'general': + case 'info': result = ( -
- -
+ + ); + break; + case 'access': + result = ( + ); break; default: diff --git a/webapp/channels/src/components/team_settings_modal/__snapshots__/team_settings_modal.test.tsx.snap b/webapp/channels/src/components/team_settings_modal/__snapshots__/team_settings_modal.test.tsx.snap deleted file mode 100644 index 02c1da1c8a..0000000000 --- a/webapp/channels/src/components/team_settings_modal/__snapshots__/team_settings_modal.test.tsx.snap +++ /dev/null @@ -1,93 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/team_settings_modal should match snapshot 1`] = ` - - - - - - - -
-
- - - -
-
- -
-
- - -`; diff --git a/webapp/channels/src/components/team_settings_modal/index.ts b/webapp/channels/src/components/team_settings_modal/index.ts index 0a52f7ce36..ecec6c650f 100644 --- a/webapp/channels/src/components/team_settings_modal/index.ts +++ b/webapp/channels/src/components/team_settings_modal/index.ts @@ -3,8 +3,6 @@ import {connect} from 'react-redux'; -import {getLicense} from 'mattermost-redux/selectors/entities/general'; - import {isModalOpen} from 'selectors/views/modals'; import {ModalIdentifiers} from 'utils/constants'; @@ -17,7 +15,6 @@ function mapStateToProps(state: GlobalState) { const modalId = ModalIdentifiers.TEAM_SETTINGS; return { show: isModalOpen(state, modalId), - isCloud: getLicense(state).Cloud === 'true', }; } diff --git a/webapp/channels/src/components/team_settings_modal/team_settings_modal.test.tsx b/webapp/channels/src/components/team_settings_modal/team_settings_modal.test.tsx index 4e1d756e73..3adb852d37 100644 --- a/webapp/channels/src/components/team_settings_modal/team_settings_modal.test.tsx +++ b/webapp/channels/src/components/team_settings_modal/team_settings_modal.test.tsx @@ -1,35 +1,29 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {shallow} from 'enzyme'; +import {fireEvent, screen} from '@testing-library/react'; import React from 'react'; import TeamSettingsModal from 'components/team_settings_modal/team_settings_modal'; +import {renderWithContext} from 'tests/react_testing_utils'; + describe('components/team_settings_modal', () => { const baseProps = { isCloud: false, onExited: jest.fn(), }; - test('should match snapshot', () => { - const wrapper = shallow( + test('should hide the modal when the close button is clicked', async () => { + renderWithContext( , ); - expect(wrapper).toMatchSnapshot(); - }); - - test('should call onExited callback when the modal is hidden', () => { - const wrapper = shallow( - , - ); - - (wrapper.instance() as TeamSettingsModal).handleHidden(); - expect(baseProps.onExited).toHaveBeenCalledTimes(1); + const modal = screen.getByRole('dialog', {name: 'Close Team Settings'}); + expect(modal.className).toBe('fade in modal'); + fireEvent.click(screen.getByText('Close')); + expect(modal.className).toBe('fade modal'); }); }); diff --git a/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx b/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx index 98dc73f0b3..5a4bc48700 100644 --- a/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx +++ b/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx @@ -1,126 +1,101 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; -import {Modal} from 'react-bootstrap'; +import React, {useState, useRef, useCallback} from 'react'; +import {Modal, type ModalBody} from 'react-bootstrap'; import ReactDOM from 'react-dom'; -import {FormattedMessage} from 'react-intl'; +import {useIntl} from 'react-intl'; import TeamSettings from 'components/team_settings'; -import * as Utils from 'utils/utils'; - const SettingsSidebar = React.lazy(() => import('components/settings_sidebar')); type Props = { onExited: () => void; - isCloud?: boolean; } -export type State = { - activeTab: string; - activeSection: string; - show: boolean; -} +const TeamSettingsModal = ({onExited}: Props) => { + const [activeTab, setActiveTab] = useState('info'); + const [show, setShow] = useState(true); + const [hasChanges, setHasChanges] = useState(false); + const [hasChangeTabError, setHasChangeTabError] = useState(false); + const modalBodyRef = useRef(null); + const {formatMessage} = useIntl(); -export default class TeamSettingsModal extends React.PureComponent { - modalBodyRef: React.RefObject; + const updateTab = useCallback((tab: string) => { + if (hasChanges) { + setHasChangeTabError(true); + return; + } + setActiveTab(tab); + setHasChanges(false); + setHasChangeTabError(false); + }, [hasChanges]); - constructor(props: Props) { - super(props); + const handleHide = useCallback(() => setShow(false), []); - this.state = { - activeTab: 'general', - activeSection: '', - show: true, - }; + const handleClose = useCallback(() => { + setActiveTab('info'); + setHasChanges(false); + setHasChangeTabError(false); + onExited(); + }, [onExited]); - this.modalBodyRef = React.createRef(); - } + const handleCollapse = useCallback(() => { + const el = ReactDOM.findDOMNode(modalBodyRef.current) as HTMLDivElement; + el?.closest('.modal-dialog')!.classList.remove('display--content'); + setActiveTab(''); + }, []); - updateTab = (tab: string) => { - this.setState({ - activeTab: tab, - activeSection: '', - }); - }; + const tabs = [ + {name: 'info', uiName: formatMessage({id: 'team_settings_modal.infoTab', defaultMessage: 'Info'}), icon: 'icon icon-information-outline', iconTitle: formatMessage({id: 'generic_icons.info', defaultMessage: 'Info Icon'})}, + {name: 'access', uiName: formatMessage({id: 'team_settings_modal.accessTab', defaultMessage: 'Access'}), icon: 'icon icon-account-multiple-outline', iconTitle: formatMessage({id: 'generic_icons.member', defaultMessage: 'Member Icon'})}, + ]; - updateSection = (section: string) => { - this.setState({activeSection: section}); - }; - - collapseModal = () => { - const el = ReactDOM.findDOMNode(this.modalBodyRef.current) as HTMLDivElement; - const modalDialog = el.closest('.modal-dialog'); - modalDialog?.classList.remove('display--content'); - - this.setState({ - activeTab: '', - activeSection: '', - }); - }; - - handleHide = () => { - this.setState({show: false}); - }; - - // called after the dialog is fully hidden and faded out - handleHidden = () => { - this.setState({ - activeTab: 'general', - activeSection: '', - }); - this.props.onExited(); - }; - - render() { - const tabs = []; - tabs.push({name: 'general', uiName: Utils.localizeMessage('team_settings_modal.generalTab', 'General'), icon: 'icon icon-settings-outline', iconTitle: Utils.localizeMessage('generic_icons.settings', 'Settings Icon')}); - - return ( - + - - - - - - -
-
- - - -
-
- + {formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})} + + + +
+
+ + -
+
- - - ); - } -} +
+ +
+
+ + + ); +}; + +export default TeamSettingsModal; diff --git a/webapp/channels/src/components/widgets/inputs/input/input.scss b/webapp/channels/src/components/widgets/inputs/input/input.scss index eb1fdcb451..1440114afc 100644 --- a/webapp/channels/src/components/widgets/inputs/input/input.scss +++ b/webapp/channels/src/components/widgets/inputs/input/input.scss @@ -17,6 +17,10 @@ .Input_container { width: 100%; + textarea { + resize: none; + } + .Input { position: relative; left: 0; @@ -58,6 +62,10 @@ > :not(:first-child) { margin-left: 8px; } + + textarea { + margin-top: 6px; + } } .Input_limit-exceeded { diff --git a/webapp/channels/src/components/widgets/inputs/input/input.tsx b/webapp/channels/src/components/widgets/inputs/input/input.tsx index 5753f9f1c8..4e360a0c48 100644 --- a/webapp/channels/src/components/widgets/inputs/input/input.tsx +++ b/webapp/channels/src/components/widgets/inputs/input/input.tsx @@ -21,7 +21,7 @@ export enum SIZE { export type CustomMessageInputType = {type: 'info' | 'error' | 'warning' | 'success'; value: React.ReactNode} | null; -interface InputProps extends React.InputHTMLAttributes { +interface InputProps extends React.InputHTMLAttributes { required?: boolean; hasError?: boolean; addon?: React.ReactElement; @@ -71,7 +71,7 @@ const Input = React.forwardRef(( onClear, ...otherProps }: InputProps, - ref?: React.Ref, + ref?: React.Ref, ) => { const {formatMessage} = useIntl(); @@ -94,7 +94,7 @@ const Input = React.forwardRef(( } }, [customMessage]); - const handleOnFocus = (event: React.FocusEvent) => { + const handleOnFocus = (event: React.FocusEvent) => { setFocused(true); if (onFocus) { @@ -102,7 +102,7 @@ const Input = React.forwardRef(( } }; - const handleOnBlur = (event: React.FocusEvent) => { + const handleOnBlur = (event: React.FocusEvent) => { setFocused(false); validateInput(); @@ -111,7 +111,7 @@ const Input = React.forwardRef(( } }; - const handleOnChange = (event: React.ChangeEvent) => { + const handleOnChange = (event: React.ChangeEvent) => { setCustomInputLabel(null); if (onChange) { @@ -157,6 +157,45 @@ const Input = React.forwardRef((
) : null; + const generateInput = () => { + if (otherProps.type === 'textarea') { + return ( +