diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js index 6d3cd9c18..613960839 100644 --- a/ui/src/Components/Grid/AlertGrid/index.js +++ b/ui/src/Components/Grid/AlertGrid/index.js @@ -68,9 +68,11 @@ const AlertGrid = observer( }); componentDidUpdate() { - // whenever grid component re-renders we need to ensure that grid elements - // are packed correctly - this.masonryRepack(); + // whenever grid component re-renders we need to ensure that new grid + // elements are packed correctly, but we don't need to do a full repack + if (this.masonryComponentReference.ref !== false) { + this.masonryComponentReference.ref.forceUpdate(); + } } render() { @@ -82,6 +84,7 @@ const AlertGrid = observer( ref={this.storeMasonryRef} pack={true} sizes={GridSizesConfig} + position={false} loadMore={this.loadMore} hasMore={ this.groupsToRender.value < diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js index 8e7e5dd6e..f0fe18eaf 100644 --- a/ui/src/Components/Grid/AlertGrid/index.test.js +++ b/ui/src/Components/Grid/AlertGrid/index.test.js @@ -76,16 +76,27 @@ describe("", () => { expect(alertGroups).toHaveLength(80); }); - it("calls masonryRepack() after update`", () => { + it("calls masonryUpdate() after update`", () => { + const tree = ShallowAlertGrid(); + const instance = tree.instance(); + // it's a shallow render so we don't really have masonry mounted, fake it + instance.masonryComponentReference.ref = { + forceUpdate: jest.fn() + }; + instance.componentDidUpdate(); + expect( + instance.masonryComponentReference.ref.forceUpdate + ).toHaveBeenCalled(); + }); + + it("masonryRepack() calls forcePack() on the masonry instance`", () => { const tree = ShallowAlertGrid(); const instance = tree.instance(); - const repackSpy = jest.spyOn(instance, "masonryRepack"); // it's a shallow render so we don't really have masonry mounted, fake it instance.masonryComponentReference.ref = { forcePack: jest.fn() }; - instance.componentDidUpdate(); - expect(repackSpy).toHaveBeenCalled(); + instance.masonryRepack(); expect(instance.masonryComponentReference.ref.forcePack).toHaveBeenCalled(); }); @@ -94,10 +105,17 @@ describe("", () => { const instance = tree.instance(); const repackSpy = jest.spyOn(instance, "masonryRepack"); instance.masonryComponentReference.ref = false; - instance.componentDidUpdate(); + instance.masonryRepack(); expect(repackSpy).toHaveBeenCalled(); }); + it("componentDidUpdate() doesn't crash when masonryComponentReference.ref=false`", () => { + const tree = ShallowAlertGrid(); + const instance = tree.instance(); + instance.masonryComponentReference.ref = false; + instance.componentDidUpdate(); + }); + it("calling storeMasonryRef() saves the ref in local store", () => { const tree = ShallowAlertGrid(); const instance = tree.instance();