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:
parent
1a05bdad2e
commit
c9beb864cd
@ -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",
|
||||
|
@ -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);
|
||||
}
|
||||
},
|
||||
);
|
@ -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],
|
||||
);
|
||||
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user