https://www.abpjs.io/assets/js/7e9cbf40.beb5e29d.js

1"use strict";(globalThis.webpackChunk_abpjs_abp_react_docs=globalThis.webpackChunk_abpjs_abp_react_docs||[]).push([[13515],{20096(e,n,s){s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>a,default:()=>m,frontMatter:()=>t,metadata:()=>i,toc:()=>l});const i=JSON.parse('{"id":"packages/permission-management/modal","title":"Permission Modal","description":"The PermissionManagementModal provides a UI for managing permissions for roles, users, or clients.","source":"@site/versioned_docs/version-2.1.0/packages/permission-management/modal.md","sourceDirName":"packages/permission-management","slug":"/packages/permission-management/modal","permalink":"/docs/2.1.0/packages/permission-management/modal","draft":false,"unlisted":false,"tags":[],"version":"2.1.0","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"tutorialSidebar","previous":{"title":"Overview","permalink":"/docs/2.1.0/packages/permission-management/overview"},"next":{"title":"Release Notes","permalink":"/docs/2.1.0/packages/permission-management/release-notes"}}');var r=s(74848),o=s(28453);const t={sidebar_position:2},a="Permission Modal",d={},l=[{value:"Basic Usage",id:"basic-usage",level:2},{value:"Props",id:"props",level:2},{value:"Provider Types",id:"provider-types",level:2},{value:"Role Permissions (R)",id:"role-permissions-r",level:3},{value:"User Permissions (U)",id:"user-permissions-u",level:3},{value:"Client Permissions (C)",id:"client-permissions-c",level:3},{value:"Integration with Identity",id:"integration-with-identity",level:2},{value:"usePermissionManagement Hook",id:"usepermissionmanagement-hook",level:2},{value:"isGrantedByOtherProviderName (v1.1.0)",id:"isgrantedbyotherprovidername-v110",level:3},{value:"Related",id:"related",level:2}];function c(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"permission-modal",children:"Permission Modal"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"PermissionManagementModal"})," provides a UI for managing permissions for roles, users, or clients."]}),"\n",(0,r.jsx)(n.h2,{id:"basic-usage",children:"Basic Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { PermissionManagementModal } from '@abpjs/permission-management';\nimport { useState } from 'react';\n\nfunction PermissionManager() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <button onClick={() => setIsOpen(true)}>\n        Manage Permissions\n      </button>\n\n      <PermissionManagementModal\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        providerName=\"R\"\n        providerKey=\"admin\"\n        onSave={() => console.log('Permissions saved')}\n      />\n    </>\n  );\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Prop"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Required"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"isOpen"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:"Yes"}),(0,r.jsx)(n.td,{children:"Whether the modal is open"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onClose"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"() => void"})}),(0,r.jsx)(n.td,{children:"Yes"}),(0,r.jsx)(n.td,{children:"Called when modal closes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"providerName"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"'R' | 'U' | 'C'"})}),(0,r.jsx)(n.td,{children:"Yes"}),(0,r.jsx)(n.td,{children:"Permission provider type"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"providerKey"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"string"})}),(0,r.jsx)(n.td,{children:"Yes"}),(0,r.jsx)(n.td,{children:"Provider identifier (role name, user ID, etc.)"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onSave"})}

