diff --git a/static/src/js/components/CollectionSelector/CollectionSelector.jsx b/static/src/js/components/CollectionSelector/CollectionSelector.jsx index 56b22f7fa..60cee284d 100644 --- a/static/src/js/components/CollectionSelector/CollectionSelector.jsx +++ b/static/src/js/components/CollectionSelector/CollectionSelector.jsx @@ -28,8 +28,9 @@ import { useLazyQuery, useSuspenseQuery } from '@apollo/client' import { GET_PERMISSION_COLLECTIONS } from '@/js/operations/queries/getPermissionCollections' -import Button from '../Button/Button' -import For from '../For/For' +import useAppContext from '@/js/hooks/useAppContext' +import Button from '@/js/components/Button/Button' +import For from '@/js/components/For/For' import './CollectionSelector.scss' @@ -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 } diff --git a/static/src/js/components/CollectionSelector/__tests__/CollectionSelector.test.jsx b/static/src/js/components/CollectionSelector/__tests__/CollectionSelector.test.jsx index e779f81f8..8c57b209a 100644 --- a/static/src/js/components/CollectionSelector/__tests__/CollectionSelector.test.jsx +++ b/static/src/js/components/CollectionSelector/__tests__/CollectionSelector.test.jsx @@ -11,7 +11,8 @@ import userEvent from '@testing-library/user-event' import { GET_PERMISSION_COLLECTIONS } from '@/js/operations/queries/getPermissionCollections' -import CollectionSelector from '../CollectionSelector' +import AppContext from '@/js/context/AppContext' +import CollectionSelector from '@/js/components/CollectionSelector/CollectionSelector' const setup = ({ additionalMocks = [], @@ -25,58 +26,66 @@ const setup = ({ } render( - + - - - - - + }, ...additionalMocks] + } + > + + + + + ) return { @@ -232,6 +241,7 @@ describe('CollectionSelector', () => { variables: { params: { options: { shortName: { pattern: true } }, + provider: 'MMT_2', shortName: 'C*', limit: 100 } diff --git a/static/src/js/components/Layout/Layout.jsx b/static/src/js/components/Layout/Layout.jsx index a9566f550..befc725e2 100644 --- a/static/src/js/components/Layout/Layout.jsx +++ b/static/src/js/components/Layout/Layout.jsx @@ -236,7 +236,7 @@ const Layout = ({ className, displayNav }) => { naked Icon={FaUserAlt} > - {`${user.name} `} + {`${user?.name} `} { const [focusField, setFocusField] = useState(null) const [uiSchema, setUiSchema] = useState(collectionPermissionUiSchema) + const [schema, setSchema] = useState(collectionPermission) - const [chooseProviderModalOpen, setChooseProviderModalOpen] = useState(false) + const { providerIds } = useAvailableProviders() + + useEffect(() => { + if (providerIds.length > 0) { + const clonedSchema = cloneDeep(schema) + clonedSchema.properties.providers.items.enum = providerIds + setSchema(clonedSchema) + } + }, [providerIds]) + + useEffect(() => { + const { formData = {} } = draft || {} + formData.providers = providerId + setDraft({ + ...draft, + formData + }) + }, [providerId]) const [createAclMutation] = useMutation(CREATE_ACL) const [updateAclMutation] = useMutation(UPDATE_ACL, { @@ -467,6 +484,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 +496,8 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => { showGranuleFields(formData) + setProviderId(formData.providers) + setDraft({ ...draft, formData: removeEmpty(formData) @@ -706,76 +727,48 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => { }) } - const handleSetProviderOrSubmit = () => { - if (conceptId === 'new') { - setChooseProviderModalOpen(true) - - return - } - - handleSubmit() - } - return ( - <> - - - -
+ + + -
- - -
- - -
-
- { - 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} + > +
+ + +
+ + + + ) } diff --git a/static/src/js/components/PermissionForm/__tests__/PermissionForm.test.jsx b/static/src/js/components/PermissionForm/__tests__/PermissionForm.test.jsx index 02dec1e3e..a393eec46 100644 --- a/static/src/js/components/PermissionForm/__tests__/PermissionForm.test.jsx +++ b/static/src/js/components/PermissionForm/__tests__/PermissionForm.test.jsx @@ -1,8 +1,7 @@ import { render, screen, - waitFor, - within + waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import React, { Suspense } from 'react' @@ -33,8 +32,8 @@ import errorLogger from '@/js/utils/errorLogger' import { GET_COLLECTION_FOR_PERMISSION_FORM } from '@/js/operations/queries/getCollectionForPermissionForm' -import PermissionForm from '../PermissionForm' -import ErrorBoundary from '../../ErrorBoundary/ErrorBoundary' +import PermissionForm from '@/js/components/PermissionForm/PermissionForm' +import ErrorBoundary from '@/js/components/ErrorBoundary/ErrorBoundary' vi.mock('@/js/utils/errorLogger') vi.mock('@/js/hooks/useAvailableProviders') @@ -163,6 +162,7 @@ describe('PermissionForm', () => { variables: { catalogItemIdentity: { name: 'Test Name', + providerId: 'MMT_2', collectionApplicable: false, granuleApplicable: true, collectionIdentifier: { @@ -227,7 +227,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -301,7 +301,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -364,31 +364,28 @@ describe('PermissionForm', () => { await user.type(minValue[1], '1') await user.type(maxValue[1], '10') - const groupSearch = screen.getAllByRole('combobox') - await user.click(groupSearch[3]) + // Click MMT_2 in provider dropdown + const combos = screen.getAllByRole('combobox') + await user.click(combos[0]) + const providerOption = screen.getByRole('option', { name: 'MMT_2' }) + await user.click(providerOption) + // Click group search + await user.click(combos[4]) const option = screen.getByRole('option', { name: 'Mock group MMT_2' }) await user.click(option) - - await user.click(groupSearch[3]) + await user.click(combos[4]) const option2 = screen.getByRole('option', { name: 'All Registered Users' }) await user.click(option2) - await user.click(groupSearch[4]) - + await user.click(combos[5]) const option3 = screen.getByRole('option', { name: 'All Guest User' }) await user.click(option3) const submitButton = screen.getByRole('button', { name: 'Submit' }) await user.click(submitButton) - const modal = screen.getByRole('dialog') - const modalButton = within(modal).getByRole('button', { - name: 'Submit' - }) - await user.click(modalButton) - expect(navigateSpy).toHaveBeenCalledTimes(1) expect(navigateSpy).toHaveBeenCalledWith('/permissions/ACL1000000-MMT') }) @@ -426,7 +423,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -523,7 +520,8 @@ describe('PermissionForm', () => { minValue: 1 } }, - name: 'Test Name' + name: 'Test Name', + providerId: 'MMT_2' }, groupPermissions: [{ permissions: ['read', 'order'], @@ -568,7 +566,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -642,7 +640,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -705,23 +703,21 @@ describe('PermissionForm', () => { await user.type(minValue[1], '1') await user.type(maxValue[1], '10') - const groupSearch = screen.getAllByRole('combobox') + const combos = screen.getAllByRole('combobox') // Clicks the searchAndOrderGroup field - await user.click(groupSearch[4]) + await user.click(combos[5]) const option3 = screen.getByRole('option', { name: 'All Guest User' }) await user.click(option3) + // Clicks provider field + await user.click(combos[0]) + const providerOption = screen.getByRole('option', { name: 'MMT_2' }) + await user.click(providerOption) + const submitButton = screen.getByRole('button', { name: 'Submit' }) await user.click(submitButton) - - const modal = screen.getByRole('dialog') - const modalButton = within(modal).getByRole('button', { - name: 'Submit' - }) - await user.click(modalButton) - expect(navigateSpy).toHaveBeenCalledTimes(1) expect(navigateSpy).toHaveBeenCalledWith('/permissions/ACL1000000-MMT') }) @@ -737,6 +733,7 @@ describe('PermissionForm', () => { variables: { catalogItemIdentity: { name: 'Test Name', + providerId: 'MMT_2', collectionApplicable: false, granuleApplicable: false }, @@ -759,32 +756,28 @@ describe('PermissionForm', () => { await user.type(nameField, 'Test Name') - const groupSearch = screen.getAllByRole('combobox') - - await user.click(groupSearch[3]) - + // Click group search field + const combos = screen.getAllByRole('combobox') + await user.click(combos[4]) const option = screen.getByRole('option', { name: 'Mock group MMT_2' }) await user.click(option) + await user.click(combos[4]) - await user.click(groupSearch[3]) - + // Click search, order field const option2 = screen.getByRole('option', { name: 'All Registered Users' }) await user.click(option2) - - await user.click(groupSearch[2]) - + await user.click(combos[3]) const option3 = screen.getByRole('option', { name: 'All Guest User' }) await user.click(option3) + // Clicks provider field + await user.click(combos[0]) + const providerOption = screen.getByRole('option', { name: 'MMT_2' }) + await user.click(providerOption) + const submitButton = screen.getByRole('button', { name: 'Submit' }) await user.click(submitButton) - const modal = screen.getByRole('dialog') - const modalButton = within(modal).getByRole('button', { - name: 'Submit' - }) - await user.click(modalButton) - expect(errorLogger).toHaveBeenCalledTimes(1) expect(errorLogger).toHaveBeenCalledWith( 'Error creating collection permission', @@ -847,7 +840,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -921,7 +914,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -972,7 +965,8 @@ describe('PermissionForm', () => { query: GET_PERMISSION_COLLECTIONS, variables: { params: { - limit: 100 + limit: 100, + provider: 'MMT_2' } } }, @@ -1009,7 +1003,7 @@ describe('PermissionForm', () => { variables: { catalogItemIdentity: { name: 'Mock ACLUpdated Name', - providerId: 'MM_2', + providerId: 'MMT_2', collectionApplicable: true, granuleApplicable: false, collectionIdentifier: { conceptIds: ['C12000000-MMT_2', 'C13000000-MMT_2'] } @@ -1061,7 +1055,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -1135,7 +1129,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: { __typename: 'CollectionList', @@ -1234,7 +1228,7 @@ describe('PermissionForm', () => { collectionApplicable: true, granuleApplicable: false, granuleIdentifier: null, - providerId: 'MM_2' + providerId: 'MMT_2' }, collections: null, groups: { @@ -1324,7 +1318,7 @@ describe('PermissionForm', () => { variables: { catalogItemIdentity: { name: 'Mock ACLUpdated Name', - providerId: 'MM_2', + providerId: 'MMT_2', collectionApplicable: true, granuleApplicable: false }, diff --git a/static/src/js/schemas/collectionPermission.js b/static/src/js/schemas/collectionPermission.js index 354d2029d..497d36976 100644 --- a/static/src/js/schemas/collectionPermission.js +++ b/static/src/js/schemas/collectionPermission.js @@ -10,6 +10,14 @@ const collectionPermission = { minLength: 1, maxLength: 85 }, + providers: { + description: 'The provider of the group.', + type: 'string', + items: { + type: 'string', + enum: ['MMT_1', 'MMT_2'] // Overwritten by PermissionsForm.jsx + } + }, accessPermission: { $ref: '#/definitions/accessPermissionType' }, diff --git a/static/src/js/schemas/uiSchemas/collectionPermission.js b/static/src/js/schemas/uiSchemas/collectionPermission.js index dea48d294..a3dee1451 100644 --- a/static/src/js/schemas/uiSchemas/collectionPermission.js +++ b/static/src/js/schemas/uiSchemas/collectionPermission.js @@ -1,4 +1,5 @@ import CustomCheckboxWidget from '@/js/components/CustomCheckboxWidget/CustomCheckboxWidget' +import CustomSelectWidget from '@/js/components/CustomSelectWidget/CustomSelectWidget' const collectionPermissionUiSchema = { 'ui:submitButtonOptions': { @@ -19,6 +20,12 @@ const collectionPermissionUiSchema = { children: ['name'] } }, + { + 'ui:col': { + md: 2, + children: ['providers'] + } + }, { 'ui:col': { style: { @@ -78,6 +85,10 @@ const collectionPermissionUiSchema = { } ] }, + providers: { + 'ui:required': true, + 'ui:widget': CustomSelectWidget + }, collectionSelection: { 'ui:required': true, 'ui:field': 'layout',