Merged in feature/SHIBUI-814 (pull request #198)

SHIBUI-814 Integrated with rest endpoint for messages

Approved-by: Ryan Mathis <rmathis@unicon.net>

backend/build.gradle

@@ -100,6 +100,7 @@ dependencies {
 
     //Swagger
     compile 'io.springfox:springfox-swagger2:2.9.2'
+    compile 'io.springfox:springfox-swagger-ui:2.9.2'
 
     testCompile "org.springframework.boot:spring-boot-starter-test"
     testCompile "org.spockframework:spock-core:1.1-groovy-2.4"

backend/src/main/java/edu/internet2/tier/shibboleth/admin/ui/controller/InternationalizationMessagesController.java

@@ -7,7 +7,13 @@
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 
+import java.util.Collections;
+import java.util.HashSet;
 import java.util.Locale;
+import java.util.MissingResourceException;
+import java.util.ResourceBundle;
+import java.util.Set;
+import java.util.stream.Collectors;
 
 /**
  * @author Bill Smith (wsmith@unicon.net)
@@ -22,4 +28,33 @@ public class InternationalizationMessagesController {
     public ResponseEntity<?> getAll(Locale locale) {
         return ResponseEntity.ok(messageSource.getMessagesMap(locale));
     }
+
+    @GetMapping(value = "/available")
+    public ResponseEntity<?> getAvailableLocales() {
+        Set<ResourceBundle> supportedLocaleResourceBundles = getResourceBundles();
+        Set<Locale> supportedLocales = supportedLocaleResourceBundles
+                .stream()
+                .map(ResourceBundle::getLocale)
+                .collect(Collectors.toSet());
+        return ResponseEntity.ok(supportedLocales);
+    }
+
+    /**
+     * Get all available resource bundles in i18n/messages that matches a locale supported by this JRE.
+     *
+     * @return a set of resource bundles for supported locales for this system
+     */
+    private Set<ResourceBundle> getResourceBundles() {
+        Set<ResourceBundle> resourceBundles = new HashSet<>();
+
+        for (Locale locale : Locale.getAvailableLocales()) {
+            try {
+                resourceBundles.add(ResourceBundle.getBundle("i18n/messages", locale));
+            } catch (MissingResourceException e) {
+                // do nothing
+            }
+        }
+
+        return Collections.unmodifiableSet(resourceBundles);
+    }
 }

backend/src/test/groovy/edu/internet2/tier/shibboleth/admin/ui/controller/InternationalizationMessagesControllerTests.groovy

@@ -61,6 +61,11 @@ class InternationalizationMessagesControllerTests extends Specification {
             '   "some.test.message": "Je ne sais pas Francais."' +
             '}'
 
+    def expectedDefaultResult =
+            '{' +
+            '   "some.test.message": "This is the default message."' +
+            '}'
+
     def "GET messages with no header or \"lang\" param defaults to returning english messages"() {
         when:
         def result = mockMvc.perform(
@@ -108,6 +113,6 @@ class InternationalizationMessagesControllerTests extends Specification {
                         .header("Accept-Language", "es"))
 
         then:
-        result.andExpect(content().json(expectedEnglishResult))
+        result.andExpect(content().json(expectedDefaultResult))
     }
 }

ui/angular.json

@@ -91,6 +91,10 @@
                 "input": "src",
                 "output": "/"
               }
+            ],
+            "codeCoverageExclude": [
+              "src/polyfills.ts",
+              "**/*.stub.ts"
             ]
           }
         },

ui/src/app/app.brand.ts

