Fixed UI issues

backend/src/main/resources/i18n/messages.properties

@@ -962,7 +962,7 @@ tooltip.IDTokenLifetime=Lifetime of ID token issued to client
 tooltip.deniedUserInfoAttributes=Specifies IdPAttributes to omit from UserInfo token
 tooltip.resolveAttributes.oauth=Whether to run the attribute resolution/filtering step
 
-label.dynamic-registration=Dynamic registration
+label.dynamic-registration=Dynamic Registration
 label.dynamic-registration-configuration=Dynamic Registration
 action.dynamic-registrations=Dynamic registrations
 action.add-new-dynamic-registration=Add a new dynamic registration
@@ -971,7 +971,7 @@ label.current-dynamic-registrations=Current dynamic registrations
 label.new-dynamic-registration=New dynamic registration
 label.edit-dynamic-registration=Edit dynamic registration
 message.delete-dynamic-registration-title=Delete dynamic registration?
-message.delete-dynamic-registration-body=You are requesting to delete a dynamic registration. If you complete this process the role will be removed. This cannot be undone. Do you wish to continue?
+message.delete-dynamic-registration-body=You are requesting to delete a dynamic registration. If you complete this process the registration will be removed. This cannot be undone. Do you wish to continue?
 label.enable-dynamic-registrations=Enable Dynamic Registrations
 label.approve-dynamic-registrations=Approve Dynamic Registrations
 

ui/src/app/dynamic-registration/component/DynamicRegistrationForm.js

