From 66d7c2565e221929cfbbd5420aeffde4baedfbfa Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 6 Mar 2024 09:47:04 +0100
Subject: [PATCH] fix: remote share item icon in sharee search

---
 .../unreleased/bugfix-share-sidebar-icons     |  5 ++
 .../components/OcAvatarItem/OcAvatarItem.vue  | 19 +++--
 .../MembersRoleSection.spec.ts.snap           |  2 +-
 .../InviteCollaborator/AutocompleteItem.vue   | 69 +++++++------------
 .../InviteCollaboratorForm.vue                | 34 +--------
 .../AutocompleteItem.spec.ts                  | 41 ++++-------
 6 files changed, 54 insertions(+), 116 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-share-sidebar-icons

diff --git a/changelog/unreleased/bugfix-share-sidebar-icons b/changelog/unreleased/bugfix-share-sidebar-icons
new file mode 100644
index 00000000000..14f87bd4c85
--- /dev/null
+++ b/changelog/unreleased/bugfix-share-sidebar-icons
@@ -0,0 +1,5 @@
+Bugfix: Share sidebar icons
+
+We've fixed a bug where the share invite search dropdown didn't have icons in some cases.
+
+https://github.com/owncloud/web/pull/10551
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index 6a05cd72583..fa9282c9de0 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -9,7 +9,7 @@
     <span
       class="oc-avatar-item"
       :style="{
-        backgroundColor: backgroundColor,
+        backgroundColor,
         '--icon-color': iconColor,
         '--width': avatarWidth
       }"
@@ -62,6 +62,14 @@ export default defineComponent({
       required: false,
       default: 'fill'
     },
+    /**
+     * Describes the size of the avatar icon e.g.(small)
+     */
+    iconSize: {
+      type: String,
+      required: false,
+      default: 'small'
+    },
     /**
      * Background color that should be used for the avatar. If empty
      * a random color will be picked
@@ -89,15 +97,6 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 30
-    },
-
-    /**
-     * Describes the size of the avatar icon e.g.(small)
-     */
-    iconSize: {
-      type: String,
-      required: false,
-      default: 'small'
     }
   },
 
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap
index da0e082b08e..8ec665a4175 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`MembersRoleSection > should render all members accordingly 1`] = `
     <oc-avatar-stub src="" username="einstein" accessiblelabel="" width="36" class="oc-mr-s"></oc-avatar-stub> einstein
   </li>
   <li class="oc-flex oc-flex-middle oc-mb-s" data-testid="space-members-list">
-    <oc-avatar-item-stub name="group" icon="group" iconcolor="var(--oc-color-text-inverse)" iconfilltype="fill" background="var(--oc-color-swatch-passive-default)" accessiblelabel="" width="36" iconsize="medium" class="oc-mr-s"></oc-avatar-item-stub> physic-lovers
+    <oc-avatar-item-stub name="group" icon="group" iconcolor="var(--oc-color-text-inverse)" iconfilltype="fill" iconsize="medium" background="var(--oc-color-swatch-passive-default)" accessiblelabel="" width="36" class="oc-mr-s"></oc-avatar-item-stub> physic-lovers
   </li>
 </ul>"
 `;
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
index db342e328f8..3cf28e3109c 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
@@ -5,40 +5,25 @@
     :class="collaboratorClass"
   >
     <avatar-image
-      v-if="isUser || isSpaceUser"
+      v-if="isAnyUserShareType"
       class="oc-mr-s"
       :width="36"
       :userid="item.value.shareWith"
       :user-name="item.label"
     />
-    <oc-icon
-      v-else-if="isGuest"
-      key="avatar-guest"
-      class="oc-mr-s files-recipient-suggestion-avatar"
-      name="global"
-      size="large"
-      :accessible-label="$gettext('Guest')"
-    >
-    </oc-icon>
-    <oc-icon
-      v-else-if="isGroup || isSpaceGroup"
-      key="avatar-group"
-      class="oc-mr-s files-recipient-suggestion-avatar"
-      name="group"
-      size="large"
-      :accessible-label="$gettext('Group')"
-    />
-    <oc-icon
+    <oc-avatar-item
       v-else
