Changes to allow focus and keyboard interaction in close and back icons

components/invitation_modal/__snapshots__/invitation_modal.test.jsx.snap

@@ -2,8 +2,9 @@
 
 exports[`components/invitation_modal/InvitationModal should match the snapshot 1`] = `
 <RootPortal>
- <FullScreenModal
+ <injectIntl(FullScreenModal)
  onClose={[Function]}
+ onGoBack={null}
  show={true}
  >
  <div
@@ -44,14 +45,15 @@ exports[`components/invitation_modal/InvitationModal should match the snapshot 1
  teamName="Test name"
  />
  </div>
- </FullScreenModal>
+ </injectIntl(FullScreenModal)>
 </RootPortal>
 `;
 
 exports[`components/invitation_modal/InvitationModal should match the snapshot when I have no permission to add users 1`] = `
 <RootPortal>
- <FullScreenModal
+ <injectIntl(FullScreenModal)
  onClose={[Function]}
+ onGoBack={null}
  show={true}
  >
  <div
@@ -90,21 +92,21 @@ exports[`components/invitation_modal/InvitationModal should match the snapshot w
  currentTeamId="test"
  defaultChannels={Array []}
  defaultMessage=""
- goBack={null}
  myInvitableChannels={Array []}
  onEdit={[Function]}
  onSubmit={[Function]}
  searchProfiles={[MockFunction]}
  />
  </div>
- </FullScreenModal>
+ </injectIntl(FullScreenModal)>
 </RootPortal>
 `;
 
 exports[`components/invitation_modal/InvitationModal should match the snapshot when I have no permission to invite guests 1`] = `
 <RootPortal>
- <FullScreenModal
+ <injectIntl(FullScreenModal)
  onClose={[Function]}
+ onGoBack={null}
  show={true}
  >
  <div
@@ -140,21 +142,21 @@ exports[`components/invitation_modal/InvitationModal should match the snapshot w
  }
  />
  <injectIntl(InvitationModalMembersStep)
- goBack={null}
  inviteId="test-invite-id"
  onEdit={[Function]}
  onSubmit={[Function]}
  searchProfiles={[MockFunction]}
  />
  </div>
- </FullScreenModal>
+ </injectIntl(FullScreenModal)>
 </RootPortal>
 `;
 
 exports[`components/invitation_modal/InvitationModal should match the snapshot when not show 1`] = `
 <RootPortal>
- <FullScreenModal
+ <injectIntl(FullScreenModal)
  onClose={[Function]}
+ onGoBack={null}
  show={false}
  >
  <div
