feat: "Upload codelist" functionality in component config

backend/src/Designer/Controllers/OptionsController.cs

@@ -1,4 +1,6 @@
+using System;
 using System.Collections.Generic;
+using System.Text.Json;
 using System.Threading;
 using System.Threading.Tasks;
 using Altinn.Studio.Designer.Helpers;
@@ -128,6 +130,32 @@
         return Ok(newOptionsList);
     }
 
+    /// <summary>
+    /// Create new options list.
+    /// </summary>
+    /// <param name="org">Unique identifier of the organisation responsible for the app.</param>
+    /// <param name="repo">Application identifier which is unique within an organisation.</param>
+    /// <param name="file">File being uploaded.</param>
+    /// <param name="cancellationToken"><see cref="CancellationToken"/> that observes if operation is cancelled.</param>
+    [HttpPost]
+    [Route("upload")]
+    public async Task<IActionResult> UploadFile(string org, string repo, [FromForm] IFormFile file, CancellationToken cancellationToken)
+    {
+        cancellationToken.ThrowIfCancellationRequested();
+        string developer = AuthenticationHelper.GetDeveloperUserName(HttpContext);
+        string fileName = file.FileName.Replace(".json", "");
+
+        try
+        {
+            List<Option> newOptionsList = await _optionsService.UploadNewOption(org, repo, developer, fileName, file, cancellationToken);
+            return Ok(newOptionsList);
+        }
+        catch (Exception e)
+        {
+            return BadRequest(e.Message);
+        }
+    }
+
     /// <summary>
     /// Deletes an option list.
     /// </summary>

backend/src/Designer/Infrastructure/GitRepository/AltinnAppGitRepository.cs

