From 413ff01856003758dd767fe49a43b7a000f6af71 Mon Sep 17 00:00:00 2001
From: Thomas Gasmyr <Thomas@gluu.org>
Date: Sat, 2 Oct 2021 12:04:47 +0100
Subject: [PATCH] fix(admin-ui): provide tooltip for config properties #189

---
 app/locales/en/translation.json               |   4 +-
 app/routes/Apps/Gluu/GluuInumInput.js         |  29 +++
 app/utils/ApiResources.js                     |   5 +
 .../CustomScripts/CustomScriptForm.js         |  32 +--
 .../components/Clients/ClientBasicPanel.js    |  81 +++---
 .../Configuration/Defaults/AcrsPage.js        |   1 +
 .../Configuration/Defaults/LoggingPage.js     |  29 ++-
 .../components/Scopes/ScopeForm.js            | 245 +++++++++---------
 .../schema/components/Person/AttributeForm.js | 228 ++++++++--------
 9 files changed, 361 insertions(+), 293 deletions(-)
 create mode 100644 app/routes/Apps/Gluu/GluuInumInput.js
 create mode 100644 app/utils/ApiResources.js

diff --git a/app/locales/en/translation.json b/app/locales/en/translation.json
index 23eeaab1..c488b72a 100644
--- a/app/locales/en/translation.json
+++ b/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": {}
   }
 }
diff --git a/app/routes/Apps/Gluu/GluuInumInput.js b/app/routes/Apps/Gluu/GluuInumInput.js
new file mode 100644
index 00000000..6af29362
--- /dev/null
+++ b/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
diff --git a/app/utils/ApiResources.js b/app/utils/ApiResources.js
new file mode 100644
index 00000000..df9a4d58
--- /dev/null
+++ b/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'
diff --git a/plugins/admin/components/CustomScripts/CustomScriptForm.js b/plugins/admin/components/CustomScripts/CustomScriptForm.js
index 3c42d81c..021d3cb1 100644
--- a/plugins/admin/components/CustomScripts/CustomScriptForm.js
+++ b/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"
diff --git a/plugins/auth-server/components/Clients/ClientBasicPanel.js b/plugins/auth-server/components/Clients/ClientBasicPanel.js
index 6edadbfa..dd987f74 100644
--- a/plugins/auth-server/components/Clients/ClientBasicPanel.js
+++ b/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"
diff --git a/plugins/auth-server/components/Configuration/Defaults/AcrsPage.js b/plugins/auth-server/components/Configuration/Defaults/AcrsPage.js
index 7ebf1158..a096a32a 100644
--- a/plugins/auth-server/components/Configuration/Defaults/AcrsPage.js
+++ b/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}>
diff --git a/plugins/auth-server/components/Configuration/Defaults/LoggingPage.js b/plugins/auth-server/components/Configuration/Defaults/LoggingPage.js
index edf7d852..165572df 100644
--- a/plugins/auth-server/components/Configuration/Defaults/LoggingPage.js
+++ b/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}
diff --git a/plugins/auth-server/components/Scopes/ScopeForm.js b/plugins/auth-server/components/Scopes/ScopeForm.js
index cff983cb..222c4dc1 100644
--- a/plugins/auth-server/components/Scopes/ScopeForm.js
+++ b/plugins/auth-server/components/Scopes/ScopeForm.js
@@ -12,10 +12,13 @@ import {
   Accordion,
 } from '../../../../app/components'
 import GluuLabel from '../../../../app/routes/Apps/Gluu/GluuLabel'
-import GluuToogle from '../../../../app/routes/Apps/Gluu/GluuToogle'
+import GluuInumInput from '../../../../app/routes/Apps/Gluu/GluuInumInput'
+import GluuToogleRow from '../../../../app/routes/Apps/Gluu/GluuToogleRow'
 import GluuTypeAheadForDn from '../../../../app/routes/Apps/Gluu/GluuTypeAheadForDn'
 import GluuCommitFooter from '../../../../app/routes/Apps/Gluu/GluuCommitFooter'
 import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
+import GluuTooltip from '../../../../app/routes/Apps/Gluu/GluuTooltip'
+import { SCOPE } from '../../../../app/utils/ApiResources'
 import { useTranslation } from 'react-i18next'
 
 function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
