fix(edge): only show expand row for Edge Devices with AMT activated [EE-2489] (#6519)

app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx

@@ -206,6 +206,7 @@ export function EdgeDevicesDatatable({
               <RowProvider
                 key={key}
                 disableTrustOnFirstConnect={disableTrustOnFirstConnect}
+                isOpenAmtEnabled={isOpenAmtEnabled}
               >
                 <TableRow<Environment>
                   cells={row.cells}

app/edge/devices/components/EdgeDevicesDatatable/columns/RowContext.tsx

@@ -2,21 +2,24 @@ import { createContext, useContext, useMemo, PropsWithChildren } from 'react';
 
 interface RowContextState {
   disableTrustOnFirstConnect: boolean;
+  isOpenAmtEnabled: boolean;
 }
 
 const RowContext = createContext<RowContextState | null>(null);
 
 export interface RowProviderProps {
   disableTrustOnFirstConnect: boolean;
+  isOpenAmtEnabled: boolean;
 }
 
 export function RowProvider({
   disableTrustOnFirstConnect,
+  isOpenAmtEnabled,
   children,
 }: PropsWithChildren<RowProviderProps>) {
   const state = useMemo(
-    () => ({ disableTrustOnFirstConnect }),
-    [disableTrustOnFirstConnect]
+    () => ({ disableTrustOnFirstConnect, isOpenAmtEnabled }),
+    [disableTrustOnFirstConnect, isOpenAmtEnabled]
   );
 
   return <RowContext.Provider value={state}>{children}</RowContext.Provider>;

app/edge/devices/components/EdgeDevicesDatatable/columns/name.tsx

@@ -1,8 +1,9 @@
-import { CellProps, Column, TableInstance } from 'react-table';
+import { CellProps, Column } from 'react-table';
 
 import { Environment } from '@/portainer/environments/types';
 import { Link } from '@/portainer/components/Link';
 import { ExpandingCell } from '@/portainer/components/datatables/components/ExpandingCell';
+import { useRowContext } from '@/edge/devices/components/EdgeDevicesDatatable/columns/RowContext';
 
 export const name: Column<Environment> = {
   Header: 'Name',
@@ -15,9 +16,15 @@ export const name: Column<Environment> = {
   sortType: 'string',
 };
 
-export function NameCell({ value: name, row }: CellProps<TableInstance>) {
+export function NameCell({ value: name, row }: CellProps<Environment>) {
+  const { isOpenAmtEnabled } = useRowContext();
+  const showExpandedRow = !!(
+    isOpenAmtEnabled &&
+    row.original.AMTDeviceGUID &&
+    row.original.AMTDeviceGUID.length > 0
+  );
   return (
-    <ExpandingCell row={row}>
+    <ExpandingCell row={row} showExpandArrow={showExpandedRow}>
       <Link
         to="portainer.endpoints.endpoint"
         params={{ id: row.original.Id }}

app/portainer/components/datatables/components/ExpandingCell.module.css

@@ -0,0 +1,9 @@
+.expand-button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}

app/portainer/components/datatables/components/ExpandingCell.tsx

@@ -1,20 +1,30 @@
 import { PropsWithChildren } from 'react';
-import { Row, TableInstance } from 'react-table';
+import { Row } from 'react-table';
 
-interface Props {
-  row: Row<TableInstance>;
+import styles from './ExpandingCell.module.css';
+
+interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
+  row: Row<D>;
+  showExpandArrow: boolean;
 }
 
-export function ExpandingCell({ children, row }: PropsWithChildren<Props>) {
+export function ExpandingCell<
+  D extends Record<string, unknown> = Record<string, unknown>
+>({ row, showExpandArrow, children }: PropsWithChildren<Props<D>>) {
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <div {...row.getToggleRowExpandedProps()}>
-      <i
-        className={`fas ${arrowClass(row.isExpanded)} space-right`}
-        aria-hidden="true"
-      />
+    <>
+      {showExpandArrow && (
+        <button type="button" className={styles.expandButton}>
+          <i
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...row.getToggleRowExpandedProps()}
+            className={`fas ${arrowClass(row.isExpanded)} space-right`}
+            aria-hidden="true"
+          />
+        </button>
+      )}
       {children}
-    </div>
+    </>
   );
 
   function arrowClass(isExpanded: boolean) {