Fix css positioning for filter text box icon

Currently, the filter icon of the filter text box stays fixed
at the top left of the filter tree, even when the filter text
box is out of sight when users scroll down the tree. This commit
fixes this issue by setting the position css property of the
parent div of the filter text box to relative, so that the filter
icon is positioned relatively to the parent container and stays
attached to the filter text box.

Signed-off-by: Hoang Thuan Pham <hoang.pham@calian.ca>

packages/react-components/src/components/utils/filter-tree/__tests__/__snapshots__/entry-tree.test.tsx.snap

@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-
 exports[`Empty tree 1`] = `
 <span>
   
 </span>
 `;
-
 exports[`Entry with children All unchecked 1`] = `
 <div>
   <table
@@ -358,7 +356,6 @@ exports[`Entry with children All unchecked 1`] = `
   </table>
 </div>
 `;
-
 exports[`Entry with children Check one grandchild 1`] = `
 <div>
   <table
@@ -711,7 +708,6 @@ exports[`Entry with children Check one grandchild 1`] = `
   </table>
 </div>
 `;
-
 exports[`Entry with children Collapse one child 1`] = `
 <div>
   <table
@@ -962,10 +958,10 @@ exports[`Entry with children Collapse one child 1`] = `
   </table>
 </div>
 `;
-
 exports[`Entry with children With filter element 1`] = `
 Array [
   <div
+    id="input-filter-container"
     onChange={[Function]}
   >
     <i
@@ -1335,7 +1331,6 @@ Array [
   </div>,
 ]
 `;
-
 exports[`one level of entries 1`] = `
 <div>
   <table
@@ -1441,7 +1436,6 @@ exports[`one level of entries 1`] = `
   </table>
 </div>
 `;
-
 exports[`one level of entries 2`] = `
 <div>
   <table
@@ -1601,7 +1595,6 @@ exports[`one level of entries 2`] = `
   </table>
 </div>
 `;
-
 exports[`one level of entries 3`] = `
 <div>
   <table

packages/react-components/src/components/utils/filter-tree/filter.tsx

@@ -37,7 +37,7 @@ export class Filter extends React.Component<FilterProps, FilterState> {
     }
 
     render(): JSX.Element {
-        return <div ref={this.ref} onChange={this.props.onChange}>
+        return <div ref={this.ref} onChange={this.props.onChange} id="input-filter-container">
             <i id="input-filter-icon" className='codicon codicon-filter'></i>
             <input
                 id="input-filter-tree"

packages/react-components/style/output-components-style.css

@@ -296,6 +296,10 @@ canvas {
     border: 0px; 
 }
 
+#input-filter-container {
+    position: relative;
+}
+
 #input-filter-icon {
     position: absolute;
     top: 5px;