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

@@ -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",

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);
+        }
+    },
+);

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],
     );
 

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/[email protected]":
   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"