Create slot for list-workspaces-using-theme (#271)

* feat: set up slot for list workspaces * feat: make slot work, prepare translations * feat: finish slot setup, implement new tab structure * feat: use tab tooltips * fix: tests --------- Co-authored-by: Christian Badura <[email protected]>
onecx · Oct 2, 2024 · 7cf7648 · 7cf7648
1 parent f61d758
commit 7cf7648
Show file tree

Hide file tree

Showing 13 changed files with 146 additions and 45 deletions.
diff --git a/helm/values.yaml b/helm/values.yaml
@@ -36,5 +36,11 @@ app:
             VIEW: View mode for theme
             IMPORT: Import theme
             EXPORT: Export theme
+    slot:
+      enabled: true
+      specs:
+        onecx-theme-list-workspaces-using-theme:
+          name: 'onecx-theme-list-workspaces-using-theme'
+          description: 'List of Workspaces using the given Theme'
 
 # PIPE Config
diff --git a/src/app/onecx-theme-remote.module.ts b/src/app/onecx-theme-remote.module.ts
@@ -19,6 +19,7 @@ import { AngularAuthModule } from '@onecx/angular-auth'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { environment } from 'src/environments/environment'
 import { Configuration } from './shared/generated'
+import { SLOT_SERVICE, SlotService } from '@onecx/angular-remote-components'
 
 function apiConfigProvider(configService: ConfigurationService, appStateService: AppStateService) {
   return new PortalApiConfiguration(Configuration, environment.apiPrefix, configService, appStateService)
@@ -58,6 +59,7 @@ const routes: Routes = [
       deps: [Router, AppStateService]
     },
     { provide: Configuration, useFactory: apiConfigProvider, deps: [ConfigurationService, AppStateService] },
+    { provide: SLOT_SERVICE, useExisting: SlotService },
     provideHttpClient(withInterceptorsFromDi())
   ],
   schemas: []

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -28,6 +28,7 @@ import { TableModule } from 'primeng/table'
 import { ToastModule } from 'primeng/toast'
 
 import { PortalCoreModule } from '@onecx/portal-integration-angular'
+import { AngularRemoteComponentsModule } from '@onecx/angular-remote-components'
 
 import { LabelResolver } from './label.resolver'
 import { ImageContainerComponent } from './image-container/image-container.component'
@@ -38,6 +39,7 @@ import { ThemeColorBoxComponent } from './theme-color-box/theme-color-box.compon
   imports: [
     PortalCoreModule.forMicroFrontend(),
     AutoCompleteModule,
+    AngularRemoteComponentsModule,
     CheckboxModule,
     ColorSketchModule,
     CommonModule,
@@ -65,6 +67,7 @@ import { ThemeColorBoxComponent } from './theme-color-box/theme-color-box.compon
   ],
   exports: [
     AutoCompleteModule,
+    AngularRemoteComponentsModule,
     CheckboxModule,
     CommonModule,
     ColorSketchModule,

diff --git a/src/app/theme/theme-detail/theme-detail.component.html b/src/app/theme/theme-detail/theme-detail.component.html
@@ -17,7 +17,14 @@
 
   <ocx-page-content>
     <p-tabView>
-      <p-tabPanel id="th_detail_panel_props" [header]="'THEME.TABS.PROPERTIES' | translate">
+      <p-tabPanel
+        id="th_detail_panel_props"
+        [header]="'THEME.TABS.PROPERTIES' | translate"
+        [attr.aria-label]="'THEME.TABS.PROPERTIES' | translate"
+        [tooltip]="'THEME.TABS.PROPERTIES_TOOLTIP' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      >
         <div class="grid grid-nogutter m-3">
           <div class="col-12 md:col-10 lg:col-10 xl:col-6 flex flex-column row-gap-4">
             <span class="p-float-label">
@@ -77,11 +84,34 @@
         </div>
       </p-tabPanel>
 
-      <p-tabPanel [header]="'THEME.TABS.INTERN' | translate">
+      <p-tabPanel
+        [header]="'THEME.TABS.INTERN' | translate"
+        [attr.aria-label]="'THEME.TABS.INTERN' | translate"
+        [tooltip]="'THEME.TABS.INTERN_TOOLTIP' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      >
         <app-theme-intern [theme]="theme" [dateFormat]="dateFormat" [workspaceList]="workspaceList"></app-theme-intern>
       </p-tabPanel>
 
-      <p-tabPanel id="th_detail_panel_variables" [header]="'THEME.TABS.VARIABLES' | translate">
+      <p-tabPanel
+        [header]="'THEME.TABS.USE' | translate"
+        [attr.aria-label]="'THEME.TABS.USE' | translate"
+        [tooltip]="'THEME.TABS.USE_TOOLTIP' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      >
+        <app-theme-use [theme]="theme"></app-theme-use>
+      </p-tabPanel>
+
+      <p-tabPanel
+        id="th_detail_panel_variables"
+        [header]="'THEME.TABS.VARIABLES' | translate"
+        [attr.aria-label]="'THEME.TABS.VARIABLES' | translate"
+        [tooltip]="'THEME.TABS.VARIABLES_TOOLTIP' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      >
         <p-panel [showHeader]="false" styleClass="pt-1 pb-0 mx-2 my-1 surface-50">
           <pre id="th_detail_panel_variables_content" class="my-2">
             {{ theme?.properties | json }}

diff --git a/src/app/theme/theme-detail/theme-intern/theme-intern.component.html b/src/app/theme/theme-detail/theme-intern/theme-intern.component.html
@@ -103,24 +103,5 @@
         </span>
       </div>
     </div>
-
-    <div class="w-12 px-3">
-      <span class="p-float-label">
-        <textarea
-          #usedInWorkspaces
-          pInputTextarea
-          readonly
-          class="w-full"
-          autoresize="true"
-          rows="3"
-          id="th_detail_intern_item_workspaces"
-          [pTooltip]="'THEME.TOOLTIPS.WORKSPACES' | translate"
-          tooltipPosition="top"
-          tooltipEvent="hover"
-        >
-        </textarea>
-        <label for="th_detail_intern_item_workspaces">{{ 'THEME.WORKSPACES' | translate }}</label>
-      </span>
-    </div>
   </div>
 </div>
diff --git a/src/app/theme/theme-detail/theme-intern/theme-intern.component.spec.ts b/src/app/theme/theme-detail/theme-intern/theme-intern.component.spec.ts
@@ -1,4 +1,4 @@
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
 import { ThemeInternComponent } from './theme-intern.component'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { TranslateTestingModule } from 'ngx-translate-testing'
@@ -49,13 +49,4 @@ describe('ThemeInternComponent', () => {
     component.ngOnChanges()
     expect(component.operator).toBeFalse()
   })
-
-  it('should update usedInWorkspaces.nativeElement.innerHTML with workspaceList', fakeAsync(() => {
-    const nativeElement = document.createElement('textarea')
-    component.usedInWorkspaces = { nativeElement }
-    component.workspaceList = 'Workspace 1, Workspace 2'
-    component.ngOnChanges()
-    tick(1000)
-    expect(nativeElement?.innerHTML).toBe('Workspace 1, Workspace 2')
-  }))
 })
