Web console: prevent extra trim in auto complete (#8543)

* prevent extra trim in auto complete

* add unit test

web-console/src/views/query-view/query-input/__snapshots__/query-input.spec.tsx.snap

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`query input correctly formats helper HTML 1`] = `
+"
+<div class=\\"function-doc\\">
+  <div class=\\"function-doc-name\\">
+    <b>COUNT</b>
+  </div>
+  <hr />
+  <div>
+    <b>Syntax:</b>
+  </div>
+  <div>COUNT(*)</div>
+  <br />
+  <div>
+    <b>Description:</b>
+  </div>
+  <div>Counts the number of things</div>
+</div>"
+`;
+
 exports[`query input matches snapshot 1`] = `
 <div
   class="query-input"

web-console/src/views/query-view/query-input/query-input.spec.tsx

@@ -30,4 +30,14 @@ describe('query input', () => {
     const { container } = render(sqlControl);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('correctly formats helper HTML', () => {
+    expect(
+      QueryInput.completerToHtml({
+        caption: 'COUNT',
+        syntax: 'COUNT(*)',
+        description: 'Counts the number of things',
+      }),
+    ).toMatchSnapshot();
+  });
 });

web-console/src/views/query-view/query-input/query-input.tsx

@@ -106,11 +106,17 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
       },
       getDocTooltip: (item: any) => {
         if (item.meta === 'function') {
-          const functionName = item.caption.slice(0, -2);
-          item.docHTML = `
+          item.docHTML = QueryInput.completerToHtml(item);
+        }
+      },
+    });
+  }
+
+  static completerToHtml(item: any) {
+    return `
 <div class="function-doc">
   <div class="function-doc-name">
-    <b>${escape(functionName)}</b>
+    <b>${escape(item.caption)}</b>
   </div>
   <hr />
   <div>
@@ -124,9 +130,6 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
   <div>${escape(item.description)}</div>
 </div>`;
   }
-      },
-    });
-  }
 
   static getDerivedStateFromProps(props: QueryInputProps, state: QueryInputState) {
     const { columnMetadata, currentSchema, currentTable } = props;