From 9db45032da95b2001440628ea9ebb57e81ff74e7 Mon Sep 17 00:00:00 2001
From: Henry Taeschner <henry.taeschner@capgemini.com>
Date: Wed, 13 Mar 2024 18:40:39 +0100
Subject: [PATCH 1/2] fix: code smells

---
 .../image-container.component.html            |  2 +-
 .../theme-designer.component.html             | 52 +++++++++++++------
 .../theme-designer.component.spec.ts          |  8 +--
 .../theme-designer.component.ts               | 39 +++++++-------
 4 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/src/app/shared/image-container/image-container.component.html b/src/app/shared/image-container/image-container.component.html
index 7eeab2e..844b731 100644
--- a/src/app/shared/image-container/image-container.component.html
+++ b/src/app/shared/image-container/image-container.component.html
@@ -4,7 +4,7 @@
   [class]="'image-object image-' + (small ? 'sm' : 'lg') + ' sm:image-lg'"
   [src]="imageUrl"
   (error)="onImageError()"
-  alt="Image"
+  alt="logo"
 />
 <svg
   [id]="id"
diff --git a/src/app/theme/theme-designer/theme-designer.component.html b/src/app/theme/theme-designer/theme-designer.component.html
index 8f1dd0f..d1836f3 100644
--- a/src/app/theme/theme-designer/theme-designer.component.html
+++ b/src/app/theme/theme-designer/theme-designer.component.html
@@ -14,12 +14,12 @@
           [title]="'THEME.DETAIL.AUTO_APPLY.TOOLTIP' | translate"
         >
           <p-inputSwitch
-            id="autoApplyToggle"
+            id="theme_designer_header_is_current_theme"
             name="autoApplyToggle"
             [disabled]="themeIsCurrentUsedTheme"
             [(ngModel)]="autoApply || themeIsCurrentUsedTheme"
           ></p-inputSwitch>
-          <label for="autoApplyToggle">{{ 'THEME.DETAIL.AUTO_APPLY' | translate }}</label>
+          <label for="theme_designer_header_is_current_theme">{{ 'THEME.DETAIL.AUTO_APPLY' | translate }}</label>
         </div>
         <span
           *ngIf="themeIsCurrentUsedTheme"
@@ -31,6 +31,7 @@
           <span class="p-float-label">
             <p-dropdown
               #themeTemplate
+              id="theme_designer_fields_selected_theme"
               [options]="themeTemplates"
               styleClass="w-full"
               [(ngModel)]="themeTemplateSelectedId"
@@ -39,7 +40,9 @@
               [autoDisplayFirst]="false"
               [title]="'THEME.TEMPLATE.SELECTOR.TOOLTIP' | translate"
             ></p-dropdown>
-            <label for="themeSelector" class="white-space-nowrap">{{ 'THEME.TEMPLATE.SELECTOR' | translate }}</label>
+            <label for="theme_designer_fields_selected_theme" class="white-space-nowrap">
+              {{ 'THEME.TEMPLATE.SELECTOR' | translate }}</label
+            >
           </span>
         </div>
       </div>
@@ -52,14 +55,14 @@
           <div [formGroup]="basicForm" class="grid grid-nogutter formgrid p-fluid mx-1">
             <div class="field col-12 mb-4">
               <span class="p-float-label" controlErrorAnchor>
-                <input pInputText type="text" id="name" formControlName="name" />
-                <label class="ocx-required-label" for="name">Name</label>
+                <input pInputText type="text" id="theme_designer_field_name" formControlName="name" />
+                <label class="ocx-required-label" for="theme_designer_field_name">Name</label>
               </span>
             </div>
             <div class="field col-12 mb-4">
               <span class="p-float-label">
-                <input pInputText type="text" id="description" formControlName="description" />
-                <label for="theme_detail_item_description">{{ 'THEME.DESCRIPTION' | translate }}</label>
+                <input pInputText type="text" id="theme_designer_field_description" formControlName="description" />
+                <label for="theme_designer_field_description">{{ 'THEME.DESCRIPTION' | translate }}</label>
               </span>
             </div>
             <!-- helper inputs because p-fileupload does not work inside inputgroup -->
