fix: remove share avatar click handler in files table

packages/design-system/src/components/OcAvatars/OcAvatars.vue

@@ -3,6 +3,7 @@
     <span
       ref="avatarsRef"
       v-oc-tooltip="tooltip"
+      role="img"
       class="oc-avatars inline-flex w-fit flex-nowrap flex-row"
       :aria-label="avatarsAriaLabel"
       :class="{

packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie +3"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
+exports[`OcAvatars > displays tooltip 1`] = `"<span><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie +3"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
 
-exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie, John Richards Emperor of long names +2"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
+exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie, John Richards Emperor of long names +2"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
 
-exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie, John Richards Emperor of long names, link 0, link 1"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="sr-only">List of users</span></span>"`;
+exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie, John Richards Emperor of long names, link 0, link 1"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="sr-only">List of users</span></span>"`;

packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap

@@ -4,28 +4,28 @@ exports[`ActivitiesPanel > should render a list of activities when data is prese
 "<div class="ml-2">
   <ul class="oc-list oc-timeline">
     <li>
-      <div class="flex items-center"><span class="mr-1 inline-flex"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Marie Curie"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
+      <div class="flex items-center"><span class="mr-1 inline-flex"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Marie Curie"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Marie Curie</strong> created <strong>new folder</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2024, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1 inline-flex"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+      <div class="flex items-center"><span class="mr-1 inline-flex"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Albert Einstein</strong> moved <strong>textfile.txt</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2023, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1 inline-flex"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Robert Oppenheimer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials" style="color: white;">RO</span></span>
+      <div class="flex items-center"><span class="mr-1 inline-flex"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Robert Oppenheimer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials" style="color: white;">RO</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Robert Oppenheimer</strong> deleted <strong>atom plans.pdf</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2022, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1 inline-flex"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Schweitzer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials" style="color: white;">AS</span></span>
+      <div class="flex items-center"><span class="mr-1 inline-flex"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Schweitzer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials" style="color: white;">AS</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Albert Schweitzer</strong> removed <strong>Selfie.png</strong>.</span>

packages/web-pkg/src/components/FilesList/ResourceTable.vue

@@ -200,71 +200,45 @@
       />
     </template>
     <template #sharedBy="{ item }">
-      <oc-button
-        appearance="raw-inverse"
-        no-hover
-        @click.stop="
-          (e: MouseEvent) => {
-            if (interceptModifierClick(e, item)) {
-              return
-            }
-            openSharingSidebar(item, e)
-          }
-        "
+      <oc-avatars
+        class="flex items-center justify-end flex-row flex-nowrap"
+        :is-tooltip-displayed="true"
+        :items="getSharedByAvatarItems(item)"
+        :accessible-description="getSharedByAvatarDescription(item)"
+        hover-effect
       >
-        <oc-avatars
-          class="flex items-center justify-end flex-row flex-nowrap"
-          :is-tooltip-displayed="true"
-          :items="getSharedByAvatarItems(item)"
-          :accessible-description="getSharedByAvatarDescription(item)"
-          hover-effect
-        >
-          <template #userAvatars="{ avatars, width }">
-            <user-avatar
-              v-for="avatar in avatars"
-              :key="avatar.userId"
-              :user-id="avatar.userId"
-              :user-name="avatar.displayName"
-              :width="width"
-            />
-          </template>
-        </oc-avatars>
-      </oc-button>
+        <template #userAvatars="{ avatars, width }">
+          <user-avatar
+            v-for="avatar in avatars"
+            :key="avatar.userId"
+            :user-id="avatar.userId"
+            :user-name="avatar.displayName"
+            :width="width"
+          />
+        </template>
+      </oc-avatars>
     </template>
     <template #sharedWith="{ item }">
-      <oc-button
-        appearance="raw-inverse"
-        class="resource-table-shared-with"
-        no-hover
-        @click.stop="
-          (e: MouseEvent) => {
-            if (interceptModifierClick(e, item)) {
-              return
-            }
-            openSharingSidebar(item, e)
-          }
-        "
+      <oc-avatars
+        class="flex items-center justify-end flex-row flex-nowrap"
+        data-testid="resource-table-shared-with"
+        :items="getSharedWithAvatarItems(item)"
+        :stacked="true"
+        :max-displayed="3"
+        :is-tooltip-displayed="true"
+        :accessible-description="getSharedWithAvatarDescription(item)"
+        hover-effect
       >
-        <oc-avatars
-          class="flex items-center justify-end flex-row flex-nowrap"
-          :items="getSharedWithAvatarItems(item)"
-          :stacked="true"
-          :max-displayed="3"
-          :is-tooltip-displayed="true"
-          :accessible-description="getSharedWithAvatarDescription(item)"
-          hover-effect
-        >
-          <template #userAvatars="{ avatars, width }">
-            <user-avatar
-              v-for="avatar in avatars"
-              :key="avatar.userId"
-              :user-id="avatar.userId"
-              :user-name="avatar.displayName"
-              :width="width"
-            />
-          </template>
-        </oc-avatars>
-      </oc-button>
+        <template #userAvatars="{ avatars, width }">
+          <user-avatar
+            v-for="avatar in avatars"
+            :key="avatar.userId"
+            :user-id="avatar.userId"
+            :user-name="avatar.displayName"
+            :width="width"
+          />
+        </template>
+      </oc-avatars>
     </template>
     <template #actions="{ item }">
       <div v-if="showContextDrop(item)" class="flex items-center justify-end flex-row flex-nowrap">
@@ -1071,18 +1045,6 @@ export default defineComponent({
       }
       this.$emit('fileClick', { space: this.getMatchingSpace(resource), resources: [resource] })
     },
-    openSharingSidebar(file: Resource, event?: MouseEvent) {
-      if (event instanceof MouseEvent && this.interceptModifierClick(event, file)) {
-        return
-      }
-      let panelToOpen: unknown
-      if (file.type === 'space') {
-        panelToOpen = 'space-share'
-      } else {
-        panelToOpen = 'sharing'
-      }
-      eventBus.publish(SideBarEventTopics.openWithPanel, panelToOpen)
-    },
     async fileDragged(file: Resource, event: DragEvent) {
       if (!this.dragDrop) {
         return

packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts

@@ -648,8 +648,10 @@ describe('ResourceTable', () => {
 
       const { wrapper } = getMountedWrapper({ resources: [resource] })
 
-      expect(wrapper.find('.resource-table-shared-with').exists()).toBeTruthy()
-      expect(wrapper.findAll('.resource-table-shared-with .oc-avatar').length).toBe(1)
+      expect(wrapper.find('[data-testid="resource-table-shared-with"]').exists()).toBeTruthy()
+      expect(wrapper.findAll('[data-testid="resource-table-shared-with"] .oc-avatar').length).toBe(
+        1
+      )
     })
   })
   describe('rename action', () => {