From 0f82322f15f183615a99814a6109156dcab9cc08 Mon Sep 17 00:00:00 2001
From: Kiefer Chang <kiefer.chang@suse.com>
Date: Wed, 28 Oct 2020 15:18:26 +0800
Subject: [PATCH] mgr/dashboard: support custom executing template in table
 cells

Now we can modify the style of a table that has an executing state
by providing a custom config when declaring columns: e.g.,

```
    this.columns = [
      {
        prop: 'id',
        name: $localize`ID`,
        flexGrow: 1,
        cellTransformation: CellTemplate.executing,
        customTemplateConfig: {
          valueClass: 'a',
          executingClass: 'b'
        }
      },
```

Which makes the cell value render with class `a` and the executing state
(e.g. (updating)) render with class `b`.

Signed-off-by: Kiefer Chang <kiefer.chang@suse.com>
---
 .../datatable/table/table.component.html      |  7 ++-
 .../datatable/table/table.component.spec.ts   | 52 +++++++++++++++++++
 .../src/app/shared/enum/cell-template.enum.ts | 10 ++++
 3 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 85473621490..0d5460a989e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -255,13 +255,16 @@
 </ng-template>
 
 <ng-template #executingTpl
+             let-column="column"
              let-row="row"
              let-value="value">
   <i [ngClass]="[icons.spinner, icons.spin]"
      *ngIf="row.cdExecuting"></i>
-  {{ value }}
+  <span [ngClass]="column?.customTemplateConfig?.valueClass">
+    {{ value }}
+  </span>
   <span *ngIf="row.cdExecuting"
-        class="text-muted italic">({{ row.cdExecuting }})</span>
+        [ngClass]="column?.customTemplateConfig?.executingClass ? column.customTemplateConfig.executingClass : 'text-muted italic'">({{ row.cdExecuting }})</span>
 </ng-template>
 
 <ng-template #classAddingTpl
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
index b060d99b045..f3d4f4e36c5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
@@ -8,6 +9,7 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import _ from 'lodash';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
+import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
 import { CdTableColumnFilter } from '~/app/shared/models/cd-table-column-filter';
 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
@@ -514,6 +516,56 @@ describe('TableComponent', () => {
     });
   });
 
+  describe('test cell transformations', () => {
+    interface ExecutingTemplateConfig {
+      valueClass?: string;
+      executingClass?: string;
+    }
+
+    const testExecutingTemplate = (templateConfig?: ExecutingTemplateConfig) => {
+      const state = 'updating';
+      const value = component.data[0].a;
+
+      component.autoReload = -1;
+      component.columns[0].cellTransformation = CellTemplate.executing;
+      if (templateConfig) {
+        component.columns[0].customTemplateConfig = templateConfig;
+      }
+      component.data[0].cdExecuting = state;
+      fixture.detectChanges();
+
+      const elements = fixture.debugElement
+        .query(By.css('datatable-body-row datatable-body-cell'))
+        .queryAll(By.css('span'));
+      expect(elements.length).toBe(2);
+
+      // Value
+      const valueElement = elements[0];
+      if (templateConfig?.valueClass) {
+        templateConfig.valueClass.split(' ').forEach((clz) => {
+          expect(valueElement.classes).toHaveProperty(clz);
+        });
+      }
+      expect(valueElement.nativeElement.textContent.trim()).toBe(`${value}`);
+      // Executing state
+      const executingElement = elements[1];
+      if (templateConfig?.executingClass) {
+        templateConfig.executingClass.split(' ').forEach((clz) => {
+          expect(executingElement.classes).toHaveProperty(clz);
+        });
+      }
+      expect(executingElement.nativeElement.textContent.trim()).toBe(`(${state})`);
+    };
+
+    it.only('should display executing template', () => {
+      testExecutingTemplate();
+    });
+
+    it.only('should display executing template with custom classes', () => {
+      testExecutingTemplate({ valueClass: 'a b', executingClass: 'c d' });
+    });
+  });
+
   describe('reload data', () => {
     beforeEach(() => {
       component.ngOnInit();
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
index 586f4376f04..73ce1f23919 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
@@ -4,6 +4,16 @@ export enum CellTemplate {
   perSecond = 'perSecond',
   checkIcon = 'checkIcon',
   routerLink = 'routerLink',
+  // Display the cell with an executing state. The state can be set to the `cdExecuting`
+  // attribute of table rows.
+  // It supports an optional custom configuration:
+  // {
+  //   ...
+  //   cellTransformation: CellTemplate.executing,
+  //   customTemplateConfig: {
+  //     valueClass?: string;       // Cell value classes.
+  //     executingClass?: string;   // Executing state classes.
+  // }
   executing = 'executing',
   classAdding = 'classAdding',
   // Display the cell value as a badge. The template
-- 
2.39.5