fix(admin-ui): provide tooltip for config properties #189

app/locales/en/translation.json

@@ -583,6 +583,8 @@
     "openid_client": {
       "clientName": " The openid connect client name",
       "description": " A clear  and precise description of the client"
-    }
+    },
+    "scope": {},
+    "script": {}
   }
 }

app/routes/Apps/Gluu/GluuInumInput.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Col, FormGroup, Input } from '../../../components'
+import GluuLabel from './GluuLabel'
+import GluuTooltip from './GluuTooltip'
+
+function GluuInumInput({ label, name, value, lsize,rsize, doc_category }) {
+  return (
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+      <FormGroup row>
+        <GluuLabel label={label} size={lsize} />
+        <Col sm={rsize}>
+          <Input
+            style={{ backgroundColor: '#F5F5F5' }}
+            id={name}
+            name={name}
+            disabled
+            value={value}
+          />
+        </Col>
+      </FormGroup>
+    </GluuTooltip>
+  )
+}
+GluuInumInput.defaultProps = {
+  lsize: 4,
+  rsize: 8,
+}
+
+export default GluuInumInput

app/utils/ApiResources.js

@@ -0,0 +1,5 @@
+export const OIDC_CLIENT = 'openid_client'
+export const SCOPE = 'scope'
+export const ATTRIBUTE = 'attribute'
+export const SCRIPT = 'script'
+export const JSON_CONFIG = 'json_properties'

plugins/admin/components/CustomScripts/CustomScriptForm.js

@@ -7,14 +7,15 @@ import {
   CustomInput,
   Form,
   FormGroup,
-  Label,
   Input,
 } from '../../../../app/components'
 import GluuLabel from '../../../../app/routes/Apps/Gluu/GluuLabel'
+import GluuInumInput from '../../../../app/routes/Apps/Gluu/GluuInumInput'
 import GluuProperties from '../../../../app/routes/Apps/Gluu/GluuProperties'
 import Counter from '../../../../app/components/Widgets/GroupedButtons/Counter'
 import GluuCommitFooter from '../../../../app/routes/Apps/Gluu/GluuCommitFooter'
 import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
