Updated labels, detail page

TIER · Oct 28, 2022 · 7d448c4 · 7d448c4
1 parent 4e555f3
commit 7d448c4
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 59 deletions.
diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
@@ -944,7 +944,44 @@ tooltip.IDTokenLifetime.browser=Lifetime of ID token (browser)
 tooltip.includeIssuerInResponse=Whether to include issuer -parameter in the responses as specified by RFC 9207. If set to true also consider including authorization_response_iss_parameter_supported to the OP metadata.
 tooltip.refreshTokenLifetime.oauth=Lifetime of refresh token
 tooltip.alwaysIncludedAttributes.browser=Specifies IdPAttributes to always include in ID token regardless of response_type
-tooltip.encryptionOptional=Whether the absence of encryption details in a client's metadata should fail when issuing an ID token
+tooltip.encryptionOptional=Whether the absence of encryption details in a client\u0027s metadata should fail when issuing an ID token
 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
+tooltip.resolveAttributes.oauth=Whether to run the attribute resolution/filtering step
+
+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
+label.dynamic-registration-name=Name
+
+label.dynamic-registration-name=Name
+tooltip.dynamic-registration-name=Name
+label.dynamic-registration-redirectUris=Redirect uris
+tooltip.dynamic-registration-redirectUris=Redirect uris
+label.dynamic-registration-responseTypes=Response types
+tooltip.dynamic-registration-responseTypes=Response types
+label.dynamic-registration-grantTypes=Grant types
+tooltip.dynamic-registration-grantTypes=Grant types
+label.dynamic-registration-applicationType=Application type
+tooltip.dynamic-registration-applicationType=Application type
+label.dynamic-registration-contacts=Contacts
+tooltip.dynamic-registration-contacts=Contacts
+label.dynamic-registration-subjectType=Subject type
+tooltip.dynamic-registration-subjectType=Subject type
+label.dynamic-registration-jwks=Jwks
+tooltip.dynamic-registration-jwks=Jwks
+label.dynamic-registration-jwksUri=Jwks uri
+tooltip.dynamic-registration-jwksUri=Jwks uri
+label.dynamic-registration-tokenEndpointAuthMethod=Token endpoint auth method
+tooltip.dynamic-registration-tokenEndpointAuthMethod=Token endpoint auth method
+label.dynamic-registration-logo-uri=Logo uri
+tooltip.dynamic-registration-logo-uri=Logo uri
+label.dynamic-registration-policy-uri=Policy uri
+tooltip.dynamic-registration-policy-uri=Policy uri
+label.dynamic-registration-tosuri=To uri
+tooltip.dynamic-registration-tosuri=To uri
+label.dynamic-registration-scope=Scope
+tooltip.dynamic-registration-scope=Scope
+label.dynamic-registration-enabled=Enabled
+tooltip.dynamic-registration-enabled=Enabled
diff --git a/ui/public/assets/schema/dynamic-registration/oidc.json b/ui/public/assets/schema/dynamic-registration/oidc.json
@@ -10,76 +10,84 @@
             "maxLength": 255
         },
         "resourceId": {
+            "title": "label.dynamic-registration-resourceId",
+            "description": "tooltip.dynamic-registration-resourceId",
             "type": "string"
         },
         "redirectUris": {
+            "title": "label.dynamic-registration-redirectUris",
+            "description": "tooltip.dynamic-registration-redirectUris",
             "type": "array",
             "items": {
                 "type": "string"
             }
         },
         "responseTypes": {
+            "title": "label.dynamic-registration-responseTypes",
+            "description": "tooltip.dynamic-registration-responseTypes",
             "type": "array",
             "items": {
                 "type": "string"
             }
         },
         "grantTypes": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-grantTypes",
+            "description": "tooltip.dynamic-registration-grantTypes",
             "type": "string"
         },
         "applicationType": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-applicationType",
+            "description": "tooltip.dynamic-registration-applicationType",
             "type": "string"
         },
         "contacts": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-contacts",
+            "description": "tooltip.dynamic-registration-contacts",
             "type": "string"
         },
         "subjectType": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-subjectType",
