GPU-2631 UI: Add UI for Api Token Management by dominikschatz · Pull Request #855 · gentics/cms-oss

dominikschatz · 2026-08-05T13:48:53Z

GPU-2631 UI: Add UI for Api Token Management

deckdom · 2026-08-06T11:36:02Z

+
+        await expect(form).toBeVisible();
+
+        const submitBtn = page.locator(API_CREATE_MODAL).locator(".modal-footer").locator("button.primary");


Please add action attributes (like data-action="confirm") to the buttons like other modals.
For confirming the modal, please use the clickModalAction helper then.

deckdom · 2026-08-06T11:37:41Z

+
+        await submitBtn.click();
+
+        await expect(page.locator(".success-message")).toBeVisible();


Please add an id to the success-notification (NotificationService/I18nNotificationService.show), and then use the findNotification helper to get the notification by the ID.

deckdom · 2026-08-06T11:38:07Z

+
+        await expect(page.locator(API_DELETE_MODAL)).toBeVisible();
+
+        await page.locator(API_DELETE_MODAL).locator("button.alert").click();


Use actions here as well

deckdom · 2026-08-06T11:39:31Z

+
+        const row = table.locator(".data-row").first();
+
+        const deleteButton = row.locator('[title="editor.tagtype_delete_label"]').first();


Use the findTableAction helper instead, and provide the delete action-id instead.

deckdom · 2026-08-06T11:40:00Z

+
+        await row.locator('gtx-checkbox').click();
+
+        await row.locator('button.alert').click();


Use the findTableAction helper

deckdom · 2026-08-06T11:40:11Z

+
+        await expect(page.locator(API_DELETE_MODAL)).toBeVisible();
+
+        await page.locator(API_DELETE_MODAL).locator("button.alert").click();


action-attribute

deckdom

Generally please check all the formatting of the ts filles.
VSCode lights up like a christmas tree on every file.
ESLint should be able to fix most if not all formatting issues anyways.

deckdom · 2026-08-06T11:45:31Z

