Merge pull request #1436 from bcgov/fix/hamed-collapse-gov-comment-bo…

…x-1413 Fix: Collapse Government Comments Box by Default for Analysts - #1413
bcgov · Dec 12, 2024 · 3c014c2 · 3c014c2
2 parents be0e6b4 + 242fba0
commit 3c014c2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 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,7 +1,7 @@
 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
@@ -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 } = {},
@@ -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()
+    )
+  })
 })