Merge pull request #5526 from ethereum/envexpatch

fix empty sections in gridview
ethereum · Dec 20, 2024 · eb6bc01 · eb6bc01
2 parents 1104b30 + c2886bc
commit eb6bc01
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 61 deletions.
diff --git a/apps/remix-ide/src/app/plugins/remixGuide.tsx b/apps/remix-ide/src/app/plugins/remixGuide.tsx
@@ -112,13 +112,14 @@ export class RemixGuidePlugin extends ViewPlugin {
           title={Data.title}
           description={Data.description}
         >
-          { Data.sections.map(section => {
+          { Data.sections.map((section, index) => {
             return <RemixUIGridSection
               plugin={this}
               title={section.title}
               hScrollable={true}
+              key={index}
             >
-              { section.cells.map(cell => {
+              { section.cells.map((cell, index) => {
                 return <RemixUIGridCell
                   plugin={this}
                   title={cell.title}
@@ -128,7 +129,7 @@ export class RemixGuidePlugin extends ViewPlugin {
                   expandViewEl={
                     cell.expandViewElement
                   }
-                  key={cell.title}
+                  key={cell.title || index}
                   id={cell.title}
                   handleExpand={() => {
                     this.showVideo = true

diff --git a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
@@ -161,11 +161,11 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
               tooltipTitle={template.tooltip}
               hScrollable={false}
             >
-              {template.items.map(item => {
+              {template.items.map((item, index) => {
                 return <RemixUIGridCell
                   plugin={this}
                   title={item.displayName}
-                  key={item.name}
+                  key={item.name || index}
                   id={item.name}
                   searchKeywords={[item.displayName, item.description, template.name]}
                   tagList={item.tagList}

diff --git a/libs/remix-ui/environment-explorer/src/lib/components/environment-explorer-ui.tsx b/libs/remix-ui/environment-explorer/src/lib/components/environment-explorer-ui.tsx
@@ -61,6 +61,7 @@ export const EnvironmentExplorerUI = (props: environmentExplorerUIProps) => {
       const newSections = { ...prevSections }
       Object.keys(newSections).forEach((section) => {
         newSections[section].providers = Object.values(state.providersFlat).filter(newSections[section].filterFn)
+        newSections[section].id = section
       })
       return newSections
     })
@@ -77,16 +78,17 @@ export const EnvironmentExplorerUI = (props: environmentExplorerUIProps) => {
         showPin={true}
         title={profile.description}
         description="Select the providers and chains to include them in the ENVIRONMENT select box of the Deploy & Run Transactions plugin."
-      >{
-          Object.values(sections).length && Object.values(sections).map((section) => (
+      >
+        {Object.values(sections).map((section) => (
+          section.providers.length > 0 && (
             <RemixUIGridSection
               plugin={this}
               title={section.title}
               hScrollable={false}
               key={section.title}
             >
-              {section.providers.map(provider => {
-                return <RemixUIGridCell
+              {section.providers.map(provider => (
+                <RemixUIGridCell
                   plugin={this}
                   title={provider.displayName}
                   logos={provider.logos}
@@ -101,10 +103,10 @@ export const EnvironmentExplorerUI = (props: environmentExplorerUIProps) => {
                 >
                   <div>{(section.descriptionFn && section.descriptionFn(provider)) || provider.description}</div>
                 </RemixUIGridCell>
-              })}
+              ))}
             </RemixUIGridSection>
-          ))
-        }
+          )
+        ))}
       </RemixUIGridView>
     </>
   )

diff --git a/libs/remix-ui/environment-explorer/src/lib/types/index.ts b/libs/remix-ui/environment-explorer/src/lib/types/index.ts
@@ -18,6 +18,7 @@ export type environmentExplorerUIGridSection = {
   providers: Provider[]
   filterFn: (provider: Provider) => boolean
   descriptionFn?: (provider: Provider) => string | JSX.Element | null
+  id?: string
 }
 
 export type environmentExplorerUIGridSections = {

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
@@ -3,6 +3,7 @@ import React, {useState, useEffect, useContext, useRef, ReactNode, ReactHTMLElem
 import './remix-ui-grid-cell.css'
 import FiltersContext from "./filtersContext"
 import { CustomTooltip } from '@remix-ui/helper'
+import { ChildCallbackContext } from './remix-ui-grid-section'
 
 declare global {
   interface Window {
@@ -33,6 +34,7 @@ interface RemixUIGridCellProps {
 
 export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
   const filterCon = useContext(FiltersContext)
+  const callbackContext = useContext(ChildCallbackContext)
   const [anyEnabled, setAnyEnabled] = useState(false)
   const [expand, setExpand] = useState(false)
   const [pinned, setPinned] = useState<boolean>(props.pinned)
@@ -52,6 +54,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
         props.searchKeywords?.map(keyword => keyword?.toLowerCase()).some(searchKeyword => searchKeyword?.toLowerCase().includes(filterCon.filter?.toLocaleLowerCase())))
 
     setAnyEnabled(enabled)
+    if (callbackContext.onChildCallback && (props.id || props.title)) callbackContext.onChildCallback((props.id || props.title), enabled)
   }, [filterCon, props.tagList])
 
   useEffect(() => {
@@ -126,6 +129,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
                   tooltipId="pluginManagerInactiveTitleLinkToDoc"
                   tooltipClasses="text-nowrap"
                   tooltipText={props.tagList[key]}
+                  key={props.tagList[key]}
                 >
                   <span key={props.tagList[key]}
                     className={'remixui_grid_cell_tag bg-' + filterCon.keyValueMap[props.tagList[key]].color}

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
@@ -1,16 +1,25 @@
-import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
-import { CustomTooltip } from "@remix-ui/helper";
-
+import React, {createContext, ReactNode, useEffect, useState} from 'react' // eslint-disable-line
 import './remix-ui-grid-section.css'
-import FiltersContext from "./filtersContext"
-
 declare global {
   interface Window {
     _paq: any
   }
 }
 const _paq = window._paq = window._paq || []
 
+// Define the type for the context value
+interface ChildCallbackContextType {
+  onChildCallback: (id: string, enabled: boolean) => void;
+}
+
+// Create the context with a default value of `null`
+export const ChildCallbackContext = createContext<ChildCallbackContextType | null>(null);
+
+interface ChildState {
+  id: string;
+  enabled: boolean;
+}
+
 interface RemixUIGridSectionProps {
   plugin: any
   title?: string
@@ -22,59 +31,53 @@ interface RemixUIGridSectionProps {
   expandedCell?: any
 }
 
-const hasChildCell = (children: ReactNode): boolean => {
-  return true
-  let found = false
-
-  const isElement = (child: ReactNode): child is React.ReactElement => {
-    return React.isValidElement(child)
-  }
+export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
 
-  const traverse = (child: ReactNode) => {
-    if (found) return
+  const [hide, setHide] = useState(false);
+  const [childrenStates, setChildrenStates] = useState<ChildState[]>([]);
 
-    if (isElement(child)) {
-      if (child.props.classList === 'remixui_grid_cell_container') {
-        found = true
-        return
-      }
+  // Callback to update the state of a child
+  const onChildCallback = (id: string, enabled: boolean) => {
+    setChildrenStates((prev) => {
+      const existingChild = prev.find((child) => child.id === id);
 
-      if (child.props.children) {
-        React.Children.forEach(child.props.children, traverse)
+      if (existingChild) {
+        // Update existing child
+        return prev.map((child) =>
+          child.id === id ? { ...child, enabled } : child
+        );
+      } else {
+        // Add new child
+        return [...prev, { id, enabled }];
       }
-    }
-  }
-
-  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])
+    // Check if all children are disabled
+    const allDisabled = childrenStates.every((child) => !child.enabled);
+    setHide(allDisabled);
+  }, [childrenStates]);
 
   return (
-    <div
-      className={`d-flex px-4 py-2 flex-column w-100 remixui_grid_section_container ${props.classList}`}
-      data-id={"remixUIGS" + props.title}
-      style={{ overflowX: 'auto' }}
-    >
-      <div className="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>
-          { props.expandedCell }
+    <ChildCallbackContext.Provider value={{ onChildCallback }}>
+      <div
+        className={`${hide? 'd-none': `d-flex px-4 py-2 flex-column w-100 remixui_grid_section_container ${props.classList}`}`}
+        data-id={"remixUIGS" + props.title}
+        style={{ overflowX: 'auto' }}
+      >
+        <div className={`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`}>
+            { props.children }
+          </div>
+          { props.expandedCell && <div>
+            { props.expandedCell }
+          </div>
+          }
         </div>
-        }
       </div>
-    </div>
+    </ChildCallbackContext.Provider>
   )
 }
 

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
@@ -127,7 +127,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
                 </div>
                 <div className='d-flex flex-row'>
                   { Object.keys(keyValueMap).map((key) => (
-                    <CustomCheckbox label={key} />
+                    <CustomCheckbox key={key} label={key} />
                   )) }
                 </div>
               </div>