@openedx/frontend-app-admin-console 1.0.0-alpha.0

package/dist/authz-module/components/RenderPermissionInLine.d.ts

@@ -0,0 +1,6 @@
+import { PermissionItem } from '../../types';
+interface RenderPermissionInLineProps {
+    items: PermissionItem[];
+}
+declare const RenderPermissionInLine: ({ items }: RenderPermissionInLineProps) => import("react").JSX.Element;
+export default RenderPermissionInLine;

package/dist/authz-module/components/RenderPermissionInLine.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@openedx/paragon';
+import ResourceTooltip from './ResourceTooltip';
+const RenderPermissionInLine = ({ items }) => (_jsx("div", { className: "d-flex align-items-start w-100 no-scroll", children: items.map(({ key, icon, label, description, perms, }, index) => (_jsxs("div", { className: `d-flex flex-column ${index !== items.length - 1 ? 'pr-4 mr-4 border-right' : ''}`, children: [_jsxs("div", { className: "d-flex align-items-center mb-2", children: [_jsx(Icon, { src: icon, className: "mr-2 text-primary", size: "xs" }), _jsx("h5", { className: "text-primary m-0", children: label }), _jsx(ResourceTooltip, { resourceGroup: {
+                            key, label, description, permissions: perms,
+                        } })] }), _jsx("div", { className: "d-flex", children: perms.map((perm, i) => (_jsxs("div", { className: `d-flex align-items-center ${i !== perms.length - 1 ? 'pr-2 mr-2 border-right' : ''}`, children: [_jsx(Icon, { src: perm.icon, className: "mr-2", size: "xs" }), _jsx("span", { className: "text-primary small font-weight-light", children: perm.label })] }, perm.key))) })] }, key))) }));
+export default RenderPermissionInLine;
+//# sourceMappingURL=RenderPermissionInLine.js.map

package/dist/authz-module/components/RenderPermissionInLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderPermissionInLine.js","sourceRoot":"","sources":["../../../src/authz-module/components/RenderPermissionInLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAMhD,MAAM,sBAAsB,GAAG,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE,CAAC,CACzE,cAAK,SAAS,EAAC,0CAA0C,YACtD,KAAK,CAAC,GAAG,CAAC,CAAC,EACV,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,GACrC,EAAE,KAAK,EAAE,EAAE,CAAC,CACX,eAEE,SAAS,EAAE,sBAAsB,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,aAE7F,eAAK,SAAS,EAAC,gCAAgC,aAC7C,KAAC,IAAI,IAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAC,mBAAmB,EAAC,IAAI,EAAC,IAAI,GAAG,EAC3D,aAAI,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAM,EAC7C,KAAC,eAAe,IACd,aAAa,EAAE;4BACb,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK;yBAC5C,GACD,IACE,EACN,cAAK,SAAS,EAAC,QAAQ,YACpB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAEE,SAAS,EAAE,6BAA6B,CAAC,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,aAEhG,KAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,EACnD,eAAM,SAAS,EAAC,sCAAsC,YACnD,IAAI,CAAC,KAAK,GACN,KANF,IAAI,CAAC,GAAG,CAOT,CACP,CAAC,GACE,KAxBD,GAAG,CAyBJ,CACP,CAAC,GACE,CACP,CAAC;AACF,eAAe,sBAAsB,CAAC","sourcesContent":["import { Icon } from '@openedx/paragon';\nimport { PermissionItem } from '@src/types';\nimport ResourceTooltip from './ResourceTooltip';\n\ninterface RenderPermissionInLineProps {\n  items: PermissionItem[];\n}\n\nconst RenderPermissionInLine = ({ items }: RenderPermissionInLineProps) => (\n  <div className=\"d-flex align-items-start w-100 no-scroll\">\n    {items.map(({\n      key, icon, label, description, perms,\n    }, index) => (\n      <div\n        key={key}\n        className={`d-flex flex-column ${index !== items.length - 1 ? 'pr-4 mr-4 border-right' : ''}`}\n      >\n        <div className=\"d-flex align-items-center mb-2\">\n          <Icon src={icon} className=\"mr-2 text-primary\" size=\"xs\" />\n          <h5 className=\"text-primary m-0\">{label}</h5>\n          <ResourceTooltip\n            resourceGroup={{\n              key, label, description, permissions: perms,\n            }}\n          />\n        </div>\n        <div className=\"d-flex\">\n          {perms.map((perm, i) => (\n            <div\n              key={perm.key}\n              className={`d-flex align-items-center ${i !== perms.length - 1 ? 'pr-2 mr-2 border-right' : ''}`}\n            >\n              <Icon src={perm.icon} className=\"mr-2\" size=\"xs\" />\n              <span className=\"text-primary small font-weight-light\">\n                {perm.label}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    ))}\n  </div>\n);\nexport default RenderPermissionInLine;\n"]}

package/dist/authz-module/components/ResourceTooltip.d.ts

@@ -0,0 +1,11 @@
+import { PermissionMetadata } from '../../types';
+interface ResourceTooltipProps {
+    resourceGroup: {
+        key: string;
+        label: string;
+        description: string;
+        permissions: PermissionMetadata[];
+    };
+}
+declare const ResourceTooltip: ({ resourceGroup }: ResourceTooltipProps) => import("react").JSX.Element;
+export default ResourceTooltip;

package/dist/authz-module/components/ResourceTooltip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, OverlayTrigger, Popover } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
+const ResourceTooltip = ({ resourceGroup }) => (_jsx(OverlayTrigger, { placement: "auto", overlay: (_jsx(Popover, { id: `tooltip-${resourceGroup.label}`, children: _jsxs(Popover.Content, { className: "p-3", children: [_jsx("h4", { className: "text-primary", children: resourceGroup.label }), _jsx("p", { className: "small", children: resourceGroup.description }), _jsx("ul", { className: "small", children: resourceGroup.permissions.map(permission => {
+                        var _a, _b;
+                        return (_jsxs("li", { children: [_jsxs("b", { children: [(_b = (_a = permission.label) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '', ":"] }), " ", permission.description] }, permission.key));
+                    }) })] }) })), children: _jsx(Icon, { className: "d-inline-block text-gray-300 ml-2 my-auto", src: Info }) }, `overlay-${resourceGroup.key}`));
+export default ResourceTooltip;
+//# sourceMappingURL=ResourceTooltip.js.map

package/dist/authz-module/components/ResourceTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceTooltip.js","sourceRoot":"","sources":["../../../src/authz-module/components/ResourceTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAY9C,MAAM,eAAe,GAAG,CAAC,EAAE,aAAa,EAAwB,EAAE,EAAE,CAAC,CACnE,KAAC,cAAc,IAEb,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,CACP,KAAC,OAAO,IAAC,EAAE,EAAE,WAAW,aAAa,CAAC,KAAK,EAAE,YAC3C,MAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,KAAK,aAC9B,aAAI,SAAS,EAAC,cAAc,YAAE,aAAa,CAAC,KAAK,GAAM,EACvD,YAAG,SAAS,EAAC,OAAO,YAAE,aAAa,CAAC,WAAW,GAAK,EACpD,aAAI,SAAS,EAAC,OAAO,YAClB,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;;wBAAC,OAAA,CAC3C,yBAAyB,wBAAI,MAAA,MAAA,UAAU,CAAC,KAAK,0CAAE,IAAI,EAAE,mCAAI,EAAE,SAAM,OAAE,UAAU,CAAC,WAAW,KAAhF,UAAU,CAAC,GAAG,CAAwE,CAChG,CAAA;qBAAA,CAAC,GACC,IACW,GACV,CACX,YAED,KAAC,IAAI,IAAC,SAAS,EAAC,2CAA2C,EAAC,GAAG,EAAE,IAAI,GAAI,IAhBpE,WAAW,aAAa,CAAC,GAAG,EAAE,CAiBpB,CAClB,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { Icon, OverlayTrigger, Popover } from '@openedx/paragon';\nimport { Info } from '@openedx/paragon/icons';\nimport { PermissionMetadata } from '@src/types';\n\ninterface ResourceTooltipProps {\n  resourceGroup: {\n    key: string;\n    label: string;\n    description: string;\n    permissions: PermissionMetadata[];\n  };\n}\n\nconst ResourceTooltip = ({ resourceGroup }: ResourceTooltipProps) => (\n  <OverlayTrigger\n    key={`overlay-${resourceGroup.key}`}\n    placement=\"auto\"\n    overlay={(\n      <Popover id={`tooltip-${resourceGroup.label}`}>\n        <Popover.Content className=\"p-3\">\n          <h4 className=\"text-primary\">{resourceGroup.label}</h4>\n          <p className=\"small\">{resourceGroup.description}</p>\n          <ul className=\"small\">\n            {resourceGroup.permissions.map(permission => (\n              <li key={permission.key}><b>{permission.label?.trim() ?? ''}:</b> {permission.description}</li>\n            ))}\n          </ul>\n        </Popover.Content>\n      </Popover>\n    )}\n  >\n    <Icon className=\"d-inline-block text-gray-300 ml-2 my-auto\" src={Info} />\n  </OverlayTrigger>\n);\n\nexport default ResourceTooltip;\n"]}

