@byline/admin 2.4.0 → 2.4.1

package/src/modules/admin-permissions/commands.ts

@@ -0,0 +1,103 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { AbilityRegistry } from '@byline/auth'
+
+import { type Command, createCommand } from '../../lib/create-command.js'
+import { ADMIN_PERMISSIONS_ABILITIES } from './abilities.js'
+import {
+  getRoleAbilitiesRequestSchema,
+  getRoleAbilitiesResponseSchema,
+  listRegisteredAbilitiesRequestSchema,
+  listRegisteredAbilitiesResponseSchema,
+  setRoleAbilitiesRequestSchema,
+  setRoleAbilitiesResponseSchema,
+  whoHasAbilityRequestSchema,
+  whoHasAbilityResponseSchema,
+} from './schemas.js'
+import { AdminPermissionsService } from './service.js'
+import type { AdminStore } from '../../store.js'
+import type {
+  GetRoleAbilitiesRequest,
+  GetRoleAbilitiesResponse,
+  ListRegisteredAbilitiesRequest,
+  ListRegisteredAbilitiesResponse,
+  SetRoleAbilitiesRequest,
+  SetRoleAbilitiesResponse,
+  WhoHasAbilityRequest,
+  WhoHasAbilityResponse,
+} from './schemas.js'
+
+/**
+ * Transport-agnostic commands for the admin-permissions inspector.
+ *
+ * Built through `createCommand`, which folds the four standard steps
+ * (validate → assert admin actor + ability → invoke service → validate
+ * output) into one declaration. All inspector reads gate on
+ * `admin.permissions.read`; the write gates on `admin.permissions.update`.
+ *
+ * Deps include the `AbilityRegistry` alongside the `AdminStore` because
+ * the inspector reads the registered abilities directly from the
+ * registry (no DB). The webapp threads `bylineCore.abilities` in.
+ */
+
+export interface AdminPermissionsCommandDeps {
+  store: AdminStore
+  abilities: AbilityRegistry
+}
+
+function serviceOf(deps: AdminPermissionsCommandDeps): AdminPermissionsService {
+  return new AdminPermissionsService({ store: deps.store, abilities: deps.abilities })
+}
+
+export const listRegisteredAbilitiesCommand: Command<
+  ListRegisteredAbilitiesRequest,
+  ListRegisteredAbilitiesResponse,
+  AdminPermissionsCommandDeps
+> = createCommand({
+  method: 'listRegisteredAbilities',
+  auth: { ability: ADMIN_PERMISSIONS_ABILITIES.read },
+  schemas: {
+    input: listRegisteredAbilitiesRequestSchema,
+    output: listRegisteredAbilitiesResponseSchema,
+  },
+  handler: ({ deps }) => serviceOf(deps).listRegisteredAbilities(),
+})
+
+export const whoHasAbilityCommand: Command<
+  WhoHasAbilityRequest,
+  WhoHasAbilityResponse,
+  AdminPermissionsCommandDeps
+> = createCommand({
+  method: 'whoHasAbility',
+  auth: { ability: ADMIN_PERMISSIONS_ABILITIES.read },
+  schemas: { input: whoHasAbilityRequestSchema, output: whoHasAbilityResponseSchema },
+  handler: ({ input, deps }) => serviceOf(deps).whoHasAbility(input),
+})
+
+export const getRoleAbilitiesCommand: Command<
+  GetRoleAbilitiesRequest,
+  GetRoleAbilitiesResponse,
+  AdminPermissionsCommandDeps
+> = createCommand({
+  method: 'getRoleAbilities',
+  auth: { ability: ADMIN_PERMISSIONS_ABILITIES.read },
+  schemas: { input: getRoleAbilitiesRequestSchema, output: getRoleAbilitiesResponseSchema },
+  handler: ({ input, deps }) => serviceOf(deps).getRoleAbilities(input),
+})
+
+export const setRoleAbilitiesCommand: Command<
+  SetRoleAbilitiesRequest,
+  SetRoleAbilitiesResponse,
+  AdminPermissionsCommandDeps
+> = createCommand({
+  method: 'setRoleAbilities',
+  auth: { ability: ADMIN_PERMISSIONS_ABILITIES.update },
+  schemas: { input: setRoleAbilitiesRequestSchema, output: setRoleAbilitiesResponseSchema },
+  handler: ({ input, deps }) => serviceOf(deps).setRoleAbilities(input),
+})

