Keycloak admin: "create disabled user" confirmation dialog renders COMPLETELY EMPTY and cannot be closed (missing TranslocoDirective import) #903

New Issue

2026-07-30T07:28:09Z

spikerj commented

2026-07-30 07:28:09 +00:00

Found while adding render coverage for the user-create wizard (wave-5 coverage loop, angular branch test/component-coverage-wave5).

Severity

Hard dead-end. The dialog renders with no text and no buttons, and it is opened with disableClose: true — so there is no confirm, no cancel, no backdrop click and no ESC. The admin must reload the page, losing the entire half-completed create-user wizard.

Reproduce

Keycloak admin → Users → Create user
On step 1, untick Enabled
Click Next

A modal opens. It is blank. Nothing can be clicked. The page must be reloaded.

Root cause

DisabledUserConfirmationDialog (libraries/keycloak-admin/src/lib/components/user-create/user-create.component.ts:321) declares:

@Component({
  selector: "app-disabled-user-confirmation-dialog",
  imports: [MatDialogModule, MatButtonModule, MatIconModule],   // <-- no TranslocoDirective
  templateUrl: "./user-create-confirm-dialog.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: "./user-create-confirm-dialog.component.scss",
})
export class DisabledUserConfirmationDialog { ... }

but its template wraps everything in the transloco structural directive:

<ng-container *transloco="let t">
  <div class="dialog-content">
    ...heading, body copy, and BOTH buttons...
  </div>
</ng-container>

*transloco desugars to <ng-template [transloco]="…">. With TranslocoDirective absent from the standalone component's imports, no directive matches, so the template is never instantiated and the entire subtree — including the two buttons — is never created.

The parent UserCreateComponent in the same file does import TranslocoDirective; the dialog was evidently added later and did not.

Verified empirically: a direct TestBed.createComponent(DisabledUserConfirmationDialog) renders 0 buttons and empty text content. The dialog class's own onCancel() / onConfirm() methods are correct — they are simply unreachable.

Why it was invisible

The dialog is opened through MatDialog, so no existing spec ever rendered its template (the wizard spec mocks MatDialog).
Its template was 15/15 lines uncovered before this ticket.
The only entry point is the uncommon "create a disabled user" path.

Fix

Add the directive to the dialog's imports:

imports: [MatDialogModule, MatButtonModule, MatIconModule, TranslocoDirective],

Please also consider dropping disableClose: true at the call site (user-create.component.ts:255) or adding a close affordance, so that a future rendering failure degrades to a dismissible dialog rather than a locked page.

Tests

user-create-confirm-dialog.render.spec.ts (new) currently PINS the broken behaviour with a characterization test naming this ticket, alongside the assertions that should pass once fixed (two buttons, close(false) on cancel, close(true) only on explicit confirm). Flip the characterization test to the real assertions as part of the fix — they are already written and commented in that file.

Found while adding render coverage for the user-create wizard (wave-5 coverage loop, angular branch `test/component-coverage-wave5`). ## Severity **Hard dead-end.** The dialog renders with no text and **no buttons**, and it is opened with `disableClose: true` — so there is no confirm, no cancel, no backdrop click and no ESC. The admin must reload the page, losing the entire half-completed create-user wizard. ## Reproduce 1. **Keycloak admin → Users → Create user** 2. On step 1, untick **Enabled** 3. Click **Next** A modal opens. It is blank. Nothing can be clicked. The page must be reloaded. ## Root cause `DisabledUserConfirmationDialog` (`libraries/keycloak-admin/src/lib/components/user-create/user-create.component.ts:321`) declares: ```ts @Component({ selector: "app-disabled-user-confirmation-dialog", imports: [MatDialogModule, MatButtonModule, MatIconModule], // <-- no TranslocoDirective templateUrl: "./user-create-confirm-dialog.component.html", changeDetection: ChangeDetectionStrategy.OnPush, styleUrl: "./user-create-confirm-dialog.component.scss", }) export class DisabledUserConfirmationDialog { ... } ``` but its template wraps **everything** in the transloco structural directive: ```html <ng-container *transloco="let t"> <div class="dialog-content"> ...heading, body copy, and BOTH buttons... </div> </ng-container> ``` `*transloco` desugars to `<ng-template [transloco]="…">`. With `TranslocoDirective` absent from the standalone component's `imports`, no directive matches, so the template is never instantiated and the entire subtree — including the two buttons — is never created. The parent `UserCreateComponent` in the same file *does* import `TranslocoDirective`; the dialog was evidently added later and did not. Verified empirically: a direct `TestBed.createComponent(DisabledUserConfirmationDialog)` renders **0 buttons and empty text content**. The dialog class's own `onCancel()` / `onConfirm()` methods are correct — they are simply unreachable. ## Why it was invisible - The dialog is opened through `MatDialog`, so no existing spec ever rendered its template (the wizard spec mocks `MatDialog`). - Its template was **15/15 lines uncovered** before this ticket. - The only entry point is the uncommon "create a *disabled* user" path. ## Fix Add the directive to the dialog's imports: ```ts imports: [MatDialogModule, MatButtonModule, MatIconModule, TranslocoDirective], ``` Please also consider **dropping `disableClose: true`** at the call site (`user-create.component.ts:255`) or adding a close affordance, so that a future rendering failure degrades to a dismissible dialog rather than a locked page. ## Tests `user-create-confirm-dialog.render.spec.ts` (new) currently PINS the broken behaviour with a characterization test naming this ticket, alongside the assertions that should pass once fixed (two buttons, `close(false)` on cancel, `close(true)` only on explicit confirm). **Flip the characterization test to the real assertions as part of the fix** — they are already written and commented in that file.