package/dist/authz-module/components/RoleCard/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const actionsDictionary: {
+    create: any;
+    edit: any;
+    delete: any;
+    import: any;
+    publish: any;
+    view: any;
+    reuse: any;
+    team: any;
+    export: any;
+    manage: any;
+};
+export type ActionKey = keyof typeof actionsDictionary;
+export declare const actionKeys: string[];

package/dist/authz-module/components/RoleCard/constants.js

@@ -0,0 +1,15 @@
+import { Add, Delete, DownloadDone, Edit, ManageAccounts, Sync, FileUpload, Visibility, FileDownload, Settings, } from '@openedx/paragon/icons';
+export const actionsDictionary = {
+    create: Add,
+    edit: Edit,
+    delete: Delete,
+    import: FileDownload,
+    publish: DownloadDone,
+    view: Visibility,
+    reuse: Sync,
+    team: ManageAccounts,
+    export: FileUpload,
+    manage: Settings,
+};
+export const actionKeys = Object.keys(actionsDictionary);
+//# sourceMappingURL=constants.js.map

package/dist/authz-module/components/RoleCard/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/authz-module/components/RoleCard/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,GACtG,MAAM,wBAAwB,CAAC;AAEhC,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,YAAY;IACrB,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,IAAI;IACX,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAGF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import {\n  Add, Delete, DownloadDone, Edit, ManageAccounts, Sync, FileUpload, Visibility, FileDownload, Settings,\n} from '@openedx/paragon/icons';\n\nexport const actionsDictionary = {\n  create: Add,\n  edit: Edit,\n  delete: Delete,\n  import: FileDownload,\n  publish: DownloadDone,\n  view: Visibility,\n  reuse: Sync,\n  team: ManageAccounts,\n  export: FileUpload,\n  manage: Settings,\n};\n\nexport type ActionKey = keyof typeof actionsDictionary;\nexport const actionKeys = Object.keys(actionsDictionary);\n"]}

package/dist/authz-module/components/RoleCard/messages.d.ts

