Kessel SDKs Monorepo

A monorepo containing Kessel SDK packages for browser environments, providing unified access to Project Kessel's authorization and inventory APIs.

Packages

This monorepo contains one package:

@project-kessel/react-kessel-access-check

A React SDK for performing granular and bulk access checks against the Kessel access check service in browser environments. Includes helpers for retrieving workspace IDs from RBAC for use in access checks.

Use for: Frontend applications needing permission checks for UI rendering and user interactions.

Quick Start

Install the React SDK for frontend access checks:

npm install @project-kessel/react-kessel-access-check

Basic usage:

import React from 'react';
import { AccessCheck, useSelfAccessCheck } from '@project-kessel/react-kessel-access-check';

// 1. Wrap your application with the provider
function App() {
  return (
    <AccessCheck.Provider
      baseUrl="https://console.redhat.com"
      apiPath="/api/kessel/v1beta2"
    >
      <YourApplication />
    </AccessCheck.Provider>
  );
}

// 2. Use the hook in your components for access checks
function WorkspaceView({ workspaceId }) {
  const { data, loading } = useSelfAccessCheck({
    relation: 'view',
    resource: {
      id: workspaceId,
      type: 'workspace',
      reporter: { type: 'rbac' }
    }
  });

  if (loading) return <Spinner />;
  if (!data?.allowed) return <div>Access denied</div>;

  return <div>Workspace Content...</div>;
}

// 3. When the resource is a workspace and you need its ID from RBAC:
import { fetchDefaultWorkspace } from '@project-kessel/react-kessel-access-check';

const workspace = await fetchDefaultWorkspace('https://console.redhat.com', {
  headers: { 'Authorization': `Bearer ${token}` },
});
// Use workspace.id as the resource ID in access checks

See packages/react-kessel-access-check for complete documentation.

Package Documentation

For comprehensive documentation, see:

• @project-kessel/react-kessel-access-check - React SDK for browser-based access checks
  • Single and bulk permission checks
  • Workspace ID helpers for RBAC (root and default)
  • React Context integration
  • TypeScript support with function overloads
  • HCC (Hybrid Cloud Console) integration

Example App

The demo-react-kessel-access-check app is an interactive demo that showcases all SDK features — single resource checks, bulk same-relation checks, and bulk nested-relation checks. It uses MSW to mock the Kessel backend, so no real server is needed.

npx nx run demo-react-kessel-access-check:dev

The app resolves the SDK from local source, so any changes you make to the SDK are immediately reflected in the demo.

Development

This is an NX-based monorepo. NX provides intelligent caching and task execution for faster builds.

Installation

Clone the repository and install dependencies:

git clone <repository-url>
cd kessel-sdk-browser
npm install

Building

Build all packages:

npm run build

Build a specific package:

npx nx run @project-kessel/react-kessel-access-check:build

Testing

Run tests for all packages:

npm test

Run tests for a specific package:

npx nx run @project-kessel/react-kessel-access-check:test

Run tests in watch mode:

npm run test:watch

Run tests with coverage:

npm run test:coverage

Linting

Lint all packages:

npm run lint

Fix linting issues:

npm run lint:fix

Type Checking

Type check all packages:

npm run typecheck

Monorepo Structure

kessel-sdk-browser/
├── .github/
│   ├── workflows/
│   │   └── ci.yaml                    # CI/CD pipeline
│   └── actions/
│       └── release/                   # Release automation
├── packages/
│   ├── react-kessel-access-check/
│   │   ├── src/
│   │   │   ├── core/                  # Core utilities
│   │   │   │   ├── api-client.ts      # Access check API functions
│   │   │   │   ├── workspace-client.ts # RBAC workspace ID helpers
│   │   │   │   └── transformers.ts    # Response transformers
│   │   │   ├── AccessCheckContext.tsx
│   │   │   ├── AccessCheckProvider.tsx
│   │   │   ├── hooks.ts               # Access check hooks
│   │   │   ├── types.ts
│   │   │   └── index.ts
│   │   ├── package.json
│   │   ├── project.json               # NX project configuration
│   │   ├── CHANGELOG.md               # Auto-generated changelog
│   │   ├── tsconfig.lib.json
│   │   ├── tsconfig.spec.json
│   │   └── jest.config.js
│   └── demo-react-kessel-access-check/ # Example React app (NX-managed)
├── .commitlintrc.json                 # Commit message validation
├── package.json                       # Root workspace configuration
├── nx.json                            # NX workspace configuration
├── tsconfig.base.json                 # Shared TypeScript config
├── jest.preset.js                     # Shared Jest config
├── eslint.config.mjs                  # Shared ESLint config
└── README.md                          # This file

Key Features

• Shared Dependencies: All packages share dependencies from the root node_modules, reducing duplication
• TypeScript Path Aliases: Import packages using their npm names (e.g., @project-kessel/react-kessel-access-check)
• NX Caching: Build and test results are cached for faster subsequent runs
• Independent Versioning: Each package maintains its own version and can be published independently
• Workspace Support: Uses npm workspaces for package management

Conventional Commits

This repository uses conventional commits for automated versioning. Commit messages should follow this format:

<type>(<scope>): <subject>

<body>

<footer>

Types: feat, fix, docs, style, refactor, test, chore

Examples:

feat(react-kessel-access-check): add caching for access check results
fix(react-kessel-access-check): resolve TypeScript type errors
docs(readme): update installation instructions

Automated Releases

This repository uses automated releases powered by NX and GitHub Actions. When commits are pushed to the master branch, the release process automatically:

1. Analyzes commit messages using conventional commits
2. Determines the appropriate version bump
3. Updates package versions and changelogs
4. Creates git tags
5. Publishes packages to npm

Version Bumping Rules

The version bump is determined by the commit type following the conventional commits specification:

• fix: → patch bump (0.0.x) - Bug fixes
• feat: → minor bump (0.x.0) - New features
• BREAKING CHANGE: → major bump (x.0.0) - Breaking changes (in commit footer)
• Other types (chore:, docs:, style:, refactor:, test:, ci:, build:) → no version bump

Example Release Flow

# A fix commit triggers a patch release
git commit -m "fix(react-kessel-access-check): resolve TypeScript type errors"
# Push to master → releases version 0.2.4 → 0.2.5

# A feature commit triggers a minor release
git commit -m "feat(react-kessel-access-check): add caching for access check results"
# Push to master → releases version 0.2.5 → 0.3.0

# A breaking change triggers a major release (using ! syntax)
git commit -m "feat(react-kessel-access-check)!: redesign API surface"
# Push to master → releases version 0.3.0 → 1.0.0

# Or with BREAKING CHANGE footer (requires multiple -m flags)
git commit -m "feat(react-kessel-access-check): redesign API surface" \
           -m "BREAKING CHANGE: The AccessCheck provider now requires explicit configuration"
# Push to master → releases version 0.3.0 → 1.0.0

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Related Resources

• Kessel Relations API - OpenAPI specification for Kessel
• Kessel Inventory API - Backend service implementation
• RBAC v2 OpenAPI Spec - RBAC v2 workspace API specification
• Project Kessel - Main project repository
• JIRA Epic: RHCLOUD-42267 - Access Checks SDK Epic
• JIRA Epic: RHCLOUD-42186 - Kessel Bulk Access Check API Epic