From 0c575091622e0992de4c856d02e34b3e037f8f9f Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Mon, 29 May 2017 16:51:25 +0200 Subject: [PATCH] SONAR-9254 Move the projects search box on top of the projects cards --- .../apps/projects/components/AllProjects.js | 22 ++++-- .../js/apps/projects/components/PageHeader.js | 9 +++ .../apps/projects/components/PageSidebar.js | 2 - .../components/__tests__/PageHeader-test.js | 38 +++++++++ .../__snapshots__/PageHeader-test.js.snap | 79 +++++++++++++++++++ .../__snapshots__/PageSidebar-test.js.snap | 16 ---- .../js/apps/projects/filters/SearchFilter.js | 15 ++-- .../__snapshots__/SearchFilter-test.js.snap | 17 +--- .../src/main/js/apps/projects/styles.css | 19 ++--- 9 files changed, 155 insertions(+), 62 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/projects/components/__tests__/PageHeader-test.js create mode 100644 server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js index 8b172222b75..46d752be2db 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js +++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js @@ -120,6 +120,7 @@ export default class AllProjects extends React.PureComponent { }; render() { + const { isFavorite, organization } = this.props; const { query, optionBarOpen } = this.state; const isFiltered = Object.keys(query).some(key => query[key] != null); @@ -127,7 +128,7 @@ export default class AllProjects extends React.PureComponent { const visualization = query.visualization || 'risk'; const selectedSort = query.sort || 'name'; - const top = (this.props.organization ? 95 : 30) + (optionBarOpen ? 45 : 0); + const top = (organization ? 95 : 30) + (optionBarOpen ? 45 : 0); return (
@@ -149,8 +150,8 @@ export default class AllProjects extends React.PureComponent {
- + {view !== 'visualizations' && } {view !== 'visualizations' && } {view === 'visualizations' && } diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js index f3866ee3935..00022b19545 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js +++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.js @@ -19,17 +19,26 @@ */ // @flow import React from 'react'; +import SearchFilterContainer from '../filters/SearchFilterContainer'; import { translate } from '../../../helpers/l10n'; type Props = { + isFavorite?: boolean, loading: boolean, onOpenOptionBar: () => void, + organization?: { key: string }, + query: { [string]: string }, total?: number }; export default function PageHeader(props: Props) { return (
+
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js index 3e7ca9e4591..302ee1941ff 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js +++ b/server/sonar-web/src/main/js/apps/projects/components/PageSidebar.js @@ -34,7 +34,6 @@ import NewLinesFilter from '../filters/NewLinesFilter'; import QualityGateFilter from '../filters/QualityGateFilter'; import ReliabilityFilter from '../filters/ReliabilityFilter'; import SecurityFilter from '../filters/SecurityFilter'; -import SearchFilterContainer from '../filters/SearchFilterContainer'; import SizeFilter from '../filters/SizeFilter'; import TagsFilterContainer from '../filters/TagsFilterContainer'; import { translate } from '../../../helpers/l10n'; @@ -84,7 +83,6 @@ export default function PageSidebar({
}

{translate('filters')}

-
{!isLeakView && [ diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageHeader-test.js b/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageHeader-test.js new file mode 100644 index 00000000000..ef934431b52 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/PageHeader-test.js @@ -0,0 +1,38 @@ +/* + * SonarQube + * Copyright (C) 2009-2017 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import React from 'react'; +import { shallow } from 'enzyme'; +import PageHeader from '../PageHeader'; + +it('should render correctly', () => { + expect(shallow()).toMatchSnapshot(); +}); + +it('should render correctly while loading', () => { + expect( + shallow() + ).toMatchSnapshot(); +}); + +it('should not render projects total', () => { + expect( + shallow().find('#projects-total').exists() + ).toBeFalsy(); +}); diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap new file mode 100644 index 00000000000..9783b6a6c35 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.js.snap @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render correctly 1`] = ` +
+ +
+ + + + 12 + + + projects._projects + +
+
+`; + +exports[`should render correctly while loading 1`] = ` +
+ +
+ + + + + 2 + + + projects._projects + +
+
+`; diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap index 5460d9a0e3d..d48dbb01e6d 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageSidebar-test.js.snap @@ -40,14 +40,6 @@ exports[`should render \`leak\` view correctly 1`] = `

filters

-
filters -
- - {translateWithParameters('select2.tooShort', 2)} - + {shortQuery && + + {translateWithParameters('select2.tooShort', 2)} + }
); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SearchFilter-test.js.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SearchFilter-test.js.snap index 0fd5b0f6cb4..a48f32ac99c 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SearchFilter-test.js.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SearchFilter-test.js.snap @@ -7,7 +7,7 @@ exports[`should display a help message when there is less than 2 characters 1`] > - - select2.tooShort.2 -
`; @@ -55,11 +50,6 @@ exports[`should render correctly without any search query 1`] = ` type="search" value="" /> - - select2.tooShort.2 - `; @@ -76,10 +66,5 @@ exports[`should render with a search query 1`] = ` type="search" value="foo" /> - - select2.tooShort.2 - `; diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css index a6c471bef8c..afe6b79b614 100644 --- a/server/sonar-web/src/main/js/apps/projects/styles.css +++ b/server/sonar-web/src/main/js/apps/projects/styles.css @@ -223,21 +223,18 @@ } .projects-facet-search { - position: relative; - padding-top: 10px; - padding-bottom: 10px; -} - -.projects-facet-search .note { position: absolute; - opacity: 0; + bottom: 0; left: 0; - bottom: -7px; - transition: opacity 0.3s ease; + width: 300px; } -.projects-facet-search input.touched ~ .note { - opacity: 1; +.projects-facet-search .note { + position: absolute; + top: 1px; + right: 30px; + line-height: 24px; + pointer-events: none; } .projects-facets-reset { -- 2.39.5