Fixed a part of comments --WIP

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StudioButton } from '@studio/components';
+import classes from './StudioReferenceButton.module.css';
+import type { ReferenceNode } from '../../../../../packages/schema-model';
+
+export interface StudioReferenceButtonProps {
+  name: string;
+  onClick: () => void;
+  node: ReferenceNode;
+}
+
+export const StudioReferenceButton = ({ name, onClick, node }: StudioReferenceButtonProps) => {
+  return (
+    <StudioButton className={classes.root} color='second' onClick={onClick} variant='secondary'>
+      {name}
+    </StudioButton>
+  );
+};

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

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

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

@@ -35,3 +35,4 @@ export * from './StudioTextfield';
 export * from './StudioToggleableTextfield';
 export * from './StudioToggleableTextfieldSchema';
 export * from './StudioTreeView';
+export * from './StudioReferenceButton';

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

@@ -1,15 +1,14 @@
 import type { BaseSyntheticEvent } from 'react';
-import React, { useEffect, useState } from 'react';
+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 { StudioDropdownMenu, usePrevious } from '@studio/components';
 import { PlusIcon } from '@studio/icons';
 import { useTranslation } from 'react-i18next';
 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 { propertyItems } from '../../SchemaTree/SchemaNode/ActionButtons/AddPropertyMenu';
 
 export interface ItemFieldsTabProps {
@@ -32,7 +31,6 @@ export const ItemFieldsTab = ({ selectedItem }: ItemFieldsTabProps) => {
   }, [numberOfChildNodes, prevNumberOfChildNodes]);
 
   const { t } = useTranslation();
-  const [isAddDropdownOpen, setIsAddDropdownOpen] = useState(false);
 
   const onAddPropertyClicked = (
     event: BaseSyntheticEvent,
@@ -44,46 +42,32 @@ export const ItemFieldsTab = ({ selectedItem }: ItemFieldsTabProps) => {
   };
   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}
+      <StudioDropdownMenu
+        anchorButtonProps={{
+          children: t('schema_editor.add_property'),
+          color: 'second',
+          icon: <PlusIcon />,
+          variant: 'secondary',
+        }}
         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>
