Feat/translate status fields (#410)

Co-authored-by: makdeniss <[email protected]>
Co-authored-by: Grzegorz Krajniak <[email protected]>

Author: makdeniss

projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.html

@@ -43,7 +43,9 @@
       @for (field of resourceFields; track field.property) {
         <div class="resource-info-cell">
           <ui5-label>{{ field.label }}</ui5-label>
-          <p>{{ getResourceValueByJsonPath(resource(), field) }}</p>
+          <p>
+            <value-cell [value]="getResourceValueByJsonPath(resource(), field)"></value-cell>
+          </p>
         </div>
       }
     </div>

projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.ts

@@ -30,6 +30,7 @@ import {
   ToolbarButtonComponent,
   ToolbarComponent,
 } from '@ui5/webcomponents-ngx';
+import { ValueCellComponent } from '../value-cell/value-cell.component';
 
 const defaultFields: FieldDefinition[] = [
   {
@@ -52,6 +53,7 @@ const defaultFields: FieldDefinition[] = [
     ToolbarButtonComponent,
     DynamicPageHeaderComponent,
     LabelComponent,
+    ValueCellComponent,
   ],
   templateUrl: './detail-view.component.html',
   styleUrl: './detail-view.component.scss',

projects/wc/src/app/components/generic-ui/list-view/list-view.component.html

@@ -51,9 +51,9 @@
     @for (item of resources(); track item.metadata.name) {
       <ui5-table-row interactive (click)="navigateToResource(item)">
         @for (column of columns; track column.label) {
-          <ui5-table-cell>{{
-            getResourceValueByJsonPath(item, column)
-          }}</ui5-table-cell>
+          <ui5-table-cell>
+            <value-cell [value]="getResourceValueByJsonPath(item, column)"></value-cell>
+          </ui5-table-cell>
         }
         <ui5-table-cell
           class="actions-column delete-item"

projects/wc/src/app/components/generic-ui/list-view/list-view.component.ts

@@ -39,6 +39,7 @@ import {
   ToolbarButtonComponent,
   ToolbarComponent,
 } from '@ui5/webcomponents-ngx';
+import { ValueCellComponent } from '../value-cell/value-cell.component';
 
 const defaultColumns: FieldDefinition[] = [
   {
@@ -74,6 +75,7 @@ const defaultColumns: FieldDefinition[] = [
     TitleComponent,
     ToolbarButtonComponent,
     ToolbarComponent,
+    ValueCellComponent,
   ],
 })
 export class ListViewComponent implements OnInit {

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.html

@@ -0,0 +1,5 @@
+@if (isBoolLike()) {
+  <ui5-icon [name]="iconName()" [design]="iconDesign()"></ui5-icon>
+} @else {
+  {{ value() }}
+}

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.spec.ts

@@ -0,0 +1,74 @@
+import { ValueCellComponent } from './value-cell.component';
+import {
+  ICON_DESIGN_NEGATIVE,
+  ICON_DESIGN_POSITIVE,
+  ICON_NAME_NEGATIVE,
+  ICON_NAME_POSITIVE,
+} from './value-cell.constants';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+jest.mock('@ui5/webcomponents-ngx', () => ({ IconComponent: class {} }), {
+  virtual: true,
+});
+
+describe('ValueCellComponent', () => {
+  let component: ValueCellComponent;
+  let fixture: ComponentFixture<ValueCellComponent>;
+
+  const makeComponent = (value: unknown) => {
+    fixture = TestBed.createComponent(ValueCellComponent);
+    component = fixture.componentInstance;
+
+    fixture.componentRef.setInput('value', value as any);
+
+    fixture.detectChanges();
+
+    return { component, fixture };
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ValueCellComponent],
+    }).overrideComponent(ValueCellComponent, {
+      set: { template: '<div></div>', imports: [] },
+    });
+  });
+
+  it('should create', () => {
+    const { component } = makeComponent('r1');
+    expect(component).toBeTruthy();
+  });
+
+  it('should accept non-boolean value and mark as not boolean-like', () => {
+    const { component } = makeComponent('cluster-a');
+
+    expect(component.isBoolLike()).toBe(false);
+    expect(component.value()).toBe('cluster-a');
+    expect(component.iconDesign()).toBeUndefined();
+    expect(component.iconName()).toBeUndefined();
+  });
+
+  it("should accept boolean-like 'true' string and set positive icon and design", () => {
+    const { component } = makeComponent('true');
+
+    expect(component.isBoolLike()).toBe(true);
+    expect(component.iconDesign()).toBe(ICON_DESIGN_POSITIVE);
+    expect(component.iconName()).toBe(ICON_NAME_POSITIVE);
+  });
+
+  it("should accept boolean-like 'false' string and set negative icon and design", () => {
+    const { component } = makeComponent('false');
+
+    expect(component.isBoolLike()).toBe(true);
+    expect(component.iconDesign()).toBe(ICON_DESIGN_NEGATIVE);
+    expect(component.iconName()).toBe(ICON_NAME_NEGATIVE);
+  });
+
+  it('should accept boolean value true and set positive icon', () => {
+    const { component } = makeComponent(true);
+
+    expect(component.isBoolLike()).toBe(true);
+    expect(component.iconDesign()).toBe(ICON_DESIGN_POSITIVE);
+    expect(component.iconName()).toBe(ICON_NAME_POSITIVE);
+  });
+});

projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.ts

@@ -0,0 +1,56 @@
+import {
+  ICON_DESIGN_NEGATIVE,
+  ICON_DESIGN_POSITIVE,
+  ICON_NAME_NEGATIVE,
+  ICON_NAME_POSITIVE,
+} from './value-cell.constants';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { IconComponent } from '@ui5/webcomponents-ngx';
+
+export type IconDesignType =
+  | typeof ICON_DESIGN_POSITIVE
+  | typeof ICON_DESIGN_NEGATIVE;
+
+@Component({
+  selector: 'value-cell',
+  standalone: true,
+  imports: [IconComponent],
+  templateUrl: './value-cell.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ValueCellComponent {
+  value = input<unknown>();
+  isBoolLike = computed(() => this.boolValue() !== undefined);
+  iconDesign = computed<IconDesignType | undefined>(() => {
+    return this.boolValue() === undefined
+      ? undefined
+      : this.boolValue()
+        ? ICON_DESIGN_POSITIVE
+        : ICON_DESIGN_NEGATIVE;
+  });
+  iconName = computed<string | undefined>(() => {
+    return this.boolValue() === undefined
+      ? undefined
+      : this.boolValue()
+        ? ICON_NAME_POSITIVE
+        : ICON_NAME_NEGATIVE;
+  });
+
+  private boolValue = computed(() => this.normalizeBoolean(this.value()));
+
+  private normalizeBoolean(value: unknown): boolean | undefined {
+    const normalizedValue = value?.toString()?.toLowerCase();
+    if (normalizedValue === 'true') {
+      return true;
+    }
+    if (normalizedValue === 'false') {
+      return false;
+    }
+    return undefined;
+  }
+}

projects/wc/src/app/components/generic-ui/value-cell/value-cell.constants.ts

@@ -0,0 +1,5 @@
+export const ICON_DESIGN_POSITIVE = 'Positive';
+export const ICON_DESIGN_NEGATIVE = 'Negative';
+
+export const ICON_NAME_POSITIVE = 'accept';
+export const ICON_NAME_NEGATIVE = 'decline';