Collection page show lock/unlock icon for restricted files in the card

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.11",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.13",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

src/files/domain/models/FileItemTypePreview.ts

@@ -21,6 +21,8 @@ export interface FileItemTypePreview {
   datasetCitation: string
   publicationStatuses: PublicationStatus[]
   releaseOrCreateDate: Date
+  restricted: boolean
+  canDownloadFile: boolean
 }
 
 export interface FilePreviewChecksum {

src/files/infrastructure/mappers/JSFileItemTypePreviewMapper.ts

@@ -22,7 +22,9 @@ export class JSFileItemTypePreviewMapper {
       datasetPersistentId: jsFilePreview.datasetPersistentId,
       datasetCitation: jsFilePreview.datasetCitation,
       publicationStatuses: jsFilePreview.publicationStatuses,
-      releaseOrCreateDate: jsFilePreview.releaseOrCreateDate
+      releaseOrCreateDate: jsFilePreview.releaseOrCreateDate,
+      restricted: jsFilePreview.restricted,
+      canDownloadFile: jsFilePreview.canDownloadFile
     }
   }
 }

src/sections/collection/collection-items-panel/items-list/file-card/FileCard.module.scss

@@ -111,3 +111,7 @@
     color: black;
   }
 }
+
+.restricted-icon {
+  margin: -5px -5px 0 0;
+}

src/sections/collection/collection-items-panel/items-list/file-card/FileCardHeader.tsx

@@ -8,6 +8,7 @@ import { Route } from '@/sections/Route.enum'
 import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage'
 import { DatasetLabels } from '@/sections/dataset/dataset-labels/DatasetLabels'
 import { FileCardHelper } from './FileCardHelper'
+import { FileAccessRestrictedIcon } from '../../../../file/file-access/FileAccessRestrictedIcon'
 import styles from './FileCard.module.scss'
 
 interface FileCardHeaderProps {
@@ -21,6 +22,12 @@ export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
   return (
     <header className={styles['card-header-container']}>
       <div className={styles['left-side-content']}>
+        <div className={styles['restricted-icon']} data-testid="file-access-restricted-icon">
+          <FileAccessRestrictedIcon
+            restricted={filePreview.restricted}
+            canDownloadFile={filePreview.canDownloadFile}
+          />
+        </div>
         <LinkToPage
           page={Route.FILES}
           type={DvObjectType.FILE}

tests/component/files/domain/models/FileItemTypePreviewMother.ts

@@ -29,6 +29,8 @@ export class FileItemTypePreviewMother {
       datasetCitation: faker.lorem.paragraph(),
       publicationStatuses: [PublicationStatus.Published],
       releaseOrCreateDate: faker.date.past(),
+      restricted: faker.datatype.boolean(),
+      canDownloadFile: faker.datatype.boolean(),
       ...props
     }
   }
@@ -60,6 +62,8 @@ export class FileItemTypePreviewMother {
       datasetCitation: 'test citation',
       publicationStatuses: [PublicationStatus.Published],
       releaseOrCreateDate: new Date('2023-05-15T08:21:01Z'),
+      restricted: false,
+      canDownloadFile: true,
       ...props
     })
   }

tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx

@@ -8,6 +8,9 @@ describe('FileCard', () => {
     const filePreview = FileItemTypePreviewMother.create()
     cy.customMount(<FileCard filePreview={filePreview} />)
 
+    filePreview.restricted
+      ? cy.findByTestId('file-access-restricted-icon').should('exist')
+      : cy.findByTestId('file-access-restricted-icon').should('not.exist')
     cy.contains(DateHelper.toDisplayFormat(filePreview.releaseOrCreateDate)).should('exist')
     cy.contains(filePreview.fileType).should('exist')
     filePreview.checksum?.type && cy.contains(filePreview.checksum?.type).should('exist')