@@ -109,96 +112,92 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
         {(formik) => (
           <Form onSubmit={formik.handleSubmit}>
             {scope.inum && (
+              <GluuInumInput
+                label="fields.inum"
+                name="inum"
+                value={scope.inum}
+                doc_category={SCOPE}
+              />
+            )}
+            <GluuTooltip doc_category={SCOPE} doc_entry="displayName">
               <FormGroup row>
-                <GluuLabel label="fields.inum" size={4} />
+                <GluuLabel label="fields.displayname" size={4} required />
                 <Col sm={8}>
                   <Input
-                    style={{ backgroundColor: '#F5F5F5' }}
-                    id="inum"
-                    name="inum"
-                    disabled
-                    value={scope.inum}
+                    placeholder={t('placeholders.display_name')}
+                    id="displayName"
+                    valid={
+                      !formik.errors.displayName &&
+                      !formik.touched.displayName &&
+                      init
+                    }
+                    name="displayName"
+                    defaultValue={scope.displayName}
+                    onKeyUp={activate}
+                    onChange={formik.handleChange}
                   />
                 </Col>
+                <ErrorMessage name="displayName">
+                  {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
+                </ErrorMessage>
               </FormGroup>
-            )}
-            <FormGroup row>
-              <GluuLabel label="fields.displayname" size={4} required />
-              <Col sm={8}>
-                <Input
-                  placeholder={t('placeholders.display_name')}
-                  id="displayName"
-                  valid={
-                    !formik.errors.displayName &&
-                    !formik.touched.displayName &&
-                    init
-                  }
-                  name="displayName"
-                  defaultValue={scope.displayName}
-                  onKeyUp={activate}
-                  onChange={formik.handleChange}
-                />
-              </Col>
-              <ErrorMessage name="displayName">
-                {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
-              </ErrorMessage>
-            </FormGroup>
-
-            <FormGroup row>
-              <GluuLabel label="fields.description" size={4} />
-              <Col sm={8}>
-                <Input
-                  type="textarea"
-                  placeholder={t('placeholders.description')}
-                  maxLength="4000"
-                  id="description"
-                  name="description"
-                  defaultValue={scope.description}
-                  onKeyUp={activate}
-                  onChange={formik.handleChange}
-                />
-              </Col>
-            </FormGroup>
-            <FormGroup row>
-              <GluuLabel label="fields.default_scope" size={4} />
-              <Col sm={8}>
-                <GluuToogle
-                  id="defaultScope"
-                  name="defaultScope"
-                  formik={formik}
-                  value={scope.defaultScope}
-                />
-              </Col>
-            </FormGroup>
-            <FormGroup row>
-              <GluuLabel label="fields.scope_type" size={4} />
-              <Col sm={8}>
-                <InputGroup>
-                  <CustomInput
-                    type="select"
-                    id="scopeType"
-                    name="scopeType"
-                    defaultValue={scope.scopeType}
-                    onChange={handleScopeTypeChanged}
-                  >
-                    <option value="">{t('actions.choose')}...</option>
-                    <option value="oauth">OAuth</option>
-                    <option value="openid">OpenID</option>
-                    <option value="dynamic">Dynamic</option>
-                    <option value="spontaneous">Spontaneous</option>
-                  </CustomInput>
-                </InputGroup>
-              </Col>
-              <ErrorMessage name="scopeType">
-                {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
-              </ErrorMessage>
-            </FormGroup>
+            </GluuTooltip>
+            <GluuTooltip doc_category={SCOPE} doc_entry="description">
+              <FormGroup row>
+                <GluuLabel label="fields.description" size={4} />
+                <Col sm={8}>
+                  <Input
+                    type="textarea"
+                    placeholder={t('placeholders.description')}
+                    maxLength="4000"
+                    id="description"
+                    name="description"
+                    defaultValue={scope.description}
+                    onKeyUp={activate}
+                    onChange={formik.handleChange}
+                  />
+                </Col>
+              </FormGroup>
+            </GluuTooltip>
+            <GluuToogleRow
+              label="fields.default_scope"
+              name="defaultScope"
+              formik={formik}
+              value={scope.defaultScope}
+              doc_category={SCOPE}
+            />
+            <GluuTooltip doc_category={SCOPE} doc_entry="scopeType">
+              <FormGroup row>
+                <GluuLabel label="fields.scope_type" size={4} />
+                <Col sm={8}>
+                  <InputGroup>
+                    <CustomInput
+                      type="select"
+                      id="scopeType"
+                      name="scopeType"
+                      defaultValue={scope.scopeType}
+                      onChange={handleScopeTypeChanged}
+                    >
+                      <option value="">{t('actions.choose')}...</option>
+                      <option value="oauth">OAuth</option>
+                      <option value="openid">OpenID</option>
+                      <option value="dynamic">Dynamic</option>
+                      <option value="spontaneous">Spontaneous</option>
+                    </CustomInput>
+                  </InputGroup>
+                </Col>
+                <ErrorMessage name="scopeType">
+                  {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
+                </ErrorMessage>
+              </FormGroup>
+            </GluuTooltip>
             {showDynamicPanel && (
               <Accordion className="mb-2 b-primary" initialOpen>
                 <Accordion.Header className="text-primary">
                   {t('fields.dynamic_scope_scripts').toUpperCase()}
                 </Accordion.Header>
                 <Accordion.Body>
+                  <FormGroup row> </FormGroup>
                   <GluuTypeAheadForDn
                     name="dynamicScopeScripts"
                     label="fields.dynamic_scope_scripts"
@@ -208,7 +207,8 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
                       dynamicScopeScripts,
                     )}
                     options={dynamicScopeScripts}
-                  ></GluuTypeAheadForDn>
+                    doc_category={SCOPE}
+                  />
                 </Accordion.Body>
               </Accordion>
             )}
@@ -218,13 +218,15 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
                   {t('fields.claims').toUpperCase()}
                 </Accordion.Header>
                 <Accordion.Body>
+                  <FormGroup row> </FormGroup>
                   <GluuTypeAheadForDn
                     name="claims"
                     label="fields.claims"
                     formik={formik}
                     value={getMapping(scope.claims, claims)}
                     options={claims}
-                  ></GluuTypeAheadForDn>
+                    doc_category={SCOPE}
+                  />
                 </Accordion.Body>
               </Accordion>
             )}