package/src/modules/admin-permissions/components/inspector.module.css

@@ -0,0 +1,326 @@
+/**
+ * AbilitiesInspector — registry inspector with lazy-loaded role/user matrices.
+ *
+ * Override handles:
+ *   .byline-inspector-head           — title row
+ *   .byline-inspector-title          — main heading
+ *   .byline-inspector-count-pill     — total-count pill
+ *   .byline-inspector-lead           — paragraph-style description
+ *   .byline-inspector-empty          — empty-state paragraph
+ *   .byline-inspector-groups         — vertical group stack
+ *   .byline-inspector-group          — group <details> card
+ *   .byline-inspector-group-summary  — group summary row
+ *   .byline-inspector-group-name     — group display name
+ *   .byline-inspector-group-count    — abilities-in-group count
+ *   .byline-inspector-group-body     — group body
+ *   .byline-inspector-row            — single ability row
+ *   .byline-inspector-row-head       — header inside a row
+ *   .byline-inspector-row-info       — info column inside row-head
+ *   .byline-inspector-row-meta       — code + source-badge row
+ *   .byline-inspector-row-key        — ability key code pill
+ *   .byline-inspector-row-source     — source badge base
+ *   .byline-inspector-row-source-collection
+ *   .byline-inspector-row-source-admin
+ *   .byline-inspector-row-source-plugin
+ *   .byline-inspector-row-source-core
+ *   .byline-inspector-row-source-unknown
+ *   .byline-inspector-row-label      — ability display name
+ *   .byline-inspector-row-description — ability description
+ *   .byline-inspector-loader         — loading row inside expanded row
+ *   .byline-inspector-matrix         — two-column roles/users panel
+ *   .byline-inspector-matrix-title   — column heading
+ *   .byline-inspector-matrix-empty   — empty-list message
+ *   .byline-inspector-matrix-list    — bare list
+ *   .byline-inspector-matrix-item    — list item
+ *   .byline-inspector-matrix-name    — bold name span
+ *   .byline-inspector-matrix-machine — muted machine-name suffix
+ */
+
+.head,
+:global(.byline-inspector-head) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-12);
+  margin-bottom: var(--spacing-16);
+}
+
+.title,
+:global(.byline-inspector-title) {
+  margin: 0;
+}
+
+.count-pill,
+:global(.byline-inspector-count-pill) {
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  padding: var(--spacing-4) var(--spacing-8);
+  font-size: var(--font-size-sm);
+  border-radius: var(--border-radius-sm);
+}
+
+.lead,
+:global(.byline-inspector-lead) {
+  margin-bottom: var(--spacing-16);
+  font-size: var(--font-size-sm);
+}
+
+.empty,
+:global(.byline-inspector-empty) {
+  /* Inherits .muted colour from sibling utility class. */
+}
+
+.groups,
+:global(.byline-inspector-groups) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.group,
+:global(.byline-inspector-group) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-sm);
+}
+
+/* Hide the default summary disclosure marker (browser-specific). */
+.group :global(summary)::-webkit-details-marker {
+  display: none;
+}
+
+.group-summary,
+:global(.byline-inspector-group-summary) {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-12);
+  list-style: none;
+}
+
+.group-name,
+:global(.byline-inspector-group-name) {
+  font-weight: var(--font-weight-medium);
+}
+
+.group-count,
+:global(.byline-inspector-group-count) {
+  font-size: var(--font-size-xs);
+}
+
+.group-body,
+:global(.byline-inspector-group-body) {
+  padding: 0 var(--spacing-12) var(--spacing-12) var(--spacing-12);
+}
+
+.row,
+:global(.byline-inspector-row) {
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  padding: var(--spacing-8) 0;
+}
+
+.row:first-child,
+:global(.byline-inspector-row):first-child {
+  border-top: 0;
+}
+
+.row-head,
+:global(.byline-inspector-row-head) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+}
+
+.row-info,
+:global(.byline-inspector-row-info) {
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.row-meta,
+:global(.byline-inspector-row-meta) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.row-key,
+:global(.byline-inspector-row-key) {
+  background-color: var(--gray-50);
+  padding: 0.125rem 0.375rem;
+  font-size: var(--font-size-xs);
+  border-radius: var(--border-radius-sm);
+}
+
+.row-source,
+:global(.byline-inspector-row-source) {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: var(--border-radius-sm);
+  background-color: var(--gray-100);
+  color: var(--gray-800);
+}
+
+.row-source-collection,
+:global(.byline-inspector-row-source-collection) {
+  background-color: var(--gray-100);
+  color: var(--gray-800);
+}
+
+.row-source-admin,
+:global(.byline-inspector-row-source-admin) {
+  background-color: var(--blue-50);
+  color: var(--blue-700);
+}
+
+.row-source-plugin,
+:global(.byline-inspector-row-source-plugin) {
+  /* No purple token in uikit; fall back to primary scale. */
+  background-color: var(--primary-50);
+  color: var(--primary-700);
+}
+
+.row-source-core,
+:global(.byline-inspector-row-source-core) {
+  background-color: var(--green-50);
+  color: var(--green-700);
+}
+
+.row-source-unknown,
+:global(.byline-inspector-row-source-unknown) {
+  background-color: var(--gray-50);
+  color: var(--gray-600);
+}
+
+.row-label,
+:global(.byline-inspector-row-label) {
+  margin: var(--spacing-4) 0 0 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.row-description,
+:global(.byline-inspector-row-description) {
+  margin-bottom: 0;
+  font-size: var(--font-size-xs);
+}
+
+.loader,
+:global(.byline-inspector-loader) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-8);
+  font-size: var(--font-size-sm);
+}
+
+.matrix,
+:global(.byline-inspector-matrix) {
+  margin-top: var(--spacing-8);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-12);
+  padding: var(--spacing-12);
+  background-color: var(--canvas-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-sm);
+}
+
+@media (min-width: 40rem) {
+  .matrix,
+  :global(.byline-inspector-matrix) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.matrix-title,
+:global(.byline-inspector-matrix-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+}
+
+.matrix-empty,
+:global(.byline-inspector-matrix-empty) {
+  margin: 0;
+  font-style: italic;
+  font-size: var(--font-size-sm);
+}
+
+.matrix-list,
+:global(.byline-inspector-matrix-list) {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  font-size: var(--font-size-sm);
+}
+
+.matrix-item,
+:global(.byline-inspector-matrix-item) {
+  margin-bottom: var(--spacing-4);
+}
+
+.matrix-name,
+:global(.byline-inspector-matrix-name) {
+  font-weight: var(--font-weight-medium);
+}
+
+:is([data-theme="dark"], :global(.dark)) {
+  .count-pill,
+  :global(.byline-inspector-count-pill) {
+    background-color: var(--canvas-700);
+    border-color: var(--gray-700);
+  }
+
+  .group,
+  :global(.byline-inspector-group) {
+    border-color: var(--gray-700);
+  }
+
+  .row,
+  :global(.byline-inspector-row) {
+    border-top-color: var(--gray-700);
+  }
+
+  .row-key,
+  :global(.byline-inspector-row-key) {
+    background-color: var(--canvas-800);
+  }
+
+  .row-source-collection,
+  :global(.byline-inspector-row-source-collection) {
+    background-color: var(--canvas-700);
+    color: var(--gray-200);
+  }
+
+  .row-source-admin,
+  :global(.byline-inspector-row-source-admin) {
+    background-color: var(--blue-900);
+    color: var(--blue-200);
+  }
+
+  .row-source-plugin,
+  :global(.byline-inspector-row-source-plugin) {
+    background-color: var(--primary-900);
+    color: var(--primary-200);
+  }
+
+  .row-source-core,
+  :global(.byline-inspector-row-source-core) {
+    background-color: var(--green-900);
+    color: var(--green-200);
+  }
+
+  .row-source-unknown,
+  :global(.byline-inspector-row-source-unknown) {
+    background-color: var(--canvas-800);
+    color: var(--gray-400);
+  }
+
+  .matrix,
+  :global(.byline-inspector-matrix) {
+    background-color: var(--canvas-800);
+    border-color: var(--gray-700);
+  }
+}