MMT-3907: Fixed Attempting to Update a Collection Permission ACL With Collection From a Different Provider Silently Ignores the User Request

static/src/js/components/CollectionSelector/CollectionSelector.jsx

@@ -28,6 +28,7 @@ import { useLazyQuery, useSuspenseQuery } from '@apollo/client'
 
 import { GET_PERMISSION_COLLECTIONS } from '@/js/operations/queries/getPermissionCollections'
 
+import useAppContext from '@/js/hooks/useAppContext'
 import Button from '../Button/Button'
 import For from '../For/For'
 
@@ -55,10 +56,12 @@ const CollectionSelector = ({ onChange, formData }) => {
  const [highlightedSelected, setHighlightedSelected] = useState({})
 
  const [loading, setLoading] = useState(false)
+ const { providerId } = useAppContext()
 
  const { data: collectionList } = useSuspenseQuery(GET_PERMISSION_COLLECTIONS, {
  variables: {
  params: {
+ provider: providerId,
  limit: 100
  }
  }
@@ -74,11 +77,17 @@ const CollectionSelector = ({ onChange, formData }) => {
  }), {})
 
  const [selectedItems, setSelectedItems] = useState({})
- const [availableItems, setAvailableItems] = useState(availableCollections)
+ const [availableItems, setAvailableItems] = useState([])
+
+ useEffect(() => {
+ setAvailableItems(availableCollections)
+ }, [providerId])
 
  useEffect(() => {
  if (!isEmpty(formData)) {
  setSelectedItems(formData)
+ } else {
+ setSelectedItems({})
  }
  }, [formData])
 
@@ -191,6 +200,7 @@ const CollectionSelector = ({ onChange, formData }) => {
  pattern: true
  }
  },
+ provider: providerId,
  shortName: `${inputValue}*`,
  limit: 100
  }

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

@@ -11,6 +11,7 @@ import userEvent from '@testing-library/user-event'
 
 import { GET_PERMISSION_COLLECTIONS } from '@/js/operations/queries/getPermissionCollections'
 
