Update EditTextResource and EditTextResources

[nkylstad]

Description

These components are used for editing the text resource bindings config of a form component. New design is available, and these components should be updated per the new design.

Figma link: https://www.figma.com/file/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?type=design&node-id=9905-69066&mode=design&t=V5WeYulqoU64hc3N-4

There are 3 different views:

• No text added for a given key
• User is adding/editing a text for a given key
• User has already added a text for the given key

Take into consideration the issues with regards to using general texts described in https://github.com/Altinn/altinn-studio/issues/12297. We should consider using fieldsets to wrap the elements to be able to select them easily in tests and allow screen readers to separate the different text resource blocks.

Acceptance criteria

• All available text keys for a given components textResouceBindings should be displayed and possible to add
• Clicking on the add-button opens the edit/search view inline
• Should still be possible to add new text or search for existing
• Clicking the save/done icon should display the added text
• It should be possible to edit already added texts.
• Clicking the edit button opens the edit/search view inline.
• Edit view should only show default language (nb) -> adding possibility to select from existing languages can be an add-on.

[Annikenkbrathen]

Dette er under arbeid. Vi jobber med utbedring av skisser nå. Språk blir nok ikke tatt med i første iterasjon. Har dialog på denne med @standeren

[standeren]

When updating the view for editing the texts we need to take this issue into account; https://github.com/Altinn/altinn-studio/issues/10703

[TomasEng]

Status på denne saken

En første kodeendring er allerede inne. Det som gjenstår er følgende:

Design

Designet på tekstressurs i redigeringsmodus avviker fortsatt noe fra skissene. Dette omfatter endringer i plassering som sørger for at hierarkiet i datastrukturen blir tydelig og at avstander blir like. I tillegg er tekstverktøyet på alternativer (på sjekkbokser og radioknapper) likt som tekstverktøyet på komponentnivå - dette for å sikre en forutsigbar brukeropplevelse. Det er også fortsatt mulig å endre verdi, selv om dette ikke er en del av skissene. @Annikenkbrathen og jeg foreslår følgende punkter for videre arbeid:

• Beholde muligheten til å se og endre verdi på alternativer, men gjøre den mindre fremtredende. Kanskje vi kan bruke samme komponent som på komponent-ID?
• Se på muligheten til å lukke redigeringsmodus når brukeren klikker utenfor (i stedet for å ha en egen knapp). Det er noen utfordringer knyttet til dette: Hva om brukeren ønsker å ha flere bokser åpne samtidig? Hvordan løser vi dette for tastaturbrukere? Hvordan gjør vi det åpenbart for brukeren at det er slik det fungerer? Og hva skal skje når brukeren klikker på en knapp som flytter seg når boksen lukkes? Vi er nødt til å ha detaljerte, tekniske spesifikasjoner før vi begynner å implementere dette. Personlig heller jeg mot å beholde dagens løsning i stedet for å innføre slike mønstre. Den er langt enklere, og dermed mindre sårbar for feil og uforutsigbarhet. At ting lukker seg når man klikker utenfor er vanlig for modaler og nedtrekksmenyer, men ikke for elementer som tar opp plass på siden. Men hvis vi skal beholde dagens løsning, må vi også sørge for at brukerne forstår forkjellen på "lukk" og "slett" - kanskje det ville vært bedre å bruke piler (som på trekkspillseksjonene) i stedet for kryss?
• Vi kan anta at det første brukerne vil gjøre når de oppretter en komponent eller et alternativ er å sette en ledetekst, så denne boksen bør være åpen som standard.
• Vurdere om verktøyet for alternativer på sjekkbokser og radioknapper burde være i en egen trekkspillseksjon, eller om trekkspillseksjonen for tekst burde ha en mer beskrivende tittel.

Endring av tekst-ID

Endring av tekst-ID er ikke implementert. For den som skal utvikle dette blir det viktg å skille mellom endring av referanse (det man gjør når man plukker en tekst fra søk) og endring av ID-en til selve tekstressursen (da skal teksten beholdes, men alle referanser til den må oppdateres med ny ID). Det er det sistnevnte som ikke er implementert.

Søk

Foreløpig benyttes den gamle søkefunksjonen, siden LegacySelect-komponenten fra designsystemet har en passende søkealgoritme. Skal vi bytte ut denne med Combobox, må vi passe på at vi fortsatt beholder en god søkeopplevelse. Combobox slik den er nå har ikke noe funksjonalitet for å sortere etter beste treff, og den har altfor streng filtrering (alt som ikke starter med det brukeren har skrevet blir filtrert ut). Kanskje vi kan kopiere over sorteringsalgoritmen fra LegacySelect og bruke den til å overstyre resultatene?

Søkeverktøyet mangler også visning av valgt tekst-ID og tekst - dette burde det være en smal sak å få inn.

Valg av språk

Per nå er det kun mulig å se og redigere teksten på bokmål. Vi mangler fortsatt en avklaring på hvilken språkkodestandard vi skal følge. Per nå brukes både ISO 639-1, ISO 639-2 og ISO 639-3 om hverandre. Den mest omfattende standarden er ISO 639-3, og vi har brukere som bruker språk som kun finnes der, så vi må ha støtte for denne. Utfordringen er at denne listen består av over 7000 språk, den endres årlig, og ikke alle språkene har et norsk navn. Mange av dem er utdødd, og de fleste er det lite sannsynlig at det vil være noe behov for. Derfor vil det være mer nærliggende å kun støtte et bestemt utvalg av disse språkene, men da må vi avklare hvordan vi skal begrense dette utvalget. Kanskje den sikreste veien å gå er å la brukeren oppgi språkkoden manuelt?

Skal vi representere språkene med flagg, åpner det også en del spørsmål. Hvordan skiller vi på bokmål og nynorsk eller forskjellige samiske språk? Og hvor finner vi flagg til alle språkene vi skal støtte? Hvilket flagg skal vi bruke til språk som er utbredt i flere land? Sistnevnte kan løses ved å kombinere språkkode med region (f.eks. sw_KE for swahili i Kenya). Ellers er det også utbredt praksis å representere et språk med flagget til landet eller regionen hvor språket har lengst ansiennitet (f.eks. det britiske flagget for engelsk eller det franske for fransk).

Lagring av tekst

Når man har endret en tekst, lagres teksten på onBlur, altså når feltet mister fokus. Her bør vi innføre tidsbestemt avspretting på onChange, slik at dette oppfører seg på samme måte som resten av skjemabyggeren.