Skip to content

Commit ae15fe5

Browse files
tdonohuetdonohue
authored
Merge pull request DSpace#2676 from 4Science/DURACOM-195
Header, navbar, and admin sidebar refactoring
2 parents 25955ae + 91f01ad commit ae15fe5

79 files changed

Lines changed: 1273 additions & 900 deletions

File tree

Some content is hidden

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

‎cypress/e2e/collection-edit.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('Edit Collection > Content Source tab', () => {
4545
cy.get('#externalSourceCheck').check();
4646

4747
// Wait for the source controls to appear
48-
cy.get('ds-collection-source-controls').should('be.visible');
48+
// cy.get('ds-collection-source-controls').should('be.visible');
4949

5050
// Analyze entire page for accessibility issues
5151
testA11y('ds-collection-source');

‎cypress/e2e/collection-statistics.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe('Collection Statistics Page', () => {
66

77
it('should load if you click on "Statistics" from a Collection page', () => {
88
cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')));
9-
cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
9+
cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
1010
cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE);
1111
});
1212

‎cypress/e2e/community-statistics.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe('Community Statistics Page', () => {
66

77
it('should load if you click on "Statistics" from a Community page', () => {
88
cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')));
9-
cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
9+
cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
1010
cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE);
1111
});
1212

‎cypress/e2e/homepage-statistics.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import '../support/commands';
55
describe('Site Statistics Page', () => {
66
it('should load if you click on "Statistics" from homepage', () => {
77
cy.visit('/');
8-
cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
8+
cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
99
cy.location('pathname').should('eq', '/statistics');
1010
});
1111

‎cypress/e2e/item-statistics.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe('Item Statistics Page', () => {
66

77
it('should load if you click on "Statistics" from an Item/Entity page', () => {
88
cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
9-
cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
9+
cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
1010
cy.location('pathname').should('eq', ITEMSTATISTICSPAGE);
1111
});
1212

‎cypress/e2e/login-modal.cy.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,31 @@ import { testA11y } from 'cypress/support/utils';
33
const page = {
44
openLoginMenu() {
55
// Click the "Log In" dropdown menu in header
6-
cy.get('ds-themed-navbar [data-test="login-menu"]').click();
6+
cy.get('ds-themed-header [data-test="login-menu"]').click();
77
},
88
openUserMenu() {
99
// Once logged in, click the User menu in header
10-
cy.get('ds-themed-navbar [data-test="user-menu"]').click();
10+
cy.get('ds-themed-header [data-test="user-menu"]').click();
1111
},
1212
submitLoginAndPasswordByPressingButton(email, password) {
1313
// Enter email
14-
cy.get('ds-themed-navbar [data-test="email"]').type(email);
14+
cy.get('ds-themed-header [data-test="email"]').type(email);
1515
// Enter password
16-
cy.get('ds-themed-navbar [data-test="password"]').type(password);
16+
cy.get('ds-themed-header [data-test="password"]').type(password);
1717
// Click login button
18-
cy.get('ds-themed-navbar [data-test="login-button"]').click();
18+
cy.get('ds-themed-header [data-test="login-button"]').click();
1919
},
2020
submitLoginAndPasswordByPressingEnter(email, password) {
2121
// In opened Login modal, fill out email & password, then click Enter
22-
cy.get('ds-themed-navbar [data-test="email"]').type(email);
23-
cy.get('ds-themed-navbar [data-test="password"]').type(password);
24-
cy.get('ds-themed-navbar [data-test="password"]').type('{enter}');
22+
cy.get('ds-themed-header [data-test="email"]').type(email);
23+
cy.get('ds-themed-header [data-test="password"]').type(password);
24+
cy.get('ds-themed-header [data-test="password"]').type('{enter}');
2525
},
2626
submitLogoutByPressingButton() {
2727
// This is the POST command that will actually log us out
2828
cy.intercept('POST', '/server/api/authn/logout').as('logout');
2929
// Click logout button
30-
cy.get('ds-themed-navbar [data-test="logout-button"]').click();
30+
cy.get('ds-themed-header [data-test="logout-button"]').click();
3131
// Wait until above POST command responds before continuing
3232
// (This ensures next action waits until logout completes)
3333
cy.wait('@logout');
@@ -102,10 +102,10 @@ describe('Login Modal', () => {
102102
page.openLoginMenu();
103103

104104
// Registration link should be visible
105-
cy.get('ds-themed-navbar [data-test="register"]').should('be.visible');
105+
cy.get('ds-themed-header [data-test="register"]').should('be.visible');
106106

107107
// Click registration link & you should go to registration page
108-
cy.get('ds-themed-navbar [data-test="register"]').click();
108+
cy.get('ds-themed-header [data-test="register"]').click();
109109
cy.location('pathname').should('eq', '/register');
110110
cy.get('ds-register-email').should('exist');
111111

@@ -119,10 +119,10 @@ describe('Login Modal', () => {
119119
page.openLoginMenu();
120120

121121
// Forgot password link should be visible
122-
cy.get('ds-themed-navbar [data-test="forgot"]').should('be.visible');
122+
cy.get('ds-themed-header [data-test="forgot"]').should('be.visible');
123123

124124
// Click link & you should go to Forgot Password page
125-
cy.get('ds-themed-navbar [data-test="forgot"]').click();
125+
cy.get('ds-themed-header [data-test="forgot"]').click();
126126
cy.location('pathname').should('eq', '/forgot');
127127
cy.get('ds-forgot-email').should('exist');
128128

‎cypress/e2e/search-navbar.cy.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
const page = {
22
fillOutQueryInNavBar(query) {
33
// Click the magnifying glass
4-
cy.get('ds-themed-navbar [data-test="header-search-icon"]').click();
4+
cy.get('ds-themed-header [data-test="header-search-icon"]').click();
55
// Fill out a query in input that appears
6-
cy.get('ds-themed-navbar [data-test="header-search-box"]').type(query);
6+
cy.get('ds-themed-header [data-test="header-search-box"]').type(query);
77
},
88
submitQueryByPressingEnter() {
9-
cy.get('ds-themed-navbar [data-test="header-search-box"]').type('{enter}');
9+
cy.get('ds-themed-header [data-test="header-search-box"]').type('{enter}');
1010
},
1111
submitQueryByPressingIcon() {
12-
cy.get('ds-themed-navbar [data-test="header-search-icon"]').click();
12+
cy.get('ds-themed-header [data-test="header-search-icon"]').click();
1313
}
1414
};
1515

‎src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
<div class="sidebar-section">
2-
<a class="nav-item nav-link d-flex flex-row flex-nowrap"
3-
[ngClass]="{ disabled: isDisabled }"
4-
[attr.aria-disabled]="isDisabled"
5-
[attr.aria-labelledby]="'sidebarName-' + section.id"
6-
[title]="('menu.section.icon.' + section.id) | translate"
7-
[routerLink]="itemModel.link"
8-
(keyup.space)="navigate($event)"
9-
(keyup.enter)="navigate($event)"
10-
href="javascript:void(0);"
11-
>
12-
<div class="shortcut-icon">
13-
<i class="fas fa-{{section.icon}} fa-fw"></i>
1+
<div>
2+
<a class="sidebar-section-wrapper"
3+
[ngClass]="{ disabled: isDisabled }"
4+
role="menuitem"
5+
[attr.aria-disabled]="isDisabled"
6+
[attr.aria-labelledby]="adminMenuSectionTitleId(section.id)"
7+
[routerLink]="itemModel.link"
8+
(keyup.space)="navigate($event)"
9+
(keyup.enter)="navigate($event)"
10+
href="javascript:void(0);"
11+
>
12+
<div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
13+
<i class="fas fa-{{section.icon}} fa-fw"></i>
14+
</div>
15+
<div class="sidebar-collapsible-element-outer-wrapper">
16+
<div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
17+
<span [id]="adminMenuSectionTitleId(section.id)">{{itemModel.text | translate}}</span>
1418
</div>
15-
<div class="sidebar-collapsible">
16-
<div class="toggle">
17-
<span id="sidebarName-{{section.id}}" class="section-header-text">
18-
{{itemModel.text | translate}}
19-
</span>
20-
</div>
21-
</div>
22-
</a>
19+
</div>
20+
</a>
2321
</div>

‎src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ describe('AdminSidebarSectionComponent', () => {
4848
});
4949

5050
it('should set the right icon', () => {
51-
const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas'));
51+
const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas'));
5252
expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
5353
});
5454
it('should not contain the disabled class', () => {
@@ -88,7 +88,7 @@ describe('AdminSidebarSectionComponent', () => {
8888
});
8989

9090
it('should set the right icon', () => {
91-
const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas'));
91+
const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas'));
9292
expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
9393
});
9494
it('should contain the disabled class', () => {

‎src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,12 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement
5252
this.router.navigate(this.itemModel.link);
5353
}
5454
}
55+
56+
adminMenuSectionId(sectionId: string) {
57+
return `admin-menu-section-${sectionId}`;
58+
}
59+
60+
adminMenuSectionTitleId(sectionId: string) {
61+
return `admin-menu-section-${sectionId}-title`;
62+
}
5563
}

0 commit comments

Comments
 (0)