spikerj commented

2026-08-07 13:48:32 +00:00

Migrated to spikerj/spikersoft-angular#651 as part of the umbrella-tracker breakup.

Verified 2026-08-07 against spikersoft-angular@8e5a404, and live against the deployed main-KZKZUOSX.js bundle on learn.spikersoft.com.

Code: Unchanged. libraries/keycloak-admin/src/lib/components/user-create/user-create.component.ts:321-327 — DisabledUserConfirmationDialog still declares imports: [MatDialogModule, MatButtonModule, MatIconModule] with no TranslocoDirective, while user-create-confirm-dialog.component.html:1 still wraps the entire dialog — heading, body copy and both buttons — in <ng-container *transloco="let t">. The disableClose: true call site is still at :257.
Live: Confirmed deployed and broken — verified in the shipped bundle, not just inferred. learn.spikersoft.com → main-KZKZUOSX.js → chunk-BSYLUOEC2.js contains the compiled dialog:
```
ɵcmp = ...({type:o, selectors:[[`app-disabled-user-confirmation-dialog`]], decls:1, vars:0,
  consts:[[4,`transloco`], ...],
  template:function(n,s){n&1&&gg(0,Ge,17,5,`ng-container`,0)},
  dependencies:[Ht,_t,St,yt,wt], ...})
```
The sibling UserCreateComponent in the same chunk lists Ut among its dependencies; Ut is TranslocoDirective — it is the export o of chunk-DNNlAXrx.js, whose declaration is selectors:[[,transloco,]], inputs:{key:[0,`transloco`,`key`], …}, and chunk-BSYLUOEC2.js imports it as import{o as Ut}from"./chunk-DNNlAXrx.js". Ut is absent from the dialog's dependency array, so the whole-dialog <ng-template transloco> (function Ge, which is where both buttons and onCancel/onConfirm bindings live) is never instantiated. The blank, unclosable dialog is live.

Status: not done — Add TranslocoDirective to the dialog's imports; strongly consider dropping disableClose: true at user-create.component.ts:257 or adding a close affordance so a future render failure degrades to a dismissible dialog rather than a locked page; then flip the pinned characterization test in user-create-confirm-dialog.render.spec.ts.

Closing here. Work now lives in the repo that holds the fix, so fixes #651 in a PR will auto-close it on merge. The umbrella tracker keeps cross-repo epics only.

— Opus 5 Agent

Migrated to **spikerj/spikersoft-angular#651** as part of the umbrella-tracker breakup. Verified 2026-08-07 against `spikersoft-angular@8e5a404`, and live against the deployed `main-KZKZUOSX.js` bundle on learn.spikersoft.com. - **Code:** Unchanged. `libraries/keycloak-admin/src/lib/components/user-create/user-create.component.ts:321-327` — `DisabledUserConfirmationDialog` still declares `imports: [MatDialogModule, MatButtonModule, MatIconModule]` with no `TranslocoDirective`, while `user-create-confirm-dialog.component.html:1` still wraps the entire dialog — heading, body copy and both buttons — in `<ng-container *transloco="let t">`. The `disableClose: true` call site is still at `:257`. - **Live:** **Confirmed deployed and broken — verified in the shipped bundle, not just inferred.** `learn.spikersoft.com` → `main-KZKZUOSX.js` → `chunk-BSYLUOEC2.js` contains the compiled dialog: ```js ɵcmp = ...({type:o, selectors:[[`app-disabled-user-confirmation-dialog`]], decls:1, vars:0, consts:[[4,`transloco`], ...], template:function(n,s){n&1&&gg(0,Ge,17,5,`ng-container`,0)}, dependencies:[Ht,_t,St,yt,wt], ...}) ``` The sibling `UserCreateComponent` in the same chunk lists `Ut` among its dependencies; `Ut` is `TranslocoDirective` — it is the export `o` of `chunk-DNNlAXrx.js`, whose declaration is ``selectors:[[``,`transloco`,``]], inputs:{key:[0,`transloco`,`key`], …}``, and `chunk-BSYLUOEC2.js` imports it as ``import{o as Ut}from"./chunk-DNNlAXrx.js"``. `Ut` is **absent** from the dialog's dependency array, so the whole-dialog `<ng-template transloco>` (function `Ge`, which is where both buttons and `onCancel`/`onConfirm` bindings live) is never instantiated. The blank, unclosable dialog is live. Status: **not done** — Add `TranslocoDirective` to the dialog's `imports`; strongly consider dropping `disableClose: true` at `user-create.component.ts:257` or adding a close affordance so a future render failure degrades to a dismissible dialog rather than a locked page; then flip the pinned characterization test in `user-create-confirm-dialog.render.spec.ts`. Closing here. Work now lives in the repo that holds the fix, so `fixes #651` in a PR will auto-close it on merge. The umbrella tracker keeps cross-repo epics only. — Opus 5 Agent

spikerj closed this issue

2026-08-07 13:48:32 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#903