feat: Add type selector for new codelists

frontend/libs/studio-components/src/components/StudioCodelistEditor/StudioCodeListEditor.test.tsx

@@ -24,6 +24,7 @@
 import { codeListWithBooleanValues } from './test-data/codeListWithBooleanValues';
 import { codeListWithMultipleTypes } from './test-data/codeListWithMultipleTypes';
 import { codeListWithUndefinedValues } from './test-data/codeListWithUndefinedValues';
+import { emptyStringItem } from './utils';
 
 // Test data:
 const onAddOrDeleteItem = jest.fn();
@@ -96,7 +97,7 @@
 
   it('Renders a message when the code list is empty', () => {
     renderCodeListEditor({ codeList: [] });
     expect(screen.getByText(texts.emptyCodeList)).toBeInTheDocument();
   });
 
   it('Calls the onChange callback with the new code list when a value is changed', async () => {
@@ -506,6 +507,22 @@
   });
 
   describe('Type handling', () => {
+    it('Renders type selector when code list is empty', () => {
+      expect(1).toBeNull();
+    });
+
+    it("Creates an empty string item when 'text' is selected and 'Add new' is pressed", () => {
+      expect(1).toBeNull();
+    });
+
+    it("Creates an empty number item when 'number' is selected and 'Add new' is pressed", () => {
+      expect(1).toBeNull();
+    });
+
+    it("Creates an empty boolean item when 'boolean' is selected and 'Add new' is pressed", () => {
+      expect(1).toBeNull();
+    });
+
     it('Renders textfield when item value is a string', () => {
       renderCodeListEditor();
       const textfield = screen.getByRole('textbox', { name: texts.itemValue(1) });
@@ -584,6 +601,10 @@
 
       expect(onBlurAny).toHaveBeenCalledWith([...codeListWithNumberValues]);
     });
+
+    it('Added new items should be same type as previous item', () => {
+      expect(1).toBeNull();
+    });
   });
 });
 

frontend/libs/studio-components/src/components/StudioCodelistEditor/StudioCodeListEditor.tsx

@@ -1,6 +1,6 @@
 import type { CodeList } from './types/CodeList';
 import type { ReactElement } from 'react';
-import React, { useMemo, useRef, useCallback } from 'react';
+import React, { useState, useId, useMemo, useRef, useCallback } from 'react';
 import { StudioInputTable } from '../StudioInputTable';
 import type { CodeListItem } from './types/CodeListItem';
 import { StudioButton } from '../StudioButton';
@@ -9,6 +9,7 @@
   addNewCodeListItem,
   changeCodeListItem,
   isCodeListEmpty,
+  getTypeOfLastValue,
 } from './utils';
 import { StudioCodeListEditorRow } from './StudioCodeListEditorRow/StudioCodeListEditorRow';
 import type { CodeListEditorTexts } from './types/CodeListEditorTexts';
@@ -18,7 +19,6 @@
 } from './StudioCodeListEditorContext';
 import classes from './StudioCodeListEditor.module.css';
 import { PlusIcon } from '@studio/icons';
-import { StudioParagraph } from '../StudioParagraph';
 import { areThereCodeListErrors, findCodeListErrors, isCodeListValid } from './validation';
 import type { ValueErrorMap } from './types/ValueErrorMap';
 import { StudioFieldset } from '../StudioFieldset';
@@ -27,6 +27,9 @@
 import { usePropState } from '@studio/hooks';
 import type { Override } from '../../types/Override';
 import type { StudioInputTableProps } from '../StudioInputTable/StudioInputTable';
