Merge pull request #68 from TAMULib/sprint14-staging

Sprint 14 Staging

.github/workflows/npm.yml

@@ -6,7 +6,7 @@ jobs:
 
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-18.04
 
     steps:
     - uses: actions/checkout@v2
@@ -22,7 +22,7 @@ jobs:
         key: ${{ runner.os }}-node_modules-${{ hashFiles('**/package.json') }}
         restore-keys: ${{ runner.os }}-node_modules-
 
-    - name: Install Chrome drivers
+    - name: Install virtual framebuffer
       run: sudo apt-get install xvfb
 
     - name: Install dependencies

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scholars-angular",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Angular Universal client for Scholars Discovery",
   "license": "MIT",
   "repository": {

src/app/+dashboard/home/home.component.scss

@@ -66,6 +66,11 @@
   .carousel small span {
     color: var(--hero-color);
   }
+
+  .carousel small.search-info a,
+  .carousel small.search-info span {
+    color: var(--hero-search-info-color);
+  }
 }
 
 .home-recent,

src/app/+dashboard/home/home.component.ts

@@ -101,7 +101,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   }
 
   public getStyleVariables(hero: Hero): SafeStyle {
-    const variables = `--hero-color:${hero.fontColor};--hero-link-color:${hero.linkColor};--hero-link-hover-color:${hero.linkHoverColor}`;
+    const variables = `--hero-color:${hero.fontColor};--hero-link-color:${hero.linkColor};--hero-link-hover-color:${hero.linkHoverColor};--hero-search-info-color:${hero.searchInfoColor}`;
     return this.sanitizer.bypassSecurityTrustStyle(variables);
   }
 

src/app/core/model/theme/hero.ts

@@ -8,5 +8,6 @@ export interface Hero {
   readonly fontColor: string;
   readonly linkColor: string;
   readonly linkHoverColor: string;
+  readonly searchInfoColor: string;
   readonly interval: number;
 }

src/app/core/service/dialog.service.ts

@@ -5,6 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { FacetEntriesComponent } from '../../shared/dialog/facet-entries/facet-entries.component';
 import { LoginComponent } from '../../shared/dialog/login/login.component';
 import { NotificationComponent } from '../../shared/dialog/notification/notification.component';
+import { SearchTipsComponent } from '../../shared/dialog/search-tips/search-tips.component';
 import { UserEditComponent } from '../../shared/dialog/user-edit/user-edit.component';
 import { RegistrationStep, RegistrationComponent } from '../../shared/dialog/registration/registration.component';
 
@@ -84,6 +85,18 @@ export class DialogService {
     });
   }
 
+  public searchTipsDialog(): fromDialog.OpenDialogAction {
+    return new fromDialog.OpenDialogAction({
+      dialog: {
+        ref: {
+          component: SearchTipsComponent,
+          inputs: { },
+        },
+        options: this.options(this.translate.instant('SHARED.DIALOG.SEARCH_TIPS.ARIA_LABELLED_BY')),
+      },
+    });
+  }
+
   private options(ariaLabelledBy: string, centered = false, backdrop: boolean | 'static' = 'static'): NgbModalOptions {
     return { ariaLabelledBy, centered, backdrop };
   }

src/app/shared/dialog/notification/notification.component.ts

