From c9beb864cd229b42bc02d68baaf4d3f8e7c58b12 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 10 Apr 2024 15:07:55 +0200
Subject: [PATCH] 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.
---
frontend/package.json | 2 +
.../hooks/useDefaultColumnVisibility.test.tsx | 74 +++++++++++++++++++
.../hooks/useDefaultColumnVisibility.ts | 4 +-
frontend/yarn.lock | 10 +++
4 files changed, 87 insertions(+), 3 deletions(-)
create mode 100644 frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.test.tsx
diff --git a/frontend/package.json b/frontend/package.json
index 741ec9ba36..8d6d8d3369 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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",
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.test.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.test.tsx
new file mode 100644
index 0000000000..60ebd704fb
--- /dev/null
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.test.tsx
@@ -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);
+ }
+ },
+);
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts
index e3acf60a59..0d28f5eecf 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/hooks/useDefaultColumnVisibility.ts
@@ -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],
);
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a6f3b32e7b..16d6aab5d7 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -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"