feat(admin-ui): change uma resource detail page to modal

harryandriyan · harryandriyan · commit 68f7cb0f4251 · 2022-08-15T17:17:59.000+07:00
diff --git a/admin-ui/app/locales/en/translation.json b/admin-ui/app/locales/en/translation.json
@@ -21,7 +21,8 @@
     "test": "Test",
     "view": "View",
     "yes": "Yes",
-    "change_password": "Change Password"
+    "change_password": "Change Password",
+    "close": "Close"
   },
   "dashboard": {
     "summary_title": "Actives Users & Access Token Stats",
diff --git a/admin-ui/app/locales/fr/translation.json b/admin-ui/app/locales/fr/translation.json
@@ -79,7 +79,8 @@
     "remove": "Supprimer",
     "test": "Test",
     "view": "Vue",
-    "yes": "Oui"
+    "yes": "Oui",
+    "close": "Fermer"
   },
   "fields": {
     "access_token_signing_alg": "Algorithme de signature de jeton d'accès",
diff --git a/admin-ui/app/locales/pt/translation.json b/admin-ui/app/locales/pt/translation.json
@@ -78,7 +78,8 @@
     "remove": "Remover",
     "test": "Teste",
     "view": "Visualizar",
-    "yes": "Sim"
+    "yes": "Sim",
+    "close": "Fechar"
   },
   "fields": {
     "access_token_signing_alg": "Algoritmo de assinatura de token de acesso",
diff --git a/admin-ui/app/styles/custom/layout.scss b/admin-ui/app/styles/custom/layout.scss
@@ -117,4 +117,9 @@
 
 .common-link {
   color: #2767b3
+}
+
+.top-5 {
+  position: relative;
+  top: 5px;
 }
diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientCibaParUmaPanel.js b/admin-ui/plugins/auth-server/components/Clients/ClientCibaParUmaPanel.js
@@ -1,19 +1,34 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import Box from '@material-ui/core/Box'
 import { Link } from 'react-router-dom'
-import { Col, Container, FormGroup } from 'Components'
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from 'reactstrap'
+import isEmpty from 'lodash/isEmpty'
+import { useTranslation } from 'react-i18next'
+import { connect } from 'react-redux'
+import moment from 'moment'
+import { Card, Col, Container, FormGroup } from 'Components'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuSelectRow from 'Routes/Apps/Gluu/GluuSelectRow'
 import GluuToogleRow from 'Routes/Apps/Gluu/GluuToogleRow'
 import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import GluuTypeAheadWithAdd from 'Routes/Apps/Gluu/GluuTypeAheadWithAdd'
-import { useTranslation } from 'react-i18next'
+import { getScope } from 'Plugins/auth-server/redux/actions/ScopeActions'
 import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core'
 import GluuTypeAheadForDn from 'Routes/Apps/Gluu/GluuTypeAheadForDn'
+import { ThemeContext } from 'Context/theme/themeContext'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 const DOC_CATEGORY = 'openid_client'
 
-function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
+function ClientCibaParUmaPanel({ client, dispatch, scope, umaResources, scripts, formik }) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
   const claim_uri_id = 'claim_uri_id'
 
   const cibaDeliveryModes = ['poll', 'push', 'ping']
@@ -27,31 +42,28 @@ function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
   function uriValidator(uri) {
     return uri
   }
-  function getMapping(partial, total) {
-    if (!partial) {
-      partial = []
-    }
-    return total.filter((item) => partial.includes(item.dn))
-  }
+  
   const [softwareSection, setSoftwareSection] = useState(false)
   const [cibaSection, setCibaSection] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [selectedUMA, setSelectedUMA] = useState()
+  const [scopeExpression, setScopeExpression] = useState()
 
   const rptScripts = scripts
     .filter((item) => item.scriptType == 'UMA_RPT_CLAIMS')
     .filter((item) => item.enabled)
     .map((item) => ({ dn: item.dn, name: item.name }))
 
-  function handleCibaSection() {
-    setCibaSection(!cibaSection)
-  }
-  function handleSoftwareSection() {
-    setSoftwareSection(!softwareSection)
-  }
-  function emailValidator(email) {
-    return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
-      email,
-    )
+  const handleUMADetail = (uma) => {
+    if (!isEmpty(uma)) {
+      setSelectedUMA(uma)
+      setScopeExpression(JSON.parse(uma.scopeExpression)?.data)
+      dispatch(getScope(uma.inum))
+    }
+    
+    setOpen(true)
   }
+
   return (
     <Container>
       <h2>{t(`titles.CIBA`)}</h2>
@@ -151,19 +163,129 @@ function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
             return (
               <Box key={uma.id}>
                 <Box display="flex">
-                  <Box>
-                    <Link to={`/auth-server/client/uma/${uma.id}`} className="common-link">
-                      {uma.id}
-                    </Link>
+                  <Box className="common-link cursor-pointer" onClick={() => handleUMADetail(uma)}>
+                    {uma.id}
                   </Box>
                 </Box>
               </Box>
             )
           })}
         </Col>
       </FormGroup>
