feat: added reference and combination

frontend/language/src/nb.json

@@ -909,6 +909,7 @@
   "schema_editor.pattern_test_field": "Testfelt for regex",
   "schema_editor.promote": "Konverter til type",
   "schema_editor.properties": "Egenskaper",
+  "schema_editor.reference": "Referanse",
   "schema_editor.reference_to": "Refererer til",
   "schema_editor.regex": "Regex",
   "schema_editor.required": "Påkrevd",

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

@@ -41,3 +41,6 @@ export * from './StudioToggleableTextfield';
 export * from './StudioToggleableTextfieldSchema';
 export * from './StudioTreeView';
 export * from './StudioTabs';
+export * from './StudioDivider';
+export * from './StudioPageError';
+export * from './StudioError';

frontend/packages/schema-editor/src/components/AddPropertiesMenu/AddPropertiesMenu.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  CombinationIcon,
+  ReferenceIcon,
+  ObjectIcon,
+  StringIcon,
+  BooleanIcon,
+  NumberIcon,
+  PlusIcon,
+} from '@studio/icons';
+import { ObjectKind, FieldType } from '@altinn/schema-model';
+import { type StudioButtonProps, StudioDropdownMenu } from '@studio/components';
+
+export interface AddPropertiesMenuProps {
+  onItemClick?: (kind: ObjectKind, fieldType?: FieldType) => void;
+  anchorButtonProps?: StudioButtonProps;
+}
+
+const propertyItems = [
+  { kind: ObjectKind.Field, fieldType: FieldType.Object, icon: ObjectIcon },
+  { kind: ObjectKind.Field, fieldType: FieldType.String, icon: StringIcon },
+  { kind: ObjectKind.Field, fieldType: FieldType.Integer, icon: NumberIcon },
+  { kind: ObjectKind.Field, fieldType: FieldType.Number, icon: NumberIcon },
+  { kind: ObjectKind.Field, fieldType: FieldType.Boolean, icon: BooleanIcon },
+  { kind: ObjectKind.Combination, icon: CombinationIcon },
+  { kind: ObjectKind.Reference, icon: ReferenceIcon },
+];
+
+export const AddPropertiesMenu = ({ onItemClick, anchorButtonProps }: AddPropertiesMenuProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <StudioDropdownMenu
+      anchorButtonProps={{
+        children: t('schema_editor.add_property'),
+        color: 'second',
+        icon: <PlusIcon />,
+        variant: 'secondary',
+        ...anchorButtonProps,
+      }}
+      size='small'
+      placement='bottom-start'
+    >
+      {propertyItems.map(({ kind, fieldType, icon: Icon }) => (
+        <StudioDropdownMenu.Item
+          key={`${kind}-${fieldType}`}
+          onClick={() => onItemClick(kind, fieldType)}
+          icon={<Icon />}
+        >
+          {t(`schema_editor.add_${fieldType || kind}`)}
+        </StudioDropdownMenu.Item>
+      ))}
+    </StudioDropdownMenu>
+  );
+};

frontend/packages/schema-editor/src/components/AddPropertiesMenu/index.ts

@@ -0,0 +1 @@
+export { AddPropertiesMenu } from './AddPropertiesMenu';

frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.test.tsx

@@ -95,49 +95,67 @@ describe('ItemFieldsTab', () => {
     expect(await screen.findByText(textAdd)).toBeDefined();
   });
 