@@ -0,0 +1,73 @@
+declare const messages: {
+    'authz.permissions.title': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.create': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.edit': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.import': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.delete': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.manage': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.publish': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.view': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.permissions.actions.reuse': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.role.card.delete.action.alt': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.role.card.userCounter': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.role.card.permissions.ariaLabel': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.role.card.permissions.status.denied': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'authz.role.card.permissions.status.granted': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/authz-module/components/RoleCard/messages.js

@@ -0,0 +1,75 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    'authz.permissions.title': {
+        id: 'authz.permissions.title',
+        defaultMessage: 'Permissions',
+        description: 'Title for the permissions section in the role card',
+    },
+    'authz.permissions.actions.create': {
+        id: 'authz.permissions.actions.create',
+        defaultMessage: 'Create {resource}',
+        description: 'Default label for the create action',
+    },
+    'authz.permissions.actions.edit': {
+        id: 'authz.permissions.actions.edit',
+        defaultMessage: 'Edit {resource}',
+        description: 'Default label for the edit action',
+    },
+    'authz.permissions.actions.import': {
+        id: 'authz.permissions.actions.import',
+        defaultMessage: 'Import {resource}',
+        description: 'Default label for the import action',
+    },
+    'authz.permissions.actions.delete': {
+        id: 'authz.permissions.actions.delete',
+        defaultMessage: 'Delete {resource}',
+        description: 'Default label for the delete action',
+    },
+    'authz.permissions.actions.manage': {
+        id: 'authz.permissions.actions.manage',
+        defaultMessage: 'Manage {resource}',
+        description: 'Default label for the manage action',
+    },
+    'authz.permissions.actions.publish': {
+        id: 'authz.permissions.actions.publish',
+        defaultMessage: 'Publish {resource}',
+        description: 'Default label for the publish action',
+    },
+    'authz.permissions.actions.view': {
+        id: 'authz.permissions.actions.view',
+        defaultMessage: 'View {resource}',
+        description: 'Default label for the view action',
+    },
+    'authz.permissions.actions.reuse': {
+        id: 'authz.permissions.actions.reuse',
+        defaultMessage: 'Reuse {resource}',
+        description: 'Default label for the reuse action',
+    },
+    'authz.role.card.delete.action.alt': {
+        id: 'authz.role.card.delete.action.alt',
+        defaultMessage: 'Delete role action',
+        description: 'Alt description for delete button',
+    },
+    'authz.role.card.userCounter': {
+        id: 'authz.role.card.userCounter',
+        defaultMessage: 'Number of users with this role',
+        description: 'Screen reader text for the user counter icon in the role card header',
+    },
+    'authz.role.card.permissions.ariaLabel': {
+        id: 'authz.role.card.permissions.ariaLabel',
+        defaultMessage: '{permissionName} permission is {permissionStatus}',
+        description: 'Aria label for permission chips in the role card',
+    },
+    'authz.role.card.permissions.status.denied': {
+        id: 'authz.role.card.permissions.status.denied',
+        defaultMessage: 'denied',
+        description: 'Label for denied status of a permission in the role card',
+    },
+    'authz.role.card.permissions.status.granted': {
+        id: 'authz.role.card.permissions.status.granted',
+        defaultMessage: 'granted',
+        description: 'Label for granted status of a permission in the role card',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/authz-module/components/RoleCard/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/authz-module/components/RoleCard/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,yBAAyB,EAAE;QACzB,EAAE,EAAE,yBAAyB;QAC7B,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,oDAAoD;KAClE;IACD,kCAAkC,EAAE;QAClC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,qCAAqC;KACnD;IACD,gCAAgC,EAAE;QAChC,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,mCAAmC;KACjD;IACD,kCAAkC,EAAE;QAClC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,qCAAqC;KACnD;IACD,kCAAkC,EAAE;QAClC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,qCAAqC;KACnD;IACD,kCAAkC,EAAE;QAClC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,qCAAqC;KACnD;IACD,mCAAmC,EAAE;QACnC,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,oBAAoB;QACpC,WAAW,EAAE,sCAAsC;KACpD;IACD,gCAAgC,EAAE;QAChC,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,mCAAmC;KACjD;IACD,iCAAiC,EAAE;QACjC,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,oCAAoC;KAClD;IACD,mCAAmC,EAAE;QACnC,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,oBAAoB;QACpC,WAAW,EAAE,mCAAmC;KACjD;IACD,6BAA6B,EAAE;QAC7B,EAAE,EAAE,6BAA6B;QACjC,cAAc,EAAE,gCAAgC;QAChD,WAAW,EAAE,sEAAsE;KACpF;IACD,uCAAuC,EAAE;QACvC,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,mDAAmD;QACnE,WAAW,EAAE,kDAAkD;KAChE;IACD,2CAA2C,EAAE;QAC3C,EAAE,EAAE,2CAA2C;QAC/C,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,0DAA0D;KACxE;IACD,4CAA4C,EAAE;QAC5C,EAAE,EAAE,4CAA4C;QAChD,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,2DAA2D;KACzE;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  'authz.permissions.title': {\n    id: 'authz.permissions.title',\n    defaultMessage: 'Permissions',\n    description: 'Title for the permissions section in the role card',\n  },\n  'authz.permissions.actions.create': {\n    id: 'authz.permissions.actions.create',\n    defaultMessage: 'Create {resource}',\n    description: 'Default label for the create action',\n  },\n  'authz.permissions.actions.edit': {\n    id: 'authz.permissions.actions.edit',\n    defaultMessage: 'Edit {resource}',\n    description: 'Default label for the edit action',\n  },\n  'authz.permissions.actions.import': {\n    id: 'authz.permissions.actions.import',\n    defaultMessage: 'Import {resource}',\n    description: 'Default label for the import action',\n  },\n  'authz.permissions.actions.delete': {\n    id: 'authz.permissions.actions.delete',\n    defaultMessage: 'Delete {resource}',\n    description: 'Default label for the delete action',\n  },\n  'authz.permissions.actions.manage': {\n    id: 'authz.permissions.actions.manage',\n    defaultMessage: 'Manage {resource}',\n    description: 'Default label for the manage action',\n  },\n  'authz.permissions.actions.publish': {\n    id: 'authz.permissions.actions.publish',\n    defaultMessage: 'Publish {resource}',\n    description: 'Default label for the publish action',\n  },\n  'authz.permissions.actions.view': {\n    id: 'authz.permissions.actions.view',\n    defaultMessage: 'View {resource}',\n    description: 'Default label for the view action',\n  },\n  'authz.permissions.actions.reuse': {\n    id: 'authz.permissions.actions.reuse',\n    defaultMessage: 'Reuse {resource}',\n    description: 'Default label for the reuse action',\n  },\n  'authz.role.card.delete.action.alt': {\n    id: 'authz.role.card.delete.action.alt',\n    defaultMessage: 'Delete role action',\n    description: 'Alt description for delete button',\n  },\n  'authz.role.card.userCounter': {\n    id: 'authz.role.card.userCounter',\n    defaultMessage: 'Number of users with this role',\n    description: 'Screen reader text for the user counter icon in the role card header',\n  },\n  'authz.role.card.permissions.ariaLabel': {\n    id: 'authz.role.card.permissions.ariaLabel',\n    defaultMessage: '{permissionName} permission is {permissionStatus}',\n    description: 'Aria label for permission chips in the role card',\n  },\n  'authz.role.card.permissions.status.denied': {\n    id: 'authz.role.card.permissions.status.denied',\n    defaultMessage: 'denied',\n    description: 'Label for denied status of a permission in the role card',\n  },\n  'authz.role.card.permissions.status.granted': {\n    id: 'authz.role.card.permissions.status.granted',\n    defaultMessage: 'granted',\n    description: 'Label for granted status of a permission in the role card',\n  },\n});\n\nexport default messages;\n"]}

package/dist/authz-module/components/TableCells.d.ts

@@ -0,0 +1,29 @@
+import { UserRoleWithPermissions, RoleToDelete } from '../../types';
+import { type DataTableCellProps } from '@openedx/paragon';
+interface ViewActionCellExtraProps {
+    isCourseEnabled: (scope: string) => boolean;
+}
+type CellProps = DataTableCellProps<UserRoleWithPermissions>;
+type CellPropsWithValue = CellProps & {
+    value: string;
+};
+type ExtendedCellProps = CellPropsWithValue & {
+    cell: {
+        getCellProps: (props?: Record<string, string>) => Record<string, string>;
+    };
+};
+interface ActionsCellExtraProps {
+    onClickDeleteButton: (role: RoleToDelete) => void;
+    isUserAuthenticatedPage: boolean;
+    isCourseEnabled?: (scope: string) => boolean;
+}
+declare const NameCell: ({ row }: CellProps) => import("react").JSX.Element;
+declare const ViewActionCell: ({ row, isCourseEnabled }: CellProps & Partial<ViewActionCellExtraProps>) => import("react").JSX.Element;
+declare const createViewActionCell: (extraProps: ViewActionCellExtraProps) => (cellProps: any) => import("react").JSX.Element;
+declare const OrgCell: ({ value, row }: CellPropsWithValue) => import("react").JSX.Element;
+declare const ScopeCell: ({ row }: CellProps) => import("react").JSX.Element;
+declare const RoleCell: ({ value, cell }: ExtendedCellProps) => import("react").JSX.Element;
+declare const PermissionsCell: ({ row }: CellProps) => import("react").JSX.Element;
+declare const ViewAllPermissionsCell: ({ row }: CellProps) => import("react").JSX.Element;
+declare const createActionsCell: (extraProps: ActionsCellExtraProps) => (cellProps: any) => import("react").JSX.Element;
+export { NameCell, ViewActionCell, RoleCell, OrgCell, ScopeCell, PermissionsCell, ViewAllPermissionsCell, createActionsCell, createViewActionCell, };

package/dist/authz-module/components/TableCells.js

