Implemented fix for group change and copy change

TIER · Sep 9, 2022 · d4c3cb3 · d4c3cb3
1 parent 13c512b
commit d4c3cb3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git a/ui/src/app/dashboard/view/SourcesTab.js b/ui/src/app/dashboard/view/SourcesTab.js
@@ -37,7 +37,7 @@ export function SourcesTab () {
     React.useEffect(() => { loadSources() }, []);
 
     async function changeSourceGroup(source, group) {
-        await updater.put(`/${source.id}`, {
+        await updater.put(`/${source.id}/changeGroup/${group}`, {
             ...source,
             idOfOwner: group
         });

diff --git a/ui/src/app/metadata/copy/CopySource.js b/ui/src/app/metadata/copy/CopySource.js
@@ -34,7 +34,7 @@ export function CopySource({ copy, onNext }) {
         setSelected([]);
     };
 
-    const { register, handleSubmit, control, formState, setValue, getValues } = useForm({
+    const { register, handleSubmit, control, formState, setValue, getValues, watch } = useForm({
         mode: 'onChange',
         reValidateMode: 'onBlur',
         defaultValues: {
@@ -47,6 +47,8 @@ export function CopySource({ copy, onNext }) {
         shouldUnregister: false,
     });
 
+    const target = watch('target');
+
     const { errors, isValid } = formState;
 
     React.useEffect(() => {
@@ -92,38 +94,44 @@ export function CopySource({ copy, onNext }) {
                 <div className="col col-xs-12 col-xl-6">
                     <form onSubmit={handleSubmit(onNext)}>
                         <fieldset className="bg-light border rounded p-4">
-                            <Form.Group className={`${errors.target ? 'is-invalid text-danger' : ''}`}>
-                                <Form.Label htmlFor="target">
-                                    <Translate value="label.select-entity-id-to-copy">Select the Entity ID to copy</Translate>
-                                    <FontAwesomeIcon icon={faAsterisk} className="text-danger" />
-                                </Form.Label>
-                                <EntityTypeahead id="target" name="target" control={control} />
+                            <Form.Group className={`mb-3 ${errors.target ? 'is-invalid text-danger' : ''}`}>
+                                <EntityTypeahead id="target" name="target" control={control}>
+                                    <span>
+                                        <Translate value="label.select-entity-id-to-copy">Select the Entity ID to copy</Translate>
+                                        <FontAwesomeIcon icon={faAsterisk} className="text-danger ms-2" />
+                                    </span>
+                                </EntityTypeahead>
                                 <Form.Text id="target-help"
                                         className={`text-danger ${errors?.target?.type === 'required' ? '' : 'sr-only'}`}>
                                     <Translate value="message.target-required">Entity ID to copy is Required</Translate>
                                 </Form.Text>
                             </Form.Group>
-                            <Form.Group className={`${errors.serviceProviderName ? 'text-danger is-invalid' : ''}`}>
+                            <Form.Group className={`mb-3 ${errors.serviceProviderName ? 'text-danger is-invalid' : ''}`}>
                                 <Form.Label htmlFor="serviceProviderName">
+                                    <span>
                                     <Translate value="label.metadata-source-name-dashboard-display-only">Metadata Source Name (Dashboard Display Only)</Translate>
-                                    <FontAwesomeIcon icon={faAsterisk} className="text-danger" />
+                                    <FontAwesomeIcon icon={faAsterisk} className="text-danger ms-2" />
+                                    </span>
                                 </Form.Label>
                                 <Form.Control id="serviceProviderName" type="text" className="form-control"
                                     {...register('serviceProviderName', {required: true})}
-                                    aria-describedby="serviceProviderName-help" />
+                                    aria-describedby="serviceProviderName-help" disabled={!target} />
                                 <Form.Text className={`form-text text-danger ${errors?.serviceProviderName?.type === 'required' ? '' : 'sr-only'}`}
                                     id="serviceProviderName-help">
                                     <Translate value="message.service-resolver-name-required">Service Resolver Name is required</Translate>
                                 </Form.Text>
                             </Form.Group>
                             <Form.Group className={`${errors.entityId ? 'is-invalid text-danger' : ''}`}>
                                 <Form.Label htmlFor="entityId">
+                                    <span>
                                     <Translate value="label.service-resolver-entity-id">New Entity ID</Translate>
-                                    <FontAwesomeIcon icon={faAsterisk} className="text-danger" />
+                                    <FontAwesomeIcon icon={faAsterisk} className="text-danger ms-2" />
+                                    </span>
                                 </Form.Label>
                                 <Form.Control id="entityId" type="text"
                                     isInvalid={errors.entityId}
                                     aria-describedby="entityId-help" 
+                                    disabled={!target}
                                     {...register('entityId', {
                                         required: true, validate: {
                                             unique: v => !(sourceIds.indexOf(v) > -1)

diff --git a/ui/src/app/metadata/copy/EntityTypeahead.js b/ui/src/app/metadata/copy/EntityTypeahead.js
@@ -1,10 +1,16 @@
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Typeahead } from 'react-bootstrap-typeahead';
 import { useController } from 'react-hook-form';
-import { useMetadataSources } from '../hooks/api';
+import { useMetadataEntity, useMetadataSources } from '../hooks/api';
+import Form from 'react-bootstrap/Form';
 
-export function EntityTypeahead ({id, control, name}) {
+export function EntityTypeahead ({id, control, name, children}) {
     const { data = [] } = useMetadataSources({}, []);
+
+    const { get, response, loading } = useMetadataEntity();
+
     const entities = React.useMemo(() => data.map(d => d.entityId), [data]);
 
     const {
@@ -18,14 +24,30 @@ export function EntityTypeahead ({id, control, name}) {
         defaultValue: "",
     });
 
+    const loadSelected = async (selected) => {
+        const toCopy = data.find(e => e.entityId === selected);
+
+        const source = await get(`/${toCopy.id}`);
+        if (response.ok) {
+            onChange(source);
+        }
+        //
+    }
+
     return (
-        <Typeahead
-            {...inputProps}
-            onChange={(selected) => onChange(selected ? data.find(e => e.entityId === selected[0]) : '')}
-            defaultInputValue={value ? value.entityId : ''}
-            options={entities}
-            required={true}
-            id={id}
-        />
+        <React.Fragment>
+            <Form.Label htmlFor="target">
+                {children}
+                {loading && <FontAwesomeIcon icon={faSpinner} size="lg" spin={true} pulse={true} className="ms-2" /> }
+            </Form.Label>
+            <Typeahead
+                {...inputProps}
+                onChange={(selected) => selected && selected.length > 0 ? loadSelected(selected[0]) : null}
+                defaultInputValue={value ? value.entityId : ''}
+                options={entities}
+                required={true}
+                id={id}
+            />
+        </React.Fragment>
     )
 }