Merge pull request Sage-Bionetworks#681 from hallieswan/PORTALS-2768

PORTALS-2768: only show icon, no text in SynapseTable access column
jay-hodgson · Feb 1, 2024 · 93578d5 · 93578d5
2 parents 0e50447 + 596312c
commit 93578d5
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 104 deletions.
diff --git a/...ntainers/HasAccessV2.integration.test.tsx → ...asAccess/HasAccessV2.integration.test.tsx b/...ntainers/HasAccessV2.integration.test.tsx → ...asAccess/HasAccessV2.integration.test.tsx
@@ -1,35 +1,32 @@
 import { render, screen } from '@testing-library/react'
 import React from 'react'
-import {
-  HasAccessV2,
-  HasAccessProps,
-} from '../../src/components/HasAccess/HasAccessV2'
-import { createWrapper } from '../../src/testutils/TestingLibraryUtils'
-import { ENTITY_BUNDLE_V2 } from '../../src/utils/APIConstants'
+import { HasAccessV2, HasAccessProps } from './HasAccessV2'
+import { createWrapper } from '../../testutils/TestingLibraryUtils'
+import { ENTITY_BUNDLE_V2 } from '../../utils/APIConstants'
 import {
   BackendDestinationEnum,
   getEndpoint,
-} from '../../src/utils/functions/getEndpoint'
-import { SRC_SIGN_IN_CLASS } from '../../src/utils/SynapseConstants'
-import { SynapseContextType } from '../../src/utils/context/SynapseContext'
+} from '../../utils/functions/getEndpoint'
+import { SRC_SIGN_IN_CLASS } from '../../utils/SynapseConstants'
+import { SynapseContextType } from '../../utils/context/SynapseContext'
 import {
   EntityBundle,
   RestrictableObjectType,
   RestrictionInformationRequest,
   RestrictionInformationResponse,
 } from '@sage-bionetworks/synapse-types'
-import { mockFolderEntity } from '../../src/mocks/entity/mockEntity'
-import mockFileEntityData from '../../src/mocks/entity/mockFileEntity'
-import { MOCK_CONTEXT_VALUE } from '../../src/mocks/MockSynapseContext'
+import { mockFolderEntity } from '../../mocks/entity/mockEntity'
+import mockFileEntityData from '../../mocks/entity/mockFileEntity'
+import { MOCK_CONTEXT_VALUE } from '../../mocks/MockSynapseContext'
 import {
   mockOpenRestrictionInformation,
   mockUnmetControlledDataRestrictionInformationACT,
-} from '../../src/mocks/mock_has_access_data'
-import { rest, server } from '../../src/mocks/msw/server'
+  mockUnmetControlledDataRestrictionInformationRestricted,
+} from '../../mocks/mock_has_access_data'
+import { rest, server } from '../../mocks/msw/server'
 
 const entityId = mockFileEntityData.id
 const mockFileEntityBundle = mockFileEntityData.bundle
