Merge pull request #1568 from prymitive/fix-grid-hide

fix(ui): always render last grid, even if hidden

ui/src/Components/Grid/AlertGrid/Grid.js

@@ -32,6 +32,7 @@ const Grid = observer(
       gridSizesConfig: PropTypes.array.isRequired,
       groupWidth: PropTypes.number.isRequired,
       grid: APIGrid.isRequired,
+      isOnlyGrid: PropTypes.bool.isRequired,
     };
 
     // store reference to generated masonry component so we can call it
@@ -130,7 +131,7 @@ const Grid = observer(
     }
 
     componentDidUpdate() {
-      const { grid } = this.props;
+      const { grid, isOnlyGrid } = this.props;
 
       this.masonryRepack();
 
@@ -139,6 +140,10 @@ const Grid = observer(
           Math.max(this.initial, grid.alertGroups.length)
         );
       }
+
+      if (isOnlyGrid === true) {
+        this.gridToggle.set(true);
+      }
     }
 
     componentWillUnmount() {
@@ -156,11 +161,12 @@ const Grid = observer(
         gridSizesConfig,
         groupWidth,
         grid,
+        isOnlyGrid,
       } = this.props;
 
       return (
         <React.Fragment>
-          {alertStore.data.grids.length > 1 && (
+          {!isOnlyGrid && (
             <h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 mt-2 mb-0 border border-dark">
               <span className="flex-shrink-0 flex-grow-0 ml-0 mr-2">
                 <FilteringCounterBadge

ui/src/Components/Grid/AlertGrid/index.js

@@ -105,6 +105,7 @@ const AlertGrid = observer(
               gridSizesConfig={this.viewport.gridSizesConfig}
               groupWidth={this.viewport.groupWidth}
               grid={grid}
+              isOnlyGrid={alertStore.data.grids.length < 2}
             />
           ))}
         </React.Fragment>

ui/src/Components/Grid/AlertGrid/index.test.js

@@ -78,6 +78,7 @@ const ShallowGrid = () => {
       gridSizesConfig={GridSizesConfig(1024, 420)}
       groupWidth={420}
       grid={MockGrid()}
+      isOnlyGrid={alertStore.data.grids.length === 1}
     />
   );
 };
@@ -91,6 +92,7 @@ const MountedGrid = () => {
       gridSizesConfig={GridSizesConfig(1024, 420)}
       groupWidth={420}
       grid={MockGrid()}
+      isOnlyGrid={alertStore.data.grids.length === 1}
     />
   );
 };
@@ -262,6 +264,42 @@ describe("<Grid />", () => {
     expect(tree.find("AlertGroup")).toHaveLength(10);
   });
 
+  it("show all groups if grid is hidden but there are no other grids", () => {
+    MockGroupList(10, 3);
+    const groups = alertStore.data.grids[0].alertGroups;
+    alertStore.data.grids = [
+      {
+        labelName: "foo",
+        labelValue: "bar",
+        alertGroups: groups,
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
+      },
+      {
+        labelName: "foo",
+        labelValue: "",
+        alertGroups: [],
+        stateCount: {
+          unprocessed: 1,
+          suppressed: 2,
+          active: 3,
+        },
+      },
+    ];
+    const tree = MountedGrid();
+    expect(tree.find("AlertGroup")).toHaveLength(10);
+
+    tree.find("span.cursor-pointer").at(0).simulate("click");
+    expect(tree.find("AlertGroup")).toHaveLength(0);
+
+    tree.setProps({ isOnlyGrid: true });
+    tree.update();
+    expect(tree.find("AlertGroup")).toHaveLength(10);
+  });
+
   it("renders filter badge for grids with a value", () => {
     MockGroupList(1, 1);
     const tree = MountedGrid();
@@ -274,7 +312,7 @@ describe("<Grid />", () => {
       active: 0,
     };
     alertStore.data.grids = [MockGrid(), MockGrid()];
-    tree.setProps({ grid: grid });
+    tree.setProps({ grid: grid, isOnlyGrid: false });
     expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(1);
     expect(tree.find("h5").at(0).find("FilteringLabel").text()).toBe(
       "foo: bar"
@@ -293,7 +331,7 @@ describe("<Grid />", () => {
       active: 0,
     };
     alertStore.data.grids = [MockGrid(), MockGrid()];
-    tree.setProps({ grid: grid });
+    tree.setProps({ grid: grid, isOnlyGrid: false });
     expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(0);
   });