Make details visualization configurable

[kfrydel]

What type of PR is this?

• Feature

Description

This commit makes the Details visualization configurable, especially:

• adds the possibility to select visible columns and reorder them
• adds formatting options as in Table visualization

The implementation was created with usage of AI and is based on Table visualization implementation. Common parts of the code were extracted to shared/columnUtils.ts file.

How is this tested?

• Unit tests yarn test
• Manually

1. Create a new query and execute it
2. Add visualization
3. Select Details View as Visualization Type
4. Change order of columns
5. Hide some column
6. Edit Column Title, Description, and Alignment of a column
7. For Number column change format
8. For Text column containing HTML click Allow HTML content
9. For Boolean column change values for true and false
10. For Date column change format

Related Tickets & Documents

No ticket.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Rendered view:

Editor:

[eradman]

Very nice feature! My first comment is that for the Details visualization Alignment should be Left for all columns by default.

[kfrydel]

You are right, I changed the default when reusing the Table visualization code. I added a commit that fixes this. Thanks!

[eradman]

Can we re-use ../table/Editor/ColumnEditor.tsx? The functionality for Table and Details is almost identical.

[kfrydel]

Good idea, I extracted the common code to shared directory.
Tests failed on the installation of dependencies. It does not look like the failure is connected to my changes. I suppose it is some intermittent problem. I do not know how to restart them (besides pushing the changes again).

[eradman]

Looks like a transitory failure. I re-triggered the CI tests

[eradman]

Tested manually, no issues found!