Integrations Settings Block for React

Add a permission to PERMISSIONS with its label and a sentence of what it allows, and an app to APPS with its two-letter mark, the day it was last used, the permissions it asks for in the order the sheet lists them and the ones it has now with the day each was granted. The rows, the sentence on each row, the 90-day flag (UNUSED_DAYS, counted from AS_OF, never from the clock) and the sheet all read from those lists.

So the block shows what the feature is, not a lone button. On load a non-modal copy of the sheet is drawn in place over the list, with the same content and state as the real one. Press its Close or Cancel, or Escape while focus is inside it, and it is gone until a reload; the header's button then opens the real sheet with its focus trap, Escape and focus return. In your app keep the Sheet and drop the in-place copy.

The side is read from the page's direction when the button is pressed: from the end of the layout, so the right in a left-to-right page and the left in a right-to-left one. The in-place copy uses logical positions, so it follows the direction by itself.

Everything. Save review changes this page's state, nothing is granted, revoked, paused or disconnected anywhere, and the apps, dates and permissions are fictional sample data. To make it real, back each switch with a call that revokes the scope or grant at your authorization server, store a paused flag your API checks on every request and revoke the app's tokens on disconnect. Disconnect asks first and Undo here only restores the row in the page.

The list is a group of radio buttons, so the arrow keys move the choice and the button in the header names the app it will review. The sheet traps focus, closes on Escape and returns focus to the button; each switch says which permission and app it is for, the dialog can't be dismissed by clicking outside it and the foot's status line, which says what was saved or disconnected, is a polite live region. On a phone the in-place sheet docks to the bottom of the stage with its footer pinned, and each row puts its date and flags under the sentence.