@@ -27,7 +27,7 @@ export class NotificationComponent implements OnInit {
       title: this.translate.get('SHARED.DIALOG.NOTIFICATION.TITLE'),
       close: {
         type: DialogButtonType.OUTLINE_WARNING,
-        label: this.translate.get('SHARED.DIALOG.NOTIFICATION.CLOSE'),
+        label: this.translate.get('SHARED.DIALOG.NOTIFICATION.CANCEL'),
         action: () => this.store.dispatch(new fromDialog.CloseDialogAction()),
         disabled: () => scheduled([false], queueScheduler),
       },

src/app/shared/dialog/search-tips/search-tips.component.html

@@ -0,0 +1,22 @@
+<scholars-dialog [dialog]="dialog">
+  <ul>
+    <li>Searches are not case-sensitive</li>
+    <li>Type keywords using AND or OR logic (AND or OR must be capitalized)
+      <ul>
+        <li>eg., nutrition AND protein</li>
+        <li>eg., nutrition OR protein</li>
+      </ul>
+    </li>
+    <li>Type your phrase with double quotation marks
+      <ul>
+        <li>eg., "glucose absorption"</li>
+        <li>eg., "glucose absorption" AND nutrition</li>
+      </ul>
+    </li>
+    <li>Use wildcard * character to search variations
+      <ul>
+        <li>eg., bio*</li>
+      </ul>
+    </li>
+  </ul>
+</scholars-dialog>

src/app/shared/dialog/search-tips/search-tips.component.spec.ts

@@ -0,0 +1,45 @@
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { StoreModule } from '@ngrx/store';
+
+import { SharedModule } from '../../shared.module';
+
+import { SearchTipsComponent } from './search-tips.component';
+
+import { metaReducers, reducers } from '../../../core/store';
+import { testAppConfig } from '../../../../test.config';
+
+describe('SearchTipsComponent', () => {
+  let component: SearchTipsComponent;
+  let fixture: ComponentFixture<SearchTipsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        SharedModule,
+        StoreModule.forRoot(reducers(testAppConfig), {
+          metaReducers,
+          runtimeChecks: {
+            strictStateImmutability: false,
+            strictActionImmutability: false,
+            strictStateSerializability: false,
+            strictActionSerializability: false,
+          },
+        }),
+        TranslateModule.forRoot(),
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchTipsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/dialog/search-tips/search-tips.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Store } from '@ngrx/store';
+
+import { scheduled } from 'rxjs';
+import { queueScheduler } from 'rxjs';
+
+import { AppState } from '../../../core/store';
+import { DialogButtonType, DialogControl } from '../../../core/model/dialog';
+
+import * as fromDialog from '../../../core/store/dialog/dialog.actions';
+
+@Component({
+  selector: 'scholars-search-tips',
+  templateUrl: './search-tips.component.html',
+  styleUrls: ['./search-tips.component.scss'],
+})
+export class SearchTipsComponent implements OnInit {
+
+  public dialog: DialogControl;
+
+  constructor(private translate: TranslateService, private store: Store<AppState>) {}
+
+  ngOnInit() {
+    this.dialog = {
+      title: this.translate.get('SHARED.DIALOG.SEARCH_TIPS.TITLE'),
+      close: {
+        type: DialogButtonType.OUTLINE_INFO,
+        label: this.translate.get('SHARED.DIALOG.SEARCH_TIPS.CANCEL'),
+        action: () => this.store.dispatch(new fromDialog.CloseDialogAction()),
+        disabled: () => scheduled([false], queueScheduler),
+      },
+    };
+  }
+}

src/app/shared/search-box/search-box.component.html

@@ -30,11 +30,21 @@
       </ng-template>
 
       <ng-template #helpLinks>
-        <small class="d-block text-muted text-right">
+        <small *ngIf="isServerRendered()" class="d-block text-right search-info">
+          <a href="https://scholars.library.tamu.edu/about_scholars/#searchTips">
+            <i class="fa fa-info-circle"></i>
+            {{ 'SHARED.SEARCH_BOX.SEARCH_TIPS' | translate }}
+          </a>
+          <span> | </span>
           <a [routerLink]="getDiscoveryRouterLink()" [queryParams]="getDefaultDiscoveryQueryParams()">{{ 'SHARED.SEARCH_BOX.ADVANCED_SEARCH' | translate }}</a>
+        </small>
+        <small *ngIf="isBrowserRendered()" class="d-block text-right search-info">
+          <span (click)="openSearchTips()" class="open-search-tips link">
+            <i class="fa fa-info-circle"></i>
+            {{ 'SHARED.SEARCH_BOX.SEARCH_TIPS' | translate }}
+          </span>
           <span> | </span>
-          <!-- <a [routerLink]="['/about']" fragment="searchTips">{{ 'SHARED.SEARCH_BOX.SEARCH_TIPS' | translate }}</a> -->
-          <a href="https://scholars.library.tamu.edu/about_scholars/#searchTips">{{ 'SHARED.SEARCH_BOX.SEARCH_TIPS' | translate }}</a>
+          <a [routerLink]="getDiscoveryRouterLink()" [queryParams]="getDefaultDiscoveryQueryParams()">{{ 'SHARED.SEARCH_BOX.ADVANCED_SEARCH' | translate }}</a>
         </small>
       </ng-template>
 

src/app/shared/search-box/search-box.component.scss

@@ -36,5 +36,8 @@
       opacity: 0;
       margin-top: -2px;
     }
+    .open-search-tips:hover {
+      text-decoration: underline;
+    }
   }
