RED-10301 - Use RM/DM UI depending on application type of tenant

apps/red-ui/src/app/app.component.ts

@@ -4,21 +4,21 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { getConfig } from '@iqser/common-ui';
 import { AppConfig } from '@red/domain';
 import { NavigationEnd, Router } from '@angular/router';
-import { filter, map, switchMap, take } from 'rxjs/operators';
+import { filter, map, switchMap, take, tap } from 'rxjs/operators';
+import { APP_TYPE_PATHS } from '@common-ui/utils/constants';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { TenantsService } from '@common-ui/tenants';
 
-function loadCustomTheme() {
+export function loadCustomTheme(cssFileName: string) {
-    const cssFileName = getConfig<AppConfig>().THEME;
+    const head = document.getElementsByTagName('head')[0];
-
+    const link = document.createElement('link');
-    if (cssFileName) {
+    link.id = cssFileName;
-        const head = document.getElementsByTagName('head')[0];
+    link.rel = 'stylesheet';
-        const link = document.createElement('link');
+    link.type = 'text/css';
-        link.id = cssFileName;
+    link.href = 'assets/styles/themes/' + cssFileName + '.css';
-        link.rel = 'stylesheet';
+    link.media = 'all';
-        link.type = 'text/css';
+    head.appendChild(link);
-        link.href = 'assets/styles/themes/' + cssFileName + '.css';
-        link.media = 'all';
-        head.appendChild(link);
-    }
 }
 
 @Component({
@@ -34,9 +34,12 @@ export class AppComponent {
         userPreferenceService: UserPreferenceService,
         renderer: Renderer2,
         private readonly _router: Router,
+        private readonly _iconRegistry: MatIconRegistry,
+        private readonly _sanitizer: DomSanitizer,
+        private readonly _tenantsService: TenantsService,
     ) {
+        const config = getConfig<AppConfig>();
         renderer.addClass(document.body, userPreferenceService.getTheme());
-        loadCustomTheme();
 
         const removeQueryParams = _router.events.pipe(
             filter((event): event is NavigationEnd => event instanceof NavigationEnd),
@@ -47,9 +50,25 @@ export class AppComponent {
         );
         removeQueryParams.subscribe();
 
-        if (getConfig().IS_DOCUMINE) {
+        this._tenantsService
-            document.getElementById('favicon').setAttribute('href', 'assets/icons/documine-logo.ico');
+            .waitForSettingTenant()
-        }
+            .pipe(
+                tap(() => {
+                    const isDocumine = this._tenantsService.activeTenant.documine;
+                    const logo = isDocumine ? 'documine' : 'redaction';
+                    _iconRegistry.addSvgIconInNamespace(
+                        'iqser',
+                        'logo',
+                        _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/general/${logo}-logo.svg`),
+                    );
+                    if (isDocumine) {
+                        document.getElementById('favicon').setAttribute('href', 'assets/icons/documine-logo.ico');
+                    }
+                    loadCustomTheme(isDocumine ? APP_TYPE_PATHS.SCM : APP_TYPE_PATHS.REDACT);
+                }),
+                take(1),
+            )
+            .subscribe();
     }
 
     #removeKeycloakQueryParams() {

apps/red-ui/src/app/app.module.ts

@@ -117,7 +117,7 @@ export const appModuleFactory = (config: AppConfig) => {
                 resetTimeoutOnDuplicate: true,
             }),
             TenantsModule.forRoot(),
-            IqserTranslateModule.forRoot({ pathPrefix: config.BASE_TRANSLATIONS_DIRECTORY || '/assets/i18n/redact/' }),
+            IqserTranslateModule.forRoot({ pathPrefix: config.BASE_TRANSLATIONS_DIRECTORY }),
             IqserLoadingModule.forRoot(),
             ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
             LoggerModule.forRoot(undefined, {

apps/red-ui/src/app/modules/icons/icons.module.ts

@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { getConfig } from '@common-ui/services';
+import { LANDING_PAGE_THEMES } from '@common-ui/utils/constants';
+import { TenantsService } from '@common-ui/tenants';
 
 @NgModule({
     imports: [CommonModule, MatIconModule],
@@ -15,6 +17,7 @@ export class IconsModule {
     constructor(
         private readonly _iconRegistry: MatIconRegistry,
         private readonly _sanitizer: DomSanitizer,
+        private readonly _tenantsService: TenantsService,
     ) {
         const icons = [
             'ai',
@@ -85,6 +88,9 @@ export class IconsModule {
             'user',
             'warning',
             'pdftron-action-add-redaction',
+            'knecon-logo',
+            'redaction-logo',
+            'documine-logo',
         ];
 
         for (const icon of icons) {
@@ -95,12 +101,12 @@ export class IconsModule {
             );
         }
 
-        const logo = this.config.IS_DOCUMINE ? 'documine-logo' : 'logo';
+        const logo =
-
+            this.config.LANDING_PAGE_THEME === LANDING_PAGE_THEMES.MIXED ? 'knecon' : this.config.IS_DOCUMINE ? 'documine' : 'redaction';
         _iconRegistry.addSvgIconInNamespace(
             'iqser',
             'logo',
-            _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/general/${logo}.svg`),
+            _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/general/${logo}-logo.svg`),
         );
     }
 }

apps/red-ui/src/app/utils/main.guard.ts

@@ -60,7 +60,9 @@ export function mainGuard(): AsyncGuard {
         }
 
         loadingService.stop();
-        tenantsService.storeTenant();
+
+        await tenantsService.storeTenant();
+        configService.updateIsDocumine(tenantsService.activeTenant);
 
         logger.info('[ROUTES] Main guard finished!');
 

apps/red-ui/src/assets/config/config.json

@@ -1,9 +1,8 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dan1.iqser.cloud",
+  "API_URL": "https://dan2.iqser.cloud",
-  "APP_NAME": "RedactManager",
+  "APP_NAME": "Knecon Cloud",
-  "IS_DOCUMINE": false,
   "RULE_EDITOR_DEV_ONLY": false,
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -13,15 +12,15 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dan1.iqser.cloud/auth",
+  "OAUTH_URL": "https://dan2.iqser.cloud/auth",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "redact",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/",
   "AVAILABLE_NOTIFICATIONS_DAYS": 30,
   "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
   "NOTIFICATIONS_THRESHOLD": 1000,
-  "WATERMARK_PREVIEW_PAPER_FORMAT": "a4"
+  "WATERMARK_PREVIEW_PAPER_FORMAT": "a4",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/",
+  "LANDING_PAGE_THEME": "mixed"
 }

apps/red-ui/src/assets/icons/general/knecon-logo.svg

@@ -0,0 +1 @@
+<svg id="ab727bb5-bfa8-48f3-98cb-a1a7576570a7" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 280"><defs><style>.f0575b6c-6418-41d5-a2bf-731ad5aa403e{fill:#d2302c;}</style></defs><path class="f0575b6c-6418-41d5-a2bf-731ad5aa403e" d="M0,0V280H280V0ZM220.11072,209.75043a.24953.24953,0,0,1-.24964.24957l-79.56158-.011a.74925.74925,0,0,1-.52991-.21954L80,150v59.75043A.2496.2496,0,0,1,79.75043,210H60.24957A.2496.2496,0,0,1,60,209.75043V70.24957A.2496.2496,0,0,1,60.24957,70H79.75043A.2496.2496,0,0,1,80,70.24957V130l59.78046-59.78046a.7496.7496,0,0,1,.53-.21954h79.43994A.2496.2496,0,0,1,220,70.24957v19.5008A.24961.24961,0,0,1,219.75043,90l-71.35089-.004a.24958.24958,0,0,0-.17658.07318L98.25555,140.10248,148.128,189.92694a.24953.24953,0,0,0,.17639.07306h71.55677a.2496.2496,0,0,1,.24957.24957ZM220,130.25v19.5a.25.25,0,0,1-.25.25h-79.5a.25.25,0,0,1-.25-.25v-19.5a.25.25,0,0,1,.25-.25h79.5A.25.25,0,0,1,220,130.25Z"/></svg>

apps/red-ui/src/main.ts

@@ -5,6 +5,7 @@ import { bool } from '@common-ui/utils';
 import { environment } from '@environments/environment';
 import { AppConfig } from '@red/domain';
 import { appModuleFactory } from './app/app.module';
+import { LANDING_PAGE_THEMES, THEME_DIRECTORIES } from '@common-ui/utils/constants';
 
 if (environment.production) {
     enableProdMode();
@@ -13,12 +14,15 @@ if (environment.production) {
 // https://github.com/angular/angular/issues/11195#issuecomment-248020928
 async function bootstrap(appConfig: AppConfig, version: { FRONTEND_APP_VERSION: string }) {
     const ruleEditorDevOnly = appConfig.RULE_EDITOR_DEV_ONLY as unknown as string | boolean;
+    const isDocumine = bool(appConfig.LANDING_PAGE_THEME !== LANDING_PAGE_THEMES.REDACT_MANAGER);
     const config = {
         ...appConfig,
-        IS_DOCUMINE: bool(appConfig.IS_DOCUMINE),
+        IS_DOCUMINE: isDocumine,
+        THEME: !isDocumine ? THEME_DIRECTORIES.REDACT : THEME_DIRECTORIES.SCM,
         RULE_EDITOR_DEV_ONLY:
             typeof ruleEditorDevOnly === 'string' ? ruleEditorDevOnly.toLowerCase() !== 'false' : ruleEditorDevOnly !== false,
         FRONTEND_APP_VERSION: version.FRONTEND_APP_VERSION,
+        APP_NAME: appConfig.LANDING_PAGE_THEME === LANDING_PAGE_THEMES.MIXED ? 'Knecon Cloud' : isDocumine ? 'DocuMine' : 'RedactManager',
     } as AppConfig;
     console.log('Started with local config: ', config);
     const appModule = appModuleFactory(config);

docker/red-ui/09-set-application-config.sh

@@ -4,13 +4,11 @@ ADMIN_CONTACT_NAME="${ADMIN_CONTACT_NAME:-}"
 ADMIN_CONTACT_URL="${ADMIN_CONTACT_URL:-}"
 API_URL="${API_URL:-}"
 APP_NAME="${APP_NAME:-}"
-IS_DOCUMINE="${IS_DOCUMINE:-false}"
 RULE_EDITOR_DEV_ONLY="${RULE_EDITOR_DEV_ONLY:-true}"
 AUTO_READ_TIME="${AUTO_READ_TIME:-1.5}"
 BACKEND_APP_VERSION="${BACKEND_APP_VERSION:-4.7.0}"
 EULA_URL="${EULA_URL:-}"
 FRONTEND_APP_VERSION="${FRONTEND_APP_VERSION:-}"
-
 MAX_FILE_SIZE_MB="${MAX_FILE_SIZE_MB:-50}"
 MAX_RETRIES_ON_SERVER_ERROR="${MAX_RETRIES_ON_SERVER_ERROR:-3}"
 OAUTH_CLIENT_ID="${OAUTH_CLIENT_ID:-gin-client}"
@@ -23,16 +21,14 @@ ANNOTATIONS_THRESHOLD="${ANNOTATIONS_THRESHOLD:-1000}"
 AVAILABLE_NOTIFICATIONS_DAYS="${AVAILABLE_NOTIFICATIONS_DAYS:-30}"
 AVAILABLE_OLD_NOTIFICATIONS_MINUTES="${AVAILABLE_OLD_NOTIFICATIONS_MINUTES:-60}"
 NOTIFICATIONS_THRESHOLD="${NOTIFICATIONS_THRESHOLD:-1000}"
-BASE_TRANSLATIONS_DIRECTORY="${BASE_TRANSLATIONS_DIRECTORY:-/assets/i18n/redact/}"
-THEME="${THEME:-theme-template}"
 WATERMARK_PREVIEW_PAPER_FORMAT="${WATERMARK_PREVIEW_PAPER_FORMAT:-a4}"
+LANDING_PAGE_THEME="${LANDING_PAGE_THEME:-redactmanager}"
 
 echo '{
           "ADMIN_CONTACT_NAME":"'"$ADMIN_CONTACT_NAME"'",
           "ADMIN_CONTACT_URL":"'"$ADMIN_CONTACT_URL"'",
           "API_URL":"'"$API_URL"'",
           "APP_NAME":"'"$APP_NAME"'",
-          "IS_DOCUMINE":"'"$IS_DOCUMINE"'",
           "RULE_EDITOR_DEV_ONLY":"'"$RULE_EDITOR_DEV_ONLY"'",
           "AUTO_READ_TIME":"'"$AUTO_READ_TIME"'",
           "BACKEND_APP_VERSION":"'"$BACKEND_APP_VERSION"'",
@@ -46,13 +42,12 @@ echo '{
           "RECENT_PERIOD_IN_HOURS":"'"$RECENT_PERIOD_IN_HOURS"'",
           "SELECTION_MODE":"'"$SELECTION_MODE"'",
           "MANUAL_BASE_URL":"'"$MANUAL_BASE_URL"'",
-          "BASE_TRANSLATIONS_DIRECTORY":"'"$BASE_TRANSLATIONS_DIRECTORY"'",
-          "THEME":"'"$THEME"'",
           "ANNOTATIONS_THRESHOLD":"'"$ANNOTATIONS_THRESHOLD"'",
           "AVAILABLE_NOTIFICATIONS_DAYS":"'"$AVAILABLE_NOTIFICATIONS_DAYS"'",
           "AVAILABLE_OLD_NOTIFICATIONS_MINUTES":"'"$AVAILABLE_OLD_NOTIFICATIONS_MINUTES"'",
           "NOTIFICATIONS_THRESHOLD":"'"$NOTIFICATIONS_THRESHOLD"'",
           "WATERMARK_PREVIEW_PAPER_FORMAT":"'"$WATERMARK_PREVIEW_PAPER_FORMAT"'"
+          "LANDING_PAGE_THEME":"'"$LANDING_PAGE_THEME"'"
        }' >/usr/share/nginx/html/ui/assets/config/config.json
 
 echo 'App config: '

libs/common-ui

@@ -1 +1 @@
-Subproject commit cbdfcf4d8fb3a63417b61604496d8fa81bdea671
+Subproject commit 911516add233c6ae96cbe516322546bc160e4467