Display leading and trailing whitespaces in search-in-workspace results

Fixes #5987

- fixed an issue where leading and trailing whitespaces were not being displayed
from the `search-in-workspace` result tree leading to confusion and overall an
annoying behavior.
- added an additional test to `ripgrep-search-in-workspace-server.slow-spec.ts` which
tests the result of a search including a trailing whitespace.
- added an additional test to `ripgrep-search-in-workspace-server.slow-spec.ts` which
tests the result of a search including a leading whitespace.

Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>

packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx

@@ -649,7 +649,7 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
         const replaceTerm = this._replaceTerm !== '' && this._showReplaceButtons ? <span className='replace-term'>{this._replaceTerm}</span> : '';
         const className = `match${this._showReplaceButtons ? ' strike-through' : ''}`;
         return <React.Fragment>
-            <span className={className}> {node.lineText.substr(node.character - 1, node.length)}</span>
+            <span className={className}>{node.lineText.substr(node.character - 1, node.length)}</span>
             {replaceTerm}
         </React.Fragment>;
     }

packages/search-in-workspace/src/browser/styles/index.css

@@ -255,6 +255,7 @@
     background: var(--theia-word-highlight-match-color1);
     display: inline-block;
     line-height: normal;
+    white-space: pre;
 }
 
 .t-siw-search-container .resultLine .match.strike-through {

packages/search-in-workspace/src/node/ripgrep-search-in-workspace-server.slow-spec.ts

@@ -77,6 +77,7 @@ const getRootPathFromName = (name: string) => {
     const names: { [file: string]: string } = {
         carrots: rootDirA,
         potatoes: rootDirA,
+        pastas: rootDirA,
         regexes: rootDirA,
         small: `${rootDirA}/small`,
         'file:with:some:colons': rootDirA,
@@ -111,6 +112,8 @@ Potatoes, unlike carrots, are generally not orange.  But sweet potatoes are,
 it's very confusing.
 `);
 
+    createTestFile('pastas', 'pasta pasta');
+
     createTestFile('regexes', `\
 aaa hello. x h3lo y hell0h3lllo
 hello1
@@ -231,6 +234,34 @@ function compareSearchResults(expected: SearchInWorkspaceResult[], actual: Searc
 describe('ripgrep-search-in-workspace-server', function (): void {
     this.timeout(10000);
 
+    it('should return 1 result when searching for " pasta", respecting the leading whitespace', done => {
+        const pattern = ' pasta';
+
+        const client = new ResultAccumulator(() => {
+            const expected: SearchInWorkspaceResult[] = [
+                { root: rootDirAUri, fileUri: 'pastas', line: 1, character: 6, length: pattern.length, lineText: '' },
+            ];
+            compareSearchResults(expected, client.results);
+            done();
+        });
+        ripgrepServer.setClient(client);
+        ripgrepServer.search(pattern, [rootDirAUri]);
+    });
+
+    it('should return 1 result when searching for "pasta", respecting the trailing whitespace', done => {
+        const pattern = 'pasta ';
+
+        const client = new ResultAccumulator(() => {
+            const expected: SearchInWorkspaceResult[] = [
+                { root: rootDirAUri, fileUri: 'pastas', line: 1, character: 1, length: pattern.length, lineText: '' },
+            ];
+            compareSearchResults(expected, client.results);
+            done();
+        });
+        ripgrepServer.setClient(client);
+        ripgrepServer.search(pattern, [rootDirAUri]);
+    });
+
     // Try some simple patterns with different case.
     it('should return 7 results when searching for "carrot"', done => {
         const pattern = 'carrot';