+            "description": "tooltip.dynamic-registration-subjectType",
             "type": "string"
         },
         "jwks": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-jwks",
+            "description": "tooltip.dynamic-registration-jwks",
             "type": "string"
         },
         "jwksUri": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-jwksUri",
+            "description": "tooltip.dynamic-registration-jwksUri",
             "type": "string"
         },
         "tokenEndpointAuthMethod": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-tokenEndpointAuthMethod",
+            "description": "tooltip.dynamic-registration-tokenEndpointAuthMethod",
             "type": "string"
         },
         "logoUri": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-logo-uri",
+            "description": "tooltip.dynamic-registration-logo-uri",
             "type": "string"
         },
         "policyUri": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-policy-uri",
+            "description": "tooltip.dynamic-registration-policy-uri",
             "type": "string"
         },
         "tosUri": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-tosuri",
+            "description": "tooltip.dynamic-registration-tosuri",
             "type": "string"
         },
         "scope": {
-            "title": "label.dynamic-registration-",
-            "description": "tooltip.dynamic-registration-",
+            "title": "label.dynamic-registration-scope",
+            "description": "tooltip.dynamic-registration-scope",
             "type": "string"
         },
         "enabled": {
+            "title": "label.dynamic-registration-enabled",
+            "description": "tooltip.dynamic-registration-enabled",
             "type": "boolean"
         },
         "modifiedDate": "2022-10-21T11:57:24.391649",

diff --git a/ui/src/app/dynamic-registration/hoc/DynamicConfigurationDefinition.js b/ui/src/app/dynamic-registration/hoc/DynamicConfigurationDefinition.js
@@ -0,0 +1,66 @@
+import { BASE_PATH } from '../../App.constant';
+
+export const DynamicRegistrationDefinition = {
+    label: 'Dynamic Registration',
+    type: '@DynamicRegistration',
+    steps: [
+        {
+            id: 'common',
+            label: 'label.dynamic-registration',
+            index: 1,
+            fields: [
+                'name',
+                'resourceId',
+                'redirectUris',
+                'responseTypes',
+                'grantTypes',
+                'applicationType',
+                'contacts',
+                'subjectType',
+                'jwks',
+                'jwksUri',
+                'tokenEndpointAuthMethod',
+                'logoUri',
+                'policyUri',
+                'tosUri',
+                'scope'
+            ]
+        }
+    ],
+    schema: `${BASE_PATH}assets/schema/dynamic-registration/oidc.json`,
+
+    uiSchema: {
+        layout: {
+            groups: [
+                {
+                    size: 6,
+                    classNames: '',
+                    fields: [
+                        'name',
+                        'resourceId',
+                        'redirectUris',
+                        'responseTypes',
+                        'grantTypes',
+                        'applicationType',
+                        'contacts',
+                        'subjectType',
+                        'jwks',
+                        'jwksUri',
+                        'tokenEndpointAuthMethod',
+                        'logoUri',
+                        'policyUri',
+                        'tosUri',
+                        'scope'
+                    ]
+                },
+            ]
+        },
+    },
+
+    parser: (changes) => changes,
+    formatter: (changes) => changes,
+    display: (changes) => changes,
+}
+
+export default DynamicRegistrationDefinition;
+
diff --git a/ui/src/app/dynamic-registration/view/DynamicRegistrationDetail.js b/ui/src/app/dynamic-registration/view/DynamicRegistrationDetail.js
@@ -8,6 +8,12 @@ import Button from 'react-bootstrap/esm/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEdit, faHistory, faToggleOff, faToggleOn, faTrash } from '@fortawesome/free-solid-svg-icons';
 import Badge from 'react-bootstrap/esm/Badge';
