feat(FileThumbnailRestricted): add tooltips to restricted icons

public/locales/en/files.json

@@ -19,10 +19,15 @@
       "published": "Published",
       "deposited": "Deposited"
     },
-    "thumbnail": {
+    "fileAccess": {
+      "title": "File Access",
       "restricted": {
-        "locked": "Locked File Icon",
-        "unlocked": "Unlocked File Icon"
+        "tooltip": "Restricted",
+        "icon": "Restricted File Icon"
+      },
+      "restrictedWithAccess": {
+        "tooltip": "Restricted with Access Granted",
+        "icon": "Restricted with access Icon"
       }
     },
     "copyToClipboard": {

src/sections/dataset/dataset-files/files-table/file-info-cell/file-thumbnail/FileThumbnail.module.scss

@@ -45,13 +45,13 @@
   font-size: 20px;
 }
 
-.restricted-icon-locked {
+.restricted-icon-restricted {
     @extend %restricted-icon;
 
     color: $dv-danger-color;
 }
 
-.restricted-icon-unlocked {
+.restricted-icon-restrictedWithAccess {
     @extend %restricted-icon;
 
   right: -16px;

src/sections/dataset/dataset-files/files-table/file-info-cell/file-thumbnail/FileThumbnailRestrictedIcon.tsx

@@ -1,20 +1,25 @@
 import { LockFill, UnlockFill } from 'react-bootstrap-icons'
 import styles from './FileThumbnail.module.scss'
 import { useTranslation } from 'react-i18next'
+import { Tooltip } from 'dataverse-design-system'
 
 export function FileThumbnailRestrictedIcon({ locked }: { locked: boolean }) {
   const { t } = useTranslation('files')
-  if (locked) {
-    return (
-      <span className={styles['restricted-icon-locked']}>
-        <LockFill role="img" title={t('table.thumbnail.restricted.locked')} />
-      </span>
-    )
-  }
+  const restrictedType = locked ? 'restricted' : 'restrictedWithAccess'
 
   return (
-    <span className={styles['restricted-icon-unlocked']}>
-      <UnlockFill role="img" title={t('table.thumbnail.restricted.unlocked')} />
+    <span className={styles[`restricted-icon-${restrictedType}`]}>
+      <Tooltip
+        overlay={`${t('table.fileAccess.title')}: ${t(
+          `table.fileAccess.${restrictedType}.tooltip`
+        )}`}
+        placement="top">
+        {locked ? (
+          <LockFill role="img" title={t('table.fileAccess.restricted.icon')} />
+        ) : (
+          <UnlockFill role="img" title={t('table.fileAccess.restrictedWithAccess.icon')} />
+        )}
+      </Tooltip>
     </span>
   )
 }

tests/component/sections/dataset/dataset-files/files-table/files-info-cell/file-thumbnail/FileThumbnail.spec.tsx

@@ -21,8 +21,8 @@ describe('FileThumbnail', () => {
     cy.findByAltText(file.name).trigger('mouseover')
     cy.findByRole('tooltip').should('exist')
 
-    cy.findByText('Locked File Icon').should('not.exist')
-    cy.findByText('Unlocked File Icon').should('not.exist')
+    cy.findByText('Restricted File Icon').should('not.exist')
+    cy.findByText('Restricted with access Icon').should('not.exist')
   })
 
   it('renders FileThumbnailPreviewImage when thumbnail is provided with unlocked icon if restricted with access', () => {
@@ -44,8 +44,9 @@ describe('FileThumbnail', () => {
     cy.findByAltText(file.name).trigger('mouseover')
     cy.findByRole('tooltip').should('exist')
 
-    cy.findByText('Locked File Icon').should('not.exist')
-    cy.findByText('Unlocked File Icon').should('exist')
+    cy.findByText('Restricted File Icon').should('not.exist')
+    cy.findByText('Restricted with access Icon').should('exist').parent().trigger('mouseover')
+    cy.findByText('File Access: Restricted with Access Granted').should('exist')
   })
 
   it('does not render FileThumbnailPreviewImage when thumbnail is provided if restricted with no access', () => {
@@ -67,8 +68,9 @@ describe('FileThumbnail', () => {
     cy.findByAltText(file.name).should('not.exist')
     cy.findByText('icon-image').should('exist')
 
-    cy.findByText('Locked File Icon').should('exist')
-    cy.findByText('Unlocked File Icon').should('not.exist')
+    cy.findByText('Restricted File Icon').should('exist').parent().trigger('mouseover')
+    cy.findByText('File Access: Restricted').should('exist')
+    cy.findByText('Restricted with access Icon').should('not.exist')
   })
 
   it('renders FileThumbnailIcon when thumbnail is not provided', () => {
@@ -81,8 +83,8 @@ describe('FileThumbnail', () => {
 
     cy.findByText('icon-file').should('exist')
 
-    cy.findByText('Locked File Icon').should('not.exist')
-    cy.findByText('Unlocked File Icon').should('not.exist')
+    cy.findByText('Restricted File Icon').should('not.exist')
+    cy.findByText('Restricted with access Icon').should('not.exist')
   })
 
   it('renders FileThumbnailIcon when thumbnail is not provided with lock icon when restricted with no access', () => {
@@ -95,8 +97,10 @@ describe('FileThumbnail', () => {
 
     cy.findByText('icon-file').should('exist')
 
-    cy.findByText('Locked File Icon').should('exist')
-    cy.findByText('Unlocked File Icon').should('not.exist')
+    cy.findByText('Restricted File Icon').should('exist')
+    cy.findByText('Restricted File Icon').should('exist').parent().trigger('mouseover')
+    cy.findByText('File Access: Restricted').should('exist')
+    cy.findByText('Restricted with access Icon').should('not.exist')
   })
 
   it('renders FileThumbnailIcon when thumbnail is not provided with unlock icon when restricted with access', () => {
@@ -109,7 +113,8 @@ describe('FileThumbnail', () => {
 
     cy.findByText('icon-file').should('exist')
 
-    cy.findByText('Locked File Icon').should('not.exist')
-    cy.findByText('Unlocked File Icon').should('exist')
+    cy.findByText('Restricted File Icon').should('not.exist')
+    cy.findByText('Restricted with access Icon').should('exist').parent().trigger('mouseover')
+    cy.findByText('File Access: Restricted with Access Granted').should('exist')
   })
 })