feat(admin-ui): work on user add form and attributes picker

admin-ui/app/locales/en/translation.json

@@ -858,6 +858,16 @@
       "certificateAttributes": "Certificate attributes.",
       "activate": "Activate SQL configuration.",
       "connectionUri": "Connection URI of database."
+    },
+    "user": {
+      "userId": "User Id",
+      "userName": "User Name",
+      "givenName": "Given Name",
+      "displayName": "Display Name",
+      "mail": "Email",
+      "jansStatus": "Status",
+      "gender": "Gender",
+      "userPassword": "User password"
     }
   }
 }

admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Col, FormGroup, Input } from 'Components'
+import GluuLabel from './GluuLabel'
+import GluuTooltip from './GluuTooltip'
+function GluuRemovableInputRow({
+  label,
+  name,
+  type,
+  value,
+  formik,
+  required,
+  lsize,
+  rsize,
+  handler,
+  doc_category,
+}) {
+  return (
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+      <FormGroup row>
+        <GluuLabel label={label} size={lsize} required={required} />
+        <Col sm={rsize - 1}>
+          <Input
+            id={name}
+            data-testid={name}
+            type={type}
+            name={name}
+            defaultValue={value}
+            onChange={formik.handleChange}
+          />
+        </Col>
+        <div
+          style={{
+            float: 'right',
+            justifyContent: 'center',
+            cursor: 'pointer',
+            padding: '5px',
+            width: '25px',
+            height: '25px',
+            marginTop: '0px',
+            marginRight: '-10px',
+          }}
+          onClick={handler}
+        >
+          <i className={'fa fa-fw fa-close'} style={{color:"red"}}></i>
+        </div>
+      </FormGroup>
+    </GluuTooltip>
+  )
+}
+
+GluuRemovableInputRow.defaultProps = {
+  type: 'text',
+  lsize: 3,
+  rsize: 9,
+  required: false,
+}
+
+export default GluuRemovableInputRow

admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import GluuLabel from './GluuLabel'
+import { Col, FormGroup, CustomInput, InputGroup } from 'Components'
+import { useTranslation } from 'react-i18next'
+import GluuTooltip from './GluuTooltip'
+
+function GluuRemovableSelectRow({
+  label,
+  name,
+  value,
+  formik,
+  values,
+  lsize,
+  rsize,
+  handler,
+  doc_category,
+}) {
+  const { t } = useTranslation()
+  return (
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+      <FormGroup row>
+        <GluuLabel label={label} size={lsize} />
+        <Col sm={rsize - 1}>
+          <InputGroup>
+            <CustomInput
+              type="select"
+              id={name}
+              data-testid={name}
+              name={name}
+              defaultValue={value}
+              onChange={formik.handleChange}
+            >
+              <option value="">{t('actions.choose')}...</option>
+              {values.map((item, key) => (
+                <option value={item} key={key}>
+                  {item}
+                </option>
+              ))}
+            </CustomInput>
+          </InputGroup>
+        </Col>
+        <div
+          style={{
+            float: 'right',
+            justifyContent: 'center',
+            cursor: 'pointer',
+            padding: '5px',
+            width: '25px',
+            height: '25px',
+            marginTop: '0px',
+            marginRight: '-10px',
+          }}
+          onClick={handler}
+        >
+         <i className={'fa fa-fw fa-close'} style={{color:"red"}}></i>
+        </div>
+      </FormGroup>
+    </GluuTooltip>
+  )
+}
+
+GluuRemovableSelectRow.defaultProps = {
+  values: [],
+  lsize: 3,
+  rsize: 9,
+}
+
+export default GluuRemovableSelectRow

admin-ui/plugins/admin/components/UserManagement/UserClaimEntry.js

@@ -1,47 +1,37 @@
 import React from 'react'
