feat: merge select and edit tabs in config

[Konrad-Simso]

Description

The PR contains the following:

• Merge of CodeList and Manual tabs in config
• onChange -> onBlur for StudioCodeListEditor
• Update names for text resources in nb.json, codelist -> code_list

It's possible to split it into multiple PRs to make Review & Testing easier, but i'll leave that up to the person doing review.

Video of current design

PR.13685.mp4

Duplicated files

There are a few duplicate files and functions in this PR. These have been marked with Todo: Remove comments, or are in a seperate folder. The duplicates have been created to make it easier to remove old code once we're removing the feature flag optionListEditor.

Localtions of duplicate code:

• OptionListEditor-v1 folder
• OptionTabs.tsx
• OptionUtils.ts

Related Issue(s)

• Merge "select codelist" and "edit codelist" views #13685

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)
• Relevant automated test added (if you find this hard, leave it and we'll help out)

[codecov]

Codecov Report

Attention: Patch coverage is 97.77778% with 5 lines in your changes missing coverage. Please review.

Project coverage is 95.52%. Comparing base (3ab9086) to head (09f0614).
Report is 15 commits behind head on main.

Files with missing lines	Patch %	Lines
.../EditTab/OptionListUploader/OptionListUploader.tsx	91.42%	3 Missing ⚠️
...Tabs/EditTab/OptionListEditor/OptionListEditor.tsx	97.67%	0 Missing and 1 partial ⚠️
...ig/editModal/EditOptions/OptionTabs/OptionTabs.tsx	94.44%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #14137      +/-   ##
==========================================
+ Coverage   95.50%   95.52%   +0.01%     
==========================================
  Files        1817     1824       +7     
  Lines       23652    23758     +106     
  Branches     2735     2754      +19     
==========================================
+ Hits        22590    22694     +104     
- Misses        808      809       +1     
- Partials      254      255       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Ildest]

Ser bra ut dette @Konrad-Simso og @ErlingHauan. Har justert litt på et par tekster, men ingen krise om dere er uenige og avviser dem :-D.

[TomasEng]

Observasjoner fra testing

Funksjonelt ser alt ut til å fungere som det skal. Veldig bra!

Jeg har imidlertid gjort meg opp noen tanker når det gjelder grafikken. Siden dette er bak et funksjonsflagg, kan vi godt flette inn denne koden likevel og fortsette i en annen gren.

Visning uten kodelister

Er det noen grunn til at knappen "Last opp egen kodeliste" ser annerledes ut enn de to andre?

Visning med kodeliste

Her er det flere små detaljer jeg umiddelbart biter meg merke i:

• Ikonene er veldig langt borte fra knappen, så det er vanskelig å se at det er der de hører til. Andre steder har vi løst dette ved å kunn vise ikonene når musen holdes over forelderelementet.
• Ikonene er ikke på linje.
• Blyantikonet oppfører seg rart. Noen ganger er det synlig, andre ganger ikke.
• Fokusrammen er nesten ikke synlig, så det er ikke lett å se hva som er i fokus.
• Innvendige avstander i kodelisteknappen er ikke de samme som øvrige steder hvor vi bruker StudioProperty.Button.

Når det er sagt, er jeg egentlig usikker på om det er riktig å presse inn sletteknappen på samme linje som den andre knappen på denne måten i det hele tatt. Det er et mønster vi bruker i lister, og dette er jo ikke en liste. Kanskje vi bare kan ha sletteknappen under? Da får vi også plass til tekst på den.

Når det gjelder teksten på knappen ("Kodeliste på komponenten" / "Egendefinert kodeliste") er det også noe som skurrer. Både tittelen og undertittelen vil jo være like hele tiden. Kunne vi hatt noe mer informasjon her, f.eks. en kommaseparert liste over verdier?

En alternativ løsning er å ikke bruke StudioProperty-mønsteret i det hele tatt. Det er jo i utgangspunktet tilpasset listevisninger. Alt vi trenger er jo egentlig bare to knapper som sier "Rediger" og "Slett". På den måten kan vi forenkle både grensesnittet og koden betraktelig.

[Annikenkbrathen]

Fint å se Konrad! Bra jobba!

Nå ser jeg ikke hva du har kommentert tekstendringer på @Ildest, men jeg så at den alertmeldingen kanskje manglet en forklaring på hvorfor det er en warning. Ja, du redigerer kodelisten fra biblioteket, men hvorfor er det farlig? Mangler en begrunnelse.

Nå ha jeg bare sett videoen, siden jeg sliter litt med å teste med funksjonsflagg osv. Men tror jeg kan svare på det meste likevel @TomasEng.

