Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

[MM-26477] E2E tests and fixes for Cloud Onboarding - sysadmin #6269

Merged
merged 8 commits into from
Aug 27, 2020
Merged

[MM-26477] E2E tests and fixes for Cloud Onboarding - sysadmin #6269

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
eb06a6a
[MM-26477] E2E tests and fixes for Cloud Onboarding - sysadmin
devinbinnie Aug 25, 2020
4488ce1
Changed copy link method and added test for Copy Invite Link
devinbinnie Aug 26, 2020
0cb3292
Snapshot update
devinbinnie Aug 26, 2020
e76d46e
Merge remote-tracking branch 'upstream/feature/cloud-onboarding' into…
devinbinnie Aug 26, 2020
cebb426
Test including the Getting started menu item
devinbinnie Aug 26, 2020
8525720
PR feedback
devinbinnie Aug 27, 2020
00f087d
Merge branch 'feature/cloud-onboarding' into MM-26477
devinbinnie Aug 27, 2020
bba8f70
Quick fix
devinbinnie Aug 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions components/__snapshots__/picture_selector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ exports[`components/picture_selector should match snapshot, default picture prov
accept=".jpg,.png,.bmp"
aria-hidden={true}
className="PictureSelector__input"
data-testid="PictureSelector__input"
data-testid="PictureSelector__input-picture_selector_test"
name="picture_selector_test"
onChange={[Function]}
tabIndex={-1}
type="file"
Expand Down Expand Up @@ -47,7 +48,8 @@ exports[`components/picture_selector should match snapshot, existing picture pro
accept=".jpg,.png,.bmp"
aria-hidden={true}
className="PictureSelector__input"
data-testid="PictureSelector__input"
data-testid="PictureSelector__input-picture_selector_test"
name="picture_selector_test"
onChange={[Function]}
tabIndex={-1}
type="file"
Expand Down Expand Up @@ -86,7 +88,8 @@ exports[`components/picture_selector should match snapshot, no picture selected
accept=".jpg,.png,.bmp"
aria-hidden={true}
className="PictureSelector__input"
data-testid="PictureSelector__input"
data-testid="PictureSelector__input-picture_selector_test"
name="picture_selector_test"
onChange={[Function]}
tabIndex={-1}
type="file"
Expand Down
37 changes: 15 additions & 22 deletions components/next_steps_view/next_steps_view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,58 +108,51 @@
.NextStepsView__cardHeader {
cursor: default;
}

.NextStepsView__cardHeaderBadge {
color: var(--button-color);
background-color: var(--sidebar-text-active-border);
}
}

.Card.complete {
border-color: transparent;
box-shadow: none;
transition-property: box-shadow, border-color;
background-color: transparent;
margin-left: 12px;


&:hover {
border-color: transparent;
box-shadow: none;
}

& + .Card {
margin-top: 12px;
transition-property: box-shadow, border-color, margin;
}

.Card__header {
//margin: 0;
border-color: transparent;

transition: all 0.3s ease-in-out;
}

.Card__body {
height: 0;
}


.NextStepsView__cardHeader {
padding: 0;
padding: 0 12px;
transition: padding 0.3s ease-in-out;

> span {
color: var(--online-indicator);
//margin-left: 8px;
transition: all 0.3s ease-in-out;
}

i {
align-self: center;
font-size: 26px;
line-height: 26px;
color: var(--online-indicator);
transition: all 0.3s ease-in-out;

&::before {
margin: 0;
}
Expand Down Expand Up @@ -357,7 +350,7 @@
}

.NextStepsView__nextStepsCards {
display: flex;
display: flex;
width: 100%;
margin-top: 88px;
padding: 0 40px;
Expand Down Expand Up @@ -483,7 +476,7 @@
}
}

@media screen and (max-width: 1386px) {
@media screen and (max-width: 1386px) {
.NextStepsView__nextStepsCards {
margin-top: 0;
}
Expand Down Expand Up @@ -571,7 +564,7 @@
flex: 1 1 100%;
padding: 0 12px;
}

.NextStepsView__nextStepsCards, .NextStepsView__download, .NextStepsView__tipsMobileMessage {
padding: 0 12px;
}
Expand Down Expand Up @@ -608,4 +601,4 @@
margin-top: 24px;
}
}
}
}
2 changes: 1 addition & 1 deletion components/next_steps_view/next_steps_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
}

isStepComplete = (id: string) => {
return this.props.preferences.some((pref) => pref.name === id && Boolean(pref.value));
return this.props.preferences.some((pref) => pref.name === id && pref.value === 'true');
}

renderStep = (step: StepType, index: number) => {
Expand Down
8 changes: 4 additions & 4 deletions components/next_steps_view/steps.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ describe('components/next_steps_view/steps', () => {
},
preferences: {
myPreferences: {
'recommended_next_steps--hide': {name: 'hide', value: true},
'recommended_next_steps--hide': {name: 'hide', value: 'true'},
},
},
},
Expand All @@ -65,9 +65,9 @@ describe('components/next_steps_view/steps', () => {
},
preferences: {
myPreferences: {
'recommended_next_steps--complete_profile': {name: 'complete_profile', value: true},
'recommended_next_steps--team_setup': {name: 'team_setup', value: true},
'recommended_next_steps--invite_members': {name: 'invite_members', value: true},
'recommended_next_steps--complete_profile': {name: 'complete_profile', value: 'true'},
'recommended_next_steps--team_setup': {name: 'team_setup', value: 'true'},
'recommended_next_steps--invite_members': {name: 'invite_members', value: 'true'},
},
},
},
Expand Down
4 changes: 2 additions & 2 deletions components/next_steps_view/steps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,15 @@ export const showNextSteps = createSelector(
(state: GlobalState) => getCategory(state, Preferences.RECOMMENDED_NEXT_STEPS),
(state: GlobalState) => getLicense(state),
(stepPreferences, license) => {
if (stepPreferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value)) {
if (stepPreferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value === 'true')) {
return false;
}

if (license.Cloud !== 'true') {
return false;
}

const checkPref = (step: StepType) => stepPreferences.some((pref) => pref.name === step.id && pref.value);
const checkPref = (step: StepType) => stepPreferences.some((pref) => pref.name === step.id && pref.value === 'true');
return !Steps.every(checkPref);
}
);
2 changes: 2 additions & 0 deletions ..._steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ exports[`components/next_steps_view/steps/complete_profile_step should match sna
</h3>
<PictureSelector
defaultSrc="/api/v4/users/user_id/image/default"
name="CompleteProfileStep__profilePicture"
onRemove={[Function]}
onSelect={[Function]}
/>
Expand Down Expand Up @@ -48,6 +49,7 @@ exports[`components/next_steps_view/steps/complete_profile_step should match sna
>
<button
className="NextStepsView__button NextStepsView__finishButton primary disabled"
data-testid="CompleteProfileStep__saveProfileButton"
disabled={true}
onClick={[Function]}
>
Expand Down
2 changes: 2 additions & 0 deletions components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export default class CompleteProfileStep extends React.PureComponent<Props, Stat
/>
</h3>
<PictureSelector
name='CompleteProfileStep__profilePicture'
onSelect={this.onSelectPicture}
onRemove={this.onRemovePicture}
src={pictureSrc}
Expand Down Expand Up @@ -146,6 +147,7 @@ export default class CompleteProfileStep extends React.PureComponent<Props, Stat
}
<div className='NextStepsView__wizardButtons'>
<button
data-testid='CompleteProfileStep__saveProfileButton'
className={classNames('NextStepsView__button NextStepsView__finishButton primary', {disabled: this.isFinishDisabled()})}
onClick={this.onFinish}
disabled={this.isFinishDisabled()}
Expand Down
3 changes: 3 additions & 0 deletions ...next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
<MultiInput
inputValue=""
legend="Email addresses"
name="InviteMembersStep__membersListInput"
onBlur={[Function]}
onChange={[Function]}
onInputChange={[Function]}
Expand All @@ -42,6 +43,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
>
<button
className="NextStepsView__button InviteMembersStep__sendButton secondary disabled"
data-testid="InviteMembersStep__sendButton"
disabled={true}
onClick={[Function]}
>
Expand Down Expand Up @@ -107,6 +109,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
>
<button
className="NextStepsView__button NextStepsView__finishButton primary"
data-testid="InviteMembersStep__finishButton"
onClick={[Function]}
>
<FormattedMessage
Expand Down
39 changes: 24 additions & 15 deletions components/next_steps_view/steps/invite_members_step/invite_members_step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,20 +153,26 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
}

copyLink = () => {
const textField = document.createElement('textarea');
textField.innerText = this.getInviteURL();
textField.style.position = 'fixed';
textField.style.opacity = '0';

document.body.appendChild(textField);
textField.select();

try {
this.setState({copiedLink: document.execCommand('copy')});
} catch (err) {
this.setState({copiedLink: false});
const clipboard = navigator.clipboard;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, there's Utils.copyToClipboard that does this as a helper, but it currently doesn't do the navigator.clipboard bit we talked about yesterday, so you'd have to wait for my PR to use that. You could use the current version for the textarea case at least if you wanted though.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, depending when your PR gets in I can update that in your PR/as a seperate one later. Definitely something I can do though.

if (clipboard) {
clipboard.writeText(this.getInviteURL());
this.setState({copiedLink: true});
} else {
const textField = document.createElement('textarea');
textField.innerText = this.getInviteURL();
textField.style.position = 'fixed';
textField.style.opacity = '0';

document.body.appendChild(textField);
textField.select();

try {
this.setState({copiedLink: document.execCommand('copy')});
} catch (err) {
this.setState({copiedLink: false});
}
textField.remove();
}
textField.remove();

if (this.timeout) {
clearTimeout(this.timeout);
Expand Down Expand Up @@ -204,9 +210,11 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
legend={Utils.localizeMessage('next_steps_view.invite_members_step.emailAddresses', 'Email addresses')}
placeholder={Utils.localizeMessage('next_steps_view.invite_members_step.enterEmailAddresses', 'Enter email addresses')}
styles={styles}
name='InviteMembersStep__membersListInput'
/>
<div className='InviteMembersStep__send'>
<button
data-testid='InviteMembersStep__sendButton'
className={classNames('NextStepsView__button InviteMembersStep__sendButton secondary', {disabled: !this.state.emails.length || Boolean(this.state.emailsSent) || this.state.emailError})}
disabled={!this.state.emails.length || Boolean(this.state.emailsSent) || Boolean(this.state.emailError)}
onClick={this.sendEmailInvites}
Expand Down Expand Up @@ -252,12 +260,12 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
readOnly={true}
value={this.getInviteURL()}
aria-label={Utils.localizeMessage({id: 'next_steps_view.invite_members_step.shareLinkInput', defaultMessage: 'team invite link'})}
data-testid='shareLinkInput'
data-testid='InviteMembersStep__shareLinkInput'
/>
<button
className={classNames('NextStepsView__button InviteMembersStep__shareLinkInputButton secondary', {copied: this.state.copiedLink})}
onClick={this.copyLink}
data-testid='shareLinkInputButton'
data-testid='InviteMembersStep__shareLinkInputButton'
>
{!this.state.copiedLink &&
<>
Expand All @@ -283,6 +291,7 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
</div>
<div className='NextStepsView__wizardButtons'>
<button
data-testid='InviteMembersStep__finishButton'
className={'NextStepsView__button NextStepsView__finishButton primary'}
onClick={this.onFinish}
>
Expand Down
2 changes: 2 additions & 0 deletions ...nts/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ exports[`components/next_steps_view/steps/team_profile_step should match snapsho
/>
</h3>
<PictureSelector
name="TeamProfileStep__teamIcon"
onRemove={[Function]}
onSelect={[Function]}
placeholder={
Expand Down Expand Up @@ -56,6 +57,7 @@ exports[`components/next_steps_view/steps/team_profile_step should match snapsho
>
<button
className="NextStepsView__button NextStepsView__finishButton primary"
data-testid="TeamProfileStep__saveTeamButton"
disabled={false}
onClick={[Function]}
>
Expand Down
2 changes: 2 additions & 0 deletions components/next_steps_view/steps/team_profile_step/team_profile_step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default class TeamProfileStep extends React.PureComponent<Props, State> {
/>
</h3>
<PictureSelector
name='TeamProfileStep__teamIcon'
onSelect={this.onSelectPicture}
onRemove={this.onRemovePicture}
src={pictureSrc}
Expand Down Expand Up @@ -152,6 +153,7 @@ export default class TeamProfileStep extends React.PureComponent<Props, State> {
}
<div className='NextStepsView__wizardButtons'>
<button
data-testid='TeamProfileStep__saveTeamButton'
className={classNames('NextStepsView__button NextStepsView__finishButton primary', {disabled: this.isFinishDisabled()})}
onClick={this.onFinish}
disabled={this.isFinishDisabled()}
Expand Down
1 change: 1 addition & 0 deletions components/picture_selector.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import PictureSelector from 'components/picture_selector';

describe('components/picture_selector', () => {
const baseProps = {
name: 'picture_selector_test',
onSelect: jest.fn(),
onRemove: jest.fn(),
};
Expand Down
6 changes: 4 additions & 2 deletions components/picture_selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import * as FileUtils from 'utils/file_utils';
import './picture_selector.scss';

type Props = {
name: string;
src?: string;
defaultSrc?: string;
placeholder?: React.ReactNode;
Expand All @@ -19,7 +20,7 @@ type Props = {
};

const PictureSelector: React.FC<Props> = (props: Props) => {
const {src, defaultSrc, placeholder, loadingPicture, onSelect, onRemove} = props;
const {name, src, defaultSrc, placeholder, loadingPicture, onSelect, onRemove} = props;

const [image, setImage] = useState<string>();
const [orientationStyles, setOrientationStyles] = useState<{transform: any; transformOrigin: any}>();
Expand Down Expand Up @@ -94,7 +95,8 @@ const PictureSelector: React.FC<Props> = (props: Props) => {
return (
<div className='PictureSelector'>
<input
data-testid='PictureSelector__input'
name={name}
data-testid={`PictureSelector__input-${name}`}
ref={inputRef}
className='PictureSelector__input'
accept='.jpg,.png,.bmp'
Expand Down
4 changes: 2 additions & 2 deletions components/sidebar/sidebar_next_steps/sidebar_next_steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
}

render() {
if (this.props.preferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value)) {
if (this.props.preferences.some((pref) => pref.name === RecommendedNextSteps.HIDE && pref.value === 'true')) {
return null;
}

Expand All @@ -86,7 +86,7 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
}

const total = Steps.length;
const complete = this.props.preferences.filter((pref) => pref.value).length;
const complete = this.props.preferences.filter((pref) => pref.name !== RecommendedNextSteps.HIDE && pref.value === 'true').length;

let header = (
<FormattedMessage
Expand Down
Loading