-      key="avatar-generic-person"
-      class="oc-mr-s files-recipient-suggestion-avatar"
-      name="person"
-      size="large"
-      :accessible-label="$gettext('User')"
+      :width="36"
+      :name="shareTypeKey"
+      :icon="shareTypeIcon"
+      icon-size="large"
+      icon-color="var(--oc-color-text)"
+      background="transparent"
+      class="oc-mr-s"
     />
     <div class="files-collaborators-autocomplete-user-text oc-text-truncate">
       <span class="files-collaborators-autocomplete-username" v-text="item.label" />
-      <template v-if="!isUser && !isSpaceUser && !isGroup && !isSpaceGroup">
+      <template v-if="!isAnyPrimaryShareType">
         <span
           class="files-collaborators-autocomplete-share-type"
           v-text="`(${$gettext(shareType.label)})`"
@@ -66,35 +51,30 @@ export default {
     }
   },
 
-  data() {
-    return {
-      loading: false
-    }
-  },
-
   computed: {
     shareType() {
       return ShareTypes.getByValue(this.item.value.shareType)
     },
 
-    isUser() {
-      return this.shareType === ShareTypes.user
-    },
-
-    isSpaceUser() {
-      return this.shareType === ShareTypes.spaceUser
+    shareTypeIcon() {
+      return this.shareType.icon
     },
 
-    isGuest() {
-      return this.shareType === ShareTypes.guest
+    shareTypeKey() {
+      return this.shareType.key
     },
 
-    isGroup() {
-      return this.shareType === ShareTypes.group
+    isAnyUserShareType() {
+      return [ShareTypes.user.key, ShareTypes.spaceUser.key].includes(this.shareType.key)
     },
 
-    isSpaceGroup() {
-      return this.shareType === ShareTypes.spaceGroup
+    isAnyPrimaryShareType() {
+      return [
+        ShareTypes.user.key,
+        ShareTypes.spaceUser.key,
+        ShareTypes.group.key,
+        ShareTypes.spaceGroup.key
+      ].includes(this.shareType.key)
     },
 
     collaboratorClass() {
@@ -105,9 +85,6 @@ export default {
 </script>
 
 <style lang="scss">
-.vs__dropdown-option--highlight .files-recipient-suggestion-avatar svg {
-  fill: white !important;
-}
 .files-collaborators-autocomplete-additional-info {
   font-size: var(--oc-font-size-small);
 }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 2915a2f9ba0..9f514fc711e 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -146,8 +146,6 @@ import {
   SpacePeopleShareRoles
 } from '@ownclouders/web-client/src/helpers/share'
 import {
-  // FederatedConnection,
-  FederatedUser,
   useCapabilityStore,
   useClientService,
   useUserStore,
@@ -267,20 +265,9 @@ export default defineComponent({
       displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButtonRef))
     }
 
-    const federatedUsers = ref([] as FederatedUser[])
     onMounted(async () => {
       await nextTick()
       markInstance.value = new Mark('.mark-element')
-      // HACK: remove when federated users are returned from search
-      // try {
-      //   const { data: acceptedUsers } = await clientService.httpAuthenticated.get<
-      //     FederatedConnection[]
-      //   >('/sciencemesh/find-accepted-users')
-      //   federatedUsers.value = acceptedUsers
-      //   console.log('Federated users loaded', acceptedUsers)
-      // } catch (e) {
-      //   console.error(e)
-      // }
     })
 
     const accountType = ref('standard')
@@ -315,7 +302,6 @@ export default defineComponent({
       showContextMenuOnBtnClick,
       contextMenuButtonRef,
       notifyEnabled,
-      federatedUsers,
       createSharesConcurrentRequests,
       ...useMessages(),
       searchInProgress,
@@ -418,25 +404,7 @@ export default defineComponent({
         })
         const remotes = recipients.exact.remotes.concat(recipients.remotes)
 
-        // const federatedCollaborators = this.federatedUsers.map((u) => {
-        //   return {
-        //     label: u.display_name,
-        //     value: {
-        //       shareType: ShareTypes.remote.value,
-        //       shareWithUser: u.user_id,
-        //       shareWithProvider: u.idp,
-        //       shareWithAdditionalInfo: u.mail,
-        //       userType: 0
-        //     }
-        //   }
-        // })
-
-        this.autocompleteResults = [
-          ...users,
-          ...groups,
-          ...remotes
-          // ...federatedCollaborators
-        ].filter((collaborator) => {
+        this.autocompleteResults = [...users, ...groups, ...remotes].filter((collaborator) => {
           const selected = this.selectedCollaborators.find((selectedCollaborator) => {
             return (
               collaborator.value.shareWith === selectedCollaborator.value.shareWith &&
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
index 7fa11bfc2fc..d0d52b18b92 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
@@ -7,34 +7,23 @@ describe('AutocompleteItem component', () => {
     const { wrapper } = createWrapper({ shareType: shareType.value })
     expect(wrapper.find('div').classes()).toContain(`files-collaborators-search-${shareType.key}`)
   })
-  describe('displays the correct image/icon according to the shareType', () => {
-    it('should display users avatar for user shares', () => {
-      const { wrapper } = createWrapper({ shareType: ShareTypes.user.value })
-      expect(wrapper.find('avatar-image-stub').exists()).toBeTruthy()
-      expect(wrapper.find('oc-icon-stub').exists()).toBeFalsy()
-    })
-    it('should display a group icon for group shares', () => {
-      const { wrapper } = createWrapper({ shareType: ShareTypes.group.value })
-      expect(wrapper.find('avatar-image-stub').exists()).toBeFalsy()
-      expect(wrapper.find('oc-icon-stub').exists()).toBeTruthy()
-      expect(wrapper.find('oc-icon-stub').attributes().name).toEqual('group')
-    })
-    it('should display a guest icon for guest shares', () => {
-      const { wrapper } = createWrapper({ shareType: ShareTypes.guest.value })
-      expect(wrapper.find('avatar-image-stub').exists()).toBeFalsy()
-      expect(wrapper.find('oc-icon-stub').exists()).toBeTruthy()
-      expect(wrapper.find('oc-icon-stub').attributes().name).toEqual('global')
-    })
-    it.each([ShareTypes.link.value, ShareTypes.remote.value])(
-      'should display a generic-person icon for any other share types',
-      (shareType) => {
-        const { wrapper } = createWrapper({ shareType: shareType })
+  it.each(ShareTypes.all)(
+    'displays the correct image/icon according to the shareType',
+    (shareType) => {
+      const { wrapper } = createWrapper({ shareType: shareType.value })
+      const isUserShareType = [ShareTypes.user.key, ShareTypes.spaceUser.key].includes(
+        shareType.key
+      )
+      if (isUserShareType) {
+        expect(wrapper.find('avatar-image-stub').exists()).toBeTruthy()
+        expect(wrapper.find('oc-avatar-item-stub').exists()).toBeFalsy()
+      } else {
         expect(wrapper.find('avatar-image-stub').exists()).toBeFalsy()
-        expect(wrapper.find('oc-icon-stub').exists()).toBeTruthy()
-        expect(wrapper.find('oc-icon-stub').attributes().name).toEqual('person')
+        expect(wrapper.find('oc-avatar-item-stub').exists()).toBeTruthy()
+        expect(wrapper.find('oc-avatar-item-stub').attributes().icon).toEqual(shareType.icon)
       }
-    )
-  })
+    }
+  )
   describe('avatar image', () => {
     it('sets the userId', () => {
       const { wrapper } = createWrapper({