From 812689030be6fbb3837c397143de23a43bef2df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20Andr=C3=A9s=20V=C3=A9lez=20Vidal?= Date: Wed, 26 Apr 2023 18:09:22 +0200 Subject: [PATCH] Mm 50013 - readd invite members screen cloud version (#22971) * MM-50013-readd-invite-members-screen-cloud-version * add the copy invite and fade in the skip buttons * unify cloud and self hosted version * add logic to send emails, and finish launching workspace * fix styles * remove unintended change * fix translations * fix unit tests * fix styles * fix styles --------- Co-authored-by: Mattermost Build --- .../invite_members.test.tsx.snap | 140 +++++++++++- .../invite_members_link.test.tsx.snap | 20 ++ .../preparing_workspace/invite_members.scss | 49 ++++- .../invite_members.test.tsx | 28 +++ .../preparing_workspace/invite_members.tsx | 200 +++++++++++++++--- .../invite_members_link.scss | 44 ++-- .../invite_members_link.test.tsx | 33 ++- .../invite_members_link.tsx | 36 ++-- .../preparing_workspace/plugins.tsx | 38 +--- .../preparing_workspace.scss | 1 + .../preparing_workspace.tsx | 35 +-- webapp/channels/src/i18n/en.json | 8 +- webapp/channels/src/sass/base/_structure.scss | 1 - 13 files changed, 516 insertions(+), 117 deletions(-) diff --git a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap b/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap index 4aa2442f0a..eabb389cb1 100644 --- a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap +++ b/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap @@ -71,7 +71,145 @@ exports[`InviteMembers component should match snapshot 1`] = `
+
+ + + +`; + +exports[`InviteMembers component should match snapshot when it is cloud 1`] = ` +
+
+
+
+
+
+ Previous step +
+

+ + Who works with you? + +

+

+ + Collaboration is tough by yourself. Invite a few team members. Separate each email address with a space or comma. + +

+
+
+ +

+   + +

+

+   + 0 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu. +

+ +
+
+
+ Enter email addresses +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
diff --git a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members_link.test.tsx.snap b/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members_link.test.tsx.snap index 0610646391..1abd12f11b 100644 --- a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members_link.test.tsx.snap +++ b/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members_link.test.tsx.snap @@ -1,6 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`components/preparing-workspace/invite_members_link should match snapshot 1`] = ` +
+
+ +
+
+`; + +exports[`components/preparing-workspace/invite_members_link should match snapshot when displayed including the input field 1`] = `
{ let defaultProps: ComponentProps; + const setEmailsFn = jest.fn(); beforeEach(() => { defaultProps = { @@ -21,8 +22,12 @@ describe('InviteMembers component', () => { onPageView: jest.fn(), previous:
{'Previous step'}
, next: jest.fn(), + setEmails: setEmailsFn, show: true, transitionDirection: 'forward', + inferredProtocol: null, + isSelfHosted: true, + emails: [], }; }); @@ -32,6 +37,17 @@ describe('InviteMembers component', () => { expect(container).toMatchSnapshot(); }); + it('should match snapshot when it is cloud', () => { + const component = withIntl( + , + ); + const {container} = render(component); + expect(container).toMatchSnapshot(); + }); + it('renders invite URL', () => { const component = withIntl(); render(component); @@ -68,4 +84,16 @@ describe('InviteMembers component', () => { fireEvent.click(button); expect(defaultProps.next).toHaveBeenCalled(); }); + + it('shows send invites button when in cloud', () => { + const component = withIntl( + , + ); + render(component); + const button = screen.getByRole('button', {name: 'Send invites'}); + expect(button).toBeInTheDocument(); + }); }); diff --git a/webapp/channels/src/components/preparing_workspace/invite_members.tsx b/webapp/channels/src/components/preparing_workspace/invite_members.tsx index a018c2a446..4ad7cb886c 100644 --- a/webapp/channels/src/components/preparing_workspace/invite_members.tsx +++ b/webapp/channels/src/components/preparing_workspace/invite_members.tsx @@ -1,9 +1,16 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useMemo, useEffect} from 'react'; +import React, {useState, useMemo, useEffect} from 'react'; import {CSSTransition} from 'react-transition-group'; -import {FormattedMessage} from 'react-intl'; +import {FormattedMessage, useIntl} from 'react-intl'; + +import {UserProfile} from '@mattermost/types/users'; + +import {t} from 'utils/i18n'; +import {Constants} from 'utils/constants'; + +import UsersEmailsInput from 'components/widgets/inputs/users_emails_input'; import {Animations, mapAnimationReasonToClass, Form, PreparingWorkspacePageProps} from './steps'; @@ -12,20 +19,30 @@ import Description from './description'; import PageBody from './page_body'; import SingleColumnLayout from './single_column_layout'; -import InviteMembersLink from './invite_members_link'; import PageLine from './page_line'; +import InviteMembersLink from './invite_members_link'; + import './invite_members.scss'; type Props = PreparingWorkspacePageProps & { disableEdits: boolean; className?: string; - teamInviteId?: string; + emails: Form['teamMembers']['invites']; + setEmails: (emails: Form['teamMembers']['invites']) => void; + teamInviteId: string; formUrl: Form['url']; configSiteUrl?: string; browserSiteUrl: string; + inferredProtocol: 'http' | 'https' | null; + isSelfHosted: boolean; + show: boolean; } const InviteMembers = (props: Props) => { + const [email, setEmail] = useState(''); + const [showSkipButton, setShowSkipButton] = useState(false); + + const {formatMessage} = useIntl(); let className = 'InviteMembers-body'; if (props.className) { className += ' ' + props.className; @@ -33,6 +50,30 @@ const InviteMembers = (props: Props) => { useEffect(props.onPageView, []); + useEffect(() => { + setShowSkipButton(false); + const timer = setTimeout(() => { + setShowSkipButton(true); + }, 3000); + + return () => clearTimeout(timer); + }, [props.show]); + + const placeholder = formatMessage({ + id: 'onboarding_wizard.invite_members.placeholder', + defaultMessage: 'Enter email addresses', + }); + const errorProperties = { + showError: false, + errorMessageId: t( + 'invitation_modal.invite_members.exceeded_max_add_members_batch', + ), + errorMessageDefault: 'No more than **{text}** people can be invited at once', + errorMessageValues: { + text: Constants.MAX_ADD_MEMBERS_BATCH.toString(), + }, + }; + const inviteURL = useMemo(() => { let urlBase = ''; if (props.configSiteUrl && !props.configSiteUrl.includes('localhost')) { @@ -45,14 +86,128 @@ const InviteMembers = (props: Props) => { return `${urlBase}/signup_user_complete/?id=${props.teamInviteId}`; }, [props.teamInviteId, props.configSiteUrl, props.browserSiteUrl, props.formUrl]); - const description = ( - Constants.MAX_ADD_MEMBERS_BATCH) { + errorProperties.showError = true; + + // We want to suppress the no options message, unless the message that is going to be displayed + // is the max users warning + suppressNoOptionsMessage = false; + } + + const cloudInviteMembersInput = ( + Promise.resolve([])} + placeholder={placeholder} + ariaLabel={formatMessage({ + id: 'invitation_modal.members.search_and_add.title', + defaultMessage: 'Invite People', + })} + onChange={(emails: Array) => { + // There should not be any users found or passed, + // because the usersLoader should never return any. + // Filtering them out in case there are any + // and to resolve Typescript errors + props.setEmails(emails.filter((x) => typeof x === 'string') as string[]); + }} + value={props.emails} + onInputChange={setEmail} + inputValue={email} + emailInvitationsEnabled={true} + autoFocus={true} + validAddressMessageId={t('invitation_modal.members.users_emails_input.valid_email')} + validAddressMessageDefault={'Invite **{email}** as a team member'} + suppressNoOptionsMessage={suppressNoOptionsMessage} /> ); - const inviteInteraction = ; + const inviteLink = ( + + ); + + const inviteMemberBodyContent = () => { + if (props.isSelfHosted) { + return ( + <> + + <FormattedMessage + id={'onboarding_wizard.invite_members.title'} + defaultMessage='Invite your team members' + /> + + + + + + {inviteLink} + +
+ +
+ + ); + } + return ( + <> + + <FormattedMessage + id={'onboarding_wizard.invite_members_cloud.title'} + defaultMessage='Who works with you?' + /> + + + + + + {cloudInviteMembersInput} + +
+ + {inviteLink} + {showSkipButton && + + } +
+ + ); + }; return ( { noLeft={true} /> {props.previous} - - <FormattedMessage - id={'onboarding_wizard.invite_members.title'} - defaultMessage='Invite your team members' - /> - - - {description} - - - {inviteInteraction} - -
- -
+ {inviteMemberBodyContent()} diff --git a/webapp/channels/src/components/preparing_workspace/invite_members_link.scss b/webapp/channels/src/components/preparing_workspace/invite_members_link.scss index 09b229f264..8171056b42 100644 --- a/webapp/channels/src/components/preparing_workspace/invite_members_link.scss +++ b/webapp/channels/src/components/preparing_workspace/invite_members_link.scss @@ -1,3 +1,5 @@ +@import 'utils/mixins'; + .InviteMembersLink { display: flex; @@ -9,35 +11,21 @@ border-right: 0; border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.2); border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.2); - background: rgba(var(--center-channel-color-rgb), 0.04); + background: var(--center-channel-color-rgb); border-radius: 4px 0 0 4px; color: rgba(var(--center-channel-color-rgb), 0.56); font-size: 16px; } - &__button { + button { display: flex; - width: 180px; max-width: 382px; - height: 48px; flex-grow: 0; align-items: center; justify-content: center; - border: 1px solid var(--button-bg); - background: var(--center-channel-bg); - border-radius: 0 4px 4px 0; - color: var(--button-bg); font-size: 16px; font-weight: 600; - &:hover { - background: rgba(var(--button-bg-rgb), 0.08); - } - - &:active { - background: rgba(var(--button-bg-rgb), 0.08); - } - span { display: inline-block; height: 24px; @@ -48,4 +36,28 @@ fill: var(--button-bg); } } + + &__button { + width: 180px; + height: 48px; + border: 1px solid var(--button-bg); + background: var(--center-channel-bg); + border-radius: 0 4px 4px 0; + color: var(--button-bg); + + &:hover { + background: rgba(var(--button-bg-rgb), 0.08); + } + + &:active { + background: rgba(var(--button-bg-rgb), 0.08); + } + } + + &__button--single { + @include tertiary-button; + + height: 40px; + border-radius: 4px; + } } diff --git a/webapp/channels/src/components/preparing_workspace/invite_members_link.test.tsx b/webapp/channels/src/components/preparing_workspace/invite_members_link.test.tsx index d74b81d493..16dd09f0af 100644 --- a/webapp/channels/src/components/preparing_workspace/invite_members_link.test.tsx +++ b/webapp/channels/src/components/preparing_workspace/invite_members_link.test.tsx @@ -21,8 +21,39 @@ describe('components/preparing-workspace/invite_members_link', () => { expect(container).toMatchSnapshot(); }); + it('should match snapshot when displayed including the input field', () => { + const component = withIntl( + , + ); + + const {container} = render(component); + expect(container).toMatchSnapshot(); + }); + + it('renders only with the button if the inputAndButton option is false', () => { + const component = withIntl( + , + ); + render(component); + const input = screen.queryByText(inviteURL); + expect(input).not.toBeInTheDocument(); + const button = screen.getByRole('button', {name: /copy link/i}); + expect(button).toBeInTheDocument(); + }); + it('renders an input field with the invite URL', () => { - const component = withIntl(); + const component = withIntl( + , + ); render(component); const input = screen.getByDisplayValue(inviteURL); expect(input).toBeInTheDocument(); diff --git a/webapp/channels/src/components/preparing_workspace/invite_members_link.tsx b/webapp/channels/src/components/preparing_workspace/invite_members_link.tsx index f6491809ca..d50a0ab9a9 100644 --- a/webapp/channels/src/components/preparing_workspace/invite_members_link.tsx +++ b/webapp/channels/src/components/preparing_workspace/invite_members_link.tsx @@ -11,30 +11,36 @@ import './invite_members_link.scss'; type Props = { inviteURL: string; + inputAndButtonStyle?: boolean; } -const InviteMembersLink = (props: Props) => { +const InviteMembersLink = ({ + inviteURL, + inputAndButtonStyle = false, +}: Props) => { const copyText = useCopyText({ trackCallback: () => trackEvent('first_admin_setup', 'admin_setup_click_copy_invite_link'), - text: props.inviteURL, + text: inviteURL, }); const intl = useIntl(); return (
- + {inputAndButtonStyle && + + }