From c7396325f7027a407a623d5a2514db7adee941b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Wed, 12 Mar 2025 14:12:49 +0100
Subject: [PATCH 1/5] test: Add a data-testid to the new port range icon

Allow for easier testing.
---
 src/web/pages/portlists/Dialog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/pages/portlists/Dialog.jsx b/src/web/pages/portlists/Dialog.jsx
index 10ea640630..471dbdfd4b 100644
--- a/src/web/pages/portlists/Dialog.jsx
+++ b/src/web/pages/portlists/Dialog.jsx
@@ -18,7 +18,6 @@ import useTranslation from 'web/hooks/useTranslation';
 import PortRangesTable from 'web/pages/portlists/portrangestable';
 import PropTypes from 'web/utils/PropTypes';
 
-
 const FROM_FILE = YES_VALUE;
 const NOT_FROM_FILE = NO_VALUE;
 
@@ -44,6 +43,7 @@ const PortListsDialog = ({
   const newRangeIcon = (
     <div>
       <NewIcon
+        data-testid="new-port-range"
         title={_('Add Port Range')}
         value={port_list}
         onClick={onNewPortRangeClick}

From 92c1bb105240c02ea1bb8b216a78470bbde0314f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Wed, 12 Mar 2025 14:14:39 +0100
Subject: [PATCH 2/5] Fix: Don't crash port list pages on user interaction

Bind handleInteraction function for port range component to allow access
to this.
---
 src/web/pages/portlists/Component.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/web/pages/portlists/Component.jsx b/src/web/pages/portlists/Component.jsx
index 89a0e0e641..9163c818a4 100644
--- a/src/web/pages/portlists/Component.jsx
+++ b/src/web/pages/portlists/Component.jsx
@@ -42,6 +42,7 @@ class PortListComponent extends React.Component {
     this.handleSavePortRange = this.handleSavePortRange.bind(this);
     this.handleTmpAddPortRange = this.handleTmpAddPortRange.bind(this);
     this.handleTmpDeletePortRange = this.handleTmpDeletePortRange.bind(this);
+    this.handleInteraction = this.handleInteraction.bind(this);
   }
 
   openPortListDialog(entity) {

From 138d4792d91ed40d2229855f67fc9fb3f2e9d88e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Wed, 12 Mar 2025 14:16:30 +0100
Subject: [PATCH 3/5] fix: Don't silently discard port list save errors

Forward port list save errors to the onSaveError handler.
---
 src/web/pages/portlists/Component.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/web/pages/portlists/Component.jsx b/src/web/pages/portlists/Component.jsx
index 9163c818a4..eb36965c3e 100644
--- a/src/web/pages/portlists/Component.jsx
+++ b/src/web/pages/portlists/Component.jsx
@@ -182,7 +182,8 @@ class PortListComponent extends React.Component {
     ];
     return Promise.all(promises)
       .then(() => save(data))
-      .then(() => this.closePortListDialog());
+      .then(() => this.closePortListDialog())
+      .catch(error => this.props.onSaveError(error));
   }
 
   handleTmpAddPortRange(values) {

From b7a66d19bb43fe54c62580878524a81fca58d1a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Wed, 12 Mar 2025 14:17:29 +0100
Subject: [PATCH 4/5] test: Add tests for the port list component

Ensure the port list component works as expected.
---
 .../portlists/__tests__/Component.test.jsx    | 560 ++++++++++++++++++
 1 file changed, 560 insertions(+)
 create mode 100644 src/web/pages/portlists/__tests__/Component.test.jsx

diff --git a/src/web/pages/portlists/__tests__/Component.test.jsx b/src/web/pages/portlists/__tests__/Component.test.jsx
new file mode 100644
index 0000000000..15fc3631f6
--- /dev/null
+++ b/src/web/pages/portlists/__tests__/Component.test.jsx
@@ -0,0 +1,560 @@
+/* SPDX-FileCopyrightText: 2025 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, test, expect, testing} from '@gsa/testing';
+import PortList from 'gmp/models/portlist';
+import Button from 'web/components/form/Button';
+import {
+  changeInputValue,
+  getDialogCloseButton,
+  getDialogSaveButton,
+  queryDialogs,
+} from 'web/components/testing';
+import {currentSettingsDefaultResponse} from 'web/pages/__mocks__/CurrentSettings';
+import PortListComponent from 'web/pages/portlists/Component';
+import {
+  rendererWith,
+  wait,
+  screen,
+  fireEvent,
+  getByName,
+} from 'web/utils/Testing';
+
+const getPortListResponse = {
+  data: PortList.fromElement({id: '123', name: 'foo'}),
+};
+const currentSettings = testing
+  .fn()
+  .mockResolvedValue(currentSettingsDefaultResponse);
+const getPortList = testing.fn().mockResolvedValue(getPortListResponse);
+
+describe('Port List Component tests', () => {
+  test('should render without crashing', () => {
+    const gmp = {
+      portlist: {
+        get: getPortList,
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const {render} = rendererWith({gmp});
+    const {element} = render(
+      <PortListComponent onInteraction={onInteraction}>
+        {() => null}
+      </PortListComponent>,
+    );
+    expect(element).toBeInTheDocument();
+  });
+
+  test('should open and close PortListDialog', () => {
+    const gmp = {
+      portlist: {
+        get: getPortList,
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent onInteraction={onInteraction}>
+        {({create}) => <Button data-testid="open" onClick={create} />}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('open'));
+    expect(screen.getByText('New Port List')).toBeInTheDocument();
+
+    const cancelButton = getDialogCloseButton();
+    fireEvent.click(cancelButton);
+    expect(screen.queryByText('New Port List')).not.toBeInTheDocument();
+  });
+
+  test('should open and close ImportPortListDialog', () => {
+    const gmp = {
+      portlist: {
+        get: getPortList,
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent onInteraction={onInteraction}>
+        {({import: openImport}) => (
+          <Button data-testid="import" onClick={openImport} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('import'));
+    expect(screen.getByText('Import Port List')).toBeInTheDocument();
+
+    const cancelButton = getDialogCloseButton();
+    fireEvent.click(cancelButton);
+    expect(screen.queryByText('Import Port List')).not.toBeInTheDocument();
+  });
+
+  test('should open and close PortRangeDialog', async () => {
+    const gmp = {
+      portlist: {
+        get: getPortList,
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent onInteraction={onInteraction}>
+        {({edit}) => (
+          <Button data-testid="edit" onClick={() => edit({id: 123})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('edit'));
+    await wait();
+    expect(screen.getByText('Edit Port List foo')).toBeInTheDocument();
+
+    const newPortRangeIcon = screen.getByTestId('new-port-range');
+    fireEvent.click(newPortRangeIcon);
+    expect(screen.getByText('New Port Range')).toBeInTheDocument();
+
+    const portRangeDialog = queryDialogs()[1];
+    const cancelPortRangeButton = getDialogCloseButton(portRangeDialog);
+    fireEvent.click(cancelPortRangeButton);
+    expect(screen.queryByText('New Port Range')).not.toBeInTheDocument();
+
+    const cancelPortListButton = getDialogCloseButton();
+    fireEvent.click(cancelPortListButton);
+    expect(screen.queryByText('Edit Port List foo')).not.toBeInTheDocument();
+  });
+
+  test('should allow creating a new port list', async () => {
+    const newPortList = PortList.fromElement({id: '123'});
+    const gmp = {
+      portlist: {
+        create: testing.fn().mockResolvedValue(newPortList),
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const onCreated = testing.fn();
+    const onCreateError = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onCreateError={onCreateError}
+        onCreated={onCreated}
+        onInteraction={onInteraction}
+      >
+        {({create}) => <Button data-testid="open" onClick={create} />}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('open'));
+    expect(screen.getByText('New Port List')).toBeInTheDocument();
+
+    const saveButton = getDialogSaveButton();
+    fireEvent.click(saveButton);
+    await wait();
+    expect(screen.queryByText('New Port List')).not.toBeInTheDocument();
+    expect(onCreated).toHaveBeenCalledWith(newPortList);
+    expect(onCreateError).not.toHaveBeenCalled();
+    expect(onInteraction).toHaveBeenCalled();
+  });
+
+  test('should call onCreateError if creating a new port list fails', async () => {
+    const error = new Error('error');
+    const gmp = {
+      portlist: {
+        create: testing.fn().mockRejectedValue(error),
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const onCreated = testing.fn();
+    const onCreateError = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onCreateError={onCreateError}
+        onCreated={onCreated}
+        onInteraction={onInteraction}
+      >
+        {({create}) => <Button data-testid="open" onClick={create} />}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('open'));
+    await wait();
+    expect(screen.getByText('New Port List')).toBeInTheDocument();
+
+    const saveButton = getDialogSaveButton();
+    fireEvent.click(saveButton);
+    await wait();
+    expect(screen.queryByText('New Port List')).not.toBeInTheDocument();
+    expect(onCreated).not.toHaveBeenCalled();
+    expect(onCreateError).toHaveBeenCalledWith(error);
+    expect(onInteraction).toHaveBeenCalled();
+  });
+
+  test('should allow editing a port list', async () => {
+    const portList = PortList.fromElement({id: '123', name: 'foo'});
+    const portListResponse = {data: portList};
+    const gmp = {
+      portlist: {
+        get: testing.fn().mockResolvedValue(portListResponse),
+        save: testing.fn().mockResolvedValue(portList),
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const onSaved = testing.fn();
+    const onSaveError = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onInteraction={onInteraction}
+        onSaveError={onSaveError}
+        onSaved={onSaved}
+      >
+        {({edit}) => (
+          <Button data-testid="open" onClick={() => edit({id: 123})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('open'));
+    await wait();
+    expect(screen.getByText('Edit Port List foo')).toBeInTheDocument();
+
+    const saveButton = getDialogSaveButton();
+    fireEvent.click(saveButton);
+    await wait();
+    expect(screen.queryByText('Edit Port List foo')).not.toBeInTheDocument();
+    expect(onSaved).toHaveBeenCalledWith(portList);
+    expect(onSaveError).not.toHaveBeenCalled();
+    expect(onInteraction).toHaveBeenCalled();
+  });
+
+  test('should allow editing a port list to add a port range', async () => {
+    const portList = PortList.fromElement({id: '123', name: 'foo'});
+    const portListResponse = {data: portList};
+    const createPortRange = testing.fn().mockResolvedValue({data: {id: 1234}});
+    const save = testing.fn().mockResolvedValue(portList);
+    const gmp = {
+      portlist: {
+        get: testing.fn().mockResolvedValue(portListResponse),
+        save,
+        createPortRange,
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const onSaved = testing.fn();
+    const onSaveError = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onInteraction={onInteraction}
+        onSaveError={onSaveError}
+        onSaved={onSaved}
+      >
+        {({edit}) => (
+          <Button data-testid="open" onClick={() => edit({id: 123})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('open'));
+    await wait();
+    expect(screen.getByText('Edit Port List foo')).toBeInTheDocument();
+
+    const openPortRangeDialog = screen.getByTestId('new-port-range');
+    fireEvent.click(openPortRangeDialog);
+    await wait();
+    expect(screen.getByText('New Port Range')).toBeInTheDocument();
+    const dialogs = queryDialogs();
+    const portListDialog = dialogs[0];
+    const portRangeDialog = dialogs[1];
+
+    const portRangeStart = getByName(portRangeDialog, 'port_range_start');
+    changeInputValue(portRangeStart, '1');
+
+    const portRangeEnd = getByName(portRangeDialog, 'port_range_end');
+    changeInputValue(portRangeEnd, '20');
+
+    const savePortRangeButton = getDialogSaveButton(portRangeDialog);
+    fireEvent.click(savePortRangeButton);
+    await wait();
+    expect(screen.queryByText('New Port Range')).not.toBeInTheDocument();
+
+    const savePortListButton = getDialogSaveButton(portListDialog);
+    fireEvent.click(savePortListButton);
+    await wait();
+    expect(createPortRange).toHaveBeenCalledWith({
+      end: 20,
+      entityType: 'portrange',
+      id: '123',
+      start: 1,
+      isTmp: true,
+      port_range_end: 20,
+      port_range_start: 1,
+      port_type: 'tcp',
+      protocol_type: 'tcp',
+    });
+    expect(save).toHaveBeenCalledWith({
+      comment: '',
+      from_file: 0,
+      id: '123',
+      name: 'foo',
+      port_range: 'T:1-5,7,9,U:1-3,5,7,9',
+      port_ranges: [
+        {
+          end: 20,
+          id: 1234,
+          start: 1,
+          entityType: 'portrange',
+          isTmp: false,
+          protocol_type: 'tcp',
+        },
+      ],
+    });
+    expect(onSaved).toHaveBeenCalledWith(portList);
+    expect(onSaveError).not.toHaveBeenCalled();
+    expect(onInteraction).toHaveBeenCalled();
+    expect(screen.queryByText('Edit Port List foo')).not.toBeInTheDocument();
+  });
+
+  test('should allow editing a port list and delete a port range', async () => {
+    const portList = PortList.fromElement({
+      id: '123',
+      name: 'foo',
+      port_ranges: {
+        port_range: [
+          {
+            id: '123',
+            start: '1',
+            end: '2',
+            type: 'tcp',
+            comment: 'foo',
+          },
+        ],
+      },
+    });
+    const portListResponse = {data: portList};
+    const save = testing.fn().mockResolvedValue(portList);
+    const deletePortRange = testing.fn().mockResolvedValue(portListResponse);
+    const gmp = {
+      portlist: {
+        get: testing.fn().mockResolvedValue(portListResponse),
+        save,
+        deletePortRange,
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const onSaved = testing.fn();
+    const onSaveError = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onInteraction={onInteraction}
+        onSaveError={onSaveError}
+        onSaved={onSaved}
+      >
+        {({edit}) => (
+          <Button data-testid="open" onClick={() => edit({id: 123})} />
+        )}
+      </PortListComponent>,
+    );
+    fireEvent.click(screen.getByTestId('open'));
+    await wait();
+    expect(screen.getByText('Edit Port List foo')).toBeInTheDocument();
+
+    const deletePortRangeIcon = screen.queryAllByTestId('delete-icon')[0];
+    fireEvent.click(deletePortRangeIcon);
+
+    const savePortListButton = getDialogSaveButton();
+    fireEvent.click(savePortListButton);
+    await wait();
+    expect(deletePortRange).toHaveBeenCalledWith(portList.port_ranges[0]);
+    expect(onSaveError).not.toHaveBeenCalled();
+
+    expect(save).toHaveBeenCalledWith({
+      comment: '',
+      from_file: 0,
+      id: '123',
+      name: 'foo',
+      port_range: 'T:1-5,7,9,U:1-3,5,7,9',
+      port_ranges: [],
+    });
+    expect(onSaved).toHaveBeenCalledWith(portList);
+    expect(onInteraction).toHaveBeenCalled();
+    expect(screen.queryByText('Edit Port List foo')).not.toBeInTheDocument();
+  });
+
+  test('should call onSaveError if saving a port list fails', async () => {
+    const portList = PortList.fromElement({id: '123', name: 'foo'});
+    const portListResponse = {data: portList};
+    const error = new Error('error');
+    const gmp = {
+      portlist: {
+        get: testing.fn().mockResolvedValue(portListResponse),
+        save: testing.fn().mockRejectedValue(error),
+      },
+      user: {currentSettings},
+    };
+    const onInteraction = testing.fn();
+    const onSaved = testing.fn();
+    const onSaveError = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onInteraction={onInteraction}
+        onSaveError={onSaveError}
+        onSaved={onSaved}
+      >
+        {({edit}) => (
+          <Button data-testid="open" onClick={() => edit({id: 123})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('open'));
+    await wait();
+    expect(screen.getByText('Edit Port List foo')).toBeInTheDocument();
+
+    const saveButton = getDialogSaveButton();
+    fireEvent.click(saveButton);
+    await wait();
+    expect(screen.queryByText('Edit Port List foo')).not.toBeInTheDocument();
+    expect(onSaved).not.toHaveBeenCalled();
+    expect(onSaveError).toHaveBeenCalledWith(error);
+    expect(onInteraction).toHaveBeenCalled();
+  });
+
+  test('should allow cloning a port list', async () => {
+    const cloned = PortList.fromElement({id: '123'});
+    const gmp = {
+      portlist: {
+        clone: testing.fn().mockResolvedValue(cloned),
+      },
+      user: {currentSettings},
+    };
+    const onCloned = testing.fn();
+    const onCloneError = testing.fn();
+    const onInteraction = testing.fn();
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onCloneError={onCloneError}
+        onCloned={onCloned}
+        onInteraction={onInteraction}
+      >
+        {({clone}) => (
+          <Button data-testid="button" onClick={() => clone({id: '123'})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('button'));
+    await wait();
+    expect(onCloned).toHaveBeenCalledWith(cloned);
+    expect(onCloneError).not.toHaveBeenCalled();
+    expect(onInteraction).toHaveBeenCalledOnce();
+  });
+
+  test('should call onCloneError when cloning a port list fails', async () => {
+    const error = new Error('error');
+    const onCloned = testing.fn();
+    const onCloneError = testing.fn();
+    const onInteraction = testing.fn();
+    const gmp = {
+      portlist: {
+        clone: testing.fn().mockRejectedValue(error),
+      },
+      user: {currentSettings},
+    };
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onCloneError={onCloneError}
+        onCloned={onCloned}
+        onInteraction={onInteraction}
+      >
+        {({clone}) => (
+          <Button data-testid="button" onClick={() => clone({id: '123'})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('button'));
+    await wait();
+    expect(onCloneError).toHaveBeenCalledWith(error);
+    expect(onCloned).not.toHaveBeenCalled();
+    expect(onInteraction).toHaveBeenCalledOnce();
+  });
+
+  test('should allow deleting a port list', async () => {
+    const deleted = {id: '123'};
+    const onDeleted = testing.fn();
+    const onDeleteError = testing.fn();
+    const onInteraction = testing.fn();
+    const gmp = {
+      portlist: {
+        delete: testing.fn().mockResolvedValue(deleted),
+      },
+      user: {currentSettings},
+    };
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onDeleteError={onDeleteError}
+        onDeleted={onDeleted}
+        onInteraction={onInteraction}
+      >
+        {({delete: del}) => (
+          <Button data-testid="button" onClick={() => del({id: '123'})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('button'));
+    await wait();
+    expect(onDeleted).toHaveBeenCalledOnce();
+    expect(onDeleteError).not.toHaveBeenCalled();
+    expect(onInteraction).toHaveBeenCalledOnce();
+  });
+
+  test('should call onDeleteError when deleting a port list fails', async () => {
+    const error = new Error('error');
+    const onDeleted = testing.fn();
+    const onDeleteError = testing.fn();
+    const onInteraction = testing.fn();
+    const gmp = {
+      portlist: {delete: testing.fn().mockRejectedValue(error)},
+      user: {currentSettings},
+    };
+    const {render} = rendererWith({gmp});
+    render(
+      <PortListComponent
+        onDeleteError={onDeleteError}
+        onDeleted={onDeleted}
+        onInteraction={onInteraction}
+      >
+        {({delete: del}) => (
+          <Button data-testid="button" onClick={() => del({id: '123'})} />
+        )}
+      </PortListComponent>,
+    );
+
+    fireEvent.click(screen.getByTestId('button'));
+    await wait();
+    expect(onDeleteError).toHaveBeenCalledWith(error);
+    expect(onDeleted).not.toHaveBeenCalled();
+    expect(onInteraction).toHaveBeenCalledOnce();
+  });
+});

From f5d16008ac4f045059c11ecf6ed532621574b647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Wed, 12 Mar 2025 14:21:43 +0100
Subject: [PATCH 5/5] change: Rename port list component js module

We have several Component modules therefore use PortListComponent as the
js module name to be more explicit.
---
 src/web/pages/portlists/DetailsPage.jsx                         | 2 +-
 src/web/pages/portlists/ListPage.jsx                            | 2 +-
 .../pages/portlists/{Component.jsx => PortListComponent.jsx}    | 0
 .../{Component.test.jsx => PortListComponent.test.jsx}          | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/web/pages/portlists/{Component.jsx => PortListComponent.jsx} (100%)
 rename src/web/pages/portlists/__tests__/{Component.test.jsx => PortListComponent.test.jsx} (99%)

diff --git a/src/web/pages/portlists/DetailsPage.jsx b/src/web/pages/portlists/DetailsPage.jsx
index cd4a480f58..46b1cdabf4 100644
--- a/src/web/pages/portlists/DetailsPage.jsx
+++ b/src/web/pages/portlists/DetailsPage.jsx
@@ -31,8 +31,8 @@ import EntityTags from 'web/entity/Tags';
 import withEntityContainer, {
   permissionsResourceFilter,
 } from 'web/entity/withEntityContainer';
-import PortListComponent from 'web/pages/portlists/Component';
 import PortListDetails from 'web/pages/portlists/Details';
+import PortListComponent from 'web/pages/portlists/PortListComponent';
 import PortRangesTable from 'web/pages/portlists/portrangestable';
 import {
   selector as permissionsSelector,
diff --git a/src/web/pages/portlists/ListPage.jsx b/src/web/pages/portlists/ListPage.jsx
index 0a62e3a255..6206c9ee83 100644
--- a/src/web/pages/portlists/ListPage.jsx
+++ b/src/web/pages/portlists/ListPage.jsx
@@ -31,8 +31,8 @@ import useSelection from 'web/hooks/useSelection';
 import useShallowEqualSelector from 'web/hooks/useShallowEqualSelector';
 import useTranslation from 'web/hooks/useTranslation';
 import useUserSessionTimeout from 'web/hooks/useUserSessionTimeout';
-import PortListComponent from 'web/pages/portlists/Component';
 import PortListsFilterDialog from 'web/pages/portlists/FilterDialog';
+import PortListComponent from 'web/pages/portlists/PortListComponent';
 import PortListsTable from 'web/pages/portlists/Table';
 import {loadEntities, selector} from 'web/store/entities/portlists';
 import {getUserSettingsDefaults} from 'web/store/usersettings/defaults/selectors';
diff --git a/src/web/pages/portlists/Component.jsx b/src/web/pages/portlists/PortListComponent.jsx
similarity index 100%
rename from src/web/pages/portlists/Component.jsx
rename to src/web/pages/portlists/PortListComponent.jsx
diff --git a/src/web/pages/portlists/__tests__/Component.test.jsx b/src/web/pages/portlists/__tests__/PortListComponent.test.jsx
similarity index 99%
rename from src/web/pages/portlists/__tests__/Component.test.jsx
rename to src/web/pages/portlists/__tests__/PortListComponent.test.jsx
index 15fc3631f6..1c65e042ac 100644
--- a/src/web/pages/portlists/__tests__/Component.test.jsx
+++ b/src/web/pages/portlists/__tests__/PortListComponent.test.jsx
@@ -13,7 +13,7 @@ import {
   queryDialogs,
 } from 'web/components/testing';
 import {currentSettingsDefaultResponse} from 'web/pages/__mocks__/CurrentSettings';
-import PortListComponent from 'web/pages/portlists/Component';
+import PortListComponent from 'web/pages/portlists/PortListComponent';
 import {
   rendererWith,
   wait,