@@ -195,6 +197,6 @@ exports[`components/invitation_modal/InvitationModal should match the snapshot w
  teamName="Test name"
  />
  </div>
- </FullScreenModal>
+ </injectIntl(FullScreenModal)>
 </RootPortal>
 `;

components/invitation_modal/__snapshots__/invitation_modal_confirm_step.test.jsx.snap

@@ -4,10 +4,6 @@ exports[`components/invitation_modal/InvitationModalConfirmStep should match the
 <div
  className="InvitationModalConfirmStep"
 >
- <BackIcon
- className="back"
- onClick={[MockFunction]}
- />
  <div
  className="modal-icon"
  >
@@ -105,10 +101,6 @@ exports[`components/invitation_modal/InvitationModalConfirmStep should match the
 <div
  className="InvitationModalConfirmStep"
 >
- <BackIcon
- className="back"
- onClick={[MockFunction]}
- />
  <div
  className="modal-icon"
  >
@@ -324,10 +316,6 @@ exports[`components/invitation_modal/InvitationModalConfirmStep should match the
 <div
  className="InvitationModalConfirmStep"
 >
- <BackIcon
- className="back"
- onClick={[MockFunction]}
- />
  <div
  className="modal-icon"
  >

components/invitation_modal/__snapshots__/invitation_modal_guests_step.test.jsx.snap

@@ -4,11 +4,6 @@ exports[`components/invitation_modal/InvitationModalGuestsStep should match the
 <div
  className="InvitationModalGuestsStep"
 >
- <BackIcon
- className="back"
- id="backIcon"
- onClick={[MockFunction]}
- />
  <div
  className="modal-icon"
  >

components/invitation_modal/__snapshots__/invitation_modal_members_step.test.jsx.snap

@@ -4,10 +4,6 @@ exports[`components/invitation_modal/InvitationModalMembersStep should match the
 <div
  className="InvitationModalMembersStep"
 >
- <BackIcon
- className="back"
- onClick={[MockFunction]}
- />
  <div
  className="modal-icon"
  >

components/invitation_modal/invitation_modal.jsx

@@ -94,6 +94,16 @@ export default class InvitationModal extends React.Component {
  }
  }
 
+ getBackFunction = () => {
+ if (this.state.step === STEPS_INVITE_CONFIRM && this.invitesNotSent.length > 0) {
+ return this.goToPrevStep;
+ }
+ if ((this.state.step === STEPS_INVITE_MEMBERS || this.state.step === STEPS_INVITE_GUESTS) && this.props.canInviteGuests && this.props.canAddUsers) {
+ return this.goToInitialStep;
+ }
+ return null;
+ }
+
  onEdit = (hasChanges) => {
  this.setState({hasChanges});
  }
@@ -180,6 +190,7 @@ export default class InvitationModal extends React.Component {
  <FullScreenModal
  show={Boolean(this.props.show)}
  onClose={this.close}
+ onGoBack={this.getBackFunction()}
  >
  <div
  data-testid='invitationModal'
@@ -219,15 +230,13 @@ export default class InvitationModal extends React.Component {
  {this.state.step === STEPS_INVITE_MEMBERS &&
  <InvitationModalMembersStep
  inviteId={this.props.currentTeam.invite_id}
- goBack={(this.props.canInviteGuests && this.props.canAddUsers && this.goToInitialStep) || null}
  searchProfiles={this.props.actions.searchProfiles}
  onSubmit={this.onMembersSubmit}
  onEdit={this.onEdit}
  />
  }
  {this.state.step === STEPS_INVITE_GUESTS &&
  <InvitationModalGuestsStep
- goBack={(this.props.canInviteGuests && this.props.canAddUsers && this.goToInitialStep) || null}
  currentTeamId={this.props.currentTeam.id}
  myInvitableChannels={this.props.invitableChannels}
  searchProfiles={this.props.actions.searchProfiles}
@@ -241,7 +250,6 @@ export default class InvitationModal extends React.Component {
  <InvitationModalConfirmStep
  teamName={this.props.currentTeam.display_name}
  currentTeamId={this.props.currentTeam.id}
- goBack={this.goToPrevStep}
  onDone={this.close}
  invitesType={this.state.invitesType}
  invitesSent={this.state.invitesSent}

components/invitation_modal/invitation_modal.scss

@@ -31,22 +31,6 @@
  font-weight: 400;
  }
  }
- .back {
- position: fixed;
- top: 48px;
- left: 48px;
- cursor: pointer;
- svg {
- fill: var(--center-channel-color-90);
- padding: 4px;
- width: 40px;
- height: 40px;
- border-radius: 4px;
- &:hover {
- background: var(--button-bg-10);
- }
- }
- }
  .modal-icon {
  text-align: center;
  svg {

components/invitation_modal/invitation_modal_confirm_step.jsx

@@ -7,7 +7,6 @@ import {FormattedMessage} from 'react-intl';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import InviteIcon from 'components/widgets/icons/invite_icon';
-import BackIcon from 'components/widgets/icons/back_icon';
 import InvitationModalConfirmStepTable from 'components/invitation_modal/invitation_modal_confirm_step_table';
 
 import {InviteTypes} from 'utils/constants';
@@ -17,7 +16,6 @@ import './invitation_modal_confirm_step.scss';
 export default class InvitationModalConfirmStep extends React.Component {
  static propTypes = {
  teamName: PropTypes.string.isRequired,
- goBack: PropTypes.func.isRequired,
  onDone: PropTypes.func.isRequired,
  invitesType: PropTypes.oneOf([InviteTypes.INVITE_MEMBER, InviteTypes.INVITE_GUEST]).isRequired,
  invitesSent: PropTypes.array.isRequired,
@@ -65,11 +63,6 @@ export default class InvitationModalConfirmStep extends React.Component {
  const {teamName, invitesType, invitesSent, invitesNotSent, onDone} = this.props;
  return (
  <div className='InvitationModalConfirmStep'>
- {this.props.goBack && this.props.invitesNotSent.length > 0 &&
- <BackIcon
- className='back'
- onClick={this.props.goBack}
- />}
  <div className='modal-icon'>
  <InviteIcon/>
  </div>

components/invitation_modal/invitation_modal_confirm_step.test.jsx

@@ -13,7 +13,6 @@ describe('components/invitation_modal/InvitationModalConfirmStep', () => {
  const wrapper = shallow(
  <InvitationModalConfirmStep
  teamName='test'
- goBack={jest.fn()}
  onDone={jest.fn()}
  invitesType={InviteTypes.INVITE_GUEST}
  invitesSent={[{email: 'invite1@email'}, {email: 'invite2@email'}]}
@@ -27,7 +26,6 @@ describe('components/invitation_modal/InvitationModalConfirmStep', () => {
  const wrapper = shallow(
  <InvitationModalConfirmStep
  teamName='test'
- goBack={jest.fn()}
  onDone={jest.fn()}
  invitesType={InviteTypes.INVITE_MEMBER}
  invitesSent={[{email: 'invite1@email'}, {email: 'invite2@email'}]}
@@ -41,7 +39,6 @@ describe('components/invitation_modal/InvitationModalConfirmStep', () => {
  const wrapper = shallow(
  <InvitationModalConfirmStep
  teamName='test'
- goBack={jest.fn()}
  onDone={jest.fn()}
  invitesType={InviteTypes.INVITE_MEMBER}
  invitesSent={[]}
@@ -55,7 +52,6 @@ describe('components/invitation_modal/InvitationModalConfirmStep', () => {
  const wrapper = shallow(
  <InvitationModalConfirmStep
  teamName='test'
- goBack={jest.fn()}
  onDone={jest.fn()}
  invitesType={InviteTypes.INVITE_MEMBER}
  invitesSent={[{email: 'invite1@email'}, {email: 'invite2@email'}]}
@@ -69,7 +65,6 @@ describe('components/invitation_modal/InvitationModalConfirmStep', () => {
  const wrapper = shallow(
  <InvitationModalConfirmStep
  teamName='test'
- goBack={jest.fn()}
  onDone={jest.fn()}
  invitesType={InviteTypes.INVITE_MEMBER}
  invitesSent={[]}

components/invitation_modal/invitation_modal_guests_step.jsx

@@ -14,15 +14,12 @@ import CloseCircleIcon from 'components/widgets/icons/close_circle_icon';
 import ChannelsInput from 'components/widgets/inputs/channels_input.jsx';
 import UsersEmailsInput from 'components/widgets/inputs/users_emails_input.jsx';
 
-import BackIcon from 'components/widgets/icons/back_icon';
-
 import './invitation_modal_guests_step.scss';
 
 import {t} from 'utils/i18n.jsx';
 
 export default class InvitationModalGuestsStep extends React.Component {
  static propTypes = {
- goBack: PropTypes.func,
  myInvitableChannels: PropTypes.array.isRequired,
  currentTeamId: PropTypes.string.isRequired,
  searchProfiles: PropTypes.func.isRequired,
@@ -133,12 +130,6 @@ export default class InvitationModalGuestsStep extends React.Component {
  render() {
  return (
  <div className='InvitationModalGuestsStep'>
- {this.props.goBack &&
- <BackIcon
- className='back'
- id='backIcon'
- onClick={this.props.goBack}
- />}
  <div className='modal-icon'>
  <InviteIcon/>
  </div>

components/invitation_modal/invitation_modal_guests_step.test.jsx

@@ -13,7 +13,6 @@ describe('components/invitation_modal/InvitationModalGuestsStep', () => {
  currentTeamId='123'
  myInvitableChannels={[]}
  searchProfiles={jest.fn()}
- goBack={jest.fn()}
  onSubmit={jest.fn()}
  onEdit={jest.fn()}
  />

components/invitation_modal/invitation_modal_members_step.jsx

@@ -12,7 +12,6 @@ import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import InviteIcon from 'components/widgets/icons/invite_icon';
 import UsersEmailsInput from 'components/widgets/inputs/users_emails_input.jsx';
 
-import BackIcon from 'components/widgets/icons/back_icon';
 import LinkIcon from 'components/widgets/icons/link_icon';
 
 import {getSiteURL} from 'utils/url';
@@ -24,7 +23,6 @@ class InvitationModalMembersStep extends React.Component {
  static propTypes = {
  intl: PropTypes.any,
  inviteId: PropTypes.string.isRequired,
- goBack: PropTypes.func,
  searchProfiles: PropTypes.func.isRequired,
  onEdit: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
@@ -120,11 +118,6 @@ class InvitationModalMembersStep extends React.Component {
  const inviteUrl = getSiteURL() + '/signup_user_complete/?id=' + this.props.inviteId;
  return (
  <div className='InvitationModalMembersStep'>
- {this.props.goBack &&
- <BackIcon
- className='back'
- onClick={this.props.goBack}
- />}
  <div className='modal-icon'>
  <InviteIcon/>
  </div>

components/invitation_modal/invitation_modal_members_step.test.jsx

@@ -13,7 +13,6 @@ describe('components/invitation_modal/InvitationModalMembersStep', () => {
  <InvitationModalMembersStep
  inviteId='123'
  searchProfiles={jest.fn()}
- goBack={jest.fn()}
  onSubmit={jest.fn()}
  onEdit={jest.fn()}
  />