Third-Party Apps Account Block for React

Edit APPS. Each app has an id, a two-letter mark for its neutral tile, a name, a level (read, write or full), the ISO days it was granted and last used, and its scopes as short plain sentences. "Today" is the fixed AS_OF day, so ages are counted from that and never from the clock, and UNUSED_DAYS sets how long counts as unused. The order (unused apps first, the longest unused at the top, then the most recently used), the header count, the pinned badge and the bulk button are all worked out from those fields. The tiles are placeholders: drop in logos you have the rights to use.

Revoke, the bulk revoke and Undo only change this page's state, and the status line says "in this demo": no token is revoked and no app is told. To wire it, call your server in revoke and revokeUnused to delete the grants (revoking the refresh token at your authorisation server), and load the real grants into APPS. Undo is a courtesy here; with a real revocation the app has to ask for access again, so most products replace it with a Reconnect link.

One app is a small, visible step with an Undo line directly under it. Revoking several at once is bigger and easy to trigger by accident, so it opens an alert dialog that names the apps, has no outside-click close and starts on Keep them. With no unused app remains the button stays in its place, quiet, and answers "No app is unused" instead of vanishing. The trigger is passed to AlertDialogTrigger through render.

It is a real table with a caption that says how it is ordered, column headers with scope, and a row header for each app whose button names it ("What Zapier can do") and carries aria-expanded and aria-controls; the closed content is inert. Access and last use are said in words as well as icons, and the unused badge is words. Every Revoke names its app. One polite status line reports each revoke, undo and empty press, and focus moves to the next row after a revoke.

Each app is a card: the tile and name at the start with Revoke at the end, then its access, granted day and last use as labelled lines. The scopes open under the card at full width. The header button drops under the sentence.