@@ -3,42 +3,43 @@ import { Brand } from './core/model/brand';
 
 export const brand: Brand = {
     header: {
-        title: 'Source Management'
+        title: 'brand.header.title'
     },
     logo: {
         default: '/assets/shibboleth_logowordmark_color.png',
         small: '/assets/shibboleth_icon_color_130x130.png',
         large: '/assets/shibboleth_logowordmark_color.png',
-        alt: 'Shibboleth Logo - Click to be directed to www.shibboleth.net',
+        alt: 'brand.logo-alt',
         link: {
-            label: 'Shibboleth',
-            url: 'https://www.shibboleth.net/'
+            label: 'brand.logo-link-label', // shibboleth
+            url: 'https://www.shibboleth.net/',
+            description: 'brand.logo.link-description'
         }
     },
     footer: {
         links: [
             {
-                label: 'Home Page',
+                label: 'brand.footer.links-label-1',
                 url: 'https://www.shibboleth.net/',
-                description: 'Shibboleth.net open-source community home page'
+                description: 'brand.footer.links-desc-1'
             },
             {
-                label: 'Wiki',
+                label: 'brand.footer.links-label-2',
                 url: 'https://wiki.shibboleth.net/',
-                description: 'Shibboleth.net open-source community wiki'
+                description: 'brand.footer.links-desc-2'
             },
             {
-                label: 'Issue Tracker',
+                label: 'brand.footer.links-label-3',
                 url: 'https://issues.shibboleth.net/',
-                description: 'Shibboleth.net open-source community issue tracker'
+                description: 'brand.footer.links-desc-3'
             },
             {
-                label: 'Mailing List',
+                label: 'brand.footer.links-label-4',
                 url: 'https://www.shibboleth.net/community/lists/',
-                description: 'Shibboleth.net open-source community mailing list'
+                description: 'brand.footer.links-desc-4'
             }
         ],
-        text: 'Links to Shibboleth resources:'
+        text: 'brand.footer.text'
     },
     ...customBrand
 };

ui/src/app/app.component.html

@@ -1,10 +1,9 @@
-<!--The content below is only a placeholder and can be replaced.-->
 <nav class="navbar navbar-expand-md fixed-top">
-    <a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description">
+    <a class="navbar-brand" [href]="brand.logo.link.url" target="_blank" [title]="brand.logo.link.description | translate">
         <img [src]="brand.logo.small" width="30" height="30" class="d-inline-block align-top" [alt]="brand.logo.alt">
-        <span class="d-lg-inline d-none">{{ brand.logo.link.label }}</span>
+        <span class="d-lg-inline d-none" [translate]="brand.logo.link.label">{{ brand.logo.link.label }}</span>
     </a>
-    <span class="navbar-text" i18n="@@label--app">{{ brand.header.title }}</span>
+    <span class="navbar-text" [translate]="brand.header.title">{{ brand.header.title }}</span>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
             aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -20,39 +19,39 @@
                     aria-expanded="false"
                     ngbDropdownToggle>
                     <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i>
-                    <ng-container i18n="@@action--add-new">Add New</ng-container>
+                    <translate-i18n key="action.add-new">Add New</translate-i18n>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="addNewDropdown">
                     <a class="nav-link"
                         routerLink="/metadata/resolver/new"
                         routerLinkActive="active"
-                        aria-label="Add a new metadata provider"
+                        [attr.aria-label]="'action.add-new-source' | translate"
                         role="button">
                         <i class="fa fa-cube fa-fw" aria-hidden="true"></i>
                         &nbsp;
-                        <ng-container i18n="@@action--add-source">Metadata Source</ng-container>
+                        <translate-i18n key="label.metadata-source">Metadata Source</translate-i18n>
                     </a>
                     <a class="nav-link"
                         routerLink="/metadata/provider/wizard"
                         routerLinkActive="active"
-                        aria-label="Add a new metadata resolver"
+                        [attr.aria-label]="'action.add-new-provider' | translate"
                         role="button">
                         <i class="fa fa-cubes fa-fw" aria-hidden="true"></i>
                         &nbsp;
-                        <ng-container i18n="@@action--add-filter">Metadata Provider</ng-container>
+                        <translate-i18n key="label.metadata-provider">Metadata Provider</translate-i18n>
                     </a>
                 </div>
             </li>
             <li class="nav-item">
                 <a class="nav-link" routerLink="/metadata" routerLinkActive="active" aria-label="Metadata Dashboard">
                     <i class="fa fa-th fa-fw" aria-hidden="true"></i>
