fix(admin-ui): gentle push

GluuFederation · Jun 14, 2022 · 1a1f2bf · 1a1f2bf
1 parent 255b360
commit 1a1f2bf
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 13 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableTypeAhead.js b/admin-ui/app/routes/Apps/Gluu/GluuRemovableTypeAhead.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import GluuLabel from './GluuLabel'
+import { Col, FormGroup, CustomInput, InputGroup } from 'Components'
+import { useTranslation } from 'react-i18next'
+import GluuTooltip from './GluuTooltip'
+import { Typeahead } from 'react-bootstrap-typeahead'
+
+function GluuRemovableTypeAhead({
+  label,
+  name,
+  value,
+  formik,
+  values,
+  lsize,
+  rsize,
+  handler,
+  doc_category,
+  options,
+}) {
+  const { t } = useTranslation()
+  return (
+    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+      <FormGroup row>
+        <GluuLabel label={label} size={lsize} />
+        <Col sm={rsize - 1}>
+          <InputGroup>
+            <Typeahead
+              allowNew
+              emptyLabel=""
+              labelKey={name}
+              onChange={(selected) => {
+                if (formik) {
+                  formik.setFieldValue(name, selected)
+                }
+              }}
+              id={name}
+              data-testid={name}
+              name={name}
+              multiple={true}
+              defaultSelected={value}
+              options={options}
+            />
+          </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>
+  )
+}
+
+GluuRemovableTypeAhead.defaultProps = {
+  values: [],
+  lsize: 3,
+  rsize: 9,
+}
+
+export default GluuRemovableTypeAhead
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuTypeAhead.js b/admin-ui/app/routes/Apps/Gluu/GluuTypeAhead.js
@@ -26,17 +26,19 @@ function GluuTypeAhead({
   doc_entry,
   forwardRef = null,
   onChange = null,
+  lsize = 4,
+  rsize = 8,
 }) {
   const { t } = useTranslation()
   return (
     <GluuTooltip doc_category={doc_category} doc_entry={doc_entry || name}>
       <FormGroup row>
         {required ? (
-          <GluuLabel label={label} size={4} required />
+          <GluuLabel label={label} size={lsize} required />
         ) : (
-          <GluuLabel label={label} size={4} />
+          <GluuLabel label={label} size={lsize} />
         )}
-        <Col sm={8}>
+        <Col sm={rsize}>
           <Typeahead
             allowNew
             ref={forwardRef}

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserAddPage.js b/admin-ui/plugins/user-management/components/UserManagement/UserAddPage.js
@@ -10,6 +10,7 @@ import {
   redirectToListPage,
 } from '../../redux/actions/UserActions'
 import { useDispatch, useSelector } from 'react-redux'
+import moment from 'moment'
 function UserAddPage() {
   const dispatch = useDispatch()
   const userAction = {}
@@ -23,15 +24,39 @@ function UserAddPage() {
     let customAttributes = []
     if (values) {
       for (let key in values) {
+        let customAttribute = personAttributes.filter((e) => e.name == key)
         if (personAttributes.some((e) => e.name == key)) {
-          let val = []
-          val.push(values[key])
-          let obj = {
-            name: key,
-            multiValued: false,
-            values: val,
-            value: values[key],
-            displayValue: values[key],
+          let obj = {}
+          if (!customAttribute[0]?.oxMultiValuedAttribute) {
+            let val = []
+            let value = values[key]
+            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()
+            }
+            obj = {
+              name: key,
+              multiValued: false,
+              values: val,
+              value: value,
+              displayValue: value,
+            }
+          } else {
+            let val = []
+            if (values[key]) {
+              for (let i in values[key]) {
+                val.push(values[key][i][key])
+              }
+            }
+            obj = {
+              name: key,
+              multiValued: true,
+              values: val,
+              value: val,
+              displayValue: val,
+            }
           }
           customAttributes.push(obj)
         }

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserClaimEntry.js b/admin-ui/plugins/user-management/components/UserManagement/UserClaimEntry.js
@@ -1,13 +1,28 @@
 import React from 'react'
 import GluuRemovableInputRow from '../../../../app/routes/Apps/Gluu/GluuRemovableInputRow'
 import GluuRemovableSelectRow from '../../../../app/routes/Apps/Gluu/GluuRemovableSelectRow'
+import GluuRemovableTypeAhead from '../../../../app/routes/Apps/Gluu/GluuRemovableTypeAhead'
 function UserClaimEntry({ data, type, entry, formik, handler }) {
   const doHandle = () => {
     handler(data.name)
   }
+  console.log(data.name, formik.values[data.name])
   return (
     <div key={entry}>
-      {type === 'input' && (
+      {data.oxMultiValuedAttribute && (
+        <GluuRemovableTypeAhead
+          label={data.displayName}
+          name={data.name}
+          value={[]}
+          formik={formik}
+          options={data.options || []}
+          handler={doHandle}
+          doc_category={data.description}
+          lsize={3}
+          rsize={9}
+        />
+      )}
+      {type === 'input' && !data.oxMultiValuedAttribute && (
         <GluuRemovableInputRow
           label={data.displayName}
           name={data.name}
@@ -19,7 +34,7 @@ function UserClaimEntry({ data, type, entry, formik, handler }) {
           rsize={9}
         />
       )}
-      {type === 'select' && (
+      {type === 'select' && !data.oxMultiValuedAttribute && (
         <GluuRemovableSelectRow
           label={data.displayName}
           name={data.name}

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserForm.js b/admin-ui/plugins/user-management/components/UserManagement/UserForm.js
@@ -61,8 +61,11 @@ function UserForm({ formik }) {
   const setAttributes = () => {
     let tempList = [...selectedClaims]
     for (let i in userDetails.customAttributes) {
+      console.log('This is it', userDetails.customAttributes[i])
       let data = getCustomAttributeById(userDetails.customAttributes[i].name)
       if (data && !usedClaimes.includes(userDetails.customAttributes[i].name)) {
+        console.log('JMS', data)
+        data.options = userDetails.customAttributes[i].values
         tempList.push(data)
       }
     }