feat(admin-ui): update scope and selection

harryandriyan · harryandriyan · commit e2fde3616110 · 2022-08-16T15:25:47.000+07:00
diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientCibaParUmaPanel.js b/admin-ui/plugins/auth-server/components/Clients/ClientCibaParUmaPanel.js
@@ -18,14 +18,13 @@ 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 { 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, scope, umaResources, scripts, formik }) {
+function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
@@ -44,6 +43,7 @@ function ClientCibaParUmaPanel({ client, scope, umaResources, scripts, formik })
   const [open, setOpen] = useState(false)
   const [selectedUMA, setSelectedUMA] = useState()
   const [scopeExpression, setScopeExpression] = useState()
+  const [showScopeSection, setShowScopeSection] = useState('scope')
 
   const rptScripts = scripts
     .filter((item) => item.scriptType == 'UMA_RPT_CLAIMS')
@@ -59,8 +59,6 @@ function ClientCibaParUmaPanel({ client, scope, umaResources, scripts, formik })
     setOpen(true)
   }
 
-  console.log('scope', scope)
-
   return (
     <Container>
       <h2>{t(`titles.CIBA`)}</h2>
@@ -195,11 +193,9 @@ function ClientCibaParUmaPanel({ client, scope, umaResources, scripts, formik })
             <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>
-                )}
+                <a href={selectedUMA?.iconUri} target="_blank" alt="iconUrl" className="common-link" rel="noreferrer">
+                  {selectedUMA?.iconUri || '-'}
+                </a>
               </Col>
             </FormGroup>
             <FormGroup row>
@@ -208,45 +204,70 @@ function ClientCibaParUmaPanel({ client, scope, umaResources, scripts, formik })
                 <RadioGroup
                   row
                   name="scopeSelection"
-                  value={true}
+                  value={showScopeSection}
+                  onChange={(e) => setShowScopeSection(e.target.value)}
                 >
                   <FormControlLabel
-                    value={true}
+                    value={'scope'}
                     control={<Radio color="primary" />}
                     label={t('fields.scope')}
-                    checked={true}
+                    checked={showScopeSection === 'scope'}
                   />
                   <FormControlLabel
-                    value={false}
+                    value={'expression'}
                     control={<Radio color="primary" />}
                     label={t('fields.scopeExpression')}
-                    checked={false}
+                    checked={showScopeSection === 'expression'}
                   />
                 </RadioGroup>
               </Col>
             </FormGroup>
             <FormGroup row>
-              <GluuLabel label={t('fields.scopeSelection')} size={3} />
+              <GluuLabel label={t('fields.scopeOrExpression')} 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>
-                ))}
+                {showScopeSection === 'scope' ? (
+                  <React.Fragment>
+                    {!isEmpty(selectedUMA) && selectedUMA?.scopes?.map((scope, key) => {
+                      const getInum = scope.split(',')[0]
+                      const inum = getInum.length > 0 ? getInum.split('=')[1] : null
+
+                      if (inum) {
+                        return (
+                          <Box key={key}>
+                            <Box display="flex">
+                              <Link to={`/auth-server/scope/edit:${inum}`} className="common-link">
+                                {scope}
+                              </Link>
+                            </Box>
+                          </Box>
+                        )
+                      }
+                      return '-'
+                    })}
+                  </React.Fragment>
+                ) : (
+                  <React.Fragment>
+                    {!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>
+                    ))}
+                  </React.Fragment>
+                )}
               </Col>
             </FormGroup>
             <FormGroup row>
               <GluuLabel label={t('fields.associatedClient')} size={3} />
               <Col sm={9} className="top-5">
-                {!isEmpty(scope) && scope.clients?.map((client, key) => (
+                {!isEmpty(selectedUMA) && selectedUMA.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 to={`/auth-server/client/edit:${client.substring(0, 4)}`} className="common-link">
+                        {client}
                       </Link>
                     </Box>
                   </Box>
@@ -279,6 +300,7 @@ const mapStateToProps = (state) => {
   return {
     clientData: state.oidcReducer.item,
     loading: state.oidcReducer.loading,
+    scope: state.scopeReducer.item,
   }
 }
 export default connect(mapStateToProps)(ClientCibaParUmaPanel)
diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientEditPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientEditPage.js
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { editClient } from 'Plugins/auth-server/redux/actions/OIDCActions'
 import { getUMAResourcesByClient } from 'Plugins/auth-server/redux/actions/UMAResourceActions'
-import { getScopes, getScope } from 'Plugins/auth-server/redux/actions/ScopeActions'
+import { getScopes } from 'Plugins/auth-server/redux/actions/ScopeActions'
 import { getOidcDiscovery } from 'Redux/actions/OidcDiscoveryActions'
 import { getScripts } from 'Redux/actions/InitActions'
 import { buildPayload } from 'Utils/PermChecker'
@@ -17,7 +17,6 @@ function ClientEditPage({
   clientData,
   view_only,
   scopes,
-  scope,
   scripts,
   loading,
   permissions,
@@ -44,9 +43,6 @@ function ClientEditPage({
     if (isEmpty(umaResources)) {
       dispatch(getUMAResourcesByClient(clientData?.inum))
     }
-    if (isEmpty(scope)) {
-      dispatch(getScope(clientData?.inum))
-    }
     dispatch(getOidcDiscovery())
   }, [])
   useEffect(() => {
@@ -77,7 +73,6 @@ function ClientEditPage({
         client_data={clientData}
         view_only={view_only}
         scopes={scopes}
-        scope={scope}
         scripts={scripts}
         permissions={permissions}
         oidcConfiguration={oidcConfiguration}
@@ -93,7 +88,6 @@ const mapStateToProps = (state) => {
     view_only: state.oidcReducer.view,
     loading: state.oidcReducer.loading,
     scopes: state.scopeReducer.items,
-    scope: state.scopeReducer.item,
     scripts: state.initReducer.scripts,
     permissions: state.authReducer.permissions,
     oidcConfiguration: state.oidcDiscoveryReducer.configuration,
diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientWizardForm.js b/admin-ui/plugins/auth-server/components/Clients/ClientWizardForm.js
@@ -32,7 +32,6 @@ function ClientWizardForm({
   client_data,
   view_only,
   scopes,
-  scope,
   scripts,
   permissions,
   customOnSubmit,
@@ -426,7 +425,6 @@ function ClientWizardForm({
                             <ClientCibaParUmaPanel
                               client={client}
                               umaResources={umaResources}
-                              scope={scope}
                               scripts={scripts}
                               formik={formik}
                             />
diff --git a/admin-ui/plugins/auth-server/redux/sagas/OAuthScopeSaga.js b/admin-ui/plugins/auth-server/redux/sagas/OAuthScopeSaga.js
@@ -14,6 +14,7 @@ import {
   addScopeResponse,
   editScopeResponse,
   deleteScopeResponse,
+  setCurrentItem,
 } from '../actions/ScopeActions'
 import {
   GET_SCOPES,
@@ -51,13 +52,13 @@ function* newFunction() {
   return new ScopeApi(api)
 }
 
-export function* getScopeByInum() {
+export function* getScopeByInum({ payload }) {
   const audit = yield* initAudit()
   try {
     addAdditionalData(audit, FETCH, SCOPE, {})
     const scopeApi = yield* newFunction()
-    const data = yield call(scopeApi.getScope)
-    yield put(deleteScopeResponse(data))
+    const data = yield call(scopeApi.getScope, payload.action)
+    yield put(setCurrentItem(data))
     yield call(postUserAction, audit)
   } catch (e) {
     yield put(deleteScopeResponse(null))
