feat(StudioToggleableTextfield): Create components to handle toggleable textfields and validation

frontend/app-development/router/routes.tsx

@@ -36,8 +36,9 @@ const isLatestFrontendVersion = (version: AppVersion): boolean =>
 
 const UiEditor = () => {
   const { org, app } = useStudioUrlParams();
-  const { data } = useAppVersionQuery(org, app);
-  return isLatestFrontendVersion(data) ? <UiEditorLatest /> : <UiEditorV3 />;
+  const { data: version } = useAppVersionQuery(org, app);
+  if (!version) return null;
+  return isLatestFrontendVersion(version) ? <UiEditorLatest /> : <UiEditorV3 />;
 };
 
 export const routerRoutes: RouterRoute[] = [

frontend/language/src/nb.json

@@ -1563,7 +1563,8 @@
   "ux_editor.component_unknown": "Ukjent komponent",
   "ux_editor.conditional_rendering_connection_header": "Betingede renderingstilkoblinger",
   "ux_editor.container_empty": "Tomt, dra noe inn her...",
-  "ux_editor.container_not_editable_info": "Noen egenskaper for denne komponenten er ikke redigerbare for øyeblikket. Du kan legge til underkomponenter i kolonnen til venstre og redigere tekster.",
+  "ux_editor.container_not_editable_info": "Noen egenskaper for denne komponenten er ikke redigerbare for øyeblikket. Du kan legge til underkomponenter i kolonnen til venstre.",
+  "ux_editor.edit_component.id_help_text": "The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>.",
   "ux_editor.edit_component.loading_schema": "Laster inn skjema",
   "ux_editor.edit_component.show_beta_func": "Vis ny konfigurasjon (BETA)",
   "ux_editor.edit_component.show_beta_func_help_text": "Vi jobber med å få på plass støtte for å redigere alle innstillinger. Ved å huke av her kan du ta i bruk den nye konfigurasjonsvisningen, som støtter flere innstillinger. Merk at denne visningen fortsatt er under utvikling, og vil kunne oppleves som noe ustabil.",

frontend/libs/studio-components/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@studio/icons": "^0.1.0",
+    "ajv": "8.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

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

@@ -1,8 +1,13 @@
-import type { RefObject } from 'react';
-import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type RefObject,
+} from 'react';
 import { convertNumberToString, convertStringToNumber, isStringValidDecimalNumber } from './utils';
-import type { StudioTextfieldProps } from '../StudioTextfield';
-import { StudioTextfield } from '../StudioTextfield';
+import { type StudioTextfieldProps, StudioTextfield } from '../StudioTextfield';
 
 export interface StudioDecimalInputProps extends Omit<StudioTextfieldProps, 'onChange'> {
   description: string;

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  gap: var(--fds-spacing-2);
+}
+
+.prefixIcon {
+  color: var(--fds-semantic-text-neutral-default);
+  margin-top: var(--fds-spacing-7);
+  font-size: var(--fds-sizing-6);
+}
+
+.textfield {
+  width: 100%;
+}

frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { StudioIconTextfield } from './StudioIconTextfield';
+import type { StudioIconTextfieldProps } from './StudioIconTextfield';
+import { KeyVerticalIcon } from '@navikt/aksel-icons';
+import userEvent from '@testing-library/user-event';
+
+describe('StudioIconTextfield', () => {
+  it('render the icon', async () => {
+    renderStudioIconTextfield({
+      icon: <KeyVerticalIcon title='my key icon title' />,
+    });
+    expect(screen.getByTitle('my key icon title')).toBeInTheDocument();
+  });
+
+  it('should render label', () => {
+    renderStudioIconTextfield({
+      icon: <div />,
+      label: 'id',
+    });
+    expect(screen.getByLabelText('id')).toBeInTheDocument();
+  });
+
+  it('should execute onChange callback when input value changes', async () => {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn();
+
+    renderStudioIconTextfield({
+      icon: <div />,
+      label: 'Your ID',
+      onChange: onChangeMock,
+    });
+
+    const input = screen.getByLabelText('Your ID');
+
+    const inputValue = 'my id is 123';
+    await act(() => user.type(input, inputValue));
+    expect(onChangeMock).toHaveBeenCalledTimes(inputValue.length);
+  });
+
+  it('should forward the rest of the props to the input', () => {
+    renderStudioIconTextfield({
+      icon: <div />,
+      label: 'Your ID',
+      disabled: true,
+    });
+    expect(screen.getByLabelText('Your ID')).toBeDisabled();
+  });
+});
+const renderStudioIconTextfield = (props: StudioIconTextfieldProps) => {
+  return render(<StudioIconTextfield {...props} />);
+};

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

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import { StudioTextfield, type StudioTextfieldProps } from '../StudioTextfield';
+import cn from 'classnames';
+
+import classes from './StudioIconTextfield.module.css';
+
+export type StudioIconTextfieldProps = {
+  icon: React.ReactNode;
+} & StudioTextfieldProps;
+
+export const StudioIconTextfield = forwardRef<HTMLDivElement, StudioIconTextfieldProps>(
+  (
+    { icon, className: givenClassName, ...rest }: StudioIconTextfieldProps,
+    ref,
+  ): React.ReactElement => {
+    const className = cn(givenClassName, classes.textfield);
+    return (
+      <div className={classes.container} ref={ref}>
+        <div aria-hidden className={classes.prefixIcon}>
+          {icon}
+        </div>
+        <StudioTextfield {...rest} className={className} />
+      </div>
+    );
+  },
+);
+
+StudioIconTextfield.displayName = 'StudioIconTextfield';