-}
+}

src/app/shared/search-box/search-box.component.ts

@@ -10,6 +10,7 @@ import { skipWhile, debounceTime, distinctUntilChanged, take, mergeMap } from 'r
 
 import { AppState } from '../../core/store';
 import { DiscoveryView, Facet, Filter } from '../../core/model/view';
+import { DialogService } from '../../core/service/dialog.service';
 
 import { selectActiveThemeOrganization } from '../../core/store/theme';
 import { selectRouterSearchQuery, selectRouterQueryParams } from '../../core/store/router';
@@ -60,6 +61,7 @@ export class SearchBoxComponent implements OnInit, OnDestroy {
   constructor(
     @Inject(APP_BASE_HREF) private baseHref: string,
     @Inject(PLATFORM_ID) private platformId: string,
+    private dialog: DialogService,
     private formBuilder: FormBuilder,
     private store: Store<AppState>,
     private router: Router
@@ -148,6 +150,10 @@ export class SearchBoxComponent implements OnInit, OnDestroy {
     });
   }
 
+  public openSearchTips(): void {
+    this.store.dispatch(this.dialog.searchTipsDialog());
+  }
+
   public getAction(): string {
     return `${this.baseHref}discovery/${this.view.name}`;
   }

src/app/shared/shared.module.ts

@@ -13,6 +13,7 @@ import { ListViewComponent } from './list-view/list-view.component';
 import { LoginComponent } from './dialog/login/login.component';
 import { NavigationComponent } from './navigation/navigation.component';
 import { NotificationComponent } from './dialog/notification/notification.component';
+import { SearchTipsComponent } from './dialog/search-tips/search-tips.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { RecentCarouselComponent } from './recent-carousel/recent-carousel.component';
 import { ResultViewComponent } from './result-view/result-view.component';
@@ -59,6 +60,7 @@ const COMPONENTS = [
   RegistrationComponent,
   ResultViewComponent,
   SearchBoxComponent,
+  SearchTipsComponent,
   SidebarComponent,
   StatsBoxComponent,
   SustainableDevelopmentGoalsComponent,

src/assets/i18n/en.json

@@ -134,6 +134,11 @@
         "TITLE": "Notification",
         "CANCEL": "Close"
       },
+      "SEARCH_TIPS": {
+        "ARIA_LABELLED_BY": "Search Tips dialog",
+        "TITLE": "Search Tips",
+        "CANCEL": "Close"
+      },
       "VALIDATION": {
         "REQUIRED": "{{field}} is required",
         "EMAIL": "{{field}} must be a valid email",

src/environments/environment.prod.ts

@@ -5,7 +5,7 @@ export const environment = {
   stompDebug: false,
   formalize: {
     otherUniversity: 'ExternalOrganization',
-    GreyLiterature: 'InstitutionalRepositoryDocument',
+    GreyLiterature: 'RepositoryDocuments / Preprints',
     Webpage: 'InternetPublication',
     ERO_0000071: 'Software',
     selectedPublicationTag: 'UN SDG',

src/environments/environment.ts

@@ -9,7 +9,7 @@ export const environment = {
   stompDebug: false,
   formalize: {
     otherUniversity: 'ExternalOrganization',
-    GreyLiterature: 'InstitutionalRepositoryDocument',
+    GreyLiterature: 'RepositoryDocuments / Preprints',
     Webpage: 'InternetPublication',
     ERO_0000071: 'Software',
     selectedPublicationTag: 'UN SDG',

src/styles.scss

@@ -29,6 +29,8 @@ body {
   a:hover {
     color: var(--link-color-hover);
   }
+
+  padding-right: 0px !important;
 }
 
 .bs-popover-bottom > .arrow::after,

src/styles/_variables.scss

@@ -56,6 +56,7 @@ $scholars-theme: map-merge(
     "hero-color": #f3f3f3,
     "hero-link-color": #65a6d1,
     "hero-link-hover-color": #ffc222,
+    "hero-search-info-color": #fce300,
 
     "sidebar-button-color": #e5e5e5,
     "sidebar-button-background-color": #500000,