@@ -233,41 +235,51 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
                 {t('fields.ox_attributes').toUpperCase()}
               </Accordion.Header>
               <Accordion.Body>
-                <FormGroup row>
-                  <GluuLabel label="fields.spontaneous_client_id" size={4} />
-                  <Col sm={8}>
-                    <Input
-                      placeholder={t('placeholders.spontaneous_client_id')}
-                      id="spontaneousClientId"
-                      name="spontaneousClientId"
-                      defaultValue={scope.attributes.spontaneousClientId}
-                      onChange={formik.handleChange}
-                    />
-                  </Col>
-                </FormGroup>
-                <FormGroup row>
-                  <GluuLabel
-                    label="fields.show_in_onfiguration_endpoint"
-                    size={4}
-                  />
-                  <Col sm={8}>
-                    <InputGroup>
-                      <CustomInput
-                        type="select"
-                        id="showInConfigurationEndpoint"
-                        name="showInConfigurationEndpoint"
-                        defaultValue={
-                          scope.attributes.showInConfigurationEndpoint
-                        }
+                <FormGroup row> </FormGroup>
+                <GluuTooltip
+                  doc_category={SCOPE}
+                  doc_entry="spontaneousClientId"
+                >
+                  <FormGroup row>
+                    <GluuLabel label="fields.spontaneous_client_id" size={4} />
+                    <Col sm={8}>
+                      <Input
+                        placeholder={t('placeholders.spontaneous_client_id')}
+                        id="spontaneousClientId"
+                        name="spontaneousClientId"
+                        defaultValue={scope.attributes.spontaneousClientId}
                         onChange={formik.handleChange}
-                      >
-                        <option value="true">{t('options.true')}</option>
-                        <option value="false">{t('options.false')}</option>
-                      </CustomInput>
-                    </InputGroup>
-                  </Col>
-                </FormGroup>
-
+                      />
+                    </Col>
+                  </FormGroup>
+                </GluuTooltip>
+                <GluuTooltip
+                  doc_category={SCOPE}
+                  doc_entry="spontaneousClientId"
+                >
+                  <FormGroup row>
+                    <GluuLabel
+                      label="fields.show_in_onfiguration_endpoint"
+                      size={4}
+                    />
+                    <Col sm={8}>
+                      <InputGroup>
+                        <CustomInput
+                          type="select"
+                          id="showInConfigurationEndpoint"
+                          name="showInConfigurationEndpoint"
+                          defaultValue={
+                            scope.attributes.showInConfigurationEndpoint
+                          }
+                          onChange={formik.handleChange}
+                        >
+                          <option value="true">{t('options.true')}</option>
+                          <option value="false">{t('options.false')}</option>
+                        </CustomInput>
+                      </InputGroup>
+                    </Col>
+                  </FormGroup>
+                </GluuTooltip>
                 <GluuTypeAheadForDn
                   name="spontaneousClientScopes"
                   label="fields.spontaneous_client_scopes"
@@ -277,7 +289,8 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
                     spontaneousClientScopes,
                   )}
                   options={spontaneousClientScopes}
-                ></GluuTypeAheadForDn>
+                  doc_category={SCOPE}
+                />
               </Accordion.Body>
             </Accordion>
             <FormGroup row></FormGroup>
