Merge branch 'accessibility-settings-7.6' into accessibility-settings…

…-7_x

src/app/accessibility/accessibility-settings.service.spec.ts

@@ -368,12 +368,4 @@ describe('accessibilitySettingsService', () => {
     });
   });
 
-  describe('getInputType', () => {
-    it('should correctly return the input type', () => {
-      expect(service.getInputType(AccessibilitySetting.NotificationTimeOut)).toEqual('number');
-      expect(service.getInputType(AccessibilitySetting.LiveRegionTimeOut)).toEqual('number');
-      expect(service.getInputType('unknownValue' as AccessibilitySetting)).toEqual('text');
-    });
-  });
-
 });

src/app/accessibility/accessibility-settings.service.stub.ts

@@ -31,4 +31,10 @@ export class AccessibilitySettingsServiceStub {
   setSettingsInCookie = jasmine.createSpy('setSettingsInCookie');
 
   getInputType = jasmine.createSpy('getInputType').and.returnValue('text');
+
+  convertFormValuesToStoredValues = jasmine.createSpy('convertFormValuesToStoredValues').and.returnValue({});
+
+  convertStoredValuesToFormValues = jasmine.createSpy('convertStoredValuesToFormValues').and.returnValue({});
+
+  getPlaceholder = jasmine.createSpy('getPlaceholder').and.returnValue('placeholder');
 }

src/app/accessibility/accessibility-settings.service.ts

@@ -2,13 +2,14 @@ import { Injectable } from '@angular/core';
 import { Observable, of, switchMap } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { CookieService } from '../core/services/cookie.service';
-import { hasValue, isNotEmpty, isNotEmptyOperator } from '../shared/empty.util';
+import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { AuthService } from '../core/auth/auth.service';
 import { EPerson } from '../core/eperson/models/eperson.model';
 import { EPersonDataService } from '../core/eperson/eperson-data.service';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
 import cloneDeep from 'lodash/cloneDeep';
 import { environment } from '../../environments/environment';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 
 /**
  * Name of the cookie used to store the settings locally
@@ -22,15 +23,27 @@ export const ACCESSIBILITY_SETTINGS_METADATA_KEY = 'dspace.accessibility.setting
 
 /**
  * Enum containing all possible accessibility settings.
- * When adding new settings, the {@link AccessibilitySettingsService#getInputType} method and the i18n keys for the
- * accessibility settings page should be updated.
+ * When adding new settings, make sure to add the new setting to the accessibility-settings component.
+ * The converter methods to convert from stored format to form format (and vice-versa) need to be updated as well.
  */
 export enum AccessibilitySetting {
   NotificationTimeOut = 'notificationTimeOut',
   LiveRegionTimeOut = 'liveRegionTimeOut',
 }
 
-export type AccessibilitySettings = { [key in AccessibilitySetting]?: any };
+/**
+ * Type representing an object that contains accessibility settings values.
+ */
+export type AccessibilitySettings = { [key in AccessibilitySetting]?: string };
+
+/**
+ * The accessibility settings object format used by the accessibility-settings component form.
+ */
+export interface AccessibilitySettingsFormValues {
+  disableNotificationTimeOut: boolean,
+  notificationTimeOut: string,
+  liveRegionTimeOut: string,
+}
 
 /**
  * Service handling the retrieval and configuration of accessibility settings.
@@ -192,8 +205,8 @@ export class AccessibilitySettingsService {
 
     return this.ePersonService.createPatchFromCache(user).pipe(
       take(1),
-      isNotEmptyOperator(),
-      switchMap(operations => this.ePersonService.patch(user, operations)),
+      switchMap(operations =>
+        isNotEmpty(operations) ? this.ePersonService.patch(user, operations) : createSuccessfulRemoteDataObject$({})),
       getFirstCompletedRemoteData(),
       map(rd => rd.hasSucceeded),
     );
@@ -211,17 +224,67 @@ export class AccessibilitySettingsService {
   }
 
   /**
-   * Returns the input type that a form should use for the provided {@link AccessibilitySetting}
+   * Clears all settings in the cookie and attempts to clear settings in metadata.
+   * Emits true if settings in metadata were cleared and false otherwise.
    */
