diff --git a/ui/src/app/metadata/copy/CopySource.js b/ui/src/app/metadata/copy/CopySource.js index 1034acde5..4800ced60 100644 --- a/ui/src/app/metadata/copy/CopySource.js +++ b/ui/src/app/metadata/copy/CopySource.js @@ -1,13 +1,14 @@ import React from 'react'; import { useForm } from 'react-hook-form'; -import Check from 'react-bootstrap/FormCheck'; import Button from 'react-bootstrap/Button'; +import Form from 'react-bootstrap/Form'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArrowCircleRight, faAsterisk, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'; import { Translate } from '../../i18n/components/translate'; import { EntityTypeahead } from './EntityTypeahead'; import kebabCase from 'lodash/kebabCase'; +import { useMetadataSources } from '../hooks/api'; const sections = [ { i18nKey: 'organizationInformation', property: 'organization' }, @@ -23,6 +24,8 @@ const sections = [ export function CopySource({ copy, onNext }) { + const { data = [] } = useMetadataSources({ cachePolicy: 'no-cache' }, []); + const [selected, setSelected] = React.useState(copy.properties); const onSelect = (item, checked) => { let s = [...selected]; @@ -59,9 +62,11 @@ export function CopySource({ copy, onNext }) { setValue('properties', selected); }, [selected, setValue]); + const sourceIds = data.map(p => p.entityId); + React.useEffect(() => { - console.log(errors, formState); - }, [errors, formState]); + console.log(errors, isValid); + }, [errors]); return ( <> @@ -98,50 +103,52 @@ export function CopySource({ copy, onNext }) {
-
- - - + + + Entity ID to copy is Required - -
-
- - + - Service Resolver Name is required - -
-
- - + - + {...register('entityId', { + required: true, validate: { + unique: v => !(sourceIds.indexOf(v) > -1) + } + })} /> + {errors?.entityId?.type === 'required' && Entity ID is required } {errors?.entityId?.type === 'unique' && Entity ID must be unique } - -
+ +
@@ -158,7 +165,7 @@ export function CopySource({ copy, onNext }) { - data.map(d => d.entityId), [data]); @@ -12,7 +12,9 @@ export function EntityTypeahead ({control, name}) { } = useController({ name, control, - rules: { required: true }, + rules: { + required: true + }, defaultValue: "", }); @@ -22,7 +24,8 @@ export function EntityTypeahead ({control, name}) { onChange={(selected) => onChange(selected ? data.find(e => e.entityId === selected[0]) : '')} defaultInputValue={value ? value.entityId : ''} options={entities} - id="copySourceTypeahead" + required={true} + id={id} /> ) } \ No newline at end of file diff --git a/ui/src/app/metadata/copy/SaveCopy.js b/ui/src/app/metadata/copy/SaveCopy.js index 0c48515e4..9381d662a 100644 --- a/ui/src/app/metadata/copy/SaveCopy.js +++ b/ui/src/app/metadata/copy/SaveCopy.js @@ -1,5 +1,4 @@ import React from 'react'; -import Check from 'react-bootstrap/FormCheck'; import Button from 'react-bootstrap/Button'; import { faArrowCircleLeft, faCheck, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -12,9 +11,6 @@ import { removeNull } from '../../core/utility/remove_null'; import { MetadataConfiguration } from '../component/MetadataConfiguration'; import Translate from '../../i18n/components/translate'; -import { InfoIcon } from '../../form/component/InfoIcon'; - - export function useCopiedModel (copy) { const { properties, target, serviceProviderName, entityId } = copy; const copied = removeNull(properties.reduce((c, section) => ({ ...c, ...{ [section]: target[section] } }), {})); @@ -37,7 +33,7 @@ export function SaveCopy ({ copy, saving, onSave, onBack }) { const model = useCopiedModel(copy); const configuration = useCopiedConfiguration(model, schema, definition); - const { register, handleSubmit } = useForm({ + const { handleSubmit } = useForm({ mode: 'onChange', reValidateMode: 'onBlur', defaultValues: { @@ -59,61 +55,42 @@ export function SaveCopy ({ copy, saving, onSave, onBack }) { return ( <> -
-
-
    -
  • - -
    • -
  • -

    - - - - Finished! -

    -
    • -
  • - -
    • -
-
+
+
+
    +
  • + +
    • +
  • +

    + + + + Finished! +

    +
    • +
  • + +
    • +
-
-
-
-
-
- - - -
-
-
-
-
- +
); diff --git a/ui/src/app/metadata/view/MetadataCopy.js b/ui/src/app/metadata/view/MetadataCopy.js index 1584e4897..af4567b59 100644 --- a/ui/src/app/metadata/view/MetadataCopy.js +++ b/ui/src/app/metadata/view/MetadataCopy.js @@ -5,12 +5,15 @@ import { CopySource } from '../copy/CopySource'; import { SaveCopy } from '../copy/SaveCopy'; import { useMetadataEntity } from '../hooks/api'; import { useHistory } from 'react-router'; +import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications'; export function MetadataCopy ({ onShowNav }) { const { post, response, loading } = useMetadataEntity('source'); const history = useHistory(); + const dispatch = useNotificationDispatcher(); + const [copy, setCopy] = React.useState({ target: null, serviceProviderName: null, @@ -34,6 +37,12 @@ export function MetadataCopy ({ onShowNav }) { await post('', data); if (response.ok) { history.push('/'); + } else { + const { errorCode, errorMessage, cause } = response.data; + dispatch(createNotificationAction( + `${errorCode}: ${errorMessage} ${cause ? `-${cause}` : ''}`, + NotificationTypes.ERROR + )); } }