From f6cb3d50783e3f6f34dde821bdfef7d6d3f6768b Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Fri, 10 May 2019 22:58:33 -0400 Subject: [PATCH 01/10] make search urls consistent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit in search urls: * use %20 for spaces everywhere * encode search term strings * hide ‘q’ key if it has no value --- src/components/navigation/www/navigation.jsx | 6 ++- src/views/search/search.jsx | 40 ++++++++++++++------ 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx index 986bb51b5..7068f05f0 100644 --- a/src/components/navigation/www/navigation.jsx +++ b/src/components/navigation/www/navigation.jsx @@ -78,7 +78,11 @@ class Navigation extends React.Component { return `/users/${this.props.user.username}/`; } handleSearchSubmit (formData) { - window.location.href = `/search/projects?q=${encodeURIComponent(formData.q)}`; + let targetUrl = '/search/projects'; + if (formData.q) { + targetUrl += `?q=${encodeURIComponent(formData.q)}`; + } + window.location.href = targetUrl; } render () { const createLink = this.props.user ? '/projects/editor/' : '/projects/editor/?tutorial=getStarted'; diff --git a/src/views/search/search.jsx b/src/views/search/search.jsx index b0c5e8a99..a65f696ee 100644 --- a/src/views/search/search.jsx +++ b/src/views/search/search.jsx @@ -57,7 +57,9 @@ class Search extends React.Component { } componentDidMount () { - const query = decodeURIComponent(window.location.search); + // just in case there's a URL in the wild with pluses to indicate spaces, + // convert pluses to url-encoded spaces before decoding. + const query = decodeURIComponent(window.location.search.split('+').join('%20')); let term = query; const stripQueryValue = function (queryTerm) { @@ -91,6 +93,13 @@ class Search extends React.Component { this.handleGetSearchMore(); } } + encodeSearchTerm () { + let termText = ''; + if (this.props.searchTerm) { + termText = encodeURIComponent(this.props.searchTerm); + } + return termText; + } getSearchState () { let pathname = window.location.pathname.toLowerCase(); if (pathname[pathname.length - 1] === '/') { @@ -105,21 +114,24 @@ class Search extends React.Component { } handleChangeSortMode (name, value) { if (ACCEPTABLE_MODES.indexOf(value) !== -1) { - const term = this.props.searchTerm.split(' ').join('+'); - window.location = - `${window.location.origin}/search/${this.state.tab}?q=${term}&mode=${value}`; + const termText = this.encodeSearchTerm(); + let newLocation = `${window.location.origin}/search/${this.state.tab}?mode=${value}`; + if (termText) { + newLocation += `&q=${termText}`; + } + window.location = newLocation; } } handleGetSearchMore () { - let termText = ''; - if (this.props.searchTerm !== '') { - termText = `&q=${encodeURIComponent(this.props.searchTerm.split(' ').join('+'))}`; - } + const termText = this.encodeSearchTerm(); const locale = this.props.intl.locale; const loadNumber = this.state.loadNumber; const offset = this.state.offset; const mode = this.state.mode; - const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=${mode}${termText}`; + let queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=${mode}`; + if (termText) { + queryString += `&q=${termText}`; + } api({ uri: `/search/${this.state.tab}?${queryString}` @@ -137,9 +149,13 @@ class Search extends React.Component { }); } getTab (type) { - const term = this.props.searchTerm.split(' ').join('+'); + const termText = this.encodeSearchTerm(); + let targetUrl = `/search/${type}`; + if (termText) { + targetUrl += `?q=${termText}`; + } let allTab = ( - +
  • +
  • Date: Mon, 13 May 2019 15:02:56 -0400 Subject: [PATCH 02/10] added tests for search string processing --- test/integration/search/test_search.js | 58 ++++++++++++++++++++++++++ test/integration/selenium-helpers.js | 12 +++++- 2 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 test/integration/search/test_search.js diff --git a/test/integration/search/test_search.js b/test/integration/search/test_search.js new file mode 100644 index 000000000..c735d2472 --- /dev/null +++ b/test/integration/search/test_search.js @@ -0,0 +1,58 @@ +/* + * Checks the behavior of the search interface + */ +require('chromedriver'); +const seleniumWebdriver = require('selenium-webdriver'); +const SeleniumHelper = require('../selenium-helpers.js'); +const helper = new SeleniumHelper(); +const { + urlMatches +} = helper; + +const tap = require('tap'); +const test = tap.test; + +// Set test url through environment variable +const rootUrl = process.env.ROOT_URL || 'http://localhost:8333'; +const searchBaseUrl = `${rootUrl}/search/`; + +// chrome driver +const driver = helper.buildDriver('www-search test_search'); + +tap.plan(3); + +tap.tearDown(function () { + driver.quit(); +}); + +tap.beforeEach(function () { + return driver.get(searchBaseUrl); +}); + +test('Search escapes spaces', function (t) { + const searchInput = driver.findElement(seleniumWebdriver.By.name('q')); + searchInput.sendKeys('Test search string', helper.getKey('ENTER')).then(function () { + urlMatches(/^.*\?q=Test%20search%20string$/) + .then(() => t.end()); + }); +}); + +test('Search escapes symbols', function (t) { + const searchInput = driver.findElement(seleniumWebdriver.By.name('q')); + searchInput.sendKeys('100% pen', helper.getKey('ENTER')).then(function () { + urlMatches(/^.*\?q=100%25%20pen$/) + .then(() => t.end()); + }); +}); + +test('Switching to studios maintains search string', function (t) { + const searchInput = driver.findElement(seleniumWebdriver.By.name('q')); + searchInput.sendKeys('100% pen', helper.getKey('ENTER')).then(function () { + const studiosTab = driver.findElement(seleniumWebdriver.By.xpath( + '//a/li/span[contains(text(),"Studios")]')); + studiosTab.click().then(function () { + urlMatches(/^.*\?q=100%25%20pen$/) + .then(() => t.end()); + }); + }); +}); diff --git a/test/integration/selenium-helpers.js b/test/integration/selenium-helpers.js index fc3fe5c07..14e8a0a63 100644 --- a/test/integration/selenium-helpers.js +++ b/test/integration/selenium-helpers.js @@ -7,13 +7,14 @@ const remote = process.env.SMOKE_REMOTE || false; const ci = process.env.CI || false; const buildID = process.env.TRAVIS_BUILD_NUMBER; const {SAUCE_USERNAME, SAUCE_ACCESS_KEY} = process.env; -const {By, until} = webdriver; +const {By, Key, until} = webdriver; class SeleniumHelper { constructor () { bindAll(this, [ 'getDriver', 'getSauceDriver', + 'getKey', 'buildDriver', 'clickXpath', 'findByXpath', @@ -22,6 +23,7 @@ class SeleniumHelper { 'clickButton', 'findByCss', 'clickCss', + 'urlMatches', 'getLogs' ]); } @@ -79,6 +81,10 @@ class SeleniumHelper { return driver; } + getKey (keyName) { + return Key[keyName]; + } + findByXpath (xpath) { return this.driver.wait(until.elementLocated(By.xpath(xpath), 5 * 1000)); } @@ -107,6 +113,10 @@ class SeleniumHelper { return this.findByCss(css).then(el => el.click()); } + urlMatches (regex) { + return this.driver.wait(until.urlMatches(regex), 1000 * 5); + } + getLogs (whitelist) { return this.driver.manage() .logs() From 974203d325b04c49ac2a3db88be6c4c8bcc8163a Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Wed, 15 May 2019 11:53:43 -0400 Subject: [PATCH 03/10] fix alignment of remix credit avatar, text --- src/views/preview/preview.scss | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index c949398f8..45f7bf584 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -129,9 +129,10 @@ $stage-width: 480px; height: 3rem; &.remix { - margin-right: .5em; + margin-right: .75em; width: 2rem; height: 2rem; + align-self: flex-start; } } } @@ -403,8 +404,12 @@ $stage-width: 480px; width: 100%; } - > .description-block:first-child { - margin-top: 1rem; + > * { + margin-bottom: .75rem; + } + + > .description-block:last-child { + margin-bottom: 0; } } @@ -413,10 +418,11 @@ $stage-width: 480px; border: 1px solid $ui-blue-10percent; border-radius: 8px; background-color: $ui-blue-10percent; - padding: .5rem; - width: calc(100% - 1rem); + padding: .75rem; + width: calc(100% - 1.5rem); flex-wrap: nowrap; align-items: center; + justify-content: flex-start; @media #{$medium-and-smaller} { flex-direction: row; @@ -427,15 +433,15 @@ $stage-width: 480px; .credit-text { font-size: .875rem; flex-shrink: 1; + text-align: left; } .description-block { display: flex; width: 100%; - min-height: 0; + height: 100%; flex-direction: column; align-items: flex-start; - flex: 1; } .project-textlabel { @@ -465,12 +471,13 @@ $stage-width: 480px; .project-description-form { display: flex; width: 100%; + height: 100%; + min-height: 2rem; flex-grow: 1; } .project-description-edit { display: flex; - margin-bottom: .75rem; border: 1px solid $ui-blue-10percent; border-radius: 8px; background-color: $ui-blue-10percent; From 9afe46622b562b2d5247e75a12916dc56ed38393 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Wed, 15 May 2019 18:08:25 -0400 Subject: [PATCH 04/10] added comments about form height --- src/views/preview/preview.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 45f7bf584..4c90e0879 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -471,8 +471,14 @@ $stage-width: 480px; .project-description-form { display: flex; width: 100%; + // surprisingly, without setting height: 100% here, flex-grow causes the + // height to be too large height: 100%; + // surprisingly, just having some min-height actually reduces the height + // of the element when it is being vertically crowded by other elements min-height: 2rem; + // necessary to cause the element to take up the maximum height + // available flex-grow: 1; } From 8d4f387093316b2bdfcc784fce809ea31f992822 Mon Sep 17 00:00:00 2001 From: BryceLTaylor Date: Thu, 16 May 2019 11:45:29 -0400 Subject: [PATCH 05/10] Make Add to studio test in test-my-stuff integration test look in shared projects --- test/integration/smoke-testing/test-my-stuff.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/integration/smoke-testing/test-my-stuff.js b/test/integration/smoke-testing/test-my-stuff.js index 1d39c72f8..7a971e06d 100644 --- a/test/integration/smoke-testing/test-my-stuff.js +++ b/test/integration/smoke-testing/test-my-stuff.js @@ -101,6 +101,7 @@ test('clicking a project title should take you to the project page', t => { test('Add To button should bring up a list of studios', t => { clickXpath('//a[contains(@class, "mystuff-icon")]') + .then(() => clickXpath('//div[@id="sidebar"]/ul/li[@data-tab="shared"]')) .then(() => findByXpath('//div[@data-control="add-to"]')) .then((element) => element.getText('span')) .then((text) => t.equal(text, 'Add to', 'there should be an "Add to" button')) From 1cb4bb5f7e54d445fa2e57a7f3f66dd3d92cc1bd Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 21 May 2019 00:22:37 -0400 Subject: [PATCH 06/10] adjust instructions column padding-top --- src/views/preview/preview.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 4c90e0879..8ec4f0a41 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -397,6 +397,7 @@ $stage-width: 480px; align-items: flex-start; flex: 1; flex-flow: column; + padding-top: .25rem; @media #{$medium-and-smaller} { margin-top: .5rem; From 67c30868beda80b3f2bbc3a5ba0e50e9665b6725 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 21 May 2019 22:43:41 -0400 Subject: [PATCH 07/10] moved test_search into smoke-testing directory so it will run --- test/integration/{search => smoke-testing}/test_search.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/integration/{search => smoke-testing}/test_search.js (100%) diff --git a/test/integration/search/test_search.js b/test/integration/smoke-testing/test_search.js similarity index 100% rename from test/integration/search/test_search.js rename to test/integration/smoke-testing/test_search.js From 69eca8ed49f12c735c084919450d91fc0b80fcc5 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Tue, 21 May 2019 23:37:10 -0400 Subject: [PATCH 08/10] defined player-header and redefined player-height to make project notes correct height --- src/views/preview/preview.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 8ec4f0a41..02e75ea6c 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -3,7 +3,8 @@ /* stage size constants */ $player-width: 482px; -$player-height: 406px; +$player-height: 362px; +$player-header: 44px; $stage-width: 480px; /* override view padding for share banner */ @@ -393,11 +394,11 @@ $stage-width: 480px; .project-notes { margin-left: 1rem; - height: $player-height; + height: calc(#{$player-height} + #{$player-header} - .3125rem); align-items: flex-start; flex: 1; flex-flow: column; - padding-top: .25rem; + margin-top: .3125rem; @media #{$medium-and-smaller} { margin-top: .5rem; From c40422606f2fa76102e98ccc070af8042178e1c5 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Wed, 22 May 2019 12:30:05 -0400 Subject: [PATCH 09/10] fix last instructions notes and credits alignment --- src/views/preview/presentation.jsx | 2 +- src/views/preview/preview.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index b44250f21..d3045d3e6 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -487,7 +487,7 @@ const PreviewPresentation = ({ )} : -
    +
    {decorateText(projectInfo.description, { usernames: true, hashtags: true, diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 02e75ea6c..a8e666ddd 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -466,7 +466,7 @@ $stage-width: 480px; flex: 1; } - .project-description.last { + .project-description:last-of-type { margin-bottom: 0; } From b2dfe404bb43c854ffa6baebf40081a95b7c9c2a Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Wed, 22 May 2019 19:43:34 +0000 Subject: [PATCH 10/10] chore(package): update scratch-gui to version 0.1.0-prerelease.20190522193014 Closes #2995 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6362c678b..3571d28dd 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "react-responsive": "3.0.0", "react-slick": "0.16.0", "react-string-replace": "0.4.1", - "scratch-gui": "0.1.0-prerelease.20190516172446", + "scratch-gui": "0.1.0-prerelease.20190522193014", "react-telephone-input": "4.3.4", "redux": "3.5.2", "redux-thunk": "2.0.1",