MMT-3907: Added provider selector to the form.

nasa · Sep 27, 2024 · 8f22fdd · 8f22fdd
1 parent bed1349
commit 8f22fdd
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 76 deletions.
diff --git a/static/src/js/components/PermissionForm/PermissionForm.jsx b/static/src/js/components/PermissionForm/PermissionForm.jsx
@@ -37,6 +37,7 @@ import { cloneDeep } from '@apollo/client/utilities'
 import {
   GET_COLLECTION_FOR_PERMISSION_FORM
 } from '@/js/operations/queries/getCollectionForPermissionForm'
+import useAvailableProviders from '@/js/hooks/useAvailableProviders'
 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.
  *
@@ -184,7 +183,7 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => {
   const [focusField, setFocusField] = useState(null)
   const [uiSchema, setUiSchema] = useState(collectionPermissionUiSchema)
 
-  const [chooseProviderModalOpen, setChooseProviderModalOpen] = useState(false)
+  const { providerIds } = useAvailableProviders()
 
   const [createAclMutation] = useMutation(CREATE_ACL)
   const [updateAclMutation] = useMutation(UPDATE_ACL, {
@@ -198,11 +197,28 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => {
     }
   })
 
+  useEffect(() => {
+    setProviderId(draft?.formData?.providerId)
+  }, [draft])
+
+  useEffect(() => {
+    const newUiSchema = cloneDeep(uiSchema)
+    newUiSchema.providerId['ui:options'].enumOptions = providerIds
+    setUiSchema(newUiSchema)
+  }, [providerIds])
+
   useEffect(() => {
     if (providerId) {
       const newUiSchema = cloneDeep(uiSchema)
       newUiSchema.collectionSelection.selectedCollections['ui:providerId'] = providerId
       setUiSchema(newUiSchema)
+      setDraft({
+        ...draft,
+        formData: {
+          ...draft.formData,
+          providerId
+        }
+      })
     }
   }, [providerId])
 
@@ -302,30 +318,30 @@ const PermissionForm = ({ selectedCollectionsPageSize }) => {
   const showGranuleFields = (formData) => {
     if (formData.accessPermission?.granule) {
       const newUiSchema = {
-        ...collectionPermissionUiSchema,
+        ...uiSchema,
         accessConstraintFilter: {
-          ...collectionPermissionUiSchema.accessConstraintFilter,
+          ...uiSchema.accessConstraintFilter,
           granuleAccessConstraint: {
-            ...collectionPermissionUiSchema.accessConstraintFilter.granuleAccessConstraint,
+            ...uiSchema.accessConstraintFilter.granuleAccessConstraint,
             'ui:disabled': false
           }
         },
         temporalConstraintFilter: {
-          ...collectionPermissionUiSchema.temporalConstraintFilter,
+          ...uiSchema.temporalConstraintFilter,
           granuleTemporalConstraint: {
-            ...collectionPermissionUiSchema.temporalConstraintFilter.granuleTemporalConstraint,
+            ...uiSchema.temporalConstraintFilter.granuleTemporalConstraint,
             'ui:disabled': false
           }
         }
       }
       setUiSchema(newUiSchema)
     } else {
       const newUiSchema = {
-        ...collectionPermissionUiSchema,
+        ...uiSchema,
         accessConstraintFilter: {
-          ...collectionPermissionUiSchema.accessConstraintFilter,
+          ...uiSchema.accessConstraintFilter,
           granuleAccessConstraint: {
-            ...collectionPermissionUiSchema.accessConstraintFilter.granuleAccessConstraint,
+            ...uiSchema.accessConstraintFilter.granuleAccessConstraint,
             'ui:disabled': true
           }
         }
@@ -731,75 +747,51 @@ 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={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>
   )
 }
 

diff --git a/static/src/js/schemas/collectionPermission.js b/static/src/js/schemas/collectionPermission.js
@@ -10,6 +10,10 @@ const collectionPermission = {
       minLength: 1,
       maxLength: 85
     },
+    providerId: {
+      description: 'The provider id of the collection permission.',
+      type: 'string'
+    },
     accessPermission: {
       $ref: '#/definitions/accessPermissionType'
     },
@@ -26,7 +30,7 @@ const collectionPermission = {
       type: 'object'
     }
   },
-  required: ['name', 'collectionSelection', 'accessPermission', 'groupPermissions'],
+  required: ['name', 'providerId', 'collectionSelection', 'accessPermission', 'groupPermissions'],
 
   definitions: {
     collectionSelectionType: {

diff --git 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: ['providerId']
+                  }
+                },
                 {
                   'ui:col': {
                     style: {
@@ -78,6 +85,13 @@ const collectionPermissionUiSchema = {
       }
     ]
   },
+  providerId: {
+    'ui:required': true,
+    'ui:widget': CustomSelectWidget,
+    'ui:options': {
+      enumOptions: []
+    }
+  },
   collectionSelection: {
     'ui:required': true,
     'ui:field': 'layout',