@@ -0,0 +1,137 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SiteContext, useIntl } from '@openedx/frontend-base';
+import { RemoveRedEye, Delete, ExpandMore, Info, } from '@openedx/paragon/icons';
+import { useNavigate } from 'react-router-dom';
+import { useContext, useMemo } from 'react';
+import { ADMIN_ROLES, DJANGO_MANAGED_ROLES, MAP_ROLE_KEY_TO_LABEL, } from '../constants';
+import { Icon, IconButton, OverlayTrigger, Tooltip, DataTableContext, } from '@openedx/paragon';
+import { RESOURCE_ICONS } from './constants';
+import messages from './messages';
+import ViewMoreLink from './ViewMoreLink';
+// A disabled button can't trigger its own tooltip (Paragon sets pointer-events: none on it),
+// so the OverlayTrigger must live on a wrapper element that still receives hover events.
+const DisabledCourseActionButton = ({ src, alt, size, variant, }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(OverlayTrigger, { placement: "left", overlay: (_jsx(Tooltip, { variant: "light", id: "tooltip-left", children: formatMessage(messages['authz.table.actions.course.disabled.tooltip']) })), children: _jsx("span", { className: "d-inline-block", children: _jsx(IconButton, { src: src, alt: alt, size: size, variant: variant, disabled: true }) }) }));
+};
+const NameCell = ({ row }) => {
+    const intl = useIntl();
+    const { authenticatedUser } = useContext(SiteContext);
+    const username = authenticatedUser === null || authenticatedUser === void 0 ? void 0 : authenticatedUser.username;
+    if (row.original.username === username) {
+        return (_jsxs("span", { children: [row.original.fullName || row.original.username, _jsx("span", { className: "text-gray-500", children: intl.formatMessage(messages['authz.table.username.current']) })] }));
+    }
+    return _jsx("span", { children: row.original.fullName || row.original.username || '' });
+};
+const ViewActionCell = ({ row, isCourseEnabled }) => {
+    var _a;
+    const { formatMessage } = useIntl();
+    const navigate = useNavigate();
+    const viewPath = `/authz/user/${row.original.username}`;
+    const isCourseScope = !((_a = row.original.role) === null || _a === void 0 ? void 0 : _a.startsWith('lib')) && !DJANGO_MANAGED_ROLES.includes(row.original.role);
+    const isDisabled = isCourseEnabled !== undefined && isCourseScope && !isCourseEnabled(row.original.scope);
+    if (isDisabled) {
+        return (_jsx(DisabledCourseActionButton, { src: RemoveRedEye, alt: formatMessage(messages['authz.table.column.actions.view.title']), size: "sm" }));
+    }
+    return (_jsx(IconButton, { src: RemoveRedEye, alt: formatMessage(messages['authz.table.column.actions.view.title']), size: "sm", onClick: () => navigate(viewPath) }));
+};
+const createViewActionCell = (extraProps) => function customViewActionCell(cellProps) {
+    return _jsx(ViewActionCell, Object.assign({}, cellProps, extraProps));
+};
+const OrgCell = ({ value, row }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx("span", { children: DJANGO_MANAGED_ROLES.includes(row.original.role) ? formatMessage(messages['authz.user.table.org.all.organizations.label']) : value }));
+};
+const ScopeCell = ({ row }) => {
+    const { formatMessage } = useIntl();
+    const { scopeText, iconSrc } = useMemo(() => {
+        var _a;
+        if (DJANGO_MANAGED_ROLES.includes(row.original.role)) {
+            return {
+                scopeText: formatMessage(messages['authz.user.table.scope.global.label']),
+                iconSrc: RESOURCE_ICONS.GLOBAL,
+            };
+        }
+        const scopeIcon = ((_a = row.original.role) === null || _a === void 0 ? void 0 : _a.startsWith('lib')) ? RESOURCE_ICONS.LIBRARY : RESOURCE_ICONS.COURSE;
+        return {
+            scopeText: row.original.scope,
+            iconSrc: scopeIcon,
+        };
+    }, [row.original.role, row.original.scope, formatMessage]);
+    return (_jsxs("span", { className: "d-flex align-items-center", children: [iconSrc && _jsx(Icon, { color: "primary", src: iconSrc, className: "mr-2", size: "xs" }), scopeText] }));
+};
+const RoleCell = ({ value, cell }) => {
+    const _a = cell.getCellProps({ 'data-role': MAP_ROLE_KEY_TO_LABEL[value] || '' }), { key } = _a, cellProps = __rest(_a, ["key"]);
+    return (_jsx("span", Object.assign({}, cellProps, { children: MAP_ROLE_KEY_TO_LABEL[value] || '' }), key));
+};
+const PermissionsCell = ({ row }) => {
+    const { formatMessage } = useIntl();
+    const { role, permissionCount: count } = row.original;
+    const isDjangoRole = DJANGO_MANAGED_ROLES.includes(role);
+    return (_jsx("span", { children: isDjangoRole
+            ? formatMessage(messages['authz.user.table.permissions.access.label'], { accessType: role === 'django.superuser' ? 'total' : 'partial' })
+            : formatMessage(messages['authz.user.table.permissions.available.count'], { count }) }));
+};
+const ViewAllPermissionsCell = ({ row }) => {
+    const { formatMessage } = useIntl();
+    const instance = useContext(DataTableContext);
+    const handleToggleExpanded = () => {
+        var _a, _b;
+        if (!row.isExpanded && instance) {
+            // Close all other expanded rows first
+            const expanded = ((_a = instance.state) === null || _a === void 0 ? void 0 : _a.expanded) || {};
+            Object.keys(expanded).forEach(rowId => {
+                var _a;
+                if (rowId !== row.id && expanded[rowId]) {
+                    (_a = instance.toggleRowExpanded) === null || _a === void 0 ? void 0 : _a.call(instance, rowId, false);
+                }
+            });
+        }
+        // Toggle the current row
+        (_b = row.toggleRowExpanded) === null || _b === void 0 ? void 0 : _b.call(row);
+    };
+    return (_jsx("div", { role: "button", children: _jsx(ViewMoreLink, { label: formatMessage(row.isExpanded
+                ? messages['authz.user.table.view_all_permissions.link.text.close']
+                : messages['authz.user.table.view_all_permissions.link.text.open']), onClick: handleToggleExpanded, iconSrc: ExpandMore }) }));
+};
+const ActionsCell = ({ row, onClickDeleteButton, isUserAuthenticatedPage, isCourseEnabled, }) => {
+    const { formatMessage } = useIntl();
+    const { role, canManageScope } = row.original;
+    const handleDelete = () => {
+        const roleToDelete = {
+            role,
+            scope: row.original.scope,
+            name: MAP_ROLE_KEY_TO_LABEL[role] || '',
+        };
+        onClickDeleteButton(roleToDelete);
+    };
+    if (DJANGO_MANAGED_ROLES.includes(role)) {
+        return (_jsx(OverlayTrigger, { placement: "left", overlay: (_jsx(Tooltip, { variant: "light", id: "tooltip-left", children: formatMessage(messages['authz.user.table.delete.action.djangorole.tooltip']) })), children: _jsx(Icon, { className: "mx-2 pl-1", src: Info }) }));
+    }
+    if (ADMIN_ROLES.includes(role) && isUserAuthenticatedPage) {
+        return (_jsx(OverlayTrigger, { placement: "left", overlay: (_jsx(Tooltip, { variant: "light", id: "tooltip-left", children: formatMessage(messages['authz.user.table.delete.action.adminrole.tooltip']) })), children: _jsx(Icon, { className: "mx-2 pl-1 text-light-500", src: Delete }) }));
+    }
+    const isCourseScope = !(role === null || role === void 0 ? void 0 : role.startsWith('lib'));
+    const isCourseAuthoringDisabled = isCourseEnabled !== undefined
+        && isCourseScope && !isCourseEnabled(row.original.scope);
+    if (isCourseAuthoringDisabled) {
+        return (_jsx(DisabledCourseActionButton, { src: Delete, alt: formatMessage(messages['authz.user.table.delete.action.alt']), variant: "light" }));
+    }
+    return (_jsx(IconButton, { disabled: !canManageScope, variant: canManageScope ? 'danger' : 'light', onClick: handleDelete, alt: formatMessage(messages['authz.user.table.delete.action.alt']), src: Delete }));
+};
+const createActionsCell = (extraProps) => function customActionsCell(cellProps) {
+    return _jsx(ActionsCell, Object.assign({}, cellProps, extraProps));
+};
+export { NameCell, ViewActionCell, RoleCell, OrgCell, ScopeCell, PermissionsCell, ViewAllPermissionsCell, createActionsCell, createViewActionCell, };
+//# sourceMappingURL=TableCells.js.map

