Skip to content

Commit

Permalink
Adapt prop type validation method to first check for enum field (#13155)
Browse files Browse the repository at this point in the history
* Adapt method that check if property type is valid to first check for enum field

* Fix PR comments

---------

Co-authored-by: William Thorenfeldt <[email protected]>
  • Loading branch information
standeren and wrt95 authored Jul 16, 2024
1 parent 7499ccf commit af3182e
Show file tree
Hide file tree
Showing 9 changed files with 277 additions and 162 deletions.
50 changes: 49 additions & 1 deletion frontend/language/src/nb.json
Original file line number Diff line number Diff line change
Expand Up @@ -1334,7 +1334,7 @@
"ux_editor.component_properties.addButton": "'Legg til'-knapp",
"ux_editor.component_properties.alertOnChange": "Bruker skal få advarsel når de gjør endring",
"ux_editor.component_properties.alertOnDelete": "Bruker skal få advarsel når de sletter",
"ux_editor.component_properties.align": "Plassering*",
"ux_editor.component_properties.align": "Plassering av tekstinnhold",
"ux_editor.component_properties.alwaysShowAddButton": "Vis alltid 'Legg til'-knapp",
"ux_editor.component_properties.attribution": "Opphav",
"ux_editor.component_properties.autocomplete": "HTML autofullfør",
Expand All @@ -1347,6 +1347,7 @@
"ux_editor.component_properties.compact": "Bruk kompakt visning",
"ux_editor.component_properties.componentRef": "ID på komponenten det gjelder (componentRef)",
"ux_editor.component_properties.config_is_expression_message": "Denne egenskapen er konfigurert som et uttrykk, og kan foreløpig ikke redigeres her.",
"ux_editor.component_properties.currency": "Valuta",
"ux_editor.component_properties.current_task": "Kun gjeldende oppgave",
"ux_editor.component_properties.dataListId": "Id på dataliste",
"ux_editor.component_properties.dataTypeIds": "Liste med ID på datatyper som skal vises",
Expand All @@ -1357,6 +1358,51 @@
"ux_editor.component_properties.edit": "Redigeringsvalg",
"ux_editor.component_properties.editButton": "'Endre'-knapp",
"ux_editor.component_properties.elements": "Elementer som skal vises (når ingen er satt vises alle)",
"ux_editor.component_properties.enum_All": "Alt",
"ux_editor.component_properties.enum_AllExceptRequired": "Alle utenom påkrevd",
"ux_editor.component_properties.enum_Component": "Komponent",
"ux_editor.component_properties.enum_CustomBackend": "Egendefinert i kode",
"ux_editor.component_properties.enum_Expression": "Uttrykk",
"ux_editor.component_properties.enum_Required": "Påkrevd",
"ux_editor.component_properties.enum_Schema": "Skjema",
"ux_editor.component_properties.enum_always": "Alltid",
"ux_editor.component_properties.enum_asc": "Alfabetisk",
"ux_editor.component_properties.enum_auto": "Automatisk",
"ux_editor.component_properties.enum_avoid": "Unngå sideskift",
"ux_editor.component_properties.enum_bottom": "Bunn",
"ux_editor.component_properties.enum_celsius": "Celsius",
"ux_editor.component_properties.enum_center": "Senter",
"ux_editor.component_properties.enum_centimeter": "Centimeter",
"ux_editor.component_properties.enum_day": "Dag",
"ux_editor.component_properties.enum_degree": "Grader",
"ux_editor.component_properties.enum_desc": "Motsatt alfabetisk",
"ux_editor.component_properties.enum_foot": "Fot",
"ux_editor.component_properties.enum_gram": "Gram",
"ux_editor.component_properties.enum_hectare": "Hekto",
"ux_editor.component_properties.enum_hour": "Time",
"ux_editor.component_properties.enum_inch": "Tomme",
"ux_editor.component_properties.enum_kilogram": "Kilogram",
"ux_editor.component_properties.enum_kilometer": "Kilometer",
"ux_editor.component_properties.enum_left": "Venstre",
"ux_editor.component_properties.enum_liter": "Liter",
"ux_editor.component_properties.enum_meter": "Meter",
"ux_editor.component_properties.enum_milliliter": "Milliliter",
"ux_editor.component_properties.enum_millimeter": "Millimeter",
"ux_editor.component_properties.enum_millisecond": "Millisekund",
"ux_editor.component_properties.enum_minute": "Minutt",
"ux_editor.component_properties.enum_month": "Måned",
"ux_editor.component_properties.enum_neutral": "Nøytral",
"ux_editor.component_properties.enum_percent": "Prosent",
"ux_editor.component_properties.enum_prefix": "Prefiks (Før tall)",
"ux_editor.component_properties.enum_right": "Høyre",
"ux_editor.component_properties.enum_search": "Søk",
"ux_editor.component_properties.enum_second": "Sekund",
"ux_editor.component_properties.enum_subtle": "Forsiktig",
"ux_editor.component_properties.enum_suffix": "Suffiks (Etter tall)",
"ux_editor.component_properties.enum_text": "Tekst",
"ux_editor.component_properties.enum_top": "Topp",
"ux_editor.component_properties.enum_week": "Uke",
"ux_editor.component_properties.enum_year": "År",
"ux_editor.component_properties.excludedChildren": "Komponenter som skal ekskluderes fra gruppens oppsummering",
"ux_editor.component_properties.filter": "Filter",
"ux_editor.component_properties.format": "Format",
Expand Down Expand Up @@ -1396,6 +1442,7 @@
"ux_editor.component_properties.pageBreak": "PDF-innstillinger (pageBreak)",
"ux_editor.component_properties.pageRef": "Navnet til siden det gjelder (pageRef)",
"ux_editor.component_properties.pagination": "Paginering",
"ux_editor.component_properties.position": "Plassering av valuta",
"ux_editor.component_properties.preselectedOptionIndex": "Indeks/plassering av forhåndsvalgt verdi (preselectedOptionIndex)",
"ux_editor.component_properties.queryParameters": "Parametere i spørringen",
"ux_editor.component_properties.readOnly": "Feltet skal være skrivebeskyttet (readOnly)",
Expand Down Expand Up @@ -1437,6 +1484,7 @@
"ux_editor.component_properties.taskId": "Oppgave-ID",
"ux_editor.component_properties.timeStamp": "Inkluder tidsstempel i dato (på som standard)",
"ux_editor.component_properties.triggers": "Feltet skal trigge:",
"ux_editor.component_properties.unit": "Enhet",
"ux_editor.component_properties.url": "Lenke (URL)",
"ux_editor.component_properties.useComponentGrid": "Bruk komponentens grid-oppsett",
"ux_editor.component_properties.validFileEndings": "Skriv inn gyldige filtyper (Eksempel: .jpeg, .pdf, .png)",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export function LayoutSetsContainer() {
onChange={(event) => onLayoutSetClick(event.target.value)}
value={selectedFormLayoutSetName}
className={classes.layoutSetsDropDown}
size='small'
>
{layoutSetNames.map((set: string) => {
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.objectPropertyContainer {
gap: 0.5rem;
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { EditGrid } from './editModal/EditGrid';
import type { FormItem } from '../../types/FormItem';
import type { UpdateFormMutateOptions } from '../../containers/FormItemContext';
import { useComponentPropertyDescription } from '../../hooks/useComponentPropertyDescription';
import classes from './FormComponentConfig.module.css';

export interface IEditFormComponentProps {
editFormId: string;
Expand Down Expand Up @@ -196,7 +197,7 @@ export const FormComponentConfig = ({
{/** Object properties */}
{objectPropertyKeys.map((propertyKey) => {
return (
<Card key={propertyKey}>
<Card key={propertyKey} className={classes.objectPropertyContainer}>
<Heading level={3} size='xxsmall'>
{componentPropertyLabel(propertyKey)}
</Heading>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FormField } from '../../FormField';
import { Textfield } from '@digdir/designsystemet-react';
import { LegacySelect } from '@digdir/design-system-react';
import { useComponentPropertyLabel } from '../../../hooks/useComponentPropertyLabel';
import { useComponentPropertyEnumValue } from '@altinn/ux-editor/hooks/useComponentPropertyEnumValue';

export interface EditStringValueProps extends IGenericEditComponent {
propertyKey: string;
Expand All @@ -23,6 +24,7 @@ export const EditStringValue = ({
}: EditStringValueProps) => {
const { t } = useTranslation();
const componentPropertyLabel = useComponentPropertyLabel();
const componentEnumValue = useComponentPropertyEnumValue();

const handleValueChange = (newValue: string) => {
handleComponentChange({
Expand All @@ -49,7 +51,7 @@ export const EditStringValue = ({
<LegacySelect
{...fieldProps}
options={enumValues.map((value) => ({
label: value,
label: componentEnumValue(value),
value: value,
}))}
onChange={(e: any) => fieldProps.onChange(e)}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { renderHook } from '@testing-library/react';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { useComponentPropertyEnumValue } from '@altinn/ux-editor/hooks/useComponentPropertyEnumValue';
import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';

const enumValueWithoutText = 'enumValueWithoutText';
const customTextMockToHandleUndefined = (
keys: string | string[],
variables?: KeyValuePairs<string>,
) => {
const key = Array.isArray(keys) ? keys[0] : keys;
if (key === `ux_editor.component_properties.enum_${enumValueWithoutText}`) return key;
return variables
? '[mockedText(' + key + ', ' + JSON.stringify(variables) + ')]'
: '[mockedText(' + key + ')]';
};

jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: customTextMockToHandleUndefined,
}),
}));

describe('useComponentPropertyEnumValue', () => {
it('Returns a function that returns the enum value', () => {
const result = renderHook(() => useComponentPropertyEnumValue()).result.current;
const propertyEnumValue = result('testEnumValue');
expect(propertyEnumValue).toEqual(
textMock('ux_editor.component_properties.enum_testEnumValue'),
);
});
it('Returns a function that returns the enum value if there was no text key for the description', () => {
const result = renderHook(() => useComponentPropertyEnumValue()).result.current;
const propertyEnumValue = result(enumValueWithoutText);
expect(propertyEnumValue).toEqual(enumValueWithoutText);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { useTranslation } from 'react-i18next';
import { useCallback } from 'react';

export const useComponentPropertyEnumValue = () => {
const { t } = useTranslation();
return useCallback(
(value: string) => {
const translationKey: string = `ux_editor.component_properties.enum_${value}`;
const translation = t(translationKey);
return translation === translationKey ? value : translation;
},
[t],
);
};
Loading

0 comments on commit af3182e

Please sign in to comment.