feat: configure theme product (onecx#39)

* feat: configure theme product * fix: app description * fix: code issues detected by sonar
markuczy · Jan 24, 2024 · 7c56fb7 · 7c56fb7
1 parent e239574
commit 7c56fb7
Show file tree

Hide file tree

Showing 19 changed files with 31 additions and 57 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -10,7 +10,7 @@ COPY dist/onecx-theme-ui/ $DIR_HTML
 
 # Application environments default values
 ENV BFF_URL http://onecx-theme-bff:8080/
-ENV APP_BASE_HREF /theme/
+ENV APP_BASE_HREF /
 
 RUN chmod 775 -R $DIR_HTML/assets
 USER 1001
diff --git a/helm/values.yaml b/helm/values.yaml
@@ -4,16 +4,16 @@ app:
     repository: 'onecx/onecx-theme-ui'
   routing:
     enabled: true
-    path: /ui/mfe/theme/
+    path: /mfe/theme/
 
   operator:
     # Microfrontend
     microfrontend:
       enabled: true
       spec:
-        exposedModule: "./ThemeMgmtModule"
-        description: "Theme Mgmt module"
-        note: "Theme Mgmt UI module auto import via MF operator"
+        exposedModule: "./OneCXThemeModule"
+        description: "OneCX Theme Module"
+        note: "OneCX Theme UI module auto import via MF operator"
     # Permission
     permission:
       enabled: true
@@ -33,9 +33,9 @@ app:
       enabled: true
       client: |-
         { 
-          "clientId": "theme-mgmt-ui",
+          "clientId": "onecx-theme-ui",
           "enabled": true,
-          "description": "Keycloak client for theme-mgmt-ui",
+          "description": "Keycloak client for onecx-theme-ui",
           "redirectUris": ["*"],
           "webOrigins": ["*"],
           "publicClient": true,

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -18,9 +18,9 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy()
   })
 