package/dist/authz-module/components/TableCells.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCells.js","sourceRoot":"","sources":["../../../src/authz-module/components/TableCells.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SiteContext, useIntl } from '@openedx/frontend-base';\nimport {\n  RemoveRedEye,\n  Delete, ExpandMore,\n  Info,\n} from '@openedx/paragon/icons';\nimport { UserRoleWithPermissions, RoleToDelete } from '@src/types';\nimport { useNavigate } from 'react-router-dom';\nimport { useContext, useMemo, type ComponentProps } from 'react';\nimport {\n  ADMIN_ROLES, DJANGO_MANAGED_ROLES, MAP_ROLE_KEY_TO_LABEL,\n} from '@src/authz-module/constants';\nimport {\n  Icon, IconButton, OverlayTrigger, Tooltip, DataTableContext,\n  type DataTableCellProps,\n} from '@openedx/paragon';\nimport { RESOURCE_ICONS } from './constants';\nimport messages from './messages';\nimport ViewMoreLink from './ViewMoreLink';\n\ninterface ViewActionCellExtraProps {\n  isCourseEnabled: (scope: string) => boolean;\n}\n\ninterface DataTableInstance {\n  state?: {\n    expanded?: Record<string, boolean>;\n  };\n  toggleRowExpanded?: (rowId: string, expanded: boolean) => void;\n}\n\ntype CellProps = DataTableCellProps<UserRoleWithPermissions>;\ntype CellPropsWithValue = CellProps & {\n  value: string;\n};\ntype ExtendedCellProps = CellPropsWithValue & {\n  cell: {\n    getCellProps: (props?: Record<string, string>) => Record<string, string>;\n  };\n};\n\ninterface ActionsCellExtraProps {\n  onClickDeleteButton: (role: RoleToDelete) => void;\n  isUserAuthenticatedPage: boolean;\n  isCourseEnabled?: (scope: string) => boolean;\n}\n\ntype ActionsCellProps = CellProps & ActionsCellExtraProps;\n\ntype DisabledCourseActionButtonProps = Pick<ComponentProps<typeof IconButton>, 'src' | 'alt' | 'size' | 'variant'>;\n\n// A disabled button can't trigger its own tooltip (Paragon sets pointer-events: none on it),\n// so the OverlayTrigger must live on a wrapper element that still receives hover events.\nconst DisabledCourseActionButton = ({\n  src, alt, size, variant,\n}: DisabledCourseActionButtonProps) => {\n  const { formatMessage } = useIntl();\n  return (\n    <OverlayTrigger\n      placement=\"left\"\n      overlay={(\n        <Tooltip variant=\"light\" id=\"tooltip-left\">\n          {formatMessage(messages['authz.table.actions.course.disabled.tooltip'])}\n        </Tooltip>\n      )}\n    >\n      <span className=\"d-inline-block\">\n        <IconButton\n          src={src}\n          alt={alt}\n          size={size}\n          variant={variant}\n          disabled\n        />\n      </span>\n    </OverlayTrigger>\n  );\n};\n\nconst NameCell = ({ row }: CellProps) => {\n  const intl = useIntl();\n  const { authenticatedUser } = useContext(SiteContext);\n  const username = authenticatedUser?.username;\n\n  if (row.original.username === username) {\n    return (\n      <span>\n        {row.original.fullName || row.original.username}\n        <span className=\"text-gray-500\">{intl.formatMessage(messages['authz.table.username.current'])}</span>\n      </span>\n    );\n  }\n  return <span>{row.original.fullName || row.original.username || ''}</span>;\n};\n\nconst ViewActionCell = ({ row, isCourseEnabled }: CellProps & Partial<ViewActionCellExtraProps>) => {\n  const { formatMessage } = useIntl();\n  const navigate = useNavigate();\n  const viewPath = `/authz/user/${row.original.username}`;\n  const isCourseScope = !row.original.role?.startsWith('lib') && !DJANGO_MANAGED_ROLES.includes(row.original.role);\n  const isDisabled = isCourseEnabled !== undefined && isCourseScope && !isCourseEnabled(row.original.scope);\n\n  if (isDisabled) {\n    return (\n      <DisabledCourseActionButton\n        src={RemoveRedEye}\n        alt={formatMessage(messages['authz.table.column.actions.view.title'])}\n        size=\"sm\"\n      />\n    );\n  }\n\n  return (\n    <IconButton\n      src={RemoveRedEye}\n      alt={formatMessage(messages['authz.table.column.actions.view.title'])}\n      size=\"sm\"\n      onClick={() => navigate(viewPath)}\n    />\n  );\n};\n\nconst createViewActionCell = (extraProps: ViewActionCellExtraProps) => function customViewActionCell(cellProps) {\n  return <ViewActionCell {...cellProps} {...extraProps} />;\n};\n\nconst OrgCell = ({ value, row }: CellPropsWithValue) => {\n  const { formatMessage } = useIntl();\n  return (\n    <span>\n      {DJANGO_MANAGED_ROLES.includes(row.original.role) ? formatMessage(messages['authz.user.table.org.all.organizations.label']) : value}\n    </span>\n  );\n};\n\nconst ScopeCell = ({ row }: CellProps) => {\n  const { formatMessage } = useIntl();\n\n  const { scopeText, iconSrc } = useMemo(() => {\n    if (DJANGO_MANAGED_ROLES.includes(row.original.role)) {\n      return {\n        scopeText: formatMessage(messages['authz.user.table.scope.global.label']),\n        iconSrc: RESOURCE_ICONS.GLOBAL,\n      };\n    }\n    const scopeIcon = row.original.role?.startsWith('lib') ? RESOURCE_ICONS.LIBRARY : RESOURCE_ICONS.COURSE;\n    return {\n      scopeText: row.original.scope,\n      iconSrc: scopeIcon,\n    };\n  }, [row.original.role, row.original.scope, formatMessage]);\n\n  return (\n    <span className=\"d-flex align-items-center\">\n      {iconSrc && <Icon color=\"primary\" src={iconSrc} className=\"mr-2\" size=\"xs\" />}\n      {scopeText}\n    </span>\n  );\n};\n\nconst RoleCell = ({ value, cell }: ExtendedCellProps) => {\n  const { key, ...cellProps } = cell.getCellProps({ 'data-role': MAP_ROLE_KEY_TO_LABEL[value] || '' });\n  return (\n    <span key={key} {...cellProps}>\n      {MAP_ROLE_KEY_TO_LABEL[value] || ''}\n    </span>\n  );\n};\n\nconst PermissionsCell = ({ row }: CellProps) => {\n  const { formatMessage } = useIntl();\n  const { role, permissionCount: count } = row.original;\n  const isDjangoRole = DJANGO_MANAGED_ROLES.includes(role);\n  return (\n    <span>\n      { isDjangoRole\n        ? formatMessage(\n            messages['authz.user.table.permissions.access.label'],\n            { accessType: role === 'django.superuser' ? 'total' : 'partial' },\n          )\n        : formatMessage(messages['authz.user.table.permissions.available.count'], { count })}\n    </span>\n  );\n};\n\nconst ViewAllPermissionsCell = ({ row }: CellProps) => {\n  const { formatMessage } = useIntl();\n  const instance = useContext(DataTableContext) as DataTableInstance;\n  const handleToggleExpanded = () => {\n    if (!row.isExpanded && instance) {\n      // Close all other expanded rows first\n      const expanded = instance.state?.expanded || {};\n      Object.keys(expanded).forEach(rowId => {\n        if (rowId !== row.id && expanded[rowId]) {\n          instance.toggleRowExpanded?.(rowId, false);\n        }\n      });\n    }\n    // Toggle the current row\n    row.toggleRowExpanded?.();\n  };\n\n  return (\n    <div role=\"button\">\n      <ViewMoreLink\n        label={formatMessage(\n          row.isExpanded\n            ? messages['authz.user.table.view_all_permissions.link.text.close']\n            : messages['authz.user.table.view_all_permissions.link.text.open'],\n        )}\n        onClick={handleToggleExpanded}\n        iconSrc={ExpandMore}\n      />\n    </div>\n  );\n};\n\nconst ActionsCell = ({\n  row, onClickDeleteButton, isUserAuthenticatedPage, isCourseEnabled,\n}: ActionsCellProps) => {\n  const { formatMessage } = useIntl();\n  const { role, canManageScope } = row.original;\n\n  const handleDelete = () => {\n    const roleToDelete = {\n      role,\n      scope: row.original.scope,\n      name: MAP_ROLE_KEY_TO_LABEL[role] || '',\n    } as RoleToDelete;\n    onClickDeleteButton(roleToDelete);\n  };\n\n  if (DJANGO_MANAGED_ROLES.includes(role)) {\n    return (\n      <OverlayTrigger\n        placement=\"left\"\n        overlay={(\n          <Tooltip variant=\"light\" id=\"tooltip-left\">\n            {formatMessage(messages['authz.user.table.delete.action.djangorole.tooltip'])}\n          </Tooltip>\n        )}\n      >\n        <Icon\n          className=\"mx-2 pl-1\"\n          src={Info}\n        />\n      </OverlayTrigger>\n    );\n  }\n\n  if (ADMIN_ROLES.includes(role) && isUserAuthenticatedPage) {\n    return (\n      <OverlayTrigger\n        placement=\"left\"\n        overlay={(\n          <Tooltip variant=\"light\" id=\"tooltip-left\">\n            {formatMessage(messages['authz.user.table.delete.action.adminrole.tooltip'])}\n          </Tooltip>\n        )}\n      >\n        <Icon\n          className=\"mx-2 pl-1 text-light-500\"\n          src={Delete}\n        />\n      </OverlayTrigger>\n    );\n  }\n\n  const isCourseScope = !role?.startsWith('lib');\n  const isCourseAuthoringDisabled = isCourseEnabled !== undefined\n    && isCourseScope && !isCourseEnabled(row.original.scope);\n\n  if (isCourseAuthoringDisabled) {\n    return (\n      <DisabledCourseActionButton\n        src={Delete}\n        alt={formatMessage(messages['authz.user.table.delete.action.alt'])}\n        variant=\"light\"\n      />\n    );\n  }\n\n  return (\n    <IconButton\n      disabled={!canManageScope}\n      variant={canManageScope ? 'danger' : 'light'}\n      onClick={handleDelete}\n      alt={formatMessage(messages['authz.user.table.delete.action.alt'])}\n      src={Delete}\n    />\n  );\n};\n\nconst createActionsCell = (extraProps: ActionsCellExtraProps) => function customActionsCell(cellProps) {\n  return <ActionsCell {...cellProps} {...extraProps} />;\n};\n\nexport {\n  NameCell,\n  ViewActionCell,\n  RoleCell,\n  OrgCell,\n  ScopeCell,\n  PermissionsCell,\n  ViewAllPermissionsCell,\n  createActionsCell,\n  createViewActionCell,\n};\n"]}