diff --git a/plugins/schema/components/Person/AttributeForm.js b/plugins/schema/components/Person/AttributeForm.js
index b5a7b28c..7c08ab04 100644
--- a/plugins/schema/components/Person/AttributeForm.js
+++ b/plugins/schema/components/Person/AttributeForm.js
@@ -7,12 +7,14 @@ import {
   CustomInput,
   Form,
   FormGroup,
-  Label,
   Input,
 } from '../../../../app/components'
 import GluuFooter from '../../../../app/routes/Apps/Gluu/GluuFooter'
 import GluuLabel from '../../../../app/routes/Apps/Gluu/GluuLabel'
+import GluuInumInput from '../../../../app/routes/Apps/Gluu/GluuInumInput'
 import GluuToogle from '../../../../app/routes/Apps/Gluu/GluuToogle'
+import GluuTooltip from '../../../../app/routes/Apps/Gluu/GluuTooltip'
+import { ATTRIBUTE } from '../../../../app/utils/ApiResources'
 import { useTranslation } from 'react-i18next'
 
 function AttributeForm({ item, customOnSubmit, hideButtons }) {
@@ -73,86 +75,84 @@ function AttributeForm({ item, customOnSubmit, hideButtons }) {
     >
       {(formik) => (
         <Form onSubmit={formik.handleSubmit}>
-          {/* START Input */}
           {item.inum && (
+            <GluuInumInput
+              label="fields.inum"
+              name="inum"
+              lsize={3}
+              rsize={9}
+              value={item.inum}
+              doc_category={ATTRIBUTE}
+            />
+          )}
+          <GluuTooltip doc_category={ATTRIBUTE} doc_entry="name">
             <FormGroup row>
-              <Label for="name" sm={3}>
-                {t('fields.inum')}
-              </Label>
+              <GluuLabel label="fields.name" required />
               <Col sm={9}>
                 <Input
-                  style={{ backgroundColor: '#F5F5F5' }}
-                  placeholder={t('fields.enter_the_attribute_inum')}
-                  id="inum"
-                  name="inum"
-                  disabled
-                  value={item.inum}
+                  placeholder={t('placeholders.enter_the_attribute_name')}
+                  id="name"
+                  valid={!formik.errors.name && !formik.touched.name && init}
+                  name="name"
+                  defaultValue={item.name}
+                  onKeyUp={toogle}
+                  onChange={formik.handleChange}
                 />
+                <ErrorMessage name="name">
+                  {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
+                </ErrorMessage>
               </Col>
             </FormGroup>
-          )}
-          <FormGroup row>
-            <GluuLabel label="fields.name" required />
-            <Col sm={9}>
-              <Input
-                placeholder={t('placeholders.enter_the_attribute_name')}
-                id="name"
-                valid={!formik.errors.name && !formik.touched.name && init}
-                name="name"
-                defaultValue={item.name}
-                onKeyUp={toogle}
-                onChange={formik.handleChange}
-              />
-              <ErrorMessage name="name">
-                {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
-              </ErrorMessage>
-            </Col>
-          </FormGroup>
-          <FormGroup row>
-            <GluuLabel label="fields.displayname" required />
-            <Col sm={9}>
-              <InputGroup>
-                <Input
-                  placeholder={t(
-                    'placeholders.enter_the_attribute_display_name',
-                  )}
-                  valid={
-                    !formik.errors.displayName &&
-                    !formik.touched.displayName &&
-                    init
-                  }
-                  id="displayName"
-                  name="displayName"
-                  defaultValue={item.displayName}
-                  onChange={formik.handleChange}
-                />
-              </InputGroup>
-              <ErrorMessage name="displayName">
-                {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
-              </ErrorMessage>
-            </Col>
-          </FormGroup>
-          <FormGroup row>
-            <GluuLabel label="fields.description" required />
-            <Col sm={9}>
-              <InputGroup>
-                <Input
-                  type="textarea"
-                  rows="3"
-                  placeholder={t(
-                    'placeholders.enter_the_attribute_description',
-                  )}
-                  id="description"
-                  name="description"
-                  defaultValue={item.description}
-                  onChange={formik.handleChange}
-                />
-              </InputGroup>
-              <ErrorMessage name="description">
-                {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
-              </ErrorMessage>
-            </Col>
-          </FormGroup>
+          </GluuTooltip>
+          <GluuTooltip doc_category={ATTRIBUTE} doc_entry="displayName">
+            <FormGroup row>
+              <GluuLabel label="fields.displayname" required />
+              <Col sm={9}>
+                <InputGroup>
+                  <Input
+                    placeholder={t(
+                      'placeholders.enter_the_attribute_display_name',
+                    )}
+                    valid={
+                      !formik.errors.displayName &&
+                      !formik.touched.displayName &&
+                      init
+                    }
+                    id="displayName"
+                    name="displayName"
+                    defaultValue={item.displayName}
+                    onChange={formik.handleChange}
+                  />
+                </InputGroup>
+                <ErrorMessage name="displayName">
+                  {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
+                </ErrorMessage>
+              </Col>
+            </FormGroup>
+          </GluuTooltip>
+          <GluuTooltip doc_category={ATTRIBUTE} doc_entry="description">
+            <FormGroup row>
+              <GluuLabel label="fields.description" required />
+              <Col sm={9}>
+                <InputGroup>
+                  <Input
+                    type="textarea"
+                    rows="3"
+                    placeholder={t(
+                      'placeholders.enter_the_attribute_description',
+                    )}
+                    id="description"
+                    name="description"
+                    defaultValue={item.description}
+                    onChange={formik.handleChange}
+                  />
+                </InputGroup>
+                <ErrorMessage name="description">
+                  {(msg) => <div style={{ color: 'red' }}>{msg}</div>}
+                </ErrorMessage>
+              </Col>
+            </FormGroup>
+          </GluuTooltip>
           <FormGroup row>
             <GluuLabel label="fields.status" required />
             <Col sm={9}>
@@ -313,17 +313,19 @@ function AttributeForm({ item, customOnSubmit, hideButtons }) {
           </FormGroup>
 
           {validation && (
-            <FormGroup row>
-              <GluuLabel label="fields.regular_expression" />
-              <Col sm={9}>
-                <Input
-                  name="regexp"
-                  id="regexp"
-                  defaultValue={item.attributeValidation.regexp}
-                  onChange={formik.handleChange}
-                />
-              </Col>
-            </FormGroup>
+            <GluuTooltip doc_category={ATTRIBUTE} doc_entry="regexp">
+              <FormGroup row>
+                <GluuLabel label="fields.regular_expression" />
+                <Col sm={9}>
+                  <Input
+                    name="regexp"
+                    id="regexp"
+                    defaultValue={item.attributeValidation.regexp}
+                    onChange={formik.handleChange}
+                  />
+                </Col>
+              </FormGroup>
+            </GluuTooltip>
           )}
           {validation && (
             <FormGroup row>
@@ -349,32 +351,36 @@ function AttributeForm({ item, customOnSubmit, hideButtons }) {
               </Col>
             </FormGroup>
           )}
-          <FormGroup row>
-            <GluuLabel label="fields.saml1_uri" />
-            <Col sm={9}>
-              <Input
-                placeholder={t('placeholders.enter_the_saml1_uri')}
-                id="saml1Uri"
-                name="saml1Uri"
-                defaultValue={item.saml1Uri}
-                onKeyUp={toogle}
-                onChange={formik.handleChange}
-              />
-            </Col>
-          </FormGroup>
-          <FormGroup row>
-            <GluuLabel label="fields.saml2_uri" />
-            <Col sm={9}>
-              <Input
-                placeholder={t('placeholders.enter_the_saml2_uri')}
-                id="saml2Uri"
-                name="saml2Uri"
-                defaultValue={item.saml2Uri}
-                onKeyUp={toogle}
-                onChange={formik.handleChange}
-              />
-            </Col>
-          </FormGroup>
+          <GluuTooltip doc_category={ATTRIBUTE} doc_entry="saml1Uri">
+            <FormGroup row>
+              <GluuLabel label="fields.saml1_uri" />
+              <Col sm={9}>
+                <Input
+                  placeholder={t('placeholders.enter_the_saml1_uri')}
+                  id="saml1Uri"
+                  name="saml1Uri"
+                  defaultValue={item.saml1Uri}
+                  onKeyUp={toogle}
+                  onChange={formik.handleChange}
+                />
+              </Col>
+            </FormGroup>
+          </GluuTooltip>
+          <GluuTooltip doc_category={ATTRIBUTE} doc_entry="saml2Uri">
+            <FormGroup row>
+              <GluuLabel label="fields.saml2_uri" />
+              <Col sm={9}>
+                <Input
+                  placeholder={t('placeholders.enter_the_saml2_uri')}
+                  id="saml2Uri"
+                  name="saml2Uri"
+                  defaultValue={item.saml2Uri}
+                  onKeyUp={toogle}
+                  onChange={formik.handleChange}
+                />
+              </Col>
+            </FormGroup>
+          </GluuTooltip>
           <GluuFooter hideButtons={hideButtons} />
         </Form>
       )}