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

app/routes/Apps/Gluu/GluuArrayCompleter.js

@@ -15,10 +15,17 @@ const theme = createTheme({
   },
 })
 
-function GluuArrayCompleter({ label, name, value, options, required }) {
+function GluuArrayCompleter({
+  label,
+  name,
+  value,
+  options,
+  required,
+  doc_category,
+}) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         {!!required ? (
           <GluuLabel label={label} size={6} required />

app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js

@@ -14,6 +14,7 @@ function GluuAutoCompleteWithAdd({
   inputId,
   formik = undefined,
   placeholder,
+  doc_category,
 }) {
   const [items, setItems] = useState(value)
   const [opts, setOpts] = useState(options)
@@ -37,7 +38,7 @@ function GluuAutoCompleteWithAdd({
   }
 
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={4} />
         <Col

app/routes/Apps/Gluu/GluuBooleanInput.js

@@ -4,10 +4,10 @@ import GluuTooltip from './GluuTooltip'
 import { Col, FormGroup, CustomInput, InputGroup } from '../../../components'
 import { useTranslation } from 'react-i18next'
 
-function GluuBooleanInput({ label, name, value, lsize, rsize }) {
+function GluuBooleanInput({ label, name, value, lsize, rsize, doc_category }) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={lsize} />
         <Col sm={rsize}>

app/routes/Apps/Gluu/GluuBooleanSelectBox.js

@@ -4,10 +4,18 @@ import GluuTooltip from './GluuTooltip'
 import { Col, FormGroup, CustomInput, InputGroup } from '../../../components'
 import { useTranslation } from 'react-i18next'
 
-function GluuBooleanSelectBox({ label, name, value, formik, lsize, rsize }) {
+function GluuBooleanSelectBox({
+  label,
+  name,
+  value,
+  formik,
+  lsize,
+  rsize,
+  doc_category,
+}) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={lsize} />
         <Col sm={rsize}>

app/routes/Apps/Gluu/GluuCheckBoxRow.js

@@ -11,9 +11,10 @@ function GluuCheckBoxRow({
   lsize,
   rsize,
   handleOnChange,
+  doc_category,
 }) {
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={lsize} required={required} />
         <Col sm={rsize}>

app/routes/Apps/Gluu/GluuFormDetailRow.js

@@ -9,10 +9,12 @@ function GluuFormDetailRow({
   badgeColor,
   lsize,
   rsize,
+  doc_category,
+  doc_entry,
 }) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip id={label}>
+    <GluuTooltip doc_category={doc_category} doc_entry={doc_entry || label}>
       <FormGroup row>
         <Label for="input" sm={lsize || 6}>
           {t(label)}:

app/routes/Apps/Gluu/GluuInlineInput.js

@@ -59,7 +59,7 @@ function GluuInlineInput({
   return (
     <FormGroup row>
       <Col sm={10}>
-        <GluuTooltip id={name}>
+        <GluuTooltip doc_category="json_properties" doc_entry={name}>
           <FormGroup row>
             <GluuLabel
               label={label}

app/routes/Apps/Gluu/GluuInput.js

@@ -2,9 +2,18 @@ import React from 'react'
 import { Col, FormGroup, Input } from '../../../components'
 import GluuLabel from './GluuLabel'
 import GluuTooltip from './GluuTooltip'
-function GluuInput({ label, name, type, value, required, lsize, rsize }) {
+function GluuInput({
+  label,
+  name,
+  type,
+  value,
+  required,
+  lsize,
+  rsize,
+  doc_category,
+}) {
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={lsize} required={required} />
         <Col sm={rsize}>

app/routes/Apps/Gluu/GluuInputRow.js

@@ -11,9 +11,10 @@ function GluuInputRow({
   required,
   lsize,
   rsize,
+  doc_category
 }) {
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={lsize} required={required} />
         <Col sm={rsize}>

app/routes/Apps/Gluu/GluuLabel.js

@@ -3,7 +3,7 @@ import { Label } from './../../../components'
 import ReactTooltip from 'react-tooltip'
 import { useTranslation } from 'react-i18next'
 
-function GluuLabel({ label, required, size, withTooltip }) {
+function GluuLabel({ label, required, size, doc_category, doc_entry }) {
   const { t } = useTranslation()
   function getSize() {
     if (size != null) {
@@ -18,9 +18,9 @@ function GluuLabel({ label, required, size, withTooltip }) {
         {required && <span style={{ color: 'red', fontSize: '22px' }}> *</span>}
         :
       </h5>
-      {withTooltip && (
-        <ReactTooltip type="success" id={label}>
-          {withTooltip || label}
+      {doc_category && (
+        <ReactTooltip html={true} type="success" id={doc_entry}>
+          {t('documentation.' + doc_category + '.' + doc_entry)}
         </ReactTooltip>
       )}
     </Label>

app/routes/Apps/Gluu/GluuSecretDetail.js

@@ -4,15 +4,15 @@ import Toggle from 'react-toggle'
 import GluuTooltip from './GluuTooltip'
 import { useTranslation } from 'react-i18next'
 
-function GluuSecretDetail({ label, value }) {
+function GluuSecretDetail({ label, value, doc_category, doc_entry }) {
   const { t } = useTranslation()
   const [up, setUp] = useState(false)
   function handleSecret() {
     setUp(!up)
   }
 
   return (
-    <GluuTooltip id={label}>
+    <GluuTooltip doc_category={doc_category} doc_entry={doc_entry || label}>
       <FormGroup row>
         <Label for="input" sm={2}>
           {t(label)}:

app/routes/Apps/Gluu/GluuSelectRow.js

@@ -4,10 +4,19 @@ import { Col, FormGroup, CustomInput, InputGroup } from '../../../components'
 import { useTranslation } from 'react-i18next'
 import GluuTooltip from './GluuTooltip'
 
-function GluuSelectRow({ label, name, value, formik, values, lsize, rsize }) {
+function GluuSelectRow({
+  label,
+  name,
+  value,
+  formik,
+  values,
+  lsize,
+  rsize,
+  doc_category,
+}) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={lsize} />
         <Col sm={rsize}>

app/routes/Apps/Gluu/GluuToogleRow.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Col, FormGroup, Input } from '../../../components'
+import GluuLabel from './GluuLabel'
+import GluuTooltip from './GluuTooltip'
+import GluuToogle from './GluuToogle'
+
+function GluuToogleRow({
+  label,
+  name,
+  value,
+  formik,
+  lsize,
+  handler,
+  rsize,
+  doc_category ="not_category",
+}) {
+  return (
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+      <FormGroup row>
+        <GluuLabel label={label} size={lsize} />
+        <Col sm={rsize}>
+          <GluuToogle
+            id={name}
+            name={name}
+            handler={handler}
+            formik={formik}
+            value={value}
+          />
+        </Col>
+      </FormGroup>
+    </GluuTooltip>
+  )
+}
+GluuToogleRow.defaultProps = {
+  lsize: 3,
+  rsize: 9,
+}
+
+export default GluuToogleRow

app/routes/Apps/Gluu/GluuTooltip.js

@@ -5,10 +5,15 @@ import { useTranslation } from 'react-i18next'
 function GluuTooltip(props) {
   const { t } = useTranslation()
   return (
-    <div data-tip data-for={props.id}>
+    <div data-tip data-for={props.doc_entry}>
       {props.children}
-      <ReactTooltip html={true} type="success" id={props.id} place="bottom">
-        {t('documentation.' + props.id)}
+      <ReactTooltip
+        html={true}
+        type="success"
+        id={props.doc_entry}
+        place="bottom"
+      >
+        {t('documentation.' + props.doc_category + '.' + props.doc_entry)}
       </ReactTooltip>
     </div>
   )

app/routes/Apps/Gluu/GluuTypeAhead.js

@@ -15,10 +15,10 @@ const theme = createTheme({
   },
 })
 
-function GluuTypeAhead({ label, name, value, options, formik, required }) {
+function GluuTypeAhead({ label, name, value, options, formik, required, doc_category }) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         {!!required ? (
           <GluuLabel label={label} size={4} required />

app/routes/Apps/Gluu/GluuTypeAheadForDn.js

@@ -15,14 +15,22 @@ const theme = createTheme({
   },
 })
 
-function GluuTypeAheadForDn({ label, name, value, options, formik, required }) {
+function GluuTypeAheadForDn({
+  label,
+  name,
+  value,
+  options,
+  formik,
+  required,
+  doc_category,
+}) {
   const { t } = useTranslation()
   function getItemName(options, item) {
     const data = options.filter((e) => e.dn === item)
     return data[0].name
   }
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={4} required={required} />
         <Col sm={8}>

app/routes/Apps/Gluu/GluuTypeAheadWithAdd.js

@@ -14,6 +14,7 @@ function GluuTypeAheadWithAdd({
   formik,
   validator,
   inputId,
+  doc_category,
 }) {
   const [items, setItems] = useState(value)
   const [opts, setOpts] = useState(options)
@@ -37,7 +38,7 @@ function GluuTypeAheadWithAdd({
   }
 
   return (
-    <GluuTooltip id={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
       <FormGroup row>
         <GluuLabel label={label} size={4} />
         <Col

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

@@ -163,17 +163,6 @@ function ClientAdvancedPanel({ client, scripts, formik }) {
           />
         </Col>
       </FormGroup>
-      <FormGroup row>
-        <GluuLabel label="fields.oxdId" />
-        <Col sm={9}>
-          <Input
-            id="oxdId"
-            name="oxdId"
-            defaultValue={client.oxdId}
-            onChange={formik.handleChange}
-          />
-        </Col>
-      </FormGroup>
       <FormGroup row>
         <GluuLabel label="fields.defaultMaxAge" />
         <Col sm={9}>