Advanced API Key Table

[LudoLogical]

Story

As a developer, I want to view my Advanced API Keys. As a project lead or platform admin, I also want to view the Advanced API Keys that I can manage.

Description

Create a React component, KeyTable, that can be configured to appear in all of the styles shown in the Figma file for Platform. KeyTable should be located in the Developer Portal Next.js app.

Acceptance Criteria

1. If empty, a KeyTable will show the column headers and "No API keys." text.
2. If a flag is set, an empty KeyTable will also show a "Generate one" link. It does not need to be functional (yet).
3. KeyTables show the keys themselves in ReadOnlyFields. Only keyholders and admins can see key values.
4. KeyTables can indicate that a key has been disabled.
5. KeyTables show key names. Names should not be editable via the table itself (there will be a DialogBox for that).
6. KeyTables show "Generation Date" and "Last Used" values for each key, rendered using Date.prototype.toLocaleString().
7. KeyTables show the names of the services associated with each key.
8. KeyTables show quota information for each key.
9. KeyTables have a Button or clickable icon that opens a DialogBox.
10. The DialogBox is different depending on whether the KeyTable is for a keyholder or for a key manager, and the contents and differences are as specified in the Figma file for Platform. Nothing inside that is interactive needs to work (yet). Note that only keyholders and admins can see key values, even in the DialogBox.

Notes

None