From e13150343ed7de2db73ee433530411c4b3afa470 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 26 May 2026 21:25:05 +0000 Subject: [PATCH 1/4] Initial plan From 4caebb7cbf1a80b28be1d1c55ba4685840a81267 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 26 May 2026 21:31:21 +0000 Subject: [PATCH 2/4] =?UTF-8?q?Make=20left=20nav=20hot-pink,=20all-caps,?= =?UTF-8?q?=20bright=20green=20background,=20and=20replace=20icons=20with?= =?UTF-8?q?=20=F0=9F=98=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard-root.component.html | 4 +- .../dashboard-root.component.scss | 5 +- .../dashboard-root.component.spec.ts | 39 ++++++++- .../experiment-root-page.component.spec.ts | 79 +++++++++++++++++++ 4 files changed, 123 insertions(+), 4 deletions(-) create mode 100644 packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.spec.ts diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html index 3e54ff9002..ef251eb7d2 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html @@ -12,7 +12,7 @@ @for (link of routeLinks; track link) { - {{ link.iconType }} + 😬 {{ link.text | translate }} @@ -32,7 +32,7 @@ } - exit_to_app + 😬 {{ 'home-global.sign-out.text' | translate }} diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss index d29cb87dd4..0a1318fc30 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss @@ -5,12 +5,15 @@ mat-drawer-container { mat-drawer { width: 243px; + background-color: #00ff00; } .drawer-container { display: flex; flex-direction: column; height: 100%; + color: hotpink; + text-transform: uppercase; .logo { display: flex; @@ -21,7 +24,7 @@ mat-drawer { &-link { text-decoration: none; - color: var(--blue); + color: hotpink; } } diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts index 5f47dac86f..562723db2a 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts @@ -5,7 +5,7 @@ import { TestingModule } from '../../../../testing/testing.module'; import { SettingsService } from '../../../core/settings/settings.service'; import { AuthService } from '../../../core/auth/auth.service'; -xdescribe('DashboardRootComponent', () => { +describe('DashboardRootComponent', () => { let component: DashboardRootComponent; let fixture: ComponentFixture; @@ -26,4 +26,41 @@ xdescribe('DashboardRootComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should display grimacing face emoji icons in the nav instead of mat-icons', () => { + const compiled = fixture.nativeElement as HTMLElement; + const icons = compiled.querySelectorAll('.icon'); + expect(icons.length).toBeGreaterThan(0); + icons.forEach((icon) => { + expect(icon.textContent?.trim()).toBe('😬'); + }); + }); + + it('should not contain any mat-icon elements in the nav', () => { + const compiled = fixture.nativeElement as HTMLElement; + const matIcons = compiled.querySelectorAll('mat-icon'); + expect(matIcons.length).toBe(0); + }); + + it('should render nav item labels for all route links', () => { + const compiled = fixture.nativeElement as HTMLElement; + const navLabels = compiled.querySelectorAll('.list-item-label'); + expect(navLabels.length).toBeGreaterThan(0); + }); + + it('should have a drawer container element for the left navigation pane', () => { + const compiled = fixture.nativeElement as HTMLElement; + const drawerContainer = compiled.querySelector('.drawer-container'); + expect(drawerContainer).toBeTruthy(); + }); + + it('should have a mat-drawer element (bright green background applied via SCSS)', () => { + const compiled = fixture.nativeElement as HTMLElement; + const matDrawer = compiled.querySelector('mat-drawer'); + expect(matDrawer).toBeTruthy(); + }); + + it('should contain the correct number of nav route links', () => { + expect(component.routeLinks.length).toBe(5); + }); }); diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.spec.ts new file mode 100644 index 0000000000..0e922917ab --- /dev/null +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.spec.ts @@ -0,0 +1,79 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { StoreModule } from '@ngrx/store'; +import { TranslateModule } from '@ngx-translate/core'; +import { provideMockStore } from '@ngrx/store/testing'; + +import { ExperimentRootPageComponent } from './experiment-root-page.component'; + +describe('ExperimentRootPageComponent', () => { + let component: ExperimentRootPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + ExperimentRootPageComponent, + RouterTestingModule, + HttpClientTestingModule, + BrowserAnimationsModule, + TranslateModule.forRoot(), + StoreModule.forRoot({}), + ], + providers: [ + provideMockStore({ + initialState: { + experiments: { + ids: [], + entities: {}, + isLoadingExperiment: false, + skipExperiment: 0, + totalExperiments: null, + searchKey: 'all', + searchString: null, + sortKey: null, + sortAs: null, + stats: {}, + graphInfo: null, + graphRange: null, + isGraphInfoLoading: false, + allPartitions: null, + allExperimentNames: null, + context: [], + }, + auth: { + isLoggedIn: false, + isAuthenticating: false, + user: null, + }, + }, + }), + ], + }).compileComponents(); + + fixture = TestBed.createComponent(ExperimentRootPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should render the common page component', () => { + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('app-common-page')).toBeTruthy(); + }); + + it('should render the experiment root page header', () => { + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('app-experiment-root-page-header')).toBeTruthy(); + }); + + it('should render the experiment root page content', () => { + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('app-experiment-root-page-content')).toBeTruthy(); + }); +}); From 999f6dc99757250f9115c9a7d778d916ab777fc1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 26 May 2026 21:32:08 +0000 Subject: [PATCH 3/4] Address code review feedback: remove redundant hotpink color and add exact icon count assertion --- .../dashboard/dashboard-root/dashboard-root.component.scss | 1 - .../dashboard/dashboard-root/dashboard-root.component.spec.ts | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss index 0a1318fc30..79fa18a242 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss @@ -24,7 +24,6 @@ mat-drawer { &-link { text-decoration: none; - color: hotpink; } } diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts index 562723db2a..49f6269bfd 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts @@ -30,7 +30,8 @@ describe('DashboardRootComponent', () => { it('should display grimacing face emoji icons in the nav instead of mat-icons', () => { const compiled = fixture.nativeElement as HTMLElement; const icons = compiled.querySelectorAll('.icon'); - expect(icons.length).toBeGreaterThan(0); + // 5 route link icons + 1 logout icon + expect(icons.length).toBe(6); icons.forEach((icon) => { expect(icon.textContent?.trim()).toBe('😬'); }); From 55d9cbf726e44718e821e8b120e06d0356c52b49 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 27 May 2026 18:59:52 +0000 Subject: [PATCH 4/4] Fix hot-pink text: override theme color on .nav-item and anchor elements in nav drawer --- .../dashboard/dashboard-root/dashboard-root.component.scss | 3 +++ .../dashboard/dashboard-root/dashboard-root.theme.scss | 3 +-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss index 79fa18a242..c637e35b59 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss @@ -15,6 +15,9 @@ mat-drawer { color: hotpink; text-transform: uppercase; + a { + color: hotpink; + } .logo { display: flex; align-items: center; diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss index 2ca46b1553..e1be428cc4 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss @@ -2,7 +2,6 @@ @mixin dashboard-component-theme($theme) { $background: map-get($theme, background); - $foreground: map-get($theme, foreground); mat-drawer { box-shadow: 0 0 8px 0 mat.m2-get-color-from-palette($background, shadow-color); @@ -16,7 +15,7 @@ .list-item-container { .nav-item { - color: mat.m2-get-color-from-palette($foreground, text); + color: hotpink; } } }