Table column mapping and reuse

packages/renderer/src/lib/table/SimpleColumn.spec.ts

@@ -0,0 +1,33 @@
+/**********************************************************************
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+import SimpleColumn from './SimpleColumn.svelte';
+
+test('Expect simple column styling', async () => {
+  const obj = 'Test';
+  render(SimpleColumn, { object: obj });
+
+  const text = screen.getByText(obj);
+  expect(text).toBeInTheDocument();
+  expect(text).toHaveClass('text-sm');
+  expect(text).toHaveClass('text-gray-700');
+});

packages/renderer/src/lib/table/SimpleColumn.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+export let object: string;
+</script>
+
+<div class="text-sm text-gray-700">
+  {object}
+</div>

packages/renderer/src/lib/table/Table.svelte

@@ -186,7 +186,9 @@ function setGridColumns() {
                 : 'justify-self-start'} self-center overflow-hidden max-w-full"
             role="cell">
             {#if column.info.renderer}
-              <svelte:component this="{column.info.renderer}" object="{object}" />
+              <svelte:component
+                this="{column.info.renderer}"
+                object="{column.info.renderMapping?.(object) ?? object}" />
             {/if}
           </div>
         {/each}

packages/renderer/src/lib/table/TestTable.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
 import Table from './Table.svelte';
-import TestColumnId from './TestColumnId.svelte';
-import TestColumnName from './TestColumnName.svelte';
-import TestColumnAge from './TestColumnAge.svelte';
 import { Column, Row } from './table';
+import SimpleColumn from './SimpleColumn.svelte';
 
 let table: Table;
 let selectedItemsNumber: number;
@@ -20,26 +18,29 @@ const people: Person[] = [
   { id: 3, name: 'Charlie', age: 43 },
 ];
 
-const idCol: Column<Person> = new Column('Id', {
+const idCol: Column<Person, string> = new Column('Id', {
   align: 'right',
-  renderer: TestColumnId,
+  renderMapping: obj => obj.id.toString(),
+  renderer: SimpleColumn,
   comparator: (a, b) => a.id - b.id,
 });
 
-const nameCol: Column<Person> = new Column('Name', {
+const nameCol: Column<Person, string> = new Column('Name', {
   width: '3fr',
-  renderer: TestColumnName,
+  renderMapping: obj => obj.name,
+  renderer: SimpleColumn,
   comparator: (a, b) => a.name.localeCompare(b.name),
 });
 
-const ageCol: Column<Person> = new Column('Age', {
+const ageCol: Column<Person, string> = new Column('Age', {
   align: 'right',
-  renderer: TestColumnAge,
+  renderMapping: obj => obj.age.toString(),
+  renderer: SimpleColumn,
   comparator: (a, b) => a.age - b.age,
   initialOrder: 'descending',
 });
 
-const columns: Column<Person>[] = [idCol, nameCol, ageCol];
+const columns: Column<Person, string>[] = [idCol, nameCol, ageCol];
 
 const row = new Row<Person>({
   selectable: person => person.age < 50,

packages/renderer/src/lib/table/table.ts

@@ -19,7 +19,7 @@
 /**
  * Options to be used when creating a Column.
  */
-export interface ColumnInformation<Type> {
+export interface ColumnInformation<Type, RenderType = Type> {
   /**
    * Column alignment, one of 'left', 'center', or 'right'.
    *
@@ -34,6 +34,14 @@ export interface ColumnInformation<Type> {
    */
   readonly width?: string;
 
+  /**
+   * Map the source object to another type for rendering. Allows
+   * easier reuse and sharing of renderers by converting to simple
+   * types (e.g. rendering 'string' instead of 'type.name') or
+   * converting to a different type.
+   */
+  readonly renderMapping?: (object: Type) => RenderType;
+
   /**
    * Svelte component, renderer for each cell in the column.
    * The component must have a property 'object' that has the
@@ -65,10 +73,10 @@ export interface ColumnInformation<Type> {
 /**
  * A table Column.
  */
-export class Column<Type> {
+export class Column<Type, RenderType = Type> {
   constructor(
     readonly title: string,
-    readonly info: ColumnInformation<Type>,
+    readonly info: ColumnInformation<Type, RenderType>,
   ) {}
 }
 

packages/renderer/src/lib/volume/VolumesList.svelte

@@ -22,8 +22,7 @@ import { Column, Row } from '../table/table';
 import VolumeColumnStatus from './VolumeColumnStatus.svelte';
 import VolumeColumnName from './VolumeColumnName.svelte';
 import VolumeColumnEnvironment from './VolumeColumnEnvironment.svelte';
-import VolumeColumnSize from './VolumeColumnSize.svelte';
-import VolumeColumnAge from './VolumeColumnAge.svelte';
+import SimpleColumn from '../table/SimpleColumn.svelte';
 import VolumeColumnActions from './VolumeColumnActions.svelte';
 
 export let searchTerm = '';
@@ -190,19 +189,21 @@ let envColumn = new Column<VolumeInfoUI>('Environment', {
   comparator: (a, b) => a.engineName.localeCompare(b.engineName),
 });
 
-let ageColumn = new Column<VolumeInfoUI>('Age', {
-  renderer: VolumeColumnAge,
+let ageColumn = new Column<VolumeInfoUI, string>('Age', {
+  renderMapping: object => object.age,
+  renderer: SimpleColumn,
   comparator: (a, b) => moment().diff(a.created) - moment().diff(b.created),
 });
 
-let sizeColumn = new Column<VolumeInfoUI>('Size', {
+let sizeColumn = new Column<VolumeInfoUI, string>('Size', {
   align: 'right',
-  renderer: VolumeColumnSize,
+  renderMapping: object => object.humanSize,
+  renderer: SimpleColumn,
   comparator: (a, b) => a.size - b.size,
   initialOrder: 'descending',
 });
 
-const columns: Column<VolumeInfoUI>[] = [
+const columns: Column<VolumeInfoUI, VolumeInfoUI | string>[] = [
   statusColumn,
   nameColumn,
   envColumn,