Skip to content

Commit

Permalink
Adding UX modifications for guest accounts (mattermost#4187)
Browse files Browse the repository at this point in the history
* Adding UX modifications for guest accounts

* Fixing lint error

* Updating snapshots

* Fixing padding

* Fixing tests

* Addressing PR review comments

* Addressing PR review comments

* Fixing cypress tests

* Fixing tests

* Addressing PR review comments
  • Loading branch information
jespino committed Nov 27, 2019
1 parent 6f88c14 commit 7b72b6e
Show file tree
Hide file tree
Showing 23 changed files with 317 additions and 66 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ exports[`components/invitation_modal/InvitationModal should match the snapshot w
onSubmit={[Function]}
searchChannels={[MockFunction]}
searchProfiles={[MockFunction]}
teamName="Test name"
/>
</div>
</InjectIntl(FullScreenModal)>
Expand Down Expand Up @@ -147,6 +148,7 @@ exports[`components/invitation_modal/InvitationModal should match the snapshot w
onEdit={[Function]}
onSubmit={[Function]}
searchProfiles={[MockFunction]}
teamName="Test name"
/>
</div>
</InjectIntl(FullScreenModal)>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,13 @@ exports[`components/invitation_modal/InvitationModalGuestsStep should match the
</div>
<h1>
<InjectIntl(FormattedMarkdownMessage)
defaultMessage="Invite **Guests**"
defaultMessage="Invite **Guests** to {teamName}"
id="invitation_modal.guests.title"
values={
Object {
"teamName": "Test Team",
}
}
/>
</h1>
<div
Expand Down Expand Up @@ -41,7 +46,7 @@ exports[`components/invitation_modal/InvitationModalGuestsStep should match the
className="help-text"
>
<FormattedMessage
defaultMessage="Search and add guests or email invite new users."
defaultMessage="Add existing guests or send email invites to new guests."
id="invitation_modal.guests.add_people.description"
values={Object {}}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,37 +1,129 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`components/invitation_modal/InvitationModalMembersStep should match the snapshot 1`] = `
<InvitationModalMembersStep
intl={
Object {
"defaultFormats": Object {},
"defaultLocale": "en",
"formatDate": [Function],
"formatHTMLMessage": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatPlural": [Function],
"formatRelative": [Function],
"formatTime": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralFormat": [Function],
"getRelativeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"now": [Function],
"onError": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
}
}
inviteId="123"
onEdit={[MockFunction]}
onSubmit={[MockFunction]}
searchProfiles={[MockFunction]}
/>
<div
className="InvitationModalMembersStep"
>
<div
className="modal-icon"
>
<InviteMembersIcon />
</div>
<h1>
<InjectIntl(FormattedMarkdownMessage)
defaultMessage="Invite **Members** to {teamName}"
id="invitation_modal.members.title"
values={
Object {
"teamName": "Test Team",
}
}
/>
</h1>
<div
className="share-link"
data-testid="shareLink"
>
<h2>
<FormattedMessage
defaultMessage="Share This Link"
id="invitation_modal.members.share_link.title"
values={Object {}}
/>
</h2>
<div
className="share-link-input-block"
>
<input
aria-label="team invite link"
className="share-link-input"
data-testid="shareLinkInput"
readOnly={true}
type="text"
value="http:https://localhost:8065/signup_user_complete/?id=123"
/>
<button
className="share-link-input-button"
data-testid="shareLinkInputButton"
onClick={[Function]}
>
<LinkIcon />
<FormattedMessage
defaultMessage="Copy Link"
id="invitation_modal.members.share_link.copy_button"
values={Object {}}
/>
</button>
</div>
<div
className="help-text"
>
<FormattedMessage
defaultMessage="Share this link to invite people to this team."
id="invitation_modal.members.share_link.description"
values={Object {}}
/>
</div>
</div>
<div
className="invitation-modal-or"
>
<hr />
<div>
<FormattedMessage
defaultMessage="OR"
id="invitation_modal.members.or"
values={Object {}}
/>
</div>
</div>
<div
className="search-and-add"
data-testid="searchAdd"
>
<h2>
<FormattedMessage
defaultMessage="Add or Invite People"
id="invitation_modal.members.search_and_add.title"
values={Object {}}
/>
</h2>
<div
data-testid="inputPlaceholder"
>
<FormattedMessage
defaultMessage="Add members or email addresses"
id="invitation_modal.members.search-and-add.placeholder"
values={Object {}}
>
<Component />
</FormattedMessage>
</div>
<div
className="help-text"
>
<FormattedMessage
defaultMessage="Add existing members or send email invites to new members."
id="invitation_modal.members.search-and-add.description"
values={Object {}}
/>
</div>
</div>
<div
className="invite-members"
>
<button
className="btn btn-inactive"
disabled={true}
id="inviteMembersButton"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Invite Members"
id="invitation_modal.members.invite_button"
values={Object {}}
/>
</button>
</div>
</div>
`;
2 changes: 2 additions & 0 deletions components/invitation_modal/invitation_modal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ export default class InvitationModal extends React.Component {
}
{this.state.step === STEPS_INVITE_MEMBERS &&
<InvitationModalMembersStep
teamName={this.props.currentTeam.display_name}
inviteId={this.props.currentTeam.invite_id}
searchProfiles={this.props.actions.searchProfiles}
onSubmit={this.onMembersSubmit}
Expand All @@ -238,6 +239,7 @@ export default class InvitationModal extends React.Component {
}
{this.state.step === STEPS_INVITE_GUESTS &&
<InvitationModalGuestsStep
teamName={this.props.currentTeam.display_name}
currentTeamId={this.props.currentTeam.id}
myInvitableChannels={this.props.invitableChannels}
searchProfiles={this.props.actions.searchProfiles}
Expand Down
2 changes: 1 addition & 1 deletion components/invitation_modal/invitation_modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
text-align: center;
svg {
fill: var(--button-bg);
height: 32px;
height: 38px;
width: 126px;
margin-right: 85px;
}
Expand Down
6 changes: 4 additions & 2 deletions components/invitation_modal/invitation_modal_guests_step.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {t} from 'utils/i18n.jsx';

export default class InvitationModalGuestsStep extends React.Component {
static propTypes = {
teamName: PropTypes.string.isRequired,
myInvitableChannels: PropTypes.array.isRequired,
currentTeamId: PropTypes.string.isRequired,
searchProfiles: PropTypes.func.isRequired,
Expand Down Expand Up @@ -141,7 +142,8 @@ export default class InvitationModalGuestsStep extends React.Component {
<h1>
<FormattedMarkdownMessage
id='invitation_modal.guests.title'
defaultMessage='Invite **Guests**'
defaultMessage='Invite **Guests** to {teamName}'
values={{teamName: this.props.teamName}}
/>
</h1>
<div
Expand Down Expand Up @@ -178,7 +180,7 @@ export default class InvitationModalGuestsStep extends React.Component {
<div className='help-text'>
<FormattedMessage
id='invitation_modal.guests.add_people.description'
defaultMessage='Search and add guests or email invite new users.'
defaultMessage='Add existing guests or send email invites to new guests.'
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ describe('components/invitation_modal/InvitationModalGuestsStep', () => {
test('should match the snapshot', () => {
const wrapper = shallow(
<InvitationModalGuestsStep
teamName='Test Team'
currentTeamId='123'
myInvitableChannels={[]}
searchProfiles={jest.fn()}
Expand Down
14 changes: 8 additions & 6 deletions components/invitation_modal/invitation_modal_members_step.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {debounce} from 'mattermost-redux/actions/helpers';
import {isEmail} from 'mattermost-redux/utils/helpers';

import FormattedMarkdownMessage from 'components/formatted_markdown_message';
import InviteIcon from 'components/widgets/icons/invite_icon';
import InviteMembersIcon from 'components/widgets/icons/invite_members_icon';
import UsersEmailsInput from 'components/widgets/inputs/users_emails_input.jsx';

import LinkIcon from 'components/widgets/icons/link_icon';
Expand All @@ -21,6 +21,7 @@ import './invitation_modal_members_step.scss';

class InvitationModalMembersStep extends React.Component {
static propTypes = {
teamName: PropTypes.string.isRequired,
intl: PropTypes.any,
inviteId: PropTypes.string.isRequired,
searchProfiles: PropTypes.func.isRequired,
Expand Down Expand Up @@ -119,12 +120,13 @@ class InvitationModalMembersStep extends React.Component {
return (
<div className='InvitationModalMembersStep'>
<div className='modal-icon'>
<InviteIcon/>
<InviteMembersIcon/>
</div>
<h1>
<FormattedMarkdownMessage
id='invitation_modal.members.title'
defaultMessage='Invite **Members**'
defaultMessage='Invite **Members** to {teamName}'
values={{teamName: this.props.teamName}}
/>
</h1>
<div
Expand Down Expand Up @@ -170,7 +172,7 @@ class InvitationModalMembersStep extends React.Component {
<div className='help-text'>
<FormattedMessage
id='invitation_modal.members.share_link.description'
defaultMessage='Share this link to grant member access to this team.'
defaultMessage='Share this link to invite people to this team.'
/>
</div>
</div>
Expand All @@ -191,7 +193,7 @@ class InvitationModalMembersStep extends React.Component {
<h2>
<FormattedMessage
id='invitation_modal.members.search_and_add.title'
defaultMessage='Invite People'
defaultMessage='Add or Invite People'
/>
</h2>
<div data-testid='inputPlaceholder'>
Expand All @@ -218,7 +220,7 @@ class InvitationModalMembersStep extends React.Component {
<div className='help-text'>
<FormattedMessage
id='invitation_modal.members.search-and-add.description'
defaultMessage='Search and add members from other teams or email invite new users.'
defaultMessage='Add existing members or send email invites to new members.'
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@ describe('components/invitation_modal/InvitationModalMembersStep', () => {
test('should match the snapshot', () => {
const wrapper = shallowWithIntl(
<InvitationModalMembersStep
teamName='Test Team'
inviteId='123'
searchProfiles={jest.fn()}
onSubmit={jest.fn()}
onEdit={jest.fn()}
/>
);
).dive();
expect(wrapper).toMatchSnapshot();
});
});
7 changes: 7 additions & 0 deletions components/main_menu/__snapshots__/main_menu.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ exports[`components/Menu should match snapshot with id 1`] = `
>
<MenuItemToggleModalRedux
dialogType={[Function]}
extraText="Add or invite people to the team"
icon={false}
id="invitePeople"
modalId="invitation"
Expand Down Expand Up @@ -348,6 +349,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1
>
<MenuItemToggleModalRedux
dialogType={[Function]}
extraText="Add or invite people to the team"
icon={false}
id="invitePeople"
modalId="invitation"
Expand Down Expand Up @@ -653,6 +655,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i
>
<MenuItemToggleModalRedux
dialogType={[Function]}
extraText="Add or invite people to the team"
icon={
<i
className="fa fa-user-plus"
Expand Down Expand Up @@ -992,6 +995,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1`
>
<MenuItemToggleModalRedux
dialogType={[Function]}
extraText="Add or invite people to the team"
icon={false}
id="invitePeople"
modalId="invitation"
Expand Down Expand Up @@ -1297,6 +1301,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in
>
<MenuItemToggleModalRedux
dialogType={[Function]}
extraText="Add or invite people to the team"
icon={
<i
className="fa fa-user-plus"
Expand Down Expand Up @@ -1636,6 +1641,7 @@ exports[`components/Menu should match snapshot with plugins 1`] = `
>
<MenuItemToggleModalRedux
dialogType={[Function]}
extraText="Add or invite people to the team"
icon={false}
id="invitePeople"
modalId="invitation"
Expand Down Expand Up @@ -1958,6 +1964,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = `
>
<MenuItemToggleModalRedux
dialogType={[Function]}
extraText="Add or invite people to the team"
icon={
<i
className="fa fa-user-plus"
Expand Down
Loading

0 comments on commit 7b72b6e

Please sign in to comment.