1),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"() => void"})}),(0,r.jsx)(n.td,{children:"No"}),(0,r.jsx)(n.td,{children:"Called after permissions are saved"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hideBadges"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"boolean"})}),(0,r.jsx)(n.td,{children:"No"}),(0,r.jsx)(n.td,{children:"Hide provider badges on permissions (v1.1.0)"})]})]})]}),"\n",(0,r.jsx)(n.h2,{id:"provider-types",children:"Provider Types"}),"\n",(0,r.jsx)(n.h3,{id:"role-permissions-r",children:"Role Permissions (R)"}),"\n",(0,r.jsx)(n.p,{children:"Manage permissions for a role:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:'<PermissionManagementModal\n  isOpen={isOpen}\n  onClose={onClose}\n  providerName="R"\n  providerKey="admin"  // Role name\n/>\n'})}),"\n",(0,r.jsx)(n.h3,{id:"user-permissions-u",children:"User Permissions (U)"}),"\n",(0,r.jsx)(n.p,{children:"Manage permissions for a specific user:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:'<PermissionManagementModal\n  isOpen={isOpen}\n  onClose={onClose}\n  providerName="U"\n  providerKey="3fa85f64-5717-4562-b3fc-2c963f66afa6"  // User ID\n/>\n'})}),"\n",(0,r.jsx)(n.h3,{id:"client-permissions-c",children:"Client Permissions (C)"}),"\n",(0,r.jsx)(n.p,{children:"Manage permissions for an OAuth client:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:'<PermissionManagementModal\n  isOpen={isOpen}\n  onClose={onClose}\n  providerName="C"\n  providerKey="MyApp_Web"  // Client ID\n/>\n'})}),"\n",(0,r.jsx)(n.h2,{id:"integration-with-identity",children:"Integration with Identity"}),"\n",(0,r.jsx)(n.p,{children:"Use with the identity package to manage user/role permissions:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { useRoles } from '@abpjs/identity';\nimport { PermissionManagementModal } from '@abpjs/permission-management';\nimport { useState } from 'react';\n\nfunction RolesWithPermissions() {\n  const { roles } = useRoles();\n  const [selectedRole, setSelectedRole] = useState<string | null>(null);\n\n  return (\n    <div>\n      <h2>Roles</h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Name</th>\n            <th>Actions</th>\n          </tr>\n        </thead>\n        <tbody>\n          {roles.map((role) => (\n            <tr key={role.id}>\n              <td>{role.name}</td>\n              <td>\n                <button onClick={() => setSelectedRole(role.name)}>\n                  Permissions\n                </button>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n\n      <PermissionManagementModal\n        isOpen={!!selectedRole}\n        onClose={() => setSelectedRole(null)}\n        providerName=\"R\"\n        providerKey={selectedRole || ''}\n      />\n    </div>\n  );\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usepermissionmanagement-hook",children:"usePermissionManagement Hook"}),"\n",(0,r.jsx)(n.p,{children:"For custom permission management UI:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"import { usePermissionManagement } from '@abpjs/permission-management';\n\nfunction CustomPermissionUI() {\n  const {\n    permissions,\n    loading,\n    togglePermission,\n    grantAll,\n    revokeAll,\n    save,\n  } = usePermissionManagement('R', 'admin');\n\n  if (loading) return <p>Loading...</p>;\n\n  return (\n    <div>\n      <button onClick={grantAll}>Grant All</button>\n      <button onClick={revokeAll}>Revoke All</button>\n\n      {permissions.map((group) => (\n        <div key={group.name}>\n          <h3>{group.displayName}</h3>\n          {group.permissions.map((permission) => (\n            <label key={permission.name}>\n              <input\n                type=\"checkbox\"\n                checked={permission.isGranted}\n                onChange={() => togglePermission(permission.name)}\n              />\n              {permission.displayName}\n            </label>\n          ))}\n        </div>\n      ))}\n\n      <button onClick={save}>Save</button>\n    </div>\n  );\n}\n"})}),"\n",(0,r.jsx)(n.h3,{id:"isgrantedbyotherprovidername-v110",children:"isGrantedByOtherProviderName (v1.1.0)"}),"\n",(0,r.jsx)(n.p,{children:"Check if a permission is granted by another provider. Useful for showing visual indicators when a permission comes from a different provider (e.g., a role) rather than being directly granted:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:'import { usePermissionManagement } from \'@abpjs/permission-management\';\n\nfunction PermissionList({ providerName }: { providerName: string }) {\n  const { getSelectedGroupPermissions, isGrantedByOtherProviderName } = usePermissionManagement();\n\n  const permissions = getSelectedGroupPermissions();\n\n  return (\n    <ul>\n      {permissions.map((permission) => (\n        <li key={permission.name}>\n          <input type="checkbox" checked={permission.isGranted} />\n          {permission.displayName}\n          {isGrantedByOtherProviderName(permission.grantedProviders, providerName) && (\n            <sp

1an className="badge">From Other Provider</span>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n'})}),"\n",(0,r.jsx)(n.admonition,{type:"note",children:(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"isGrantedByRole"})," is deprecated. Use ",(0,r.jsx)(n.code,{children:"isGrantedByOtherProviderName"})," instead."]})}),"\n",(0,r.jsx)(n.h2,{id:"related",children:"Related"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"../core/permissions",children:"Permissions"})," - Permission checking"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"../identity/overview",children:"Identity"})," - User and role management"]}),"\n"]})]})}function m(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},28453(e,n,s){s.d(n,{R:()=>t,x:()=>a});var i=s(96540);const r={},o=i.createContext(r);function t(e){const n=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);