+import { StudioLabelAsParagraph } from '../StudioLabelAsParagraph';
+import { StudioNativeSelect } from '../StudioNativeSelect';
+import type { CodeListItemValueLiteral } from './types/CodeListItemValue';
 
 export type StudioCodeListEditorProps = {
   codeList: CodeList;
@@ -104,28 +107,35 @@
   onChangeTextResource,
   textResources,
 }: ControlledCodeListEditorProps): ReactElement {
+  const isFirstItem = !codeList || isCodeListEmpty(codeList);
+  const initialValueType = isFirstItem ? 'string' : getTypeOfLastValue(codeList);
+  const [valueType, setValueType] = useState<CodeListItemValueLiteral>(initialValueType);
+
   const { texts } = useStudioCodeListEditorContext();
   const fieldsetRef = useRef<HTMLFieldSetElement>(null);
-
   const errorMap = useMemo<ValueErrorMap>(() => findCodeListErrors(codeList), [codeList]);
 
   const handleAddButtonClick = useCallback(() => {
-    const updatedCodeList = addNewCodeListItem(codeList);
+    const updatedCodeList = addNewCodeListItem(codeList, valueType);
     onChange(updatedCodeList);
     onAddOrDeleteItem?.(updatedCodeList);
-  }, [codeList, onChange, onAddOrDeleteItem]);
+  }, [codeList, valueType, onChange, onAddOrDeleteItem]);
 
   return (
     <StudioFieldset legend={texts.codeList} className={classes.codeListEditor} ref={fieldsetRef}>
-      <CodeListTable
-        codeList={codeList}
-        errorMap={errorMap}
-        onAddOrDeleteItem={onAddOrDeleteItem}
-        onBlurAny={onBlurAny}
-        onChange={onChange}
-        onChangeTextResource={onChangeTextResource}
-        textResources={textResources}
-      />
+      {isFirstItem ? (
+        <TypeSelector setValueType={setValueType} />
+      ) : (
+        <CodeListTable
+          codeList={codeList}
+          errorMap={errorMap}
+          onAddOrDeleteItem={onAddOrDeleteItem}
+          onBlurAny={onBlurAny}
+          onChange={onChange}
+          onChangeTextResource={onChangeTextResource}
+          textResources={textResources}
+        />
+      )}
       <AddButton onClick={handleAddButtonClick} />
       <Errors errorMap={errorMap} />
     </StudioFieldset>
@@ -134,20 +144,7 @@
 
 type CodeListTableProps = ControlledCodeListEditorProps & ErrorsProps;
 
-function CodeListTable(props: CodeListTableProps): ReactElement {
-  return isCodeListEmpty(props.codeList) ? (
-    <EmptyCodeListTable />
-  ) : (
-    <CodeListTableWithContent {...props} />
-  );
-}
-
-function EmptyCodeListTable(): ReactElement {
-  const { texts } = useStudioCodeListEditorContext();
-  return <StudioParagraph size='small'>{texts.emptyCodeList}</StudioParagraph>;
-}
-
-function CodeListTableWithContent({ onBlurAny, ...rest }: CodeListTableProps): ReactElement {
+function CodeListTable({ onBlurAny, ...rest }: CodeListTableProps): ReactElement {
   return (
     <StudioInputTable onBlurAny={onBlurAny}>
       <TableHeadings />
@@ -230,8 +227,33 @@
   }
 }
 
+type TypeSelectorProps = {
+  setValueType: (valueType: CodeListItemValueLiteral) => void;
+};
+
+function TypeSelector({ setValueType }: TypeSelectorProps): ReactElement {
+  // const { texts } = useStudioCodeListEditorContext();
+  const id = useId();
+
+  return (
+    <>
+      <StudioLabelAsParagraph size='sm' htmlFor={id}>
+        Velg hvilken type verdiene i kodelisten skal ha:
+      </StudioLabelAsParagraph>
+      <StudioNativeSelect
+        name={id}
+        onChange={(event) => setValueType(event.target.value as 'string' | 'number' | 'boolean')}
+      >
+        <option value='string'>Tekst (anbefalt)</option>
+        <option value='number'>Tall</option>
+        <option value='boolean'>Boolsk</option>
+      </StudioNativeSelect>
+    </>
+  );
+}
+
 type AddButtonProps = {
-  onClick: () => void;
+  onClick: (valueType?: CodeListItemValueLiteral) => void;
 };
 
 function AddButton({ onClick }: AddButtonProps): ReactElement {

frontend/libs/studio-components/src/components/StudioCodelistEditor/types/CodeListItemValue.ts

@@ -1 +1,3 @@
 export type CodeListItemValue = string | boolean | number;
+
+export type CodeListItemValueLiteral = "string" | "boolean" | "number";

frontend/libs/studio-components/src/components/StudioCodelistEditor/utils.test.ts

@@ -27,43 +27,28 @@
 const createTestCodeList = (): CodeList => ObjectUtils.deepCopy(testCodeList);
 
 describe('StudioCodelistEditor utils', () => {
-  describe('addEmptyCodeListItem', () => {
-    it('Adds an empty string item when the code list is empty', () => {
-      const codeList: CodeList = [];
-      const updatedCodeList = addNewCodeListItem(codeList);
+  describe('addNewCodeListItem', () => {
+    it('Adds an empty string when valueType is string', () => {
+      const codeList: CodeList = [{ value: 'test-value', label: 'stringItem' }];
+      const updatedCodeList = addNewCodeListItem(codeList, 'string');
       expect(updatedCodeList).toEqual([...codeList, emptyStringItem]);
     });
 
-    it("Adds an empty string item when the last item's value is a string", () => {
-      const codeList: CodeList = [
-        { value: 1, label: 'numberItem' },
-        { value: 'two', label: 'stringItem' },
-      ];
-      const updatedCodeList = addNewCodeListItem(codeList);
-      expect(updatedCodeList).toEqual([...codeList, emptyStringItem]);
-    });
-
-    it("Adds an empty number item when the last item's value is a number", () => {
-      const codeList: CodeList = [
-        { value: 'one', label: 'stringItem' },
-        { value: 2, label: 'numberItem' },
-      ];
-      const updatedCodeList = addNewCodeListItem(codeList);
+    it('Adds an empty number item when valueType is number', () => {
+      const codeList: CodeList = [{ value: 1, label: 'numberItem' }];
+      const updatedCodeList = addNewCodeListItem(codeList, 'number');
       expect(updatedCodeList).toEqual([...codeList, emptyNumberItem]);
     });
 
-    it("Adds an empty boolean item when the last item's value is a boolean", () => {
-      const codeList: CodeList = [
-        { value: 0, label: 'numberItem' },
-        { value: true, label: 'booleanItem' },
-      ];
-      const updatedCodeList = addNewCodeListItem(codeList);
+    it('Adds an empty boolean item when valueType is boolean', () => {
+      const codeList: CodeList = [{ value: true, label: 'booleanItem' }];
+      const updatedCodeList = addNewCodeListItem(codeList, 'boolean');
       expect(updatedCodeList).toEqual([...codeList, emptyBooleanItem]);
     });
 
     it('Returns a new instance', () => {
       const codeList = createTestCodeList();
       const updatedCodeList = addNewCodeListItem(codeList);
       expect(updatedCodeList).not.toBe(codeList);
     });
   });

frontend/libs/studio-components/src/components/StudioCodelistEditor/utils.ts

@@ -2,6 +2,7 @@ import type { CodeListItem } from './types/CodeListItem';
 import type { CodeList } from './types/CodeList';
 import type { TypeofResult } from './types/TypeofResult';
 import { ArrayUtils } from '@studio/pure-functions';
+import type { CodeListItemValueLiteral } from './types/CodeListItemValue';
 
 export const emptyStringItem: CodeListItem = {
   value: '',
@@ -18,15 +19,16 @@ export const emptyBooleanItem: CodeListItem = {
   label: '',
 };
 
-export function addNewCodeListItem(codeList: CodeList): CodeList {
-  const newEmptyItem: CodeListItem = createNewEmptyItem(codeList);
+export function addNewCodeListItem(
+  codeList: CodeList,
+  valueType: CodeListItemValueLiteral,
+): CodeList {
+  const newEmptyItem = createNewEmptyItem(codeList, valueType);
   return addCodeListItem(codeList, newEmptyItem);
 }
 
-function createNewEmptyItem(codeList: CodeList): CodeListItem {
-  if (isCodeListEmpty(codeList)) return emptyStringItem;
-
-  switch (getTypeOfLastValue(codeList)) {
+function createNewEmptyItem(codeList: CodeList, valueType: CodeListItemValueLiteral): CodeListItem {
+  switch (valueType) {
     case 'number':
       return emptyNumberItem;
     case 'boolean':