Merge pull request #559 from atmire/header-search-box

Header search box

e2e/search-navbar/search-navbar.e2e-spec.ts

@@ -0,0 +1,46 @@
+import { ProtractorPage } from './search-navbar.po';
+import { browser } from 'protractor';
+
+describe('protractor SearchNavbar', () => {
+  let page: ProtractorPage;
+  let queryString: string;
+
+  beforeEach(() => {
+    page = new ProtractorPage();
+    queryString = 'the test query';
+  });
+
+  it('should go to search page with correct query if submitted (from home)', () => {
+    page.navigateToHome();
+    return checkIfSearchWorks();
+  });
+
+  it('should go to search page with correct query if submitted (from search)', () => {
+    page.navigateToSearch();
+    return checkIfSearchWorks();
+  });
+
+  it('check if can submit search box with pressing button', () => {
+    page.navigateToHome();
+    page.expandAndFocusSearchBox();
+    page.setCurrentQuery(queryString);
+    page.submitNavbarSearchForm();
+    browser.wait(() => {
+      return browser.getCurrentUrl().then((url: string) => {
+        return url.indexOf('query=' + encodeURI(queryString)) !== -1;
+      });
+    });
+  });
+
+  function checkIfSearchWorks(): boolean {
+    page.setCurrentQuery(queryString);
+    page.submitByPressingEnter();
+    browser.wait(() => {
+      return browser.getCurrentUrl().then((url: string) => {
+        return url.indexOf('query=' + encodeURI(queryString)) !== -1;
+      });
+    });
+    return false;
+  }
+
+});

e2e/search-navbar/search-navbar.po.ts

@@ -0,0 +1,40 @@
+import { browser, element, by, protractor } from 'protractor';
+import { promise } from 'selenium-webdriver';
+
+export class ProtractorPage {
+  HOME = '/home';
+  SEARCH = '/search';
+
+  navigateToHome() {
+    return browser.get(this.HOME);
+  }
+
+  navigateToSearch() {
+    return browser.get(this.SEARCH);
+  }
+
+  getCurrentQuery(): promise.Promise<string> {
+    return element(by.css('#search-navbar-container form input')).getAttribute('value');
+  }
+
+  expandAndFocusSearchBox() {
+    element(by.css('#search-navbar-container form a')).click();
+  }
+
+  setCurrentQuery(query: string) {
+    element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(query);
+  }
+
+  submitNavbarSearchForm() {
+    element(by.css('#search-navbar-container form .submit-icon')).click();
+  }
+
+  submitByPressingEnter() {
+    element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER);
+  }
+
+  submitByPressingEnter() {
+    element(by.css('#search-navbar-container form input[name="query"]')).sendKeys(protractor.Key.ENTER);
+  }
+
+}

e2e/search-page/search-page.po.ts

