From 7d06439d512ddbcc8731e044973a71d47aca84b4 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Wed, 20 Sep 2023 14:44:02 +0300
Subject: [PATCH] fix(docker/networks): handle system networks

---
 .../networks/ListView/NetworksDatatable.tsx   |  1 +
 .../docker/networks/ListView/columns/index.ts |  4 +--
 .../docker/networks/ListView/columns/name.tsx | 31 +++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 app/react/docker/networks/ListView/columns/name.tsx

diff --git a/app/react/docker/networks/ListView/NetworksDatatable.tsx b/app/react/docker/networks/ListView/NetworksDatatable.tsx
index fa9e509e0..26ba1fa2f 100644
--- a/app/react/docker/networks/ListView/NetworksDatatable.tsx
+++ b/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 && (
diff --git a/app/react/docker/networks/ListView/columns/index.ts b/app/react/docker/networks/ListView/columns/index.ts
index 12bf3d42a..b2be3b05c 100644
--- a/app/react/docker/networks/ListView/columns/index.ts
+++ b/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',
         }),
diff --git a/app/react/docker/networks/ListView/columns/name.tsx b/app/react/docker/networks/ListView/columns/name.tsx
new file mode 100644
index 000000000..77321a4a9
--- /dev/null
+++ b/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>
+        )}
+      </>
+    );
+  },
+});