package/dist/authz-module/components/TableControlBar/MultipleChoiceFilter.d.ts

@@ -0,0 +1,3 @@
+import { MultipleChoiceFilterProps } from './types';
+declare const MultipleChoiceFilter: ({ filterButtonText, filterChoices, filterValue, setFilter, isGrouped, isSearchable, onSearchChange, iconSrc, disabled, }: MultipleChoiceFilterProps) => import("react").JSX.Element;
+export default MultipleChoiceFilter;

package/dist/authz-module/components/TableControlBar/MultipleChoiceFilter.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown, Form, Icon, Stack, } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { FilterList, Info, Search } from '@openedx/paragon/icons';
+import { useState } from 'react';
+import messages from '../messages';
+const MultipleChoiceFilter = ({ filterButtonText, filterChoices, filterValue, setFilter, isGrouped = false, isSearchable = false, onSearchChange, iconSrc, disabled = false, }) => {
+    const [searchValue, setSearchValue] = useState(undefined);
+    const { formatMessage } = useIntl();
+    const checkedBoxes = filterValue || [];
+    const handleClickCheckbox = (value, displayName) => {
+        const newValue = {
+            groupName: (filterButtonText === null || filterButtonText === void 0 ? void 0 : filterButtonText.toLocaleLowerCase()) || '',
+            value,
+            displayName,
+        };
+        if (checkedBoxes.includes(value)) {
+            const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);
+            return setFilter(newCheckedBoxes, newValue);
+        }
+        const newCheckedBoxes = [...checkedBoxes, value];
+        return setFilter(newCheckedBoxes, newValue);
+    };
+    const getGroupedChoices = () => {
+        const groupedFilterChoices = filterChoices.reduce((groups, choice) => {
+            const groupName = choice.groupName || 'Ungrouped';
+            const icon = choice.groupIcon || undefined;
+            if (!groups.has(groupName)) {
+                groups.set(groupName, { groupName, options: [], icon });
+            }
+            groups.get(groupName).options.push({
+                displayName: choice.displayName,
+                value: choice.value,
+                description: choice.description,
+            });
+            return groups;
+        }, new Map());
+        return Array.from(groupedFilterChoices.values());
+    };
+    return (_jsxs(Dropdown, { className: "no-caret-dropdown filters", children: [_jsx(Dropdown.Toggle, { variant: checkedBoxes.length > 0 ? 'primary' : 'outline-primary', children: _jsxs(Stack, { direction: "horizontal", gap: 2, children: [iconSrc && _jsx(Icon, { color: "primary", src: iconSrc }), filterButtonText, checkedBoxes.length > 0 && ` (${checkedBoxes.length})`, _jsx(Icon, { color: "primary", src: FilterList })] }) }), _jsxs(Dropdown.Menu, { children: [isSearchable && (_jsx(Form.Control, { className: "m-1", type: "text", trailingElement: _jsx(Icon, { src: Search }), placeholder: formatMessage(messages['authz.table.controlbar.search']), onChange: (e) => {
+                            setSearchValue(e.target.value);
+                            onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(e.target.value);
+                        }, value: searchValue })), _jsxs(Form.CheckboxSet, { className: "pgn__dropdown-filter-checkbox-group", name: filterButtonText, "aria-label": filterButtonText, value: checkedBoxes, children: [_jsx("span", { className: "small text-info-700 mt-2", children: formatMessage(messages['authz.table.controlbar.filters.items.showing'], { current: filterChoices.length, total: filterChoices.length }) }), !isGrouped ? filterChoices.map(({ displayName, value, description, }) => (_jsx(Form.Checkbox, { className: "m-2 w-100", checked: checkedBoxes.includes(value), value: value, onChange: () => handleClickCheckbox(value, displayName), "aria-label": displayName, disabled: checkedBoxes.includes(value) ? false : disabled, children: _jsxs("div", { className: "d-flex flex-column", children: [_jsx("span", { className: "small", children: displayName }), description && _jsx("span", { className: "small text-muted d-block", children: description })] }) }, displayName)))
+                                : getGroupedChoices().map(({ groupName, icon, options }) => (_jsxs("div", { children: [_jsxs("div", { className: "pgn__dropdown-filter-group-name text-info-700 d-flex align-items-center small m-2 ml-0", children: [icon && _jsx(Icon, { color: "primary", src: icon, className: "mr-2", size: "xs" }), _jsx("span", { children: groupName })] }), options.map(({ displayName, value, description }) => (_jsx(Form.Checkbox, { className: "m-2 w-100", value: value, onChange: () => handleClickCheckbox(value, displayName), disabled: checkedBoxes.includes(value) ? false : disabled, "aria-label": displayName, children: _jsxs("div", { className: "d-flex flex-column", children: [_jsx("span", { className: "small", children: displayName }), description && _jsx("span", { className: "small text-muted d-block", children: description })] }) }, displayName)))] }, groupName))), isSearchable && (_jsxs("div", { className: "d-flex align-items-center justify-content-between p-2", children: [_jsx("span", { className: "text-muted small", children: formatMessage(messages['authz.table.controlbar.filters.more.results']) }), _jsx(Icon, { className: "text-gray-300 ml-1", src: Info, size: "xs" })] }))] })] })] }));
+};
+export default MultipleChoiceFilter;
+//# sourceMappingURL=MultipleChoiceFilter.js.map

