feat: [OCISDEV-234] display custom attributes in share autocomplete

changelog/unreleased/enhancement-display-custom-attributes-in-share-autocomplete.md

@@ -0,0 +1,7 @@
+Enhancement: Display custom attributes in share autocomplete
+
+When sharing a resource, we're now displaying custom attributes in the autocomplete.
+Previously, we were only displaying the user's email address.
+What attributes are displayed depends on the server configuration.
+
+https://github.com/owncloud/web/pull/13144

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

@@ -54,7 +54,9 @@ interface Props {
 const props = defineProps<Props>()
 
 const additionalInfo = computed(() => {
-  return props.item.mail || props.item.onPremisesSamAccountName
+  return (
+    props.item.attributes?.join(' · ') || props.item.mail || props.item.onPremisesSamAccountName
+  )
 })
 
 const externalIssuer = computed(() => {
@@ -92,5 +94,6 @@ const collaboratorClass = computed(() => {
 .files-collaborators-autocomplete-additionalInfo,
 .files-collaborators-autocomplete-externalIssuer {
   font-size: var(--oc-font-size-small);
+  white-space: normal;
 }
 </style>

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts

@@ -60,6 +60,13 @@ describe('AutocompleteItem component', () => {
     })
   })
   describe('additional info', () => {
+    it('shows the attributes for a user if given', () => {
+      const attributes = ['foo', 'bar']
+      const { wrapper } = createWrapper({ shareType: ShareTypes.user.value, attributes })
+      expect(wrapper.find('.files-collaborators-autocomplete-additionalInfo').text()).toEqual(
+        attributes.join(' · ')
+      )
+    })
     it('shows the email for a user if given', () => {
       const mail = 'foo@bar.com'
       const { wrapper } = createWrapper({ shareType: ShareTypes.user.value, mail })
@@ -87,12 +94,13 @@ function createWrapper({
   id = '',
   displayName = '',
   mail = '',
-  onPremisesSamAccountName = ''
+  onPremisesSamAccountName = '',
+  attributes = []
 }: Partial<CollaboratorAutoCompleteItem>) {
   return {
     wrapper: shallowMount(AutocompleteItem, {
       props: {
-        item: { shareType, id, displayName, mail, onPremisesSamAccountName }
+        item: { shareType, id, displayName, mail, onPremisesSamAccountName, attributes }
       },
       global: {
         renderStubDefaultSlot: true,

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.spec.ts

@@ -10,7 +10,8 @@ vi.mock('../../../../../../../src/helpers/user/avatarUrl', () => ({
 const getRecipient = (shareType: number = ShareTypes.user.value): CollaboratorAutoCompleteItem => ({
   displayName: 'Albert Einstein',
   id: 'einstein',
-  shareType
+  shareType,
+  attributes: []
 })
 
 describe('InviteCollaborator RecipientContainer', () => {

packages/web-client/src/helpers/share/types.ts

@@ -80,4 +80,5 @@ export interface CollaboratorAutoCompleteItem {
   mail?: string
   onPremisesSamAccountName?: string
   identities?: ObjectIdentity[]
+  attributes: string[]
 }