@@ -12,11 +12,13 @@ import Col from 'react-bootstrap/Col';
 
 
 export function DynamicRegistrationForm ({registration = {}, errors = [], loading = false, schema, onSave, onCancel}) {
+    const [touched, setTouched] = React.useState(false);
 
     const { dispatch } = React.useContext(FormContext);
-    const onChange = ({formData, errors}) => {
+    const onChange = ({formData, errors, ...props}) => {
         dispatch(setFormDataAction(formData));
         dispatch(setFormErrorAction(errors));
+        setTouched(true);
     };
 
     const uiSchema = useDynamicRegistrationUiSchema();
@@ -29,7 +31,7 @@ export function DynamicRegistrationForm ({registration = {}, errors = [], loadin
                     <Button variant="info" className="me-2"
                         type="button"
                         onClick={() => onSave(registration)}
-                        disabled={errors.length > 0 || loading}
+                        disabled={!touched || errors.length > 0 || loading}
                         aria-label="Save changes to the dynamic registration. You will return to the dashboard">
                         <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
                         <Translate value="action.save">Save</Translate>
@@ -47,6 +49,7 @@ export function DynamicRegistrationForm ({registration = {}, errors = [], loadin
                     <Form formData={registration}
                         noHtml5Validate={true}
                         onChange={(form) => onChange(form)}
+                        onError={(errors) => console.log(errors)}
                         validate={validator}
                         schema={schema}
                         uiSchema={uiSchema}
@@ -55,6 +58,8 @@ export function DynamicRegistrationForm ({registration = {}, errors = [], loadin
                     </Form>
                 </Col>
             </Row>
+
+            <pre>{JSON.stringify(errors, null, 4)}</pre>
         </div>
     </>)
 }

ui/src/app/dynamic-registration/hoc/DynamicConfigurationDefinition.js

@@ -29,6 +29,12 @@ export const DynamicRegistrationDefinition = {
     schema: `${API_BASE_PATH}/ui/DynamicRegistration`,
 
     uiSchema: {
+        name: {
+            'ui:emptyValue': '',
+        },
+        redirectUris: {
+            'ui:emptyValue': '',
+        },
         layout: {
             groups: [
                 {

ui/src/app/dynamic-registration/view/DynamicRegistrationCreate.js

@@ -13,7 +13,7 @@ export function DynamicRegistrationCreate () {
 
     const history = useHistory();
 
-    const [create, {isSuccess, isFetching: loading}] = useCreateDynamicRegistrationMutation();
+    const [create, {isSuccess, isLoading: loading}] = useCreateDynamicRegistrationMutation();
 
     const save = React.useCallback(async (registration) => await create({registration}), [create]);
 

ui/src/app/dynamic-registration/view/DynamicRegistrationDetail.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, useHistory, useParams } from 'react-router-dom';
-
+import Form from 'react-bootstrap/Form';
 import Translate from '../../i18n/components/translate';
 import FormattedDate from '../../core/components/FormattedDate';
 import Button from 'react-bootstrap/Button';
@@ -15,6 +15,8 @@ import { Schema } from '../../form/Schema';
 import definition from '../hoc/DynamicConfigurationDefinition';
 import { useSelectDynamicRegistrationQuery } from '../../store/dynamic-registration/DynamicRegistrationSlice';
 import { DynamicRegistrationActions } from '../hoc/DynamicRegistrationActions';
+import { useIsAdmin } from '../../core/user/UserContext';
+import { GroupsProvider } from '../../admin/hoc/GroupsProvider';
 
 export function DynamicRegistrationDetail () {
 
@@ -27,13 +29,15 @@ export function DynamicRegistrationDetail () {
         history.push(`/dynamic-registration/${id}/edit`);
     };
 
+    const isAdmin = useIsAdmin();
+
     return (
         <div className="container-fluid p-3">
             <section className="section" tabIndex="0">
                 <div className="section-body px-4 pb-4 border border-info">
                     {detail &&
                     <DynamicRegistrationActions>
-                        {({enable, remove}) => (
+                        {({enable, remove, changeGroup}) => (
                             <React.Fragment>
                             <nav aria-label="breadcrumb">
                                 <ol className="breadcrumb breadcrumb-bar">
@@ -68,6 +72,30 @@ export function DynamicRegistrationDetail () {
                                                     <Translate value="label.by">By</Translate>:&nbsp;
                                                     <span className="author">{detail.idOfOwner }</span>
                                                 </p>
+                                                {isAdmin &&
+                                                    <GroupsProvider>
+                                                        {(groups, removeGroup, loadingGroups) =>
+                                                            <div className="form-inline" style={{maxWidth: '50%'}}>
+                                                                <label className="me-2 mb-2" htmlFor={`group-${detail.name}`}>
+                                                                    <Translate value="action.source-group">Group</Translate>:
+                                                                </label>
+                                                                <Form.Select
+                                                                    id={`group-select-dr`}
+                                                                    name={`group-${detail.id}`}
+                                                                    className="form-control form-control-sm"
+                                                                    onChange={({target: {value}}) => changeGroup({ registration: detail, group: value })}
+                                                                    value={detail.idOfOwner}
+                                                                    disabled={loadingGroups}
+                                                                    disablevalidation="true">
+                                                                    <option>Select Group</option>
+                                                                    {groups.map((g, ridx) => (
+                                                                        <option key={ridx} value={g.resourceId}>{g.name}</option>
+                                                                    ))}
+                                                                </Form.Select>
+                                                            </div>
+                                                        }
+                                                    </GroupsProvider>
+                                                }
                                             </h5>
                                             <div className="d-flex align-items-start btn-group">
                                                 <Button variant={detail.enabled ? 'outline-secondary' : 'outline-secondary' } size="sm" className=""

ui/src/app/form/component/widgets/TextWidget.js

@@ -8,6 +8,7 @@ import Form from "react-bootstrap/Form";
 import Translate from "../../../i18n/components/translate";
 import { InfoIcon } from "../InfoIcon";
 import { useTranslator } from "../../../i18n/hooks";
+import { isNil } from "lodash";
 
 const TextWidget = ({
     id,
@@ -33,7 +34,7 @@ const TextWidget = ({
     const inputType = (type || schema.type) === 'string' ? 'text' : `${type || schema.type}`;
 
     const [touched, setTouched] = React.useState(false);
-    const [fieldValue, setFieldValue] = React.useState(value || value === 0 ? value : "");
+    const [fieldValue, setFieldValue] = React.useState(isNil(value) ? '' : value);
 
     const onCustomBlur = (evt) => {
         setTouched(true);