fix: [Multi-Factor Administrator] group suggester not working - EXO-6…

…7960

Before this change, when you open the group management drawer in protected access to the platform, the group suggester is not displayed and cannot delete old saved groups. To resolve this issue, replace exo-group-suggester with exo-identity-suggester. After this change, the group suggester displays spaces and is able to remove old groups saved in the list.

webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/MultifactorAuthenticationComponent.vue

@@ -65,7 +65,7 @@
                   icon
                   outlined
                   small
-                  @click="$root.$emit('protectedGroupsUsers', protectedGroupsUsers)">
+                  @click="$root.$emit('protectedGroupsUsers', selectedGroups)">
                   <i class="uiIconEdit uiIconLightBlue pb-2"></i>
                 </v-btn>
               </template>
@@ -81,7 +81,7 @@
                 column>
                 <v-row no-gutters>
                   <v-chip
-                    v-for="group in selectedGroups"
+                    v-for="group in selectedGroupsLabels"
                     :key="group"
                     outlined
                     class="my-1">
@@ -221,7 +221,7 @@
   </v-app>
 </template>
 <script>
-import {changeMfaFeatureActivation, getRevocationRequests, updateRevocationRequest, getCurrentMfaSystem, changeMfaSytem, getProtectedGroups,getAvailableMfaSystem} from '../multiFactorServices';
+import {changeMfaFeatureActivation, getRevocationRequests, updateRevocationRequest, getCurrentMfaSystem, changeMfaSytem, getProtectedGroups,getAvailableMfaSystem, getGroups} from '../multiFactorServices';
 export default {
   data: () => ({
     isMultifacorAuthenticationEnabled: true,
@@ -235,6 +235,7 @@ export default {
     currentMfaSystemHelpContent: null,
     panel: [0, 1],
     panel1: [0, 1],
+    selectedGroupsLabels: [],
   }),
   mounted() {
     this.$nextTick().then(() => this.$root.$emit('application-loaded'));
@@ -246,8 +247,28 @@ export default {
     this.getCurrentMfaSystem();
     this.getAvailableMfaSystems();
     this.getProtectedGroups();
+    this.getSelectedGroupsLabels();
+  },
+  watch: {
+    selectedGroups() {
+      this.getSelectedGroupsLabels();
+    }
   },
   methods: {
+    getSelectedGroupsLabels() {
+      const labels= [];
+      this.selectedGroups.forEach(label => {
+        if (label) {
+          getGroups(label).then(data => {
+            for (const group of data.entities) {
+              if (label === group.groupName || label === group.remoteId){
+                labels.push(group.label);
+              }
+            }
+          });
+          this.selectedGroupsLabels = labels;
+        }});
+    },
     switchAuthenticationStatus() {
       changeMfaFeatureActivation(!this.isMultifacorAuthenticationEnabled);
       this.isMultifacorAuthenticationEnabled = !this.isMultifacorAuthenticationEnabled;

webapps/src/main/webapp/vue-apps/multi-factor-authentication/components/ProtectedGroupsUsersDrawer.vue

@@ -9,12 +9,18 @@
     </template>
     <template slot="content">
       <v-flex xs12 class="pa-3">
-        <exo-group-suggester
+        <exo-identity-suggester
           v-model="groups"
-          :options="suggesterOptions"
-          :bound-groups="groups"
-          :source-providers="[findGroups]"
-          :placeholder="$t('authentication.multifactor.protected.groups.users.placeholder')" />
+          :ignore-items="ignoreItems"
+          :labels="labels"
+          :group-type="groupType"
+          all-groups-for-admin
+          multiple
+          include-groups
+          chips
+          danse
+          flat
+          required />
       </v-flex>
     </template>
     <template slot="footer">
@@ -39,30 +45,18 @@
 import {getGroups, getProtectedGroups, saveProtectedGroups} from '../multiFactorServices';
 export default {
   data () {
-    const component = this;
     return {
       drawer: false,
       groups: [],
       selectedGroups: [],
+      ignoreItems: [],
       searchLoading: false,
-      suggesterOptions: {
-        type: 'tag',
-        plugins: ['remove_button', 'restore_on_backspace'],
-        create: false,
-        createOnBlur: false,
-        highlight: false,
-        openOnFocus: false,
-        valueField: 'value',
-        labelField: 'text',
-        searchField: ['text'],
-        closeAfterSelect: false,
-        dropdownParent: 'body',
-        hideSelected: false,
-        fillSelectize: true,
-        renderMenuItem(item, escape) {
-          return component.renderMenuItem(item, escape);
-        },
-        sortField: [{field: 'order'}, {field: '$score'}],
+      groupType: 'GROUP',
+      labels: { 
+        label: '',
+        placeholder: this.$t('authentication.multifactor.protected.groups.users.placeholder'),  
+        searchPlaceholder: '',
+        noDataLabel: this.$t('authentication.multifactor.protected.noData')
       }
     };
   },
@@ -77,18 +71,49 @@ export default {
   },
   created() {
     this.$root.$on('protectedGroupsUsers', this.protectedGroupsUsers);
-    this.getProtectedGroups();
+    this.ignoreItems = this.groups.map(group =>({id: `${group.remoteId}`}));
   },
   methods: {
-    protectedGroupsUsers() {
+    protectedGroupsUsers(selectedGroups) {
+      this.groups = [];
+      this.selectedGroups = selectedGroups;
+      this.selectedGroups.forEach(remoteId => {
+        if (remoteId) {
+          getGroups(remoteId).then(data => {
+            for (const group of data.entities) {
+              if (remoteId === group.groupName || remoteId === group.remoteId){
+                this.groups.push({
+                  displayName: group.label,
+                  id: `group:${group.groupName}`,
+                  profile: {
+                    avatarUrl: null,
+                    fullName: group.label,
+                    id: group.groupName
+                  },
+                  providerId: 'group',
+                  remoteId: group.groupName,
+                  spaceId: null,                  
+                });
+              }
+            }
+          });
+        }});
       this.drawer = true;
     },
     cancel() {
       this.drawer = false;
     },
     save() {
-      saveProtectedGroups(this.groups.join(','));
-      this.$root.$emit('protectedGroupsList', this.groups);
+      const groups=[];
+      this.groups.forEach(group => {
+        if (group.remoteId){
+          groups.push(group.remoteId);
+        } else {
+          groups.push(group.profile.id);
+        }
+      });
+      saveProtectedGroups(groups.join(','));
+      this.$root.$emit('protectedGroupsList', groups);
       this.$refs.protectedGroupsUsersDrawer.close();
     },
     getProtectedGroups() {
@@ -97,29 +122,20 @@ export default {
           this.groups.push(group);
         }
       });
-    },
-    findGroups (query, callback) {
-      if (!query.length) {
-        return callback();
-      }
-      getGroups(query).then(data => {
-        const groups = [];
-        for (const group of data.entities) {
-          groups.push({
-            avatarUrl: null,
-            text: group.label,
-            value: group.id,
-            type: 'group'
-          });
-        }
-        callback(groups);
+      const groups= [];
+      this.selectedGroups.forEach(data => {
+        groups.push(getGroups(data).then(data => {
+          for (const group of data.entities) {
+            groups.push({profile: {
+              avatarUrl: null,
+              fullName: group.label,
+              id: group.id,
+              type: 'group'}
+            });
+          }
+        }));
       });
     },
-    renderMenuItem (item, escape) {
-      return `
-        <div class="item" title="${escape(item.value)}" rel="tooltip" data-placement="bottom">${escape(item.value)}</div>
-      `;
-    },
   },
 };
 </script>