diff --git a/src/app/theme/theme-detail/theme-intern/theme-intern.component.ts b/src/app/theme/theme-detail/theme-intern/theme-intern.component.ts
@@ -1,6 +1,8 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, Input, OnChanges } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 
+import { SlotService } from '@onecx/angular-remote-components'
+import { Observable } from 'rxjs'
 import { Theme } from 'src/app/shared/generated'
 
 @Component({
@@ -11,17 +13,21 @@ export class ThemeInternComponent implements OnChanges {
   @Input() theme: Theme | undefined
   @Input() dateFormat = 'medium'
   @Input() workspaceList: string | undefined
-
-  @ViewChild('usedInWorkspaces') usedInWorkspaces: ElementRef = {} as ElementRef
+  public isListWorkspacesUsingThemeComponentDefined$: Observable<boolean> | undefined
+  public listWorkspacesUsingThemeSlotName = 'onecx-theme-list-workspaces-using-theme'
 
   public operator = false
 
-  constructor(private translate: TranslateService) {}
+  constructor(
+    private readonly translate: TranslateService,
+    private readonly slotService: SlotService
+  ) {
+    this.isListWorkspacesUsingThemeComponentDefined$ = this.slotService.isSomeComponentDefinedForSlot(
+      this.listWorkspacesUsingThemeSlotName
+    )
+  }
 
   public ngOnChanges(): void {
     if (this.theme) this.operator = this.theme.operator ?? false
-    setTimeout(() => {
-      if (this.usedInWorkspaces?.nativeElement) this.usedInWorkspaces.nativeElement.innerHTML = this.workspaceList
-    }, 2)
   }
 }
diff --git a/src/app/theme/theme-detail/theme-use/theme-use.component.html b/src/app/theme/theme-detail/theme-use/theme-use.component.html
@@ -0,0 +1,8 @@
+<div class="sm:pt-2 pb-2 sm:pb-3 px-3">
+  <ocx-slot
+    *ngIf="isListWorkspacesUsingThemeComponentDefined$ | async"
+    [name]="listWorkspacesUsingThemeSlotName"
+    [inputs]="{ themeName: theme?.name }"
+  >
+  </ocx-slot>
+</div>
diff --git a/src/app/theme/theme-detail/theme-use/theme-use.component.spec.ts b/src/app/theme/theme-detail/theme-use/theme-use.component.spec.ts
@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import { ThemeUseComponent } from './theme-use.component'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslateTestingModule } from 'ngx-translate-testing'
+import { NO_ERRORS_SCHEMA } from '@angular/core'
+
+describe('ThemeUseComponent', () => {
+  let component: ThemeUseComponent
+  let fixture: ComponentFixture<ThemeUseComponent>
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ThemeUseComponent],
+      imports: [
+        TranslateModule.forRoot(),
+        TranslateTestingModule.withTranslations({
+          de: require('src/assets/i18n/de.json'),
+          en: require('src/assets/i18n/en.json')
+        }).withDefaultLanguage('de')
+      ],
+      providers: [TranslateService],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents()
+  }))
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThemeUseComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/theme/theme-detail/theme-use/theme-use.component.ts b/src/app/theme/theme-detail/theme-use/theme-use.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+
+import { SlotService } from '@onecx/angular-remote-components'
+import { Observable } from 'rxjs'
+import { Theme } from 'src/app/shared/generated'
+
+@Component({
+  selector: 'app-theme-use',
+  templateUrl: './theme-use.component.html'
+})
+export class ThemeUseComponent {
+  @Input() theme: Theme | undefined
+  public isListWorkspacesUsingThemeComponentDefined$: Observable<boolean> | undefined
+  public listWorkspacesUsingThemeSlotName = 'onecx-theme-list-workspaces-using-theme'
+
+  public operator = false
+
+  constructor(
+    private readonly translate: TranslateService,
+    private readonly slotService: SlotService
+  ) {
+    this.isListWorkspacesUsingThemeComponentDefined$ = this.slotService.isSomeComponentDefinedForSlot(
+      this.listWorkspacesUsingThemeSlotName
+    )
+  }
+}
diff --git a/src/app/theme/theme.module.ts b/src/app/theme/theme.module.ts
@@ -16,6 +16,7 @@ import { ThemeSearchComponent } from './theme-search/theme-search.component'
 import { ThemeImportComponent } from './theme-import/theme-import.component'
 import { ThemeDetailComponent } from './theme-detail/theme-detail.component'
 import { ThemeInternComponent } from './theme-detail/theme-intern/theme-intern.component'
