fix(docker/networks): handle system networks

app/react/docker/networks/ListView/NetworksDatatable.tsx

@@ -62,6 +62,7 @@ export function NetworksDatatable({ dataset, onRemove, onRefresh }: Props) {
       getRowCanExpand={({ original: item }) =>
         !!(item.Subs && item.Subs?.length > 0)
       }
+      isRowSelectable={({ original: item }) => !item.ResourceControl?.System}
       renderSubRow={(row) => (
         <>
           {row.original.Subs && (

app/react/docker/networks/ListView/columns/index.ts

@@ -4,18 +4,18 @@ import { useMemo } from 'react';
 import { createOwnershipColumn } from '@/react/docker/components/datatable/createOwnershipColumn';
 
 import { buildExpandColumn } from '@@/datatables/expand-column';
-import { buildNameColumn } from '@@/datatables/buildNameColumn';
 
 import { DecoratedNetwork } from '../types';
 
 import { columnHelper } from './helper';
+import { name } from './name';
 
 export function useColumns(isHostColumnVisible?: boolean) {
   return useMemo(
     () =>
       _.compact([
         buildExpandColumn<DecoratedNetwork>(),
-        buildNameColumn<DecoratedNetwork>('Name', '.network'),
+        name,
         columnHelper.accessor((item) => item.StackName || '-', {
           header: 'Stack',
         }),

app/react/docker/networks/ListView/columns/name.tsx

@@ -0,0 +1,31 @@
+import { truncate } from '@/portainer/filters/filters';
+
+import { Link } from '@@/Link';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('Name', {
+  header: 'Name',
+  id: 'name',
+  cell({ row: { original: item } }) {
+    return (
+      <>
+        <Link
+          to=".network"
+          params={{ id: item.Id, nodeName: item.NodeName }}
+          title={item.Name}
+        >
+          {truncate(item.Name, 40)}
+        </Link>
+        {item.ResourceControl?.System && (
+          <span
+            style={{ marginLeft: '10px' }}
+            className="label label-info image-tag space-left"
+          >
+            System
+          </span>
+        )}
+      </>
+    );
+  },
+});