From 9647b5dd516b14948f2a037f82f9caedefc409fe Mon Sep 17 00:00:00 2001 From: Osvaldo Vega Date: Mon, 4 Feb 2019 16:49:28 +0100 Subject: [PATCH 01/10] :recycle: Update logout function and make topBar fixed to the top --- i18n/locales/en/common.json | 1 + src/components/app/app.css | 4 +++- src/components/topBar/topBar.css | 2 ++ src/components/topBar/topBar.js | 28 +++------------------------- src/components/topBar/topBar.test.js | 8 ++++++-- 5 files changed, 15 insertions(+), 28 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 016630956c..893fe0aa1c 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -3,6 +3,7 @@ " FAQ": " FAQ", " LSK": " LSK", " Make sure that you are using the latest version of Lisk Hub.": " Make sure that you are using the latest version of Lisk Hub.", + " of": " of", " or get in touch in via ": " or get in touch in via ", "About": "About", "Academy": "Academy", diff --git a/src/components/app/app.css b/src/components/app/app.css index add4c423ed..17940d6c18 100644 --- a/src/components/app/app.css +++ b/src/components/app/app.css @@ -20,10 +20,12 @@ body { z-index: 0; & > section { - margin-top: 25px; + margin-top: 85px; width: 100%; opacity: 0; transition: all ease 250ms; + position: relative; + z-index: -1; } &.loaded > section { diff --git a/src/components/topBar/topBar.css b/src/components/topBar/topBar.css index d9ab9c48ba..218158bd54 100644 --- a/src/components/topBar/topBar.css +++ b/src/components/topBar/topBar.css @@ -12,6 +12,8 @@ background: var(--color-background-menu); border-bottom: 1px solid var(--color-light-gray); box-shadow: var(--box-shadow-header); + position: fixed; + z-index: 1; } .elements { diff --git a/src/components/topBar/topBar.js b/src/components/topBar/topBar.js index 77e3b38e6f..6a662417cd 100644 --- a/src/components/topBar/topBar.js +++ b/src/components/topBar/topBar.js @@ -5,7 +5,6 @@ import MenuItems from './menuItems'; import SearchBar from '../searchBar'; import UserAccount from './userAccount'; import Piwik from '../../utils/piwik'; -import Options from '../dialog/options'; import { menuLinks } from './constants'; import styles from './topBar.css'; @@ -19,37 +18,16 @@ class TopBar extends React.Component { isDropdownEnable: false, }; - this.confirLogout = this.confirLogout.bind(this); this.onLogout = this.onLogout.bind(this); this.handleClick = this.handleClick.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this); this.setDropdownRef = this.setDropdownRef.bind(this); } - confirLogout() { - this.props.logOut(); - this.props.closeDialog(); - this.props.history.replace(`${routes.dashboard.path}`); - } - onLogout() { Piwik.trackingEvent('Header', 'button', 'Open logout dialog'); - - this.props.setActiveDialog({ - childComponent: Options, - childComponentProps: { - title: this.props.t('Logout'), - text: this.props.t('After logging out of your account you will be able to access the Dashboard, Settings and Search.'), - firstButton: { - text: this.props.t('Cancel'), - onClickHandler: this.props.closeDialog, - }, - secondButton: { - text: this.props.t('Logout'), - onClickHandler: this.confirLogout, - }, - }, - }); + this.props.logOut(); + this.props.history.replace(`${routes.dashboard.path}`); } handleClick() { @@ -74,7 +52,7 @@ class TopBar extends React.Component { render() { const { t, showDelegate, account } = this.props; - + console.log(this.props); const items = showDelegate ? menuLinks : menuLinks.filter(item => item.id !== 'delegates'); diff --git a/src/components/topBar/topBar.test.js b/src/components/topBar/topBar.test.js index f83ac05c34..31e8a4acff 100644 --- a/src/components/topBar/topBar.test.js +++ b/src/components/topBar/topBar.test.js @@ -20,6 +20,10 @@ describe('TopBar', () => { location: { pathname: routes.dashboard.path }, showDelegate: false, t: val => val, + logOut: sinon.spy(), + history: { + replace: () => {}, + }, }; const history = { @@ -82,9 +86,9 @@ describe('TopBar', () => { it('logout user when user do a click on logout function', () => { wrapper.find('.avatar').simulate('click'); wrapper.update(); - wrapper.find('span.dropdownOption').simulate('click'); + wrapper.find('.logout').simulate('click'); wrapper.update(); - expect(myProps.setActiveDialog).have.been.calledWith(); + expect(myProps.logOut).have.been.calledWith(); }); it('renders sign in component when user is logout', () => { From da0940d2fa3372d6a35376935a55cdc21d268519 Mon Sep 17 00:00:00 2001 From: Osvaldo Vega Date: Mon, 4 Feb 2019 17:13:23 +0100 Subject: [PATCH 02/10] :recycle: remove console.log from topBar file --- src/components/topBar/topBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/topBar/topBar.js b/src/components/topBar/topBar.js index 6a662417cd..bc66152d1e 100644 --- a/src/components/topBar/topBar.js +++ b/src/components/topBar/topBar.js @@ -52,7 +52,7 @@ class TopBar extends React.Component { render() { const { t, showDelegate, account } = this.props; - console.log(this.props); + const items = showDelegate ? menuLinks : menuLinks.filter(item => item.id !== 'delegates'); From fd8aa296a2debbce2df31ee8d5029650c310c9cf Mon Sep 17 00:00:00 2001 From: Osvaldo Vega Date: Mon, 4 Feb 2019 17:44:07 +0100 Subject: [PATCH 03/10] :white_check_mark: Update search integration test --- test/cypress/e2e/search.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/cypress/e2e/search.spec.js b/test/cypress/e2e/search.spec.js index da6fbe033a..0171b98d33 100644 --- a/test/cypress/e2e/search.spec.js +++ b/test/cypress/e2e/search.spec.js @@ -174,7 +174,6 @@ describe('Search', () => { cy.get(ss.userAvatar).click(); cy.get(ss.logoutBtn).click(); cy.clearLocalStorage(); - cy.get(ss.dialogButtons).eq(1).click(); cy.get(ss.searchInput).click().type(`${accounts.delegate.username}`); cy.get(ss.delegateResults).eq(0).click(); cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('have.text', accounts.delegate.username); From 698494c61aceb8f04fcf1dfd160a2ced14924f16 Mon Sep 17 00:00:00 2001 From: andreiklimenok Date: Tue, 5 Feb 2019 12:14:10 +0100 Subject: [PATCH 04/10] :white_check_mark: remove unnecessary action in test --- test/constants/selectors.js | 1 - test/cypress/e2e/search.spec.js | 1 - 2 files changed, 2 deletions(-) diff --git a/test/constants/selectors.js b/test/constants/selectors.js index 738a7cad9a..c97d6d4143 100644 --- a/test/constants/selectors.js +++ b/test/constants/selectors.js @@ -72,7 +72,6 @@ const ss = { transactionId: '.transaction-id .copy-title', logoutBtn: '.logout', userAvatar: '.user-avatar', - dialogButtons: '.ok-button', emptyResultsMessage: '.empty-message', revealCheckbox: '.reveal-checkbox', passphraseTextarea: 'textarea.passphrase', diff --git a/test/cypress/e2e/search.spec.js b/test/cypress/e2e/search.spec.js index 0171b98d33..be90aa0d58 100644 --- a/test/cypress/e2e/search.spec.js +++ b/test/cypress/e2e/search.spec.js @@ -173,7 +173,6 @@ describe('Search', () => { cy.visit('/'); cy.get(ss.userAvatar).click(); cy.get(ss.logoutBtn).click(); - cy.clearLocalStorage(); cy.get(ss.searchInput).click().type(`${accounts.delegate.username}`); cy.get(ss.delegateResults).eq(0).click(); cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('have.text', accounts.delegate.username); From 1a8d87192b0a5090fe8d69dee2f0d74fa0450f62 Mon Sep 17 00:00:00 2001 From: andreiklimenok Date: Tue, 5 Feb 2019 12:47:01 +0100 Subject: [PATCH 05/10] :white_check_mark: fix not related flakiness on jenkins --- test/cypress/e2e/account.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/cypress/e2e/account.spec.js b/test/cypress/e2e/account.spec.js index 99407511da..4bb94da7d2 100644 --- a/test/cypress/e2e/account.spec.js +++ b/test/cypress/e2e/account.spec.js @@ -24,6 +24,7 @@ describe('Account', () => { cy.visit(`${urls.accounts}/${accounts.genesis.address}`); cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('not.exist'); cy.visit(`${urls.accounts}/${accounts.delegate.address}`); + cy.wait(1000); // Avoid failing on jenkins cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).contains(accounts.delegate.username); }); From bd7d82221c687ed1691fd0475a7a9d874e91575d Mon Sep 17 00:00:00 2001 From: Osvaldo Vega Date: Mon, 4 Feb 2019 16:49:28 +0100 Subject: [PATCH 06/10] :recycle: Update logout function and make topBar fixed to the top --- src/components/app/app.css | 4 +++- src/components/topBar/topBar.css | 2 ++ src/components/topBar/topBar.js | 28 +++------------------------- src/components/topBar/topBar.test.js | 8 ++++++-- 4 files changed, 14 insertions(+), 28 deletions(-) diff --git a/src/components/app/app.css b/src/components/app/app.css index add4c423ed..17940d6c18 100644 --- a/src/components/app/app.css +++ b/src/components/app/app.css @@ -20,10 +20,12 @@ body { z-index: 0; & > section { - margin-top: 25px; + margin-top: 85px; width: 100%; opacity: 0; transition: all ease 250ms; + position: relative; + z-index: -1; } &.loaded > section { diff --git a/src/components/topBar/topBar.css b/src/components/topBar/topBar.css index d9ab9c48ba..218158bd54 100644 --- a/src/components/topBar/topBar.css +++ b/src/components/topBar/topBar.css @@ -12,6 +12,8 @@ background: var(--color-background-menu); border-bottom: 1px solid var(--color-light-gray); box-shadow: var(--box-shadow-header); + position: fixed; + z-index: 1; } .elements { diff --git a/src/components/topBar/topBar.js b/src/components/topBar/topBar.js index 77e3b38e6f..6a662417cd 100644 --- a/src/components/topBar/topBar.js +++ b/src/components/topBar/topBar.js @@ -5,7 +5,6 @@ import MenuItems from './menuItems'; import SearchBar from '../searchBar'; import UserAccount from './userAccount'; import Piwik from '../../utils/piwik'; -import Options from '../dialog/options'; import { menuLinks } from './constants'; import styles from './topBar.css'; @@ -19,37 +18,16 @@ class TopBar extends React.Component { isDropdownEnable: false, }; - this.confirLogout = this.confirLogout.bind(this); this.onLogout = this.onLogout.bind(this); this.handleClick = this.handleClick.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this); this.setDropdownRef = this.setDropdownRef.bind(this); } - confirLogout() { - this.props.logOut(); - this.props.closeDialog(); - this.props.history.replace(`${routes.dashboard.path}`); - } - onLogout() { Piwik.trackingEvent('Header', 'button', 'Open logout dialog'); - - this.props.setActiveDialog({ - childComponent: Options, - childComponentProps: { - title: this.props.t('Logout'), - text: this.props.t('After logging out of your account you will be able to access the Dashboard, Settings and Search.'), - firstButton: { - text: this.props.t('Cancel'), - onClickHandler: this.props.closeDialog, - }, - secondButton: { - text: this.props.t('Logout'), - onClickHandler: this.confirLogout, - }, - }, - }); + this.props.logOut(); + this.props.history.replace(`${routes.dashboard.path}`); } handleClick() { @@ -74,7 +52,7 @@ class TopBar extends React.Component { render() { const { t, showDelegate, account } = this.props; - + console.log(this.props); const items = showDelegate ? menuLinks : menuLinks.filter(item => item.id !== 'delegates'); diff --git a/src/components/topBar/topBar.test.js b/src/components/topBar/topBar.test.js index f83ac05c34..31e8a4acff 100644 --- a/src/components/topBar/topBar.test.js +++ b/src/components/topBar/topBar.test.js @@ -20,6 +20,10 @@ describe('TopBar', () => { location: { pathname: routes.dashboard.path }, showDelegate: false, t: val => val, + logOut: sinon.spy(), + history: { + replace: () => {}, + }, }; const history = { @@ -82,9 +86,9 @@ describe('TopBar', () => { it('logout user when user do a click on logout function', () => { wrapper.find('.avatar').simulate('click'); wrapper.update(); - wrapper.find('span.dropdownOption').simulate('click'); + wrapper.find('.logout').simulate('click'); wrapper.update(); - expect(myProps.setActiveDialog).have.been.calledWith(); + expect(myProps.logOut).have.been.calledWith(); }); it('renders sign in component when user is logout', () => { From 4eeb4bacf093e5d24938c86c66f2459080d3e325 Mon Sep 17 00:00:00 2001 From: Osvaldo Vega Date: Mon, 4 Feb 2019 17:13:23 +0100 Subject: [PATCH 07/10] :recycle: remove console.log from topBar file --- src/components/topBar/topBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/topBar/topBar.js b/src/components/topBar/topBar.js index 6a662417cd..bc66152d1e 100644 --- a/src/components/topBar/topBar.js +++ b/src/components/topBar/topBar.js @@ -52,7 +52,7 @@ class TopBar extends React.Component { render() { const { t, showDelegate, account } = this.props; - console.log(this.props); + const items = showDelegate ? menuLinks : menuLinks.filter(item => item.id !== 'delegates'); From e11729ecd250df3fc54032a7cbdb71501c33616e Mon Sep 17 00:00:00 2001 From: Osvaldo Vega Date: Mon, 4 Feb 2019 17:44:07 +0100 Subject: [PATCH 08/10] :white_check_mark: Update search integration test --- test/cypress/e2e/search.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/cypress/e2e/search.spec.js b/test/cypress/e2e/search.spec.js index da6fbe033a..0171b98d33 100644 --- a/test/cypress/e2e/search.spec.js +++ b/test/cypress/e2e/search.spec.js @@ -174,7 +174,6 @@ describe('Search', () => { cy.get(ss.userAvatar).click(); cy.get(ss.logoutBtn).click(); cy.clearLocalStorage(); - cy.get(ss.dialogButtons).eq(1).click(); cy.get(ss.searchInput).click().type(`${accounts.delegate.username}`); cy.get(ss.delegateResults).eq(0).click(); cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('have.text', accounts.delegate.username); From 09dd32c8aac8a82e99aba4e92cd77df7e24ae27b Mon Sep 17 00:00:00 2001 From: andreiklimenok Date: Tue, 5 Feb 2019 12:14:10 +0100 Subject: [PATCH 09/10] :white_check_mark: remove unnecessary action in test --- test/constants/selectors.js | 1 - test/cypress/e2e/search.spec.js | 1 - 2 files changed, 2 deletions(-) diff --git a/test/constants/selectors.js b/test/constants/selectors.js index 738a7cad9a..c97d6d4143 100644 --- a/test/constants/selectors.js +++ b/test/constants/selectors.js @@ -72,7 +72,6 @@ const ss = { transactionId: '.transaction-id .copy-title', logoutBtn: '.logout', userAvatar: '.user-avatar', - dialogButtons: '.ok-button', emptyResultsMessage: '.empty-message', revealCheckbox: '.reveal-checkbox', passphraseTextarea: 'textarea.passphrase', diff --git a/test/cypress/e2e/search.spec.js b/test/cypress/e2e/search.spec.js index 0171b98d33..be90aa0d58 100644 --- a/test/cypress/e2e/search.spec.js +++ b/test/cypress/e2e/search.spec.js @@ -173,7 +173,6 @@ describe('Search', () => { cy.visit('/'); cy.get(ss.userAvatar).click(); cy.get(ss.logoutBtn).click(); - cy.clearLocalStorage(); cy.get(ss.searchInput).click().type(`${accounts.delegate.username}`); cy.get(ss.delegateResults).eq(0).click(); cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('have.text', accounts.delegate.username); From 19f3572bbe96ad6c963a4e645c3783b10c25c6f2 Mon Sep 17 00:00:00 2001 From: andreiklimenok Date: Tue, 5 Feb 2019 12:47:01 +0100 Subject: [PATCH 10/10] :white_check_mark: fix not related flakiness on jenkins --- test/cypress/e2e/account.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/cypress/e2e/account.spec.js b/test/cypress/e2e/account.spec.js index 99407511da..4bb94da7d2 100644 --- a/test/cypress/e2e/account.spec.js +++ b/test/cypress/e2e/account.spec.js @@ -24,6 +24,7 @@ describe('Account', () => { cy.visit(`${urls.accounts}/${accounts.genesis.address}`); cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('not.exist'); cy.visit(`${urls.accounts}/${accounts.delegate.address}`); + cy.wait(1000); // Avoid failing on jenkins cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).contains(accounts.delegate.username); });