aboutsummaryrefslogtreecommitdiffstats
path: root/server/sonar-web/src
diff options
context:
space:
mode:
authorGrégoire Aubert <gregaubert@users.noreply.github.com>2017-03-27 12:06:05 +0200
committerGitHub <noreply@github.com>2017-03-27 12:06:05 +0200
commite752bd0069aee8e54acd712a9791a330000fae95 (patch)
tree95a0fe1f4e3eea95f5ee09b4e754f03b83724d45 /server/sonar-web/src
parent7d963d84f40ee3db3b51c557fb596aa9febf82bb (diff)
downloadsonarqube-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')
-rw-r--r--server/sonar-web/src/main/js/apps/overview/meta/Meta.js2
-rw-r--r--server/sonar-web/src/main/js/apps/overview/meta/MetaTags.js1
-rw-r--r--server/sonar-web/src/main/js/apps/overview/meta/__tests__/MetaTags-test.js1
-rw-r--r--server/sonar-web/src/main/js/apps/overview/meta/__tests__/__snapshots__/MetaTags-test.js.snap8
-rw-r--r--server/sonar-web/src/main/js/apps/projects/components/ProjectTagsSelectorContainer.js8
-rw-r--r--server/sonar-web/src/main/js/components/common/MultiSelect.js15
-rw-r--r--server/sonar-web/src/main/js/components/tags/TagsList.css4
-rw-r--r--server/sonar-web/src/main/js/components/tags/TagsSelector.js4
-rw-r--r--server/sonar-web/src/main/js/components/tags/__tests__/__snapshots__/TagsSelector-test.js.snap6
-rw-r--r--server/sonar-web/src/main/less/components/menu.less2
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 {