-                    <ng-container i18n="@@action--dashboard">Dashboard</ng-container>
+                    <translate-i18n key="action.dashboard">Dashboard</translate-i18n>
                 </a>
             </li>
             <li>
-                <a class="nav-link" href="/logout" target="_self" aria-label="Log out of Shibboleth UI">
+                <a class="nav-link" href="/logout" target="_self" [attr.aria-label]="'action.logout' | translate">
                     <i class="fa fa-sign-out fa-fw" aria-hidden="true"></i>
-                    <ng-container i18n="@@action--logout">Logout</ng-container>
+                    <translate-i18n key="action.logout">Logout</translate-i18n>
                 </a>
             </li>
         </ul>
@@ -66,10 +65,10 @@
     <div class="row">
         <div class="col-md-8 copyright">
             <ul class="list-inline">
-                <li class="list-inline-item">{{ brand.footer.text }}</li>
-                <li class="list-inline-item" *ngFor="let link of brand.footer.links">
+                <li class="list-inline-item" [translate]="brand.footer.text">{{ brand.footer.text }}</li>
+                <li class="list-inline-item" *ngFor="let link of brand.footer.links; let i = index;">
                     <a [href]="link.url" target="_blank" [attr.aria-label]="link.description" [title]="link.description">
-                        {{ link.label }}
+                        <translate-i18n [key]="link.label">{{ link.label }}</translate-i18n>
                     </a>
                 </li>
             </ul>
@@ -78,7 +77,7 @@
                 {{ formatted$ | async }}
                 &nbsp;|&nbsp;
                 </ng-container>
-                <ng-container i18n="@@label--copyright">Copyright</ng-container> &copy; {{ today | date:'yyyy' }} Internet2
+                <translate-i18n key="brand.footer.copyright" [params]="{ year: year }">Copyright &copy; Internet2</translate-i18n>
             </p>
         </div>
         <div class="col-md-4 logo">

ui/src/app/app.component.spec.ts

@@ -4,11 +4,11 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
 import { AppComponent } from './app.component';
 
-import { User } from './core/model/user';
 import * as fromRoot from './core/reducer';
-import * as fromVersion from './core/reducer/version.reducer';
 import { NotificationModule } from './notification/notification.module';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { MockTranslatePipe, MockI18nService, MockI18nModule } from '../testing/i18n.stub';
