fix(admin-ui): tooltip and birthdate fix

GluuFederation · Jun 24, 2022 · 14a90b2 · 14a90b2
1 parent c3b25c4
commit 14a90b2
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 16 deletions.
diff --git a/admin-ui/app/locales/en/translation.json b/admin-ui/app/locales/en/translation.json
@@ -871,7 +871,11 @@
       "mail": "Email",
       "jansStatus": "Status",
       "gender": "Gender",
-      "userPassword": "User password"
+      "userPassword": "User password",
+      "INUM": "INUM",
+      "middleName": "Middle Name",
+      "sn": "Last Name",
+      "userConfirmPassword": "Confirm Password"
     }
   }
 }
diff --git a/admin-ui/app/locales/fr/translation.json b/admin-ui/app/locales/fr/translation.json
@@ -392,5 +392,19 @@
     "aliases": "List of possible aliases for the custom script.",
     "internal": "boolean value indicating if the script is internal.",
     "revision": "Update revision number of the script."
+  },
+  "user": {
+    "userId": "Sed rutrum sapien id",
+    "userName": "User Nomen",
+    "givenName": "Nomen dedisse",
+    "displayName": "Propono Nomen",
+    "mail": "Email",
+    "jansStatus": "Status",
+    "gender": "Le genre",
+    "userPassword": "Mot de passe de l'utilisateur",
+    "INUM": "INUM",
+    "middleName": "Deuxième nom",
+    "sn": "Nom de famille",
+    "userConfirmPassword": "Confirmez le mot de passe"
   }
 }
diff --git a/admin-ui/app/locales/pt/translation.json b/admin-ui/app/locales/pt/translation.json
@@ -391,5 +391,19 @@
     "aliases": "List of possible aliases for the custom script.",
     "internal": "boolean value indicating if the script is internal.",
     "revision": "Update revision number of the script."
+  },
+  "user": {
+    "userId": "ID do usuário",
+    "userName": "Nome de usuário",
+    "givenName": "Nome dado",
+    "displayName": "Nome em Exibição",
+    "mail": "Email",
+    "jansStatus": "Status",
+    "gender": "Gênero",
+    "userPassword": "Senha do usuário",
+    "INUM": "INUM",
+    "middleName": "Nome do meio",
+    "sn": "Sobrenome",
+    "userConfirmPassword": "Confirme a Senha"
   }
 }
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.js b/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.js
@@ -11,10 +11,15 @@ function GluuFormDetailRow({
   rsize,
   doc_category,
   doc_entry,
+  isDirect = false,
 }) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip doc_category={doc_category} doc_entry={doc_entry || label}>
