background-color: var(--barBorderColor);
}
+.menu > li > a.disabled {
+ color: #bbb !important;
+}
+
.menu > li > a:hover,
.menu > li > a:focus {
text-decoration: none;
background-color: var(--barBackgroundColor);
}
-.menu .menu-vertically-limited {
+.menu .menu-vertically-limited,
+.menu.menu-vertically-limited {
max-height: 300px;
overflow-y: auto;
}
+.menu-vertically-limited.with-top-separator {
+ border-top: 1px solid #e6e6e6;
+}
+
+.menu-vertically-limited.with-bottom-separator {
+ border-bottom: 1px solid #e6e6e6;
+}
+
.menu .menu-footer > a > span {
border-bottom: 1px solid var(--gray80);
color: var(--secondFontColor);
vertical-align: middle;
}
+.vertical-text-top {
+ vertical-align: text-top;
+}
+
.nowrap {
white-space: nowrap;
}
const { canWrite, ruleDetails } = this.props;
const { sysTags = [], tags = [] } = ruleDetails;
const allTags = [...sysTags, ...tags];
+
return (
<li className="coding-rules-detail-property" data-meta="tags">
{this.props.canWrite ? (
organization={this.props.organization}
setTags={this.props.onTagsChange}
sysTags={sysTags}
- tags={tags}
+ tags={allTags}
/>
}
position="bottomleft"
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { without, uniq } from 'lodash';
+import { without, uniq, difference } from 'lodash';
import TagsSelector from '../../../components/tags/TagsSelector';
import { getRuleTags } from '../../../api/rules';
import { BubblePopupPosition } from '../../../components/common/BubblePopup';
};
render() {
+ const availableTags = difference(this.state.searchResult, this.props.tags);
return (
<TagsSelector
listSize={LIST_SIZE}
onUnselect={this.onUnselect}
position={this.props.popupPosition || {}}
selectedTags={this.props.tags}
- tags={this.state.searchResult}
+ tags={availableTags}
/>
);
}
right: containerPos.width - eltPos.width
});
- handleSetProjectTags = (tags: string[]) => {
- setProjectTags({ project: this.props.component.key, tags: tags.join(',') }).then(
- () => this.props.onComponentChange({ tags }),
- () => {}
- );
+ handleSetProjectTags = (values: string[]) => {
+ setProjectTags({
+ project: this.props.component.key,
+ tags: values.join(',')
+ }).then(() => this.props.onComponentChange({ tags: values }), () => {});
};
render() {
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { without } from 'lodash';
+import { without, difference } from 'lodash';
import TagsSelector from '../../../components/tags/TagsSelector';
import { BubblePopupPosition } from '../../../components/common/BubblePopup';
import { searchProjectTags } from '../../../api/components';
};
render() {
+ const availableTags = difference(this.state.searchResult, this.props.selectedTags);
return (
<TagsSelector
listSize={LIST_SIZE}
onUnselect={this.onUnselect}
position={this.props.position}
selectedTags={this.props.selectedTags}
- tags={this.state.searchResult}
+ tags={availableTags}
/>
);
}
graph={query.graph}
metrics={metrics}
metricsTypeFilter={this.getMetricsTypeFilter()}
+ removeCustomMetric={this.removeCustomMetric}
selectedMetrics={this.props.query.customMetrics}
updateGraph={this.updateGraph}
/>
/*::
type Props = {
addCustomMetric: string => void,
+ removeCustomMetric: string => void,
graph: string,
metrics: Array<Metric>,
metricsTypeFilter: ?Array<string>,
<Select
className="pull-left input-medium"
clearable={false}
+ onChange={this.handleGraphChange}
+ options={selectOptions}
searchable={false}
value={this.props.graph}
- options={selectOptions}
- onChange={this.handleGraphChange}
/>
{isCustomGraph(this.props.graph) && (
<AddGraphMetric
className="pull-left spacer-left"
metrics={this.props.metrics}
metricsTypeFilter={this.props.metricsTypeFilter}
+ removeMetric={this.props.removeCustomMetric}
selectedMetrics={this.props.selectedMetrics}
/>
)}
]
}
metricsTypeFilter={null}
+ removeCustomMetric={[Function]}
updateGraph={[Function]}
/>
<GraphsHistory
*/
// @flow
import React from 'react';
-import classNames from 'classnames';
-import Modal from '../../../../components/controls/Modal';
-import Select from '../../../../components/controls/Select';
-import Tooltip from '../../../../components/controls/Tooltip';
+import { find, sortBy } from 'lodash';
+import AddGraphMetricPopup from './AddGraphMetricPopup';
+import DropdownIcon from '../../../../components/icons-components/DropdownIcon';
+import BubblePopupHelper from '../../../../components/common/BubblePopupHelper';
import { isDiffMetric } from '../../../../helpers/measures';
-import {
- getLocalizedMetricName,
- translate,
- translateWithParameters
-} from '../../../../helpers/l10n';
+import { getLocalizedMetricName, translate } from '../../../../helpers/l10n';
/*:: import type { Metric } from '../../types'; */
/*::
className?: string,
metrics: Array<Metric>,
metricsTypeFilter: ?Array<string>,
+ removeMetric: (metric: string) => void,
selectedMetrics: Array<string>
};
*/
/*::
type State = {
open: boolean,
- selectedMetric?: string
+ query: string,
};
*/
export default class AddGraphMetric extends React.PureComponent {
/*:: props: Props; */
state /*: State */ = {
- open: false
+ open: false,
+ metrics: [],
+ query: '',
+ selectedMetrics: []
};
- getMetricsOptions = (metricsTypeFilter /*: ?Array<string> */) => {
- return this.props.metrics
+ filterSelected = (query /*: string*/, selectedElements /*: string[]*/) => {
+ return selectedElements.filter(element =>
+ this.getLocalizedMetricNameFromKey(element)
+ .toLowerCase()
+ .includes(query.toLowerCase())
+ );
+ };
+
+ getPopupPos = (containerPos /*: ClientRect*/) => ({
+ top: containerPos.height,
+ right: containerPos.width - 240
+ });
+
+ filterMetricsElements = (
+ { metricsTypeFilter, metrics, selectedMetrics } /*: Props */,
+ query /*: string*/
+ ) => {
+ return metrics
.filter(metric => {
if (
metric.hidden ||
isDiffMetric(metric.key) ||
['DATA', 'DISTRIB'].includes(metric.type) ||
- this.props.selectedMetrics.includes(metric.key)
+ selectedMetrics.includes(metric.key) ||
+ !getLocalizedMetricName(metric)
+ .toLowerCase()
+ .includes(query.toLowerCase())
) {
return false;
}
}
return true;
})
- .map((metric /*: Metric */) => ({
- value: metric.key,
- label: getLocalizedMetricName(metric)
- }));
+ .map(metric => metric.key);
+ };
+
+ getSelectedMetricsElements = (
+ metrics /*: Array<Metric> */,
+ selectedMetrics /*: Array<string> | null */,
+ query /*: string */
+ ) => {
+ const selected /*: Array<string> */ =
+ selectedMetrics === null ? this.props.selectedMetrics : selectedMetrics;
+ return metrics.filter(metric => selected.includes(metric.key)).map(metric => metric.key);
};
- openForm = () => {
- this.setState({
- open: true
+ getLocalizedMetricNameFromKey = (key /*: string*/) => {
+ const metric = find(this.props.metrics, { key });
+ return metric === undefined ? key : getLocalizedMetricName(metric);
+ };
+
+ toggleForm = () => {
+ this.setState(state => {
+ return { open: !state.open };
});
};
- closeForm = () => {
- this.setState({
- open: false,
- selectedMetric: undefined
+ onSearch = (query /*: string */) => {
+ this.setState({ query });
+ return Promise.resolve();
+ };
+
+ onSelect = (metric /*: string */) => {
+ this.props.addMetric(metric);
+ this.setState(state => {
+ return {
+ selectedMetrics: sortBy([...state.selectedMetrics, metric]),
+ metrics: this.filterMetricsElements(this.props, state.query)
+ };
});
};
- handleChange = (option /*: { value: string, label: string } */) =>
- this.setState({ selectedMetric: option.value });
+ onUnselect = (metric /*: string */) => {
+ this.props.removeMetric(metric);
+ this.setState(state => {
+ return {
+ metrics: sortBy([...state.metrics, metric]),
+ selectedMetrics: state.selectedMetrics.filter(selected => selected !== metric)
+ };
+ });
+ };
- handleSubmit = (e /*: Object */) => {
- e.preventDefault();
- if (this.state.selectedMetric) {
- this.props.addMetric(this.state.selectedMetric);
- this.closeForm();
- }
+ togglePopup = (open /*: boolean*/) => {
+ this.setState({ open });
};
- renderModal() {
- const { metricsTypeFilter } = this.props;
- const header = translate('project_activity.graphs.custom.add_metric');
+ render() {
+ const { query } = this.state;
+ const filteredMetrics = this.filterMetricsElements(this.props, query);
+ const selectedMetrics = this.getSelectedMetricsElements(
+ this.props.metrics,
+ this.props.selectedMetrics,
+ query
+ );
return (
- <Modal key="add-metric-modal" contentLabel={header} onRequestClose={this.closeForm}>
- <header className="modal-head">
- <h2>{header}</h2>
- </header>
- <form onSubmit={this.handleSubmit}>
- <div className="modal-body">
- <div className="modal-large-field">
- <label>{translate('project_activity.graphs.custom.search')}</label>
- <Select
- autofocus={true}
- className="Select-big"
- clearable={false}
- noResultsText={translate('no_results')}
- onChange={this.handleChange}
- options={this.getMetricsOptions(metricsTypeFilter)}
- placeholder=""
- searchable={true}
- value={this.state.selectedMetric}
- />
- <span className="alert alert-info">
- {metricsTypeFilter != null && metricsTypeFilter.length > 0
- ? translateWithParameters(
- 'project_activity.graphs.custom.type_x_message',
- metricsTypeFilter
- .map(type => translate('metric.type', type))
- .sort()
- .join(', ')
- )
- : translate('project_activity.graphs.custom.add_metric_info')}
- </span>
- </div>
- </div>
- <footer className="modal-foot">
- <div>
- <button type="submit" disabled={!this.state.selectedMetric}>
+ <div className="display-inline-block">
+ <BubblePopupHelper
+ isOpen={this.state.open}
+ offset={{ horizontal: 16, vertical: 0 }}
+ popup={
+ <AddGraphMetricPopup
+ elements={filteredMetrics}
+ filterSelected={this.filterSelected}
+ metricsTypeFilter={this.props.metricsTypeFilter}
+ onSearch={this.onSearch}
+ onSelect={this.onSelect}
+ onUnselect={this.onUnselect}
+ renderLabel={element => this.getLocalizedMetricNameFromKey(element)}
+ selectedElements={selectedMetrics}
+ />
+ }
+ position="bottomright"
+ togglePopup={this.togglePopup}>
+ <button className="spacer-left" onClick={this.toggleForm} type="button">
+ <span>
+ <span className="text-ellipsis spacer-right">
{translate('project_activity.graphs.custom.add')}
- </button>
- <button type="reset" className="button-link" onClick={this.closeForm}>
- {translate('cancel')}
- </button>
- </div>
- </footer>
- </form>
- </Modal>
- );
- }
-
- render() {
- if (this.props.selectedMetrics.length >= 6) {
- // Use the class .disabled instead of the property to prevent a bug from
- // rc-tooltip : https://github.com/react-component/tooltip/issues/18
- return (
- <Tooltip
- placement="right"
- overlay={translate('project_activity.graphs.custom.add_metric_info')}>
- <button className={classNames('disabled', this.props.className)}>
- {translate('project_activity.graphs.custom.add')}
+ </span>
+ <DropdownIcon className="vertical-text-top" />
+ </span>
</button>
- </Tooltip>
- );
- }
-
- const buttonComponent = (
- <button key="add-metric-button" className={this.props.className} onClick={this.openForm}>
- {translate('project_activity.graphs.custom.add')}
- </button>
+ </BubblePopupHelper>
+ </div>
);
-
- if (this.state.open) {
- return [buttonComponent, this.renderModal()];
- }
-
- return buttonComponent;
}
}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2018 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 * as React from 'react';
+import BubblePopup from '../../../../components/common/BubblePopup';
+import MultiSelect from '../../../../components/common/MultiSelect';
+import { translate, translateWithParameters } from '../../../../helpers/l10n';
+
+interface Props {
+ elements: string[];
+ filterSelected: (query: string, selectedElements: string[]) => string[];
+ metricsTypeFilter: string[];
+ onSearch: (query: string) => Promise<void>;
+ onSelect: (item: string) => void;
+ onUnselect: (item: string) => void;
+ popupPosition?: any;
+ renderLabel: (element: string) => React.ReactNode;
+ selectedElements: string[];
+}
+
+export default function AddGraphMetricPopup({ elements, metricsTypeFilter, ...props }: Props) {
+ let footerNode: React.ReactNode = '';
+
+ if (props.selectedElements.length >= 6) {
+ footerNode = (
+ <span className="alert alert-info spacer-left spacer-right spacer-top">
+ {translate('project_activity.graphs.custom.add_metric_info')}
+ </span>
+ );
+ } else if (metricsTypeFilter != null && metricsTypeFilter.length > 0) {
+ footerNode = (
+ <span className="alert alert-info spacer-left spacer-right spacer-top">
+ {translateWithParameters(
+ 'project_activity.graphs.custom.type_x_message',
+ metricsTypeFilter
+ .map((type: string) => translate('metric.type', type))
+ .sort()
+ .join(', ')
+ )}
+ </span>
+ );
+ }
+
+ return (
+ <BubblePopup
+ customClass="bubble-popup-bottom-right bubble-popup-menu abs-width-300"
+ position={props.popupPosition}>
+ <MultiSelect
+ allowNewElements={false}
+ allowSelection={props.selectedElements.length < 6}
+ elements={elements}
+ filterSelected={props.filterSelected}
+ footerNode={footerNode}
+ onSearch={props.onSearch}
+ onSelect={props.onSelect}
+ onUnselect={props.onUnselect}
+ placeholder={translate('search.search_for_tags')}
+ renderLabel={props.renderLabel}
+ selectedElements={props.selectedElements}
+ />
+ </BubblePopup>
+ );
+}
metrics /*: Array<Metric> | { [string]: Metric } */,
displayedMetrics /*: Array<string> */
) /*: Array<Serie> */ {
- if (displayedMetrics.length <= 0) {
+ if (displayedMetrics.length <= 0 || typeof measuresHistory === 'undefined') {
return [];
}
return sortBy(
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
+import * as classNames from 'classnames';
import { difference } from 'lodash';
import MultiSelectOption from './MultiSelectOption';
import SearchBox from '../controls/SearchBox';
+import { translateWithParameters } from '../../helpers/l10n';
interface Props {
+ allowNewElements?: boolean;
+ allowSelection?: boolean;
elements: string[];
+ filterSelected?: (query: string, selectedElements: string[]) => string[];
+ footerNode?: React.ReactNode;
listSize?: number;
onSearch: (query: string) => Promise<void>;
onSelect: (item: string) => void;
onUnselect: (item: string) => void;
placeholder: string;
+ renderLabel?: (element: string) => React.ReactNode;
selectedElements: string[];
validateSearchInput?: (value: string) => string;
}
}
interface DefaultProps {
+ filterSelected: (query: string, selectedElements: string[]) => string[];
listSize: number;
+ renderLabel: (element: string) => React.ReactNode;
validateSearchInput: (value: string) => string;
}
mounted = false;
static defaultProps: DefaultProps = {
- listSize: 10,
+ filterSelected: (query: string, selectedElements: string[]) =>
+ selectedElements.filter(elem => elem.includes(query)),
+ listSize: 0,
+ renderLabel: (element: string) => element,
validateSearchInput: (value: string) => value
};
componentDidMount() {
this.mounted = true;
this.onSearchQuery('');
- this.updateSelectedElements(this.props);
+ this.updateSelectedElements(this.props as PropsWithDefault);
this.updateUnselectedElements(this.props as PropsWithDefault);
if (this.container) {
this.container.addEventListener('keydown', this.handleKeyboard, true);
onUnselectItem = (item: string) => this.props.onUnselect(item);
isNewElement = (elem: string, { selectedElements, elements }: Props) =>
- elem && selectedElements.indexOf(elem) === -1 && elements.indexOf(elem) === -1;
+ elem.length > 0 && selectedElements.indexOf(elem) === -1 && elements.indexOf(elem) === -1;
- updateSelectedElements = (props: Props) => {
+ updateSelectedElements = (props: PropsWithDefault) => {
this.setState((state: State) => {
if (state.query) {
return {
- selectedElements: [...props.selectedElements.filter(elem => elem.includes(state.query))]
+ selectedElements: props.filterSelected(state.query, props.selectedElements)
};
} else {
return { selectedElements: [...props.selectedElements] };
updateUnselectedElements = (props: PropsWithDefault) => {
this.setState((state: State) => {
- if (props.listSize < state.selectedElements.length) {
+ if (props.listSize === 0) {
+ return { unselectedElements: difference(props.elements, props.selectedElements) };
+ } else if (props.listSize < state.selectedElements.length) {
return { unselectedElements: [] };
} else {
return {
};
render() {
+ const { allowSelection = true, allowNewElements = true, footerNode = '' } = this.props;
+ const { renderLabel } = this.props as PropsWithDefault;
const { query, activeIdx, selectedElements, unselectedElements } = this.state;
const activeElement = this.getAllElements(this.props, this.state)[activeIdx];
+ const infiniteList = this.props.listSize === 0;
+ const listClasses = classNames('menu', {
+ 'menu-vertically-limited': infiniteList,
+ 'spacer-top': infiniteList,
+ 'with-top-separator': infiniteList,
+ 'with-bottom-separator': Boolean(footerNode)
+ });
return (
<div className="multi-select" ref={div => (this.container = div)}>
value={query}
/>
</div>
- <ul className="menu">
+ <ul className={listClasses}>
+ {selectedElements.length < 1 &&
+ unselectedElements.length < 1 && (
+ <li className="spacer-left">{translateWithParameters('no_results_for_x', query)}</li>
+ )}
{selectedElements.length > 0 &&
selectedElements.map(element => (
<MultiSelectOption
key={element}
onHover={this.handleElementHover}
onSelectChange={this.handleSelectChange}
+ renderLabel={renderLabel}
selected={true}
/>
))}
unselectedElements.map(element => (
<MultiSelectOption
active={activeElement === element}
+ disabled={!allowSelection}
element={element}
key={element}
onHover={this.handleElementHover}
onSelectChange={this.handleSelectChange}
+ renderLabel={renderLabel}
/>
))}
- {this.isNewElement(query, this.props) && (
- <MultiSelectOption
- active={activeElement === query}
- custom={true}
- element={query}
- key={query}
- onHover={this.handleElementHover}
- onSelectChange={this.handleSelectChange}
- />
- )}
+ {allowNewElements &&
+ this.isNewElement(query, this.props) && (
+ <MultiSelectOption
+ active={activeElement === query}
+ custom={true}
+ element={query}
+ key={query}
+ onHover={this.handleElementHover}
+ onSelectChange={this.handleSelectChange}
+ renderLabel={renderLabel}
+ />
+ )}
</ul>
+ {footerNode}
</div>
);
}
import * as classNames from 'classnames';
interface Props {
- element: string;
- selected?: boolean;
- custom?: boolean;
active?: boolean;
- onSelectChange: (elem: string, selected: boolean) => void;
+ custom?: boolean;
+ disabled?: boolean;
+ element: string;
onHover: (elem: string) => void;
+ onSelectChange: (elem: string, selected: boolean) => void;
+ renderLabel: (element: string) => React.ReactNode;
+ selected?: boolean;
}
export default class MultiSelectOption extends React.PureComponent<Props> {
evt.stopPropagation();
evt.preventDefault();
evt.currentTarget.blur();
- this.props.onSelectChange(this.props.element, !this.props.selected);
+
+ if (!this.props.disabled) {
+ this.props.onSelectChange(this.props.element, !this.props.selected);
+ }
};
handleHover = () => this.props.onHover(this.props.element);
render() {
+ const { selected, disabled } = this.props;
const className = classNames('icon-checkbox', {
- 'icon-checkbox-checked': this.props.selected
+ 'icon-checkbox-checked': selected,
+ 'icon-checkbox-invisible': disabled
+ });
+ const activeClass = classNames({
+ active: this.props.active,
+ disabled,
+ 'cursor-not-allowed': disabled
});
- const activeClass = classNames({ active: this.props.active });
return (
<li>
<a
- href="#"
className={activeClass}
+ href="#"
onClick={this.handleSelect}
- onMouseOver={this.handleHover}
- onFocus={this.handleHover}>
+ onFocus={this.handleHover}
+ onMouseOver={this.handleHover}>
<i className={className} /> {this.props.custom && '+ '}
- {this.props.element}
+ {this.props.renderLabel(this.props.element)}
</a>
</li>
);
onSearch: () => Promise.resolve(),
onSelect: () => {},
onUnselect: () => {},
+ renderLabel: (element: string) => element,
placeholder: ''
};
-const elements = ['foo', 'bar', 'baz'];
+const elements = [
+ { key: 'foo', label: 'foo' },
+ { key: 'bar', label: 'bar' },
+ { key: 'baz', label: 'baz' }
+];
it('should render multiselect with selected elements', () => {
const multiselect = shallow(<MultiSelect {...props} />);
const props = {
element: 'mytag',
onSelectChange: () => {},
- onHover: () => {}
+ onHover: () => {},
+ renderLabel: (element: string) => element
};
-it('should render standard tag', () => {
+it('should render standard element', () => {
expect(shallow(<MultiSelectOption {...props} />)).toMatchSnapshot();
});
-it('should render selected tag', () => {
+it('should render selected element', () => {
expect(shallow(<MultiSelectOption {...props} selected={true} />)).toMatchSnapshot();
});
-it('should render custom tag', () => {
+it('should render custom element', () => {
expect(shallow(<MultiSelectOption {...props} custom={true} />)).toMatchSnapshot();
});
-it('should render active tag', () => {
- expect(shallow(<MultiSelectOption {...props} selected={true} active={true} />)).toMatchSnapshot();
+it('should render active element', () => {
+ expect(shallow(<MultiSelectOption {...props} active={true} selected={true} />)).toMatchSnapshot();
+});
+
+it('should render disabled element', () => {
+ expect(shallow(<MultiSelectOption {...props} disabled={true} />)).toMatchSnapshot();
});
/>
</div>
<ul
- className="menu"
+ className="menu menu-vertically-limited spacer-top with-top-separator"
>
<MultiSelectOption
active={true}
key="bar"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
selected={true}
/>
</ul>
/>
</div>
<ul
- className="menu"
+ className="menu menu-vertically-limited spacer-top with-top-separator"
>
<MultiSelectOption
active={true}
key="bar"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
selected={true}
/>
<MultiSelectOption
active={false}
- element="foo"
- key="foo"
+ disabled={false}
+ element={
+ Object {
+ "key": "foo",
+ "label": "foo",
+ }
+ }
+ key="[object Object]"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
/>
<MultiSelectOption
active={false}
- element="baz"
- key="baz"
+ disabled={false}
+ element={
+ Object {
+ "key": "bar",
+ "label": "bar",
+ }
+ }
+ key="[object Object]"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
+ />
+ <MultiSelectOption
+ active={false}
+ disabled={false}
+ element={
+ Object {
+ "key": "baz",
+ "label": "baz",
+ }
+ }
+ key="[object Object]"
+ onHover={[Function]}
+ onSelectChange={[Function]}
+ renderLabel={[Function]}
/>
</ul>
</div>
/>
</div>
<ul
- className="menu"
+ className="menu menu-vertically-limited spacer-top with-top-separator"
>
<MultiSelectOption
active={false}
key="bar"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
selected={true}
/>
<MultiSelectOption
active={false}
- element="foo"
- key="foo"
+ disabled={false}
+ element={
+ Object {
+ "key": "foo",
+ "label": "foo",
+ }
+ }
+ key="[object Object]"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
/>
<MultiSelectOption
active={true}
- element="baz"
- key="baz"
+ disabled={false}
+ element={
+ Object {
+ "key": "bar",
+ "label": "bar",
+ }
+ }
+ key="[object Object]"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
+ />
+ <MultiSelectOption
+ active={false}
+ disabled={false}
+ element={
+ Object {
+ "key": "baz",
+ "label": "baz",
+ }
+ }
+ key="[object Object]"
+ onHover={[Function]}
+ onSelectChange={[Function]}
+ renderLabel={[Function]}
/>
</ul>
</div>
/>
</div>
<ul
- className="menu"
+ className="menu menu-vertically-limited spacer-top with-top-separator"
>
<MultiSelectOption
active={false}
key="bar"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
selected={true}
/>
<MultiSelectOption
active={false}
- element="foo"
- key="foo"
+ disabled={false}
+ element={
+ Object {
+ "key": "foo",
+ "label": "foo",
+ }
+ }
+ key="[object Object]"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
/>
<MultiSelectOption
active={true}
- element="baz"
- key="baz"
+ disabled={false}
+ element={
+ Object {
+ "key": "bar",
+ "label": "bar",
+ }
+ }
+ key="[object Object]"
+ onHover={[Function]}
+ onSelectChange={[Function]}
+ renderLabel={[Function]}
+ />
+ <MultiSelectOption
+ active={false}
+ disabled={false}
+ element={
+ Object {
+ "key": "baz",
+ "label": "baz",
+ }
+ }
+ key="[object Object]"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
/>
<MultiSelectOption
active={false}
key="test"
onHover={[Function]}
onSelectChange={[Function]}
+ renderLabel={[Function]}
/>
</ul>
</div>
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`should render active tag 1`] = `
+exports[`should render active element 1`] = `
<li>
<a
className="active"
</li>
`;
-exports[`should render custom tag 1`] = `
+exports[`should render custom element 1`] = `
<li>
<a
className=""
</li>
`;
-exports[`should render selected tag 1`] = `
+exports[`should render disabled element 1`] = `
+<li>
+ <a
+ className="disabled cursor-not-allowed"
+ href="#"
+ onClick={[Function]}
+ onFocus={[Function]}
+ onMouseOver={[Function]}
+ >
+ <i
+ className="icon-checkbox icon-checkbox-invisible"
+ />
+
+ mytag
+ </a>
+</li>
+`;
+
+exports[`should render selected element 1`] = `
<li>
<a
className=""
</li>
`;
-exports[`should render standard tag 1`] = `
+exports[`should render standard element 1`] = `
<li>
<a
className=""
render() {
const { issue } = this.props;
+ const { tags = [] } = issue;
if (this.props.canSetTags) {
return (
<BubblePopupHelper
isOpen={this.props.isOpen}
- position="bottomright"
- togglePopup={this.toggleSetTags}
popup={
<SetIssueTagsPopup
organization={issue.projectOrganization}
- selectedTags={issue.tags}
+ selectedTags={tags}
setTags={this.setTags}
/>
- }>
+ }
+ position="bottomright"
+ togglePopup={this.toggleSetTags}>
<button
className={'js-issue-edit-tags button-link issue-action issue-action-with-options'}
onClick={this.toggleSetTags}>
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { without } from 'lodash';
+import { difference, without } from 'lodash';
import { BubblePopupPosition } from '../../../components/common/BubblePopup';
import TagsSelector from '../../../components/tags/TagsSelector';
import { searchIssueTags } from '../../../api/issues';
};
render() {
+ const availableTags = difference(this.state.searchResult, this.props.selectedTags);
return (
<TagsSelector
listSize={LIST_SIZE}
onUnselect={this.onUnselect}
position={this.props.popupPosition}
selectedTags={this.props.selectedTags}
- tags={this.state.searchResult}
+ tags={availableTags}
/>
);
}
}
tags={
Array [
- "mytag",
"test",
"second",
]
onSearch: () => Promise.resolve(),
onSelect: () => {},
onUnselect: () => {},
+ renderLabel: (element: string) => element,
position: { right: 0, top: 0 },
selectedTags: ['bar'],
tags: ['foo', 'bar', 'baz']
"baz",
]
}
+ filterSelected={[Function]}
listSize={10}
onSearch={[Function]}
onSelect={[Function]}
onUnselect={[Function]}
placeholder="search.search_for_tags"
+ renderLabel={[Function]}
selectedElements={
Array [
"bar",
>
<MultiSelect
elements={Array []}
+ filterSelected={[Function]}
listSize={10}
onSearch={[Function]}
onSelect={[Function]}
onUnselect={[Function]}
placeholder="search.search_for_tags"
+ renderLabel={[Function]}
selectedElements={Array []}
validateSearchInput={[Function]}
/>
projects / sonarqube.git / commitdiff