+import { ThemeUseComponent } from './theme-detail/theme-use/theme-use.component'
 import { ThemeDesignerComponent } from './theme-designer/theme-designer.component'
 
 const routes: Routes = [
@@ -58,7 +59,8 @@ const routes: Routes = [
     ThemeDetailComponent,
     ThemeDesignerComponent,
     ThemeImportComponent,
-    ThemeInternComponent
+    ThemeInternComponent,
+    ThemeUseComponent
   ],
   imports: [
     CommonModule,

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -149,8 +149,13 @@
     "NO_PROPERTIES": "Keine Farbwerte enthalten",
     "TABS": {
       "INTERN": "Intern",
-      "PROPERTIES": "Eigenschaften",
-      "VARIABLES": "Theme Variablen"
+      "INTERN_TOOLTIP": "Interne Informationen zum Theme",
+      "PROPERTIES": "Eigenschaften des Themes",
+      "PROPERTIES_TOOLTIP": "Eigenschaften",
+      "USE": "Verwendung",
+      "USE_TOOLTIP": "Liste der Workspaces, die das Theme verwenden",
+      "VARIABLES": "Theme-Variablen",
+      "VARIABLES_TOOLTIP": "JSON-Darstellung der Theme-Variablen"
     },
     "IMPORT": {
       "HEADER": "Import Theme",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -82,8 +82,8 @@
     "CREATION_USER": "Created by",
     "MODIFICATION_DATE": "Changed on",
     "MODIFICATION_USER": "Changed by",
-    "OPERATOR": "Automated created",
-    "OPERATOR_MESSAGE": "This Theme was automated created. All changes will be lost during the next deployment.",
+    "OPERATOR": "Created by automation",
+    "OPERATOR_MESSAGE": "This Theme was created by automation. All changes will be lost during the next deployment.",
     "TOOLTIPS": {
       "CREATION_DATE": "Timestamp of the creation",
       "CREATION_USER": "Name of the user of the creation",
@@ -149,8 +149,13 @@
     "NO_PROPERTIES": "No properties specified",
     "TABS": {
       "INTERN": "Internal",
+      "INTERN_TOOLTIP": "Internal information for the Theme",
       "PROPERTIES": "Properties",
-      "VARIABLES": "Theme Variables"
+      "PROPERTIES_TOOLTIP": "Properties of the Theme",
+      "USE": "Use",
+      "USE_TOOLTIP": "List of Workspaces using the Theme",
+      "VARIABLES": "Theme Variables",
+      "VARIABLES_TOOLTIP": "JSON representation of Theme Variables"
     },
     "IMPORT": {
       "HEADER": "Import Theme",