@@ -767,12 +767,15 @@ public async Task<string> GetOptionsList(string optionsListId, CancellationToken
         /// <param name="payload">The contents of the new options list as a string</param>
         /// <param name="cancellationToken">A <see cref="CancellationToken"/> that observes if operation is cancelled.</param>
         /// <returns>The new options list as a string.</returns>
-        public async Task<string> CreateOrOverwriteOptionsList(string optionsListId, string payload, CancellationToken cancellationToken = default)
+        public async Task<string> CreateOrOverwriteOptionsList(string optionsListId, List<Option> payload, CancellationToken cancellationToken = default)
         {
             cancellationToken.ThrowIfCancellationRequested();
 
+            var serialiseOptions = new JsonSerializerOptions { WriteIndented = true };
+            string payloadString = JsonSerializer.Serialize(payload, serialiseOptions);
+
             string optionsFilePath = Path.Combine(OptionsFolderPath, $"{optionsListId}.json");
-            await WriteTextByRelativePathAsync(optionsFilePath, payload, true, cancellationToken);
+            await WriteTextByRelativePathAsync(optionsFilePath, payloadString, true, cancellationToken);
             string fileContent = await ReadTextByRelativePathAsync(optionsFilePath, cancellationToken);
 
             return fileContent;

backend/src/Designer/Services/Implementation/OptionsService.cs

@@ -1,10 +1,12 @@
+using System;
 using System.Collections.Generic;
 using System.Text.Json;
 using System.Threading;
 using System.Threading.Tasks;
 using Altinn.Studio.Designer.Models;
 using Altinn.Studio.Designer.Services.Interfaces;
 using LibGit2Sharp;
+using Microsoft.AspNetCore.Http;
 
 namespace Altinn.Studio.Designer.Services.Implementation;
 
@@ -57,13 +59,34 @@
         cancellationToken.ThrowIfCancellationRequested();
         var altinnAppGitRepository = _altinnGitRepositoryFactory.GetAltinnAppGitRepository(org, repo, developer);
 
-        string payloadString = JsonSerializer.Serialize(payload, new JsonSerializerOptions() { WriteIndented = true });
-        string updatedOptionsString = await altinnAppGitRepository.CreateOrOverwriteOptionsList(optionsListId, payloadString, cancellationToken);
+        string updatedOptionsString = await altinnAppGitRepository.CreateOrOverwriteOptionsList(optionsListId, payload, cancellationToken);
         var updatedOptions = JsonSerializer.Deserialize<List<Option>>(updatedOptionsString);
 
         return updatedOptions;
     }
 
+    /// <inheritdoc />
+    public async Task<List<Option>> UploadNewOption(string org, string repo, string developer, string optionsListId, IFormFile payload, CancellationToken cancellationToken = default)
+    {
+        cancellationToken.ThrowIfCancellationRequested();
+
+        List<Option> deserializedOptions = JsonSerializer.Deserialize<List<Option>>(payload.OpenReadStream(),
+            new JsonSerializerOptions { WriteIndented = true, AllowTrailingCommas = true });
+
+        foreach (Option option in deserializedOptions)
+        {
+            if (string.IsNullOrEmpty(option.Value) || string.IsNullOrEmpty(option.Label))
+            {
+                throw new Exception("Uploaded file is missing one of the following attributes for a option: value or label.");
+            }
+        }
+
+        var altinnAppGitRepository = _altinnGitRepositoryFactory.GetAltinnAppGitRepository(org, repo, developer);
+        await altinnAppGitRepository.CreateOrOverwriteOptionsList(optionsListId, deserializedOptions, cancellationToken);
+
+        return deserializedOptions;
+    }
+
     /// <inheritdoc />
     public void DeleteOptionsList(string org, string repo, string developer, string optionsListId)
     {

backend/src/Designer/Services/Interfaces/IOptionsService.cs

@@ -2,6 +2,7 @@
 using System.Threading;
 using System.Threading.Tasks;
 using Altinn.Studio.Designer.Models;
+using Microsoft.AspNetCore.Http;
 
 namespace Altinn.Studio.Designer.Services.Interfaces;
 
@@ -42,6 +43,18 @@ public interface IOptionsService
     /// <param name="cancellationToken">A <see cref="CancellationToken"/> that observes if operation is cancelled.</param>
     public Task<List<Option>> CreateOrOverwriteOptionsList(string org, string repo, string developer, string optionsListId, List<Option> payload, CancellationToken cancellationToken = default);
 
+    /// <summary>
+    /// Adds a new option to the option list.
+    /// If the file already exists, it will be overwritten.
+    /// </summary>
+    /// <param name="org">Orginisation</param>
+    /// <param name="repo">Repository</param>
+    /// <param name="developer">Username of developer</param>
+    /// <param name="optionsListId">Name of the new options list</param>
+    /// <param name="payload">The options list contents</param>
+    /// <param name="cancellationToken">A <see cref="CancellationToken"/> that observes if operation is cancelled.</param>
+    public Task<List<Option>> UploadNewOption(string org, string repo, string developer, string optionsListId, IFormFile payload, CancellationToken cancellationToken = default);
+
     /// <summary>
     /// Deletes an options list from the app repository.
     /// </summary>

backend/tests/Designer.Tests/Infrastructure/GitRepository/AltinnAppGitRepositoryTests.cs

@@ -336,7 +336,7 @@ public async Task CreateOrOverwriteOptions_WithAppThatHasNoOptionLists_ShouldCre
             string newOptionsListString = JsonSerializer.Serialize(newOptionsList, jsonOptions);
 
             // Act
-            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsListString);
+            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsList);
 
             // Assert
             Assert.Equal(newOptionsListString, savedOptionsList);
@@ -372,7 +372,7 @@ public async Task CreateOrOverwriteOptions_WithAppThatHasOptionLists_ShouldOverw
             string newOptionsListString = JsonSerializer.Serialize(newOptionsList, jsonOptions);
 
             // Act
-            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsListString);
+            string savedOptionsList = await altinnAppGitRepository.CreateOrOverwriteOptionsList(newOptionName, newOptionsList);
 
             // Assert
             Assert.Equal(newOptionsListString, savedOptionsList);

frontend/language/src/nb.json

@@ -1440,6 +1440,9 @@
   "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_code_list_upload": "Last opp din egen kodeliste",
