mirror of
https://github.com/prymitive/karma
synced 2026-08-23 11:56:20 +00:00
Merge pull request #732 from prymitive/fix-resize
fix(ui): use width passed by ReactResizeDetector instead of body width
This commit is contained in:
@@ -36,3 +36,9 @@ require (
|
||||
)
|
||||
|
||||
replace github.com/ugorji/go v1.1.4 => github.com/ugorji/go/codec v0.0.0-20190204201341-e444a5086c43
|
||||
|
||||
replace mvdan.cc/lint v0.0.0-20170908181259-adc824a0674b => github.com/mvdan/lint v0.0.0-20170908181259-adc824a0674b
|
||||
|
||||
replace mvdan.cc/interfacer v0.0.0-20180901003855-c20040233aed => github.com/mvdan/interfacer v0.0.0-20180901003855-c20040233aed
|
||||
|
||||
replace mvdan.cc/unparam v0.0.0-20190124213536-fbb59629db34 => github.com/mvdan/unparam v0.0.0-20190124213536-fbb59629db34
|
||||
|
||||
@@ -253,6 +253,12 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJ
|
||||
github.com/modern-go/reflect2 v1.0.1 h1:9f412s+6RmYXLWZSEzVVgPGK7C2PphHj5RJrvfx9AWI=
|
||||
github.com/modern-go/reflect2 v1.0.1/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
|
||||
github.com/mozilla/tls-observatory v0.0.0-20180409132520-8791a200eb40/go.mod h1:SrKMQvPiws7F7iqYp8/TX+IhxCYhzr6N/1yb8cwHsGk=
|
||||
github.com/mvdan/interfacer v0.0.0-20180901003855-c20040233aed h1:mGBgkU/wFP6546zxexkPvWKPnrhQyIKjwaftXE9FsUg=
|
||||
github.com/mvdan/interfacer v0.0.0-20180901003855-c20040233aed/go.mod h1:HZyYWztN8sP9MkjbyBePK07am8lX+41udLsQYR4on7I=
|
||||
github.com/mvdan/lint v0.0.0-20170908181259-adc824a0674b h1:FXf3dVRWKHVhfcpN1MljYg2chYEgZHvef2cxW7f1sbE=
|
||||
github.com/mvdan/lint v0.0.0-20170908181259-adc824a0674b/go.mod h1:XD5S+wekDbY/hz8elAl7F+EtNk9+ZGhSoxUUPVvX2L8=
|
||||
github.com/mvdan/unparam v0.0.0-20190124213536-fbb59629db34 h1:AROwEpyhD+3eg48uFC6+Lq3faBJzg5GYltD7TK0ITeU=
|
||||
github.com/mvdan/unparam v0.0.0-20190124213536-fbb59629db34/go.mod h1:H6SUd1XjIs+qQCyskXg5OFSrilMRUkD8ePJpHKDPaeY=
|
||||
github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
|
||||
github.com/nbutton23/zxcvbn-go v0.0.0-20160627004424-a22cb81b2ecd/go.mod h1:o96djdrsSGy3AWPyBgZMAGfxZNfgntdJG+11KU4QvbU=
|
||||
github.com/nbutton23/zxcvbn-go v0.0.0-20171102151520-eafdab6b0663 h1:Ri1EhipkbhWsffPJ3IPlrb4SkTOPa2PfRXp3jchBczw=
|
||||
@@ -428,12 +434,6 @@ gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
|
||||
gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
|
||||
gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
|
||||
honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
|
||||
mvdan.cc/interfacer v0.0.0-20180901003855-c20040233aed h1:WX1yoOaKQfddO/mLzdV4wptyWgoH/6hwLs7QHTixo0I=
|
||||
mvdan.cc/interfacer v0.0.0-20180901003855-c20040233aed/go.mod h1:Xkxe497xwlCKkIaQYRfC7CSLworTXY9RMqwhhCm+8Nc=
|
||||
mvdan.cc/lint v0.0.0-20170908181259-adc824a0674b h1:DxJ5nJdkhDlLok9K6qO+5290kphDJbHOQO1DFFFTeBo=
|
||||
mvdan.cc/lint v0.0.0-20170908181259-adc824a0674b/go.mod h1:2odslEg/xrtNQqCYg2/jCoyKnw3vv5biOc3JnIcYfL4=
|
||||
mvdan.cc/unparam v0.0.0-20190124213536-fbb59629db34 h1:B1LAOfRqg2QUyCdzfjf46quTSYUTAK5OCwbh6pljHbM=
|
||||
mvdan.cc/unparam v0.0.0-20190124213536-fbb59629db34/go.mod h1:H6SUd1XjIs+qQCyskXg5OFSrilMRUkD8ePJpHKDPaeY=
|
||||
sourcegraph.com/sourcegraph/go-diff v0.5.1-0.20190210232911-dee78e514455 h1:qoQ5Kt+Zm+GXBtz49YwD3juBhr/E0U25jO6bBzxW6NI=
|
||||
sourcegraph.com/sourcegraph/go-diff v0.5.1-0.20190210232911-dee78e514455/go.mod h1:kuch7UrkMzY0X+p9CRK03kfuPQ2zzQcaEFbx8wA8rck=
|
||||
sourcegraph.com/sqs/pbtypes v0.0.0-20180604144634-d3ebe8f20ae4 h1:JPJh2pk3+X4lXAkZIk2RuE/7/FoK9maXw+TNPJhVS/c=
|
||||
|
||||
@@ -82,8 +82,8 @@ const AlertGrid = observer(
|
||||
this.viewport = observable(
|
||||
{
|
||||
width: document.body.clientWidth,
|
||||
update() {
|
||||
this.width = document.body.clientWidth;
|
||||
update(width, height) {
|
||||
this.width = width;
|
||||
},
|
||||
get gridSizesConfig() {
|
||||
return GridSizesConfig(
|
||||
@@ -240,6 +240,7 @@ const AlertGrid = observer(
|
||||
<React.Fragment>
|
||||
<ReactResizeDetector
|
||||
handleWidth
|
||||
handleHeight
|
||||
onResize={debounce(this.viewport.update, 100)}
|
||||
/>
|
||||
<MasonryInfiniteScroller
|
||||
|
||||
@@ -14,15 +14,9 @@ import { AlertGrid } from ".";
|
||||
let alertStore;
|
||||
let settingsStore;
|
||||
let silenceFormStore;
|
||||
let bodyWidth;
|
||||
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers();
|
||||
Object.defineProperty(document.body, "clientWidth", {
|
||||
get: () => {
|
||||
return bodyWidth;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
@@ -82,9 +76,9 @@ const MockGroupList = (count, alertPerGroup) => {
|
||||
};
|
||||
|
||||
const VerifyColumnCount = (innerWidth, columns) => {
|
||||
bodyWidth = innerWidth;
|
||||
MockGroupList(60, 5);
|
||||
const tree = ShallowAlertGrid();
|
||||
tree.instance().viewport.update(innerWidth, 500);
|
||||
expect(
|
||||
tree
|
||||
.find("AlertGroup")
|
||||
@@ -444,9 +438,10 @@ describe("<AlertGrid />", () => {
|
||||
});
|
||||
|
||||
it("viewport resize also resizes alert groups", () => {
|
||||
bodyWidth = 1980;
|
||||
MockGroupList(60, 5);
|
||||
const tree = ShallowAlertGrid();
|
||||
// set initial width
|
||||
tree.instance().viewport.update(1980, 500);
|
||||
expect(
|
||||
tree
|
||||
.find("AlertGroup")
|
||||
@@ -454,10 +449,8 @@ describe("<AlertGrid />", () => {
|
||||
.props().style.width
|
||||
).toBe(1980 / 4);
|
||||
|
||||
bodyWidth = 1000;
|
||||
// not sure how to force ReactResizeDetector to detect width change, so
|
||||
// we directly call viewport update here
|
||||
tree.instance().viewport.update();
|
||||
// then resize and verify if column count was changed
|
||||
tree.instance().viewport.update(1000, 500);
|
||||
expect(
|
||||
tree
|
||||
.find("AlertGroup")
|
||||
|
||||
Reference in New Issue
Block a user