@@ -1,4 +1,4 @@
-import { browser, element, by, protractor } from 'protractor';
+import { browser, by, element, protractor } from 'protractor';
 import { promise } from 'selenium-webdriver';
 
 export class ProtractorPage {
@@ -27,15 +27,15 @@ export class ProtractorPage {
   }
 
   setCurrentScope(scope: string) {
-    element(by.css('option[value="' + scope + '"]')).click();
+    element(by.css('#search-form option[value="' + scope + '"]')).click();
   }
 
   setCurrentQuery(query: string) {
-    element(by.css('input[name="query"]')).sendKeys(query);
+    element(by.css('#search-form input[name="query"]')).sendKeys(query);
   }
 
   submitSearchForm() {
-    element(by.css('button.search-button')).click();
+    element(by.css('#search-form button.search-button')).click();
   }
 
   getRandomScopeOption(): promise.Promise<string> {

protractor.conf.js

@@ -5,7 +5,7 @@
 var SpecReporter = require('jasmine-spec-reporter').SpecReporter;
 
 exports.config = {
-  allScriptsTimeout: 11000,
+  allScriptsTimeout: 600000,
   // -----------------------------------------------------------------
   // Uncomment to run tests using a remote Selenium server
   //seleniumAddress: 'http://selenium.address:4444/wd/hub',
@@ -73,7 +73,7 @@ exports.config = {
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
-    defaultTimeoutInterval: 30000,
+    defaultTimeoutInterval: 600000,
     print: function () {}
   },
   useAllAngular2AppRoots: true,

src/app/app.module.ts

@@ -10,10 +10,14 @@ import { META_REDUCERS, MetaReducer, StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 import { TranslateModule } from '@ngx-translate/core';
+import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 
 import { storeFreeze } from 'ngrx-store-freeze';
 
 import { ENV_CONFIG, GLOBAL_CONFIG, GlobalConfig } from '../config';
+import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
+import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component';
+import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
@@ -23,23 +27,20 @@ import { appMetaReducers, debugMetaReducers } from './app.metareducers';
 import { appReducers, AppState } from './app.reducer';
 
 import { CoreModule } from './core/core.module';
-import { FooterComponent } from './footer/footer.component';
-import { HeaderComponent } from './header/header.component';
-import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
-
-import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
-import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
-import { NotificationComponent } from './shared/notifications/notification/notification.component';
-import { SharedModule } from './shared/shared.module';
-import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
-import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component';
-import { AdminSidebarComponent } from './+admin/admin-sidebar/admin-sidebar.component';
-import { AdminSidebarSectionComponent } from './+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component';
-import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component';
-import { NavbarModule } from './navbar/navbar.module';
 import { ClientCookieService } from './core/services/client-cookie.service';
 import { JournalEntitiesModule } from './entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from './entity-groups/research-entities/research-entities.module';
+import { FooterComponent } from './footer/footer.component';
+import { HeaderNavbarWrapperComponent } from './header-nav-wrapper/header-navbar-wrapper.component';
+import { HeaderComponent } from './header/header.component';
+import { NavbarModule } from './navbar/navbar.module';
+import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
+import { SearchNavbarComponent } from './search-navbar/search-navbar.component';
+
+import { DSpaceRouterStateSerializer } from './shared/ngrx/dspace-router-state-serializer';
+import { NotificationComponent } from './shared/notifications/notification/notification.component';
+import { NotificationsBoardComponent } from './shared/notifications/notifications-board/notifications-board.component';
+import { SharedModule } from './shared/shared.module';
 
 export function getConfig() {
   return ENV_CONFIG;
@@ -112,7 +113,8 @@ const DECLARATIONS = [
   FooterComponent,
   PageNotFoundComponent,
   NotificationComponent,
-  NotificationsBoardComponent
+  NotificationsBoardComponent,
+  SearchNavbarComponent,
 ];
 
 const EXPORTS = [
@@ -128,7 +130,7 @@ const EXPORTS = [
     ...PROVIDERS
   ],
   declarations: [
-    ...DECLARATIONS
+    ...DECLARATIONS,
   ],
   exports: [
     ...EXPORTS

src/app/header/header.component.html

@@ -1,20 +1,20 @@
 <header>
-    <div class="container">
+  <div class="container">
-        <a class="navbar-brand my-2" routerLink="/home">
+    <a class="navbar-brand my-2" routerLink="/home">
-            <img src="assets/images/dspace-logo.svg"/>
+      <img src="assets/images/dspace-logo.svg"/>
-        </a>
+    </a>
 
-        <nav class="navbar navbar-light navbar-expand-md float-right px-0">
+    <nav class="navbar navbar-light navbar-expand-md float-right px-0">
-            <a routerLink="/search" class="px-1"><i class="fas fa-search fa-lg fa-fw" [title]="'nav.search' | translate"></i></a>
+      <ds-search-navbar></ds-search-navbar>
-            <ds-lang-switch></ds-lang-switch>
+      <ds-lang-switch></ds-lang-switch>
-            <ds-auth-nav-menu></ds-auth-nav-menu>
+      <ds-auth-nav-menu></ds-auth-nav-menu>
-            <div class="pl-2">
+      <div class="pl-2">
-                <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+        <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
-                        aria-controls="collapsingNav"
+                aria-controls="collapsingNav"
-                        aria-expanded="false" aria-label="Toggle navigation">
+                aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
-                </button>
+        </button>
-            </div>
+      </div>
-        </nav>
+    </nav>
-    </div>
+  </div>
 </header>

src/app/search-navbar/search-navbar.component.html

@@ -0,0 +1,12 @@
+<div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+  <div class="d-inline-block position-relative">
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
+      <input #searchInput [@toggleAnimation]="isExpanded" id="query" name="query"
+             formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
+             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1">
+      <a class="sticky-top submit-icon" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
+        <em class="fas fa-search fa-lg fa-fw"></em>
+      </a>
+    </form>
+  </div>
+</div>

src/app/search-navbar/search-navbar.component.scss

@@ -0,0 +1,25 @@
+input[type="text"] {
+  margin-top: -0.5 * $font-size-base;
+
+  &:focus {
+    background-color: rgba(255, 255, 255, 0.5) !important;
+  }
+
+  &.collapsed {
+    opacity: 0;
+  }
+}
+
+a.submit-icon {
+  cursor: pointer;
+}
+
+
+
+@media screen and (max-width: map-get($grid-breakpoints, sm)) {
+  #query:focus {
+    max-width: 250px !important;
+    width: 40vw !important;
+  }
+}
+

src/app/search-navbar/search-navbar.component.spec.ts

@@ -0,0 +1,121 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { SearchService } from '../core/shared/search/search.service';
+import { MockTranslateLoader } from '../shared/mocks/mock-translate-loader';
+
+import { SearchNavbarComponent } from './search-navbar.component';
+
+describe('SearchNavbarComponent', () => {
+  let component: SearchNavbarComponent;
+  let fixture: ComponentFixture<SearchNavbarComponent>;
+  let mockSearchService: any;
+  let router: Router;
+  let routerStub;
+
+  beforeEach(async(() => {
+    mockSearchService = {
+      getSearchLink() {
+        return '/search';
+      }
+    };
+
+    routerStub = {
+      navigate: (commands) => commands
+    };
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        BrowserAnimationsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        })],
+      declarations: [SearchNavbarComponent],
+      providers: [
+        { provide: SearchService, useValue: mockSearchService },
+        { provide: Router, useValue: routerStub }
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchNavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    router = (component as any).router;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('when you click on search icon', () => {
+    beforeEach(fakeAsync(() => {
+      spyOn(component, 'expand').and.callThrough();
+      spyOn(component, 'onSubmit').and.callThrough();
+      spyOn(router, 'navigate').and.callThrough();
+      const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+      searchIcon.triggerEventHandler('click', {
+        preventDefault: () => {/**/
+        }
+      });
+      tick();
+      fixture.detectChanges();
+    }));
+
+    it('input expands', () => {
+      expect(component.expand).toHaveBeenCalled();
+    });
+
+    describe('empty query', () => {
+      describe('press submit button', () => {
+        beforeEach(fakeAsync(() => {
+          const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+          searchIcon.triggerEventHandler('click', {
+            preventDefault: () => {/**/
+            }
+          });
+          tick();
+          fixture.detectChanges();
+        }));
+        it('to search page with empty query', () => {
+          expect(component.onSubmit).toHaveBeenCalledWith({ query: '' });
+          expect(router.navigate).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('fill in some query', () => {
+      let searchInput;
+      beforeEach(async () => {
+        await fixture.whenStable();
+        fixture.detectChanges();
+        searchInput = fixture.debugElement.query(By.css('#search-navbar-container form input'));
+        searchInput.nativeElement.value = 'test';
+        searchInput.nativeElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+      });
+      describe('press submit button', () => {
+        beforeEach(fakeAsync(() => {
+          const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+          searchIcon.triggerEventHandler('click', null);
+          tick();
+          fixture.detectChanges();
+        }));
+        it('to search page with query', async () => {
+          expect(component.onSubmit).toHaveBeenCalledWith({ query: 'test' });
+          expect(router.navigate).toHaveBeenCalled();
+        });
+      });
+    })
+
+  });
+});

src/app/search-navbar/search-navbar.component.ts

@@ -0,0 +1,71 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Router } from '@angular/router';
+import { SearchService } from '../core/shared/search/search.service';
+import { expandSearchInput } from '../shared/animations/slide';
+
+/**
+ * The search box in the header that expands on focus and collapses on focus out
+ */
+@Component({
+  selector: 'ds-search-navbar',
+  templateUrl: './search-navbar.component.html',
+  styleUrls: ['./search-navbar.component.scss'],
+  animations: [expandSearchInput]
+})
+export class SearchNavbarComponent {
+
+  // The search form
+  searchForm;
+  // Whether or not the search bar is expanded, boolean for html ngIf, string fo AngularAnimation state change
+  searchExpanded = false;
+  isExpanded = 'collapsed';
+
+  // Search input field
+  @ViewChild('searchInput') searchField: ElementRef;
+
+  constructor(private formBuilder: FormBuilder, private router: Router, private searchService: SearchService) {
+    this.searchForm = this.formBuilder.group(({
+      query: '',
+    }));
+  }
+
+  /**
+   * Expands search bar by angular animation, see expandSearchInput
+   */
+  expand() {
+    this.searchExpanded = true;
+    this.isExpanded = 'expanded';
+    this.editSearch();
+  }
+
+  /**
+   * Collapses & blurs search bar by angular animation, see expandSearchInput
+   */
+  collapse() {
+    this.searchField.nativeElement.blur();
+    this.searchExpanded = false;
+    this.isExpanded = 'collapsed';
+  }
+
+  /**
+   * Focuses on input search bar so search can be edited
+   */
+  editSearch(): void {
+    this.searchField.nativeElement.focus();
+  }
+
+  /**
+   * Submits the search (on enter or on search icon click)
+   * @param data  Data for the searchForm, containing the search query
+   */
+  onSubmit(data: any) {
+    this.collapse();
+    const linkToNavigateTo = this.searchService.getSearchLink().split('/');
+    this.searchForm.reset();
+    this.router.navigate(linkToNavigateTo, {
+      queryParams: Object.assign({}, { page: 1 }, data),
+      queryParamsHandling: 'merge'
+    });
+  }
+}

src/app/shared/animations/slide.ts

@@ -1,13 +1,4 @@
-import {
+import { animate, animateChild, group, query, state, style, transition, trigger } from '@angular/animations';
-  animate,
-  animateChild,
-  group,
-  query,
-  state,
-  style,
-  transition,
-  trigger
-} from '@angular/animations';
 
 export const slide = trigger('slide', [
   state('expanded', style({ height: '*' })),
@@ -70,3 +61,30 @@ export const slideSidebarPadding = trigger('slideSidebarPadding', [
   transition('hidden <=> expanded', [animate('200ms')]),
   transition('shown <=> expanded', [animate('200ms')]),
 ]);
+
+export const expandSearchInput = trigger('toggleAnimation', [
+  state('collapsed', style({
+    width: '30px',
+    opacity: '0'
+  })),
+  state('expanded', style({
+    width: '250px',
+    opacity: '1'
+  })),
+  transition('* => collapsed', group([
+    animate('300ms ease-in-out', style({
+      width: '30px'
+    })),
+    animate('300ms ease-in', style({
+      opacity: '0'
+    }))
+  ])),
+  transition('* => expanded', group([
+    animate('300ms ease-out', style({
+      opacity: '1'
+    })),
+    animate('300ms ease-in-out', style({
+      width: '250px'
+    }))
+  ]))
+]);