[MS] Update batch sharing in WorkspaceSharingModal

client/src/locales/en-US.json

@@ -348,6 +348,7 @@
             "reader": "Reader",
             "buttonSelect": "Multiple selection",
             "buttonFinish": "Finish",
+            "counter": "{count} user selected | {count} users selected",
             "chooseRole": "Choose a role",
             "noChanges": "Selected members were already {role}.",
             "someFailed": "Some role assignments failed.",

client/src/locales/fr-FR.json

@@ -348,6 +348,7 @@
             "reader": "Lecteur",
             "buttonSelect": "Sélection multiple",
             "buttonFinish": "Terminer",
+            "counter": "{count} utilisateur sélectionné | {count} utilisateurs sélectionnés",
             "chooseRole": "Choisir un rôle",
             "noChanges": "Les membres sélectionnés étaient déjà {role}.",
             "someFailed": "Certaines assignations de rôle ont échoué.",

client/src/theme/components/inputs.scss

@@ -5,11 +5,17 @@
   bottom: -1.5rem;
 }
 
-// Sharing Modal : remove currentUser icon in dropdown
+// Workspace Sharing Modal
 .current-user {
+  // remove currentUser icon in dropdown
   .ms-dropdown-icon {
     display: none;
   }
+
+  // set opacity to 1 for multiple selection
+  &.workspace-user-role .button-disabled {
+    opacity: 1;
+  }
 }
 
 .saas-login-content__input .input-content,

client/src/views/workspaces/WorkspaceSharingModal.vue

@@ -25,9 +25,14 @@
           class="modal-head-content__search"
           v-model="search"
           :placeholder="'WorkspaceSharing.searchPlaceholder'"
-          @change="updateSelectedUsers()"
         />
         <div class="modal-head-content-right">
+          <ion-text
+            class="selected-counter"
+            v-show="showCheckboxes && selectedUsers.length > 0"
+          >
+            {{ $msTranslate({ key: 'WorkspaceSharing.batchSharing.counter', data: { count: selectedUsers.length } }) }}
+          </ion-text>
           <ion-text
             id="batch-activate-button"
             @click="onBatchSharingActivate()"
@@ -42,7 +47,7 @@
             ref="dropdownRef"
             class="dropdown"
             :options="options"
-            :disabled="!someUserSelected"
+            :disabled="selectedUsers.length === 0"
             :label="'WorkspaceSharing.batchSharing.chooseRole'"
             :appearance="MsAppearance.Outline"
             @change="onBatchRoleChange($event.option)"
@@ -126,7 +131,8 @@
               />
               <workspace-user-role
                 class="workspace-user-role"
-                :disabled="isSelectDisabled(entry.role)"
+                :class="showCheckboxes ? 'current-user' : ''"
+                :disabled="isSelectDisabled(entry.role) || showCheckboxes"
                 :user="entry.user"
                 :role="entry.role"
                 :client-profile="ownProfile"
@@ -158,7 +164,8 @@
               />
               <workspace-user-role
                 class="workspace-user-role"
-                :disabled="isSelectDisabled(entry.role)"
+                :class="showCheckboxes ? 'current-user' : ''"
+                :disabled="isSelectDisabled(entry.role) || showCheckboxes"
                 :user="entry.user"
                 :role="entry.role"
                 :client-profile="ownProfile"
@@ -231,16 +238,6 @@ const filteredUserRoles = computed(() => {
   });
 });
 
-const filteredOutUserRoles = computed(() => {
-  const searchString = search.value.toLocaleLowerCase();
-  return userRoles.value.filter((userRole: UserRole) => {
-    return (
-      !userRole.user.humanHandle.email.toLocaleLowerCase().includes(searchString) &&
-      !userRole.user.humanHandle.label.toLocaleLowerCase().includes(searchString)
-    );
-  });
-});
-
 const filteredSharedUserRoles = computed(() => {
   return filteredUserRoles.value
     .filter((userRole: UserRole) => userRole.role !== null)
@@ -253,9 +250,8 @@ const filteredNotSharedUserRoles = computed(() => {
     .sort((item1, item2) => item1.user.humanHandle.label.localeCompare(item2.user.humanHandle.label));
 });
 
-const selectedUsers = computed(() => filteredUserRoles.value.filter((user) => user.isSelected === true));
+const selectedUsers = computed(() => userRoles.value.filter((user) => user.isSelected === true));
 const countSharedUsers = computed(() => filteredSharedUserRoles.value.length + (clientInfo.value ? 1 : 0));
-const someUserSelected = computed(() => filteredUserRoles.value.some((user) => user.isSelected === true));
 const selectableFilteredMembers = computed(() => {
   return filteredSharedUserRoles.value.filter((user) => user.role && canSelectUser(user.user.profile, user.role));
 });
@@ -268,6 +264,7 @@ const batchSharingEnabled = computed(() => {
     filteredNotSharedUserRoles.value.length + selectableFilteredMembers.value.length > 1
   );
 });
+
 function currentUserMatchSearch(): boolean {
   const searchString = search.value.toLocaleLowerCase();
   if (!clientInfo.value) {
@@ -296,15 +293,6 @@ function isSelectDisabled(role: WorkspaceRole | null): boolean {
   return false;
 }
 
-function updateSelectedUsers(): void {
-  if (!showCheckboxes.value) {
-    return;
-  }
-  for (const userRole of filteredOutUserRoles.value) {
-    userRole.isSelected = false;
-  }
-}
-
 async function onBatchSharingActivate(): Promise<void> {
   if (showCheckboxes.value === true) {
     for (const user of userRoles.value) {
@@ -621,6 +609,13 @@ async function onBatchRoleChange(newRoleOption: MsOption): Promise<void> {
       }
     }
   }
+
+  .selected-counter {
+    color: var(--parsec-color-light-secondary-grey);
+    font-size: 0.9em;
+    margin: auto;
+    text-align: center;
+  }
 }
 
 #profile-assign-info {

client/tests/e2e/specs/workspace_sharing.spec.ts

@@ -148,17 +148,6 @@ msTest('Batch workspace sharing', async ({ workspaceSharingModal }) => {
   await expect(batchDropdown).not.toBeVisible();
   await expect(activateBatchButton).toContainText('Multiple selection');
   await expect(membersCheckbox).not.toBeVisible();
-
-  // Check user is unchecked when filtered out
-  const searchInput = content.locator('.ms-search-input');
-
-  await activateBatchButton.click();
-  await content.locator('#member-checkbox').nth(0).click();
-  await content.locator('#suggested-checkbox').nth(0).click();
-  await expect(content.locator('#suggested-checkbox').nth(0)).toHaveState('checked');
-  await fillIonInput(searchInput, 'or');
-  await searchInput.getByRole('button', { name: 'reset' }).click();
-  await expect(content.locator('#suggested-checkbox').nth(0)).toHaveState('unchecked');
 });
 
 msTest('Batch workspace sharing hidden when reader', async ({ connected }) => {