feat: Implement StudioCodeListEditor in component edit view (#13922)

Co-authored-by: Gørild Døhl <[email protected]>

frontend/dashboard/components/RepoList/RepoList.tsx

@@ -69,7 +69,7 @@ export const RepoList = ({
     },
     {
       accessor: 'description',
-      heading: t('dashboard.description'),
+      heading: t('general.description'),
       sortable: true,
     },
     {

frontend/language/src/nb.json

@@ -121,7 +121,6 @@
   "dashboard.created_by": "Opprettet av",
   "dashboard.creating_your_service": "Oppretter appen din",
   "dashboard.data_models": "Datamodeller",
-  "dashboard.description": "Beskrivelse",
   "dashboard.edit_app": "Endre {{appName}} i Studio",
   "dashboard.error_getting_organization_data.message": "Det oppsto en feil da vi skulle hente de organisasjonene som trengs for å kjøre appen.",
   "dashboard.error_getting_organization_data.title": "Kunne ikke laste inn organisasjoner",
@@ -273,6 +272,7 @@
   "general.date_time_format": "{{date}} kl. {{time}}",
   "general.delete": "Slett",
   "general.delete_item": "Slett {{item}}",
+  "general.description": "Beskrivelse",
   "general.edit": "Endre",
   "general.empty_string": "Tom tekst",
   "general.error_message": "Det har oppstått en feil. Hvis problemet fortsetter, <a>ta kontakt med oss</a>.",
@@ -288,6 +288,7 @@
   "general.loading": "Laster...",
   "general.next": "Neste",
   "general.no_options": "Ingen alternativer tilgjengelige",
+  "general.option": "Alternativ",
   "general.options": "Alternativer",
   "general.page": "Side",
   "general.page_error_message": "Vi vet ikke helt hva, men <a>ta kontakt med oss</a>, så graver vi i det sammen.",
@@ -1492,9 +1493,17 @@
   "ux_editor.modal_header_type_helper": "Velg titteltype",
   "ux_editor.modal_new_option": "Legg til alternativ",
   "ux_editor.modal_properties_add_radio_button_options": "Hvordan vil du legge til radioknapper?",
+  "ux_editor.modal_properties_code_list_custom_list": "Egendefinert kodeliste",
+  "ux_editor.modal_properties_code_list_delete_item": "Slett alternativ {{number}}",
+  "ux_editor.modal_properties_code_list_empty": "Kodelisten er tom.",
   "ux_editor.modal_properties_code_list_filename_error": "Filnavnet er ugyldig. Du kan bruke tall, understrek, punktum, bindestrek, og store/små bokstaver fra det norske alfabetet. Filnavnet må starte med en engelsk bokstav.",
+  "ux_editor.modal_properties_code_list_general_error": "Kan ikke lagre kodelisten, den inneholder feil.",
   "ux_editor.modal_properties_code_list_helper": "Velg kodeliste",
   "ux_editor.modal_properties_code_list_id": "Kodeliste-ID",
+  "ux_editor.modal_properties_code_list_item_description": "Beskrivelse for alternativ {{number}}",
+  "ux_editor.modal_properties_code_list_item_helpText": "Hjelpetekst for alternativ {{number}}",
+  "ux_editor.modal_properties_code_list_item_label": "Ledetekst for alternativ {{number}}",
+  "ux_editor.modal_properties_code_list_item_value": "Verdi for alternativ {{number}}",
   "ux_editor.modal_properties_code_list_read_more": "<0 href=\"{{optionsDocs}}\" >Les mer om kodelister</0>",
   "ux_editor.modal_properties_code_list_read_more_dynamic": "<0 href=\"{{optionsDocs}}\" >Les mer om dynamiske kodelister</0>",
   "ux_editor.modal_properties_code_list_read_more_static": "<0 href=\"{{optionsDocs}}\" >Les mer om statiske kodelister</0>",
@@ -1648,7 +1657,7 @@
   "ux_editor.options.codelist_create_info.step4": "Skriv inn kodelisten i tekstfeltet midt på siden. Kodelisten må være i JSON-format.",
   "ux_editor.options.codelist_create_info.step5": "Velg \"Commit endringer\".",
   "ux_editor.options.codelist_create_info.step6": "Du er nå ferdig i Gitea for denne gang. Gå tilbake til Altinn Studio-fanen, eller klikk på Altinn-logoen øverst til venstre i Gitea for å komme tilbake til Altinn Studio.",
-  "ux_editor.options.codelist_only": "Denne komponenten støtter kun oppsett med kodelister.",
+  "ux_editor.options.codelist_only": "Denne komponenten støtter bare oppsett med forhåndsdefinerte kodelister.",
   "ux_editor.options.codelist_referenceId.description": "Her kan du legge til en referanse-ID til en dynamisk kodeliste som er satt opp i koden.",
   "ux_editor.options.codelist_referenceId.description_details": "Du bruker dynamiske kodelister for å tilpasse alternativer for brukerne. Det kan for eksempel være tilpasninger ut fra geografisk plassering, eller valg brukeren gjør tidligere i skjemaet.",
   "ux_editor.options.codelist_upload_info.heading": "Steg for å laste opp kodelister manuelt",
@@ -1657,13 +1666,12 @@
   "ux_editor.options.codelist_upload_info.step3": "Filen må ligge i mappen \"App/options\". Sørg for at den blir plassert der ved å oppgi denne stien i opplastingsfeltet. Når du skriver \"App/options/\", blir feltet automatisk oppdatert med mappesti.",
   "ux_editor.options.codelist_upload_info.step4": "Velg \"Commit endringer\".",
   "ux_editor.options.codelist_upload_info.step5": "Du er nå ferdig i Gitea for denne gang. Gå tilbake til Altinn Studio-fanen, eller klikk på Altinn-logoen øverst til venstre i Gitea for å komme tilbake til Altinn Studio.",
+  "ux_editor.options.multiple": "{{value}} alternativer",
   "ux_editor.options.section_heading": "Valg for kodelister",
+  "ux_editor.options.single": "{{value}} alternativ",
   "ux_editor.options.tab_codelist": "Velg kodeliste",
   "ux_editor.options.tab_manual": "Sett opp egne alternativer",
   "ux_editor.options.tab_referenceId": "Angi referanse-ID",
-  "ux_editor.options_text_description": "Beskrivelse",
-  "ux_editor.options_text_help_text": "Hjelpetekst",
-  "ux_editor.options_text_label": "Ledetekst",
   "ux_editor.page": "Side",
   "ux_editor.page_config_pdf_abort_converting_page_to_pdf": "Avbryt å gjøre om siden til PDF",
   "ux_editor.page_config_pdf_card_heading": "Siden skal være en PDF",

frontend/packages/shared/src/utils/featureToggleUtils.ts

@@ -12,7 +12,8 @@ export type SupportedFeatureFlags =
   | 'exportForm'
   | 'addComponentModal'
   | 'subform'
-  | 'summary2';
+  | 'summary2'
+  | 'codeListEditor';
 
 /*
  * Please add all the features that you want to be toggle on by default here.

frontend/packages/ux-editor/src/components/Properties/Properties.module.css

@@ -10,5 +10,6 @@
 
 .texts {
   background-color: var(--fds-semantic-surface-neutral-default);
-  padding: var(--fds-spacing-5) 0;
+  padding-block: var(--fds-spacing-5) 0;
+  padding-inline: 0;
 }

frontend/packages/ux-editor/src/components/Properties/Text.tsx

@@ -50,7 +50,6 @@ export const Text = () => {
           component={form}
           handleComponentChange={handleComponentChange}
           textResourceBindingKeys={Object.keys(schema.properties.textResourceBindings.properties)}
-          editFormId={formId}
           layoutName={selectedFormLayoutName}
         />
       )}
@@ -64,10 +63,9 @@ export const Text = () => {
                   ComponentSpecificConfig<ComponentType.RadioButtons>)
           }
           handleComponentChange={handleComponentChange}
-          editFormId={formId}
           layoutName={selectedFormLayoutName}
           renderOptions={{
-            onlyCodeListOptions: schema.properties.optionsId && !schema.properties.options,
+            areLayoutOptionsSupported: schema.properties.optionsId! && schema.properties.options,
           }}
         />
       )}

frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.module.css

@@ -4,26 +4,34 @@
   padding: var(--fds-spacing-5) 0 0;
 }
 
-.codeListSwitchWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  margin: var(--fds-spacing-5);
+.optionsHeading {
+  padding-left: var(--fds-spacing-5);
 }
 
 .errorMessage {
   margin: var(--fds-spacing-5) var(--fds-spacing-5) 0;
 }
 
+.codelistTabContent {
+  padding: var(--fds-spacing-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-2);
+}
+
 .manualTabContent {
-  padding: var(--fds-spacing-5) 0;
+  padding-block: var(--fds-spacing-5);
+  padding-inline: 0;
 }
 
-.codelistTabContent {
-  padding: var(--fds-spacing-4);
+.manualTabAlert {
+  margin-inline: var(--fds-spacing-5);
 }
 
-.optionsHeading {
-  padding-left: var(--fds-spacing-5);
+.manualTabDialog[open] {
+  --code-list-modal-min-width: min(80rem, 100%);
+  --code-list-modal-height: min(40rem, 100%);
+
+  min-width: var(--code-list-modal-min-width);
+  height: var(--code-list-modal-height);
 }

frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.test.tsx

@@ -34,7 +34,7 @@ const renderEditOptions = async <T extends ComponentType.Checkboxes | ComponentT
   handleComponentChange?: () => void;
   queries?: Partial<ServicesContextProps>;
   renderOptions?: {
-    onlyCodeListOptions?: boolean;
+    areLayoutOptionsSupported?: boolean;
   };
 } = {}) => {
   const component = {
@@ -204,11 +204,11 @@ describe('EditOptions', () => {
     ).toBeInTheDocument();
   });
 
-  it('should show alert message in Manual tab when prop onlyCodeListOptions is true', async () => {
+  it('should show alert message in Manual tab when prop areLayoutOptionsSupported is false', async () => {
     const user = userEvent.setup();
     await renderEditOptions({
       componentProps: { optionsId: '' },
-      renderOptions: { onlyCodeListOptions: true },
+      renderOptions: { areLayoutOptionsSupported: false },
       queries: {
         getOptionListIds: jest.fn().mockImplementation(() => Promise.resolve<string[]>([])),
       },