From cc55ac32ca2597bb7dad7e160fc4aabaac415529 Mon Sep 17 00:00:00 2001 From: Tim deBoer Date: Mon, 27 Nov 2023 16:09:43 -0500 Subject: [PATCH] feat: column type mapping It has come up a couple times so I thought I should make a proposal for how I think we should share column renderers between tables. IMHO we have three cases: 1. Type-specific column rendering like Image name. These should continue to be type-specific as today. 2. Generic columns that really just need to (e.g.) render a string in a certain way. 3. The middle ground where it's a little more complex, or maybe you need to render a couple properties. This commit adds a simple type-mapping function to directly support #2, and applies it to VolumeList. For the middle ground, I think we're going to have convenient cases where objects used in two tables have the same property types & names (e.g. { id: string, some-prop: number}) and we can just render those, and other cases where maybe the renderer should use another type (e.g. Condition) or one of the objects has a different property name. Again, this commit provides a simple way for tables to do whatever mapping is required. Based on top of #5005 assuming that would merge soon. Fixes #5002. We would share more columns as we add other tables that would use them. Signed-off-by: Tim deBoer --- .../src/lib/table/SimpleColumn.spec.ts | 33 +++++++++++++++++++ ...stColumnAge.svelte => SimpleColumn.svelte} | 4 ++- packages/renderer/src/lib/table/Table.svelte | 4 ++- .../src/lib/table/TestColumnId.svelte | 5 --- .../src/lib/table/TestColumnName.svelte | 5 --- .../renderer/src/lib/table/TestTable.svelte | 13 ++++---- packages/renderer/src/lib/table/table.ts | 8 +++++ .../src/lib/volume/VolumeColumnAge.svelte | 9 ----- .../src/lib/volume/VolumeColumnSize.svelte | 9 ----- .../src/lib/volume/VolumesList.svelte | 9 ++--- 10 files changed, 59 insertions(+), 40 deletions(-) create mode 100644 packages/renderer/src/lib/table/SimpleColumn.spec.ts rename packages/renderer/src/lib/table/{TestColumnAge.svelte => SimpleColumn.svelte} (50%) delete mode 100644 packages/renderer/src/lib/table/TestColumnId.svelte delete mode 100644 packages/renderer/src/lib/table/TestColumnName.svelte delete mode 100644 packages/renderer/src/lib/volume/VolumeColumnAge.svelte delete mode 100644 packages/renderer/src/lib/volume/VolumeColumnSize.svelte diff --git a/packages/renderer/src/lib/table/SimpleColumn.spec.ts b/packages/renderer/src/lib/table/SimpleColumn.spec.ts new file mode 100644 index 0000000000000..833e59c4039f2 --- /dev/null +++ b/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'); +}); diff --git a/packages/renderer/src/lib/table/TestColumnAge.svelte b/packages/renderer/src/lib/table/SimpleColumn.svelte similarity index 50% rename from packages/renderer/src/lib/table/TestColumnAge.svelte rename to packages/renderer/src/lib/table/SimpleColumn.svelte index dc71cbc7635a1..ddb50874fce39 100644 --- a/packages/renderer/src/lib/table/TestColumnAge.svelte +++ b/packages/renderer/src/lib/table/SimpleColumn.svelte @@ -2,4 +2,6 @@ export let object: any; -{object.age} +
+ {object} +
diff --git a/packages/renderer/src/lib/table/Table.svelte b/packages/renderer/src/lib/table/Table.svelte index 2aa02886b1203..3d9c75c71cad4 100644 --- a/packages/renderer/src/lib/table/Table.svelte +++ b/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} - + {/if} {/each} diff --git a/packages/renderer/src/lib/table/TestColumnId.svelte b/packages/renderer/src/lib/table/TestColumnId.svelte deleted file mode 100644 index 70aab1f465538..0000000000000 --- a/packages/renderer/src/lib/table/TestColumnId.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -{object.id} diff --git a/packages/renderer/src/lib/table/TestColumnName.svelte b/packages/renderer/src/lib/table/TestColumnName.svelte deleted file mode 100644 index 4fd618eddc59d..0000000000000 --- a/packages/renderer/src/lib/table/TestColumnName.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -{object.name} diff --git a/packages/renderer/src/lib/table/TestTable.svelte b/packages/renderer/src/lib/table/TestTable.svelte index cd5b957c7b06c..8678f20915d28 100644 --- a/packages/renderer/src/lib/table/TestTable.svelte +++ b/packages/renderer/src/lib/table/TestTable.svelte @@ -1,9 +1,7 @@ - -
- {object.age} -
diff --git a/packages/renderer/src/lib/volume/VolumeColumnSize.svelte b/packages/renderer/src/lib/volume/VolumeColumnSize.svelte deleted file mode 100644 index 3682dfdd5c448..0000000000000 --- a/packages/renderer/src/lib/volume/VolumeColumnSize.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - -
- {object.humanSize} -
diff --git a/packages/renderer/src/lib/volume/VolumesList.svelte b/packages/renderer/src/lib/volume/VolumesList.svelte index 7dac703fa6156..005645e863fe6 100644 --- a/packages/renderer/src/lib/volume/VolumesList.svelte +++ b/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 = ''; @@ -191,13 +190,15 @@ let envColumn = new Column('Environment', { }); let ageColumn = new Column('Age', { - renderer: VolumeColumnAge, + renderMapping: object => object.age, + renderer: SimpleColumn, comparator: (a, b) => moment().diff(a.created) - moment().diff(b.created), }); let sizeColumn = new Column('Size', { align: 'right', - renderer: VolumeColumnSize, + renderMapping: object => object.humanSize, + renderer: SimpleColumn, comparator: (a, b) => a.size - b.size, initialOrder: 'descending', });