@@ -116,7 +119,7 @@
                       <i class="pi pi-upload"></i>
                     </span>
                   </div>
-                  <label *ngIf="displayFileTypeErrorLogo" class="control-error">
+                  <label *ngIf="displayFileTypeErrorLogo" for="theme_detail_upload_logo" class="control-error">
                     {{ 'VALIDATION.ERRORS.FILETYPE_PATTERN_ERROR' | translate }}
                   </label>
                 </div>
@@ -144,10 +147,11 @@
                         pInputText
                         type="text"
                         id="favicon"
+                        id="theme_detail_upload_favicon"
                         formControlName="faviconUrl"
                         (input)="inputChange(theme, 'favicon')"
                       />
-                      <label for="favicon">Favicon</label>
+                      <label for="theme_detail_upload_favicon">Favicon</label>
                     </span>
                     <div class="flex flex-column">
                       <span
@@ -160,7 +164,11 @@
                       </span>
                     </div>
                   </div>
-                  <label *ngIf="this.displayFileTypeErrorFavicon" class="control-error">
+                  <label
+                    *ngIf="this.displayFileTypeErrorFavicon"
+                    for="theme_detail_upload_favicon"
+                    class="control-error"
+                  >
                     {{ 'VALIDATION.ERRORS.FILETYPE_PATTERN_ERROR' | translate }}
                   </label>
                 </div>
@@ -177,16 +185,28 @@
             <div class="col-12 sm:col-9 md:col-9 lg:col-9 xl:9">
               <div class="p-inputgroup px-3">
                 <span class="p-float-label">
-                  <input pInputText type="text" id="font-family" formControlName="font-family" class="w-full" />
-                  <label for="font-family">font-family</label>
+                  <input
+                    pInputText
+                    type="text"
+                    id="theme_detail_font-family"
+                    formControlName="font-family"
+                    class="w-full"
+                  />
+                  <label for="theme_detail_font-family">font-family</label>
                 </span>
               </div>
             </div>
             <div class="col-12 sm:col-3 md:col-3 lg:col-3 xl:3">
               <div class="p-inputgroup px-3">
                 <span class="p-float-label">
-                  <input pInputText type="text" id="font-size" formControlName="font-size" class="w-full" />
-                  <label for="font-size">font-size</label>
+                  <input
+                    pInputText
+                    type="text"
+                    id="theme_detail_font-size"
+                    formControlName="font-size"
+                    class="w-full"
+                  />
+                  <label for="theme_detail_font-size">font-size</label>
                 </span>
               </div>
             </div>
@@ -203,11 +223,11 @@
                 <span class="p-float-label">
                   <input
                     pInputText
-                    id="color-{{ item }}"
+                    id="theme_detail_item_color-{{ item }}"
                     [formControlName]="item"
                     [value]="group.formGroup.value[item]"
                   />
-                  <label for="color-{{ item }}">{{ item }}</label>
+                  <label for="theme_detail_item_color-{{ item }}">{{ item }}</label>
                 </span>
                 <p-overlayPanel #op>
                   <ng-template pTemplate>
