change: [M3-7546] - Revert FW table row changes

packages/manager/.changeset/pr-9974-changed-1701965338643.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Revert FW table changes and removed clamp-js dependancy ([#9974](https://github.com/linode/manager/pull/9974))

packages/manager/package.json

@@ -28,7 +28,6 @@
     "braintree-web": "^3.92.2",
     "chart.js": "~2.9.4",
     "chartjs-adapter-luxon": "^0.2.1",
-    "clamp-js": "^0.7.0",
     "classnames": "^2.2.5",
     "copy-to-clipboard": "^3.0.8",
     "country-region-data": "^1.4.5",
@@ -130,7 +129,6 @@
     "@testing-library/user-event": "^12.1.1",
     "@types/braintree-web": "^3.75.23",
     "@types/chart.js": "^2.9.21",
-    "@types/clamp-js": "^0.7.6",
     "@types/classnames": "^2.2.3",
     "@types/css-mediaquery": "^0.1.1",
     "@types/enzyme": "^3.9.3",

packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.test.tsx

@@ -68,18 +68,24 @@ describe('FirewallRow', () => {
   describe('getDeviceLinks', () => {
     it('should return a single Link if one Device is attached', () => {
       const device = firewallDeviceFactory.build();
-      const mockRef = { current: null };
-      const links = getDeviceLinks([device], mockRef);
+      const links = getDeviceLinks([device]);
       const { getByText } = renderWithTheme(links);
       expect(getByText(device.entity.label));
     });
 
     it('should render up to three comma-separated links', () => {
       const devices = firewallDeviceFactory.buildList(3);
-      const mockRef = { current: null };
-      const links = getDeviceLinks(devices, mockRef);
+      const links = getDeviceLinks(devices);
       const { queryAllByTestId } = renderWithTheme(links);
       expect(queryAllByTestId('firewall-row-link')).toHaveLength(3);
     });
+
+    it('should render "plus N more" text for any devices over three', () => {
+      const devices = firewallDeviceFactory.buildList(13);
+      const links = getDeviceLinks(devices);
+      const { getByText, queryAllByTestId } = renderWithTheme(links);
+      expect(queryAllByTestId('firewall-row-link')).toHaveLength(3);
+      expect(getByText(/10 more/));
+    });
   });
 });

packages/manager/src/features/Firewalls/FirewallLanding/FirewallRow.tsx

@@ -1,7 +1,6 @@
 import { Firewall, FirewallDevice } from '@linode/api-v4/lib/firewalls';
 import { APIError } from '@linode/api-v4/lib/types';
-import clamp from 'clamp-js';
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Hidden } from 'src/components/Hidden';
@@ -13,11 +12,10 @@ import { useAllFirewallDevicesQuery } from 'src/queries/firewalls';
 import { capitalize } from 'src/utilities/capitalize';
 
 import { ActionHandlers, FirewallActionMenu } from './FirewallActionMenu';
-import { StyledDivWrapper, StyledSpan } from './FirewallRow.styles';
 
-type CombinedProps = Firewall & ActionHandlers;
+export type Props = Firewall & ActionHandlers;
 
-export const FirewallRow = React.memo((props: CombinedProps) => {
+export const FirewallRow = React.memo((props: Props) => {
   const flags = useFlags();
   const { id, label, rules, status, ...actionHandlers } = props;
 
@@ -33,34 +31,6 @@ export const FirewallRow = React.memo((props: CombinedProps) => {
 
   const count = getCountOfRules(rules);
 
-  const truncateRef = useRef<HTMLDivElement>(null);
-
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const applyClamp = () => {
-    if (truncateRef.current) {
-      clamp(truncateRef.current, { clamp: 3 });
-    }
-  };
-
-  useEffect(() => {
-    applyClamp();
-  });
-
-  useEffect(() => {
-    applyClamp();
-  }, [windowWidth]);
-
   return (
     <TableRow
       ariaLabel={`Firewall ${label}`}
@@ -81,7 +51,6 @@ export const FirewallRow = React.memo((props: CombinedProps) => {
           {getDevicesCellString(
             featureFlaggedDevices ?? [],
             isLoading,
-            truncateRef,
             error ?? undefined
           )}
         </TableCell>
@@ -130,7 +99,6 @@ export const getCountOfRules = (rules: Firewall['rules']): [number, number] => {
 const getDevicesCellString = (
   data: FirewallDevice[],
   loading: boolean,
-  ref: React.RefObject<HTMLDivElement>,
   error?: APIError[]
 ): JSX.Element | string => {
   if (loading) {
@@ -145,29 +113,30 @@ const getDevicesCellString = (
     return 'None assigned';
   }
 
-  return getDeviceLinks(data, ref);
+  return getDeviceLinks(data);
 };
 
-export const getDeviceLinks = (
-  data: FirewallDevice[],
-  ref: React.RefObject<HTMLDivElement>
-): JSX.Element => {
+export const getDeviceLinks = (data: FirewallDevice[]): JSX.Element => {
+  const firstThree = data.slice(0, 3);
+
   return (
-    <StyledDivWrapper>
-      <div ref={ref}>
-        {data.map((thisDevice, idx) => (
-          <StyledSpan key={thisDevice.id}>
-            <Link
-              className="link secondaryLink"
-              data-testid="firewall-row-link"
-              to={`/${thisDevice.entity.type}s/${thisDevice.entity.id}`}
-            >
-              {thisDevice.entity.label}
-            </Link>
-            {idx !== data.length - 1 && ','}
-          </StyledSpan>
-        ))}
-      </div>
-    </StyledDivWrapper>
+    <>
+      {firstThree.map((thisDevice, idx) => (
+        <Link
+          className="link secondaryLink"
+          data-testid="firewall-row-link"
+          key={thisDevice.id}
+          to={`/${thisDevice.entity.type}s/${thisDevice.entity.id}`}
+        >
+          {idx > 0 && `, `}
+          {thisDevice.entity.label}
+        </Link>
+      ))}
+      {data.length > 3 && (
+        <span>
+          {`, `}plus {data.length - 3} more.
+        </span>
+      )}
+    </>
   );
 };