+    <GluuTooltip
+      doc_category={doc_category}
+      isDirect={isDirect}
+      doc_entry={doc_entry || label}
+    >
       <FormGroup row>
         <Label for={label} style={{ fontWeight: 'bold' }} sm={lsize || 6}>
           {t(label)}:

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.js b/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.js
@@ -13,9 +13,14 @@ function GluuRemovableInputRow({
   rsize,
   handler,
   doc_category,
+  isDirect,
 }) {
   return (
-    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+    <GluuTooltip
+      doc_category={doc_category}
+      isDirect={isDirect}
+      doc_entry={name}
+    >
       <FormGroup row>
         <GluuLabel label={label} size={lsize} required={required} />
         <Col sm={rsize - 1}>
@@ -41,7 +46,7 @@ function GluuRemovableInputRow({
           }}
           onClick={handler}
         >
-          <i className={'fa fa-fw fa-close'} style={{color:"red"}}></i>
+          <i className={'fa fa-fw fa-close'} style={{ color: 'red' }}></i>
         </div>
       </FormGroup>
     </GluuTooltip>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.js b/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.js
@@ -14,10 +14,15 @@ function GluuRemovableSelectRow({
   rsize,
   handler,
   doc_category,
+  isDirect,
 }) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+    <GluuTooltip
+      doc_category={doc_category}
+      isDirect={isDirect}
+      doc_entry={name}
+    >
       <FormGroup row>
         <GluuLabel label={label} size={lsize} />
         <Col sm={rsize - 1}>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableTypeAhead.js b/admin-ui/app/routes/Apps/Gluu/GluuRemovableTypeAhead.js
@@ -16,10 +16,15 @@ function GluuRemovableTypeAhead({
   handler,
   doc_category,
   options,
+  isDirect,
 }) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+    <GluuTooltip
+      doc_category={doc_category}
+      isDirect={isDirect}
+      doc_entry={name}
+    >
       <FormGroup row>
         <GluuLabel label={label} size={lsize} />
         <Col sm={rsize - 1}>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuTooltip.js b/admin-ui/app/routes/Apps/Gluu/GluuTooltip.js
@@ -7,8 +7,16 @@ function GluuTooltip(props) {
   return (
     <div data-tip data-for={props.doc_entry}>
       {props.children}
-      <ReactTooltip html type="success" id={props.doc_entry} data-testid={props.doc_entry} place="bottom">
-        {t('documentation.' + props.doc_category + '.' + props.doc_entry)}
+      <ReactTooltip
+        html
+        type="success"
+        id={props.doc_entry}
+        data-testid={props.doc_entry}
+        place="bottom"
+      >
+        {props.isDirect
+          ? props.doc_category
+          : t('documentation.' + props.doc_category + '.' + props.doc_entry)}
       </ReactTooltip>
     </div>
   )

diff --git a/admin-ui/app/utils/AppAuthProvider.js b/admin-ui/app/utils/AppAuthProvider.js
@@ -62,7 +62,6 @@ export default function AppAuthProvider(props) {
   }
 
   const getDerivedStateFromProps = () => {
-    console.log('Called')
     if (window.location.href.indexOf('logout') > -1) {
       setShowContent(true)
       return null

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserAddPage.js b/admin-ui/plugins/user-management/components/UserManagement/UserAddPage.js
@@ -33,8 +33,8 @@ function UserAddPage() {
             if (key != 'birthdate') {
               val.push(values[key])
             } else {
-              val.push(moment(values[key], 'YYYY-MM-DD').toISOString())
-              value = moment(values[key], 'YYYY-MM-DD').toISOString()
+              val.push(moment(values[key], 'YYYY-MM-DD').format('YYYY-MM-DD'))
+              value = moment(values[key], 'YYYY-MM-DD').format('YYYY-MM-DD')
             }
             obj = {
               name: key,

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserClaimEntry.js b/admin-ui/plugins/user-management/components/UserManagement/UserClaimEntry.js
@@ -15,6 +15,7 @@ function UserClaimEntry({ data, type, entry, formik, handler }) {
           name={data.name}
           value={formik.values[data.name] || []}
           formik={formik}
+          isDirect={true}
           options={formik.values[data.name] || []}
           handler={doHandle}
           doc_category={data.description}
@@ -26,6 +27,7 @@ function UserClaimEntry({ data, type, entry, formik, handler }) {
         <GluuRemovableInputRow
           label={data.displayName}
           name={data.name}
+          isDirect={true}
           value={formik.values[data.name] || ''}
           formik={formik}
           handler={doHandle}
@@ -38,6 +40,8 @@ function UserClaimEntry({ data, type, entry, formik, handler }) {
         <GluuRemovableSelectRow
           label={data.displayName}
           name={data.name}
+          doc_category={data.description}
+          isDirect={true}
           value={formik.values[data.name] || ''}
           values={countries}
           formik={formik}

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserDetailViewPage.js b/admin-ui/plugins/user-management/components/UserManagement/UserDetailViewPage.js
@@ -1,9 +1,23 @@
 import React, { useEffect } from 'react'
 import { Container, Row, Col } from '../../../../app/components'
 import GluuFormDetailRow from '../../../../app/routes/Apps/Gluu/GluuFormDetailRow'
+import { useSelector } from 'react-redux'
+import moment from 'moment'
+
 const UserDetailViewPage = ({ row }) => {
   const { rowData } = row
+  const DOC_SECTION = 'user'
+  const personAttributes = useSelector((state) => state.attributeReducer.items)
 
+  const getCustomAttributeById = (id) => {
+    let claimData = null
+    for (let i in personAttributes) {
+      if (personAttributes[i].name == id) {
+        claimData = personAttributes[i]
+      }
+    }
+    return claimData
+  }
   return (
     <React.Fragment>
       <Container style={{ backgroundColor: '#F5F5F5' }}>
@@ -12,24 +26,49 @@ const UserDetailViewPage = ({ row }) => {
             <GluuFormDetailRow
               label="fields.name"
               value={rowData.displayName}
+              doc_category={DOC_SECTION}
+              doc_entry="displayName"
             />
           </Col>
           <Col sm={4}>
             <GluuFormDetailRow
               label="fields.givenName"
               value={rowData.givenName}
+              doc_category={DOC_SECTION}
+              doc_entry="givenName"
             />
           </Col>
           <Col sm={4}>
-            <GluuFormDetailRow label="fields.userName" value={rowData.userId} />
+            <GluuFormDetailRow
+              label="fields.userName"
+              value={rowData.userId}
+              doc_category={DOC_SECTION}
+              doc_entry="userId"
+            />
           </Col>
           <Col sm={4}>
-            <GluuFormDetailRow label="fields.email" value={rowData?.mail} />
+            <GluuFormDetailRow
+              label="fields.email"
+              doc_entry="mail"
+              value={rowData?.mail}
+              doc_category={DOC_SECTION}
+            />
           </Col>
           {rowData.customAttributes?.map((data, key) => {
+            let valueToShow = ''
+            if (data.name == 'birthdate') {
+              valueToShow = moment(data?.values[0]).format('YYYY-MM-DD')
+            } else {
+              valueToShow = data?.values[0]
+            }
             return (
               <Col sm={4} key={'customAttributes' + key}>
-                <GluuFormDetailRow label={data.name} value={data?.values[0]} />
+                <GluuFormDetailRow
+                  label={getCustomAttributeById(data.name).displayName}
+                  doc_category={getCustomAttributeById(data.name).description}
+                  isDirect={true}
+                  value={valueToShow}
+                />
               </Col>
             )
           })}

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserEditPage.js b/admin-ui/plugins/user-management/components/UserManagement/UserEditPage.js
@@ -35,8 +35,8 @@ function UserEditPage() {
             if (key != 'birthdate') {
               val.push(values[key])
             } else {
-              val.push(moment(values[key], 'YYYY-MM-DD').toISOString())
-              value = moment(values[key], 'YYYY-MM-DD').toISOString()
+              val.push(moment(values[key], 'YYYY-MM-DD').format('YYYY-MM-DD'))
+              value = moment(values[key], 'YYYY-MM-DD').format('YYYY-MM-DD')
             }
             obj = {
               name: key,

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserForm.js b/admin-ui/plugins/user-management/components/UserManagement/UserForm.js
@@ -195,6 +195,7 @@ function UserForm({ formik }) {
               <GluuInputRow
                 label="INUM"
                 name="INUM"
+                doc_category={DOC_SECTION}
                 value={userDetails.inum || ''}
                 lsize={3}
                 rsize={9}