fix(admin-ui): Fix regression from v1.1.4 which broke Admin UI

Fixes #1045

packages/admin-ui/src/lib/core/src/app.component.ts

@@ -1,10 +1,10 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, HostBinding, Inject, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, Inject, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { filter, map, switchMap } from 'rxjs/operators';
 
 import { DataService } from './data/providers/data.service';
+import { ServerConfigService } from './data/server-config';
 import { LocalStorageService } from './providers/local-storage/local-storage.service';
 
 @Component({
@@ -18,6 +18,7 @@ export class AppComponent implements OnInit {
 
     constructor(
         private dataService: DataService,
+        private serverConfigService: ServerConfigService,
         private localStorageService: LocalStorageService,
         @Inject(DOCUMENT) private document?: any,
     ) {
@@ -36,11 +37,30 @@ export class AppComponent implements OnInit {
                 this._document?.body.setAttribute('data-theme', theme);
             });
 
+        // Once logged in, keep the localStorage "contentLanguageCode" in sync with the
+        // uiState. Also perform a check to ensure that the current contentLanguage is
+        // one of the availableLanguages per GlobalSettings.
         this.dataService.client
-            .uiState()
-            .mapStream(data => data.uiState.contentLanguage)
-            .subscribe(code => {
-                this.localStorageService.set('contentLanguageCode', code);
+            .userStatus()
+            .mapStream(({ userStatus }) => userStatus.isLoggedIn)
+            .pipe(
+                filter(loggedIn => loggedIn === true),
+                switchMap(() => {
+                    return this.dataService.client.uiState().mapStream(data => data.uiState.contentLanguage);
+                }),
+                switchMap(contentLang => {
+                    return this.serverConfigService
+                        .getAvailableLanguages()
+                        .pipe(map(available => [contentLang, available] as const));
+                }),
+            )
+            .subscribe({
+                next: ([contentLanguage, availableLanguages]) => {
+                    this.localStorageService.set('contentLanguageCode', contentLanguage);
+                    if (availableLanguages.length && !availableLanguages.includes(contentLanguage)) {
+                        this.dataService.client.setContentLanguage(availableLanguages[0]).subscribe();
+                    }
+                },
             });
     }
 }

packages/admin-ui/src/lib/core/src/data/data.module.ts

@@ -8,7 +8,6 @@ import { createUploadLink } from 'apollo-upload-client';
 
 import { getAppConfig } from '../app.config';
 import { introspectionResult } from '../common/introspection-result-wrapper';
-import { getDefaultUiLanguage } from '../common/utilities/get-default-ui-language';
 import { LocalStorageService } from '../providers/local-storage/local-storage.service';
 
 import { CheckJobsLink } from './check-jobs-link';
@@ -80,29 +79,6 @@ export function createApollo(
     };
 }
 
-/**
- * On bootstrap, this function will fetch the available languages from the GlobalSettings and compare it
- * to the currently-configured content language to ensure that the content language is actually one
- * of the available languages.
- */
-export function initContentLanguage(
-    serverConfigService: ServerConfigService,
-    localStorageService: LocalStorageService,
-    dataService: DataService,
-): () => Promise<any> {
-    // Why store in a intermediate variable? https://github.com/angular/angular/issues/23629
-    const result = async () => {
-        const availableLanguages = await serverConfigService.getAvailableLanguages().toPromise();
-        const contentLang = localStorageService.get('contentLanguageCode') || getDefaultUiLanguage();
-        if (availableLanguages.length && !availableLanguages.includes(contentLang)) {
-            dataService.client.setContentLanguage(availableLanguages[0]).subscribe(() => {
-                localStorageService.set('contentLanguageCode', availableLanguages[0]);
-            });
-        }
-    };
-    return result;
-}
-
 /**
  * The DataModule is responsible for all API calls *and* serves as the source of truth for global app
  * state via the apollo-link-state package.
@@ -128,12 +104,6 @@ export function initContentLanguage(
             useFactory: initializeServerConfigService,
             deps: [ServerConfigService],
         },
-        {
-            provide: APP_INITIALIZER,
-            multi: true,
-            useFactory: initContentLanguage,
-            deps: [ServerConfigService, LocalStorageService, DataService],
-        },
     ],
 })
 export class DataModule {}