-  getInputType(setting: AccessibilitySetting): string {
+  clearSettings(): Observable<boolean> {
+    this.setSettingsInCookie({});
+    return this.setSettingsInAuthenticatedUserMetadata({});
+  }
+
+  /**
+   * Retrieve the placeholder to be used for the provided AccessibilitySetting.
+   * Returns an empty string when no placeholder is specified for the provided setting.
+   */
+  getPlaceholder(setting: AccessibilitySetting): string {
     switch (setting) {
       case AccessibilitySetting.NotificationTimeOut:
-        return 'number';
+        return millisecondsToSeconds(environment.notifications.timeOut.toString());
       case AccessibilitySetting.LiveRegionTimeOut:
-        return 'number';
+        return millisecondsToSeconds(environment.liveRegion.messageTimeOutDurationMs.toString());
       default:
-        return 'text';
+        return '';
     }
   }
 
+  /**
+   * Convert values in the provided accessibility settings object to values ready to be stored.
+   */
+  convertFormValuesToStoredValues(settings: AccessibilitySettingsFormValues): AccessibilitySettings {
+    return {
+      'notificationTimeOut': settings.disableNotificationTimeOut ? '0'
+        : secondsToMilliseconds(settings.notificationTimeOut),
+      'liveRegionTimeOut': secondsToMilliseconds(settings.liveRegionTimeOut),
+    };
+  }
+
+  /**
+   * Convert values in the provided accessibility settings object to values ready to show in the form.
+   */
+  convertStoredValuesToFormValues(settings: AccessibilitySettings): AccessibilitySettingsFormValues {
+    return {
+      disableNotificationTimeOut: parseFloat(settings.notificationTimeOut) === 0,
+      notificationTimeOut: millisecondsToSeconds(settings.notificationTimeOut),
+      liveRegionTimeOut: millisecondsToSeconds(settings.liveRegionTimeOut),
+    };
+  }
+
+}
+
+function secondsToMilliseconds(secondsStr: string): string {
+  const seconds = parseFloat(secondsStr);
+  if (isNaN(seconds)) {
+    return null;
+  } else {
+    return (seconds * 1000).toString();
+  }
+}
+
+function millisecondsToSeconds(millisecondsStr: string): string {
+  const milliseconds = parseFloat(millisecondsStr);
+  if (isNaN(milliseconds)) {
+    return null;
+  } else {
+    return (milliseconds / 1000).toString();
+  }
 }

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -2,25 +2,87 @@
   <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
 
   <form>
