Datadog Detail Integration Block for React

The block names Datadog in text, the way any integration page says what it works with ("Aftermark for Datadog", "Connect Datadog"), and ships no Datadog logo, colour or wordmark. Datadog's tile is a neutral lettermark, Da in a muted square, sitting in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both products.

Edit SCOPES at the top of the file. Each entry is a Datadog authorization scope (shown in code, left to right in any layout), its access (READ or WRITE, each an icon and a word, never a colour), a purpose and whether it is optional. List exactly the scopes your application key asks for, so the page and Datadog's approval agree: a scoped application key is granted only the scopes it names. The count in the header and the optional switch are both worked out from the list.

It models the one write scope. Off, the rail says the graphs go into the review. On, step three adds that the review link is added to the incident, and a polite status line says "incident_write is on in this demo. Nothing was sent to Datadog." Both wordings are laid out in one cell so the rail never changes height. Wire toggle to your own setting if the choice should be saved.

Both buttons are links (href="#"). Point Connect Datadog at your own setup flow and View docs at your guide. Nothing connects, signs in or sends anything from the block itself. Connect Datadog is a Shine Button, the block's one primary action; View docs is an outline button. Both buttons render the link they're given with render, with nativeButton={false}.

Below lg the divider gives way to rules between the parts, and the parts stack in reading order: the header, the mark pair and buttons, the steps, the scope list, then the facts. Scope reasons move under the code and the switch gets its own row. In a right-to-left layout the columns and the step rail flip while scopes keep their left-to-right order. The header and buttons fade up once on load; reduced motion turns that off.