1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-27 00:19:39 +01:00

fix: show all envs in project tables unless you've explicitly hidden some (#6812)

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.
This commit is contained in:
Thomas Heartman 2024-04-10 15:07:55 +02:00 committed by GitHub
parent 1a05bdad2e
commit c9beb864cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 87 additions and 3 deletions

View File

@ -48,6 +48,7 @@
"@testing-library/react": "12.1.5",
"@testing-library/react-hooks": "7.0.2",
"@testing-library/user-event": "14.5.2",
"@types/css-mediaquery": "^0.1.4",
"@types/debounce": "1.2.4",
"@types/deep-diff": "1.0.5",
"@types/jest": "29.5.12",
@ -74,6 +75,7 @@
"classnames": "2.5.1",
"copy-to-clipboard": "3.3.3",
"countries-and-timezones": "^3.4.0",
"css-mediaquery": "^0.1.2",
"cypress": "13.7.1",
"cypress-vite": "^1.4.0",
"date-fns": "2.30.0",

View File

@ -0,0 +1,74 @@
import theme from 'themes/theme';
import { screen } from '@testing-library/react';
import { useDefaultColumnVisibility } from './useDefaultColumnVisibility';
import { render } from 'utils/testRenderer';
import { ThemeProvider } from 'themes/ThemeProvider';
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);
};
const columnIds = [
'select',
'favorite',
'name',
'createdAt',
'lastSeenAt',
'environment:development',
'environment:production',
'environment:dev2',
'environment:prod2',
'environment:staging',
'environment:test',
'actions',
];
const TestComponent: React.FC = () => {
const columns = useDefaultColumnVisibility(columnIds);
return (
<ThemeProvider>
<ul data-testid='wrapper'>
{Object.keys(columns).map((column) => (
<li key={column}>{column}</li>
))}
</ul>
</ThemeProvider>
);
};
test.each(Object.keys(theme.breakpoints.values))(
'it renders all envs on %s screens',
(screenSize) => {
resizeScreen(
theme.breakpoints.values[
screenSize as keyof typeof theme.breakpoints.values
] + 1,
);
render(<TestComponent />);
const allEnvs = columnIds.filter((column) =>
column.startsWith('environment:'),
);
for (const env of allEnvs) {
screen.getByText(env);
}
},
);

View File

@ -24,9 +24,7 @@ export const useDefaultColumnVisibility = (allColumnIds: string[]) => {
const showEnvironments = useCallback(
(environmentsToShow: number = 0) =>
allColumnIds
.filter((id) => id.startsWith('environment:') !== false)
.slice(0, environmentsToShow),
allColumnIds.filter((id) => id.startsWith('environment:')),
[allColumnIds],
);

View File

@ -2250,6 +2250,11 @@
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
"@types/css-mediaquery@^0.1.4":
version "0.1.4"
resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.4.tgz#8efbebbc0cebaf34c77db2b63892711e19143c63"
integrity sha512-DZyHAz716ZUctpqkUU2COwUoZ4gI6mZK2Q1oIz/fvNS6XHVpKSJgDnE7vRxZUBn9vjJHDVelCVW0dkshKOLFsA==
"@types/debounce@1.2.4":
version "1.2.4"
resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.4.tgz#cb7e85d9ad5ababfac2f27183e8ac8b576b2abb3"
@ -3366,6 +3371,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.3:
shebang-command "^2.0.0"
which "^2.0.1"
css-mediaquery@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
css-tree@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"