-    <div *ngFor="let setting of accessibilitySettingsOptions" class="form-group row">
-      <label [for]="setting + 'Input'" class="col-sm-2 col-form-label">
-        {{ 'info.accessibility-settings.' + setting + '.label' | translate }}
+    <div class="form-group row">
+      <label [for]="'disableNotificationTimeOutInput'" class="col-sm-2 col-form-label">
+        {{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
       </label>
 
-      <div class="col-sm-10">
-        <input [type]="getInputType(setting)" [id]="setting + 'Input'" class="form-control"
-               [(ngModel)]="formValues[setting]" [ngModelOptions]="{ standalone: true }"
-               [attr.aria-describedby]="setting + 'Hint'">
+      <div class="col-sm-5">
+        <ui-switch [id]="'disableNotificationTimeOutInput'"
+                   [(ngModel)]="formValues.disableNotificationTimeOut"
+                   [ngModelOptions]="{ standalone: true }"
+        ></ui-switch>
+      </div>
+
+      <div class="col-sm-1" *dsContextHelp="{
+            content: 'info.accessibility-settings.disableNotificationTimeOut.hint',
+            id: 'disableNotificationTimeOutHelp',
+            iconPlacement: 'right',
+            tooltipPlacement: 'right'
+          }">
+      </div>
+    </div>
+
+    <div class="form-group row">
+      <label [for]="'notificationTimeOutInput'" class="col-sm-2 col-form-label">
+        {{ 'info.accessibility-settings.notificationTimeOut.label' | translate }}
+      </label>
 
-        <small [id]="setting + 'Hint'" class="form-text text-muted">
-          {{ 'info.accessibility-settings.' + setting + '.hint' | translate }}
-        </small>
+      <div class="col-sm-4">
+        <input [type]="'number'" [id]="'notificationTimeOutInput'" class="form-control"
+               [placeholder]="getPlaceholder(AccessibilitySetting.NotificationTimeOut)"
+               [readOnly]="formValues.disableNotificationTimeOut"
+               [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
+               [attr.aria-describedby]="'notificationTimeOutHint'">
       </div>
+
+      <div class="col-sm-1 col-form-label">
+        {{ 'info.accessibility-settings.notificationTimeOut.unit' | translate }}
+      </div>
+
+      <div class="col-sm-1" *dsContextHelp="{
+            content: 'info.accessibility-settings.notificationTimeOut.hint',
+            id: 'notificationTimeOutHelp',
+            iconPlacement: 'right',
+            tooltipPlacement: 'right'
+          }">
+      </div>
+    </div>
+
+    <div class="form-group row">
+      <label [for]="'liveRegionTimeOutInput'" class="col-sm-2 col-form-label">
+        {{ 'info.accessibility-settings.liveRegionTimeOut.label' | translate }}
+      </label>
+
+      <div class="col-sm-4">
+        <input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
+               [placeholder]="getPlaceholder(AccessibilitySetting.LiveRegionTimeOut)"
+               [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
+               [attr.aria-describedby]="'liveRegionTimeOutHint'">
+      </div>
+
+      <div class="col-sm-1 col-form-label">
+        {{ 'info.accessibility-settings.liveRegionTimeOut.unit' | translate }}
+      </div>
+
+      <div class="col-sm-1" *dsContextHelp="{
+            content: 'info.accessibility-settings.liveRegionTimeOut.hint',
+            id: 'liveRegionTimeOutHelp',
+            iconPlacement: 'right',
+            tooltipPlacement: 'right'
+          }">
+      </div>
+    </div>
+
+    <div role="group">
+      <button type="submit" (click)="saveSettings()" class="btn btn-primary mr-2">
+        {{ 'info.accessibility-settings.submit' | translate }}
+      </button>
+      <button type="reset" (click)="resetSettings()" class="btn btn-warning">
+        {{ 'info.accessibility-settings.reset' | translate }}
+      </button>
     </div>
 
-    <button type="submit" (click)="saveSettings()" class="btn btn-primary">
-      {{ 'info.accessibility-settings.submit' | translate }}
-    </button>
   </form>
 
 </div>

src/app/info/accessibility-settings/accessibility-settings.component.spec.ts

@@ -4,7 +4,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
 import { getAccessibilitySettingsServiceStub } from '../../accessibility/accessibility-settings.service.stub';
-import { AccessibilitySettingsService, AccessibilitySetting } from '../../accessibility/accessibility-settings.service';
+import { AccessibilitySettingsService } from '../../accessibility/accessibility-settings.service';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { AuthService } from '../../core/auth/auth.service';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -47,19 +47,12 @@ describe('AccessibilitySettingsComponent', () => {
   });
 
   describe('On Init', () => {
-    it('should retrieve all accessibility settings options', () => {
-      expect(settingsService.getAllAccessibilitySettingKeys).toHaveBeenCalled();
-    });
-
     it('should retrieve the current settings', () => {
       expect(settingsService.getAll).toHaveBeenCalled();
     });
-  });
 
-  describe('getInputType', () => {
-    it('should retrieve the input type for the setting from the service', () => {
-      component.getInputType(AccessibilitySetting.LiveRegionTimeOut);
-      expect(settingsService.getInputType).toHaveBeenCalledWith(AccessibilitySetting.LiveRegionTimeOut);
+    it('should convert retrieved settings to form format', () => {
+      expect(settingsService.convertStoredValuesToFormValues).toHaveBeenCalled();
     });
   });
 
@@ -70,6 +63,12 @@ describe('AccessibilitySettingsComponent', () => {
       expect(settingsService.setSettings).toHaveBeenCalled();
     });
 
+    it('should convert form settings to stored format', () => {
+      settingsService.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+      component.saveSettings();
+      expect(settingsService.convertFormValuesToStoredValues).toHaveBeenCalled();
+    });
+
     it('should give the user a notification mentioning where the settings were saved', () => {
       settingsService.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
       component.saveSettings();

src/app/info/accessibility-settings/accessibility-settings.component.ts

@@ -3,21 +3,25 @@ import { AuthService } from '../../core/auth/auth.service';
 import {
   AccessibilitySetting,
   AccessibilitySettingsService,
-  AccessibilitySettings
+  AccessibilitySettingsFormValues,
 } from '../../accessibility/accessibility-settings.service';
 import { take } from 'rxjs';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 
+/**
+ * Component providing the form where users can update accessibility settings.
+ */
 @Component({
   selector: 'ds-accessibility-settings',
   templateUrl: './accessibility-settings.component.html'
 })
 export class AccessibilitySettingsComponent implements OnInit {
 
-  protected accessibilitySettingsOptions: AccessibilitySetting[];
+  // Re-export for use in template
+  protected readonly AccessibilitySetting = AccessibilitySetting;
 
-  protected formValues: AccessibilitySettings = { };
+  protected formValues: AccessibilitySettingsFormValues;
 
   constructor(
     protected authService: AuthService,
@@ -28,19 +32,41 @@ export class AccessibilitySettingsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.accessibilitySettingsOptions = this.settingsService.getAllAccessibilitySettingKeys();
-    this.settingsService.getAll().pipe(take(1)).subscribe(currentSettings => {
-      this.formValues = currentSettings;
-    });
+    this.updateFormValues();
   }
 
-  getInputType(setting: AccessibilitySetting): string {
-    return this.settingsService.getInputType(setting);
+  getPlaceholder(setting: AccessibilitySetting): string {
+    return this.settingsService.getPlaceholder(setting);
   }
 
+  /**
+   * Saves the user-configured settings
+   */
   saveSettings() {
-    this.settingsService.setSettings(this.formValues).pipe(take(1)).subscribe(location => {
+    const formValues = this.formValues;
+    const convertedValues = this.settingsService.convertFormValuesToStoredValues(formValues);
+    this.settingsService.setSettings(convertedValues).pipe(take(1)).subscribe(location => {
       this.notificationsService.success(null, this.translateService.instant('info.accessibility-settings.save-notification.' + location));
+      this.updateFormValues();
+    });
+  }
+
+  /**
+   * Updates the form values with the currently stored accessibility settings
+   */
+  updateFormValues() {
+    this.settingsService.getAll().pipe(take(1)).subscribe(storedSettings => {
+      this.formValues = this.settingsService.convertStoredValuesToFormValues(storedSettings);
+    });
+  }
+
+  /**
+   * Resets accessibility settings
+   */
+  resetSettings() {
+    this.settingsService.clearSettings().pipe(take(1)).subscribe(() => {
+      this.notificationsService.success(null, this.translateService.instant('info.accessibility-settings.reset-notification'));
+      this.updateFormValues();
     });
   }
 

src/app/info/info.module.ts

@@ -14,6 +14,7 @@ import { ThemedFeedbackFormComponent } from './feedback/feedback-form/themed-fee
 import { ThemedFeedbackComponent } from './feedback/themed-feedback.component';
 import { FeedbackGuard } from '../core/feedback/feedback.guard';
 import { AccessibilitySettingsComponent } from './accessibility-settings/accessibility-settings.component';
+import { UiSwitchModule } from 'ngx-ui-switch';
 
 
 const DECLARATIONS = [
@@ -35,6 +36,7 @@ const DECLARATIONS = [
     CommonModule,
     SharedModule,
     InfoRoutingModule,
+    UiSwitchModule,
   ],
   declarations: [
     ...DECLARATIONS