diff options
author | Grégoire Aubert <gregaubert@users.noreply.github.com> | 2017-03-27 12:06:05 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-27 12:06:05 +0200 |
commit | e752bd0069aee8e54acd712a9791a330000fae95 (patch) | |
tree | 95a0fe1f4e3eea95f5ee09b4e754f03b83724d45 /server/sonar-web/src | |
parent | 7d963d84f40ee3db3b51c557fb596aa9febf82bb (diff) | |
download | sonarqube-e752bd0069aee8e54acd712a9791a330000fae95.tar.gz sonarqube-e752bd0069aee8e54acd712a9791a330000fae95.zip |
SONAR-8844 Fix project tags selector (#1857)
* Limit list size to 10 elements max
* Fix long tags display
Diffstat (limited to 'server/sonar-web/src')
10 files changed, 37 insertions, 14 deletions
diff --git a/server/sonar-web/src/main/js/apps/overview/meta/Meta.js b/server/sonar-web/src/main/js/apps/overview/meta/Meta.js index 3fdaa3bcdcc..9f67196b368 100644 --- a/server/sonar-web/src/main/js/apps/overview/meta/Meta.js +++ b/server/sonar-web/src/main/js/apps/overview/meta/Meta.js @@ -53,7 +53,7 @@ const Meta = ({ component, measures, areThereCustomOrganizations }) => { <MetaSize component={component} measures={measures} /> - <MetaTags component={component} /> + {isProject && <MetaTags component={component} />} {shouldShowQualityGate && <MetaQualityGate gate={qualityGate} />} diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaTags.js b/server/sonar-web/src/main/js/apps/overview/meta/MetaTags.js index 04c6650341f..61301114fe9 100644 --- a/server/sonar-web/src/main/js/apps/overview/meta/MetaTags.js +++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaTags.js @@ -112,7 +112,6 @@ export default class MetaTags extends React.PureComponent { <TagsList tags={tags.length ? tags : [translate('no_tags')]} allowUpdate={true} - allowMultiLine={true} /> </button> {popupOpen && diff --git a/server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaTags-test.js b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaTags-test.js index eaf3dc5b669..85e4c744e92 100644 --- a/server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaTags-test.js +++ b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaTags-test.js @@ -46,7 +46,6 @@ it('should render with tags and admin rights', () => { expect(shallow(<MetaTags component={componentWithTags} />)).toMatchSnapshot(); }); - it('should open the tag selector on click', () => { const wrapper = shallow(<MetaTags component={componentWithTags} />); expect(wrapper).toMatchSnapshot(); diff --git a/server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaTags-test.js.snap b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaTags-test.js.snap index fdf142c3fc8..a92d8b33fb1 100644 --- a/server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaTags-test.js.snap +++ b/server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaTags-test.js.snap @@ -5,7 +5,7 @@ exports[`test should open the tag selector on click 1`] = ` className="button-link" onClick={[Function]}> <TagsList - allowMultiLine={true} + allowMultiLine={false} allowUpdate={true} tags={ Array [ @@ -24,7 +24,7 @@ exports[`test should open the tag selector on click 2`] = ` className="button-link" onClick={[Function]}> <TagsList - allowMultiLine={true} + allowMultiLine={false} allowUpdate={true} tags={ Array [ @@ -59,7 +59,7 @@ exports[`test should open the tag selector on click 3`] = ` className="button-link" onClick={[Function]}> <TagsList - allowMultiLine={true} + allowMultiLine={false} allowUpdate={true} tags={ Array [ @@ -78,7 +78,7 @@ exports[`test should render with tags and admin rights 1`] = ` className="button-link" onClick={[Function]}> <TagsList - allowMultiLine={true} + allowMultiLine={false} allowUpdate={true} tags={ Array [ diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectTagsSelectorContainer.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectTagsSelectorContainer.js index 19f2fa34533..fae4f79b62e 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectTagsSelectorContainer.js +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectTagsSelectorContainer.js @@ -37,7 +37,7 @@ type State = { searchResult: Array<string> }; -const PAGE_SIZE = 20; +const LIST_SIZE = 10; class ProjectTagsSelectorContainer extends React.PureComponent { props: Props; @@ -55,7 +55,10 @@ class ProjectTagsSelectorContainer extends React.PureComponent { } onSearch = (query: string) => { - searchProjectTags({ q: query || '', ps: PAGE_SIZE }).then(result => { + searchProjectTags({ + q: query || '', + ps: Math.min(this.props.selectedTags.length - 1 + LIST_SIZE, 100) + }).then(result => { this.setState({ searchResult: result.tags }); @@ -77,6 +80,7 @@ class ProjectTagsSelectorContainer extends React.PureComponent { position={this.props.position} tags={this.state.searchResult} selectedTags={this.props.selectedTags} + listSize={LIST_SIZE} onSearch={this.onSearch} onSelect={this.onSelect} onUnselect={this.onUnselect} diff --git a/server/sonar-web/src/main/js/components/common/MultiSelect.js b/server/sonar-web/src/main/js/components/common/MultiSelect.js index 842695b0732..d6ba67ca473 100644 --- a/server/sonar-web/src/main/js/components/common/MultiSelect.js +++ b/server/sonar-web/src/main/js/components/common/MultiSelect.js @@ -26,6 +26,7 @@ import { translate } from '../../helpers/l10n'; type Props = { selectedElements: Array<string>, elements: Array<string>, + listSize: number, onSearch: (string) => void, onSelect: (string) => void, onUnselect: (string) => void, @@ -51,6 +52,7 @@ export default class MultiSelect extends React.PureComponent { }; static defaultProps = { + listSize: 10, validateSearchInput: (value: string) => value }; @@ -152,8 +154,17 @@ export default class MultiSelect extends React.PureComponent { } updateUnselectedElements(props: Props) { - this.setState({ - unselectedElements: difference(props.elements, props.selectedElements) + this.setState((state: State) => { + if (props.listSize < state.selectedElements.length) { + return { unselectedElements: [] }; + } else { + return { + unselectedElements: difference(props.elements, props.selectedElements).slice( + 0, + props.listSize - state.selectedElements.length + ) + }; + } }); } diff --git a/server/sonar-web/src/main/js/components/tags/TagsList.css b/server/sonar-web/src/main/js/components/tags/TagsList.css index 5963611a683..886a83ff628 100644 --- a/server/sonar-web/src/main/js/components/tags/TagsList.css +++ b/server/sonar-web/src/main/js/components/tags/TagsList.css @@ -1,3 +1,7 @@ +.tags-list { + white-space: nowrap; +} + .tags-list i::before { font-size: 12px; } diff --git a/server/sonar-web/src/main/js/components/tags/TagsSelector.js b/server/sonar-web/src/main/js/components/tags/TagsSelector.js index f43e091981e..e013d23161a 100644 --- a/server/sonar-web/src/main/js/components/tags/TagsSelector.js +++ b/server/sonar-web/src/main/js/components/tags/TagsSelector.js @@ -27,6 +27,7 @@ type Props = { position: {}, tags: Array<string>, selectedTags: Array<string>, + listSize: number, onSearch: (string) => void, onSelect: (string) => void, onUnselect: (string) => void @@ -45,11 +46,12 @@ export default class TagsSelector extends React.PureComponent { return ( <BubblePopup position={this.props.position} - customClass="bubble-popup-bottom-right bubble-popup-menu" + customClass="bubble-popup-bottom-right bubble-popup-menu abs-width-300" > <MultiSelect elements={this.props.tags} selectedElements={this.props.selectedTags} + listSize={this.props.listSize} onSearch={this.props.onSearch} onSelect={this.props.onSelect} onUnselect={this.props.onUnselect} diff --git a/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsSelector-test.js.snap b/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsSelector-test.js.snap index 56264e5b0be..232e5b51eb5 100644 --- a/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsSelector-test.js.snap +++ b/server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsSelector-test.js.snap @@ -1,6 +1,6 @@ exports[`test should render with selected tags 1`] = ` <BubblePopup - customClass="bubble-popup-bottom-right bubble-popup-menu" + customClass="bubble-popup-bottom-right bubble-popup-menu abs-width-300" position={ Object { "left": 0, @@ -15,6 +15,7 @@ exports[`test should render with selected tags 1`] = ` "baz", ] } + listSize={10} onSearch={[Function]} onSelect={[Function]} onUnselect={[Function]} @@ -29,7 +30,7 @@ exports[`test should render with selected tags 1`] = ` exports[`test should render without tags at all 1`] = ` <BubblePopup - customClass="bubble-popup-bottom-right bubble-popup-menu" + customClass="bubble-popup-bottom-right bubble-popup-menu abs-width-300" position={ Object { "left": 0, @@ -38,6 +39,7 @@ exports[`test should render without tags at all 1`] = ` }> <MultiSelect elements={Array []} + listSize={10} onSearch={[Function]} onSelect={[Function]} onUnselect={[Function]} diff --git a/server/sonar-web/src/main/less/components/menu.less b/server/sonar-web/src/main/less/components/menu.less index 75b2b312391..1d75e2cef98 100644 --- a/server/sonar-web/src/main/less/components/menu.less +++ b/server/sonar-web/src/main/less/components/menu.less @@ -78,6 +78,8 @@ padding: 4px 16px 0; .search-box-input { font-size: @smallFontSize; } + + .search-box-submit { vertical-align: baseline; } } .menu-search ~ .menu { |