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

fix(ui): always render grid swimlane when enabled

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

@@ -32,7 +32,6 @@ 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
@@ -131,7 +130,7 @@ const Grid = observer(
     }
 
     componentDidUpdate() {
-      const { grid, isOnlyGrid } = this.props;
+      const { grid } = this.props;
 
       this.masonryRepack();
 
@@ -140,10 +139,6 @@ const Grid = observer(
           Math.max(this.initial, grid.alertGroups.length)
         );
       }
-
-      if (isOnlyGrid === true) {
-        this.gridToggle.set(true);
-      }
     }
 
     componentWillUnmount() {
@@ -161,12 +156,11 @@ const Grid = observer(
         gridSizesConfig,
         groupWidth,
         grid,
-        isOnlyGrid,
       } = this.props;
 
       return (
         <React.Fragment>
-          {!isOnlyGrid && (
+          {grid.labelName !== "" && (
             <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,7 +105,6 @@ 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,7 +78,6 @@ const ShallowGrid = () => {
       gridSizesConfig={GridSizesConfig(1024, 420)}
       groupWidth={420}
       grid={MockGrid()}
-      isOnlyGrid={alertStore.data.grids.length === 1}
     />
   );
 };
@@ -231,30 +230,17 @@ describe("<Grid />", () => {
 
   it("click on the grid toggle toggles all groups", () => {
     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();
+    const grid = MockGrid();
+    grid.labelName = "foo";
+    grid.labelValue = "bar";
+    grid.stateCount = {
+      unprocessed: 1,
+      suppressed: 2,
+      active: 3,
+    };
+    alertStore.data.grids = [grid];
+    tree.setProps({ grid: grid });
     expect(tree.find("AlertGroup")).toHaveLength(10);
 
     tree.find("span.cursor-pointer").at(0).simulate("click");
@@ -264,42 +250,6 @@ 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();
@@ -312,7 +262,7 @@ describe("<Grid />", () => {
       active: 0,
     };
     alertStore.data.grids = [MockGrid(), MockGrid()];
-    tree.setProps({ grid: grid, isOnlyGrid: false });
+    tree.setProps({ grid: grid });
     expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(1);
     expect(tree.find("h5").at(0).find("FilteringLabel").text()).toBe(
       "foo: bar"
@@ -331,7 +281,7 @@ describe("<Grid />", () => {
       active: 0,
     };
     alertStore.data.grids = [MockGrid(), MockGrid()];
-    tree.setProps({ grid: grid, isOnlyGrid: false });
+    tree.setProps({ grid: grid });
     expect(tree.find("h5").at(0).find("FilteringLabel")).toHaveLength(0);
   });