-import GluuInputRow from '../../../../app/routes/Apps/Gluu/GluuInputRow'
-import GluuSelectRow from '../../../../app/routes/Apps/Gluu/GluuSelectRow'
-function UserClaimEntry({ data, type, key, formik, handler }) {
+import GluuRemovableInputRow from '../../../../app/routes/Apps/Gluu/GluuRemovableInputRow'
+import GluuRemovableSelectRow from '../../../../app/routes/Apps/Gluu/GluuRemovableSelectRow'
+function UserClaimEntry({ data, type, entry, formik, handler }) {
+
+  const doHandle = () => {
+   handler(data.id)
+  }
   return (
-    <div key={key}>
+    <div key={entry}>
       {type === 'input' && (
-        <GluuInputRow
+        <GluuRemovableInputRow
           label={data.name}
           name={data.id}
           value={formik.values[data.id] || ''}
           formik={formik}
+          handler={doHandle}
           lsize={3}
           rsize={9}
         />
       )}
       {type === 'select' && (
-        <GluuSelectRow
+        <GluuRemovableSelectRow
           label={data.name}
           name={data.id}
           value={formik.values[data.id] || ''}
           values={data.attributes.values}
           formik={formik}
           required
+          handler={doHandle}
           lsize={3}
           rsize={9}
         />
       )}
-
-      <div
-        style={{
-          float: 'right',
-          justifyContent: 'center',
-          cursor: 'pointer',
-          padding: '5px',
-          width: '25px',
-          height: '25px',
-          marginTop: '-60px',
-          marginRight: '-25px',
-        }}
-        onClick={handler}
-      >
-        <i className={'fa fa-fw fa-close'}></i>
-      </div>
     </div>
   )
 }

admin-ui/plugins/admin/components/UserManagement/UserForm.js

@@ -9,8 +9,7 @@ import UserClaimEntry from './UserClaimEntry'
 
 function UserForm({ formik }) {
   const { t } = useTranslation()
-  const [init, setInit] = useState(false)
-  const [modal, setModal] = useState(false)
+  const DOC_SECTION = 'user'
   const [searchClaims, setSearchClaims] = useState('')
   const [selectedClaims, setSelectedClaims] = useState([])
   const [claims, setClaims] = useState(initialClaims)
@@ -22,7 +21,6 @@ function UserForm({ formik }) {
   }
 
   const removeSelectedClaimsFromState = (id) => {
-    console.log('=================key: ' + id)
     let tempList = [...selectedClaims]
     let newList = tempList.filter((drink, index) => index !== id)
     setSelectedClaims(newList)
@@ -33,6 +31,7 @@ function UserForm({ formik }) {
       <FormGroup row>
         <Col sm={8}>
           <GluuInputRow
+            doc_category={DOC_SECTION}
             label="User Id"
             name="userId"
             value={formik.values.userId || ''}
@@ -42,6 +41,7 @@ function UserForm({ formik }) {
             rsize={9}
           />
           <GluuInputRow
+            doc_category={DOC_SECTION}
             label="Given Name"
             name="givenName"
             value={formik.values.givenName || ''}
@@ -50,6 +50,7 @@ function UserForm({ formik }) {
             rsize={9}
           />
           <GluuInputRow
+            doc_category={DOC_SECTION}
             label="Display Name"
             name="displayName"
             value={formik.values.displayName || ''}
@@ -58,6 +59,7 @@ function UserForm({ formik }) {
             rsize={9}
           />
           <GluuInputRow
+            doc_category={DOC_SECTION}
             label="Email"
             name="mail"
             type="email"
@@ -67,6 +69,7 @@ function UserForm({ formik }) {
             rsize={9}
           />
           <GluuSelectRow
+            doc_category={DOC_SECTION}
             label="Status"
             name="jansStatus"
             value={formik.values.jansStatus || ''}
@@ -76,6 +79,7 @@ function UserForm({ formik }) {
             rsize={9}
           />
           <GluuInputRow
+            doc_category={DOC_SECTION}
             label="Password"
             name="userPassword"
             type="password"
@@ -86,7 +90,7 @@ function UserForm({ formik }) {
           />
           {selectedClaims.map((data, key) => (
             <UserClaimEntry
-              key={key}
+              entry={key}
               data={data}
               formik={formik}
               handler={removeSelectedClaimsFromState}