+import { SCRIPT } from '../../../../app/utils/ApiResources'
 import { useTranslation } from 'react-i18next'
 
 function CustomScriptForm({ item, scripts, handleSubmit }) {
@@ -157,22 +158,15 @@ function CustomScriptForm({ item, scripts, handleSubmit }) {
 
   return (
     <Form onSubmit={formik.handleSubmit}>
-      {/* START Input */}
       {item.inum && (
-        <FormGroup row>
-          <Label for="name" sm={3}>
-            {t('fields.inum')}
-          </Label>
-          <Col sm={9}>
-            <Input
-              style={{ backgroundColor: '#F5F5F5' }}
-              id="inum"
-              name="inum"
-              disabled
-              value={item.inum}
-            />
-          </Col>
-        </FormGroup>
+        <GluuInumInput
+          label="fields.inum"
+          name="inum"
+          lsize={3}
+          rsize={9}
+          value={item.inum}
+          doc_category={SCRIPT}
+        />
       )}
       <FormGroup row>
         <GluuLabel label="fields.name" required />
@@ -349,7 +343,6 @@ function CustomScriptForm({ item, scripts, handleSubmit }) {
           </Col>
         </FormGroup>
       )}
-
       <FormGroup row>
         <GluuLabel label="fields.level" />
         <Col sm={9}>
@@ -360,7 +353,6 @@ function CustomScriptForm({ item, scripts, handleSubmit }) {
           <Input type="hidden" id="level" defaultValue={item.level} />
         </Col>
       </FormGroup>
-
       <GluuProperties
         compName="configurationProperties"
         label="fields.custom_properties"
@@ -369,7 +361,6 @@ function CustomScriptForm({ item, scripts, handleSubmit }) {
         valuePlaceholder={t('placeholders.enter_property_value')}
         options={getPropertiesConfig(item)}
       ></GluuProperties>
-
       <FormGroup row>
         <GluuLabel label={t('Script')} size={2} required />
         {formik.errors.script && formik.touched.script ? (
@@ -388,7 +379,6 @@ function CustomScriptForm({ item, scripts, handleSubmit }) {
           />
         </Col>
       </FormGroup>
-
       <FormGroup row>
         <GluuLabel label="options.enabled" size={3} />
         <Col sm={1}>
@@ -401,9 +391,7 @@ function CustomScriptForm({ item, scripts, handleSubmit }) {
           />
         </Col>
       </FormGroup>
-
       <FormGroup row>
-        {' '}
         <Input
           type="hidden"
           id="moduleProperties"

plugins/auth-server/components/Clients/ClientBasicPanel.js

@@ -16,6 +16,7 @@ import GluuToogleRow from '../../../../app/routes/Apps/Gluu/GluuToogleRow'
 import GluuTypeAhead from '../../../../app/routes/Apps/Gluu/GluuTypeAhead'
 import GluuTypeAheadForDn from '../../../../app/routes/Apps/Gluu/GluuTypeAheadForDn'
 import GluuTypeAheadWithAdd from '../../../../app/routes/Apps/Gluu/GluuTypeAheadWithAdd'
+import GluuTooltip from '../../../../app/routes/Apps/Gluu/GluuTooltip'
 import DatePicker from 'react-datepicker'
 import { useTranslation } from 'react-i18next'
 const DOC_CATEGORY = 'openid_client'
@@ -71,18 +72,20 @@ const ClientBasicPanel = ({ client, scopes, formik }) => {
   return (
     <Container>
       {client.inum && (
-        <FormGroup row>
-          <GluuLabel label="fields.inum" />
-          <Col sm={9}>
-            <Input
-              style={{ backgroundColor: '#F5F5F5' }}
-              id="inum"
-              name="inum"
-              disabled
-              value={client.inum}
-            />
-          </Col>
-        </FormGroup>
+        <GluuTooltip doc_category={DOC_CATEGORY} doc_entry="inum">
+          <FormGroup row>
+            <GluuLabel label="fields.inum" />
+            <Col sm={9}>
+              <Input
+                style={{ backgroundColor: '#F5F5F5' }}
+                id="inum"
+                name="inum"
+                disabled
+                value={client.inum}
+              />
+            </Col>
+          </FormGroup>
+        </GluuTooltip>
       )}
       <GluuInputRow
         label="fields.client_name"
@@ -91,33 +94,35 @@ const ClientBasicPanel = ({ client, scopes, formik }) => {
         value={client.clientName || client.displayName}
         doc_category={DOC_CATEGORY}
       />
-      <FormGroup row>
-        <GluuLabel label="fields.client_secret" />
-        <Col sm={9}>
-          <div
-            style={{
-              height: '0.01em',
-              display: 'flex',
-              maxHeight: '2em',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            <Input
-              id="clientSecret"
-              name="clientSecret"
-              type={showClientSecret ? 'text' : 'password'}
-              defaultValue={client.clientSecret}
-              onChange={formik.handleChange}
-            />
-            <IconButton
-              onClick={handleClickShowClientSecret}
-              onMouseDown={handleMouseDownClientSecret}
+      <GluuTooltip doc_category={DOC_CATEGORY} doc_entry="client_secret">
+        <FormGroup row>
+          <GluuLabel label="fields.client_secret" />
+          <Col sm={9}>
+            <div
+              style={{
+                height: '0.01em',
+                display: 'flex',
+                maxHeight: '2em',
+                whiteSpace: 'nowrap',
+              }}
             >
-              {showClientSecret ? <Visibility /> : <VisibilityOff />}
-            </IconButton>
-          </div>
-        </Col>
-      </FormGroup>
+              <Input
+                id="clientSecret"
+                name="clientSecret"
+                type={showClientSecret ? 'text' : 'password'}
+                defaultValue={client.clientSecret}
+                onChange={formik.handleChange}
+              />
+              <IconButton
+                onClick={handleClickShowClientSecret}
+                onMouseDown={handleMouseDownClientSecret}
+              >
+                {showClientSecret ? <Visibility /> : <VisibilityOff />}
+              </IconButton>
+            </div>
+          </Col>
+        </FormGroup>
+      </GluuTooltip>
       <GluuInputRow
         label="fields.description"
         name="description"

plugins/auth-server/components/Configuration/Defaults/AcrsPage.js

@@ -40,6 +40,7 @@ function AcrsPage({ acrs, scripts, permissions, loading, dispatch }) {
         >
           {(formik) => (
             <Form onSubmit={formik.handleSubmit}>
+              <FormGroup row></FormGroup>
               <FormGroup row>
                 <GluuLabel label="fields.default_acr" size={4} />
                 <Col sm={8}>

plugins/auth-server/components/Configuration/Defaults/LoggingPage.js

@@ -1,5 +1,11 @@
 import React, { useEffect } from 'react'
-import { Form, Button, FormGroup, Col, CustomInput } from '../../../../../app/components'
+import {
+  Form,
+  Button,
+  FormGroup,
+  Col,
+  CustomInput,
+} from '../../../../../app/components'
 import GluuLabel from '../../../../../app/routes/Apps/Gluu/GluuLabel'
 import GluuCheckBoxRow from '../../../../../app/routes/Apps/Gluu/GluuCheckBoxRow'
 import GluuLoader from '../../../../../app/routes/Apps/Gluu/GluuLoader'
@@ -38,9 +44,18 @@ function LoggingPage({ logging, dispatch, permissions, loading }) {
         <Formik
           initialValues={initialValues}
           onSubmit={(values) => {
-            values.httpLoggingEnabled = values.httpLoggingEnabled != undefined ? values.httpLoggingEnabled : logging.httpLoggingEnabled;
-            values.disableJdkLogger = values.disableJdkLogger != undefined ? values.disableJdkLogger : logging.disableJdkLogger;
-            values.enabledOAuthAuditLogging = values.enabledOAuthAuditLogging != undefined ? values.enabledOAuthAuditLogging : logging.enabledOAuthAuditLogging;
+            values.httpLoggingEnabled =
+              values.httpLoggingEnabled != undefined
+                ? values.httpLoggingEnabled
+                : logging.httpLoggingEnabled
+            values.disableJdkLogger =
+              values.disableJdkLogger != undefined
+                ? values.disableJdkLogger
+                : logging.disableJdkLogger
+            values.enabledOAuthAuditLogging =
+              values.enabledOAuthAuditLogging != undefined
+                ? values.enabledOAuthAuditLogging
+                : logging.enabledOAuthAuditLogging
 
             const opts = {}
             opts['loggingConfiguration'] = JSON.stringify(values)
@@ -49,6 +64,7 @@ function LoggingPage({ logging, dispatch, permissions, loading }) {
         >
           {(formik) => (
             <Form onSubmit={formik.handleSubmit}>
+              <FormGroup row></FormGroup>
               <FormGroup row>
                 <GluuLabel label="fields.log_level" size={4} />
                 <Col sm={8}>
@@ -117,7 +133,10 @@ function LoggingPage({ logging, dispatch, permissions, loading }) {
                 label="fields.enabled_oAuth_audit_logging"
                 name="enabledOAuthAuditLogging"
                 handleOnChange={(e) => {
-                  formik.setFieldValue('enabledOAuthAuditLogging', e.target.checked)
+                  formik.setFieldValue(
+                    'enabledOAuthAuditLogging',
+                    e.target.checked,
+                  )
                 }}
                 lsize={5}
                 rsize={7}