Integrations Account Block for React

Edit DATA (the kinds of data a person has, each with an id, a name and a short hint), APPS (an id, a name, a one-line hint and a two-letter mark for the neutral tile) and GRANTS, a flat list of { data, app, access } where access is read or write. Both views, the chips, the counts and the empty-row lines are worked out from that one list, and the order of rows and chips follows the order of DATA and APPS. The icon for each kind of data is picked in DataIcon; the tiles for apps are placeholders you replace with logos you have the rights to use.

Revoking and Undo change this page's state and say so ("Revoked Zoom access to calendar in this demo."): nothing is revoked at any app and no token is touched. To wire it, call your server in remove to revoke that one grant (usually a scope on an access token, or a deletion of the app's permission for that data), and load the real grants into GRANTS. Undo would then need to ask the app to grant it again, so most products drop it or send people to reconnect the app.

Both views are always in the markup, stacked in one grid cell: the one you are not looking at is invisible, inert and hidden from assistive technology, so the cell is as tall as the taller of the two and flipping never changes the page's height. Because both read the same grants, a chip removed in one view is gone in the other, and the counts agree. The segment control is a single choice and keeps focus when you press it.

Revoking pushes the grant onto a small stack and moves focus to the next chip in the same row, or to the previous one, or to the row itself when it was the last. Undo restores the most recent one, says so, and moves focus to its chip. With nothing to undo the button stays in place and answers "Nothing to undo."

Each view is a real list named for what it holds, every row is a list of chips, and every cross is a button that names both sides ("Revoke Slack access to mail"). Access is said in words and with an icon, never by colour. The segment control is a group with one value at a time, the hidden view cannot be reached by keyboard or screen reader, and one polite status line reports each revoke, undo and empty press.

The segment control fills the width with its count under it. Each row stacks its name and hint over its chips, which wrap onto as many lines as they need. The status line sits above a full-size Undo.