-            {propertyItems.map(({ kind, fieldType, icon: Icon }) => (
-              <DropdownMenu.Item
-                key={`${kind}-${fieldType}`}
-                value={fieldType}
-                onClick={(e) => onAddPropertyClicked(e, kind, fieldType)}
-              >
-                {<Icon />}
-                {t(`schema_editor.${fieldType || kind}`)}
-              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu>
+        {propertyItems.map(({ kind, fieldType, icon: Icon }) => (
+          <StudioDropdownMenu.Item
+            key={`${kind}-${fieldType}`}
+            value={fieldType}
+            onClick={(e) => onAddPropertyClicked(e, kind, fieldType)}
+            icon={<Icon />}
+          >
+            {t(`schema_editor.${fieldType || kind}`)}
+          </StudioDropdownMenu.Item>
+        ))}
+      </StudioDropdownMenu>
     </div>
   );
 };

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

@@ -8,7 +8,6 @@ import {
   setRequired,
   setPropertyName,
   type UiSchemaNode,
-  isReference,
   ObjectKind,
 } from '@altinn/schema-model';
 import { NameField } from '../../NameField';
@@ -21,8 +20,8 @@ import { TrashIcon } from '@studio/icons';
 import { StudioButton, StudioCenter } from '@studio/components';
 import { useTypeOptions } from '@altinn/schema-editor/components/SchemaInspector/hooks/useTypeOptions';
 import { nameFieldClass } from '@altinn/schema-editor/components/SchemaInspector/ItemFieldsTab/domUtils';
-import { useKindOptions } from '../../hooks/useKindOption';
-import { ReferenceButton } from '@altinn/schema-editor/components/SchemaTree/SchemaNode/ReferenceButton';
+import { useKindOptions } from '../../hooks/useKindOptions';
+import { ItemFieldsTypes } from './ItemFieldsTypes';
 
 export type ItemFieldsTableRowProps = {
   fieldNode: UiSchemaNode;
@@ -46,7 +45,6 @@ export const ItemFieldsTableRow = ({
   const typeOptions = useTypeOptions();
   const fullPath = fieldNode.pointer;
   const kindOptions = useKindOptions();
-  const node = schemaModel.getNode(fullPath);
 
   const handleChangeNodeName = (newNodeName: string) => {
     save(
@@ -96,7 +94,7 @@ export const ItemFieldsTableRow = ({
         />
       </td>
       <td className={cn(classes.tableColumnType, classes.tableCell)}>
-        {typeLabel || kindLabel || (isReference(node) && <ReferenceButton node={node} />) || ''}
+        <ItemFieldsTypes fieldNode={fieldNode} typeLabel={typeLabel} kindLabel={kindLabel} />
       </td>
       <td className={cn(classes.tableColumnRequired, classes.tableCell)}>
         <StudioCenter>

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { extractNameFromPointer, isReference, type UiSchemaNode } from '@altinn/schema-model/index';
+import { StudioReferenceButton } from '@studio/components';
+import { useSavableSchemaModel } from '@altinn/schema-editor/hooks/useSavableSchemaModel';
+import { useSchemaEditorAppContext } from '@altinn/schema-editor/hooks/useSchemaEditorAppContext';
+
+type ItemFieldsTypesProps = {
+  fieldNode: UiSchemaNode;
+  typeLabel?: string;
+  kindLabel?: string;
+};
+
+export const ItemFieldsTypes = ({ fieldNode, typeLabel, kindLabel }: ItemFieldsTypesProps) => {
+  const savableModel = useSavableSchemaModel();
+  const { setSelectedTypePointer } = useSchemaEditorAppContext();
+
+  if (typeLabel) return <>{typeLabel}</>;
+  if (kindLabel) return <>{kindLabel}</>;
+  if (isReference(fieldNode)) {
+    const referredNode = savableModel.getReferredNode(fieldNode);
+    const name = extractNameFromPointer(referredNode.pointer);
+    const handleClick = () => setSelectedTypePointer(fieldNode.reference);
+    return <StudioReferenceButton name={name} onClick={handleClick} node={fieldNode} />;
+  }
+  return null;
+};

frontend/packages/schema-editor/src/components/SchemaInspector/hooks/useKindNames.ts

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

frontend/packages/schema-editor/src/components/SchemaInspector/hooks/useKindOptions.ts

@@ -0,0 +1,16 @@
+/* import { useTranslation } from 'react-i18next'; */
+import type { ObjectKind } from '@altinn/schema-model';
+import { useKindNames } from './useKindNames';
+
+type KindOption = {
+  kind: ObjectKind;
+  label: string;
+};
+
+export const useKindOptions = (): KindOption[] => {
+  const kindNames = useKindNames();
+  return Object.entries(kindNames).map(([kind, label]) => ({
+    kind: kind as ObjectKind,
+    label,
+  }));
+};

frontend/packages/schema-editor/src/components/SchemaTree/SchemaNode/ReferenceButton.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { ReferenceNode } from '@altinn/schema-model';
 import { extractNameFromPointer } from '@altinn/schema-model';
-import { StudioButton } from '@studio/components';
-import classes from './ReferenceButton.module.css';
+import { StudioReferenceButton } from '@studio/components';
 import { useSavableSchemaModel } from '../../../hooks/useSavableSchemaModel';
 import { useSchemaEditorAppContext } from '../../../hooks/useSchemaEditorAppContext';
 
@@ -19,9 +18,5 @@ export const ReferenceButton = ({ node }: ReferenceButtonProps) => {
   const name = extractNameFromPointer(referredNode.pointer);
   const handleClick = () => setSelectedTypePointer(reference);
 
-  return (
-    <StudioButton className={classes.root} color='second' onClick={handleClick} variant='secondary'>
-      {name}
-    </StudioButton>
-  );
+  return <StudioReferenceButton name={name} onClick={handleClick} node={node} />;
 };