Merge pull request #26507 from votdev/yesno_pipe

mgr/dashboard: Introduce pipe to convert bool to text

Reviewed-by: Stephan Müller <smueller@suse.com>
Reviewed-by: Tatjana Dehler <tdehler@suse.com>

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html

@@ -85,7 +85,7 @@
         <tr>
           <td i18n
               class="bold col-sm-1">Can be updated at runtime (editable)</td>
-          <td class="col-sm-3">{{ selectedItem.can_update_at_runtime }}</td>
+          <td class="col-sm-3">{{ selectedItem.can_update_at_runtime | booleanText }}</td>
         </tr>
         <tr>
           <td i18n

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts

@@ -4,6 +4,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { DataTableModule } from '../../../../shared/datatable/datatable.module';
+import { SharedModule } from '../../../../shared/shared.module';
 import { ConfigurationDetailsComponent } from './configuration-details.component';
 
 describe('ConfigurationDetailsComponent', () => {
@@ -12,7 +13,7 @@ describe('ConfigurationDetailsComponent', () => {
 
   configureTestBed({
     declarations: [ConfigurationDetailsComponent],
-    imports: [DataTableModule, TabsModule.forRoot()],
+    imports: [DataTableModule, SharedModule, TabsModule.forRoot()],
     providers: [i18nProviders]
   });
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html

@@ -69,7 +69,7 @@
             <tr>
               <td i18n
                   class="bold col-sm-1">Enabled</td>
-              <td class="col-sm-3">{{ bucket.bucket_quota.enabled ? "Yes" : "No" }}</td>
+              <td class="col-sm-3">{{ bucket.bucket_quota.enabled | booleanText }}</td>
             </tr>
             <tr>
               <td i18n

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TabsModule } from 'ngx-bootstrap/tabs';
 
-import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 import { SharedModule } from '../../../shared/shared.module';
 import { RgwBucketDetailsComponent } from './rgw-bucket-details.component';
@@ -13,7 +13,8 @@ describe('RgwBucketDetailsComponent', () => {
 
   configureTestBed({
     declarations: [RgwBucketDetailsComponent],
-    imports: [SharedModule, TabsModule.forRoot()]
+    imports: [SharedModule, TabsModule.forRoot()],
+    providers: [i18nProviders]
   });
 
   beforeEach(() => {

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html

@@ -22,7 +22,7 @@
           <tr>
             <td i18n
                 class="bold col-sm-1">Suspended</td>
-            <td class="col-sm-3">{{ user.suspended ? "Yes" : "No" }}</td>
+            <td class="col-sm-3">{{ user.suspended | booleanText }}</td>
           </tr>
           <tr>
             <td i18n
@@ -64,7 +64,7 @@
             <tr>
               <td i18n
                   class="bold col-sm-1">Enabled</td>
-              <td class="col-sm-3">{{ user.user_quota.enabled ? "Yes" : "No" }}</td>
+              <td class="col-sm-3">{{ user.user_quota.enabled | booleanText }}</td>
             </tr>
             <tr>
               <td i18n
@@ -100,7 +100,7 @@
             <tr>
               <td i18n
                   class="bold col-sm-1">Enabled</td>
-              <td class="col-sm-3">{{ user.bucket_quota.enabled ? "Yes" : "No" }}</td>
+              <td class="col-sm-3">{{ user.bucket_quota.enabled | booleanText }}</td>
             </tr>
             <tr>
               <td i18n

src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/boolean-text.pipe.spec.ts

@@ -0,0 +1,47 @@
+import { TestBed } from '@angular/core/testing';
+import { configureTestBed, i18nProviders } from '../../../testing/unit-test-helper';
+
+import { I18n } from '@ngx-translate/i18n-polyfill';
+
+import { BooleanTextPipe } from './boolean-text.pipe';
+
+describe('BooleanTextPipe', () => {
+  let pipe: BooleanTextPipe;
+
+  configureTestBed({
+    providers: [i18nProviders]
+  });
+
+  beforeEach(() => {
+    const i18n = TestBed.get(I18n);
+    pipe = new BooleanTextPipe(i18n);
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('transforms true', () => {
+    expect(pipe.transform(true)).toEqual('Yes');
+  });
+
+  it('transforms true, alternative text', () => {
+    expect(pipe.transform(true, 'foo')).toEqual('foo');
+  });
+
+  it('transforms 1', () => {
+    expect(pipe.transform(1)).toEqual('Yes');
+  });
+
+  it('transforms false', () => {
+    expect(pipe.transform(false)).toEqual('No');
+  });
+
+  it('transforms false, alternative text', () => {
+    expect(pipe.transform(false, 'foo', 'bar')).toEqual('bar');
+  });
+
+  it('transforms 0', () => {
+    expect(pipe.transform(0)).toEqual('No');
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/boolean-text.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { I18n } from '@ngx-translate/i18n-polyfill';
+
+@Pipe({
+  name: 'booleanText'
+})
+export class BooleanTextPipe implements PipeTransform {
+  constructor(private i18n: I18n) {}
+
+  transform(
+    value: any,
+    truthyText: string = this.i18n('Yes'),
+    falsyText: string = this.i18n('No')
+  ): string {
+    return Boolean(value) ? truthyText : falsyText;
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/pipes.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule, DatePipe } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { BooleanTextPipe } from './boolean-text.pipe';
 import { CdDatePipe } from './cd-date.pipe';
 import { CephReleaseNamePipe } from './ceph-release-name.pipe';
 import { CephShortVersionPipe } from './ceph-short-version.pipe';
@@ -23,6 +24,7 @@ import { UpperFirstPipe } from './upper-first.pipe';
 @NgModule({
   imports: [CommonModule],
   declarations: [
+    BooleanTextPipe,
     DimlessBinaryPipe,
     DimlessBinaryPerSecondPipe,
     HealthColorPipe,
@@ -43,6 +45,7 @@ import { UpperFirstPipe } from './upper-first.pipe';
     UpperFirstPipe
   ],
   exports: [
+    BooleanTextPipe,
     DimlessBinaryPipe,
     DimlessBinaryPerSecondPipe,
     HealthColorPipe,
@@ -63,6 +66,7 @@ import { UpperFirstPipe } from './upper-first.pipe';
     UpperFirstPipe
   ],
   providers: [
+    BooleanTextPipe,
     DatePipe,
     CephShortVersionPipe,
     CephReleaseNamePipe,

src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf

@@ -6228,6 +6228,20 @@
           <context context-type="linenumber">1</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="4f20f2d5a6882190892e58b85f6ccbedfa737952" datatype="html">
+        <source>Yes</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/pipes/boolean-text.pipe.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3d3ae7deebc5949b0c1c78b9847886a94321d9fd" datatype="html">
+        <source>No</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/shared/pipes/boolean-text.pipe.ts</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="8fd98fb2a0f24ba72cde0787dd3f02cfc17de469" datatype="html">
         <source>Quality of Service</source>
         <context-group purpose="location">