Merge pull request #417 from jay-hodgson/PORTALS-2783

PORTALS-2783

packages/synapse-react-client/src/components/AccessRequirementList/RequirementItem/SelfSignAccessRequirementItem.stories.tsx

@@ -5,7 +5,11 @@ import {
   SynapseContextConsumer,
   SynapseContextProvider,
 } from '../../../utils/context/SynapseContext'
-import { mockSelfSignAccessRequirement } from '../../../mocks/mockAccessRequirements'
+import {
+  mockSelfSignAccessRequirement,
+  mockToUAccessRequirement,
+  mockToUAccessRequirementWithWiki,
+} from '../../../mocks/mockAccessRequirements'
 import { MOCK_REPO_ORIGIN } from '../../../utils/functions/getEndpoint'
 import { rest } from 'msw'
 import {
@@ -100,3 +104,85 @@ export const RequiresUnmetCertificationAndValidation: Story = {
     },
   },
 }
+
+export const LegacyTermsOfUse: Story = {
+  args: {
+    accessRequirement: mockToUAccessRequirement,
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        // ...getHandlers(MOCK_REPO_ORIGIN),
+        ...getAccessRequirementHandlers(MOCK_REPO_ORIGIN),
+        ...getWikiHandlers(MOCK_REPO_ORIGIN),
+        getCurrentUserCertifiedValidatedHandler(MOCK_REPO_ORIGIN, false, false),
+        rest.get(
+          `${MOCK_REPO_ORIGIN}${ACCESS_REQUIREMENT_STATUS(':id')}`,
+
+          async (req, res, ctx) => {
+            const response: AccessRequirementStatus = {
+              accessRequirementId: req.params.id as string,
+              concreteType:
+                'org.sagebionetworks.repo.model.dataaccess.BasicAccessRequirementStatus',
+              isApproved: false,
+            }
+            return res(ctx.status(200), ctx.json(response))
+          },
+        ),
+        rest.post(
+          `${MOCK_REPO_ORIGIN}${ACCESS_APPROVAL}`,
+          async (req, res, ctx) => {
+            const response: AccessApproval = {
+              requirementId: mockToUAccessRequirement.id,
+              submitterId: MOCK_USER_ID.toString(),
+              accessorId: MOCK_USER_ID.toString(),
+              state: ApprovalState.APPROVED,
+            }
+            return res(ctx.status(201), ctx.json(response))
+          },
+        ),
+      ],
+    },
+  },
+}
+
+export const LegacyTermsOfUseWithWiki: Story = {
+  args: {
+    accessRequirement: mockToUAccessRequirementWithWiki,
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        // ...getHandlers(MOCK_REPO_ORIGIN),
+        ...getAccessRequirementHandlers(MOCK_REPO_ORIGIN),
+        ...getWikiHandlers(MOCK_REPO_ORIGIN),
+        getCurrentUserCertifiedValidatedHandler(MOCK_REPO_ORIGIN, false, false),
+        rest.get(
+          `${MOCK_REPO_ORIGIN}${ACCESS_REQUIREMENT_STATUS(':id')}`,
+
+          async (req, res, ctx) => {
+            const response: AccessRequirementStatus = {
+              accessRequirementId: req.params.id as string,
+              concreteType:
+                'org.sagebionetworks.repo.model.dataaccess.BasicAccessRequirementStatus',
+              isApproved: false,
+            }
+            return res(ctx.status(200), ctx.json(response))
+          },
+        ),
+        rest.post(
+          `${MOCK_REPO_ORIGIN}${ACCESS_APPROVAL}`,
+          async (req, res, ctx) => {
+            const response: AccessApproval = {
+              requirementId: mockToUAccessRequirementWithWiki.id,
+              submitterId: MOCK_USER_ID.toString(),
+              accessorId: MOCK_USER_ID.toString(),
+              state: ApprovalState.APPROVED,
+            }
+            return res(ctx.status(201), ctx.json(response))
+          },
+        ),
+      ],
+    },
+  },
+}

packages/synapse-react-client/src/components/AccessRequirementList/RequirementItem/SelfSignAccessRequirementItem.tsx

