Events Table search filter persists when scrolling horizontally

Signed-off-by: Ankush-Tyagi <ankush.tyagi@ericsson.com>
eclipse-cdt-cloud · Jan 31, 2023 · 4d52749 · 4d52749
1 parent 8757351
commit 4d52749
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/react-components/src/components/__tests__/table-renderer-components.test.tsx b/packages/react-components/src/components/__tests__/table-renderer-components.test.tsx
@@ -143,6 +143,7 @@ describe('Table output component tests', () => {
             columnApi={new ColumnApi()}
             showParentFilter={mockShowParentFilter}
             context={''}
+            filterModel= {new Map<string,string>()}
         />).toJSON();
         expect(searchFilter).toMatchSnapshot();
     });
@@ -175,6 +176,7 @@ describe('Table output component tests', () => {
             columnApi={new ColumnApi()}
             showParentFilter={mockShowParentFilter}
             context={''}
+            filterModel={new Map<string,string>()}
         />);
 
         const parentDiv = screen.getByTestId('search-filter-element-parent');

diff --git a/packages/react-components/src/components/table-output-component.tsx b/packages/react-components/src/components/table-output-component.tsx
@@ -139,7 +139,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                 rowSelection='multiple'
                 onModelUpdated={this.onModelUpdated}
                 onCellKeyDown={this.onKeyDown}
-                frameworkComponents={this.frameworkComponents}
+                components={this.frameworkComponents}
                 enableBrowserTooltips={true}
             >
             </AgGridReact>
@@ -428,7 +428,8 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                     onFilterChange: this.searchEvents,
                     onclickNext: () => this.findMatchedEvent(Direction.NEXT),
                     onclickPrevious: () => this.findMatchedEvent(Direction.PREVIOUS),
-                    colName: columnHeader.id.toString()
+                    colName: columnHeader.id.toString(),
+                    filterModel: this.filterModel
                 },
                 icons: {
                     filter: ''

diff --git a/packages/react-components/src/components/table-renderer-components.tsx b/packages/react-components/src/components/table-renderer-components.tsx
@@ -14,6 +14,7 @@ type SearchFilterRendererProps = IFloatingFilterParams & {
     onclickNext: () => void;
     onclickPrevious: () => void;
     colName: string;
+    filterModel: Map<string, string>;
 };
 
 interface SearchFilterRendererState {
@@ -79,7 +80,7 @@ export class SearchFilterRenderer extends React.Component<SearchFilterRendererPr
         super(props);
         this.state = {
             hasHovered: false,
-            hasClicked: false
+            hasClicked: this.props.filterModel.has(this.props.colName)
         };
 
         this.debouncedChangeHandler = debounce((colName, inputVal) => {
@@ -111,10 +112,12 @@ export class SearchFilterRenderer extends React.Component<SearchFilterRendererPr
                     <div>
                         <input
                             data-testid="search-filter-element-input"
-                            type="text" autoFocus={true}
+                            type="text"
+                            autoFocus={true}
                             onKeyDown={this.onKeyDownEvent}
                             onInput={this.onInputBoxChanged}
                             style={{ width: '50%', margin: '10px' }}
+                            defaultValue={this.props.filterModel.get(this.props.colName) ?? ''}
                         />
                         <FontAwesomeIcon className='hoverClass' icon={faTimes} style={{ marginTop: '20px' }} onClick={this.onCloseClickHandler} />
                         <FontAwesomeIcon className='hoverClass' icon={faAngleDown} style={{ marginLeft: '10px', marginTop: '20px' }} onClick={this.onDownClickHandler} />