package/dist/authz-module/components/TableControlBar/MultipleChoiceFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleChoiceFilter.js","sourceRoot":"","sources":["../../../../src/authz-module/components/TableControlBar/MultipleChoiceFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Dropdown, Form, Icon, Stack,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { FilterList, Info, Search } from '@openedx/paragon/icons';\nimport { useState } from 'react';\nimport messages from '@src/authz-module/components/messages';\nimport { FilterChoice, MultipleChoiceFilterProps } from './types';\n\nconst MultipleChoiceFilter = ({\n  filterButtonText,\n  filterChoices,\n  filterValue,\n  setFilter,\n  isGrouped = false,\n  isSearchable = false,\n  onSearchChange,\n  iconSrc,\n  disabled = false,\n}: MultipleChoiceFilterProps) => {\n  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);\n  const { formatMessage } = useIntl();\n\n  const checkedBoxes = filterValue || [];\n  const handleClickCheckbox = (value, displayName) => {\n    const newValue = {\n      groupName: filterButtonText?.toLocaleLowerCase() || '',\n      value,\n      displayName,\n    };\n    if (checkedBoxes.includes(value)) {\n      const newCheckedBoxes = checkedBoxes.filter((val) => val !== value);\n      return setFilter(newCheckedBoxes, newValue);\n    }\n    const newCheckedBoxes = [...checkedBoxes, value];\n    return setFilter(newCheckedBoxes, newValue);\n  };\n\n  const getGroupedChoices = () => {\n    const groupedFilterChoices = filterChoices.reduce((groups, choice) => {\n      const groupName = choice.groupName || 'Ungrouped';\n      const icon = choice.groupIcon || undefined;\n      if (!groups.has(groupName)) {\n        groups.set(groupName, { groupName, options: [], icon });\n      }\n      groups.get(groupName)!.options.push({\n        displayName: choice.displayName,\n        value: choice.value,\n        description: choice.description,\n      });\n      return groups;\n    }, new Map<string, { groupName: string; options: FilterChoice[]; icon?: any }>());\n    return Array.from(groupedFilterChoices.values());\n  };\n\n  return (\n    <Dropdown className=\"no-caret-dropdown filters\">\n      <Dropdown.Toggle variant={checkedBoxes.length > 0 ? 'primary' : 'outline-primary'}>\n        <Stack direction=\"horizontal\" gap={2}>\n          {iconSrc && <Icon color=\"primary\" src={iconSrc} />}\n          {filterButtonText}\n          {checkedBoxes.length > 0 && ` (${checkedBoxes.length})`}\n          <Icon color=\"primary\" src={FilterList} />\n        </Stack>\n      </Dropdown.Toggle>\n\n      <Dropdown.Menu>\n        {isSearchable && (\n          <Form.Control\n            className=\"m-1\"\n            type=\"text\"\n            trailingElement={<Icon src={Search} />}\n            placeholder={formatMessage(messages['authz.table.controlbar.search'])}\n            onChange={(e) => {\n              setSearchValue(e.target.value);\n              onSearchChange?.(e.target.value);\n            }}\n            value={searchValue}\n          />\n        )}\n        <Form.CheckboxSet\n          className=\"pgn__dropdown-filter-checkbox-group\"\n          name={filterButtonText}\n          aria-label={filterButtonText}\n          value={checkedBoxes}\n        >\n          <span className=\"small text-info-700 mt-2\">\n            {formatMessage(messages['authz.table.controlbar.filters.items.showing'], { current: filterChoices.length, total: filterChoices.length })}\n          </span>\n          {!isGrouped ? filterChoices.map(({\n            displayName, value, description,\n          }) => (\n            <Form.Checkbox\n              className=\"m-2 w-100\"\n              key={displayName}\n              checked={checkedBoxes.includes(value)}\n              value={value}\n              onChange={() => handleClickCheckbox(value, displayName)}\n              aria-label={displayName}\n              disabled={checkedBoxes.includes(value) ? false : disabled}\n            >\n              <div className=\"d-flex flex-column\">\n                <span className=\"small\">{displayName}</span>\n                { description && <span className=\"small text-muted d-block\">{description}</span> }\n              </div>\n            </Form.Checkbox>\n          ))\n            : getGroupedChoices().map(({ groupName, icon, options }) => (\n                <div key={groupName}>\n                  <div className=\"pgn__dropdown-filter-group-name text-info-700 d-flex align-items-center small m-2 ml-0\">\n                    {icon && <Icon color=\"primary\" src={icon} className=\"mr-2\" size=\"xs\" />}\n                    <span>{groupName}</span>\n                  </div>\n                  {options.map(({ displayName, value, description }) => (\n                    <Form.Checkbox\n                      className=\"m-2 w-100\"\n                      key={displayName}\n                      value={value}\n                      onChange={() => handleClickCheckbox(value, displayName)}\n                      disabled={checkedBoxes.includes(value) ? false : disabled}\n                      aria-label={displayName}\n                    >\n                      <div className=\"d-flex flex-column\">\n                        <span className=\"small\">{displayName}</span>\n                        { description && <span className=\"small text-muted d-block\">{description}</span> }\n                      </div>\n                    </Form.Checkbox>\n                  ))}\n                </div>\n              ))}\n          { isSearchable && (\n            <div className=\"d-flex align-items-center justify-content-between p-2\">\n              <span className=\"text-muted small\">{formatMessage(messages['authz.table.controlbar.filters.more.results'])}</span>\n              <Icon className=\"text-gray-300 ml-1\" src={Info} size=\"xs\" />\n            </div>\n          )}\n        </Form.CheckboxSet>\n      </Dropdown.Menu>\n\n    </Dropdown>\n  );\n};\n\nexport default MultipleChoiceFilter;\n"]}

