Display all image previews in reference picker (#1524)

* display referenced image

* object fit

* remove console log

* unit test

* test fix

* show thumbnail in picker if available

* unit test for refimg thumbnail

* common icon logic

* de lunnecessary image lines

* remove image import in refpicker

* undo refactor icon conditions

* remove image icon tests

* remove image test type

* add reference picker e2e test

---------

Co-authored-by: Ádám Hassan <hassana@sensenet.com>

apps/sensenet/cypress/e2e/ui/referencePicker.cy.ts

@@ -0,0 +1,28 @@
+import { PATHS, resolvePathParams } from '../../../src/application-paths'
+import { pathWithQueryParams } from '../../../src/services/query-string-builder'
+
+describe('Batch operations: ', () => {
+  beforeEach(() => {
+    cy.login()
+    cy.visit(pathWithQueryParams({ path: '/', newParams: { repoUrl: Cypress.env('repoUrl') } }))
+  })
+
+  it('it should render a preview in reference picker if it is an image', () => {
+    cy.visit(
+      pathWithQueryParams({
+        path: resolvePathParams({ path: PATHS.content.appPath, params: { browseType: 'explorer' } }),
+        newParams: { repoUrl: Cypress.env('repoUrl'), path: '/SampleWorkspace/Blog' },
+      }),
+    )
+
+    cy.get('[data-test="table-cell-6-ways-to-unlock-true-collaboration-with-a-headless-cms"]').rightclick({
+      force: true,
+    })
+    cy.get('[data-test="content-context-menu-edit"]').click({ force: true })
+    cy.get('[for="LeadImage"]').siblings('ul').find('li:last-of-type button').click()
+    cy.get('[placeholder="Search"]').type('teamwork')
+    cy.get(
+      '.MuiDialogContent-root img[src="https://daily.test.sensenet.cloud/Root/Content/SampleWorkspace/Blog/Images/teamwork.gif"]',
+    ).should('be.visible')
+  })
+})

apps/sensenet/src/components/Icon.tsx

@@ -48,7 +48,7 @@ import {
 } from '@material-ui/icons'
 import { Repository } from '@sensenet/client-core'
 import { Injector, LogLevel, PathHelper } from '@sensenet/client-utils'
-import { File, GenericContent, User } from '@sensenet/default-content-types'
+import { File, GenericContent, Image, User } from '@sensenet/default-content-types'
 import { useInjector, useRepository } from '@sensenet/hooks-react'
 import { InlineIcon } from '@iconify/react'
 import circleciIcon from '@iconify-icons/logos/circleci'
@@ -223,6 +223,18 @@ export const defaultContentResolvers: Array<IconResolver<GenericContent>> = [
         />
       ) : null,
   },
+  {
+    get: (item, options) =>
+      options.repo.schemas.isContentFromType<Image>(item, 'Image') && (!item.PageCount || item.PageCount <= 0) ? (
+        <img
+          width={options.style?.width || 32}
+          height={options.style?.width || 32}
+          alt=""
+          src={PathHelper.joinPaths(options.repo.configuration.repositoryUrl, item.Path)}
+          style={options.style}
+        />
+      ) : null,
+  },
   {
     get: (item, options) => getIconByName(item.Icon, options),
   },

packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-picker.tsx

@@ -47,7 +47,7 @@ export const ReferencePicker: React.FC<ReferencePickerProps<GenericContentWithIs
     return isFolder ? 'folder' : 'insert_drive_file'
   }
 
-  const renderIcon = (item: GenericContentWithIsParent) =>
+  const renderIcon = (item: GenericContentWithIsParent | User) =>
     props.repository.schemas.isContentFromType<User>(item, 'User') ? (
       (item as User).Avatar?.Url ? (
         <Avatar

packages/sn-controls-react/test/reference-grid.test.tsx

@@ -227,7 +227,7 @@ describe('Reference grid field control', () => {
       )
       await sleepAsync(0)
 
-      wrapper.find(ReferencePicker).prop('handleSubmit')([{ Path: '/', Name: 'Jane Doe', Id: 1234, Type: 'User' }])
+      wrapper.find(ReferencePicker).prop('handleSubmit')!([{ Path: '/', Name: 'Jane Doe', Id: 1234, Type: 'User' }])
 
       // Jane Doe + add reference
       expect(wrapper.update().find(DefaultItemTemplate)).toHaveLength(2)