support multiple highlighted symbols (#1927)

4 files changed, 103 insertions, 8 deletions

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/highlight-test.js b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/highlight-test.js
new file mode 100644
index 00000000000..9a7e5439277
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/highlight-test.js
@@ -0,0 +1,56 @@
+/*
+ * 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 { highlightSymbol } from '../highlight';
+
+describe('highlightSymbol', () => {
+  it('should not highlight symbols with similar beginning', () => {
+    // test all positions of sym-X in the string: beginning, middle and ending
+    const tokens = [
+      { className: 'sym-18 b', text: 'foo' },
+      { className: 'a sym-18', text: 'foo' },
+      { className: 'a sym-18 b', text: 'foo' },
+      { className: 'sym-1 d', text: 'bar' },
+      { className: 'c sym-1', text: 'bar' },
+      { className: 'c sym-1 d', text: 'bar' }
+    ];
+    expect(highlightSymbol(tokens, 'sym-1')).toEqual([
+      { className: 'sym-18 b', text: 'foo' },
+      { className: 'a sym-18', text: 'foo' },
+      { className: 'a sym-18 b', text: 'foo' },
+      { className: 'sym-1 d highlighted', text: 'bar' },
+      { className: 'c sym-1 highlighted', text: 'bar' },
+      { className: 'c sym-1 d highlighted', text: 'bar' }
+    ]);
+  });
+
+  it('should highlight symbols marked twice', () => {
+    const tokens = [
+      { className: 'sym sym-1 sym sym-2', text: 'foo' },
+      { className: 'sym sym-1', text: 'bar' },
+      { className: 'sym sym-2', text: 'qux' }
+    ];
+    expect(highlightSymbol(tokens, 'sym-1')).toEqual([
+      { className: 'sym sym-1 sym sym-2 highlighted', text: 'foo' },
+      { className: 'sym sym-1 highlighted', text: 'bar' },
+      { className: 'sym sym-2', text: 'qux' }
+    ]);
+  });
+});
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/indexing-test.js b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/indexing-test.js
new file mode 100644
index 00000000000..ef5f66e2d72
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/__tests__/indexing-test.js
@@ -0,0 +1,35 @@
+/*
+ * 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 { symbolsByLine } from '../indexing';
+
+describe('symbolsByLine', () => {
+  it('should highlight symbols marked twice', () => {
+    const lines = [
+      { line: 1, code: '<span class="sym-54 sym"><span class="sym-56 sym">foo</span></span>' },
+      { line: 2, code: '<span class="sym-56 sym">bar</span>' },
+      { line: 3, code: '<span class="k">qux</span>' }
+    ];
+    expect(symbolsByLine(lines)).toEqual({
+      1: ['sym-54', 'sym-56'],
+      2: ['sym-56'],
+      3: []
+    });
+  });
+});
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.js b/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.js
index c742f2b0d4c..8bba53b8755 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.js
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/highlight.js
@@ -45,13 +45,15 @@ export const splitByTokens = (code: string, rootClassName: string = ''): Tokens
   return tokens;
 };
 
-export const highlightSymbol = (tokens: Tokens, symbol: string): Tokens =>
-  tokens.map(
+export const highlightSymbol = (tokens: Tokens, symbol: string): Tokens => {
+  const symbolRegExp = new RegExp(`\\b${symbol}\\b`);
+  return tokens.map(
     token =>
-      token.className.includes(symbol)
+      symbolRegExp.test(token.className)
         ? { ...token, className: `${token.className} highlighted` }
         : token
   );
+};
 
 /**
  * Intersect two ranges
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.js b/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.js
index b1c79ac0f11..36bf7e73b3a 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.js
+++ b/server/sonar-web/src/main/js/components/SourceViewer/helpers/indexing.js
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 // @flow
+import { flatten } from 'lodash';
 import { splitByTokens } from './highlight';
 import { getLinearLocations, getIssueLocations } from './issueLocations';
 import type { Issue } from '../../issue/types';
@@ -149,12 +150,13 @@ export const symbolsByLine = (sources: Array<SourceLine>) => {
   const index = {};
   sources.forEach(line => {
     const tokens = splitByTokens(line.code);
-    index[line.line] = tokens
-      .map(token => {
-        const key = token.className.match(/sym-\d+/);
-        return key && key[0];
+    const symbols = flatten(
+      tokens.map(token => {
+        const keys = token.className.match(/sym-\d+/g);
+        return keys != null ? keys : [];
       })
-      .filter(key => key);
+    );
+    index[line.line] = symbols.filter(key => key);
   });
   return index;
 };