frontend/libs/studio-components/src/components/StudioIconTextfield/index.ts

@@ -0,0 +1 @@
+export { StudioIconTextfield, type StudioIconTextfieldProps } from './StudioIconTextfield';

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

@@ -1,6 +1,6 @@
-import { Textfield } from '@digdir/design-system-react';
 import React, { forwardRef } from 'react';
-import type { SharedTextInputProps } from '../../types/SharedTextInputProps';
+import { Textfield } from '@digdir/design-system-react';
+import { type SharedTextInputProps } from '../../types/SharedTextInputProps';
 import { useTextInputProps } from '../../hooks/useTextInputProps';
 
 export type StudioTextfieldProps = SharedTextInputProps<HTMLInputElement>;

frontend/libs/studio-components/src/components/StudioTextfield/index.ts

@@ -1,2 +1 @@
-export { StudioTextfield } from './StudioTextfield';
-export type { StudioTextfieldProps } from './StudioTextfield';
+export { StudioTextfield, type StudioTextfieldProps } from './StudioTextfield';

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css

@@ -0,0 +1,9 @@
+.viewModeIconsContainer {
+  display: flex;
+  align-items: center;
+  color: var(--fds-semantic-text-neutral-default);
+}
+
+.editIcon {
+  margin-left: auto;
+}

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { StudioTextfieldToggleView } from './StudioTextfieldToggleView';
+import type { StudioTextfieldToggleViewProps } from './StudioTextfieldToggleView';
+import userEvent from '@testing-library/user-event';
+
+describe('StudioTextfieldToggleView', () => {
+  it('should render button text', () => {
+    renderStudioTextfieldToggleView({ children: 'My awesome button' });
+    expect(screen.getByRole('button', { name: 'My awesome button' })).toBeInTheDocument();
+  });
+
+  it('should execute the "onClick" method when button is clicked', async () => {
+    const user = userEvent.setup();
+    const onClickMock = jest.fn();
+
+    renderStudioTextfieldToggleView({ children: 'My awesome button text', onClick: onClickMock });
+
+    await act(() => user.click(screen.getByRole('button', { name: 'My awesome button text' })));
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render the KeyVerticalIcon', () => {
+    renderStudioTextfieldToggleView({ children: 'My awesome button text' });
+
+    // Uses testId to find the KeyVerticalIcon, since it's not available for screen reader.
+    expect(screen.getByTestId('keyIcon')).toBeInTheDocument();
+  });
+
+  it('should render the PencilIcon', () => {
+    renderStudioTextfieldToggleView({ children: 'My awesome button text' });
+
+    // Uses testId to find the EditIcon, since it's not available for screen reader.
+    expect(screen.getByTestId('editIcon')).toBeInTheDocument();
+  });
+
+  it('should forward the rest of the props to the button', () => {
+    renderStudioTextfieldToggleView({ children: 'My awesome button text', disabled: true });
+    expect(screen.getByRole('button', { name: 'My awesome button text' })).toBeDisabled();
+  });
+});
+
+const renderStudioTextfieldToggleView = (props: Partial<StudioTextfieldToggleViewProps>) => {
+  return render(<StudioTextfieldToggleView {...props} />);
+};

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PencilIcon, KeyVerticalIcon } from '@studio/icons';
+import { StudioButton, type StudioButtonProps } from '@studio/components';
+import classes from './StudioTextfieldToggleView.module.css';
+
+export type StudioTextfieldToggleViewProps = StudioButtonProps;
+
+export const StudioTextfieldToggleView = ({
+  onClick,
+  children,
+  ...rest
+}: StudioTextfieldToggleViewProps) => {
+  return (
+    <StudioButton {...rest} onClick={onClick}>
+      <span className={classes.viewModeIconsContainer}>
+        <KeyVerticalIcon data-testid='keyIcon' aria-hidden />
+        {children}
+      </span>
+      <PencilIcon className={classes.editIcon} data-testid='editIcon' aria-hidden />
+    </StudioButton>
+  );
+};

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/index.ts

@@ -0,0 +1,4 @@
+export {
+  StudioTextfieldToggleView,
+  type StudioTextfieldToggleViewProps,
+} from './StudioTextfieldToggleView';

frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioToggleableTextfield.test.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { act, render, screen, fireEvent } from '@testing-library/react';
+import {
+  StudioToggleableTextfield,
+  type StudioToggleableTextfieldProps,
+} from './StudioToggleableTextfield';
+
+import userEvent from '@testing-library/user-event';
+
+describe('StudioToggleableTextfield', () => {
+  it('Renders the view mode by default', () => {
+    renderStudioTextField({
+      viewProps: { children: 'Edit binding' },
+    });
+    expect(screen.getByRole('button', { name: 'Edit binding' })).toBeInTheDocument();
+  });
+
+  it('should toggle to edit-mode when edit button is clicked', async () => {
+    const user = userEvent.setup();
+    renderStudioTextField({
+      viewProps: { children: 'Edit name' },
+      inputProps: { value: '', icon: <div />, label: 'Your name' },
+    });
+    await act(() => user.click(screen.getByRole('button', { name: 'Edit name' })));
+    expect(screen.getByLabelText('Your name')).toBeEnabled();
+  });
+
+  it('should run custom validation when value changes', async () => {
+    const customValidation = jest.fn();
+    const user = userEvent.setup();
+    renderStudioTextField({
+      viewProps: { children: 'Edit name' },
+      inputProps: { value: '', label: 'Your name', icon: <div /> },
+      customValidation,
+    });
+    await act(() => user.click(screen.getByRole('button', { name: 'Edit name' })));
+
+    const typedInputValue = 'John';
+    await act(() => user.type(screen.getByLabelText('Your name'), typedInputValue));
+
+    expect(customValidation).toHaveBeenCalledTimes(typedInputValue.length);
+  });
+
+  it('should be toggle back to view mode on blur', async () => {
+    const user = userEvent.setup();
+
+    renderStudioTextField({
+      viewProps: { children: 'edit' },
+      inputProps: { value: 'value', label: 'Your name', icon: <div /> },
+    });
+
+    await act(() => user.click(screen.getByRole('button', { name: 'edit' })));
+    expect(screen.getByLabelText('Your name')).toBeEnabled();
+    expect(screen.queryByRole('button', { name: 'edit' })).not.toBeInTheDocument();
+
+    fireEvent.blur(screen.getByLabelText('Your name'));
+    await screen.findByRole('button', { name: 'edit' });
+  });
+
+  it('should execute onBlur method when input is blurred', async () => {
+    const onBlurMock = jest.fn();
+    const user = userEvent.setup();
+    renderStudioTextField({
+      viewProps: { children: 'Edit name' },
+      inputProps: { onBlur: onBlurMock, label: 'Your name', icon: <div /> },
+    });
+
+    await act(() => user.click(screen.getByRole('button', { name: 'Edit name' })));
+    fireEvent.blur(screen.getByLabelText('Your name'));
+    expect(onBlurMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not toggle view on blur when input field has error', async () => {
+    const user = userEvent.setup();
+
+    renderStudioTextField({
+      viewProps: { children: 'Edit your name' },
+      inputProps: { label: 'Your name', icon: <div />, error: 'Your name is a required field' },
+    });
+
+    await act(() => user.click(screen.getByRole('button', { name: 'Edit your name' })));
+
+    const inputField = screen.getByLabelText('Your name');
+    fireEvent.blur(inputField);
+
+    expect(inputField).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByText('Your name is a required field')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Edit your name' })).not.toBeInTheDocument();
+  });
+
+  it('should execute onChange method when input value changes', async () => {
+    const onChangeMock = jest.fn();
+    const user = userEvent.setup();
+
+    renderStudioTextField({
+      viewProps: { children: 'edit' },
+      inputProps: { onChange: onChangeMock, label: 'Your name', icon: <div /> },
+    });
+
+    const inputValue = 'John';
+    await act(() => user.click(screen.getByRole('button', { name: 'edit' })));
+    await act(() => user.type(screen.getByLabelText('Your name'), inputValue));
+
+    expect(onChangeMock).toHaveBeenCalledTimes(inputValue.length);
+  });
+
+  it('should render error message if customValidation occured', async () => {
+    const user = userEvent.setup();
+
+    renderStudioTextField({
+      viewProps: { children: 'Edit name' },
+      inputProps: { label: 'Your name', icon: <div /> },
+      customValidation: (value: string) =>
+        value === 'test' ? 'Your name cannot be "test"' : undefined,
+    });
+
+    await act(() => user.click(screen.getByRole('button', { name: 'Edit name' })));
+    await act(() => user.type(screen.getByLabelText('Your name'), 'test'));
+    expect(screen.getByText('Your name cannot be "test"'));
+  });
+});
+
+const renderStudioTextField = (props: Partial<StudioToggleableTextfieldProps>) => {
+  const defaultProps: StudioToggleableTextfieldProps = {
+    inputProps: {
+      value: 'value',
+      icon: <div />,
+    },
+    viewProps: {
+      children: 'edit',
+    },
+    customValidation: jest.fn(),
+  };
+  return render(<StudioToggleableTextfield {...defaultProps} {...props} />);
+};