+import { I18nService } from './i18n/service/i18n.service';
 
 @Component({
     template: `
@@ -29,13 +29,17 @@ describe('AppComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            providers: [
+                {provide: I18nService, useClass: MockI18nService }
+            ],
             imports: [
                 NgbDropdownModule.forRoot(),
                 RouterTestingModule,
                 StoreModule.forRoot({
                     core: combineReducers(fromRoot.reducers)
                 }),
-                NotificationModule
+                NotificationModule,
+                MockI18nModule
             ],
             declarations: [
                 AppComponent,
@@ -54,7 +58,7 @@ describe('AppComponent', () => {
 
     it('should create the app', async(() => {
         expect(app).toBeTruthy();
-        expect(store.dispatch).toHaveBeenCalledTimes(1);
+        expect(store.dispatch).toHaveBeenCalledTimes(2);
     }));
 
     it(`should have as title 'Shib-UI'`, async(() => {

ui/src/app/app.component.ts

@@ -7,9 +7,11 @@ import { Store } from '@ngrx/store';
 import * as fromRoot from './core/reducer';
 import { VersionInfo } from './core/model/version';
 import { VersionInfoLoadRequestAction } from './core/action/version.action';
-
+import { I18nService } from './i18n/service/i18n.service';
+import { SetLocale } from './i18n/action/message.action';
 import { brand } from './app.brand';
 import { Brand } from './core/model/brand';
+
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
@@ -27,12 +29,16 @@ export class AppComponent implements OnInit {
 
     formatter = v => v && v.build ? `${v.build.version}-${v.git.commit.id}` : '';
 
-    constructor(private store: Store<fromRoot.State>) {
+    constructor(
+        private store: Store<fromRoot.State>,
+        private i18nService: I18nService
+    ) {
         this.version$ = this.store.select(fromRoot.getVersionInfo);
         this.formatted$ = this.version$.pipe(map(this.formatter));
     }
 
     ngOnInit(): void {
         this.store.dispatch(new VersionInfoLoadRequestAction());
+        this.store.dispatch(new SetLocale(this.i18nService.getCurrentLocale()));
     }
 }

ui/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, LOCALE_ID } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -24,6 +24,8 @@ import { SharedModule } from './shared/shared.module';
 import { WizardModule } from './wizard/wizard.module';
 import { FormModule } from './schema-form/schema-form.module';
 import { environment } from '../environments/environment.prod';
+import { getCurrentLocale } from './shared/util';
+import { I18nModule } from './i18n/i18n.module';
 
 @NgModule({
     declarations: [
@@ -51,9 +53,12 @@ import { environment } from '../environments/environment.prod';
         HttpClientModule,
         ContentionModule,
         SharedModule,
+        I18nModule.forRoot(),
+        I18nModule,
         AppRoutingModule
     ],
     providers: [
+        { provide: LOCALE_ID, useValue: getCurrentLocale(null) },
         NavigatorService,
         { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer },
         {

ui/src/app/contention/component/change-item.component.html

@@ -2,7 +2,7 @@
     <h5 class="mb-1"><i18n-text [key]="item.label"></i18n-text></h5>
     <small *ngIf="item.conflict">
         <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
-        <span class="sr-only">Conflict</span>
+        <span class="sr-only" translate="message.conflict">Conflict</span>
     </small>
 </div>
 <ng-container [ngSwitch]="type">

ui/src/app/contention/component/contention-dialog.component.html

@@ -1,16 +1,17 @@
-<div i18n-aria-label="@@message--data-version-contention" aria-label="Data Version Contention" role="region" tabindex="0">
+<div i18n-aria-label="@@message.data-version-contention" aria-label="Data Version Contention" role="region" tabindex="0">
     <div class="modal-header">
-        <h4 class="modal-title" i18n="@@message--data-version-contention">Data Version Contention</h4>
+        <h4 class="modal-title" translate="message.data-version-contention">Data Version Contention</h4>
     </div>
     <div class="modal-body">
         <div class="d-flex w-100 justify-content-between">
             <i class="fa fa-fw fa-exclamation-triangle fa-3x text-warning"></i>
-            <p class="ml-2" i18n="@message--contention-new-version">A newer version of this metadata source has been saved. Below are a list of changes. You can use your changes or their changes.</p>
+            <p class="ml-2" translate="message.contention-new-version">A newer version of this metadata source has been saved. Below are a list of changes. You can use your changes or their
+            changes.</p>
         </div>
         <div class="row">
             <div class="col col-6">
                 <div class="card">
-                    <div class="card-header bg-info text-white">
+                    <div class="card-header bg-info text-white" translate="label.my-changes">
                         My Changes
                     </div>
                     <div class="list-group list-group-flush">
@@ -20,7 +21,7 @@ <h4 class="modal-title" i18n="@@message--data-version-contention">Data Version C
             </div>
             <div class="col col-6">
                 <div class="card">
-                    <div class="card-header bg-danger text-white">
+                    <div class="card-header bg-danger text-white" translate="label.their-changes">
                         Their Changes
                     </div>
                     <div class="list-group list-group-flush">
@@ -32,12 +33,12 @@ <h4 class="modal-title" i18n="@@message--data-version-contention">Data Version C
     </div>
     <div class="modal-footer">
         <button
-            i18n="@@action--use-mine"
+            translate="action.use-mine"
             class="btn btn-info"
             (click)="activeModal.close(resolutionObj)"
             [disabled]="!resolutionObj">Use My Changes</button>
         <button
-            i18n="@@action--use-theirs"
+            translate="action.use-theirs"
             class="btn btn-danger"
             (click)="activeModal.dismiss(rejectionObj)"
             [disabled]="!rejectionObj">Use Their Changes</button>