Skip to content

Commit 3879b12

Browse files
fbedarffbedarf
authored
Merge pull request #23 from catenax-ng/feature/TRACEFOSS-891-new-header
TRACEFOSS-891: Replaced old header with new design
2 parents 5985d04 + 8da7d95 commit 3879b12

File tree

62 files changed

+321
-903
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+321
-903
lines changed

‎cypress.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default defineConfig({
2727
specPattern: '**/*.feature',
2828
supportFile: false,
2929
viewportWidth: 1366,
30-
viewportHeight: 768,
30+
viewportHeight: 900,
3131
experimentalWebKitSupport: true, // https://docs.cypress.io/guides/guides/launching-browsers#WebKit-Experimental
3232
setupNodeEvents,
3333
},

‎cypress/support/step_definitions/dashboard.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Then(/^url should contain dashboard$/, () => {
3131
});
3232

3333
Then(/^should be visible "Dashboard" header$/, () => {
34-
cy.get('h2').contains('Dashboard').should('be.visible');
34+
cy.get('h3').contains('Dashboard').should('be.visible');
3535
});
3636

3737
Then(/^should be visible "TOTAL OF PARTS" section$/, () => {

‎karma.conf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ module.exports = function (config) {
7676
port: 9876,
7777
colors: true,
7878
logLevel: config.LOG_INFO,
79-
autoWatch: true,
79+
autoWatch: false,
8080
browsers: ['Chrome'],
8181
singleRun: true,
8282
restartOnFileChange: true,

src/app/modules/page/investigations/investigations-external-route.ts renamed to src/app/modules/core/known-route.ts

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,34 @@
2222
import { NotificationStatusGroup } from '@shared/model/notification.model';
2323
import { PageRoute } from '@shared/model/page-route.model';
2424

25+
export const PARTS_BASE_ROUTE = 'parts';
26+
export const OTHER_PARTS_BASE_ROUTE = 'otherParts';
27+
export const DASHBOARD_BASE_ROUTE = 'dashboard';
28+
export const ADMIN_BASE_ROUTE = 'admin';
29+
export const ABOUT_BASE_ROUTE = 'about';
2530
export const INVESTIGATION_BASE_ROUTE = 'investigations';
31+
export const NO_PERMISSION_BASE_ROUTE = 'no-permissions';
2632

27-
export const getInvestigationInboxRoute = (investigationStatusGroup?: NotificationStatusGroup): PageRoute => ({
33+
export const NavigableUrls = [
34+
PARTS_BASE_ROUTE,
35+
OTHER_PARTS_BASE_ROUTE,
36+
DASHBOARD_BASE_ROUTE,
37+
ADMIN_BASE_ROUTE,
38+
ABOUT_BASE_ROUTE,
39+
INVESTIGATION_BASE_ROUTE,
40+
] as const;
41+
42+
export type KnownUrl = (typeof NavigableUrls)[number];
43+
44+
export const getRoute = (urlType: KnownUrl, ...args): PageRoute => {
45+
if (urlType === INVESTIGATION_BASE_ROUTE) {
46+
return getInvestigationInboxRoute(...args);
47+
}
48+
49+
return { link: urlType };
50+
};
51+
52+
const getInvestigationInboxRoute = (investigationStatusGroup?: NotificationStatusGroup): PageRoute => ({
2853
link: `${INVESTIGATION_BASE_ROUTE}`,
2954
queryParams: investigationStatusGroup
3055
? {

‎src/app/modules/core/layout/header/header.component.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!--
2+
Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)
3+
Copyright (c) 2022, 2023 ZF Friedrichshafen AG
4+
Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation
5+
6+
See the NOTICE file(s) distributed with this work for additional
7+
information regarding copyright ownership.
8+
9+
This program and the accompanying materials are made available under the
10+
terms of the Apache License, Version 2.0 which is available at
11+
https://www.apache.org/licenses/LICENSE-2.0.
12+
13+
Unless required by applicable law or agreed to in writing, software
14+
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
15+
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
16+
License for the specific language governing permissions and limitations
17+
under the License.
18+
19+
SPDX-License-Identifier: Apache-2.0
20+
-->
21+
22+
<div class="header--container">
23+
<nav class="header--menu-container">
24+
<img src="/assets/images/logo.svg" alt="Trace-x" class="header--logo cursor-pointer" routerLink="dashboard" />
25+
26+
<div class="header--menu">
27+
<ng-container *ngTemplateOutlet="menuItem; context: { value: 'dashboard' }"></ng-container>
28+
<ng-container *ngTemplateOutlet="menuItem; context: { value: 'parts' }"></ng-container>
29+
<ng-container *ngTemplateOutlet="menuItem; context: { value: 'otherParts' }"></ng-container>
30+
<ng-container *ngTemplateOutlet="menuItem; context: { value: 'investigations' }"></ng-container>
31+
<ng-container *ngTemplateOutlet="menuItem; context: { value: 'about' }"></ng-container>
32+
</div>
33+
34+
<div class="header--user">
35+
<app-button variant="flat" color="primary" class="pr-5" (click)="openDocumentation()">
36+
<app-text-with-icon iconName="help">{{ 'actions.help' | i18n }}</app-text-with-icon>
37+
</app-button>
38+
39+
<app-button variant="icon" iconName="account_circle"></app-button>
40+
</div>
41+
</nav>
42+
43+
<div class="header--breadcrumb-container">
44+
<app-breadcrumbs></app-breadcrumbs>
45+
</div>
46+
47+
<div class="header--app-header">
48+
<h3>{{ 'pageTitle.' + activeMenu | i18n }}</h3>
49+
</div>
50+
51+
<img src="/assets/images/header-subtract.png" class="header--stylish-curve" alt="" />
52+
</div>
53+
54+
<ng-template let-type="value" #menuItem>
55+
<a class="header--menu__item" [routerLink]="type" [class.selected]="type === activeMenu">
56+
<app-text-with-icon [iconName]="iconMapping[type]" class="header--menu__item-iconText">
57+
<p>{{ 'routing.' + type | i18n }}</p>
58+
</app-text-with-icon>
59+
<mat-icon class="header--menu__item-icon">{{ iconMapping[type] }}</mat-icon>
60+
</a>
61+
</ng-template>

‎src/app/modules/core/layout/header/header.component.scss‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/********************************************************************************
2+
* Copyright (c) 2022, 2023 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)
3+
* Copyright (c) 2022, 2023 ZF Friedrichshafen AG
4+
* Copyright (c) 2022, 2023 Contributors to the Eclipse Foundation
5+
*
6+
* See the NOTICE file(s) distributed with this work for additional
7+
* information regarding copyright ownership.
8+
*
9+
* This program and the accompanying materials are made available under the
10+
* terms of the Apache License, Version 2.0 which is available at
11+
* https://www.apache.org/licenses/LICENSE-2.0.
12+
*
13+
* Unless required by applicable law or agreed to in writing, software
14+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
15+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
16+
* License for the specific language governing permissions and limitations
17+
* under the License.
18+
*
19+
* SPDX-License-Identifier: Apache-2.0
20+
********************************************************************************/
21+
22+
.header {
23+
&--container {
24+
display: flex;
25+
flex-direction: column;
26+
background: linear-gradient(152.33deg, #e4ebf3 4.24%, #adb9c7 72.17%);
27+
// background: linear-gradient(111.81deg, #9eaba9 41.97%, #b6a763 72.9%);
28+
}
29+
30+
&--logo {
31+
height: 30px;
32+
}
33+
34+
&--breadcrumb-container {
35+
height: 50px;
36+
background: rgba(255, 255, 255, 0.3);
37+
padding: 0 40px;
38+
display: flex;
39+
align-items: center;
40+
}
41+
42+
&--app-header {
43+
padding: 0 40px;
44+
// Subtract the curve height from header size
45+
height: calc(85px - 32px);
46+
47+
& > h3 {
48+
padding-top: 15px;
49+
}
50+
}
51+
52+
&--stylish-curve {
53+
height: 32px;
54+
width: 100%;
55+
bottom: 0;
56+
// this is to match our BG color
57+
// color matcher used from https://codepen.io/sosuke/pen/Pjoqqp
58+
filter: sepia(3%) saturate(462%) hue-rotate(201deg) brightness(113%) contrast(93%);
59+
}
60+
61+
&--menu-container {
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
66+
height: 85px;
67+
padding: 0 40px;
68+
}
69+
70+
&--menu {
71+
width: 70%;
72+
height: 50px;
73+
display: flex;
74+
justify-content: space-evenly;
75+
align-items: center;
76+
77+
&__item-iconText {
78+
display: block;
79+
@media (max-width: 1024px) {
80+
display: none;
81+
}
82+
}
83+
84+
&__item-icon {
85+
display: none;
86+
@media (max-width: 1024px) {
87+
display: block;
88+
}
89+
}
90+
91+
&__item {
92+
@apply font-medium;
93+
94+
color: #888888;
95+
line-height: 20px;
96+
position: relative;
97+
98+
&.selected,
99+
&:hover {
100+
color: #252525;
101+
102+
&::before {
103+
content: ' ';
104+
width: 100%;
105+
padding-top: 10px;
106+
border: none;
107+
position: absolute;
108+
border-bottom: 2px solid #252525;
109+
}
110+
}
111+
}
112+
}
113+
114+
&--user {
115+
display: flex;
116+
align-items: center;
117+
}
118+
}

src/app/modules/page/about/about-route.ts renamed to src/app/modules/core/layout/header/header.component.spec.ts

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,27 @@
1919
* SPDX-License-Identifier: Apache-2.0
2020
********************************************************************************/
2121

22-
import { PageRoute } from '@shared/model/page-route.model';
22+
import { LayoutModule } from '@layout/layout.module';
23+
import { HeaderComponent } from '@layout/header/header.component';
24+
import { SharedModule } from '@shared/shared.module';
25+
import { screen, waitFor } from '@testing-library/angular';
26+
import { renderComponent } from '@tests/test-render.utils';
2327

24-
export const ABOUT_BASE_ROUTE = 'about';
28+
describe('Header', () => {
29+
const renderHeader = () => {
30+
return renderComponent(HeaderComponent, {
31+
imports: [LayoutModule, SharedModule],
32+
});
33+
};
34+
it('should render header', async () => {
35+
await renderHeader();
2536

26-
export const getAboutRoute = (): PageRoute => ({
27-
link: `${ABOUT_BASE_ROUTE}`,
37+
expect(await waitFor(() => screen.getByText('routing.dashboard'))).toBeInTheDocument();
38+
});
39+
40+
it('should render help button', async () => {
41+
await renderHeader();
42+
43+
expect(await waitFor(() => screen.getByText('actions.help'))).toBeInTheDocument();
44+
});
2845
});

src/app/modules/core/layout/sidebar/sidebar.component.ts renamed to src/app/modules/core/layout/header/header.component.ts

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,46 +19,38 @@
1919
* SPDX-License-Identifier: Apache-2.0
2020
********************************************************************************/
2121

22-
import { Component, Input } from '@angular/core';
22+
import { Component } from '@angular/core';
2323
import { NavigationEnd, Router } from '@angular/router';
24-
import { getAboutRoute } from '@page/about/about-route';
25-
import { getAdminRoute } from '@page/admin/admin-route';
26-
import { getDashboardRoute } from '@page/dashboard/dashboard-route';
27-
import { getInvestigationInboxRoute } from '@page/investigations/investigations-external-route';
28-
import { getOtherPartsRoute } from '@page/other-parts/other-parts-route';
29-
import { getPartsRoute } from '@page/parts/parts-route';
30-
import { PageRoute } from '@shared/model/page-route.model';
24+
import { KnownUrl, NavigableUrls } from '@core/known-route';
3125
import { filter } from 'rxjs/operators';
3226

3327
@Component({
34-
selector: 'app-sidebar',
35-
templateUrl: './sidebar.component.html',
36-
styleUrls: ['./sidebar.component.scss'],
28+
selector: 'app-header',
29+
templateUrl: './header.component.html',
30+
styleUrls: ['./header.component.scss'],
3731
})
38-
export class SidebarComponent {
39-
@Input() expanded: boolean;
32+
export class HeaderComponent {
4033
public activeMenu = '';
4134

42-
private readonly menu: Record<string, PageRoute> = {
43-
dashboard: getDashboardRoute(),
44-
about: getAboutRoute(),
45-
parts: getPartsRoute(),
46-
otherParts: getOtherPartsRoute(),
47-
investigations: getInvestigationInboxRoute(),
48-
admin: getAdminRoute(),
35+
public readonly iconMapping: Record<KnownUrl, string> = {
36+
dashboard: 'dashboard',
37+
about: 'info',
38+
parts: 'build',
39+
otherParts: 'commute',
40+
investigations: 'inbox',
41+
admin: 'apps',
4942
};
5043

5144
constructor(private readonly router: Router) {
5245
this.router.events
5346
.pipe(filter(event => event instanceof NavigationEnd))
5447
.subscribe(({ urlAfterRedirects, url }: NavigationEnd) => {
5548
const currentUrl = urlAfterRedirects ?? url;
56-
this.activeMenu = Object.keys(this.menu).find(menuKey => currentUrl.includes(menuKey));
49+
this.activeMenu = NavigableUrls.find(menuKey => currentUrl.includes(menuKey));
5750
});
5851
}
5952

60-
public navigate(item: string): void {
61-
this.router.navigate([this.menu[item].link]).then();
62-
this.activeMenu = item;
53+
public openDocumentation(): void {
54+
window.open('https://eclipse-tractusx.github.io/traceability-foss-backend/docs/', '_blank', 'noopener');
6355
}
6456
}

‎src/app/modules/core/layout/layout.module.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,13 @@ import { SharedModule } from '@shared/shared.module';
2525
import { TemplateModule } from '@shared/template.module';
2626
import { LayoutRoutingModule } from './layout.routing';
2727
import { LayoutComponent } from './layout/layout.component';
28-
import { NavBarComponent } from './nav-bar/nav-bar.component';
28+
import { HeaderComponent } from './header/header.component';
2929
import { ResizerComponent } from './resizer/resizer.component';
30-
import { SidebarSectionComponent } from './sidebar/sidebar-section/sidebar-section.component';
31-
import { SidebarComponent } from './sidebar/sidebar.component';
3230
import { SidenavComponent } from './sidenav/sidenav.component';
3331
import { SpinnerOverlayComponent } from './spinner-overlay/spinner-overlay.component';
3432

3533
@NgModule({
36-
declarations: [
37-
LayoutComponent,
38-
NavBarComponent,
39-
ResizerComponent,
40-
SidebarComponent,
41-
SpinnerOverlayComponent,
42-
SidebarSectionComponent,
43-
SidenavComponent,
44-
],
34+
declarations: [LayoutComponent, HeaderComponent, ResizerComponent, SpinnerOverlayComponent, SidenavComponent],
4535
imports: [CommonModule, LayoutRoutingModule, TemplateModule, SharedModule],
4636
})
4737
export class LayoutModule {}

‎src/app/modules/core/layout/layout.routing.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,16 @@
2121

2222
import { NgModule } from '@angular/core';
2323
import { RouterModule, Routes } from '@angular/router';
24+
import {
25+
ABOUT_BASE_ROUTE,
26+
ADMIN_BASE_ROUTE,
27+
DASHBOARD_BASE_ROUTE,
28+
INVESTIGATION_BASE_ROUTE,
29+
NO_PERMISSION_BASE_ROUTE,
30+
OTHER_PARTS_BASE_ROUTE,
31+
PARTS_BASE_ROUTE,
32+
} from '@core/known-route';
2433
import { RoleGuard } from '@core/user/role.guard';
25-
import { ABOUT_BASE_ROUTE } from '@page/about/about-route';
26-
import { ADMIN_BASE_ROUTE } from '@page/admin/admin-route';
27-
import { DASHBOARD_BASE_ROUTE } from '@page/dashboard/dashboard-route';
28-
import { INVESTIGATION_BASE_ROUTE } from '@page/investigations/investigations-external-route';
29-
import { OTHER_PARTS_BASE_ROUTE } from '@page/other-parts/other-parts-route';
30-
import { PARTS_BASE_ROUTE } from '@page/parts/parts-route';
3134
import { ErrorPageType } from '@page/error-page/model/error-page.model';
3235

3336
export /** @type {*} */
@@ -40,7 +43,7 @@ const routes: Routes = [
4043
redirectTo: 'dashboard',
4144
},
4245
{
43-
path: 'no-permissions',
46+
path: NO_PERMISSION_BASE_ROUTE,
4447
loadChildren: () => import('@page/error-page/error-page.module').then(m => m.ErrorPageModule),
4548
data: {
4649
errorPage: {

0 commit comments

Comments
 (0)