diff --git a/src/app/theme/theme-designer/theme-designer.component.spec.ts b/src/app/theme/theme-designer/theme-designer.component.spec.ts
index e2564dd..639ead2 100644
--- a/src/app/theme/theme-designer/theme-designer.component.spec.ts
+++ b/src/app/theme/theme-designer/theme-designer.component.spec.ts
@@ -177,22 +177,22 @@ describe('ThemeDesignerComponent', () => {
 
       component.autoApply = true
 
-      const fontFormControlEl = fixture.debugElement.query(By.css('#font-family'))
+      const fontFormControlEl = fixture.debugElement.query(By.css('#theme_detail_font-family'))
       expect(fontFormControlEl).toBeDefined()
       fontFormControlEl.nativeElement.value = 'newFamily'
       fontFormControlEl.nativeElement.dispatchEvent(new Event('input'))
 
-      const generalFormControlEl = fixture.debugElement.query(By.css('#color-primary-color'))
+      const generalFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color-primary-color'))
       expect(generalFormControlEl).toBeDefined()
       generalFormControlEl.nativeElement.value = 'rgba(0, 0, 0, 0.87)'
       generalFormControlEl.nativeElement.dispatchEvent(new Event('input'))
 
-      const topbarFormControlEl = fixture.debugElement.query(By.css('#color-topbar-bg-color'))
+      const topbarFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color-topbar-bg-color'))
       expect(topbarFormControlEl).toBeDefined()
       topbarFormControlEl.nativeElement.value = '#000000'
       topbarFormControlEl.nativeElement.dispatchEvent(new Event('input'))
 
-      const sidebarFormControlEl = fixture.debugElement.query(By.css('#color-menu-text-color'))
+      const sidebarFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color-menu-text-color'))
       expect(sidebarFormControlEl).toBeDefined()
       sidebarFormControlEl.nativeElement.value = '#102030'
       sidebarFormControlEl.nativeElement.dispatchEvent(new Event('input'))
diff --git a/src/app/theme/theme-designer/theme-designer.component.ts b/src/app/theme/theme-designer/theme-designer.component.ts
index 623dbeb..61b0acc 100644
--- a/src/app/theme/theme-designer/theme-designer.component.ts
+++ b/src/app/theme/theme-designer/theme-designer.component.ts
@@ -419,7 +419,7 @@ export class ThemeDesignerComponent implements OnInit {
 
   // Image Files
   public onFileUpload(ev: Event, fieldType: 'logo' | 'favicon'): void {
-    var currThemeName = this.basicForm.controls['name'].value
+    let currThemeName = this.basicForm.controls['name'].value
     this.displayFileTypeErrorLogo = false
     this.displayFileTypeErrorFavicon = false
     if (ev.target && (ev.target as HTMLInputElement).files) {
@@ -437,26 +437,26 @@ export class ThemeDesignerComponent implements OnInit {
 
   saveImage(currThemeName: string, fieldType: string, files: FileList) {
     // Set request parameter
-    var requestParameters: UploadImageRequestParams
+    if (!currThemeName || currThemeName === '') return
+    let requestParameters: UploadImageRequestParams
     const blob = new Blob([files[0]], { type: files[0].type })
-    var imageType: RefType
+    let imageType: RefType = RefType.Logo
     if (fieldType === 'logo') {
       this.fetchingLogoUrl = undefined
-      imageType = RefType.Logo
     } else {
       this.fetchingFaviconUrl = undefined
       imageType = RefType.Favicon
     }
     requestParameters = {
       contentLength: files.length,
-      refId: currThemeName!,
+      refId: currThemeName,
       refType: imageType,
       body: blob
     }
 
-    var requestParametersGet: GetImageRequestParams
+    let requestParametersGet: GetImageRequestParams
     requestParametersGet = {
-      refId: currThemeName!,
+      refId: currThemeName,
       refType: imageType
     }
 
@@ -464,7 +464,7 @@ export class ThemeDesignerComponent implements OnInit {
       (res) => {
         if (files[0].name.match(/^.*.(jpg|jpeg|png)$/)) {
           this.imageApi.updateImage(requestParameters).subscribe((data) => {
-            if (fieldType == 'logo') {
+            if (fieldType === 'logo') {
               this.imageLogoExists = true
               this.fetchingLogoUrl = this.imageApi.configuration.basePath + '/images/' + currThemeName + '/' + fieldType
             } else {
@@ -481,7 +481,7 @@ export class ThemeDesignerComponent implements OnInit {
         if (files[0].name.match(/^.*.(jpg|jpeg|png)$/)) {
           Array.from(files).forEach((file) => {
             this.imageApi.uploadImage(requestParameters).subscribe((data) => {
-              if (fieldType == 'logo') {
+              if (fieldType === 'logo') {
                 this.imageLogoExists = true
                 this.fetchingLogoUrl =
                   this.imageApi.configuration.basePath + '/images/' + currThemeName + '/' + fieldType
@@ -503,8 +503,8 @@ export class ThemeDesignerComponent implements OnInit {
   }
 
   constraintUpload(): boolean {
-    var currThemeName = this.basicForm.controls['name'].value
-    if (currThemeName == null || currThemeName == '') {
+    const currThemeName = this.basicForm.controls['name'].value
+    if (currThemeName === null || currThemeName === '') {
       return false
     }
     return true
@@ -514,13 +514,13 @@ export class ThemeDesignerComponent implements OnInit {
     if (!theme) {
       return undefined
     }
-    if (imageType == 'logo') {
-      if (theme.logoUrl != null && theme.logoUrl != '') {
+    if (imageType === 'logo') {
+      if (theme.logoUrl !== null && theme.logoUrl != '') {
         return theme.logoUrl
       }
       return this.imageApi.configuration.basePath + '/images/' + theme.name + '/logo'
     } else {
-      if (theme.faviconUrl != null && theme.faviconUrl != '') {
+      if (theme.faviconUrl !== null && theme.faviconUrl !== '') {
         return theme.faviconUrl
       }
       return this.imageApi.configuration.basePath + '/images/' + theme.name + '/favicon'
@@ -528,24 +528,21 @@ export class ThemeDesignerComponent implements OnInit {
   }
 
   urlExists(url: string | undefined): boolean {
-    if (url == undefined || url === '') {
-      return true
-    }
-    return false
+    return !url || url === ''
   }
 
   inputChange(theme: Theme | undefined, fieldType: string) {
     setTimeout(() => {
-      if (fieldType == 'logo') {
+      if (fieldType === 'logo') {
         this.fetchingLogoUrl = this.basicForm.controls['logoUrl'].value
       } else {
         this.fetchingFaviconUrl = this.basicForm.controls['faviconUrl'].value
       }
 
-      if (this.imageLogoExists && this.basicForm.controls['logoUrl'].value == '') {
+      if (this.imageLogoExists && this.basicForm.controls['logoUrl'].value === '') {
         this.fetchingLogoUrl = this.imageApi.configuration.basePath + '/images/' + theme?.name + '/logo'
       }
-      if (this.imageFaviconExists && this.basicForm.controls['faviconUrl'].value == '') {
+      if (this.imageFaviconExists && this.basicForm.controls['faviconUrl'].value === '') {
         this.fetchingFaviconUrl = this.imageApi.configuration.basePath + '/images/' + theme?.name + '/favicon'
       }
     }, 1000)

From 6c2c653d0948b0301b44689e974e4aee135fad49 Mon Sep 17 00:00:00 2001
From: Henry Taeschner <henry.taeschner@capgemini.com>
Date: Wed, 13 Mar 2024 20:03:42 +0100
Subject: [PATCH 2/2] fix: code smells

---
 src/app/theme/theme-designer/theme-designer.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/theme/theme-designer/theme-designer.component.ts b/src/app/theme/theme-designer/theme-designer.component.ts
index 61b0acc..b2d4041 100644
--- a/src/app/theme/theme-designer/theme-designer.component.ts
+++ b/src/app/theme/theme-designer/theme-designer.component.ts
@@ -437,7 +437,6 @@ export class ThemeDesignerComponent implements OnInit {
 
   saveImage(currThemeName: string, fieldType: string, files: FileList) {
     // Set request parameter
-    if (!currThemeName || currThemeName === '') return
     let requestParameters: UploadImageRequestParams
     const blob = new Blob([files[0]], { type: files[0].type })
     let imageType: RefType = RefType.Logo