"lodash": "4.6.1",
"moment": "2.10.6",
"numeral": "1.5.3",
- "react": "15.3.2",
- "react-addons-shallow-compare": "15.3.2",
- "react-dom": "15.3.2",
+ "react": "15.4.2",
+ "react-addons-shallow-compare": "15.4.2",
+ "react-dom": "15.4.2",
+ "react-draggable": "2.2.3",
"react-helmet": "3.1.0",
"react-modal": "^1.6.4",
"react-redux": "4.4.1",
"react-router": "2.8.1",
"react-router-redux": "4.0.2",
"react-select": "^1.0.0-rc.2",
+ "react-virtualized": "^9.1.0",
"redux": "3.3.1",
"redux-logger": "2.2.1",
"redux-thunk": "1.0.2",
"less-loader": "2.2.3",
"path-exists": "2.1.0",
"postcss-loader": "0.8.0",
- "react-addons-test-utils": "15.3.2",
+ "react-addons-test-utils": "15.4.2",
"react-dev-utils": "0.2.1",
"react-transform-hmr": "1.0.4",
"recursive-readdir": "2.1.0",
const issues = that.options.app.list.parseIssues(r);
this.receiveIssues(issues);
if (firstPage) {
+ const issues = that.options.app.list.parseIssues(r);
that.options.app.list.reset(issues);
} else {
+ const issues = that.options.app.list.parseIssues(r, that.options.app.list.length);
that.options.app.list.add(issues);
}
that.options.app.list.setIndex();
return issue;
},
- parseIssues (r) {
+ parseIssues (r, startIndex = 0) {
const that = this;
return r.issues.map((issue, index) => {
- Object.assign(issue, { index });
+ Object.assign(issue, { index: startIndex + index });
issue = that._injectRelational(issue, r.components, 'component', 'key');
issue = that._injectRelational(issue, r.components, 'project', 'key');
issue = that._injectRelational(issue, r.components, 'subProject', 'key');
import uniqBy from 'lodash/uniqBy';
import SourceViewerHeader from './SourceViewerHeader';
import SourceViewerCode from './SourceViewerCode';
+import SourceViewerIssueLocations from './SourceViewerIssueLocations';
import CoveragePopupView from '../source-viewer/popups/coverage-popup';
import DuplicationPopupView from '../source-viewer/popups/duplication-popup';
import LineActionsPopupView from '../source-viewer/popups/line-actions-popup';
import SCMPopupView from '../source-viewer/popups/scm-popup';
import MeasuresOverlay from '../source-viewer/measures-overlay';
-import { TooltipsContainer } from '../mixins/tooltips-mixin';
import Source from '../source-viewer/source';
import loadIssues from './helpers/loadIssues';
import getCoverageStatus from './helpers/getCoverageStatus';
locationsByIssueAndLine,
locationMessagesByIssueAndLine,
duplicationsByLine,
- symbolsByLine
+ symbolsByLine,
+ findLocationByIndex
+} from './helpers/indexing';
+import type {
+ LinearIssueLocation,
+ IndexedIssueLocation,
+ IndexedIssueLocationsByIssueAndLine,
+ IndexedIssueLocationMessagesByIssueAndLine
} from './helpers/indexing';
import { getComponentForSourceViewer, getSources, getDuplications, getTests } from '../../api/components';
import { translate } from '../../helpers/l10n';
+import { scrollToElement } from '../../helpers/scrolling';
import type { SourceLine } from './types';
import type { Issue } from '../issue/types';
+import './styles.css';
// TODO react-virtualized
highlightedSymbol: string | null,
issues?: Array<Issue>,
issuesByLine: { [number]: Array<string> },
- issueLocationsByLine: { [number]: Array<{ from: number, to: number }> },
- issueSecondaryLocationsByIssueByLine: {
- [string]: {
- [number]: Array<{ from: number, to: number }>
- }
- },
- issueSecondaryLocationMessagesByIssueByLine: {
- [issueKey: string]: {
- [line: number]: Array<{ msg: string, index?: number }>
- }
- },
+ issueLocationsByLine: { [number]: Array<LinearIssueLocation> },
+ issueSecondaryLocationsByIssueByLine: IndexedIssueLocationsByIssueAndLine,
+ issueSecondaryLocationMessagesByIssueByLine: IndexedIssueLocationMessagesByIssueAndLine,
loading: boolean,
loadingSourcesAfter: boolean,
loadingSourcesBefore: boolean,
+ locationsPanelHeight: number,
notAccessible: boolean,
notExist: boolean,
+ selectedIssueLocation: IndexedIssueLocation | null,
sources?: Array<SourceLine>,
symbolsByLine: { [number]: Array<string> }
};
const LINES = 500;
+const LOCATIONS_PANEL_DEFAULT_HEIGHT = 200;
+const LOCATIONS_PANEL_HEIGHT_LOCAL_STORAGE_KEY = 'sonarqube.locations.height';
+
const loadComponent = (key: string): Promise<*> => {
return getComponentForSourceViewer(key);
};
loading: true,
loadingSourcesAfter: false,
loadingSourcesBefore: false,
+ locationsPanelHeight: this.getInitialLocationsPanelHeight(),
notAccessible: false,
notExist: false,
selectedIssue: props.defaultSelectedIssue || null,
+ selectedIssueLocation: null,
symbolsByLine: {}
};
}
this.fetchComponent();
}
- componentDidUpdate (prevProps: Props) {
+ componentDidUpdate (prevProps: Props, prevState: State) {
if (prevProps.component !== this.props.component) {
this.fetchComponent();
} else if (this.props.aroundLine != null && prevProps.aroundLine !== this.props.aroundLine &&
this.isLineOutsideOfRange(this.props.aroundLine)) {
this.fetchSources();
}
+
+ if (prevState.selectedIssueLocation !== this.state.selectedIssueLocation &&
+ this.state.selectedIssueLocation != null) {
+ this.scrollToLine(this.state.selectedIssueLocation.line);
+ }
}
componentWillUnmount () {
this.mounted = false;
}
+ scrollToLine (line: number) {
+ const lineElement = this.node.querySelector(
+ `.source-line-code[data-line-number="${line}"] .source-line-issue-locations`
+ );
+ if (lineElement) {
+ scrollToElement(lineElement, 125, this.state.locationsPanelHeight + 75);
+ }
+ }
+
computeCoverageStatus (lines: Array<SourceLine>): Array<SourceLine> {
return lines.map(line => ({ ...line, coverageStatus: getCoverageStatus(line) }));
}
});
};
+ getInitialLocationsPanelHeight () {
+ try {
+ const rawValue = window.localStorage.getItem(LOCATIONS_PANEL_HEIGHT_LOCAL_STORAGE_KEY);
+ if (!rawValue) {
+ return LOCATIONS_PANEL_DEFAULT_HEIGHT;
+ }
+ const intValue = Number(rawValue);
+ return !isNaN(intValue) ? intValue : LOCATIONS_PANEL_DEFAULT_HEIGHT;
+ } catch (e) {
+ return LOCATIONS_PANEL_DEFAULT_HEIGHT;
+ }
+ }
+
+ storeLocationsPanelHeight (height: number) {
+ window.localStorage.setItem(LOCATIONS_PANEL_HEIGHT_LOCAL_STORAGE_KEY, height);
+ }
+
openNewWindow = () => {
const { component } = this.state;
if (component != null) {
popup.render();
};
+ handleSelectIssueLocation = (flowIndex: number, locationIndex: number) => {
+ this.setState(prevState => {
+ const selectedIssueLocation = findLocationByIndex(
+ prevState.issueSecondaryLocationsByIssueByLine,
+ flowIndex,
+ locationIndex
+ );
+ return { selectedIssueLocation };
+ });
+ };
+
+ handleLocationsPanelResize = (height: number) => {
+ this.setState({ locationsPanelHeight: height });
+ this.storeLocationsPanelHeight(height);
+ };
+
renderCode (sources: Array<SourceLine>) {
const hasSourcesBefore = sources.length > 0 && sources[0].line > 1;
return (
- <TooltipsContainer>
- <SourceViewerCode
- displayAllIssues={this.props.displayAllIssues}
- duplications={this.state.duplications}
- duplicationsByLine={this.state.duplicationsByLine}
- duplicatedFiles={this.state.duplicatedFiles}
- hasSourcesBefore={hasSourcesBefore}
- hasSourcesAfter={this.state.hasSourcesAfter}
- filterLine={this.props.filterLine}
- highlightedLine={this.state.highlightedLine}
- highlightedSymbol={this.state.highlightedSymbol}
- issues={this.state.issues}
- issuesByLine={this.state.issuesByLine}
- issueLocationsByLine={this.state.issueLocationsByLine}
- issueSecondaryLocationsByIssueByLine={this.state.issueSecondaryLocationsByIssueByLine}
- issueSecondaryLocationMessagesByIssueByLine={this.state.issueSecondaryLocationMessagesByIssueByLine}
- loadDuplications={this.loadDuplications}
- loadSourcesAfter={this.loadSourcesAfter}
- loadSourcesBefore={this.loadSourcesBefore}
- loadingSourcesAfter={this.state.loadingSourcesAfter}
- loadingSourcesBefore={this.state.loadingSourcesBefore}
- onCoverageClick={this.handleCoverageClick}
- onDuplicationClick={this.handleDuplicationClick}
- onIssueSelect={this.props.onIssueSelect}
- onIssueUnselect={this.props.onIssueUnselect}
- onLineClick={this.handleLineClick}
- onSCMClick={this.handleSCMClick}
- onSymbolClick={this.handleSymbolClick}
- selectedIssue={this.props.selectedIssue}
- sources={sources}
- symbolsByLine={this.state.symbolsByLine}/>
- </TooltipsContainer>
+ <SourceViewerCode
+ displayAllIssues={this.props.displayAllIssues}
+ duplications={this.state.duplications}
+ duplicationsByLine={this.state.duplicationsByLine}
+ duplicatedFiles={this.state.duplicatedFiles}
+ hasSourcesBefore={hasSourcesBefore}
+ hasSourcesAfter={this.state.hasSourcesAfter}
+ filterLine={this.props.filterLine}
+ highlightedLine={this.state.highlightedLine}
+ highlightedSymbol={this.state.highlightedSymbol}
+ issues={this.state.issues}
+ issuesByLine={this.state.issuesByLine}
+ issueLocationsByLine={this.state.issueLocationsByLine}
+ issueSecondaryLocationsByIssueByLine={this.state.issueSecondaryLocationsByIssueByLine}
+ issueSecondaryLocationMessagesByIssueByLine={this.state.issueSecondaryLocationMessagesByIssueByLine}
+ loadDuplications={this.loadDuplications}
+ loadSourcesAfter={this.loadSourcesAfter}
+ loadSourcesBefore={this.loadSourcesBefore}
+ loadingSourcesAfter={this.state.loadingSourcesAfter}
+ loadingSourcesBefore={this.state.loadingSourcesBefore}
+ onCoverageClick={this.handleCoverageClick}
+ onDuplicationClick={this.handleDuplicationClick}
+ onIssueSelect={this.props.onIssueSelect}
+ onIssueUnselect={this.props.onIssueUnselect}
+ onLineClick={this.handleLineClick}
+ onSCMClick={this.handleSCMClick}
+ onSelectLocation={this.handleSelectIssueLocation}
+ onSymbolClick={this.handleSymbolClick}
+ selectedIssue={this.props.selectedIssue}
+ selectedIssueLocation={this.state.selectedIssueLocation}
+ sources={sources}
+ symbolsByLine={this.state.symbolsByLine}/>
);
}
const className = classNames('source-viewer', { 'source-duplications-expanded': this.state.displayDuplications });
+ const selectedIssueObj = this.props.selectedIssue && this.state.issues != null ?
+ this.state.issues.find(issue => issue.key === this.props.selectedIssue) :
+ null;
+
return (
<div className={className} ref={node => this.node = node}>
<SourceViewerHeader
</div>
)}
{this.state.sources != null && this.renderCode(this.state.sources)}
+ {selectedIssueObj != null && selectedIssueObj.flows.length > 0 && (
+ <SourceViewerIssueLocations
+ height={this.state.locationsPanelHeight}
+ issue={selectedIssueObj}
+ onResize={this.handleLocationsPanelResize}
+ onSelectLocation={this.handleSelectIssueLocation}
+ selectedLocation={this.state.selectedIssueLocation}/>
+ )}
</div>
);
}
// @flow
import React from 'react';
import SourceViewerLine from './SourceViewerLine';
+import { TooltipsContainer } from '../mixins/tooltips-mixin';
import { translate } from '../../helpers/l10n';
import type { Duplication, SourceLine } from './types';
import type { Issue } from '../issue/types';
+import type {
+ LinearIssueLocation,
+ IndexedIssueLocation,
+ IndexedIssueLocationsByIssueAndLine,
+ IndexedIssueLocationMessagesByIssueAndLine
+} from './helpers/indexing';
const EMPTY_ARRAY = [];
line: 0
};
-export default class SourceViewerCode extends React.Component {
+export default class SourceViewerCode extends React.PureComponent {
props: {
displayAllIssues: boolean,
duplications?: Array<Duplication>,
highlightedSymbol: string | null,
issues: Array<Issue>,
issuesByLine: { [number]: Array<string> },
- issueLocationsByLine: { [number]: Array<{ from: number, to: number }> },
- issueSecondaryLocationsByIssueByLine: {
- [string]: {
- [number]: Array<{ from: number, to: number }>
- }
- },
- issueSecondaryLocationMessagesByIssueByLine: {
- [issueKey: string]: {
- [line: number]: Array<{ msg: string, index?: number }>
- }
- },
+ issueLocationsByLine: { [number]: Array<LinearIssueLocation> },
+ issueSecondaryLocationsByIssueByLine: IndexedIssueLocationsByIssueAndLine,
+ issueSecondaryLocationMessagesByIssueByLine: IndexedIssueLocationMessagesByIssueAndLine,
loadDuplications: (SourceLine, HTMLElement) => void,
loadSourcesAfter: () => void,
loadSourcesBefore: () => void,
onIssueUnselect: () => void,
onLineClick: (number, HTMLElement) => void,
onSCMClick: (SourceLine, HTMLElement) => void,
+ onSelectLocation: (flowIndex: number, locationIndex: number) => void,
onSymbolClick: (string) => void,
selectedIssue: string | null,
+ selectedIssueLocation: IndexedIssueLocation | null,
sources: Array<SourceLine>,
symbolsByLine: { [number]: Array<string> }
};
const optimizedSelectedIssue = selectedIssue != null && issuesForLine.includes(selectedIssue) ?
selectedIssue : null;
+ const { selectedIssueLocation } = this.props;
+ const optimizedSelectedIssueLocation =
+ selectedIssueLocation != null &&
+ secondaryIssueLocations.some(location =>
+ location.flowIndex === selectedIssueLocation.flowIndex &&
+ location.locationIndex === selectedIssueLocation.locationIndex
+ ) ? selectedIssueLocation : null;
+
return (
<SourceViewerLine
displayAllIssues={this.props.displayAllIssues}
onIssueSelect={this.props.onIssueSelect}
onIssueUnselect={this.props.onIssueUnselect}
onSCMClick={this.props.onSCMClick}
+ onSelectLocation={this.props.onSelectLocation}
onSymbolClick={this.props.onSymbolClick}
secondaryIssueLocations={secondaryIssueLocations}
secondaryIssueLocationMessages={secondaryIssueLocationMessages}
- selectedIssue={optimizedSelectedIssue}/>
+ selectedIssue={optimizedSelectedIssue}
+ selectedIssueLocation={optimizedSelectedIssueLocation}/>
);
};
</div>
)}
- <table className="source-table">
- <tbody>
- {hasFileIssues && (
- this.renderLine(ZERO_LINE, -1, hasCoverage, hasDuplications, displayFiltered, hasIssues)
- )}
- {sources.map((line, index) => (
- this.renderLine(line, index, hasCoverage, hasDuplications, displayFiltered, hasIssues)
- ))}
- </tbody>
- </table>
+ <TooltipsContainer>
+ <table className="source-table">
+ <tbody>
+ {hasFileIssues && (
+ this.renderLine(ZERO_LINE, -1, hasCoverage, hasDuplications, displayFiltered, hasIssues)
+ )}
+ {sources.map((line, index) => (
+ this.renderLine(line, index, hasCoverage, hasDuplications, displayFiltered, hasIssues)
+ ))}
+ </tbody>
+ </table>
+ </TooltipsContainer>
{this.props.hasSourcesAfter && (
<div className="source-viewer-more-code">
--- /dev/null
+/*
+ * 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.
+ */
+// @flow
+import React from 'react';
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+import { DraggableCore } from 'react-draggable';
+import classNames from 'classnames';
+import throttle from 'lodash/throttle';
+import { scrollToElement } from '../../helpers/scrolling';
+import { translate } from '../../helpers/l10n';
+import type { Issue, FlowLocation } from '../issue/types';
+import type { IndexedIssueLocation } from './helpers/indexing';
+
+type Props = {
+ height: number,
+ issue: Issue,
+ onResize: (height: number) => void,
+ onSelectLocation: (flowIndex: number, locationIndex: number) => void,
+ selectedLocation: IndexedIssueLocation | null
+};
+
+type State = {
+ fixed: boolean,
+ locationBlink: boolean
+};
+
+export default class SourceViewerIssueLocations extends React.Component {
+ fixedNode: HTMLElement;
+ locations: { [string]: HTMLElement } = {};
+ node: HTMLElement;
+ props: Props;
+ rootNode: HTMLElement;
+ state: State;
+
+ constructor (props: Props) {
+ super(props);
+ this.state = { fixed: true, locationBlink: false };
+ this.handleScroll = throttle(this.handleScroll, 50);
+ }
+
+ componentDidMount () {
+ this.bindShortcuts();
+ this.listenScroll();
+ }
+
+ componentWillReceiveProps (nextProps: Props) {
+ /* eslint-disable no-console */
+ console.log('foo');
+
+ if (nextProps.selectedLocation !== this.props.selectedLocation) {
+ this.setState({ locationBlink: false });
+ }
+ }
+
+ componentDidUpdate (prevProps: Props) {
+ if (
+ prevProps.selectedLocation !== this.props.selectedLocation &&
+ this.props.selectedLocation != null
+ ) {
+ this.scrollToLocation();
+ }
+ }
+
+ componentWillUnmount () {
+ this.unbindShortcuts();
+ this.unlistenScroll();
+ }
+
+ bindShortcuts () {
+ document.addEventListener('keydown', this.handleKeyPress);
+ }
+
+ unbindShortcuts () {
+ document.removeEventListener('keydown', this.handleKeyPress);
+ }
+
+ listenScroll () {
+ window.addEventListener('scroll', this.handleScroll);
+ }
+
+ unlistenScroll () {
+ window.removeEventListener('scroll', this.handleScroll);
+ }
+
+ blinkLocation = () => {
+ this.setState({ locationBlink: true });
+ setTimeout(() => this.setState({ locationBlink: false }), 1000);
+ };
+
+ handleScroll = () => {
+ const rootNodeTop = this.rootNode.getBoundingClientRect().top;
+ const fixedNodeRect = this.fixedNode.getBoundingClientRect();
+ const fixedNodeTop = fixedNodeRect.top;
+ const fixedNodeBottom = fixedNodeRect.bottom;
+ this.setState((state: State) => {
+ if (state.fixed) {
+ if (rootNodeTop <= fixedNodeTop) {
+ return { fixed: false };
+ }
+ } else if (fixedNodeBottom >= window.innerHeight) {
+ return { fixed: true };
+ }
+ });
+ };
+
+ handleDrag = (e: Event, data: { deltaY: number }) => {
+ let height = this.props.height - data.deltaY;
+ if (height < 100) {
+ height = 100;
+ }
+ if (height > window.innerHeight / 2) {
+ height = window.innerHeight / 2;
+ }
+ this.props.onResize(height);
+ };
+
+ scrollToLocation () {
+ const { selectedLocation } = this.props;
+ if (selectedLocation != null) {
+ const key = `${selectedLocation.flowIndex}-${selectedLocation.locationIndex}`;
+ const locationElement = this.locations[key];
+ if (locationElement) {
+ scrollToElement(locationElement, 15, 15, this.node);
+ }
+ }
+ }
+
+ handleSelectPrev () {
+ const { issue, selectedLocation } = this.props;
+ if (!selectedLocation) {
+ if (issue.flows.length > 0) {
+ // move to the first location of the first flow
+ this.props.onSelectLocation(0, 0);
+ }
+ } else {
+ const currentFlow = issue.flows[selectedLocation.flowIndex];
+ if (
+ currentFlow.locations != null &&
+ currentFlow.locations.length > selectedLocation.locationIndex + 1
+ ) {
+ // move to the next location for the same flow
+ this.props.onSelectLocation(selectedLocation.flowIndex, selectedLocation.locationIndex + 1);
+ } else if (selectedLocation.flowIndex > 0) {
+ // move to the first location of the previous flow
+ this.props.onSelectLocation(selectedLocation.flowIndex - 1, 0);
+ } else {
+ this.blinkLocation();
+ }
+ }
+ }
+
+ handleSelectNext () {
+ const { issue, selectedLocation } = this.props;
+ if (!selectedLocation) {
+ if (issue.flows.length > 0) {
+ // move to the last location of the first flow
+ const firstFlow = issue.flows[0];
+ if (firstFlow.locations != null) {
+ this.props.onSelectLocation(0, firstFlow.locations.length - 1);
+ }
+ }
+ } else if (selectedLocation.locationIndex > 0) {
+ // move to the previous location for the same flow
+ this.props.onSelectLocation(selectedLocation.flowIndex, selectedLocation.locationIndex - 1);
+ } else if (issue.flows.length > selectedLocation.flowIndex + 1) {
+ // move to the last location of the next flow
+ const nextFlow = issue.flows[selectedLocation.flowIndex + 1];
+ if (nextFlow.locations) {
+ this.props.onSelectLocation(selectedLocation.flowIndex + 1, nextFlow.locations.length - 1);
+ }
+ } else {
+ this.blinkLocation();
+ }
+ }
+
+ handleKeyPress = (e: Object) => {
+ const tagName = e.target.tagName.toUpperCase();
+ const shouldHandle = tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'BUTTON';
+
+ if (shouldHandle) {
+ const selectNext = e.keyCode === 40 && e.altKey;
+ const selectPrev = e.keyCode === 38 && e.altKey;
+
+ if (selectNext) {
+ e.preventDefault();
+ this.handleSelectNext();
+ }
+
+ if (selectPrev) {
+ e.preventDefault();
+ this.handleSelectPrev();
+ }
+ }
+ };
+
+ reverseLocations (locations: Array<*>) {
+ return [...locations].reverse();
+ }
+
+ isLocationSelected (flowIndex: number, locationIndex: number) {
+ const { selectedLocation } = this.props;
+ if (selectedLocation == null) {
+ return false;
+ } else {
+ return selectedLocation.flowIndex === flowIndex &&
+ selectedLocation.locationIndex === locationIndex;
+ }
+ }
+
+ handleLocationClick (flowIndex: number, locationIndex: number, e: SyntheticInputEvent) {
+ e.preventDefault();
+ this.props.onSelectLocation(flowIndex, locationIndex);
+ }
+
+ renderLocation = (
+ location: FlowLocation,
+ flowIndex: number,
+ locationIndex: number,
+ locations: Array<*>
+ ) => {
+ const displayIndex = locations.length > 1;
+ const line = location.textRange ? location.textRange.startLine : null;
+ const key = `${flowIndex}-${locationIndex}`;
+ // note that locations order is reversed
+ const selected = this.isLocationSelected(flowIndex, locations.length - locationIndex - 1);
+
+ return (
+ <li key={key} ref={node => this.locations[key] = node} className="spacer-bottom">
+ {line != null && <code className="source-issue-locations-line">L{line}</code>}
+ <a
+ className={classNames('issue-location-message', 'flash', 'flash-heavy', {
+ selected,
+ in: selected && this.state.locationBlink
+ })}
+ href="#"
+ onClick={this.handleLocationClick.bind(
+ this,
+ flowIndex,
+ locations.length - locationIndex - 1
+ )}>
+ {displayIndex && <strong>{locationIndex + 1}: </strong>}
+ {location.msg}
+ </a>
+ </li>
+ );
+ };
+
+ render () {
+ const { flows } = this.props.issue;
+ const { height } = this.props;
+
+ const className = classNames('source-issue-locations-panel', { fixed: this.state.fixed });
+
+ return (
+ <AutoSizer disableHeight={true}>
+ {({ width }) => (
+ <div
+ ref={node => this.rootNode = node}
+ className="source-issue-locations"
+ style={{ width, height }}>
+ <div
+ ref={node => this.fixedNode = node}
+ className={className}
+ style={{ width, height }}>
+ <header className="source-issue-locations-header"/>
+ <div className="source-issue-locations-shortcuts">
+ <span className="shortcut-button">Alt</span>
+ {' + '}
+ <span className="shortcut-button">↑</span>
+ {' '}
+ <span className="shortcut-button">↓</span>
+ {' '}
+ {translate('source_viewer.to_navigate_issue_locations')}
+ </div>
+ <ul
+ ref={node => this.node = node}
+ className="source-issue-locations-list"
+ style={{ height: height - 15 }}>
+ {flows.map(
+ (flow, flowIndex) =>
+ flow.locations != null &&
+ this
+ .reverseLocations(flow.locations)
+ .map((location, locationIndex) =>
+ this.renderLocation(
+ location,
+ flowIndex,
+ locationIndex,
+ flow.locations || []
+ ))
+ )}
+ </ul>
+ <DraggableCore axis="y" onDrag={this.handleDrag} offsetParent={document.body}>
+ <div className="workspace-viewer-resize"/>
+ </DraggableCore>
+ </div>
+ </div>
+ )}
+ </AutoSizer>
+ );
+ }
+}
import { translate } from '../../helpers/l10n';
import { splitByTokens, highlightSymbol, highlightIssueLocations, generateHTML } from './helpers/highlight';
import type { SourceLine } from './types';
+import type { LinearIssueLocation, IndexedIssueLocation, IndexedIssueLocationMessage } from './helpers/indexing';
type Props = {
displayAllIssues: boolean,
filtered: boolean | null,
highlighted: boolean,
highlightedSymbol: string | null,
- issueLocations: Array<{ from: number, to: number }>,
+ issueLocations: Array<LinearIssueLocation>,
issues: Array<string>,
line: SourceLine,
loadDuplications: (SourceLine, HTMLElement) => void,
onIssueSelect: (string) => void,
onIssueUnselect: () => void,
onSCMClick: (SourceLine, HTMLElement) => void,
+ onSelectLocation: (flowIndex: number, locationIndex: number) => void,
onSymbolClick: (string) => void,
selectedIssue: string | null,
+ secondaryIssueLocations: Array<IndexedIssueLocation>,
// $FlowFixMe
- secondaryIssueLocations: Array<{ from: number, to: number }>,
- // $FlowFixMe
- secondaryIssueLocationMessages: Array<{ msg: string, index?: number }>
+ secondaryIssueLocationMessages: Array<IndexedIssueLocationMessage>,
+ selectedIssueLocation: IndexedIssueLocation | null
};
type State = {
this.detachEvents();
}
- componentDidUpdate (prevProps: Props) {
- /* eslint-disable no-console */
- console.log('re-render line', this.props.line.line, 'because they are not equal:');
- Object.keys(this.props).forEach(prop => {
- if (this.props[prop] !== prevProps[prop]) {
- console.log(prop);
- }
- });
- console.log('');
-
+ componentDidUpdate () {
this.attachEvents();
}
);
}
- renderSecondaryIssueLocationMessages (locationMessages: Array<{ msg: string, index?: number }>) {
+ isSecondaryIssueLocationSelected (location: IndexedIssueLocation | IndexedIssueLocationMessage) {
+ const { selectedIssueLocation } = this.props;
+ if (selectedIssueLocation == null) {
+ return false;
+ } else {
+ return selectedIssueLocation.flowIndex === location.flowIndex &&
+ selectedIssueLocation.locationIndex === location.locationIndex;
+ }
+ }
+
+ handleLocationMessageClick (flowIndex: number, locationIndex: number, e: SyntheticInputEvent) {
+ e.preventDefault();
+ this.props.onSelectLocation(flowIndex, locationIndex);
+ }
+
+ renderSecondaryIssueLocationMessage = (location: IndexedIssueLocationMessage) => {
+ const className = classNames('source-viewer-issue-location', 'issue-location-message', {
+ 'selected': this.isSecondaryIssueLocationSelected(location)
+ });
+
const limitString = (str: string) => (
str.length > 30 ? str.substr(0, 30) + '...' : str
);
+ return (
+ <a
+ key={`${location.flowIndex}-${location.locationIndex}`}
+ href="#"
+ className={className}
+ title={location.msg}
+ onClick={e => this.handleLocationMessageClick(location.flowIndex, location.locationIndex, e)}>
+ {location.index && (
+ <strong>{location.index}: </strong>
+ )}
+ {limitString(location.msg)}
+ </a>
+ );
+ };
+
+ renderSecondaryIssueLocationMessages (locations: Array<IndexedIssueLocationMessage>) {
return (
<div className="source-line-issue-locations">
- {locationMessages.map((locationMessage, index) => (
- <div key={index} className="source-viewer-issue-location" title={locationMessage.msg}>
- {locationMessage.index && (
- <strong>{locationMessage.index}: </strong>
- )}
- {limitString(locationMessage.msg)}
- </div>
- ))}
+ {locations.map(this.renderSecondaryIssueLocationMessage)}
</div>
);
}
}
if (secondaryIssueLocations) {
- tokens = highlightIssueLocations(tokens, secondaryIssueLocations, 'source-line-code-secondary-issue');
+ const linearLocations = secondaryIssueLocations.map(location => ({
+ from: location.from,
+ line: location.line,
+ to: location.to
+ }));
+ tokens = highlightIssueLocations(tokens, linearLocations, 'issue-location');
+ const { selectedIssueLocation } = this.props;
+ if (selectedIssueLocation != null) {
+ const x = secondaryIssueLocations.find(location => this.isSecondaryIssueLocationSelected(location));
+ if (x) {
+ tokens = highlightIssueLocations(tokens, [x], 'selected');
+ }
+ }
}
const finalCode = generateHTML(tokens);
*/
// @flow
import escapeHtml from 'escape-html';
+import type { LinearIssueLocation } from './indexing';
type Token = { className: string, text: string };
type Tokens = Array<Token>;
*/
export const highlightIssueLocations = (
tokens: Tokens,
- issueLocations: Array<{ from: number, to: number }>,
+ issueLocations: Array<LinearIssueLocation>,
rootClassName: string = ISSUE_LOCATION_CLASS
): Tokens => {
issueLocations.forEach(location => {
import type { Issue } from '../../issue/types';
import type { SourceLine } from '../types';
+export type LinearIssueLocation = {
+ from: number,
+ line: number,
+ to: number
+};
+
+export type IndexedIssueLocation = {
+ flowIndex: number,
+ from: number,
+ line: number,
+ locationIndex: number,
+ to: number,
+};
+
+export type IndexedIssueLocationMessage = {
+ flowIndex: number,
+ locationIndex: number,
+ msg: string
+};
+
+export type IndexedIssueLocationsByIssueAndLine = {
+ [issueKey: string]: {
+ // $FlowFixMe
+ [lineNumber: number]: Array<IndexedIssueLocation>
+ }
+};
+
+export type IndexedIssueLocationMessagesByIssueAndLine = {
+ [issueKey: string]: {
+ [lineNumber: number]: Array<IndexedIssueLocationMessage>
+ }
+};
+
export const issuesByLine = (issues: Array<Issue>) => {
const index = {};
issues.forEach(issue => {
return index;
};
-export const locationsByLine = (issues: Array<Issue>) => {
+export const locationsByLine = (issues: Array<Issue>): { [number]: Array<LinearIssueLocation> } => {
const index = {};
issues.forEach(issue => {
getLinearLocations(issue.textRange).forEach(location => {
return index;
};
-export const locationsByIssueAndLine = (issues: Array<Issue>) => {
+export const locationsByIssueAndLine = (issues: Array<Issue>): IndexedIssueLocationsByIssueAndLine => {
const index = {};
issues.forEach(issue => {
const byLine = {};
if (!(linearLocation.line in byLine)) {
byLine[linearLocation.line] = [];
}
- byLine[linearLocation.line].push({ from: linearLocation.from, to: linearLocation.to });
+ byLine[linearLocation.line].push({
+ ...linearLocation,
+ flowIndex: location.flowIndex,
+ locationIndex: location.locationIndex
+ });
});
});
index[issue.key] = byLine;
return index;
};
-export const locationMessagesByIssueAndLine = (issues: Array<Issue>) => {
+export const locationMessagesByIssueAndLine = (issues: Array<Issue>): IndexedIssueLocationMessagesByIssueAndLine => {
const index = {};
issues.forEach(issue => {
const byLine = {};
if (!(line in byLine)) {
byLine[line] = [];
}
- byLine[line].push({ msg: location.msg, index: location.index });
+ byLine[line].push(location);
});
index[issue.key] = byLine;
});
});
return index;
};
+
+export const findLocationByIndex = (
+ locations: IndexedIssueLocationsByIssueAndLine,
+ flowIndex: number,
+ locationIndex: number) => {
+ const issueKeys = Object.keys(locations);
+ for (const issueKey of issueKeys) {
+ const lineNumbers = Object.keys(locations[issueKey]);
+ for (let lineIndex = 0; lineIndex < lineNumbers.length; lineIndex++) {
+ for (let i = 0; i < locations[issueKey][lineNumbers[lineIndex]].length; i++) {
+ const location = locations[issueKey][lineNumbers[lineIndex]][i];
+ if (location.flowIndex === flowIndex && location.locationIndex === locationIndex) {
+ return location;
+ }
+ }
+ }
+ }
+
+ return null;
+};
return locations;
};
-export const getIssueLocations = (issue: Issue): Array<{ msg: string, textRange: TextRange, index?: number }> => {
- const primaryLocation = {
- msg: issue.message,
- textRange: issue.textRange
- };
- const allLocations = [primaryLocation];
- issue.flows.forEach(({ locations }) => {
+export const getIssueLocations = (issue: Issue): Array<{
+ msg: string,
+ flowIndex: number,
+ locationIndex: number,
+ textRange?: TextRange,
+ index?: number
+}> => {
+ const allLocations = [];
+ issue.flows.forEach(({ locations }, flowIndex) => {
if (locations) {
const locationsCount = locations.length;
locations.forEach((location, index) => {
const flowLocation = {
...location,
+ flowIndex,
+ locationIndex: index,
// set index only for real flows, do not set for just secondary locations
index: locationsCount > 1 ? locationsCount - index : undefined
};
--- /dev/null
+.source-issue-locations {
+ position: relative;
+}
+
+.source-issue-locations-panel {
+ background-color: #fff;
+ box-shadow: 0 -6px 12px rgba(0, 0, 0, .175);
+}
+
+.source-issue-locations-panel.fixed {
+ position: fixed;
+ bottom: 0;
+ margin-left: -1px;
+ border-left: 1px solid #e6e6e6;
+ border-right: 1px solid #e6e6e6;
+}
+
+.source-issue-locations-header {
+ height: 15px;
+ padding: 0 15px;
+ box-sizing: border-box;
+ background-color: #404040;
+ color: #fff;
+}
+
+.source-issue-locations-shortcuts {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ padding: 6px;
+ background-color: #fff;
+ color: #777;
+ font-size: 11px;
+}
+
+.source-issue-locations-list {
+ height: 185px;
+ padding: 15px;
+ box-sizing: border-box;
+ overflow: auto;
+}
+
+.source-issue-locations-line {
+ display: inline-block;
+ min-width: 25px;
+ margin-right: 15px;
+ color: #777;
+ font-size: 12px;
+ text-align: right;
+}
+
+.issue-location,
+.issue-location-message {
+ display: inline-block;
+ vertical-align: top;
+ line-height: 16px;
+ height: 17px;
+ border: 1px solid #ffeaea;
+ box-sizing: border-box;
+ background-color: #ffeaea;
+}
+
+.issue-location {
+ /* nothing so far */
+}
+
+.issue-location.highlighted {
+ border-color: #e1e1f2;
+ background-color: #e1e1f2;
+}
+
+.issue-location.selected {
+ border-color: #f4b1b0;
+ background-color: #f4b1b0;
+}
+
+.issue-location-message {
+ padding: 0 10px;
+ color: #444 !important;
+ font-size: 12px;
+ white-space: nowrap;
+ transition: all 0.3s ease;
+}
+
+.issue-location-message:hover {
+ border-color: #f4b1b0;
+ background-color: #f4b1b0;
+}
+
+.issue-location-message.selected {
+ border-color: #dd4040;
+}
\ No newline at end of file
node: HTMLElement;
props: Props;
+ static defaultProps = {
+ selected: false
+ };
+
componentDidMount () {
this.renderIssueView();
if (this.props.selected) {
endOffset: number
};
+export type FlowLocation = {
+ msg: string,
+ textRange?: TextRange
+};
+
export type Issue = {
key: string,
flows: Array<{
- locations?: Array<{
- msg: string,
- textRange?: TextRange
- }>
+ locations?: Array<FlowLocation>
}>,
line?: number,
message: string,
author: string,
comments?: Array<Comment>,
component: string,
+ flows: Array<{
+ locations: Array<{
+ msg: string,
+ textRange: TextRange
+ }>
+ }>,
+ key: string,
line?: number,
project: string,
rule: string,
--- /dev/null
+/*
+ * 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.
+ */
+// @flow
+import debounce from 'lodash/debounce';
+
+const SCROLLING_DURATION = 100;
+const SCROLLING_INTERVAL = 10;
+const SCROLLING_STEPS = SCROLLING_DURATION / SCROLLING_INTERVAL;
+
+const getScrollPosition = (element: HTMLElement): number => {
+ return element === window ? window.scrollY : element.scrollTop;
+};
+
+const scrollElement = (element: HTMLElement, position: number) => {
+ if (element === window) {
+ window.scrollTo(0, position);
+ } else {
+ element.scrollTop = position;
+ }
+};
+
+let smoothScrollTop = (y: number, parent) => {
+ const scrollTop = getScrollPosition(parent);
+ const scrollingDown = y > scrollTop;
+ const step = Math.ceil(Math.abs(y - scrollTop) / SCROLLING_STEPS);
+ let stepsDone = 0;
+
+ const interval = setInterval(() => {
+ const scrollTop = getScrollPosition(parent);
+ if (scrollTop === y || SCROLLING_STEPS === stepsDone) {
+ clearInterval(interval);
+ } else {
+ let goal;
+ if (scrollingDown) {
+ goal = Math.min(y, scrollTop + step);
+ } else {
+ goal = Math.max(y, scrollTop - step);
+ }
+ stepsDone++;
+ scrollElement(parent, goal);
+ }
+ }, SCROLLING_INTERVAL);
+};
+
+smoothScrollTop = debounce(smoothScrollTop, SCROLLING_DURATION, { leading: true });
+
+export const scrollToElement = (
+ element: HTMLElement,
+ topOffset: number = 0,
+ bottomOffset: number = 0,
+ parent: HTMLElement = window
+) => {
+ const { top, bottom } = element.getBoundingClientRect();
+ const scrollTop = getScrollPosition(parent);
+ const height: number = parent === window ? window.innerHeight : parent.getBoundingClientRect().height;
+
+ const parentTop = parent === window ? 0 : parent.getBoundingClientRect().top;
+
+ if (top - parentTop < topOffset) {
+ smoothScrollTop(scrollTop - topOffset + top - parentTop, parent);
+ }
+
+ if (bottom - parentTop > height - bottomOffset) {
+ smoothScrollTop(scrollTop + bottom - parentTop - height + bottomOffset, parent);
+ }
+};
background-position: bottom;
}
-.source-line-code-secondary-issue {
- display: inline-block;
- background-color: @issueBackgroundColor;
-
- &.highlighted {
- background-color: mix(#B3D4FF, @issueBackgroundColor, 40%);
- }
-}
-
.source-meta {
vertical-align: top;
width: 1px;
}
.source-viewer-issue-location {
- float: right;
max-width: 200px;
- height: @source-line-height - 1px;
- line-height: @source-line-height - 1px;
margin-right: 10px;
- padding: 0 10px;
- background-color: #ffeaea;
- font-size: 12px;
.text-ellipsis;
}
.source-line-issue-locations {
float: right;
margin-right: -10px;
- padding-bottom: 1px;
&:empty {
display: none;
display: inline-block;
min-width: 24px;
height: 24px;
- line-height: 24px;
+ line-height: 21px;
padding: 0 4px;
box-sizing: border-box;
border: 1px solid #ccc;
background-image: linear-gradient(to bottom, #f5f5f5, #eee);
box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
color: @secondFontColor;
- font-size: @baseFontSize;
- font-weight: 600;
+ font-size: 11px;
text-align: center;
}
.issues-workspace-component-viewer {
display: none;
- padding: 1px 10px;
+ padding: 1px 10px 10px;
min-height: 100vh;
.code-issue-modern {
version "2.2.0"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.0.tgz#8f61df81f356c45d18a31d83fde4dfb194ea8722"
-classnames@^2.2.4:
+classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
dependencies:
utila "~0.3"
+"dom-helpers@^2.4.0 || ^3.0.0":
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+
dom-serializer@0, dom-serializer@~0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
promise "^7.0.3"
whatwg-fetch "^0.9.0"
-fbjs@^0.8.4:
+fbjs@^0.8.1, fbjs@^0.8.4:
version "0.8.8"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
dependencies:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
dependencies:
minimist "^1.2.0"
strip-json-comments "~1.0.4"
-react-addons-shallow-compare@15.3.2:
- version "15.3.2"
- resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.3.2.tgz#c9edba49b9eab44d0c59024d289beb1ab97318b5"
+react-addons-shallow-compare@15.4.2:
+ version "15.4.2"
+ resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.4.2.tgz#027ffd9720e3a1e0b328dcd8fc62e214a0d174a5"
+ dependencies:
+ fbjs "^0.8.4"
+ object-assign "^4.1.0"
-react-addons-test-utils@15.3.2:
- version "15.3.2"
- resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.3.2.tgz#c09a44f583425a4a9c1b38444d7a6c3e6f0f41f6"
+react-addons-test-utils@15.4.2:
+ version "15.4.2"
+ resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
+ dependencies:
+ fbjs "^0.8.4"
+ object-assign "^4.1.0"
react-deep-force-update@^1.0.0:
version "1.0.1"
sockjs-client "1.0.3"
strip-ansi "3.0.1"
-react-dom@15.3.2:
- version "15.3.2"
- resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
+react-dom@15.4.2:
+ version "15.4.2"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f"
+ dependencies:
+ fbjs "^0.8.1"
+ loose-envify "^1.1.0"
+ object-assign "^4.1.0"
+
+react-draggable@2.2.3:
+ version "2.2.3"
+ resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-2.2.3.tgz#17628cb8aaefed639d38e0021b978a685d80b08b"
+ dependencies:
+ classnames "^2.2.5"
react-helmet@3.1.0:
version "3.1.0"
global "^4.3.0"
react-proxy "^1.1.7"
-react@15.3.2:
- version "15.3.2"
- resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
+react-virtualized@^9.1.0:
+ version "9.1.0"
+ resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.1.0.tgz#ac022281860f832ffecaf7863c099813681be521"
+ dependencies:
+ babel-runtime "^6.11.6"
+ classnames "^2.2.3"
+ dom-helpers "^2.4.0 || ^3.0.0"
+ loose-envify "^1.3.0"
+
+react@15.4.2:
+ version "15.4.2"
+ resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
dependencies:
fbjs "^0.8.4"
loose-envify "^1.1.0"
source_viewer.load_more_code=Load More Code
source_viewer.loading_more_code=Loading More Code...
+source_viewer.to_navigate_issue_locations=to quicky navigate issue locations
projects / sonarqube.git / commitdiff