From 00d32ffc614f0fb2aa0d3d56b96b7bd863d9087d Mon Sep 17 00:00:00 2001
From: "matias.spinarolli" <matias.spinarolli@portainer.io>
Date: Tue, 13 Jun 2023 18:10:44 -0300
Subject: [PATCH] fix(groups): update endpoint lists on change EE-3841

---
 .../forms/group-form/groupFormController.js      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/portainer/components/forms/group-form/groupFormController.js b/app/portainer/components/forms/group-form/groupFormController.js
index 22dce5741..290901aa1 100644
--- a/app/portainer/components/forms/group-form/groupFormController.js
+++ b/app/portainer/components/forms/group-form/groupFormController.js
@@ -40,10 +40,15 @@ class GroupFormController {
       },
       allowCreateTag: this.Authentication.isAdmin(),
     };
+
+    this.associatedEndpoints = [];
+    this.availableEndpoints = [];
   }
+
   associateEndpoint(endpoint) {
     if (this.pageType === 'create' && !_.includes(this.associatedEndpoints, endpoint)) {
       this.associatedEndpoints.push(endpoint);
+      this.reloadEndpoints();
     } else if (this.pageType === 'edit') {
       this.GroupService.addEndpoint(this.model.Id, endpoint)
         .then(() => {
@@ -57,6 +62,7 @@ class GroupFormController {
   dissociateEndpoint(endpoint) {
     if (this.pageType === 'create') {
       _.remove(this.associatedEndpoints, (item) => item.Id === endpoint.Id);
+      this.reloadEndpoints();
     } else if (this.pageType === 'edit') {
       this.GroupService.removeEndpoint(this.model.Id, endpoint.Id)
         .then(() => {
@@ -67,9 +73,13 @@ class GroupFormController {
     }
   }
 
-  reloadTablesContent() {
+  reloadEndpoints() {
     this.getPaginatedEndpointsByGroup(this.pageType, 'available');
     this.getPaginatedEndpointsByGroup(this.pageType, 'associated');
+  }
+
+  reloadTablesContent() {
+    this.reloadEndpoints();
     this.GroupService.group(this.model.Id).then((data) => {
       this.model = data;
     });
@@ -82,7 +92,9 @@ class GroupFormController {
           const context = this.state.available;
           const start = (context.pageNumber - 1) * context.limit + 1;
           const data = await endpointsByGroup(1, start, context.limit, { search: context.filter });
-          this.availableEndpoints = data.value;
+          this.availableEndpoints = data.value.filter(
+            (availableEndpoint) => !this.associatedEndpoints.map((associatedEndpoint) => associatedEndpoint.Id).includes(availableEndpoint.Id)
+          );
           this.state.available.totalCount = data.totalCount;
         } else if (tableType === 'associated' && pageType === 'edit') {
           const groupId = this.model.Id ? this.model.Id : 1;