feat: show avatars across the webui

packages/design-system/src/components/OcRecipient/OcRecipient.spec.ts

@@ -3,16 +3,26 @@ import Recipient from './OcRecipient.vue'
 import { Recipient as RecipientType } from '../../helpers'
 
 describe('OcRecipient', () => {
-  function getWrapper(props: Partial<RecipientType> = undefined, slot: string = undefined) {
-    const slots = slot ? { append: slot } : {}
+  function getWrapper(
+    props: Partial<RecipientType> = undefined,
+    avatarSlot: string = undefined,
+    appendSlot: string = undefined
+  ) {
+    const slots: { append?: string; avatar?: string } = {}
+    if (appendSlot) {
+      slots.append = appendSlot
+    }
+    if (avatarSlot) {
+      slots.avatar = avatarSlot
+    }
 
     return shallowMount(Recipient, {
       props: {
         recipient: {
           name: 'alice',
           avatar: 'avatar.jpg',
           hasAvatar: true,
-          isLoadingAvatar: false,
+          icon: { name: 'user', label: 'User' },
           ...props
         }
       },
@@ -30,35 +40,18 @@ describe('OcRecipient', () => {
   it('displays avatar', () => {
     const wrapper = getWrapper()
 
-    expect(wrapper.find('[data-testid="recipient-avatar"]').attributes('src')).toEqual('avatar.jpg')
+    expect(wrapper.find('oc-avatar-item-stub').attributes('icon')).toEqual('user')
   })
 
-  it('displays a spinner if avatar has not been loaded yet', () => {
-    const wrapper = getWrapper({
-      isLoadingAvatar: true
-    })
-
-    expect(wrapper.find('[data-testid="recipient-avatar-spinner"]').exists()).toBeTruthy()
-  })
-
-  it('displays an icon if avatar is not enabled', () => {
-    const wrapper = getWrapper({
-      icon: {
-        name: 'person',
-        label: 'User'
-      },
-      hasAvatar: false
-    })
-
-    const icon = wrapper.find('[data-testid="recipient-icon"]')
+  it('display content in the avatar slot', () => {
+    const wrapper = getWrapper({}, '<span id="avatar-slot">Hello world</span>')
 
-    expect(icon.exists()).toBeTruthy()
-    expect(icon.attributes().accessiblelabel).toEqual('User')
+    expect(wrapper.find('#avatar-slot').exists()).toBeTruthy()
   })
 
   it('display content in the append slot', () => {
-    const wrapper = getWrapper({}, '<span id="test-slot">Hello world</span>')
+    const wrapper = getWrapper({}, '', '<span id="append-slot"> Hello world </span>')
 
-    expect(wrapper.find('#test-slot').exists()).toBeTruthy()
+    expect(wrapper.find('#append-slot').exists()).toBeTruthy()
   })
 })

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

@@ -1,42 +1,23 @@
 <template>
   <span class="oc-recipient">
-    <template v-if="recipient.hasAvatar">
-      <oc-spinner
-        v-if="recipient.isLoadingAvatar"
-        key="recipient-avatar-spinner"
-        size="small"
-        :aria-label="$gettext('Loading avatar')"
-        data-testid="recipient-avatar-spinner"
-      />
-      <oc-avatar
-        v-else
-        :key="recipient.avatar || recipient.name"
-        data-testid="recipient-avatar"
-        class="oc-recipient-avatar"
-        :src="recipient.avatar"
-        :user-name="recipient.name"
+    <slot name="avatar">
+      <oc-avatar-item
         :width="16.8"
+        :icon="recipient.icon.name"
+        :name="recipient.icon.label"
+        :accessible-label="recipient.icon.label"
+        data-testid="recipient-icon"
       />
-    </template>
-    <oc-icon
-      v-else-if="recipient.icon && recipient.icon.name"
-      class="oc-recipient-icon"
-      size="small"
-      :name="recipient.icon.name"
-      :accessible-label="recipient.icon.label"
-      data-testid="recipient-icon"
-    />
+    </slot>
     <p class="oc-recipient-name" data-testid="recipient-name" v-text="recipient.name" />
     <!-- @slot Append content (actions, additional info, etc.)  -->
     <slot name="append" />
   </span>
 </template>
 
 <script setup lang="ts">
-import OcAvatar from '../OcAvatar/OcAvatar.vue'
-import OcIcon from '../OcIcon/OcIcon.vue'
-import OcSpinner from '../OcSpinner/OcSpinner.vue'
 import { Recipient } from '../../helpers'
+import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
 export interface Props {
   /**
@@ -50,6 +31,7 @@ export interface Slots {
    * @docs Append content for additional info.
    */
   append?: () => unknown
+  avatar?: () => unknown
 }
 
 const { recipient } = defineProps<Props>()

packages/design-system/src/helpers/types.ts

@@ -64,9 +64,6 @@ export type Recipient = {
     name: string
     label: string
   }
-  isLoadingAvatar?: boolean
-  hasAvatar?: boolean
-  avatar?: string
 }
 
 export interface BreadcrumbItem {

packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue

@@ -6,7 +6,7 @@
       class="oc-flex oc-flex-middle oc-mb-s"
       data-testid="group-members-list"
     >
-      <oc-avatar :user-name="member.displayName" :width="36" class="oc-mr-s" />
+      <user-avatar :user-id="member.id" :user-name="member.displayName" class="oc-mr-s" />
       <span class="oc-text-truncate" :title="member.displayName">
         {{ member.displayName }}
       </span>
@@ -16,9 +16,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { User } from '@opencloud-eu/web-client/graph/generated'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
   name: 'MembersRoleSection',
+  components: { UserAvatar },
   props: {
     groupMembers: {
       type: Array as PropType<User[]>,

packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersRoleSection.vue

@@ -6,12 +6,13 @@
       class="oc-flex oc-flex-middle oc-mb-s"
       data-testid="space-members-list"
     >
-      <oc-avatar
+      <user-avatar
         v-if="m.grantedTo.user"
+        :user-id="m.grantedTo.user.id"
         :user-name="m.grantedTo.user.displayName"
-        :width="36"
         class="oc-mr-s"
-      /><oc-avatar-item
+      />
+      <oc-avatar-item
         v-else
         :width="36"
         icon-size="medium"
@@ -26,9 +27,11 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
 import { ShareTypes, SpaceMember } from '@opencloud-eu/web-client'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
   name: 'MembersRoleSection',
+  components: { UserAvatar },
   props: {
     members: {
       type: Array as PropType<SpaceMember[]>,

packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="oc-flex user-info oc-mb-l">
-    <avatar-image class="oc-mb-m" :width="80" :userid="user.id" :user-name="user.displayName" />
+    <user-avatar class="oc-mb-m" :width="80" :user-id="user.id" :user-name="user.displayName" />
     <span v-text="user.onPremisesSamAccountName"></span>
     <span class="oc-text-muted user-info-display-name" v-text="user.displayName"></span>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
+
 export default defineComponent({
   name: 'UserInfoBox',
+  components: { UserAvatar },
   props: {
     user: {
       type: Object,
@@ -22,6 +25,7 @@ export default defineComponent({
   align-items: center;
   flex-direction: column;
 }
+
 .user-info-display-name {
   font-size: 1.5rem;
 }

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -46,7 +46,7 @@
           />
         </template>
         <template #avatar="{ item }">
-          <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
+          <user-avatar :user-id="item.id" :user-name="item.displayName" />
         </template>
         <template #role="{ item }">
           <template v-if="item.appRoleAssignments">{{ getRoleDisplayNameByUser(item) }}</template>
@@ -108,11 +108,11 @@
 import { useGettext } from 'vue3-gettext'
 import {
   ComponentPublicInstance,
-  PropType,
   computed,
   defineComponent,
   nextTick,
   onMounted,
+  PropType,
   ref,
   unref,
   useTemplateRef,
@@ -121,19 +121,21 @@ import {
 import {
   AppLoadingSpinner,
   ContextMenuBtnClickEventData,
+  ContextMenuQuickAction,
   displayPositionedDropdown,
   eventBus,
+  Pagination,
   queryItemAsString,
+  SideBarEventTopics,
   SortDir,
+  useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
-  useRouteQuery
+  usePagination,
+  useRouteQuery,
+  UserAvatar
 } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { AppRole, User } from '@opencloud-eu/web-client/graph/generated'
-import { ContextMenuQuickAction } from '@opencloud-eu/web-pkg'
-import { useFileListHeaderPosition, usePagination } from '@opencloud-eu/web-pkg'
-import { Pagination } from '@opencloud-eu/web-pkg'
 import { perPageDefault, perPageStoragePrefix } from '../../defaults'
 import { storeToRefs } from 'pinia'
 import { useUserSettingsStore } from '../../composables/stores/userSettings'
@@ -148,7 +150,7 @@ import { FieldType } from '@opencloud-eu/design-system/helpers'
 
 export default defineComponent({
   name: 'UsersList',
-  components: { AppLoadingSpinner, ContextMenuQuickAction, Pagination },
+  components: { UserAvatar, AppLoadingSpinner, ContextMenuQuickAction, Pagination },
   props: {
     roles: {
       type: Array as PropType<AppRole[]>,

packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersRoleSection.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`MembersRoleSection > should render all members accordingly 1`] = `
 "<ul class="oc-list">
   <li class="oc-flex oc-flex-middle oc-mb-s" data-testid="space-members-list">
-    <oc-avatar-stub accessiblelabel="" color="white" src="" username="einstein" width="36" class="oc-mr-s"></oc-avatar-stub> einstein
+    <user-avatar-stub userid="[Function]" username="einstein" class="oc-mr-s"></user-avatar-stub> einstein
   </li>
   <li class="oc-flex oc-flex-middle oc-mb-s" data-testid="space-members-list">
     <oc-avatar-item-stub icon="group" name="group" accessiblelabel="" background="var(--oc-role-secondary)" iconcolor="var(--oc-role-on-secondary)" iconfilltype="fill" iconsize="medium" width="36" class="oc-mr-s"></oc-avatar-item-stub> physic-lovers

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -126,9 +126,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               <tbody class="has-item-context-menu">
                 <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-m"><span><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar">
-                    <avatar-image width="32" userid="1" user-name="Admin"></avatar-image>
-                  </td>
+                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mail">admin@example.org</td>

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue

@@ -4,21 +4,18 @@
     class="oc-flex oc-flex-middle oc-py-xs"
     :class="collaboratorClass"
   >
-    <avatar-image
+    <user-avatar
       v-if="isAnyUserShareType"
       class="oc-mr-s"
-      :width="36"
-      :userid="item.id"
+      :user-id="item.id"
       :user-name="item.displayName"
     />
     <oc-avatar-item
       v-else
       :width="36"
       :name="shareTypeKey"
       :icon="shareTypeIcon"
-      icon-size="large"
-      icon-color="var(--oc-role-on-surface)"
-      background="transparent"
+      icon-size="medium"
       class="oc-mr-s"
     />
     <div class="files-collaborators-autocomplete-user-text oc-text-truncate">
@@ -46,9 +43,11 @@
 <script lang="ts">
 import { computed, PropType } from 'vue'
 import { CollaboratorAutoCompleteItem, ShareTypes } from '@opencloud-eu/web-client'
+import { UserAvatar } from '@opencloud-eu/web-pkg'
 
 export default {
   name: 'AutocompleteItem',
+  components: { UserAvatar },
 
   props: {
     item: {