-  it(`should have as title 'theme-mgmt'`, () => {
+  it(`should have as title 'onecx-theme-ui'`, () => {
     const fixture = TestBed.createComponent(AppComponent)
     const app = fixture.componentInstance
-    expect(app.title).toEqual('theme-mgmt')
+    expect(app.title).toEqual('onecx-theme-ui')
   })
 })
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -4,5 +4,5 @@ import { Component } from '@angular/core'
   templateUrl: './app.component.html'
 })
 export class AppComponent {
-  title = 'theme-mgmt'
+  title = 'onecx-theme-ui'
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -24,7 +24,7 @@ function initializer(translate: TranslateService): () => Observable<any> {
 @NgModule({
   bootstrap: [AppComponent],
   declarations: [AppComponent],
-  imports: [BrowserModule, KeycloakAuthModule, BrowserAnimationsModule, PortalCoreModule.forRoot('theme-mgmt-ui')],
+  imports: [BrowserModule, KeycloakAuthModule, BrowserAnimationsModule, PortalCoreModule.forRoot('onecx-theme-ui')],
   providers: [
     DialogService,
     { provide: APP_CONFIG, useValue: environment },

diff --git a/src/app/theme-mgmt-remote.module.ts → src/app/onecx-theme-remote.module.ts b/src/app/theme-mgmt-remote.module.ts → src/app/onecx-theme-remote.module.ts
@@ -15,8 +15,8 @@ const routes: Routes = [
   providers: [],
   schemas: []
 })
-export class ThemeMgmtModule {
+export class OneCXThemeModule {
   constructor(@Inject(MFE_INFO) mfeInfo?: MfeInfo) {
-    console.info('Theme Mgmt Module constructor', mfeInfo)
+    console.info('OneCX Theme Module constructor', mfeInfo)
   }
 }
diff --git a/src/app/shared/can-active-guard.service.ts b/src/app/shared/can-active-guard.service.ts
@@ -12,7 +12,7 @@ const DEFAULT_LANG = 'en'
 export class CanActivateGuard implements CanActivate {
   constructor(private txService: TranslateService, private config: ConfigurationService) {}
 
-  /* eslint-disable @typescript-eslint/no-unused-vars */ /* TODO: is route and state needed */
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   canActivate(
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot

diff --git a/src/app/shared/image-container/image-container.component.ts b/src/app/shared/image-container/image-container.component.ts
@@ -24,7 +24,7 @@ export class ImageContainerComponent implements OnChanges {
 
       // if image Url does not start with a http the api-prefix ...
       //   ...then it stored in the backend. So we need to put prefix in front
-      if (this.imageUrl && !this.imageUrl.match(/^(http|https)/g) && this.imageUrl.indexOf(this.apiPrefix) !== 0) {
+      if (this.imageUrl && !this.imageUrl.match(/^(http|https)/g) && !this.imageUrl.startsWith(this.apiPrefix)) {
         this.imageUrl = this.apiPrefix + this.imageUrl
       }
     }

diff --git a/src/app/shared/label.resolver.ts b/src/app/shared/label.resolver.ts
@@ -7,7 +7,7 @@ import { Observable } from 'rxjs'
 @Injectable()
 export class LabelResolver implements Resolve<string> {
   constructor(private translate: TranslateService) {}
-  /* eslint-disable @typescript-eslint/no-unused-vars */ /* TODO: is state needed */
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): string | Observable<string> | Promise<string> {
     return route.data['breadcrumb'] ? this.translate.instant(route.data['breadcrumb']) : route.routeConfig?.path
   }

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -45,18 +45,16 @@ import { ImageContainerComponent } from './image-container/image-container.compo
 import { ThemeColorBoxComponent } from './theme-color-box/theme-color-box.component'
 
 export const basePathProvider = (mfeInfo: MfeInfo) => {
-  console.log(
-    'Base path provider: ' + (mfeInfo ? mfeInfo.remoteBaseUrl + '' + environment.apiPrefix : '' + environment.apiPrefix)
-  )
-  return mfeInfo ? mfeInfo.remoteBaseUrl + '' + environment.apiPrefix : '' + environment.apiPrefix
+  console.log('Base path provider: ' + (mfeInfo ? mfeInfo?.remoteBaseUrl : '') + environment.apiPrefix)
+  return (mfeInfo ? mfeInfo?.remoteBaseUrl : '') + environment.apiPrefix
 }
 
 export function HttpLoaderFactory(http: HttpClient, mfeInfo: MfeInfo) {
   if (mfeInfo) {
     console.log(`Configuring translation loader ${mfeInfo?.remoteBaseUrl}`)
   }
   // if running standalone then load the app assets directly from remote base URL
-  const appAssetPrefix = mfeInfo && mfeInfo.remoteBaseUrl ? mfeInfo.remoteBaseUrl : './'
+  const appAssetPrefix = mfeInfo?.remoteBaseUrl ? mfeInfo.remoteBaseUrl : './'
   return new TranslateCombinedLoader(
     new TranslateHttpLoader(http, appAssetPrefix + 'assets/i18n/', '.json'),
     new TranslateHttpLoader(http, appAssetPrefix + 'onecx-portal-lib/assets/i18n/', '.json')

diff --git a/src/app/test/mocks/auth-mock.service.ts b/src/app/test/mocks/auth-mock.service.ts
@@ -6,7 +6,9 @@ export class IAuthMockService implements IAuthService {
   getCurrentUser(): UserProfile | null {
     return null
   }
-  logout(): void {}
+  logout(): void {
+    // logout
+  }
   hasPermission(permissionKey: string): boolean {
     return false
   }

diff --git a/src/app/theme/theme-designer/theme-designer.component.html b/src/app/theme/theme-designer/theme-designer.component.html
@@ -62,14 +62,6 @@
                 <label for="theme_detail_item_description">{{ 'THEME.DESCRIPTION' | translate }}</label>
               </span>
             </div>
-            <!--
-            <div class="field col-12 mb-4">
-              <span class="p-float-label" [title]="'THEME.TOOLTIPS.CSS_FILE' | translate">
-                <input pInputText type="text" id="theme_detail_item_cssFile" formControlName="cssFile" />
-                <label for="theme_detail_item_cssFile">{{'THEME.CSS_FILE' | translate}}</label>
-              </span>
-            </div>
-            -->
             <!-- helper inputs because p-fileupload does not work inside inputgroup -->
             <input
               hidden

diff --git a/src/app/theme/theme-detail/theme-detail.component.html b/src/app/theme/theme-detail/theme-detail.component.html
@@ -34,19 +34,6 @@
               ></textarea>
               <label for="theme_detail_item_description">{{ 'THEME.DESCRIPTION' | translate }}</label>
             </span>
-            <!--
-            <span class="p-float-label" [title]="'THEME.TOOLTIPS.CSS_FILE' | translate">
-              <input
-                pInputText
-                type="text"
-                readonly
-                class="w-full"
-                id="theme_detail_item_cssFile"
-                [value]="theme?.cssFile"
-              />
-              <label for="theme_detail_item_cssFile">{{'THEME.CSS_FILE' | translate}}</label>
-            </span>
-            -->
             <div class="flex flex-wrap sm:flex-nowrap align-items-center pb-2 row-gap-2 column-gap-4">
               <tm-image-container
                 [imageUrl]="headerImageUrl"

diff --git a/src/app/theme/theme-detail/theme-detail.component.ts b/src/app/theme/theme-detail/theme-detail.component.ts
@@ -218,6 +218,6 @@ export class ThemeDetailComponent implements OnInit {
 
   public prepareUsedInPortalList(): string {
     const arr = this.usedInWorkspace?.map((workspace: Workspace) => workspace.workspaceName)
-    return arr?.sort(sortByLocale).join(', ') || ''
+    return arr?.sort(sortByLocale).join(', ') ?? ''
   }
 }
diff --git a/src/assets/silent-check-sso.html b/src/assets/silent-check-sso.html
@@ -1,4 +1,8 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Some relevant title</title>
+  </head>
   <body>
     <script>
       parent.postMessage(location.href, location.origin)

diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -11,12 +11,3 @@ export const environment = {
   skipRemoteConfigLoad: true,
   apiPrefix: 'theme-bff'
 }
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>ThemeMgmt</title>
+    <title>OneCX Theme</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="#" id="favicon" />

diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -7,7 +7,7 @@
     "inlineSources": true,
     "target": "ES2022"
   },
-  "files": ["src/main.ts", "src/polyfills.ts", "src/app/theme-mgmt-remote.module.ts"],
+  "files": ["src/main.ts", "src/polyfills.ts", "src/app/onecx-theme-remote.module.ts"],
   "include": ["src/**/*.ts", "src/**/*.d.ts"],
   "exclude": [
     "src/test.ts",

diff --git a/webpack.config.js b/webpack.config.js
@@ -5,7 +5,7 @@ const config = withModuleFederationPlugin({
   name: 'onecx-theme-ui',
   filename: 'remoteEntry.js',
   exposes: {
-    './ThemeMgmtModule': 'src/app/theme-mgmt-remote.module.ts'
+    './OneCXThemeModule': 'src/app/onecx-theme-remote.module.ts'
   },
   shared: share({
     '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },