Design: Add/edit codelists in Studio

nkylstad commented 1 month ago

### Tasks
- [x] last opp (får du det du får av språk)/ned kodeliste (får default nøkler på norsk)
- [ ] https://github.com/Altinn/altinn-studio/issues/13056
- [x] lage ny kodeliste
- [x] rediger kodelister
- [x] Slett kodeliste
- [x] velg kodeliste i komponent kontekst

Annikenkbrathen commented 2 weeks ago

Sketches for Codelist in component view are ready for review https://www.figma.com/design/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?node-id=12175-9122&t=3Uy5DMFzBwhqR6Jt-1

Dev can probably start with this design, while ux continue work with the library sketches 😊

While working, it was naturally to include new sketches for this issue https://github.com/Altinn/altinn-studio/issues/11226, so its also been made designsuggestions for textcards in a textcard.

Sketches for the codelist library will be added in #13056

ErlingHauan commented 2 weeks ago

Looks very nice and easy to use @Annikenkbrathen! 😄

I have some comments:

Regarding if deleting code list from the component should also delete it from the library: Maybe we can use a popover here, with two buttons: "Slett fra biblioteket" and "Slett kun fra komponenten". Alternatively only delete it from the component, because it can become quite a mess if the user accidentally deletes a code list from the library, and it is used many places.
I agree that nested textfields should open in a modal - the UI can get quite busy when there is a lot of nesting going on
Regarding the heading of the modal - maybe something like this could be feasable? Just a suggestion of the top of my head:
I'm not sure if the "referanse-ID" tab should only describe dynamic code lists, or if it should include static code lists as well. There might be some developers who wish to create their own static code lists in the code, rather than in the ux-editor
It is possible to validate if the reference-ID is valid, we just have to create an endpoint for it (a small task)
Maybe we should have a help text next to the "Bruk kodeliste" switch, that explains what a code list is, as it is not self explanatory (if we decide to keep using help texts going forward)

Leaving this in 🔎Review in case someone else have additional comments 😊

Annikenkbrathen commented 2 weeks ago

Looks very nice and easy to use @Annikenkbrathen! 😄

I have some comments:

Regarding if deleting code list from the component should also delete it from the library: Maybe we can use a popover here, with two buttons: "Slett fra biblioteket" and "Slett kun fra komponenten". Alternatively only delete it from the component, because it can become quite a mess if the user accidentally deletes a code list from the library, and it is used many places.

I agree that nested textfields should open in a modal - the UI can get quite busy when there is a lot of nesting going on

Regarding the heading of the modal - maybe something like this could be feasable? Just a suggestion of the top of my head:

I'm not sure if the "referanse-ID" tab should only describe dynamic code lists, or if it should include static code lists as well. There might be some developers who wish to create their own static code lists in the code, rather than in the ux-editor

It is possible to validate if the reference-ID is valid, we just have to create an endpoint for it (a small task)

Maybe we should have a help text next to the "Bruk kodeliste" switch, that explains what a code list is, as it is not self explanatory (if we decide to keep using help texts going forward)

Leaving this in 🔎Review in case someone else have additional comments 😊

Thanks for great feedback! You have many good thoughts here🕵️‍♂️

Good point, I agree to that. I create an example for popover here!
👏🏻
I like your suggestion, it's connecting the textfield to the radio button and still confirm what textfield it is. Just like a bread crumb path. Here, we need to think of how the text should look like in the compact view when the heading text is so long. But this is something we can solve.
As far as I know, there was only support for dynamic code lists in the "referanse-ID", but @nkylstad probably has an answer to that. The users have the opportunity to upload their static code lists in the first tab, which allows JSON files. Will that cover what you are thinking of @ErlingHauan?
👏🏻
Good suggestion. Me and @Ildest discussed if codelist is a term that the users are familiar with or not, and we are not sure about the need for an explanation here, or if this is something the users will learn after testing an playing in Studio. We do want a text in the library that explains codelist. Do we think that's enough in the beginning and rather add if we see that the users get confused? Or should we add it now to be sure their get an explaination?

Shoud we have help text on the alternatives and referanse-ID tab as well then?

ErlingHauan commented 2 weeks ago

Good point, I agree to that. I create an example for popover here!

That looks good! And maybe we can also reuse that popover when deleting texts? That way, the user won't get a build-up of unused texts in the "Tekst"-page 😊

I like your suggestion, it's connecting the textfield to the radio button and still confirm what textfield it is. Just like a bread crumb path. Here, we need to think of how the text should look like in the compact view when the heading text is so long. But this is something we can solve.

Great 😄

As far as I know, there was only support for dynamic code lists in the "referanse-ID", but @nkylstad probably has an answer to that. The users have the opportunity to upload their static code lists in the first tab, which allows JSON files. Will that cover what you are thinking of @ErlingHauan?

Yes, I see now that it is possible to both upload and choose an existing codelist from the library. And the static codelists would be found in the library, so that covers it!

Good suggestion. Me and @Ildest discussed if codelist is a term that the users are familiar with or not, and we are not sure about the need for an explanation here, or if this is something the users will learn after testing an playing in Studio. We do want a text in the library that explains codelist. Do we think that's enough in the beginning and rather add if we see that the users get confused? Or should we add it now to be sure their get an explaination?

Shoud we have help text on the alternatives and referanse-ID tab as well then?

I think it would be sufficient to have the explanation in the library 🙂 I don't think we need any more help text for alternatives and referanse-ID, they are very well explained as it is 🙌

Annikenkbrathen commented 1 week ago

It looks like we're all set with the reviews, so I'll go ahead and move this to "Done." The next step is to begin the implementation on this task, see https://github.com/Altinn/altinn-studio/issues/10570

Sketches for the codelist library will be added in https://github.com/Altinn/altinn-studio/issues/13056

Altinn / altinn-studio

Design: Add/edit codelists in Studio #12870