diff options
Diffstat (limited to 'server/sonar-web/src/main/js/apps/tutorials')
10 files changed, 51 insertions, 123 deletions
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx index 1163399e78b..3051b630d83 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingModal.tsx @@ -32,18 +32,11 @@ export interface Props { currentUser: T.LoggedInUser; onClose: () => void; onOpenProjectOnboarding: () => void; - skipOnboarding: () => void; userOrganizations: T.Organization[]; } export function OnboardingModal(props: Props) { - const { - currentUser, - onClose, - onOpenProjectOnboarding, - skipOnboarding, - userOrganizations - } = props; + const { currentUser, onClose, onOpenProjectOnboarding, userOrganizations } = props; const organizations = userOrganizations.filter(o => o.key !== currentUser.personalOrganization); @@ -51,9 +44,9 @@ export function OnboardingModal(props: Props) { return ( <Modal contentLabel={header} - medium={true} onRequestClose={onClose} - shouldCloseOnOverlayClick={false}> + shouldCloseOnOverlayClick={false} + size={organizations.length > 0 ? 'medium' : 'small'}> <div className="modal-head"> <h2>{translate('onboarding.header')}</h2> <p className="spacer-top">{translate('onboarding.header.description')}</p> @@ -61,9 +54,7 @@ export function OnboardingModal(props: Props) { <div className="modal-body text-center display-flex-row huge-spacer-top huge-spacer-bottom"> <div className="flex-1"> <OnboardingProjectIcon className="big-spacer-bottom" /> - <h6 className="onboarding-choice-name big-spacer-bottom"> - {translate('onboarding.analyze_your_code')} - </h6> + <h3 className="big-spacer-bottom">{translate('onboarding.analyze_your_code')}</h3> <Button onClick={onOpenProjectOnboarding}> {translate('onboarding.project.create')} </Button> @@ -75,13 +66,10 @@ export function OnboardingModal(props: Props) { </div> <div className="flex-1"> <OnboardingTeamIcon className="big-spacer-bottom" /> - <h6 className="onboarding-choice-name big-spacer-bottom"> + <h3 className="big-spacer-bottom"> {translate('onboarding.browse_your_organizations')} - </h6> - <OrganizationsShortList - organizations={organizations} - skipOnboarding={skipOnboarding} - /> + </h3> + <OrganizationsShortList onClick={onClose} organizations={organizations} /> </div> </> )} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx index 5bda42d861b..52644d6b02e 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OnboardingPage.tsx @@ -42,7 +42,6 @@ export class OnboardingPage extends React.PureComponent<Props> { <OnboardingModal onClose={this.closeOnboarding} onOpenProjectOnboarding={openProjectOnboarding} - skipOnboarding={this.props.skipOnboarding} /> )} </OnboardingContext.Consumer> diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx index a7eecc85f6f..d7685c0cffb 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortList.tsx @@ -25,10 +25,10 @@ import { translate, translateWithParameters } from '../../../helpers/l10n'; export interface Props { organizations: T.Organization[]; - skipOnboarding: () => void; + onClick: () => void; } -export default function OrganizationsShortList({ organizations, skipOnboarding }: Props) { +export default function OrganizationsShortList({ onClick, organizations }: Props) { if (organizations.length === 0) { return null; } @@ -39,26 +39,27 @@ export default function OrganizationsShortList({ organizations, skipOnboarding } return ( <div> - <ul className="account-projects-list"> + <ul> {organizationsShown.map(organization => ( <li key={organization.key}> - <OrganizationsShortListItem - organization={organization} - skipOnboarding={skipOnboarding} - /> + <OrganizationsShortListItem onClick={onClick} organization={organization} /> </li> ))} </ul> - <div className="big-spacer-top"> - <span className="big-spacer-right"> - {translateWithParameters('x_of_y_shown', organizationsShown.length, organizations.length)} - </span> - {organizations.length > 3 && ( - <Link className="small" onClick={skipOnboarding} to="/account/organizations"> + {organizations.length > 3 && ( + <div className="big-spacer-top"> + <span className="big-spacer-right"> + {translateWithParameters( + 'x_of_y_shown', + organizationsShown.length, + organizations.length + )} + </span> + <Link className="small" onClick={onClick} to="/account/organizations"> {translate('see_all')} </Link> - )} - </div> + </div> + )} </div> ); } diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx index 49be2296cb9..c9740ebd5e8 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationsShortListItem.tsx @@ -24,15 +24,15 @@ import { withRouter, Router } from '../../../components/hoc/withRouter'; import { getOrganizationUrl } from '../../../helpers/urls'; interface Props { + onClick: () => void; organization: T.Organization; router: Router; - skipOnboarding: () => void; } export class OrganizationsShortListItem extends React.PureComponent<Props> { handleClick = () => { - const { organization, router, skipOnboarding } = this.props; - skipOnboarding(); + const { onClick, organization, router } = this.props; + onClick(); router.push(getOrganizationUrl(organization.key)); }; diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx index 2521fc0cba8..ab03de8c5d3 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OnboardingModal-test.tsx @@ -59,7 +59,6 @@ function shallowRender(props: Partial<Props> = {}) { currentUser={mockCurrentUser()} onClose={jest.fn()} onOpenProjectOnboarding={jest.fn()} - skipOnboarding={jest.fn()} userOrganizations={[]} {...props} /> diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx index f0e9b24e4d3..f5f46c188c7 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortList-test.tsx @@ -50,7 +50,5 @@ it('should limit displayed orgs to the first three', () => { }); function shallowRender(props: Partial<Props> = {}) { - return shallow( - <OrganizationsShortList organizations={[]} skipOnboarding={jest.fn()} {...props} /> - ); + return shallow(<OrganizationsShortList onClick={jest.fn()} organizations={[]} {...props} />); } diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx index bf84c7895ba..acc2ba83e8f 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/OrganizationsShortListItem-test.tsx @@ -27,23 +27,23 @@ it('renders correctly', () => { expect(shallowRender()).toMatchSnapshot(); }); -it('calls skiponboarding and redirects to org page', () => { - const skipOnboarding = jest.fn(); +it('calls onClick and redirects to org page', () => { + const onClick = jest.fn(); const push = jest.fn(); - const wrapper = shallowRender({ skipOnboarding, router: mockRouter({ push }) }); + const wrapper = shallowRender({ onClick, router: mockRouter({ push }) }); click(wrapper); - expect(skipOnboarding).toHaveBeenCalledTimes(1); + expect(onClick).toHaveBeenCalledTimes(1); expect(push).toHaveBeenCalledWith('/organizations/foo'); }); function shallowRender(props: Partial<OrganizationsShortListItem['props']> = {}) { return shallow( <OrganizationsShortListItem + onClick={jest.fn()} organization={mockOrganization()} router={mockRouter()} - skipOnboarding={jest.fn()} {...props} /> ); diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap index 1c9eb96f30e..bd1ed0ad54f 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OnboardingModal-test.tsx.snap @@ -3,9 +3,9 @@ exports[`renders correctly 1`] = ` <Modal contentLabel="onboarding.header" - medium={true} onRequestClose={[MockFunction]} shouldCloseOnOverlayClick={false} + size="small" > <div className="modal-head" @@ -28,11 +28,11 @@ exports[`renders correctly 1`] = ` <OnboardingProjectIcon className="big-spacer-bottom" /> - <h6 - className="onboarding-choice-name big-spacer-bottom" + <h3 + className="big-spacer-bottom" > onboarding.analyze_your_code - </h6> + </h3> <Button onClick={[MockFunction]} > @@ -55,9 +55,9 @@ exports[`renders correctly 1`] = ` exports[`should display organization list if any 1`] = ` <Modal contentLabel="onboarding.header" - medium={true} onRequestClose={[MockFunction]} shouldCloseOnOverlayClick={false} + size="medium" > <div className="modal-head" @@ -80,11 +80,11 @@ exports[`should display organization list if any 1`] = ` <OnboardingProjectIcon className="big-spacer-bottom" /> - <h6 - className="onboarding-choice-name big-spacer-bottom" + <h3 + className="big-spacer-bottom" > onboarding.analyze_your_code - </h6> + </h3> <Button onClick={[MockFunction]} > @@ -104,12 +104,13 @@ exports[`should display organization list if any 1`] = ` <OnboardingTeamIcon className="big-spacer-bottom" /> - <h6 - className="onboarding-choice-name big-spacer-bottom" + <h3 + className="big-spacer-bottom" > onboarding.browse_your_organizations - </h6> + </h3> <OrganizationsShortList + onClick={[MockFunction]} organizations={ Array [ Object { @@ -122,7 +123,6 @@ exports[`should display organization list if any 1`] = ` }, ] } - skipOnboarding={[MockFunction]} /> </div> </div> diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap index 5410482f395..fb1121921b8 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/OrganizationsShortList-test.tsx.snap @@ -2,46 +2,44 @@ exports[`should limit displayed orgs to the first three 1`] = ` <div> - <ul - className="account-projects-list" - > + <ul> <li key="bar" > <withRouter(OrganizationsShortListItem) + onClick={[MockFunction]} organization={ Object { "key": "bar", "name": "Bar", } } - skipOnboarding={[MockFunction]} /> </li> <li key="foo" > <withRouter(OrganizationsShortListItem) + onClick={[MockFunction]} organization={ Object { "key": "foo", "name": "Foo", } } - skipOnboarding={[MockFunction]} /> </li> <li key="kor" > <withRouter(OrganizationsShortListItem) + onClick={[MockFunction]} organization={ Object { "key": "kor", "name": "Kor", } } - skipOnboarding={[MockFunction]} /> </li> </ul> @@ -68,44 +66,33 @@ exports[`should limit displayed orgs to the first three 1`] = ` exports[`should render correctly 1`] = ` <div> - <ul - className="account-projects-list" - > + <ul> <li key="bar" > <withRouter(OrganizationsShortListItem) + onClick={[MockFunction]} organization={ Object { "key": "bar", "name": "Bar", } } - skipOnboarding={[MockFunction]} /> </li> <li key="foo" > <withRouter(OrganizationsShortListItem) + onClick={[MockFunction]} organization={ Object { "key": "foo", "name": "Foo", } } - skipOnboarding={[MockFunction]} /> </li> </ul> - <div - className="big-spacer-top" - > - <span - className="big-spacer-right" - > - x_of_y_shown.2.2 - </span> - </div> </div> `; diff --git a/server/sonar-web/src/main/js/apps/tutorials/styles.css b/server/sonar-web/src/main/js/apps/tutorials/styles.css index 41cf98f083d..2a7946f0f1c 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/styles.css +++ b/server/sonar-web/src/main/js/apps/tutorials/styles.css @@ -57,47 +57,3 @@ cursor: pointer; outline: none; } - -.onboarding-choices { - display: flex; - justify-content: space-around; - padding: 44px 170px; - background-color: var(--barBackgroundColor); - margin-top: var(--pagePadding); -} - -.onboarding-choice { - display: flex; - flex-direction: column; - justify-content: center; - padding: calc(2 * var(--gridSize)); - width: 190px; - height: 190px; - background-color: #fff; - border: solid 1px #fff; - border-radius: 3px; - transition: all 0.2s ease; - box-shadow: 0 1px 1px 1px var(--barBorderColor); -} - -.onboarding-choice svg { - color: var(--gray40); -} - -.onboarding-choice-name { - color: inherit; - font-size: var(--mediumFontSize); -} - -.onboarding-choice .note { - font-weight: 400; -} - -.onboarding-choice:hover, -.onboarding-choice:focus, -.onboarding-choice:active { - background-color: #fff; - color: var(--darkBlue); - box-shadow: var(--defaultShadow); - transform: translateY(-2px); -} |