fix: collapse gov comments to organizations box by default

bcgov · Dec 11, 2024 · a4300b1 · a4300b1
1 parent f437eec
commit a4300b1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/frontend/src/views/Transfers/components/Comments.jsx b/frontend/src/views/Transfers/components/Comments.jsx
@@ -6,9 +6,14 @@ import { useFormContext } from 'react-hook-form'
 import { LabelBox } from './LabelBox'
 import { useTranslation } from 'react-i18next'
 
-export const Comments = ({ editorMode, isGovernmentUser, commentField }) => {
+export const Comments = ({
+  editorMode,
+  isGovernmentUser,
+  commentField,
+  isDefaultExpanded = false
+}) => {
   const { t } = useTranslation(['transfer'])
-  const [isExpanded, setIsExpanded] = useState(true)
+  const [isExpanded, setIsExpanded] = useState(!isDefaultExpanded)
 
   const {
     register,

diff --git a/frontend/src/views/Transfers/components/TransferView.jsx b/frontend/src/views/Transfers/components/TransferView.jsx
@@ -1,14 +1,14 @@
 import BCBox from '@/components/BCBox'
 import InternalComments from '@/components/InternalComments'
 import { Role } from '@/components/Role'
-import { govRoles } from '@/constants/roles'
+import { roles, govRoles } from '@/constants/roles'
 import {
   TRANSFER_STATUSES,
   getAllTerminalTransferStatuses
 } from '@/constants/statuses'
 import { useCurrentUser } from '@/hooks/useCurrentUser'
 import { decimalFormatter } from '@/utils/formatters'
-import { Typography } from '@mui/material'
+import BCTypography from '@/components/BCTypography'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import TransferHistory from './TransferHistory'
@@ -18,8 +18,9 @@ import { CommentList } from '@/views/Transfers/components/CommentList'
 
 export const TransferView = ({ transferId, editorMode, transferData }) => {
   const { t } = useTranslation(['common', 'transfer'])
-  const { data: currentUser, sameOrganization } = useCurrentUser()
+  const { data: currentUser, sameOrganization, hasAnyRole } = useCurrentUser()
   const isGovernmentUser = currentUser?.isGovernmentUser
+  const isAnalyst = hasAnyRole(roles.analyst)
   const {
     currentStatus: { status: transferStatus } = {},
     toOrganization: { name: toOrganization, organizationId: toOrgId } = {},
@@ -55,7 +56,7 @@ export const TransferView = ({ transferId, editorMode, transferData }) => {
           backgroundColor: 'transparent.main'
         }}
       >
-        <Typography variant="body4">
+        <BCTypography variant="body4">
           <b>{fromOrganization}</b>
           {t('transfer:transfers')}
           <b>{quantity}</b>
@@ -64,7 +65,7 @@ export const TransferView = ({ transferId, editorMode, transferData }) => {
           <b>${decimalFormatter({ value: pricePerUnit })}</b>
           {t('transfer:complianceUnitsPerTvo')}
           <b>${decimalFormatter(totalValue)}</b> CAD.
-        </Typography>
+        </BCTypography>
       </BCBox>
       {/* Comments */}
       {transferData?.comments.length > 0 && (
@@ -84,6 +85,7 @@ export const TransferView = ({ transferId, editorMode, transferData }) => {
               sameOrganization(toOrgId) &&
               'toOrgComment')
           }
+          isDefaultExpanded={isAnalyst}
         />
       )}
 

diff --git a/frontend/src/views/Transfers/components/__tests__/Comments.test.jsx b/frontend/src/views/Transfers/components/__tests__/Comments.test.jsx
@@ -110,4 +110,30 @@ describe('Comments Component', () => {
     const textField = getByRole('textbox')
     expect(textField).toHaveAttribute('id', 'external-comments')
   })
+
+  it('is initially expanded by default when isDefaultExpanded is false', () => {
+    render(
+      <MockFormProvider>
+        <Comments commentField="comments" isDefaultExpanded={false} />
+      </MockFormProvider>,
+      { wrapper }
+    )
+    // With isDefaultExpanded=false, the component should start expanded
+    expect(screen.getByTestId('external-comments')).toBeVisible()
+  })
+
+  it('is initially collapsed when isDefaultExpanded is true', async () => {
+    render(
+      <MockFormProvider>
+        <Comments commentField="comments" isDefaultExpanded={true} />
+      </MockFormProvider>,
+      { wrapper }
+    )
+    // With isDefaultExpanded=true, we useState(!true)=false, so it should start collapsed
+    await waitFor(() =>
+      expect(
+        screen.getByTestId('external-comments').parentElement
+      ).not.toBeVisible()
+    )
+  })
 })