Er det noen grunn til at knappen "Last opp egen kodeliste" ser annerledes ut enn de to andre?

Hovedsakelig, så skilte vi på hovedhandlingen og sekundærhandlingen med knappene. I det første designet så var det jo delt inn en hovedhandlingen på hver tab. Men når vi slo de tabbene sammen, så har vi jo fått flere hovedhandlingen i samme tab. Som kan se litt snålt ut, med tanke på at alle 3 alternativene er valgfritt, og i starten vil nok mange laste opp kdoelisten sin direkte.
Men slik jeg husker det, så diskuterte vi oss frem til at "last opp" handlingen antageligvis vil bli mindre og mindre brukt når vi har biblioteket. og hvertfall når det er på org nivå. Vi kan revurdere om vi vil ha tre likestilte knapper, men det tror jeg også fort kan bli litt vanskelig å skille. Å ha last opp funksjonalitet som en teriær knapp er et kjent og vanlig mønster. Så jeg tenker det er greit at last opp knapper ser slik ut.

Ikonene er veldig langt borte fra knappen, så det er vanskelig å se at det er der de hører til.

Andre steder har vi løst dette ved å kun vise ikonene når musen holdes over forelderelementet.
i videoen så vises den kun når man hovrer over (med unntak av slett)

Når det er sagt, er jeg egentlig usikker på om det er riktig å presse inn sletteknappen på samme linje som den andre knappen på denne måten i det hele tatt.

Jeg er usikker selv. og etter en dialog med @Konrad-Simso så kom vi frem til at det ikke var så ulikt hvordan vi har det i trestrukturen på sideoppsettkolonnen, og at det vil funke greit. Men det er jo ikke så pent. Alternativt er det jo at man sletter den når den er i "redigeringsmodus", som de andre komponenten, men det virker litt merkelig å gjøre i denne konteksten også. Vi har prøvd å skape det samme mønsteret for slett som vi gjør med bilde og annet du kan laste opp.

Så eventuelt kan vi tenke på om vi heller vil plassere redigeringsknappen utenfor for at den skal holde seg lik bilde?

Når det gjelder teksten på knappen ("Kodeliste på komponenten" / "Egendefinert kodeliste"

"kodeliste på komponenten" Kommer jo fra knappen som heter "lag ny", så dette feltet ka vi jo kalle hva vi vil. Her må du @Ildest korrigere meg men:
Hva med å ha "Egendefinert kodeliste" eller "egne alternativer" som label, også liste opp ledetekstene så langt det er plass helt til ... bryter. (om det går)

Også for velg fra biblioteket kan vi jo kanskje kalle headereren på modalen "Kodeliste fra biblioteket" også, så det blir en sammenheng mellom den tittelen og tittelen i labelen som er lagt til?

[Konrad-Simso]

Tusen takk for gode tilbakemeldinger @TomasEng og @Annikenkbrathen 😄

Fokusrammen er nesten ikke synlig, så det er ikke lett å se hva som er i fokus.

Angående fokus boksen er jeg usikker på hvorfor den er slik og hvordan jeg kan fikse det.

Innvendige avstander i kodelisteknappen er ikke de samme som øvrige steder hvor vi bruker StudioProperty.Button.

Skal se på det

Når det er sagt, er jeg egentlig usikker på om det er riktig å presse inn sletteknappen på samme linje som den andre knappen på denne måten i det hele tatt. Det er et mønster vi bruker i lister, og dette er jo ikke en liste. Kanskje vi bare kan ha sletteknappen under? Da får vi også plass til tekst på den.

Jeg er enig, men vi kan eventuelt dra ut redigerings knappen og plassere den under. Jeg kommenterer videre på dette under

Nå ser jeg ikke hva du har kommentert tekstendringer på @Ildest, men jeg så at den alertmeldingen kanskje manglet en forklaring på hvorfor det er en warning. Ja, du redigerer kodelisten fra biblioteket, men hvorfor er det farlig? Mangler en begrunnelse.

Vil dette være en bedre tekst?

Du er i ferd med å redigere en kodeliste i biblioteket, dette medfører endringer på alle steder hvor den tas i bruk.

Når det er sagt, er jeg egentlig usikker på om det er riktig å presse inn sletteknappen på samme linje som den andre knappen på denne måten i det hele tatt.

Jeg er usikker selv. og etter en dialog med @Konrad-Simso så kom vi frem til at det ikke var så ulikt hvordan vi har det i trestrukturen på sideoppsettkolonnen, og at det vil funke greit. Men det er jo ikke så pent. Alternativt er det jo at man sletter den når den er i "redigeringsmodus", som de andre komponenten, men det virker litt merkelig å gjøre i denne konteksten også. Vi har prøvd å skape det samme mønsteret for slett som vi gjør med bilde og annet du kan laste opp.
Så eventuelt kan vi tenke på om vi heller vil plassere redigeringsknappen utenfor for at den skal holde seg lik bilde?

Jeg liker forlaget med å flytte redigerings knappen, det vil frigjøre designet mer for visningen av hvilken kodeliste som er valgt. Kanskje redigerings knappen kan se noe lignende ut den som nå ligger i prod? Eller har dere et annet forslag?

Jeg ser også at jeg har fjernet bok/kodeliste ikonet, dette er noe jeg kan ha glemt å legge til igjen ved en av refaktoreringene.

Også for velg fra biblioteket kan vi jo kanskje kalle headereren på modalen "Kodeliste fra biblioteket" også, så det blir en sammenheng mellom den tittelen og tittelen i labelen som er lagt til?

Det er en god ide, takk for innspillet

[TomasEng]

Når det er sagt, er jeg egentlig usikker på om det er riktig å presse inn sletteknappen på samme linje som den andre knappen på denne måten i det hele tatt.

Jeg er usikker selv. og etter en dialog med @Konrad-Simso så kom vi frem til at det ikke var så ulikt hvordan vi har det i trestrukturen på sideoppsettkolonnen, og at det vil funke greit. Men det er jo ikke så pent. Alternativt er det jo at man sletter den når den er i "redigeringsmodus", som de andre komponenten, men det virker litt merkelig å gjøre i denne konteksten også. Vi har prøvd å skape det samme mønsteret for slett som vi gjør med bilde og annet du kan laste opp.

Så eventuelt kan vi tenke på om vi heller vil plassere redigeringsknappen utenfor for at den skal holde seg lik bilde?

Forskjellen mellom denne visningen og trestrukturen er at trestrukturen er en listevisning. Dette er ikke en liste, så derfor tenker jeg at vi med fordel kan benytte oss av friheten vi får med mer plass. Det jeg tenker på er noe slikt:

Det samme gjelder egentlig bildevisningen. Hva tenker dere, @Annikenkbrathen og @Konrad-Simso?

[Annikenkbrathen]

Kanskje redigerings knappen kan se noe lignende ut den som nå ligger i prod? Eller har dere et annet forslag?

Hvordan ser den ut?
Enig i at vi kan se på flytte redigeringsknappen. De andre "legg til" knappene vil jo være borte, så tror det kan fungere fint i denne konteksten.

[Konrad-Simso]

Knappen ser slik ut:

Den er en teriær knapp

[Konrad-Simso]

Forskjellen mellom denne visningen og trestrukturen er at trestrukturen er en listevisning. Dette er ikke en liste, så derfor tenker jeg at vi med fordel kan benytte oss av friheten vi får med mer plass. Det jeg tenker på er noe slikt:

Det samme gjelder egentlig bildevisningen. Hva tenker dere, @Annikenkbrathen og @Konrad-Simso?

Ser bra ut det, hvilke tekster burde vi vise? labels er kanskje en ide?

[Annikenkbrathen]

.

Så eventuelt kan vi tenke på om vi heller vil plassere redigeringsknappen utenfor for at den skal holde seg lik bilde?

Forskjellen mellom denne visningen og trestrukturen er at trestrukturen er en listevisning. Dette er ikke en liste, så derfor tenker jeg at vi med fordel kan benytte oss av friheten vi får med mer plass. Det jeg tenker på er noe slikt: Det samme gjelder egentlig bildevisningen. Hva tenker dere, @Annikenkbrathen og @Konrad-Simso?

Jeg synes dette ser fint ut @TomasEng. Det er oversiktlig og enkelt å interagere med.
Men samtidig så innfører vi enda en ny stil på knapper her, som vi må vurdere.

Den fra dynamikk er jo tilnærmet lik, så vi kan jo bruke den samme som denne. Da kaller vi redigerknappen for "endre" istedet. Ellers likt ditt forslag Tomas.

Til et nytt issue må vi få sett på en guideline for bruk av knapper, og plassering av ikoner ved slett, lukk, rediger osv.
Jeg har funnet mye ulike stiler i Studio. Her er nok de som ligger i Utorming det vi vil strebe mot, i og med at de er sist oppdatert. Noen andre her finner vi jo blant annet på språksiden som ikke er redesignet.

I tillegg til at vi har sett på alternativer i skisser i Figma, som vi må se på om vi vil ha istedet.

[TomasEng]

Ser bra ut det, hvilke tekster burde vi vise? labels er kanskje en ide?

Jeg tenker det er en god ide. Det bør jo ikke være for mye, ellers er det jo ikke noe poeng i å ha en modal for redigeringsmodus i utgangspunktet. Kanskje "Rediger"-knappen heller burde hete "Vis eller endre", for å tydeliggjøre at her kan man også klikke for å se alle detaljer, selv om man ikke nødvendigvis vil endre noe?

Vi kan revurdere om vi vil ha tre likestilte knapper, men det tror jeg også fort kan bli litt vanskelig å skille. Å ha last opp funksjonalitet som en teriær knapp er et kjent og vanlig mønster. Så jeg tenker det er greit at last opp knapper ser slik ut.

Da skal jeg ikke være vanskelig på det, men kanskje de i det minste burde ha samme justering? Er det ikke litt rotete når de sekundære knappene er midtstilt mens den tertiære er venstrestilt?

[Annikenkbrathen]

Ser bra ut det, hvilke tekster burde vi vise? labels er kanskje en ide?

Jeg tenker det er en god ide. Det bør jo ikke være for mye, ellers er det jo ikke noe poeng i å ha en modal for redigeringsmodus i utgangspunktet. Kanskje "Rediger"-knappen heller burde hete "Vis eller endre", for å tydeliggjøre at her kan man også klikke for å se alle detaljer, selv om man ikke nødvendigvis vil endre noe?

Vi ser jo hvordan den ser ut i preview mest sannsynlig? så er kanskje ikke på den endre visningen man bruker fir å se komponenten uansett? Kanskje detbare holder med "Endre" på knappen, så finner de jo fort ut av hva som skjer og hva de ser når de trykker på den.

[Ildest]

Ser bra ut det, hvilke tekster burde vi vise? labels er kanskje en ide?

Jeg tenker det er en god ide. Det bør jo ikke være for mye, ellers er det jo ikke noe poeng i å ha en modal for redigeringsmodus i utgangspunktet. Kanskje "Rediger"-knappen heller burde hete "Vis eller endre", for å tydeliggjøre at her kan man også klikke for å se alle detaljer, selv om man ikke nødvendigvis vil endre noe?

Vi ser jo hvordan den ser ut i preview mest sannsynlig? så er kanskje ikke på den endre visningen man bruker fir å se komponenten uansett? Kanskje detbare holder med "Endre" på knappen, så finner de jo fort ut av hva som skjer og hva de ser når de trykker på den.

Enig i at knappen bør hete Endre, slik at den følger anbefalingene for knappetekster som vi innholdsdesignere har laget. Tror også det holder med bare Endre på den, ikke mer. Når det gjelder denne teksten, vil jeg gjerne foreslå en liten endring.
"Du er i ferd med å redigere en kodeliste i biblioteket, dette medfører endringer på alle steder hvor den tas i bruk."

Forslag:
Du er i ferd med å endre en kodeliste i biblioteket. Da endrer du også kodelisten for alle andre steder der den blir brukt.

[TomasEng]

Vi ser jo hvordan den ser ut i preview mest sannsynlig? så er kanskje ikke på den endre visningen man bruker fir å se komponenten uansett? Kanskje detbare holder med "Endre" på knappen, så finner de jo fort ut av hva som skjer og hva de ser når de trykker på den.

I forhåndsvisningen ser man ikke dataverdien, noe som er en ganske viktig del av kodelisten. Så forhåndsvisningen er ikke tilstrekkelig til å vise all informasjon.

Nå skal jeg bare snakke for meg selv, så hvorvidt dette gjelder den gemene hop kan jeg ikke si noe om. Jeg har sett flere grensesnitt som oppfører seg nettopp på denne måten; at knappen som heter "Endre" er den eneste som leder til informasjonen jeg vil se. Som bruker blir jeg da veldig usikker når jeg bare vil se informasjonen. Hvilke prosesser setter jeg i gang av å klikke på "Endre"? Mister jeg noe data? Når det står "Se eller endre" føles det mye tryggere å klikke på knappen.

Et mer konkret eksempel på noe tilsvarende er når man vil sjekke rutetider for toget, og den eneste måten å gjøre det på er via knappen "kjøp billett", selv om man ikke har noen intensjon om å kjøpe billett der og da.

Begge deler har det til felles at brukeren må klikke på en knapp som beskriver en annen og mer interagerende handling enn det vedkommende ønsker å utføre. Min hypotese er at det gjør brukeren usikker og redd for å gjøre feil. Men hvis det er faglige anbefaliger som sier noe annet, stoler jeg jeg så klart på det.

[TomasEng]

Viser til morgenmøtet og godkjenner denne, slik at vi kan fortsette med de grafiske endringene i en ny gren.