@@ -61,8 +61,7 @@ export default function SelfSignAccessRequirementItem(
 
   const { data: wikiPage } = useGetAccessRequirementWikiPageKey(
     accessRequirement.id.toString(),
-    // TermsOfUse ARs have the terms embedded in the AR, there is no Wiki.
-    { enabled: !isTermsOfUse },
+    // TermsOfUse ARs may have the terms embedded in the AR or an associated Wiki.
   )
 
   const [showTerms, setShowTerms] = useState<boolean>(false)
@@ -89,7 +88,7 @@ export default function SelfSignAccessRequirementItem(
   }
 
   let renderedTerms = <></>
-  if (isTermsOfUse) {
+  if (isTermsOfUse && accessRequirement.termsOfUse) {
     renderedTerms = <MarkdownSynapse markdown={accessRequirement.termsOfUse} />
   } else if (wikiPage) {
     renderedTerms = (

packages/synapse-react-client/src/components/AccessRequirementList/RequirementItem/UnmanagedACTAccessRequirementItem.stories.tsx

@@ -0,0 +1,144 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import {
+  SynapseContextConsumer,
+  SynapseContextProvider,
+} from '../../../utils/context/SynapseContext'
+import {
+  mockACTAccessRequirement,
+  mockACTAccessRequirementWithWiki,
+  mockToUAccessRequirement,
+  mockToUAccessRequirementWithWiki,
+} from '../../../mocks/mockAccessRequirements'
+import { MOCK_REPO_ORIGIN } from '../../../utils/functions/getEndpoint'
+import { rest } from 'msw'
+import {
+  ACCESS_APPROVAL,
+  ACCESS_REQUIREMENT_STATUS,
+} from '../../../utils/APIConstants'
+import {
+  AccessApproval,
+  AccessRequirementStatus,
+  ApprovalState,
+} from '@sage-bionetworks/synapse-types'
+import { MOCK_USER_ID } from '../../../mocks/user/mock_user_profile'
+import { getAccessRequirementHandlers } from '../../../mocks/msw/handlers/accessRequirementHandlers'
+import { getWikiHandlers } from '../../../mocks/msw/handlers/wikiHandlers'
+import { getCurrentUserCertifiedValidatedHandler } from '../../../mocks/msw/handlers/userProfileHandlers'
+import UnmanagedACTAccessRequirementItem from './UnmanagedACTAccessRequirementItem'
+
+const meta: Meta = {
+  title:
+    'Governance/Data Access Request Flow/Requirements/UnmanagedACTAccessRequirementItem',
+  component: UnmanagedACTAccessRequirementItem,
+  argTypes: {
+    isAuthenticated: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+  },
+  decorators: [
+    (Story, args) => (
+      <SynapseContextConsumer>
+        {context => (
+          <SynapseContextProvider
+            synapseContext={{
+              ...context,
+              accessToken: args.isAuthenticated
+                ? context.accessToken ?? 'fake token'
+                : undefined,
+            }}
+          >
+            <Story />
+          </SynapseContextProvider>
+        )}
+      </SynapseContextConsumer>
+    ),
+  ],
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const LegacyACTAccessRequirement: Story = {
+  args: {
+    accessRequirement: mockACTAccessRequirement,
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        // ...getHandlers(MOCK_REPO_ORIGIN),
+        ...getAccessRequirementHandlers(MOCK_REPO_ORIGIN),
+        ...getWikiHandlers(MOCK_REPO_ORIGIN),
+        getCurrentUserCertifiedValidatedHandler(MOCK_REPO_ORIGIN, false, false),
+        rest.get(
+          `${MOCK_REPO_ORIGIN}${ACCESS_REQUIREMENT_STATUS(':id')}`,
+
+          async (req, res, ctx) => {
+            const response: AccessRequirementStatus = {
+              accessRequirementId: req.params.id as string,
+              concreteType:
+                'org.sagebionetworks.repo.model.dataaccess.BasicAccessRequirementStatus',
+              isApproved: false,
+            }
+            return res(ctx.status(200), ctx.json(response))
+          },
+        ),
+        rest.post(
+          `${MOCK_REPO_ORIGIN}${ACCESS_APPROVAL}`,
+          async (req, res, ctx) => {
+            const response: AccessApproval = {
+              requirementId: mockToUAccessRequirement.id,
+              submitterId: MOCK_USER_ID.toString(),
+              accessorId: MOCK_USER_ID.toString(),
+              state: ApprovalState.APPROVED,
+            }
+            return res(ctx.status(201), ctx.json(response))
+          },
+        ),
+      ],
+    },
+  },
+}
+
+export const LegacyACTAccessRequirementWithWiki: Story = {
+  args: {
+    accessRequirement: mockACTAccessRequirementWithWiki,
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        // ...getHandlers(MOCK_REPO_ORIGIN),
+        ...getAccessRequirementHandlers(MOCK_REPO_ORIGIN),
+        ...getWikiHandlers(MOCK_REPO_ORIGIN),
+        getCurrentUserCertifiedValidatedHandler(MOCK_REPO_ORIGIN, false, false),
+        rest.get(
+          `${MOCK_REPO_ORIGIN}${ACCESS_REQUIREMENT_STATUS(':id')}`,
+
+          async (req, res, ctx) => {
+            const response: AccessRequirementStatus = {
+              accessRequirementId: req.params.id as string,
+              concreteType:
+                'org.sagebionetworks.repo.model.dataaccess.BasicAccessRequirementStatus',
+              isApproved: false,
+            }
+            return res(ctx.status(200), ctx.json(response))
+          },
+        ),
+        rest.post(
+          `${MOCK_REPO_ORIGIN}${ACCESS_APPROVAL}`,
+          async (req, res, ctx) => {
+            const response: AccessApproval = {
+              requirementId: mockToUAccessRequirementWithWiki.id,
+              submitterId: MOCK_USER_ID.toString(),
+              accessorId: MOCK_USER_ID.toString(),
+              state: ApprovalState.APPROVED,
+            }
+            return res(ctx.status(201), ctx.json(response))
+          },
+        ),
+      ],
+    },
+  },
+}

packages/synapse-react-client/src/components/AccessRequirementList/RequirementItem/UnmanagedACTAccessRequirementItem.test.tsx

@@ -55,7 +55,7 @@ const approvedStatus: AccessRequirementStatus = {
 
 // The first 54 characters of the instructions map to the first sentence. This selection has no markdown formatting, so it's easy to query.
 const mockInstructionsToQuery =
-  mockACTAccessRequirement.actContactInfo.substring(0, 54)
+  mockACTAccessRequirement.actContactInfo!.substring(0, 54)
 
 async function testInstructionsToggle() {
   await waitFor(() => {

packages/synapse-react-client/src/components/AccessRequirementList/RequirementItem/UnmanagedACTAccessRequirementItem.tsx

@@ -4,7 +4,10 @@ import { ACTAccessRequirement } from '@sage-bionetworks/synapse-types'
 import { useSynapseContext } from '../../../utils/context/SynapseContext'
 import { PRODUCTION_ENDPOINT_CONFIG } from '../../../utils/functions/getEndpoint'
 import { Box, ButtonProps, Link, Typography } from '@mui/material'
-import { useGetAccessRequirementStatus } from '../../../synapse-queries'
+import {
+  useGetAccessRequirementStatus,
+  useGetAccessRequirementWikiPageKey,
+} from '../../../synapse-queries'
 import RequirementItem from './RequirementItem'
 import { RequirementItemStatus } from '../AccessApprovalCheckMark'
 
@@ -30,6 +33,11 @@ export default function UnmanagedACTAccessRequirementItem(
   const { data: accessRequirementStatus, isLoading: isLoadingStatus } =
     useGetAccessRequirementStatus(String(accessRequirement.id))
 
+  const { data: wikiPage } = useGetAccessRequirementWikiPageKey(
+    accessRequirement.id.toString(),
+    // ACT ARs may have the contact info embedded in the AR or may have an associated Wiki.
+  )
+
   const isApproved = accessRequirementStatus?.isApproved
 
   const [showACTContactInfoInstructions, setShowACTContactInfoInstructions] =
@@ -77,6 +85,18 @@ export default function UnmanagedACTAccessRequirementItem(
     ]
   }
 
+  let renderedTerms = <></>
+  if (actContactInfo) {
+    renderedTerms = <MarkdownSynapse markdown={actContactInfo} />
+  } else if (wikiPage) {
+    renderedTerms = (
+      <MarkdownSynapse
+        wikiId={wikiPage?.wikiPageId}
+        ownerId={wikiPage?.ownerObjectId}
+        objectType={wikiPage?.ownerObjectType}
+      />
+    )
+  }
   return (
     <RequirementItem
       data-testid={'UnmanagedACTAccessRequirementItem'}
@@ -107,13 +127,11 @@ export default function UnmanagedACTAccessRequirementItem(
             </Link>
           </Typography>
           {showACTContactInfoInstructions && (
-            <Box sx={{ my: 1 }}>
-              <MarkdownSynapse markdown={actContactInfo} />
-            </Box>
+            <Box sx={{ my: 1 }}>{renderedTerms}</Box>
           )}
         </>
       ) : (
-        <MarkdownSynapse markdown={actContactInfo} />
+        renderedTerms
       )}
     </RequirementItem>
   )