-const isInDownloadList: boolean = true
 
 const renderComponent = (
   props: HasAccessProps,
@@ -41,7 +38,22 @@ const renderComponent = (
 }
 const props: HasAccessProps = {
   entityId,
-  isInDownloadList,
+}
+
+const expectIcon = async (iconName: string, tooltipText: string) => {
+  const icon = await screen.findByRole('img')
+  expect(icon).toHaveAccessibleName(tooltipText)
+  expect(icon.getAttribute('data-svg')).toEqual(iconName)
+}
+const expectSignInButton = async () => {
+  const button = await screen.findByRole('button')
+  expect(button).toHaveTextContent('')
+  expect(button).toHaveClass(SRC_SIGN_IN_CLASS)
+}
+const expectArButton = async (linkText: string) => {
+  const button = await screen.findByRole('button')
+  expect(button).toHaveTextContent(linkText)
+  expect(button).not.toHaveClass(SRC_SIGN_IN_CLASS)
 }
 
 const onGetRestrictionInformation = jest.fn()
@@ -86,7 +98,7 @@ describe('HasAccess tests', () => {
 
   it('User has all permissions on a standard FileEntity and any Access Requirements have been met', async () => {
     const entityBundle: EntityBundle = {
-      entity: mockFileEntityBundle.entity,
+      ...mockFileEntityBundle,
       permissions: {
         ...mockFileEntityBundle.permissions,
         canDownload: true,
@@ -97,9 +109,7 @@ describe('HasAccess tests', () => {
 
     renderComponent(props)
 
-    expect((await screen.findByRole('img')).getAttribute('data-svg')).toEqual(
-      'accessOpen',
-    )
+    await expectIcon('accessOpen', '')
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
 
     const expectedRestrictionInformationRequest: RestrictionInformationRequest =
@@ -115,8 +125,10 @@ describe('HasAccess tests', () => {
 
   it('The entity is a Folder entity', async () => {
     const entityBundle: EntityBundle = {
+      ...mockFileEntityBundle,
       entity: mockFolderEntity,
       permissions: {
+        ...mockFileEntityBundle.permissions,
         canDownload: true,
       },
     }
@@ -125,9 +137,7 @@ describe('HasAccess tests', () => {
 
     renderComponent(props)
 
-    expect((await screen.findByRole('img')).getAttribute('data-svg')).toEqual(
-      'accessOpen',
-    )
+    await expectIcon('accessOpen', '')
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
 
     const expectedRestrictionInformationRequest: RestrictionInformationRequest =
@@ -144,6 +154,7 @@ describe('HasAccess tests', () => {
   describe('Authorization blocked by ACL', () => {
     it('Handles a file entity where download access is blocked because of missing DOWNLOAD permission, and the user is signed in', async () => {
       const entityBundle: EntityBundle = {
+        ...mockFileEntityBundle,
         entity: mockFileEntityBundle.entity,
         permissions: {
           ...mockFileEntityBundle.permissions,
@@ -155,10 +166,10 @@ describe('HasAccess tests', () => {
 
       renderComponent(props)
 
-      const icon = await screen.findByRole('img', {
-        name: 'You do not have download access for this item.',
-      })
-      expect(icon.getAttribute('data-svg')).toEqual('accessClosed')
+      await expectIcon(
+        'accessClosed',
+        'You do not have download access for this item.',
+      )
       expect(screen.queryByRole('button')).not.toBeInTheDocument()
 
       const expectedRestrictionInformationRequest: RestrictionInformationRequest =
@@ -177,6 +188,7 @@ describe('HasAccess tests', () => {
         accessToken: undefined,
       }
       const entityBundle: EntityBundle = {
+        ...mockFileEntityBundle,
         entity: mockFileEntityBundle.entity,
         permissions: {
           ...mockFileEntityBundle.permissions,
@@ -188,13 +200,8 @@ describe('HasAccess tests', () => {
 
       renderComponent(props, wrapperProps)
 
-      const icon = await screen.findByRole('img', {
-        name: 'You must sign in to access this file.',
-      })
-      expect(icon.getAttribute('data-svg')).toEqual('accessClosed')
-      // Sign in button is present
-      const signInButton = screen.getByRole('button')
-      expect(signInButton.classList.contains(SRC_SIGN_IN_CLASS)).toBe(true)
+      await expectIcon('accessClosed', 'You must sign in to access this file.')
+      await expectSignInButton()
 
       const expectedRestrictionInformationRequest: RestrictionInformationRequest =
         {
@@ -209,8 +216,38 @@ describe('HasAccess tests', () => {
   })
 
   describe('File is controlled by Access Requirements', () => {
+    it('User has ACL permissions, has restriction by terms of use, but does not have unmet ARs', async () => {
+      const entityBundle: EntityBundle = {
+        ...mockFileEntityBundle,
+        permissions: {
+          ...mockFileEntityBundle.permissions,
+          canDownload: true,
+        },
+      }
+      useMswEntityBundle(entityBundle)
+      useMswRestrictionInformation({
+        ...mockUnmetControlledDataRestrictionInformationRestricted,
+        hasUnmetAccessRequirement: false,
+      })
+
+      renderComponent(props)
+
+      await expectIcon('accessOpen', 'View Terms')
+      await expectArButton('View Terms')
+
+      const expectedRestrictionInformationRequest: RestrictionInformationRequest =
+        {
+          restrictableObjectType: RestrictableObjectType.ENTITY,
+          objectId: entityId,
+        }
+
+      expect(onGetRestrictionInformation).toHaveBeenLastCalledWith(
+        expectedRestrictionInformationRequest,
+      )
+    })
     it('User has ACL permissions but not AR permissions', async () => {
       const entityBundle: EntityBundle = {
+        ...mockFileEntityBundle,
         entity: mockFileEntityBundle.entity,
         permissions: {
           ...mockFileEntityBundle.permissions,
@@ -224,11 +261,11 @@ describe('HasAccess tests', () => {
 
       renderComponent(props)
 
-      const icon = await screen.findByRole('img', {
-        name: 'You must request access to this restricted file.',
-      })
-      expect(icon.getAttribute('data-svg')).toEqual('accessClosed')
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+      await expectIcon(
+        'accessClosed',
+        'You must request access to this restricted file.',
+      )
+      await expectArButton('Request Access')
 
       const expectedRestrictionInformationRequest: RestrictionInformationRequest =
         {
@@ -247,6 +284,7 @@ describe('HasAccess tests', () => {
         accessToken: undefined,
       }
       const entityBundle: EntityBundle = {
+        ...mockFileEntityBundle,
         entity: mockFileEntityBundle.entity,
         permissions: {
           ...mockFileEntityBundle.permissions,
@@ -260,12 +298,12 @@ describe('HasAccess tests', () => {
 
       renderComponent(props, wrapperProps)
 
-      const icon = await screen.findByRole('img', {
-        name: 'You must request access to this restricted file.',
-      })
-      expect(icon.getAttribute('data-svg')).toEqual('accessClosed')
+      await expectIcon(
+        'accessClosed',
+        'You must request access to this restricted file.',
+      )
       // User will be prompted to sign in in the AR modal
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+      await expectArButton('Request Access')
 
       const expectedRestrictionInformationRequest: RestrictionInformationRequest =
         {
@@ -280,6 +318,7 @@ describe('HasAccess tests', () => {
 
     it('User does not have ACL permissions and does not have AR permissions', async () => {
       const entityBundle: EntityBundle = {
+        ...mockFileEntityBundle,
         entity: mockFileEntityBundle.entity,
         permissions: {
           ...mockFileEntityBundle.permissions,
@@ -293,11 +332,11 @@ describe('HasAccess tests', () => {
 
       renderComponent(props)
 
-      const icon = await screen.findByRole('img', {
-        name: 'You must request access to this restricted file.',
-      })
-      expect(icon.getAttribute('data-svg')).toEqual('accessClosed')
-      expect(screen.queryByRole('button')).not.toBeInTheDocument()
+      await expectIcon(
+        'accessClosed',
+        'You must request access to this restricted file.',
+      )
+      await expectArButton('Request Access')
 
       const expectedRestrictionInformationRequest: RestrictionInformationRequest =
         {
@@ -309,6 +348,28 @@ describe('HasAccess tests', () => {
         expectedRestrictionInformationRequest,
       )
     })
+    it('Can hide button text', async () => {
+      const entityBundle: EntityBundle = {
+        ...mockFileEntityBundle,
+        entity: mockFileEntityBundle.entity,
+        permissions: {
+          ...mockFileEntityBundle.permissions,
+          canDownload: false,
+        },
+      }
+      useMswEntityBundle(entityBundle)
+      useMswRestrictionInformation(
+        mockUnmetControlledDataRestrictionInformationACT,
+      )
+
+      renderComponent({ ...props, showButtonText: false })
+
+      await expectIcon(
+        'accessClosed',
+        'You must request access to this restricted file.',
+      )
+      await expectArButton('')
+    })
   })
 
   describe('Opens the Access Requirements panel', () => {