NoAppAccess

Every action

You don’t have access to Example Desk

Ask an admin of Acme to give you access to Example Desk.

import { NoAppAccess } from '@rookcom/monarch-react/shell';

function Basic() {
  return (
    <NoAppAccess
      appName="Example Desk"
      workspaceName="Acme"
      headingLevel="h2"
      onRequestAccess={() => new Promise((resolve) => setTimeout(resolve, 800))}
      homeHref="#workspace-home"
      onSwitchWorkspace={() => {}}
      contactHref="mailto:[email protected]"
    />
  );
}

<Basic />

Usage examples

Explanation and a way back

import { NoAppAccess } from '@rookcom/monarch-react/shell';

function Minimal() {
  return <NoAppAccess appName="Example Wiki" headingLevel="h2" homeHref="#workspace-home" />;
}

<Minimal />

Purpose

A person can be a member of a Rook workspace without a grant for every app. NoAppAccess is that screen, built on ErrorPage, with the actions the person can actually take.

Use when

In place of the app’s pages when Rook ID says this member has no grant for the app.
Inside an embedded page (App Settings) for the same case; it still counts as an answer for the ready handshake.

Avoid when

A missing permission inside the app (a page or an action): show an ErrorState or disable the action with a reason.
Not signed in, or not a member of the workspace: those are sign-in and workspace flows.

Design principles

Say who can fix it: the person cannot grant themselves access, so the text names the admins (and the workspace).
Always a way forward: request access, contact an admin, back to the workspace or another workspace.
The grant check stays in the app; the screen only shows the outcome and runs the callbacks it is given.
Calm, not alarming: a lock and plain words, no error code.

API reference

import { NoAppAccess } from '@rookcom/monarch-react/shell';

Export	Kind	Rendering	Root class
`NoAppAccess`	component	client	`.mn-no-app-access`

Forwards its ref to the root element (section, or main with fullScreen). Built on ErrorPage (kind="forbidden") from @rookcom/monarch-react.

Generated from the TypeScript declarations of packages/react/src/components/identity/no-app-access.

Properties

With onRequestAccess returning a promise, the button shows pending, then "Access requested"; a rejection shows an alert and allows another try. requestState controls it (e.g. sent when a request is already open).

Switch workspace is onSwitchWorkspace, switchWorkspaceHref, or your own control in workspaceSwitcher (such as WorkspaceSwitcher).

`NoAppAccess`

The "you don't have access to this app" screen: the person is a member of the workspace but has no grant for this app. It explains who can fix it and offers request access, contact an admin, back to the workspace and switch workspace. Built on ErrorPage (`forbidden`). The grant check stays in the app.

Prop	Type	Description
`appName` required	`string`	The app the person can't open, e.g. "Rook Tickets".
`children`	`ReactNode`
`className`	`string`
`contactHref`	`string`	"Contact an admin": a mailto: or a page that lists the admins.
`description`	`ReactNode`	Replaces the default explanation.
`focusOnMount`	`boolean`	Focus the heading on mount, after a client-side navigation. Default false.
`fullScreen`	`boolean`	Fill the viewport (no app shell). Default false: sits in the shell's content area.
`headingLevel`	`"h2" \| "h1"`	Heading level. Default `h1` (the screen replaces the page).
`homeHref`	`string`	"Back to workspace": the workspace home in Rook ID or another app.
`id`	`string`
`linkAs`	`ShellLinkComponent`	Router link for the internal links. Default `<a>`.
`messages`	`Partial<NoAppAccessMessages>`	Interface text, for translation.
`onRequestAccess`	`(() => unknown)`	Shows "Request access". A returned promise drives the pending, sent and failed states (unless `requestState` is controlled).
`onSwitchWorkspace`	`(() => void)`	"Switch workspace" as an action…
`requestState`	`AccessRequestState`	Request state (controlled), e.g. `sent` when a request is already open.
`switchWorkspaceHref`	`string`	…or a link.
`title`	`ReactNode`	Replaces the default heading.
`workspaceName`	`string`	The current workspace, named in the explanation.
`workspaceSwitcher`	`ReactNode`	Or your own control (e.g. a WorkspaceSwitcher) in place of the switch button.

Variants

Prop	Values	Description
`fullScreen`	`'false''true'`	Inside the app shell (default), or filling the viewport without one.
`headingLevel`	`'h1''h2'`	h1 when the screen replaces the page (default).

States

State	Exposed as	Behaviour
Idle	`data-request="idle"`	Request access is offered.
Pending	`data-request="pending"`	The button is busy (`aria-busy`) and ignores further clicks.
Sent	`data-request="sent"`	The button reads "Access requested" and is disabled; a status says what happens next.
Error	`data-request="error"`	An alert says the request failed; the button works again.

Interaction behaviour

Request access runs onRequestAccess once per attempt.
Back to workspace and switch links render with linkAs (your router link) when given.
Contact an admin is a plain link (a mailto: or a page listing the admins).

Keyboard support

Keys	Action
`Tab`	Moves through the actions and the contact link.
`Enter / Space`	Activates the focused action.

Accessibility

Role: region (section labelled by its heading), or main with fullScreen
Accessible name: The heading, "You don’t have access to <app>".

The lock is decorative (aria-hidden), fixing the products’ unhidden icon.
The sent message is in a status region, and a failure is an alert, so both are announced.
focusOnMount moves focus to the heading after a client-side navigation.
Security: the screen shows no data from the app and does not decide access; render it only after the app’s own grant check, and enforce access on the server too.

Responsive behaviour

Centred column; the actions wrap onto several lines at 320px.

Theme support

ErrorPage tokens; the status uses the success text colour and the error the danger text colour.

Do and don't

Do

Name the app the way the rail and Rook ID do.
Offer request access only when the product can actually deliver the request to the admins.
Keep the rail on screen so the person can switch apps.

Don't

Do not show the app’s data or navigation behind the screen.
Do not use it for a missing permission inside the app.

ErrorPage: The page-level error it is built on.
WorkspaceSwitcher: Can fill the switch workspace slot.
ErrorState: A failed region inside a page.

Dependencies

Kind	Depends on
npm packages	`react`
Monarch components	Button, ErrorPage

Testing coverage

Heading, explanation with the workspace, forbidden ErrorPage root, decorative lock, no actions by default.
Request access: pending, single call, then sent (status) and disabled.
A failed request is an alert and can be retried; a synchronous request counts as sent; controlled state.
Back to workspace, switch workspace and contact links; switch link, custom switcher slot and router link.
Focus on mount, h2, custom text and full screen; translation.

Check	Covered
Axe in jsdom	Yes
Server rendering	Yes
Browser suites	Visual baselines: /__gallery/no-app-access; Cross-browser axe: /components/no-app-access

Tests: packages/react/src/components/identity/no-app-access