feat(admin-ui): add delete dialog

Author: harryandriyan

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

@@ -22,7 +22,8 @@
     "view": "View",
     "yes": "Yes",
     "change_password": "Change Password",
-    "close": "Close"
+    "close": "Close",
+    "delete": "Delete"
   },
   "dashboard": {
     "summary_title": "Actives Users & Access Token Stats",

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

@@ -80,7 +80,8 @@
     "test": "Test",
     "view": "Vue",
     "yes": "Oui",
-    "close": "Fermer"
+    "close": "Fermer",
+    "delete": "Supprimez"
   },
   "fields": {
     "access_token_signing_alg": "Algorithme de signature de jeton d'accès",

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

@@ -79,7 +79,8 @@
     "test": "Teste",
     "view": "Visualizar",
     "yes": "Sim",
-    "close": "Fechar"
+    "close": "Fechar",
+    "delete": "Deletar"
   },
   "fields": {
     "access_token_signing_alg": "Algoritmo de assinatura de token de acesso",

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

@@ -47,7 +47,7 @@ const GluuDialog = ({ row, handler, modal, onAccept, subject, name }) => {
             style={{ color: 'red' }}
             className="fa fa-2x fa-warning fa-fw modal-icon mb-3"
           ></i>
-          {t('messages.action_deletion_for')} {subject} ({name}-{row.inum})
+          {t('messages.action_deletion_for')} {subject} ({name}-{row.inum ? row.inum : row.id})
         </ModalHeader>
         <ModalBody>{t('messages.action_deletion_question')}</ModalBody>
         <ModalBody>

admin-ui/plugins/auth-server/components/Clients/ClientCibaParUmaPanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react'
+import React, { useState } from 'react'
 import Box from '@material-ui/core/Box'
 import { Link } from 'react-router-dom'
 import {
@@ -20,14 +20,14 @@ import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import GluuTypeAheadWithAdd from 'Routes/Apps/Gluu/GluuTypeAheadWithAdd'
 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'
+import { deleteUMAResource } from 'Plugins/auth-server/redux/actions/UMAResourceActions'
+import GluuDialog from 'Routes/Apps/Gluu/GluuDialog'
+import { buildPayload } from 'Utils/PermChecker'
 const DOC_CATEGORY = 'openid_client'
 
-function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
+function ClientCibaParUmaPanel({ client, dispatch, 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']
   const claimRedirectURI = []
@@ -44,6 +44,7 @@ function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
   const [selectedUMA, setSelectedUMA] = useState()
   const [scopeExpression, setScopeExpression] = useState()
   const [showScopeSection, setShowScopeSection] = useState('scope')
+  const [confirmModal, setConfirmModal] = useState(false)
 
   const rptScripts = scripts
     .filter((item) => item.scriptType == 'UMA_RPT_CLAIMS')
@@ -53,12 +54,25 @@ function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
   const handleUMADetail = (uma) => {
     if (!isEmpty(uma)) {
       setSelectedUMA(uma)
-      setScopeExpression(JSON.parse(uma.scopeExpression)?.data)
+      if (!isEmpty(uma.scopeExpression)) {
+        setScopeExpression(JSON.parse(uma.scopeExpression)?.data)
+      }
     }
 
     setOpen(true)
   }
 
+  const handleDeleteUMA = (uma) => {
+    setSelectedUMA(uma)
+    setConfirmModal(true)
+  }
+
+  const onDeletionConfirmed = (message) => {
+    buildPayload({}, message, selectedUMA.id)
+    dispatch(deleteUMAResource(selectedUMA.id))
+    setConfirmModal(false)
+  }
+
   return (
     <Container>
       <h2>{t(`titles.CIBA`)}</h2>
@@ -156,10 +170,24 @@ function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
         <Col sm={9}>
           {umaResources.length > 0 && umaResources?.map(uma => {
             return (
-              <Box key={uma.id}>
+              <Box key={uma.id} className="mb-2">
                 <Box display="flex">
-                  <Box className="common-link cursor-pointer" onClick={() => handleUMADetail(uma)}>
-                    {uma.id}
+                  <Box width="40%">
+                    <a href="javascript:;" className="common-link cursor-pointer" onClick={() => handleUMADetail(uma)}>
+                      {uma.id}
+                    </a>
+                  </Box>
+                  <Box width="50%" className="text-dark">
+                    {uma.name}
+                  </Box>
+                  <Box width="10%">
+                    <Button
+                      color="danger"
+                      size="sm"
+                      onClick={() => handleDeleteUMA(uma)}
+                    >
+                      <span className="font-weight-bold">X</span>
+                    </Button>
                   </Box>
                 </Box>
               </Box>
@@ -247,15 +275,15 @@ function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
                   </React.Fragment>
                 ) : (
                   <React.Fragment>
-                    {!isEmpty(scopeExpression) && scopeExpression.map((expression, key) => (
+                    {!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>
@@ -289,14 +317,23 @@ function ClientCibaParUmaPanel({ client, umaResources, scripts, formik }) {
         </ModalBody>
         <ModalFooter>
           <Button
-            color={`primary-${selectedTheme}`}
-            style={applicationStyle.buttonStyle}
-            onClick={() => setOpen(!open)}
+            color="danger"
+            onClick={() => handleDeleteUMA(selectedUMA)}
           >
-            {t('actions.close')}
+            {t('actions.delete')}
           </Button>
         </ModalFooter>
       </Modal>
+      {selectedUMA && (
+        <GluuDialog
+          row={selectedUMA}
+          name={selectedUMA?.name}
+          handler={() => setConfirmModal(!confirmModal)}
+          modal={confirmModal}
+          subject="uma resources"
+          onAccept={onDeletionConfirmed}
+        />
+      )}
     </Container>
   )
 }
@@ -308,5 +345,5 @@ const mapStateToProps = (state) => {
     scope: state.scopeReducer.item,
   }
 }
-export default connect(mapStateToProps)(ClientCibaParUmaPanel)
 
+export default connect(mapStateToProps)(ClientCibaParUmaPanel)

admin-ui/plugins/auth-server/redux/actions/UMAResourceActions.js

@@ -1,6 +1,8 @@
 import {
   GET_UMA_RESOURCES,
-  GET_UMA_RESOURCES_RESPONSE
+  GET_UMA_RESOURCES_RESPONSE,
+  DELETE_UMA_RESOURCE,
+  DELETE_UMA_RESOURCE_RESPONSE
 } from './types'
 
 export const getUMAResourcesByClient = (inum) => ({
@@ -12,3 +14,13 @@ export const getUMAResourcesByClientResponse = (data) => ({
   type: GET_UMA_RESOURCES_RESPONSE,
   payload: { data },
 })
+
+export const deleteUMAResource = (action) => ({
+  type: DELETE_UMA_RESOURCE,
+  payload: { action },
+})
+
+export const deleteUMAResourceResponse = (data) => ({
+  type: DELETE_UMA_RESOURCE_RESPONSE,
+  payload: { data },
+})

admin-ui/plugins/auth-server/redux/actions/types.js

@@ -41,6 +41,8 @@ export const SET_VIEW = 'SET_VIEW'
 // UMA Resources
 export const GET_UMA_RESOURCES = 'GET_UMA_RESOURCES'
 export const GET_UMA_RESOURCES_RESPONSE = 'GET_UMA_RESOURCES_RESPONSE'
+export const DELETE_UMA_RESOURCE = 'DELETE_UMA_RESOURCE'
+export const DELETE_UMA_RESOURCE_RESPONSE = 'DELETE_UMA_RESOURCE_RESPONSE'
 
 // Attributes types
 export const GET_ATTRIBUTES = 'GET_ATTRIBUTES'

admin-ui/plugins/auth-server/redux/api/UMAResourceApi.js

@@ -11,6 +11,14 @@ export default class UMAResourceApi {
     })
   }
 
+  deteleUMAResources = async (id) => {
+    return new Promise((resolve, reject) => {
+      this.api.deleteOauthUmaResourcesById(id, (error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
   handleResponse(error, reject, resolve, data) {
     if (error) {
       reject(error)

admin-ui/plugins/auth-server/redux/reducers/UMAResourceReducer.js

@@ -1,7 +1,9 @@
 import {
   RESET,
   GET_UMA_RESOURCES,
-  GET_UMA_RESOURCES_RESPONSE
+  GET_UMA_RESOURCES_RESPONSE,
+  DELETE_UMA_RESOURCE,
+  DELETE_UMA_RESOURCE_RESPONSE,
 } from '../actions/types'
 import reducerRegistry from 'Redux/reducers/ReducerRegistry'
 
@@ -29,6 +31,19 @@ export default function UMAResourceReducer(state = INIT_STATE, action) {
         return handleDefault()
       }
 
+    case DELETE_UMA_RESOURCE:
+      return handleLoading()
+
+    case DELETE_UMA_RESOURCE_RESPONSE:
+      if (action.payload.data) {
+        return {
+          ...state,
+          items: state.items.filter(({ id }) => id !== action.payload.data),
+          loading: false,
+        }
+      }
+      return handleDefault()
+
     case RESET:
       return {
         ...state,

admin-ui/plugins/auth-server/redux/sagas/UMAResourceSaga.js

@@ -4,11 +4,11 @@ import {
   addAdditionalData,
 } from 'Utils/TokenController'
 import { postUserAction } from 'Redux/api/backend-api'
-import { getUMAResourcesByClientResponse } from '../actions/UMAResourceActions'
+import { getUMAResourcesByClientResponse, deleteUMAResourceResponse } from '../actions/UMAResourceActions'
 import { getAPIAccessToken } from '../actions/AuthActions'
 import { UMA } from '../audit/Resources'
-import { FETCH } from '../../../../app/audit/UserActionType'
-import { GET_UMA_RESOURCES } from '../actions/types'
+import { FETCH, DELETION } from '../../../../app/audit/UserActionType'
+import { DELETE_UMA_RESOURCE, GET_UMA_RESOURCES } from '../actions/types'
 import UMAResourceApi from '../api/UMAResourceApi'
 import { getClient } from 'Redux/api/base'
 const JansConfigApi = require('jans_config_api')
@@ -51,12 +51,34 @@ export function* getUMAResourcesByClient({ payload }) {
   }
 }
 
+export function* deleteUMAResourceById({ payload }) {
+  const audit = yield* initAudit()
+  try {
+    addAdditionalData(audit, DELETION, UMA, payload)
+    const api = yield* newFunction()
+    yield call(api.deleteUMAResourceById, payload.action.action_data)
+    yield put(deleteUMAResourceResponse(payload.action.action_data))
+    yield call(postUserAction, audit)
+  } catch (e) {
+    yield put(deleteUMAResourceResponse(null))
+    if (isFourZeroOneError(e)) {
+      const jwt = yield select((state) => state.authReducer.userinfo_jwt)
+      yield put(getAPIAccessToken(jwt))
+    }
+  }
+}
+
 export function* getUMAResourcesByClientWatcher() {
   yield takeLatest(GET_UMA_RESOURCES, getUMAResourcesByClient)
 }
 
+export function* deleteUMAResourceByIdWatcher() {
+  yield takeLatest(DELETE_UMA_RESOURCE, deleteUMAResourceById)
+}
+
 export default function* rootSaga() {
   yield all([
     fork(getUMAResourcesByClientWatcher),
+    fork(deleteUMAResourceByIdWatcher),
   ])
 }