feat(ui-editor): use tabs to visually separate the 3 codelist/option …

…modes (#13345)

frontend/language/src/nb.json

@@ -1376,8 +1376,11 @@
   "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_helper": "Velg kodeliste",
   "ux_editor.modal_properties_code_list_id": "Kodeliste-ID",
   "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>",
   "ux_editor.modal_properties_component_change_id": "Komponent-ID",
   "ux_editor.modal_properties_component_change_id_information": "Ved redigering av komponent ID vil Studio automatisk oppdatere IDen der den er brukt som referanse, men det er ikke garantert at alle eksemplarer er oppdatert.",
   "ux_editor.modal_properties_component_id_not_unique_error": "Komponenten må ha en unik ID",
@@ -1433,7 +1436,7 @@
   "ux_editor.modal_properties_maximum_file_size_helper": "MB",
   "ux_editor.modal_properties_maximum_files": "Maksimalt antall filvedlegg",
   "ux_editor.modal_properties_minimum_files": "Minimalt antall filvedlegg",
-  "ux_editor.modal_properties_no_options_found_message": "appen din inneholder ingen statiske kodelister. Last opp kodeliste for å velge fra listen, eller skriv inn navn på en egendefinert kodeliste.",
+  "ux_editor.modal_properties_no_options_found_message": "Appen din inneholder ingen statiske kodelister. Last opp kodeliste for å velge fra listen. Foreløpig må dette gjøres manuelt, ved å laste opp filen i appens repository. Se beskrivelsen under for eksempel på hvordan dette gjøres. Det vil snart bli mulig å laste opp kodelistefil direkte i Studio.",
   "ux_editor.modal_properties_textResourceBindings_add_button": "Avsluttende tekst for 'Legg til ny'-knapp",
   "ux_editor.modal_properties_textResourceBindings_add_button_add": "Legg til avsluttende tekst for 'Legg til ny'-knapp",
   "ux_editor.modal_properties_textResourceBindings_add_button_full": "Hele teksten for 'Legg til ny'-knapp",
@@ -1514,6 +1517,26 @@
   "ux_editor.no_components_selected": "Velg en side for å se forhåndsvisningen",
   "ux_editor.no_text": "Ingen tekst",
   "ux_editor.open_preview": "Åpne forhåndsvisning",
+  "ux_editor.options.codelist_create_info.heading": "Steg for å skrive inn kodelister manuelt",
+  "ux_editor.options.codelist_create_info.step1": "Gå til Gitea for å lage ny kodeliste.",
+  "ux_editor.options.codelist_create_info.step2": "Klikk på \"Add file\", deretter \"Ny fil\" for å åpne fileditoren.",
+  "ux_editor.options.codelist_create_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_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_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",
+  "ux_editor.options.codelist_upload_info.step1": "Gå til Gitea for å laste opp kodeliste.",
+  "ux_editor.options.codelist_upload_info.step2": "Klikk på \"Add file\", deretter \"Last opp fil\" og last opp kodelisten.",
+  "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.section_heading": "Valg for kodelister",
+  "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",

frontend/packages/shared/src/ext-urls.ts

@@ -1,5 +1,11 @@
 // Docs
-export const altinnDocsUrl = (relativeUrl: string) => `https://docs.altinn.studio/${relativeUrl}`;
+export const altinnDocsUrl = (relativeUrl: string, language: 'nb' | 'en' = 'nb') =>
+  // This check is in place until docs are updated to use the same
+  // structure for all languages in URL. When that is done, we can remove the check and
+  // use the URL that includes language code only.
+  language === 'nb'
+    ? `https://docs.altinn.studio/${language}/${relativeUrl}`
+    : `https://docs.altinn.studio/${relativeUrl}`;
 export const giteaEditLink = (org: string, app: string, location: string) =>
   `/repos/${org}/${app}/_edit/master/${location}`;
 export const getAppLink = (appPrefix: string, hostname: string, org: string, app: string) =>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
-
 import { EditOptions } from './EditOptions';
 import { renderWithMockStore, renderHookWithMockStore } from '../../../testing/mocks';
 import { useLayoutSchemaQuery } from '../../../hooks/queries/useLayoutSchemaQuery';

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

@@ -12,7 +12,6 @@ import type {
   FormCheckboxesComponent,
   FormRadioButtonsComponent,
 } from '../../../types/FormComponent';
-
 import { FormField } from '../../FormField';
 import { StudioButton } from '@studio/components';
 

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

@@ -17,6 +17,7 @@ import { componentSchemaMocks } from '../../testing/componentSchemaMocks';
 import type { ITextResource, ITextResources } from 'app-shared/types/global';
 import { DEFAULT_LANGUAGE } from 'app-shared/constants';
 import { app, org } from '@studio/testing/testids';
+import { ComponentType } from 'app-shared/types/ComponentType';
 
 // Test data:
 const labelTextId = 'labelTextId';
@@ -120,42 +121,47 @@ describe('TextTab', () => {
           ...props,
           formItem: {
             ...layoutMock.components.ComponentWithOptionsMock,
+            optionsId: undefined,
             options: [{ label: labelTextId, value: 'value' }],
           },
         },
       });
-      screen.getByRole('checkbox', {
-        name: textMock('ux_editor.properties_panel.options.use_code_list_label'),
-      });
+
+      expect(screen.getByText(textMock('ux_editor.options.section_heading'))).toBeInTheDocument();
     });
 
-    it('should render options section with codelist view if component has optionId defined', () => {
+    it('should render options section if component schema has optionsId property', () => {
       render({
         props: {
           ...props,
           formItem: {
             ...layoutMock.components.ComponentWithOptionsMock,
-            options: [],
+            optionsId: 'optionsId',
+            options: undefined,
           },
         },
       });
 
-      expect(
-        screen.getByText(textMock('ux_editor.modal_properties_custom_code_list_id')),
-      ).toBeInTheDocument();
+      expect(screen.getByText(textMock('ux_editor.options.section_heading'))).toBeInTheDocument();
     });
 
-    it('should render options section with manual view if component has options', () => {
+    it('should NOT render options section if component schema has neither options nor optionsId property', () => {
       render({
         props: {
           ...props,
           formItem: {
-            ...layoutMock.components.ComponentWithOptionsMock,
-            options: [{ label: labelTextId, value: 'value' }],
+            id: 'ComponentWithoutOptionsMock',
+            type: ComponentType.Input,
+            itemType: 'COMPONENT',
+            propertyPath: 'definitions/inputComponent',
+            dataModelBindings: { simpleBinding: 'some-path' },
           },
         },
       });
-      screen.getByRole('button', { name: textMock('ux_editor.modal_new_option') });
+
+      expect(
+        screen.queryByText(textMock('ux_editor.options.section_heading')),
+      ).not.toBeInTheDocument();
     });
   });
 });