From 8f6e721ea3eab6b92f342011f8973b7780ab47ce Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Mon, 15 Jul 2024 18:09:21 +0200
Subject: [PATCH] show filter

---
 .../grid-view/src/lib/remix-ui-grid-cell.tsx  |  4 +-
 .../src/lib/remix-ui-grid-section.tsx         | 38 +++++++++++++++++++
 .../grid-view/src/lib/remix-ui-grid-view.tsx  |  3 +-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
index 75496385ea..cbbe269603 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
@@ -54,12 +54,12 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
   */
 
   return (
-    <div className='mr-2 mt-3' onClick={() => {
+    <div data-values='gridCell' className='' onClick={() => {
       if (props.expandViewEl)
         props.handleExpand(!expand)
       else return
     }}>
-      { anyEnabled && <div className='d-flex flex-column'>
+      { anyEnabled && <div className='mr-2 mt-3 d-flex flex-column'>
         <div className='d-flex flex-grid'>
           <div className={"d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
             <div className="d-flex remixui_grid_cell flex-column">
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
index ca391c7685..6de9bb54c3 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-section.css'
+import FiltersContext from "./filtersContext"
 
 declare global {
   interface Window {
@@ -19,7 +20,43 @@ interface RemixUIGridSectionProps {
   expandedCell?: any
 }
 
+const hasChildCell = (children: ReactNode): boolean => {
+  let found = false
+
+  const isElement = (child: ReactNode): child is React.ReactElement => {
+    return React.isValidElement(child)
+  }
+
+  const traverse = (child: ReactNode) => {
+    console.log('found ', children)
+
+    if (found) return
+
+    if (isElement(child)) {
+      if (child.props.classList === 'EECellStyle' && child.props.isValidElement) {
+        found = true
+        console.log('found ', child.props.className)
+        return
+      }
+
+      if (child.props.children) {
+        React.Children.forEach(child.props.children, traverse)
+      }
+    }
+  }
+
+  React.Children.forEach(children, traverse)
+  return found
+}
+
 export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
+  const [children, setChildren] = useState(props.children)
+  const filterCon = useContext(FiltersContext)
+
+  useEffect(() => {
+    setChildren(props.children)
+  }, [props.children])
+
   return (
     <div
       className={`d-flex px-4 py-2 flex-column w-100 remixui_grid_section_container ${props.classList}`}
@@ -29,6 +66,7 @@ export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
       <div className="d-flex flex-column w-100 remixui_grid_section">
         { props.title && <h6 className='mt-1 mb-0 align-items-left '>{ props.title }</h6> }
         <div className={(props.hScrollable) ? `d-flex flex-row pb-2  overflow-auto` : `d-flex flex-wrap`}>
+          { !hasChildCell(children) && <span> No items found </span>}
           { props.children }
         </div>
         { props.expandedCell && <div>
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
index 6c6cc27bbd..b8c8373869 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx
@@ -51,7 +51,6 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
       searchInputRef.current.value = ''
     } else {
       setState((prevState) => {
-        console.log("update filter", searchInputRef.current.value)
         return {
           ...prevState,
           searchDisable: searchInputRef.current.value === '',
@@ -120,7 +119,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
                     ref={searchInputRef}
                     type="text"
                     style={{ minWidth: '100px' }}
-                    className="border form-control border-right-0 mr-4"
+                    className="border form-control mr-4"
                     id="GVFilterInput"
                     placeholder={"Filter the list"}
                     data-id="RemixGVFilterInput"