Admin Generator (Future): Implement group type for combination column

[jamesricky]

Description

The group type in combination columns is used to group multiple values, separated by a •.
This makes it easier than creating a custom formattedMessage and allows empty values instead of requiring an emptyText to prevent results like €13.00 • Shirt • • •.

Another change worth mentioning: the default emptyText value of "-" was changed to an empty string "", as with a single dash, it's unclear what this value was supposed to be, and when nested in groups, the empty text should not be shown in most cases, to prevent results like €13.00 • Shirt • - • - •. Instead, a custom emptyText should be defined in the config when relevant.

Screenshot of Overview column in ProductGrid

Before	After

Related tasks and documents

https://vivid-planet.atlassian.net/browse/SVK-368

Open TODOs/questions

• Merge parent PR Admin Generator (Future): Implement formattedMessage type for combination column #2553
• Find a way to generate a unique formatted-message ID for when a child-field has no field e.g., for fields of type "group" or "formattedMessage" (the current value is __TODO__)
• Make sure the variableName groupValues is always unique, e.g. when primaryText and secondaryText both use the "group" type or when there are nested "group" types.
• Figure out what the default value of emptyValue should be. Currently it is "-". For the "group" type it would make sense to be an empty string, so empty values are not joined into the value-separated string. Maybe it should be consistent with non-group fields, so always an empty string, not just in the "group" type.

[sonarqubecloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[johnnyomair]

Where does the "3" come from?

[jamesricky]

From here: nestedItem${(index + 1).toString()}

comet/packages/admin/cms-admin/src/generator/future/generateGrid/combinationColumn.ts

Lines 132 to 135 in a0ff603

	nestingKeys: [
	...nestingContext.nestingKeys,
	typeof field !== "string" && "field" in field ? field.field : `nestedItem${(index + 1).toString()}`,
	],

This is required to make sure message-IDs and variable-names from items in a group are named unique, as unlike the formattedMessage type, the values of a group type do not have a unique key (fields is an array, instead of an object):

{
    type: "formattedMessage",
    message: "Product: {title} is of category {category}",
    valueFields: {
        title: "title",
        category: { type: "text", field: "category.title" },
    },
};

{
    type: "group",
    fields: [
        { type: "text", field: "title" },
        { type: "number", field: "price", currency: "EUR" },
    ],
}

Therefore removing index as a unique value would cause the following issues:

Using multiple type: "static" values would create two equal message-IDs with different text:

primaryText: {
    type: "formattedMessage",
    message: "Static values: ({staticValues})",
    valueFields: {
        staticValues: {
            type: "group",
            fields: [
                { type: "static", text: "Example static text" },
                { type: "static", text: "Another static text" },
            ],
        },
    },
}

// results in:
const primaryTextStaticValuesGroupValues: string[] = [
    intl.formatMessage({ id: "product.groupInFormattedMessage.primaryText.staticValues.nestedItem", defaultMessage: `Example static text` }),
    intl.formatMessage({ id: "product.groupInFormattedMessage.primaryText.staticValues.nestedItem", defaultMessage: `Another static text` }),
];

And would cause this to create two variables with the same name:

primaryText: {
    type: "group",
    fields: [
        {
            type: "group",
            fields: [
                { type: "text", field: "title" },
                { type: "text", field: "type" },
            ],
        },
        {
            type: "group",
            fields: [
                { type: "text", field: "category.title" },
                { type: "text", field: "description" },
            ],
        },
    ],
},

// results in 
const primaryTextNestedItemGroupValues: string[] = [row.title ?? "", row.type ?? ""];
const primaryTextNestedItemGroupValues: string[] = [row.category?.title ?? "", row.description ?? ""];
const primaryTextGroupValues: string[] = [
    primaryTextNestedItemGroupValues.filter(Boolean).join(" • "),
    primaryTextNestedItemGroupValues.filter(Boolean).join(" • "),
];

---

I know these examples are very niece/unrealistic for a practical use-case, however this makes sure future potential types that require unique values (message-IDs, variables) will work when used inside type: "group".

An alternative, would be to require a key for each item in fields (use an object instead of an array).
Imo an array is easier to configure though.

[johnnyomair]

This is complicated to read (and probably) maintain. Should we add a component to @comet/admin to help with this? I'm thinking of something like this:

<CombinedText 
  separator="°"
  segments={[row.price,  row.category?.title]}
/>

(ignore the naming for now)

[jamesricky]

I'm not sure how easy this would be, as theoretically groups can be nested infinitely inside other types (group, formattedMessage). Rendering a react component might cause some issues.

I could try this out in a follow-up task though, if you like.

[jamesricky]

I created a task for this: https://vivid-planet.atlassian.net/browse/COM-1563