As a user, I need to be informed that I cannot have spaces in a data model name

[Ildest]

Description of the bug

When you create a new data modell, you get validation messages for different errors that you can make, for example if the name exists already or you have entered a name with invalid characters.

However, there is no validation message if you enter a name with a space in it. You are allowed to create the model, but when you try to generate it, you get an error message, and you cannot use it later when you select it for a component when you design.

Solution

Make a validation message similar to the other validation messages for creating a data model name, the first time the user presses space when they create a name.

The Opprett datamodell button must be disabled as in this message, and the text should be:

Datamodellnavnet kan ikke ha mellomrom.

Steps To Reproduce

1. Go to Datamodell.
2. Click + Lag ny.
3. type a name containing a space here:
   
4. Click Opprett datamodell.

You get no validation message/warning that the name cannot contain spaces.

Additional Information

Thanks to @lassopicasso for uncovering this problem with me, and to @Annikenkbrathen for discussing the best way to remedy it, design wise.

[ErlingHauan]

This also applies to periods . in the name.

Tip from Michael:

[lassopicasso]

If it has the same rules as useValidateLayoutSetName, perhaps the logic this hook uses can somehow be reused in both areas?

[Annikenkbrathen]

Yes! Can you show us the text for LayoutSetName validations, so we can double-check if we can reuse them? @lassopicasso
We don’t need to create the same validation messages again if they already exist.

[lassopicasso]

Sure 🙂 Here is the text keys used in useValidateLayoutSetName,

• validation_errors.required: "Feltet må fylles ut"
• ux_editor.pages_error_format: "Navnet må bestå av bokstaver (a-z), tall, eller "-", "_" og ".".","
• process_editor.configuration_panel_custom_receipt_layout_set_name_validation: "Navnet må ha minst 2 tegn"
• process_editor.configuration_panel_layout_set_id_not_unique: "Navnet må være unikt"

Point number 3 is called if there is a white space.

Here is the code:

export const getLayoutSetNameForCustomReceipt = (layoutSets: LayoutSets): string | undefined => {
  return layoutSets?.sets?.find((set) => set.tasks?.includes(PROTECTED_TASK_NAME_CUSTOM_RECEIPT))
    ?.id;
};

export const getLayoutSetIdValidationErrorKey = (
  newLayoutSetId: string,
  layoutSets: LayoutSets,
  oldLayoutSetId?: string,
): string => {
  if (oldLayoutSetId === newLayoutSetId) return null;
  if (!newLayoutSetId || newLayoutSetId.trim() === '') return 'validation_errors.required';
  if (!validateLayoutNameAndLayoutSetName(newLayoutSetId)) return 'ux_editor.pages_error_format';
  if (newLayoutSetId.length === 1)
    return 'process_editor.configuration_panel_custom_receipt_layout_set_name_validation';
  if (layoutSets.sets.some((set) => set.id === newLayoutSetId))
    return 'process_editor.configuration_panel_layout_set_id_not_unique';
  return null;
};

[Annikenkbrathen]

Thanks! I think they looks good!

We can definitely reuse these:

process_editor.configuration_panel_layout_set_id_not_unique: "Navnet må være unikt"
process_editor.configuration_panel_custom_receipt_layout_set_name_validation: "Navnet må ha minst 2 tegn"

Instead of disable the button, we can use the same validation as used here. > validation_errors.required: "Feltet må fylles ut"

Is this the same as this photo? (just ta shorter way of sayin it)

ux_editor.pages_error_format: "Navnet må bestå av bokstaver (a-z), tall, eller "-", "_" og ".".","

[ErlingHauan]

@Ildest we should decide whether these validation messages should end with a period. Interested in hearing what you and Dorte find out 😊

Here are a couple of examples:

---