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();