+  "ux_editor.modal_properties_code_list_upload_duplicate_error": "Opplastning feilet, du prøvde å laste opp en fil som finnes fra før.",
+  "ux_editor.modal_properties_code_list_upload_success": "Filen ble lastet opp.",
   "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",
@@ -1575,6 +1578,7 @@
   "ux_editor.modal_text": "Tekst",
   "ux_editor.modal_text_resource_body": "Tekstinnhold",
   "ux_editor.modal_text_resource_body_add": "Legg til tekst",
+  "ux_editor.model_properties_code_list_filename_error": "Filnavnet er ugyldig. Du kan bruke tall og store og små bokstaver fra det norske alfabetet, og understrek, punktum og bindestrek. Filenavnet må starte med en engelsk bokstav",
   "ux_editor.multi_page_warning": "Denne siden inneholder grupper med flere sider. Denne funksjonaliteten er på nåværende tidspunkt ikke støttet i Altinn Studio. Du kan se og redigere komponentene, men ikke sideinformasjonen. Hvis en komponent legges til eller flyttes i en slik gruppe, blir den automatisk plassert på samme side som komponenten over.",
   "ux_editor.no_components_selected": "Velg en side for å se forhåndsvisningen",
   "ux_editor.no_text": "Ingen tekst",

frontend/libs/studio-components/src/components/StudioFileUploader/StudioFileUploader.tsx

@@ -16,6 +16,7 @@ export type FileValidation = {
 };
 
 export type StudioFileUploaderProps = {
+  className?: string;
   onUploadFile: (file: FormData, fileName: string) => void;
   accept?: string;
   size?: StudioButtonProps['size'];
@@ -33,6 +34,7 @@ export type StudioFileUploaderProps = {
 export const StudioFileUploader = forwardRef<HTMLElement, StudioFileUploaderProps>(
   (
     {
+      className,
       onUploadFile,
       accept,
       size,
@@ -60,7 +62,7 @@ export const StudioFileUploader = forwardRef<HTMLElement, StudioFileUploaderProp
     };
 
     return (
-      <form onSubmit={handleSubmit}>
+      <form className={className} onSubmit={handleSubmit}>
         <input
           data-testid={dataTestId}
           type='file'

frontend/packages/shared/src/api/mutations.ts

@@ -41,6 +41,7 @@ import {
   altinn2DelegationsMigrationPath,
   imagePath,
   addImagePath,
+  optionListPath,
 } from 'app-shared/api/paths';
 import type { AddLanguagePayload } from 'app-shared/types/api/AddLanguagePayload';
 import type { AddRepoParams } from 'app-shared/types/api';
@@ -113,6 +114,7 @@ export const updateAppPolicy = (org: string, app: string, payload: Policy) => pu
 export const updateAppMetadata = (org: string, app: string, payload: ApplicationMetadata) => put(appMetadataPath(org, app), payload);
 export const updateAppConfig = (org: string, app: string, payload: AppConfig) => post(serviceConfigPath(org, app), payload);
 export const uploadDataModel = (org: string, app: string, form: FormData) => post<void, FormData>(dataModelsUploadPath(org, app), form, { headers: { 'Content-Type': 'multipart/form-data' } });
+export const uploadOptionList = (org: string, app: string, payload: FormData) => post<void, FormData>(optionListPath(org, app), payload, { headers: { 'Content-Type': 'multipart/form-data' } });
 export const upsertTextResources = (org: string, app: string, language: string, payload: ITextResourcesObjectFormat) => put<ITextResourcesObjectFormat>(textResourcesPath(org, app, language), payload);
 
 // Resourceadm

frontend/packages/shared/src/api/paths.js

@@ -29,6 +29,7 @@ export const dataModelAddXsdFromRepoPath = (org, app, filePath) => `${basePath}/
 export const ruleHandlerPath = (org, app, layoutSetName) => `${basePath}/${org}/${app}/app-development/rule-handler?${s({ layoutSetName })}`; // Get, Post
 export const widgetSettingsPath = (org, app) => `${basePath}/${org}/${app}/app-development/widget-settings`; // Get
 export const optionListsPath = (org, app) => `${basePath}/${org}/${app}/options/option-lists`; // Get
+export const optionListPath = (org, app) => `${basePath}/${org}/${app}/options/upload/`; // Post
 export const optionListIdsPath = (org, app) => `${basePath}/${org}/${app}/app-development/option-list-ids`; // Get
 export const ruleConfigPath = (org, app, layoutSetName) => `${basePath}/${org}/${app}/app-development/rule-config?${s({ layoutSetName })}`; // Get, Post
 export const appMetadataModelIdsPath = (org, app, onlyUnReferenced) => `${basePath}/${org}/${app}/app-development/model-ids?${s({ onlyUnReferenced })}`; // Get

frontend/packages/shared/src/mocks/queriesMock.ts

@@ -212,6 +212,7 @@ export const queriesMock: ServicesContextProps = {
   updateAppMetadata: jest.fn().mockImplementation(() => Promise.resolve()),
   updateAppConfig: jest.fn().mockImplementation(() => Promise.resolve()),
   uploadDataModel: jest.fn().mockImplementation(() => Promise.resolve<JsonSchema>({})),
+  uploadOptionList: jest.fn().mockImplementation(() => Promise.resolve()),
   upsertTextResources: jest
     .fn()
     .mockImplementation(() => Promise.resolve<ITextResourcesObjectFormat>({})),

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

@@ -0,0 +1,7 @@
+.studioFileUploader {
+  padding-top: var(--fds-spacing-4);
+}
+
+.linkStaticCodeLists {
+  margin-bottom: 0;
+}

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

@@ -7,6 +7,7 @@
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 import type { FormComponent } from '../../../../../types/FormComponent';
+import { fileSelectorInputId } from '@studio/testing/testids';
 
 const mockComponent: FormComponent<ComponentType.Dropdown> = {
   id: 'c24d0812-0c34-4582-8f31-ff4ce9795e96',
@@ -45,7 +46,7 @@
     });
 
     expect(
       await screen.findByText(textMock('ux_editor.modal_properties_no_options_found_message')),
     ).toBeInTheDocument();
   });
 
@@ -130,6 +131,58 @@
       await screen.findByText(textMock('ux_editor.modal_properties_error_message')),
     ).toBeInTheDocument();
   });
+
+  it('should render success toast if file upload is successful', async () => {
+    const user = userEvent.setup();
+    const file = new File(['hello'], 'hello.json', { type: 'text/json' });
+    await render({
+      queries: {
+        getOptionListIds: jest
+          .fn()
+          .mockImplementation(() => Promise.resolve<string[]>(optionListIdsMock)),
+      },
+    });
+
+    const btn = screen.getByRole('button', {
+      name: textMock('ux_editor.modal_properties_code_list_upload'),
+    });
+    await user.click(btn);
+
+    const fileInput = screen.getByTestId(fileSelectorInputId);
+
+    await user.upload(fileInput, file);
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      textMock('ux_editor.modal_properties_code_list_upload_success'),
+    );
+  });
+
+  it('should render error toast if file already exists', async () => {
+    const user = userEvent.setup();
+    const file = new File([optionListIdsMock[0]], optionListIdsMock[0] + '.json', {
+      type: 'text/json',
+    });
+    await render({
+      queries: {
+        getOptionListIds: jest
+          .fn()
+          .mockImplementation(() => Promise.resolve<string[]>(optionListIdsMock)),
+      },
+    });
+
+    const btn = screen.getByRole('button', {
+      name: textMock('ux_editor.modal_properties_code_list_upload'),
+    });
+    await user.click(btn);
+
+    const fileInput = screen.getByTestId(fileSelectorInputId);
+
+    await user.upload(fileInput, file);
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      textMock('ux_editor.modal_properties_code_list_upload_duplicate_error'),
+    );
+  });
 });
 
 const render = async ({