+import { Configuration } from '../../metadata/hoc/Configuration';
+import { MetadataConfiguration } from '../../metadata/component/MetadataConfiguration';
+
+import { Schema } from '../../form/Schema';
+
+import definition from '../hoc/DynamicConfigurationDefinition';
 
 export function DynamicRegistrationDetail () {
 
@@ -54,7 +60,7 @@ export function DynamicRegistrationDetail () {
                         </h2>
                         <div className="container">
 
-                            <div className="card enabled-status">
+                            <div className="card enabled-status mb-4">
                                 <div className="card-body">
                                     <div className="d-flex justify-content-between">
                                         <h5 className="card-title version-title flex-grow-1">
@@ -97,35 +103,15 @@ export function DynamicRegistrationDetail () {
                                 </div>
                             </div>
 
-                             <div className="px-3 my-3 d-flex justify-content-between" id="navigation">
-                                <div>
-                                    <Link className="btn btn-link" to={`/dynamic-registration/${id}/history`}>
-                                        <FontAwesomeIcon icon={ faHistory } />&nbsp;
-                                        <Translate value="action.version-history">Version History</Translate>
-                                    </Link>
-                                </div>
-                            </div>
-
-                            <section className="mb-4 config-section-list-item">
-                                <div className="config-group">
-                                    <div className="numbered-header d-flex justify-content-start bg-light align-items-center">
-                                        <h2 className="title h4 m-0 flex-grow-1">
-                                           <span className="text ms-2">
-                                                <Translate value={ `label.dynamic-registraction-configuration` } />
-                                            </span>
-                                        </h2>
-                                        <div className="actions px-2">
-                                            <Button variant="link" className="edit-link change-view" onClick={()=>edit()}>
-                                                <FontAwesomeIcon icon={faEdit} />&nbsp;
-                                                <Translate value="action.edit">Edit</Translate>
-                                            </Button>
-                                        </div>
-                                    </div>
-                                    <div className="p-2">
-                                        <pre>{JSON.stringify(detail, null, 4)}</pre>
-                                    </div>
-                                </div>
-                            </section>
+                            <Schema path={definition.schema}>
+                                    {(schema) => 
+                                    <Configuration entities={[detail]} schema={schema} definition={definition}>
+                                        {(config) =>
+                                            <MetadataConfiguration configuration={config} onEdit={() => edit()} />
+                                        }
+                                    </Configuration>
+                                }
+                            </Schema>
 
                         </div>
                     </React.Fragment>

diff --git a/ui/src/app/metadata/component/MetadataConfiguration.js b/ui/src/app/metadata/component/MetadataConfiguration.js
@@ -8,15 +8,17 @@ import { ObjectProperty } from './properties/ObjectProperty';
 
 export function MetadataConfiguration ({ configuration, onEdit }) {
 
-    const columns = configuration.dates?.length || 1;
+    const columns = configuration?.dates?.length || 1;
     const width = usePropertyWidth(columns);
 
+    React.useEffect(() => console.log(configuration), [configuration]);
+
     return (
         <>
             { configuration && configuration.sections.map((section, sidx) =>
                 <React.Fragment key={sidx}>
                     {section?.properties?.length > 0 && 
-                    <MetadataSection section={section} key={sidx} index={ sidx } onEdit={onEdit}>
+                    <MetadataSection section={section} key={sidx} index={ configuration.sections.length > 1 ? sidx : -1 } onEdit={onEdit}>
                         <div className="d-flex border-bottom border-light border-2 py-2">
                             <strong style={ {width} }><Translate value="label.option">Option</Translate></strong>
                             {configuration.dates.map((d, didx) => 

diff --git a/ui/src/app/metadata/component/MetadataSection.js b/ui/src/app/metadata/component/MetadataSection.js
@@ -18,7 +18,7 @@ export function MetadataSection ({ section, index = -1, onEdit, children }) {
                             </span>
                             }
 
-                            <span className="text ms-2">
+                            <span className="text ms-2 py-1 d-inline-block">
                                 <Translate value={ section.label } />
                             </span>
                         </h2>

diff --git a/ui/src/app/metadata/hoc/Configuration.js b/ui/src/app/metadata/hoc/Configuration.js
@@ -2,9 +2,7 @@ import React from 'react';
 import { useMetadataConfiguration } from '../hooks/configuration';
 
 export function Configuration ({entities, schema, definition, limited, children}) {
-
     const config = useMetadataConfiguration(entities, schema, definition, limited);
-
     return (
         <>{children(config)}</>
     );