+      <Modal
+        isOpen={open}
+        toggle={() => setOpen(!open)}
+        size="lg"
+        className="modal-outline-primary"
+      >
+        <ModalHeader  toggle={() => setOpen(!open)}>
+          UMA Resource Detail
+        </ModalHeader>
+        <ModalBody>
+          <Card style={applicationStyle.mainCard}>
+            <h2>UMA Resource Detail</h2>
+            <FormGroup row>
+              <GluuLabel label={t('fields.resourceId')} size={3} />
+              <Col sm={9} className="top-5">
+                {selectedUMA?.id}
+              </Col>
+            </FormGroup>
+            <FormGroup row>
+              <GluuLabel label={t('fields.displayname')} size={3} />
+              <Col sm={9} className="top-5">
+                {selectedUMA?.name}
+              </Col>
+            </FormGroup>
+            <FormGroup row>
+              <GluuLabel label={t('fields.iconUrl')} size={3} />
+              <Col sm={9} className="top-5">
+                {!isEmpty(scope) && (
+                  <a href={scope?.iconUrl} target="_blank" alt="iconUrl" className="common-link" rel="noreferrer">
+                    {scope?.iconUrl}
+                  </a>
+                )}
+              </Col>
+            </FormGroup>
+            <FormGroup row>
+              <GluuLabel label={t('fields.scopeSelection')} size={3} />
+              <Col sm={9} className="top-5">
+                <RadioGroup
+                  row
+                  name="scopeSelection"
+                  value={true}
+                >
+                  <FormControlLabel
+                    value={true}
+                    control={<Radio color="primary" />}
+                    label={t('fields.scope')}
+                    checked={true}
+                  />
+                  <FormControlLabel
+                    value={false}
+                    control={<Radio color="primary" />}
+                    label={t('fields.scopeExpression')}
+                    checked={false}
+                  />
+                </RadioGroup>
+              </Col>
+            </FormGroup>
+            <FormGroup row>
+              <GluuLabel label={t('fields.scopeSelection')} size={3} />
+              <Col sm={9} className="top-5">
+                {!isEmpty(scopeExpression) && scopeExpression.map((expression, key) => (
+                  <Box key={key}>
+                    <Box display="flex">
+                      <a href={expression} target="_blank" alt="scope expression" className="common-link" rel="noreferrer">
+                        {expression}
+                      </a>
+                    </Box>
+                  </Box>
+                ))}
+              </Col>
+            </FormGroup>
+            <FormGroup row>
+              <GluuLabel label={t('fields.associatedClient')} size={3} />
+              <Col sm={9} className="top-5">
+                {!isEmpty(scope) && scope.clients?.map((client, key) => (
+                  <Box key={key}>
+                    <Box display="flex">
+                      <Link to={`/auth-server/client/edit:${client.inum.substring(0, 4)}`} className="common-link">
+                        {client.inum}
+                      </Link>
+                    </Box>
+                  </Box>
+                ))}
+              </Col>
+            </FormGroup>
+            <FormGroup row>
+              <GluuLabel label={t('fields.creationTime')} size={3} />
+              <Col sm={9} className="top-5">
+                { moment(selectedUMA?.creationDate).format("ddd, MMM DD, YYYY h:mm:ss A") }
+              </Col>
+            </FormGroup>
+          </Card>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            color={`primary-${selectedTheme}`}
+            style={applicationStyle.buttonStyle}
+            onClick={() => setOpen(!open)}
+          >
+            {t('actions.close')}
+          </Button>
+        </ModalFooter>
+      </Modal>
     </Container>
   )
 }
 
-export default ClientCibaParUmaPanel
+const mapStateToProps = (state) => {
+  return {
+    clientData: state.oidcReducer.item,
+    loading: state.oidcReducer.loading,
+    scope: state.scopeReducer.item,
+    umaResources: state.oidcReducer.umaResources,
+  }
+}
+export default connect(mapStateToProps)(ClientCibaParUmaPanel)
+
diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientUMADetailPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientUMADetailPage.js
diff --git a/admin-ui/plugins/auth-server/plugin-metadata.js b/admin-ui/plugins/auth-server/plugin-metadata.js

Original file line number	Diff line number	Diff line change
`@@ -117,4 +117,9 @@`
`117`	`117`
`118`	`118`	`.common-link {`
`119`	`119`	`color: #2767b3`
	`120`	`+}`
	`121`	`+`
	`122`	`+.top-5 {`
	`123`	`+ position: relative;`
	`124`	`+ top: 5px;`
`120`	`125`	`}`