-  test('Model is saved with correct payload when a name is changed', async () => {
+  test('Should save the model when user clicks the dropdown menu items', async () => {
     renderItemFieldsTab();
-    const suffix = 'Duck';
-    for (const fieldName of fieldNames) {
-      await user.type(screen.getByDisplayValue(fieldName), suffix);
-      await user.tab();
-    }
-    expect(saveDataModel).toHaveBeenCalledTimes(numberOfFields);
+    const selectMenuItem = async (item: string) => {
+      await user.click(screen.getByText(textAdd));
+      await user.click(screen.getByRole('menuitem', { name: item }));
+    };
+    await selectMenuItem(textMock('schema_editor.add_number'));
+    expect(saveDataModel).toHaveBeenCalledTimes(1);
+    await selectMenuItem(textMock('schema_editor.add_string'));
+    expect(saveDataModel).toHaveBeenCalledTimes(2);
+    await selectMenuItem(textMock('schema_editor.add_integer'));
+    expect(saveDataModel).toHaveBeenCalledTimes(3);
+    await selectMenuItem(textMock('schema_editor.add_boolean'));
+    expect(saveDataModel).toHaveBeenCalledTimes(4);
+    await selectMenuItem(textMock('schema_editor.add_object'));
+    expect(saveDataModel).toHaveBeenCalledTimes(5);
   });
 
   test('Should show dropdown menu items when the "Add field" button is clicked', async () => {
     renderItemFieldsTab();
     await user.click(screen.getByText(textAdd));
     expect(screen.getByRole('dialog')).toBeInTheDocument();
     expect(
-      screen.getByRole('menuitem', { name: textMock('schema_editor.number') }),
+      screen.getByRole('menuitem', { name: textMock('schema_editor.add_number') }),
     ).toBeInTheDocument();
-    expect(screen.getByRole('menuitem', { name: textMock('schema_editor.string') }))
-      .toBeInTheDocument;
     expect(
-      screen.getByRole('menuitem', { name: textMock('schema_editor.integer') }),
+      screen.getByRole('menuitem', { name: textMock('schema_editor.add_string') }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('menuitem', { name: textMock('schema_editor.boolean') }),
+      screen.getByRole('menuitem', { name: textMock('schema_editor.add_integer') }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('menuitem', { name: textMock('schema_editor.object') }),
+      screen.getByRole('menuitem', { name: textMock('schema_editor.add_boolean') }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('menuitem', { name: textMock('schema_editor.add_object') }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('menuitem', { name: textMock('schema_editor.add_combination') }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('menuitem', { name: textMock('schema_editor.add_reference') }),
     ).toBeInTheDocument();
   });
 
-  test('should save the model when user clicks the dropdown menu items', async () => {
+  test('Should close the dropdown menu when user clicks outside the menu', async () => {
     renderItemFieldsTab();
     await user.click(screen.getByText(textAdd));
-    await user.click(screen.getByRole('menuitem', { name: textMock('schema_editor.number') }));
-    expect(saveDataModel).toHaveBeenCalledTimes(1);
-    await user.click(screen.getByRole('menuitem', { name: textMock('schema_editor.string') }));
-    expect(saveDataModel).toHaveBeenCalledTimes(2);
-    await user.click(screen.getByRole('menuitem', { name: textMock('schema_editor.integer') }));
-    expect(saveDataModel).toHaveBeenCalledTimes(3);
-    await user.click(screen.getByRole('menuitem', { name: textMock('schema_editor.boolean') }));
-    expect(saveDataModel).toHaveBeenCalledTimes(4);
-    await user.click(screen.getByRole('menuitem', { name: textMock('schema_editor.object') }));
-    expect(saveDataModel).toHaveBeenCalledTimes(5);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    await user.click(document.body);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  test('Model is saved with correct payload when a name is changed', async () => {
+    renderItemFieldsTab();
+    const suffix = 'Duck';
+    for (const fieldName of fieldNames) {
+      await user.type(screen.getByDisplayValue(fieldName), suffix);
+      await user.tab();
+    }
+    expect(saveDataModel).toHaveBeenCalledTimes(numberOfFields);
   });
 
   test('Model is saved correctly when a field is focused and the Enter key is clicked', async () => {

frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTab.tsx

@@ -1,16 +1,12 @@
-import type { BaseSyntheticEvent } from 'react';
-import React, { useEffect, useState } from 'react';
-import type { FieldType, FieldNode } from '@altinn/schema-model';
-import { isField, isReference, ObjectKind } from '@altinn/schema-model';
+import React, { useEffect } from 'react';
+import type { FieldType, FieldNode, ObjectKind } from '@altinn/schema-model';
+import { isField, isReference } from '@altinn/schema-model';
 import classes from './ItemFieldsTab.module.css';
-import { StudioButton, usePrevious } from '@studio/components';
-import { PlusIcon } from '@studio/icons';
-import { useTranslation } from 'react-i18next';
+import { usePrevious } from '@studio/components';
 import { ItemFieldsTable } from './ItemFieldsTable';
 import { useAddProperty } from '@altinn/schema-editor/hooks/useAddProperty';
 import { getLastNameField } from '@altinn/schema-editor/components/SchemaInspector/ItemFieldsTab/domUtils';
-import { DropdownMenu } from '@digdir/designsystemet-react';
-import { useTypeOptions } from '../hooks/useTypeOptions';
+import { AddPropertiesMenu } from '../../AddPropertiesMenu';
 
 export interface ItemFieldsTabProps {
   selectedItem: FieldNode;
@@ -21,7 +17,6 @@ export const ItemFieldsTab = ({ selectedItem }: ItemFieldsTabProps) => {
 
   const numberOfChildNodes = selectedItem.children.length;
   const prevNumberOfChildNodes = usePrevious<number>(numberOfChildNodes) ?? 0;
-  const typeOptions = useTypeOptions();
 
   useEffect(() => {
     // If the number of fields has increased, a new field has been added and should get focus
@@ -32,55 +27,18 @@ export const ItemFieldsTab = ({ selectedItem }: ItemFieldsTabProps) => {
     }
   }, [numberOfChildNodes, prevNumberOfChildNodes]);
 
-  const { t } = useTranslation();
-  const [isAddDropdownOpen, setIsAddDropdownOpen] = useState(false);
-
-  const onAddPropertyClicked = (event: BaseSyntheticEvent, fieldType: FieldType) => {
+  const onAddPropertyClicked = (kind: ObjectKind, fieldType?: FieldType) => {
     event.preventDefault();
-
-    addProperty(ObjectKind.Field, fieldType, selectedItem.schemaPointer);
+    addProperty(kind, fieldType, selectedItem.schemaPointer);
   };
   const readonly = isReference(selectedItem);
 
-  const closeDropdown = () => setIsAddDropdownOpen(false);
   return (
     <div className={classes.root}>
       {isField(selectedItem) && numberOfChildNodes > 0 && (
         <ItemFieldsTable readonly={readonly} selectedItem={selectedItem} />
       )}
-      <DropdownMenu
-        open={isAddDropdownOpen}
-        onClose={closeDropdown}
-        size='small'
-        portal
-        placement='bottom-start'
-      >
-        <DropdownMenu.Trigger asChild>
-          {!readonly && (
-            <StudioButton
-              color='second'
-              icon={<PlusIcon />}
-              onClick={() => setIsAddDropdownOpen(true)}
-              variant='secondary'
-            >
-              {t('schema_editor.add_property')}
-            </StudioButton>
-          )}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Group>
-            {typeOptions.map(({ value: fieldType, label }) => (
-              <DropdownMenu.Item
-                key={fieldType}
-                value={fieldType}
-                onClick={(e) => onAddPropertyClicked(e, fieldType)}
-              >
-                {label}
-              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu>
+      <AddPropertiesMenu onItemClick={onAddPropertyClicked} />
     </div>
   );
 };

frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldType/ItemFieldType.module.css

@@ -0,0 +1,8 @@
+.linkButton {
+  border: none;
+  background-color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  padding: 0;
+  text-decoration: none;
+}

frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldType/ItemFieldType.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { ItemFieldType } from './ItemFieldType';
+import type { ItemFieldTypeProps } from './ItemFieldType';
+import { type UiSchemaNode } from '@altinn/schema-model';
+import {
+  combinationNodeMock,
+  referenceNodeMock,
+  stringDefinitionNodeMock,
+  objectNodeMock,
+} from '../../../../../../test/mocks/uiSchemaMock';
+import { renderWithProviders } from '../../../../../../test/renderWithProviders';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import userEvent from '@testing-library/user-event';
+
+const defaultNode: UiSchemaNode = combinationNodeMock;
+const setSelectedTypePointer = jest.fn();
+
+const stringTypeLabel = textMock('schema_editor.string');
+const objectTypeLabel = textMock('schema_editor.object');
+
+const combinationKindLabel = textMock('schema_editor.combination');
+
+describe('ItemFieldType', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('should render string type label', () => {
+    renderItemFieldType({ fieldNode: stringDefinitionNodeMock });
+    expect(screen.getByText(stringTypeLabel)).toBeInTheDocument();
+  });
+
+  it('should render object type label', () => {
+    renderItemFieldType({ fieldNode: objectNodeMock });
+    expect(screen.getByText(objectTypeLabel)).toBeInTheDocument();
+  });
+
+  it('should render combination kind label', () => {
+    renderItemFieldType({ fieldNode: defaultNode });
+    expect(screen.getByText(combinationKindLabel)).toBeInTheDocument();
+  });
+
+  it('Should render reference link when fieldNode is a reference', async () => {
+    const user = userEvent.setup();
+    renderItemFieldType({ fieldNode: referenceNodeMock });
+    const linkButton = screen.getByRole('button');
+    await user.click(linkButton);
+    expect(setSelectedTypePointer).toHaveBeenCalledTimes(1);
+  });
+});
+
+const renderItemFieldType = (props: ItemFieldTypeProps = { fieldNode: defaultNode }) => {
+  renderWithProviders({
+    appContextProps: {
+      setSelectedTypePointer,
+    },
+  })(<ItemFieldType {...props} />);
+};

frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldType/ItemFieldType.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  extractNameFromPointer,
+  type FieldType,
+  isField,
+  isReference,
+  type ReferenceNode,
+  type UiSchemaNode,
+} from '@altinn/schema-model/index';
+import { useSavableSchemaModel } from '../../../../../hooks/useSavableSchemaModel';
+import { useSchemaEditorAppContext } from '../../../../../hooks/useSchemaEditorAppContext';
+import { useTypeName } from './hooks/useTypeName';
+import { useKindName } from './hooks/useKindName';
+import { ObjectKind } from '@altinn/schema-model';
+import { Link } from '@digdir/designsystemet-react';
+import classes from './ItemFieldType.module.css';
+
+export type ItemFieldTypeProps = {
+  fieldNode: UiSchemaNode;
+};
+
+export const ItemFieldType = ({ fieldNode }: ItemFieldTypeProps) => {
+  const typeName = useTypeName(isField(fieldNode) ? (fieldNode.fieldType as FieldType) : undefined);
+  const typeLabel = isField(fieldNode) && typeName;
+
+  const kindName = useKindName(fieldNode.objectKind);
+  const notReferenceKind = fieldNode.objectKind !== ObjectKind.Reference;
+  const kindLabel = notReferenceKind && kindName;
+
+  if (typeLabel) return <>{typeLabel}</>;
+  if (kindLabel) return <>{kindLabel}</>;
+  if (isReference(fieldNode)) return <ReferenceLink fieldNode={fieldNode} />;
+  return null;
+};
+
+const ReferenceLink = ({ fieldNode }: { fieldNode: UiSchemaNode }) => {
+  const savableModel = useSavableSchemaModel();
+  const { setSelectedTypePointer } = useSchemaEditorAppContext();
+  const referredNode = savableModel.getReferredNode(fieldNode as ReferenceNode);
+  const name = extractNameFromPointer(referredNode.schemaPointer);
+
+  const handleClick = () => {
+    isReference(fieldNode) && setSelectedTypePointer(fieldNode.reference);
+  };
+
+  return (
+    <Link asChild onClick={handleClick}>
+      <button className={classes.linkButton}>{name}</button>
+    </Link>
+  );
+};

frontend/packages/schema-editor/src/components/SchemaInspector/ItemFieldsTab/ItemFieldsTable/ItemFieldType/hooks/useKindName.ts

@@ -0,0 +1,14 @@
+import { ObjectKind } from '@altinn/schema-model/types';
+import { useTranslation } from 'react-i18next';
+
+export function useKindName(objectKind: ObjectKind): string {
+  const { t } = useTranslation();
+
+  const kindNames = {
+    [ObjectKind.Field]: t('schema_editor.field'),
+    [ObjectKind.Combination]: t('schema_editor.combination'),
+    [ObjectKind.Reference]: t('schema_editor.reference'),
+  };
+
+  return kindNames[objectKind];
+}