No Connected Apps Empty State Block for React

Nothing connects. The choices are kept in the page's state, the plug moves to its closest place and a polite status message says "Would connect Slack with 2 scopes. Nothing is connected in this demo." Choosing another app or changing a scope puts the plug back to where those choices put it. Start over clears everything. To wire it for real, send the person to the app's own consent screen with the ticked scopes where the code says so, and list the app as connected only after it answers.

Each app has its own typed list of scopes, one required (its box is ticked and disabled, with the word Required) and two optional, so the preview shows only what that app would really ask for. The ticks of the optional scopes are kept per app: go back to an app and they are as you left them. A scope's line says in one sentence what it allows.

It is one inline SVG that never swaps: the plug and its cable slide along the page by a CSS transition, switched off under reduced motion, and the dashed gap line behind them is covered by the plug as it goes. The cable fades out at its far end with a mask on the wrapper. The drawing is decorative and hidden from screen readers; the status message says what would happen.

The apps are one radio group: Tab reaches it once and the arrow keys change the choice. The scopes follow, each named by its scope and described by its line, then Review and connect and Start over, which stays quiet (and says so if pressed) until there is something to undo. Pressing Review and connect with no app says so and moves focus to the first app.

The scopes stack under the apps and every pane shares one cell, so choosing an app never moves the buttons. The drawing sits between the lists and the foot, 80 px tall, and the foot is pinned to the bottom of the screen so the button stays in reach. From the medium breakpoint the apps and the scopes sit side by side, divided by a rule that meets the band's rules at plus marks.