package/dist/authz-module/components/TableControlBar/OrgFilter.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MultipleChoiceFilterProps } from './types';
+type OrgFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+declare const OrgFilter: ({ filterButtonText, filterValue, setFilter, disabled, }: OrgFilterProps) => React.JSX.Element;
+export default OrgFilter;

package/dist/authz-module/components/TableControlBar/OrgFilter.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Business } from '@openedx/paragon/icons';
+import { useOrgs } from '../../data/hooks';
+import { useViewTeamPermissions } from '../../hooks/useViewTeamPermissions';
+import { useCourseAuthoringFlag } from '../../hooks/useCourseAuthoringFlag';
+import { DEFAULT_FILTER_PAGE_SIZE } from '../../constants';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+const OrgFilter = ({ filterButtonText, filterValue, setFilter, disabled, }) => {
+    const [searchValue, setSearchValue] = React.useState(undefined);
+    const { isLibraryViewAllowed, isLoading } = useViewTeamPermissions();
+    const { isOrgAuthoringEnabled, isLoading: isFlagLoading } = useCourseAuthoringFlag();
+    const { data: orgsData = {
+        count: 0, next: null, previous: null, results: [],
+    }, } = useOrgs(searchValue, 1, DEFAULT_FILTER_PAGE_SIZE);
+    // Users with library access (including those with both library and course roles) must
+    // always see all orgs: library access is not gated by the course-authoring flag,
+    // so the flag must never be used to filter orgs for them. Only filter orgs by the
+    // flag for course-only users, and never while permissions or flag states are loading.
+    const filterByAuthoringFlag = !isLoading && !isFlagLoading && !isLibraryViewAllowed;
+    const filterChoices = useMemo(() => {
+        var _a;
+        return ((_a = orgsData === null || orgsData === void 0 ? void 0 : orgsData.results) !== null && _a !== void 0 ? _a : [])
+            .filter((org) => !filterByAuthoringFlag || isOrgAuthoringEnabled(org.shortName))
+            .map((org) => ({
+            displayName: org.name,
+            value: org.shortName,
+        }));
+    }, [orgsData, filterByAuthoringFlag, isOrgAuthoringEnabled]);
+    const handleSearchChange = (value) => {
+        setSearchValue(value);
+    };
+    return (_jsx(MultipleChoiceFilter, { filterButtonText: filterButtonText, filterChoices: filterChoices, filterValue: filterValue, setFilter: setFilter, isSearchable: true, onSearchChange: handleSearchChange, iconSrc: Business, disabled: disabled }));
+};
+export default OrgFilter;
+//# sourceMappingURL=OrgFilter.js.map

package/dist/authz-module/components/TableControlBar/OrgFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrgFilter.js","sourceRoot":"","sources":["../../../../src/authz-module/components/TableControlBar/OrgFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAI1D,MAAM,SAAS,GAAG,CAAC,EACjB,gBAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,GACnC,EAAE,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACpF,MAAM,EAAE,oBAAoB,EAAE,SAAS,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACrE,MAAM,EAAE,qBAAqB,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACrF,MAAM,EACJ,IAAI,EAAE,QAAQ,GAAG;QACf,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;KAClD,GACF,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE,wBAAwB,CAAC,CAAC;IAEtD,sFAAsF;IACtF,iFAAiF;IACjF,kFAAkF;IAClF,sFAAsF;IACtF,MAAM,qBAAqB,GAAG,CAAC,SAAS,IAAI,CAAC,aAAa,IAAI,CAAC,oBAAoB,CAAC;IAEpF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,mCAAI,EAAE,CAAC;aAC1D,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,qBAAqB,IAAI,qBAAqB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;aAC/E,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YACb,WAAW,EAAE,GAAG,CAAC,IAAI;YACrB,KAAK,EAAE,GAAG,CAAC,SAAS;SACrB,CAAC,CAAC,CAAA;KAAA,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEjE,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC3C,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,IACnB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,QACZ,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Business } from '@openedx/paragon/icons';\nimport { useOrgs } from '@src/authz-module/data/hooks';\nimport { useViewTeamPermissions } from '@src/authz-module/hooks/useViewTeamPermissions';\nimport { useCourseAuthoringFlag } from '@src/authz-module/hooks/useCourseAuthoringFlag';\nimport { DEFAULT_FILTER_PAGE_SIZE } from '@src/authz-module/constants';\nimport { MultipleChoiceFilterProps } from './types';\nimport MultipleChoiceFilter from './MultipleChoiceFilter';\n\ntype OrgFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;\n\nconst OrgFilter = ({\n  filterButtonText, filterValue, setFilter, disabled,\n}: OrgFilterProps) => {\n  const [searchValue, setSearchValue] = React.useState<string | undefined>(undefined);\n  const { isLibraryViewAllowed, isLoading } = useViewTeamPermissions();\n  const { isOrgAuthoringEnabled, isLoading: isFlagLoading } = useCourseAuthoringFlag();\n  const {\n    data: orgsData = {\n      count: 0, next: null, previous: null, results: [],\n    },\n  } = useOrgs(searchValue, 1, DEFAULT_FILTER_PAGE_SIZE);\n\n  // Users with library access (including those with both library and course roles) must\n  // always see all orgs: library access is not gated by the course-authoring flag,\n  // so the flag must never be used to filter orgs for them. Only filter orgs by the\n  // flag for course-only users, and never while permissions or flag states are loading.\n  const filterByAuthoringFlag = !isLoading && !isFlagLoading && !isLibraryViewAllowed;\n\n  const filterChoices = useMemo(() => (orgsData?.results ?? [])\n    .filter((org) => !filterByAuthoringFlag || isOrgAuthoringEnabled(org.shortName))\n    .map((org) => ({\n      displayName: org.name,\n      value: org.shortName,\n    })), [orgsData, filterByAuthoringFlag, isOrgAuthoringEnabled]);\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n  };\n\n  return (\n    <MultipleChoiceFilter\n      filterButtonText={filterButtonText}\n      filterChoices={filterChoices}\n      filterValue={filterValue}\n      setFilter={setFilter}\n      isSearchable\n      onSearchChange={handleSearchChange}\n      iconSrc={Business}\n      disabled={disabled}\n    />\n  );\n};\n\nexport default OrgFilter;\n"]}

package/dist/authz-module/components/TableControlBar/RolesFilter.d.ts

@@ -0,0 +1,4 @@
+import { MultipleChoiceFilterProps } from './types';
+type RolesFilterProps = Omit<MultipleChoiceFilterProps, 'filterChoices' | 'isSearchable' | 'onSearchChange'>;
+declare const RolesFilter: ({ filterButtonText, filterValue, setFilter, disabled, }: RolesFilterProps) => import("react").JSX.Element;
+export default RolesFilter;