+import AppContext from '@/js/context/AppContext'
 import CollectionSelector from '../CollectionSelector'
 
 const setup = ({
@@ -25,58 +26,66 @@ const setup = ({
  }
 
  render(
- <MockedProvider mocks={
- [{
- request: {
- query: GET_PERMISSION_COLLECTIONS,
- variables: {
- params: {
- limit: 100
- }
- }
- },
- result: {
- data: {
- collections: {
- items: [
- {
- conceptId: 'C1200444618-MMT_2',
- directDistributionInformation: {
- region: 'us-east-2',
- s3BucketAndObjectPrefixNames: [
- 's3://example1',
- 's3://example2',
- 'prefix_bucket/*'
- ],
- s3CredentialsApiEndpoint: 'https://example.org',
- s3CredentialsApiDocumentationUrl: 'https://example.org'
- },
- shortName: 'Collection 1',
- provider: 'MMT_2',
- entryTitle: 'Mock title of collection 1',
- __typename: 'Collection'
- },
- {
- conceptId: 'C1200482349-MMT_2',
- directDistributionInformation: null,
- shortName: 'Collection 2',
+ <AppContext.Provider value={
+ {
+ providerId: 'MMT_2'
+ }
+ }
+ >
+ <MockedProvider mocks={
+ [
+ {
+ request: {
+ query: GET_PERMISSION_COLLECTIONS,
+ variables: {
+ params: {
  provider: 'MMT_2',
- entryTitle: 'Mock title of collection 2',
- __typename: 'Collection'
+ limit: 100
  }
- ],
- __typename: 'CollectionList'
+ }
+ },
+ result: {
+ data: {
+ collections: {
+ items: [
+ {
+ conceptId: 'C1200444618-MMT_2',
+ directDistributionInformation: {
+ region: 'us-east-2',
+ s3BucketAndObjectPrefixNames: [
+ 's3://example1',
+ 's3://example2',
+ 'prefix_bucket/*'
+ ],
+ s3CredentialsApiEndpoint: 'https://example.org',
+ s3CredentialsApiDocumentationUrl: 'https://example.org'
+ },
+ shortName: 'Collection 1',
+ provider: 'MMT_2',
+ entryTitle: 'Mock title of collection 1',
+ __typename: 'Collection'
+ },
+ {
+ conceptId: 'C1200482349-MMT_2',
+ directDistributionInformation: null,
+ shortName: 'Collection 2',
+ provider: 'MMT_2',
+ entryTitle: 'Mock title of collection 2',
+ __typename: 'Collection'
+ }
+ ],
+ __typename: 'CollectionList'
+ }
+ }
  }
- }
- }
- }, ...additionalMocks]
- }
- >
- <Suspense>
- <CollectionSelector {...props} />
- </Suspense>
- </MockedProvider>
-
+ }, ...additionalMocks]
+ }
+ >
+ <Suspense>
+ <CollectionSelector {...props} />
+ </Suspense>
+ </MockedProvider>
+ </AppContext.Provider>
  )
 
  return {
@@ -232,6 +241,7 @@ describe('CollectionSelector', () => {
  variables: {
  params: {
  options: { shortName: { pattern: true } },
+ provider: 'MMT_2',
  shortName: 'C*',
  limit: 100
  }

static/src/js/components/Layout/Layout.jsx

@@ -236,7 +236,7 @@ const Layout = ({ className, displayNav }) => {
  naked
  Icon={FaUserAlt}
  >
- {`${user.name} `}
+ {`${user?.name} `}
  </Dropdown.Toggle>
 
  <Dropdown.Menu

static/src/js/components/PermissionForm/PermissionForm.jsx

@@ -21,22 +21,23 @@ import saveTypesToHumanizedStringMap from '@/js/constants/saveTypesToHumanizedSt
 import saveTypes from '@/js/constants/saveTypes'
 
 import { useMutation, useSuspenseQuery } from '@apollo/client'
+import { cloneDeep } from '@apollo/client/utilities'
 
 import useAppContext from '@/js/hooks/useAppContext'
 import useNotificationsContext from '@/js/hooks/useNotificationsContext'
+import useAvailableProviders from '@/js/hooks/useAvailableProviders'
 
 import errorLogger from '@/js/utils/errorLogger'
 import removeEmpty from '@/js/utils/removeEmpty'
 
 import { CREATE_ACL } from '@/js/operations/mutations/createAcl'
 import { UPDATE_ACL } from '@/js/operations/mutations/updateAcl'
-
-import CollectionSelectorPage from '@/js/pages/CollectionSelectorPage/CollectionSelectorPage'
-
-import { cloneDeep } from '@apollo/client/utilities'
 import {
  GET_COLLECTION_FOR_PERMISSION_FORM
 } from '@/js/operations/queries/getCollectionForPermissionForm'
+
+import CollectionSelectorPage from '@/js/pages/CollectionSelectorPage/CollectionSelectorPage'
+
 import CustomArrayFieldTemplate from '../CustomArrayFieldTemplate/CustomArrayFieldTemplate'
 import CustomDateTimeWidget from '../CustomDateTimeWidget/CustomDateTimeWidget'
 import CustomFieldTemplate from '../CustomFieldTemplate/CustomFieldTemplate'
@@ -48,8 +49,6 @@ import GridLayout from '../GridLayout/GridLayout'
 import GroupPermissionSelect from '../GroupPermissionSelect/GroupPermissionSelect'
 import KeywordPicker from '../KeywordPicker/KeywordPicker'
 
-import ChooseProviderModal from '../ChooseProviderModal/ChooseProviderModal'
-
 /**
  * Validates the form data for the access constraints and temporal constraints.
  *
@@ -183,8 +182,17 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => {
 
  const [focusField, setFocusField] = useState(null)
  const [uiSchema, setUiSchema] = useState(collectionPermissionUiSchema)
+ const [schema, setSchema] = useState(collectionPermission)
+
+ const { providerIds } = useAvailableProviders()
 
- const [chooseProviderModalOpen, setChooseProviderModalOpen] = useState(false)
+ useEffect(() => {
+ if (providerIds.length > 0) {
+ const clonedSchema = cloneDeep(schema)
+ clonedSchema.properties.providers.items.enum = providerIds
+ setSchema(clonedSchema)
+ }
+ }, [providerIds])
 
  const [createAclMutation] = useMutation(CREATE_ACL)
  const [updateAclMutation] = useMutation(UPDATE_ACL, {
@@ -467,6 +475,8 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => {
  // Call the function to show/hide granule fields based on formData
  showGranuleFields(formData)
 
+ formData.providers = savedProviderId
+
  // Update the draft with formData by removing empty fields
  setDraft({ formData: removeEmpty(formData) })
  }
@@ -477,6 +487,8 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => {
 
  showGranuleFields(formData)
 
+ setProviderId(formData.providers)
+
  setDraft({
  ...draft,
  formData: removeEmpty(formData)
@@ -706,76 +718,48 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => {
  })
  }
 
- const handleSetProviderOrSubmit = () => {
- if (conceptId === 'new') {
- setChooseProviderModalOpen(true)
-
- return
- }
-
- handleSubmit()
- }
-
  return (
- <>
- <Container className="permission-form__container mx-0" fluid>
- <Row>
- <Col>
- <Form
- fields={fields}
- formContext={
- {
- focusField,
- setFocusField
- }
+ <Container className="permission-form__container mx-0" fluid>
+ <Row>
+ <Col>
+ <Form
+ fields={fields}
+ formContext={
+ {
+ focusField,
+ setFocusField
  }
- liveValidate
- widgets={widgets}
- schema={collectionPermission}
- validator={validator}
- templates={templates}
- uiSchema={uiSchema}
- onChange={handleChange}
- formData={removeEmpty(formData)}
- onSubmit={handleSetProviderOrSubmit}
- showErrorList="false"
- customValidate={validate}
- >
- <div className="d-flex gap-2">
- <Button
- type="submit"
- variant="primary"
- >
- {saveTypesToHumanizedStringMap[saveTypes.submit]}
- </Button>
- <Button
- onClick={handleClear}
- variant="secondary"
- >
- Clear
- </Button>
- </div>
- </Form>
- </Col>
- </Row>
- </Container>
- <ChooseProviderModal
- show={chooseProviderModalOpen}
- primaryActionType={saveTypes.submit}
- toggleModal={
- () => {
- setChooseProviderModalOpen(false)
- }
- }
- type="collectionPermission"
- onSubmit={
- () => {
- handleSubmit()
- setChooseProviderModalOpen(false)
- }
- }
- />
- </>
+ }
+ liveValidate
+ widgets={widgets}
+ schema={schema}
+ validator={validator}
+ templates={templates}
+ uiSchema={uiSchema}
+ onChange={handleChange}
+ formData={removeEmpty(formData)}
+ onSubmit={handleSubmit}
+ showErrorList="false"
+ customValidate={validate}
+ >
+ <div className="d-flex gap-2">
+ <Button
+ type="submit"
+ variant="primary"
+ >
+ {saveTypesToHumanizedStringMap[saveTypes.submit]}
+ </Button>
+ <Button
+ onClick={handleClear}
+ variant="secondary"
+ >
+ Clear
+ </Button>
+ </div>
+ </Form>
+ </Col>
+ </Row>
+ </Container>
  )
 }