MMT-4089: Addressing PR Feedback

Author: mandyparson

static/src/js/components/CollectionAssociationForm/CollectionAssociationForm.jsx

@@ -150,7 +150,7 @@ const CollectionAssociationForm = () => {
   // Validate ummMetadata
   const { errors: validationErrors } = validator.validateFormData(searchFormData, schema)
 
-  // Query to retrieve collections
+  // Query to retrieve collections after 'Search for Collection' button click
   const [
     getCollections,
     {
@@ -166,6 +166,7 @@ const CollectionAssociationForm = () => {
     }
   })
 
+  // Query to retrieve concept after 'Search for Collection' button click
   const [
     getConcept,
     {
@@ -286,14 +287,6 @@ const CollectionAssociationForm = () => {
         if (derivedConceptType === conceptIdTypes.O) {
           navigate(`/order-options/${conceptId}`)
         } else {
-          getConcept({
-            variables: {
-              params: {
-                conceptId
-              }
-            }
-          })
-
           navigate(`/${pluralize(camelCase(derivedConceptType)).toLowerCase()}/${conceptId}/collection-association`)
         }
 

static/src/js/components/ManageCollectionAssociation/ManageCollectionAssociation.jsx

@@ -1,4 +1,8 @@
-import { Col, Row } from 'react-bootstrap'
+import {
+  Alert,
+  Col,
+  Row
+} from 'react-bootstrap'
 import { camelCase } from 'lodash-es'
 import { useMutation, useSuspenseQuery } from '@apollo/client'
 import { useParams } from 'react-router'
@@ -78,13 +82,7 @@ const ManageCollectionAssociation = () => {
   })
 
   const [deleteAssociationMutation] = useMutation(DELETE_ASSOCIATION, {
-    refetchQueries: [
-      {
-        query: conceptTypeQueries[derivedConceptType],
-        variables: params
-      }
-    ],
-    awaitRefetchQueries: true,
+
     onCompleted: () => {
       setShowDeleteModal(false)
 
@@ -95,8 +93,11 @@ const ManageCollectionAssociation = () => {
       })
 
       setCollectionConceptIds([])
-      console.log('refetching in onComplete in ManageCollectionAssociation....')
-      refetch()
+
+      // Gives time for CMR to update data
+      setTimeout(() => {
+        refetch()
+      }, 250)
     },
     onError: () => {
       setShowDeleteModal(false)
@@ -222,10 +223,31 @@ const ManageCollectionAssociation = () => {
 
   const { collections: associatedCollections } = concept
 
-  const { items = [], count } = associatedCollections
+  const { items, count } = associatedCollections
 
   return (
     <div>
+      <Alert className="fst-italic fs-6" variant="warning">
+        <i className="eui-icon eui-fa-info-circle" />
+        {' '}
+        Association operations may take some time. If you are not seeing what you expect below,
+        please
+        {' '}
+        <button
+          className="btn btn-link p-0 text-decoration-underline"
+          style={
+            {
+              color: 'blue',
+              cursor: 'pointer'
+            }
+          }
+          onClick={() => refetch()}
+          aria-label="Refresh the page"
+          type="button"
+        >
+          <i>refresh the page</i>
+        </button>
+      </Alert>
       <ControlledPaginatedContent
         activePage={activePage}
         count={count}

static/src/js/components/ManageCollectionAssociation/__tests__/ManageCollectionAssociation.test.jsx

@@ -11,7 +11,6 @@ import {
 } from 'react-router'
 import { MockedProvider } from '@apollo/client/testing'
 import userEvent from '@testing-library/user-event'
-import * as router from 'react-router'
 import { InMemoryCache, defaultDataIdFromObject } from '@apollo/client'
 
 import NotificationsContext from '@/js/context/NotificationsContext'
@@ -254,19 +253,23 @@ describe('ManageCollectionAssociation', () => {
     })
   })
 
-  describe('when clicking on Add Collection Associations button', () => {
-    test.skip('should navigate to collection-search', async () => {
-      const navigateSpy = vi.fn()
-      vi.spyOn(router, 'useNavigate').mockImplementation(() => navigateSpy)
+  describe('when clicking on refresh button', () => {
+    test('should refetch the data', async () => {
+      const { user } = setup({
+        overrideMocks: [toolRecordSearch, deletedAssociationResponse]
+      })
 
-      const { user } = setup({})
+      await screen.findByText('Showing 2 Collection Associations')
 
-      const addCollectionAssociationButton = await screen.findByRole('button', { name: 'Add Collection Associations' })
+      const refreshButton = screen.getByRole('button', { name: /refresh the page/i })
+      expect(refreshButton).toBeInTheDocument()
 
-      await user.click(addCollectionAssociationButton)
+      await user.click(refreshButton)
 
-      expect(navigateSpy).toHaveBeenCalledWith('/tools/T1200000-TEST/collection-association-search')
-      expect(navigateSpy).toHaveBeenCalledTimes(1)
+      // Check to see that data has been refetched
+      await waitFor(() => {
+        expect(screen.getByText('Showing 1 Collection Association')).toBeInTheDocument()
+      })
     })
   })
 

static/src/js/components/Table/Table.scss

@@ -54,7 +54,6 @@
   th:first-child,
   td:first-child {
     position: sticky;
-    z-index: 1000;
     left: 0;
     max-width: 20rem;
   }