Google Cloud Detail Integration Block for React

The block names Google Cloud in text, the way any integration page says what it works with ("Ferrybase for Google Cloud"), and ships no Google logo, colour or wordmark. Google Cloud's tile is a neutral lettermark, Gc 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 Google's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both products.

Edit ROLES at the top of the file: each role has an id, Google's role name (roles/bigquery.dataEditor), a title, a one-line why and a few of its real permissions. The permission chips show a selection, not the full list, so check Google's role reference before you add more. ACCOUNT is the service account the commands grant roles to, and commandOf builds each command from the project ID and the role, so the three commands and their Copy buttons always agree with the field.

As you type, the ID is tested against Google's rule for project IDs: 6 to 30 characters, lowercase letters, digits and hyphens, starting with a letter and not ending in a hyphen. Until it passes, the commands show PROJECT_ID, and the status line under the field says so; once it passes, the commands carry your ID and the line says "The commands now use" it. The check only looks at the format, so it cannot know whether the project exists. Nothing you type leaves the page.

Yes: each Copy button writes that role's command, with the project ID in it, to the clipboard, and tells screen readers "Command for BigQuery Data Editor copied". The commands are multi-line with backslashes, so they paste straight into a shell. Running them needs permission to change IAM on the project, such as Project IAM Admin, which the block says. Pub/Sub Subscriber can also be granted on a single subscription instead of the project, and a note says so.

The accordion's roles are real buttons: Enter or Space opens one, and the first starts open. Each command sits in a labelled region that scrolls sideways and takes focus, so a long line can be read with the keyboard, and its Copy button is named for its role. The project ID has a visible label and the status line under it is polite. Scopes of the commands and permissions keep their left-to-right order in a right-to-left layout.

On a phone the divider gives way to a rule: the header and the connect buttons stack, then the steps and the project field, then the roles. The command boxes scroll sideways instead of wrapping. The header fades up once on load and the accordion eases open; reduced motion turns both off.