fix: show all envs in project tables unless you've explicitly hidden some #6812
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
![codescene-delta-analysis[bot]](https://avatars.githubusercontent.com/in/53921?s=60&v=4){kind=small}
...ent/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.test.tsx
Outdated
Show resolved
Hide resolved
| import mediaQuery from 'css-mediaquery'; | ||
|
|
||
| const createMatchMedia = (width: number) => { | ||
| return (query: string) => { | ||
| return { | ||
| matches: mediaQuery.match(query, { width }), | ||
| media: '', | ||
| addListener: () => {}, | ||
| removeListener: () => {}, | ||
| onchange: () => {}, | ||
| addEventListener: () => {}, | ||
| removeEventListener: () => {}, | ||
| dispatchEvent: () => true, | ||
| }; | ||
| }; | ||
| }; | ||
|
|
||
| const resizeScreen = (width: number) => { | ||
| window.matchMedia = createMatchMedia(width); | ||
| }; |
There was a problem hiding this comment.
This bit allows us to resize the screen in the tests (based on this article that I found). I'm wondering whether we should extract it into a separate file or leave it here for now.
There was a problem hiding this comment.
This is the actual fix to the problem.
This reverts commit 9559f6f.
| resizeScreen( | ||
| theme.breakpoints.values[ | ||
| screenSize as keyof typeof theme.breakpoints.values | ||
| ] + 1, |
There was a problem hiding this comment.
I suspect we have an off-by-one issue here. If you cut a stick in 2 places, how many sticks you will end up with? It's the same with breakpoints.
There was a problem hiding this comment.
That's a fair point. But I had in fact thought of this. The thing is, assuming I'm looking at the right file (frontend/src/themes/theme.ts), then breakpoints is defined as such:
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1536,
},
},So in this case, the smallest size we set for the screen is 1 pixel. The way I read this, xs is from 0 px and up, sm from 600 px and up etc. Thus, using one px above their lower threshold should put us safely within their zone.
Am I making sense?
There was a problem hiding this comment.
Or, the breakpoint values are defined by their lower bound.
There was a problem hiding this comment.
O, perfect, thanks for clarification
There was a problem hiding this comment.
In theory, we could probably skip the +1, but that just means we avoid any weird edge cases if we use strictly vs greater than or equal to
This PR changes the behavior of the project tables' environment columns based on input from customers.
Up until now, you have been shown either the first project or the first three projects in the list of the project's environment. The decision on whether to show one or three is based on screen size. The breakpoint appears to be about 1280px. Above that you get three, below it you get one.
With this PR, we'll show you all environments by default, regardless of screen size. However, that's just for the default values. If you manually change column visibility, those changes will of course be respected.
I've used a new package,
css-mediaquery, to test that all screen sizes show all envs.