Fix grid empty view not displaying the image

project-gauntlet · Jan 7, 2025 · e5117c6 · e5117c6
1 parent d9b60d5
commit e5117c6
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 36 deletions.
diff --git a/dev_plugin/gauntlet.toml b/dev_plugin/gauntlet.toml
@@ -169,6 +169,13 @@ path = 'src/empty-list.tsx'
 type = 'view'
 description = ''
 
+[[entrypoint]]
+id = 'empty-grid-entrypoint'
+name = 'Empty Grid Entrypoint'
+path = 'src/empty-grid.tsx'
+type = 'view'
+description = ''
+
 [[entrypoint]]
 id = 'entrypoint-generator'
 name = 'Entrypoint generator'

diff --git a/dev_plugin/src/empty-grid.tsx b/dev_plugin/src/empty-grid.tsx
@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+import { Grid } from "@project-gauntlet/api/components";
+
+const alderaanImage = "https://static.wikia.nocookie.net/starwars/images/4/4a/Alderaan.jpg/revision/latest?cb=20061211013805"
+
+export default function EmptyListView(): ReactElement {
+    return (
+        <Grid>
+            <Grid.EmptyView title="Nothing here" description="But there was something" image={{ url: alderaanImage }}/>
+        </Grid>
+    )
+}
diff --git a/rust/client/src/ui/widget.rs b/rust/client/src/ui/widget.rs
@@ -1686,54 +1686,63 @@ impl<'b> ComponentWidgets<'b> {
     ) -> Element<'a, ComponentWidgetEvent> {
         let RootState { show_action_panel, focused_item } = self.root_state(grid_widget.__id__);
 
-        let mut pending: Vec<&GridItemWidget> = vec![];
-        let mut items: Vec<Element<_>> = vec![];
-        let index_counter = &Cell::new(0);
-        let mut first_section = true;
-
-        for members in &grid_widget.content.ordered_members {
-            match &members {
-                GridWidgetOrderedMembers::GridItem(widget) => {
-                    first_section = false;
-                    pending.push(widget)
-                }
-                GridWidgetOrderedMembers::GridSection(widget) => {
-                    if !pending.is_empty() {
-                        let content = self.render_grid(&pending, &grid_widget.columns, focused_item.index, index_counter);
+        let content = if grid_widget.content.ordered_members.is_empty() {
+            match &grid_widget.content.empty_view {
+                Some(widget) => self.render_empty_view_widget(widget),
+                None => horizontal_space().into()
+            }
+        } else {
+            let mut pending: Vec<&GridItemWidget> = vec![];
+            let mut items: Vec<Element<_>> = vec![];
+            let index_counter = &Cell::new(0);
+            let mut first_section = true;
+
+            for members in &grid_widget.content.ordered_members {
+                match &members {
+                    GridWidgetOrderedMembers::GridItem(widget) => {
+                        first_section = false;
+                        pending.push(widget)
+                    }
+                    GridWidgetOrderedMembers::GridSection(widget) => {
+                        if !pending.is_empty() {
+                            let content = self.render_grid(&pending, &grid_widget.columns, focused_item.index, index_counter);
 
-                        items.push(content);
+                            items.push(content);
 
-                        pending = vec![];
-                    }
+                            pending = vec![];
+                        }
 
-                    items.push(self.render_grid_section_widget(widget, focused_item.index, index_counter, first_section));
+                        items.push(self.render_grid_section_widget(widget, focused_item.index, index_counter, first_section));
 
-                    first_section = false;
+                        first_section = false;
+                    }
                 }
             }
-        }
 
-        if !pending.is_empty() {
-            let content = self.render_grid(&pending, &grid_widget.columns, focused_item.index, index_counter);
+            if !pending.is_empty() {
+                let content = self.render_grid(&pending, &grid_widget.columns, focused_item.index, index_counter);
 
-            items.push(content);
-        }
+                items.push(content);
+            }
 
-        let content: Element<_> = column(items)
-            .into();
+            let content: Element<_> = column(items)
+                .into();
 
-        let content: Element<_> = container(content)
-            .width(Length::Fill)
-            .themed(ContainerStyle::GridInner);
+            let content: Element<_> = container(content)
+                .width(Length::Fill)
+                .themed(ContainerStyle::GridInner);
 
-        let content: Element<_> = scrollable(content)
-            .id(focused_item.scrollable_id.clone())
-            .width(Length::Fill)
-            .into();
+            let content: Element<_> = scrollable(content)
+                .id(focused_item.scrollable_id.clone())
+                .width(Length::Fill)
+                .into();
 
-        let content: Element<_> = container(content)
-            .width(Length::Fill)
-            .themed(ContainerStyle::Grid);
+            let content: Element<_> = container(content)
+                .width(Length::Fill)
+                .themed(ContainerStyle::Grid);
+
+            content
+        };
 
         self.render_plugin_root(
             *show_action_panel,