+});
+
+async function openApiTokenModal(page: Page) {
+    await page.locator(".ng-trigger-toggleState").click();


Don't use angular internal ng prefixed classes for selectors.
Especially not trigger classes, as these are for animations.

Use the openContext function instead (See changes for the user-menu` first):

const menu = page.locator('gtx-user-menu'); const dropdown = await openContext(menu.locator('.user-name gtx-dropdown-list')); await dropdown.locator('[data-action="manage-api-tokens"]').click();

deckdom · 2026-08-06T11:46:43Z

        <div>
-          <span [innerHTML]="'user.logged_in_as' | gtxI18n:{ name: getUserName() }"></span>
+          <span [innerHTML]="'user.logged_in_as' | gtxI18n"></span>
          <gtx-dropdown-list>


Add data-context-id attributes to the gtx-dropdown-list. and gtx-dropdown-content elements (same ID), and the data-context-trigger .
This allows for the openContext helper to properly detect and relate the elements together.

deckdom · 2026-08-06T11:47:10Z

              <gtx-dropdown-item overrideSlot="changePasswordOption" (click)="showPasswordModalClicked()">
                {{ 'user.change_password_label' | gtxI18n }}
              </gtx-dropdown-item>
+              <gtx-dropdown-item overrideSlot="manageApiTokensOption" (click)="showApiTokensModalClicked()">


Do not add a overrideSlot here.
Add a data-action attribute for later use instead.

deckdom · 2026-08-06T11:50:32Z

+
+async function openApiTokenCreateModal(page: Page) {
+    const modalTable = page.locator(API_MODAL).locator("gtx-manage-api-tokens-table");
+    const createNewBtn = modalTable.locator(".entity-table-actions-bar button");


Add data-action attribute

deckdom · 2026-08-06T11:52:47Z

+    await createNewBtn.click();
+}
+
+async function clearEntries(IMPORTER: EntityImporter) {


Create a dedicated test-user in the setup instead - See most of the editor-ui tests.
This removes the need to cleanup these tokens and we can do permission checks.

deckdom · 2026-08-06T12:40:45Z

+
+export interface ApiTokenListResponse extends ListResponse<ApiTokenResponse> { }
+
+export interface ApiTokenResponse extends Response {


Why are all fields re-defined??
We have the model already defined, reuse them.

deckdom · 2026-08-06T12:41:05Z

+    data: TokenData
+}
+
+interface TokenData {


Call it ApiTokenData

deckdom · 2026-08-06T12:41:38Z

+    valid: boolean;
+}
+
+export interface ApiTokenData {


Delete this - This is duplicated again and is the same as the TokenData from the other file.

deckdom · 2026-08-06T12:44:46Z

Remove this service - The cms-components doesn't provide yet another abstraction for the rest-client.
Simply use the rest-client in the modal/table directly, as it's only 2 endpoints anyways that we use.

deckdom · 2026-08-06T12:47:10Z

Delete this - The cms-rest-clients-angular library is deprecated, and we'll not add new functionality to it, as we want to get rid of it.

deckdom · 2026-08-18T09:29:36Z

Rename to api-tokens-properties.component.ts (and html/scss file)

deckdom · 2026-08-18T09:32:54Z

+})
+export class ApiTokensCreateFormComponent extends BaseFormPropertiesComponent<EditableApiToken> {
+    @Input()
+    control: FormControl<EditableApiToken>;


Remove this - This component doesn't need the control, as this control is the form.

The structure should look like this:

Modal Component
-- Has a control property (i.E. this property here)
-- Template then contains <gtx-api-tokens-properties [formControl]="control" />

The Modal component can now check the validity of the entire form via control.valid and get the value via control.value.

deckdom · 2026-08-18T09:33:03Z

+    readonly apiTokenNames: Array<string>;
+
+    @Output()
+    validChange = new EventEmitter<boolean>();


Remove this as well

deckdom · 2026-08-18T09:33:30Z

+        super(changeDetector);
+    }
+
+    override ngOnInit(): void {


Entire override can be caned as well, as the two extra subscriptions aren't needed

deckdom · 2026-08-18T09:37:03Z

-            [animate]="true"
-        />
-      </p>
+      <gtx-copy-value


The modal itself should only do one thing - House the properties component and create the new token.
This keeps the logic all grouped together and we can reuse more parts.
When the token was created, simply close the modal and open a dedicated copy-value-modal instead.
Note: The component which opened the api-tokens-create-modal should handle the opening of the copy-value-modal.

deckdom · 2026-08-18T09:52:01Z

 }

-export type EditableApiTokenPackage = Pick<TokenData, 'name' | 'expires'>;
+export type EditableApiToken = {


Please use type inheritance for this:

export interface EditableApiToken { name: string; expires?: string; } export interface ApiTokenData extends EditableApiToken { readonly cdate: number; // etc. }

deckdom · 2026-08-18T09:53:19Z


-interface TokenData {
+export interface ApiTokenData {
+    token: string;


The token value is only visible in the ApiTokenCreateResponse, therefore please remove it from here and add it to the Response-Model instead.

deckdom · 2026-08-18T09:55:52Z


-    getApiTokens: () => ListResponse<ApiTokenResponse>;
-    addApiTokens: (body: ApiTokenCreateRequest) => ApiTokenResponse;
+    getApiTokens: (pageSize?: number, page?: number, sort?: string) => ListResponse<ApiTokenResponse>;


Rename it to listApiTokens instead, to make the name consistent with the naming of the other functions (at least as well as we can).
Create a ApiTokenListOptions Model in the request.ts with these properties instead and provide it as object instead, like all other "list" functions do.

deckdom · 2026-08-18T09:57:10Z

        modifyPublishQueue: (body) => this.executeMappedJsonRequest(POST, '/admin/content/publishqueue', body),

-        getApiTokens: () => this.executeMappedJsonRequest(GET, '/admin/token'),
+        getApiTokens: (pageSize: number = 10, page: number = 1, sort: string = '-cdate') => this.executeMappedJsonRequest(GET, `/admin/token?pageSize=${pageSize}&page=${page}&sort=${sort}`),


Don't simply append the options yourself. There's an extra argument you may pass, i.E.
this.executeMappedJsonRequest(GET, '/admin/token', null, params)

deckdom · 2026-08-18T09:59:52Z

    return { str, regex };
 }
+
+export function futureDateValidator(control: AbstractControl): ValidationErrors | null {


This should probably have an extra option if the time should be cleared.
On default we shouldn't clear the time (i.E. line 219), as otherwise we would allow someone to create a token which is already expired (or whereever this validator is also going to be used in the future)

dominikschatz added 2 commits August 5, 2026 15:17

GPU-2631 UI: Add UI for Api Token Management

c04ce32

GPU-2631 fix merge errors

1f27830

deckdom reviewed Aug 6, 2026

View reviewed changes

deckdom requested changes Aug 6, 2026

View reviewed changes

dominikschatz added 2 commits August 7, 2026 13:50

gpu-2631 refactor/improve code add pagination and sorting to table

eb134d1

GPU-2631 adapt tests

dbaeef5

deckdom requested changes Aug 18, 2026

View reviewed changes

Build fix: SCSS Copy value

844be51


		await expect(form).toBeVisible();

		const submitBtn = page.locator(API_CREATE_MODAL).locator(".modal-footer").locator("button.primary");


		await submitBtn.click();

		await expect(page.locator(".success-message")).toBeVisible();


		await expect(page.locator(API_DELETE_MODAL)).toBeVisible();

		await page.locator(API_DELETE_MODAL).locator("button.alert").click();


		const row = table.locator(".data-row").first();

		const deleteButton = row.locator('[title="editor.tagtype_delete_label"]').first();


		await row.locator('gtx-checkbox').click();

		await row.locator('button.alert').click();


		export interface ApiTokenListResponse extends ListResponse<ApiTokenResponse> { }

		export interface ApiTokenResponse extends Response {

Uh oh!

Conversation

dominikschatz commented Aug 5, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

deckdom left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants