feat: "Upload codelist" functionality in component config

backend/src/Designer/Controllers/OptionsController.cs

@@ -128,6 +128,26 @@ public async Task<ActionResult> CreateOrOverwriteOptionsList(string org, string
         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", "");
+
+        List<Option> newOptionsList = await _optionsService.UploadNewOption(org, repo, developer, fileName, file, cancellationToken);
+
+        return Ok(newOptionsList);
+    }
+
     /// <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

@@ -5,6 +5,7 @@
 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 +58,26 @@ public async Task<List<Option>> CreateOrOverwriteOptionsList(string org, string
         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 });
+
+        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",

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 uploadOption = (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>({})),
+  uploadOption: 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 userEvent from '@testing-library/user-event';
 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',
@@ -130,6 +131,54 @@ describe('EditCodeList', () => {
       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.getByText(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.getByText(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 ({

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

@@ -2,23 +2,28 @@ import React from 'react';
 import { Alert, ErrorMessage } from '@digdir/designsystemet-react';
 import type { IGenericEditComponent } from '../../../componentConfig';
 import { useOptionListIdsQuery } from '../../../../../hooks/queries/useOptionListIdsQuery';
+import { useAddOptionMutation } from '../../../../../hooks/mutations/useAddOptionMutation';
 import { useTranslation, Trans } from 'react-i18next';
-import { StudioNativeSelect, StudioSpinner } from '@studio/components';
-
+import { StudioFileUploader, StudioNativeSelect, StudioSpinner } from '@studio/components';
 import { altinnDocsUrl } from 'app-shared/ext-urls';
 import { FormField } from '../../../../FormField';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { ManualCodelistUploadSteps } from './ManualCodelistUploadSteps';
 import type { SelectionComponentType } from '../../../../../types/FormComponent';
+import { fileSelectorInputId } from '@studio/testing/testids';
+import { removeExtension } from 'app-shared/utils/filenameUtils';
+import { useValidateFileName } from './useValidateFileName';
+import { toast } from 'react-toastify';
+import classes from './EditCodeList.module.css';
 
 export function EditCodeList<T extends SelectionComponentType>({
   component,
   handleComponentChange,
 }: IGenericEditComponent<T>) {
   const { t } = useTranslation();
   const { org, app } = useStudioEnvironmentParams();
-
   const { data: optionListIds, isPending, isError, error } = useOptionListIdsQuery(org, app);
+  const { mutate: uploadOption } = useAddOptionMutation(org, app);
 
   const handleOptionsIdChange = (optionsId: string) => {
     if (component.options) {
@@ -31,6 +36,25 @@ export function EditCodeList<T extends SelectionComponentType>({
     });
   };
 
+  const { validateFileName, getDuplicatedOptionIds } = useValidateFileName(optionListIds);
+
+  const handleInvalidFileName = (file?: FormData, fileName?: string) => {
+    const fileNameWithoutExtension = removeExtension(fileName);
+    if (getDuplicatedOptionIds(optionListIds, fileNameWithoutExtension)) {
+      toast.error(t('ux_editor.modal_properties_code_list_upload_duplicate_error'));
+    }
+  };
+
+  const handleUpload = (file: FormData) => {
+    uploadOption(file, {
+      onSuccess: () => {
+        toast.success(t('ux_editor.modal_properties_code_list_upload_success'));
+      },
+    });
+  };
+
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
   return (
     <div>
       {isPending ? (
@@ -74,10 +98,25 @@ export function EditCodeList<T extends SelectionComponentType>({
           )}
         />
       )}
-      <p style={{ marginBottom: 0 }}>
+      <div className={classes.studioFileUploader}>
+        <StudioFileUploader
+          onUploadFile={handleUpload}
+          accept='.json'
+          variant={'tertiary'}
+          uploaderButtonText={t('ux_editor.modal_properties_code_list_upload')}
+          ref={fileInputRef}
+          customFileValidation={{
+            validateFileName: validateFileName,
+            onInvalidFileName: handleInvalidFileName,
+          }}
+          dataTestId={fileSelectorInputId}
+        />
+      </div>
+
+      <p className={classes.linkStaticCodeLists}>
         <Trans i18nKey={'ux_editor.modal_properties_code_list_read_more_static'}>
           <a
-            href={altinnDocsUrl('altinn-studio/guides/options/static-codelists/')}
+            href={altinnDocsUrl('altinn-studio/reference/data/options/static-codelists/')}
             target='_newTab'
             rel='noopener noreferrer'
           />

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

@@ -0,0 +1,27 @@
+import { useValidateFileName } from './useValidateFileName';
+import { renderHook } from '@testing-library/react';
+
+const optionIdOne = 'one';
+const optionIdTwo = 'two';
+const options: string[] = [optionIdOne];
+const result = renderHook(() => useValidateFileName(options)).result.current;
+
+describe('validateFileNameUtils', () => {
+  it('should return true for valid filename', () => {
+    expect(result.validateFileName(optionIdTwo + '.json')).toBe(true);
+  });
+
+  it('should return false for invalid filename', () => {
+    jest.spyOn(window, 'alert').mockImplementation(() => {});
+    expect(result.validateFileName('_test.json')).toBe(false);
+    expect(window.alert).toHaveBeenCalled();
+  });
+
+  it('should return true for duplicate found', () => {
+    expect(result.getDuplicatedOptionIds(options, optionIdOne)).toBe(true);
+  });
+
+  it('should return false for new value', () => {
+    expect(result.getDuplicatedOptionIds(options, optionIdTwo)).toBe(false);
+  });
+});

frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditCodeList/useValidateFileName.ts

@@ -0,0 +1,30 @@
+import { removeExtension } from 'app-shared/utils/filenameUtils';
+import { useTranslation } from 'react-i18next';
+
+export const useValidateFileName = (optionListIds: string[]) => {
+  const { t } = useTranslation();
+
+  const fileNameRegEx: RegExp = /^[a-zA-Z][a-zA-Z0-9_.\-æÆøØåÅ ]*$/;
+  const validateFileName = (fileName: string): boolean => {
+    const fileNameWithoutExtension = removeExtension(fileName);
+    const nameFollowsRegexRules = Boolean(fileName.match(fileNameRegEx));
+
+    if (!nameFollowsRegexRules) {
+      alert(t('app_data_modelling.upload_xsd_invalid_name_error'));
+      return false;
+    }
+    return !Boolean(optionListIds.find((option) => option === fileNameWithoutExtension));
+  };
+
+  const getDuplicatedOptionIds = (
+    optionListIds: string[],
+    fileNameWithoutExtension: string,
+  ): boolean => {
+    return Boolean(optionListIds.find((option) => option === fileNameWithoutExtension));
+  };
+
+  return {
+    validateFileName,
+    getDuplicatedOptionIds,
+  };
+};

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

@@ -20,6 +20,10 @@
   padding: var(--fds-spacing-5) 0;
 }
 
+.codelistTabContent {
+  padding: var(--fds-spacing-4);
+}
+
 .optionsHeading {
   padding-left: var(--fds-spacing-5);
 }