Refactor/form-cleanup

e2e/tests/plugin-form-Nested.spec.ts

@@ -115,7 +115,7 @@ test('Locations', async () => {
   const locationsDiv = page.getByTestId('locations')
   await expect(locationsDiv.getByRole('textbox')).toHaveCount(1)
   await expect(locationsDiv.getByRole('textbox')).toHaveValue('Trondheim')
-  await locationsDiv.getByLabel('Append primitive').click()
+  await locationsDiv.getByLabel('Add new item to list').click()
   await expect(locationsDiv.getByRole('textbox')).toHaveCount(2)
   await locationsDiv.getByRole('textbox').last().fill('Oslo')
   await page.getByTestId('form-submit').click()

packages/dm-core-plugins/src/form/components/AttributeList.tsx

@@ -4,33 +4,28 @@ import {
   TStorageRecipe,
 } from '@development-framework/dm-core'
 import { useRegistryContext } from '../context/RegistryContext'
-import { AttributeField } from '../fields/AttributeField'
+import { AttributeFieldSelector } from '../fields/AttributeFieldSelector'
 
 export const AttributeList = (props: {
   namePath: string
   blueprint: TBlueprint
   storageRecipes: TStorageRecipe[]
 }) => {
   const { namePath, blueprint, storageRecipes } = props
-  const prefix = namePath === '' ? `` : `${namePath}.`
   const { config } = useRegistryContext()
+  const prefix = namePath === '' ? '' : `${namePath}.`
   const attributes: TAttribute[] | undefined = blueprint.attributes
 
-  let filteredAttributes =
-    config && config.fields.length
+  const hideByDefaultFields: string[] = ['type', '_meta_']
+  const filteredAttributes =
+    Array.isArray(config.fields) && config.fields.length
       ? config.fields
-          .map((name: string) =>
-            attributes?.find((attribute: TAttribute) => attribute.name === name)
+          .map((field) =>
+            attributes?.find((attribute) => attribute.name === field)
           )
           .filter((attribute): attribute is TAttribute => !!attribute)
-      : attributes
+      : attributes.filter((attr) => !hideByDefaultFields.includes(attr.name))
 
-  const hideByDefaultFields: string[] = ['type', '_meta_']
-  if (!(config && config.fields.length)) {
-    filteredAttributes = filteredAttributes?.filter(
-      (attribute) => !hideByDefaultFields.includes(attribute.name)
-    )
-  }
   return (
     <>
       {filteredAttributes?.map((attribute: TAttribute) => {
@@ -46,7 +41,7 @@ export const AttributeList = (props: {
             key={`${prefix}${attribute.name}`}
             className='pb-3'
           >
-            <AttributeField
+            <AttributeFieldSelector
               namePath={`${prefix}${attribute.name}`}
               attribute={attribute}
               uiAttribute={uiAttribute}

packages/dm-core-plugins/src/form/components/Form.tsx

@@ -14,9 +14,8 @@ import { Button, EdsProvider, Icon } from '@equinor/eds-core-react'
 import { undo } from '@equinor/eds-icons'
 import { FormProvider, useForm, useFormContext } from 'react-hook-form'
 import { RegistryProvider } from '../context/RegistryContext'
-import { getCanOpenOrExpand } from '../templates/shared/utils'
 import { TFormConfig, TFormProps, TUiAttributeObject } from '../types'
-import { isPrimitiveType } from '../utils/isPrimitiveType'
+import { getCanOpenOrExpand, isPrimitiveType } from '../utils'
 import { AttributeList } from './AttributeList'
 
 const FORM_DEFAULT_MAX_WIDTH = '650px'
@@ -183,7 +182,6 @@ export const Form = (props: TFormProps) => {
               >
                 <Button
                   onClick={handleCustomReset}
-                  type='button'
                   disabled={disabled}
                   tooltip={'Revert changes'}
                   variant={'outlined'}

packages/dm-core-plugins/src/form/fields/ArrayField.test.tsx → packages/dm-core-plugins/src/form/fields/ArrayField/ArrayField.test.tsx

@@ -7,9 +7,9 @@ import {
   waitFor,
 } from '@testing-library/react'
 import React from 'react'
-import { Form } from '../components/Form'
-import { mockBlueprintGet, wrapper } from '../test-utils'
-import { TFormConfig } from '../types'
+import { Form } from '../../components/Form'
+import { mockBlueprintGet, wrapper } from '../../test-utils'
+import { TFormConfig } from '../../types'
 
 const ViewCreatorMock = jest.fn()
 jest.mock('@development-framework/dm-core', () => ({
@@ -56,7 +56,7 @@ describe('List of strings', () => {
       { wrapper }
     )
     return await waitFor(() => {
-      const addButton = screen.getByLabelText('Append primitive')
+      const addButton = screen.getByLabelText('Add new item to list')
       return { ...utils, addButton }
     })
   }

packages/dm-core-plugins/src/form/fields/ArrayField.tsx → packages/dm-core-plugins/src/form/fields/ArrayField/ArrayField.tsx

@@ -1,12 +1,11 @@
 import { Controller, useFormContext } from 'react-hook-form'
-import { getWidget } from '../context/WidgetContext'
-import arrayTemplates from '../templates'
-import { ArrayComplexTemplate } from '../templates/ArrayComplexTemplate'
-import { TArrayTemplate } from '../types'
-import { getDisplayLabel } from '../utils/getDisplayLabel'
-import { isPrimitiveType } from '../utils/isPrimitiveType'
+import { getWidget } from '../../context/WidgetContext'
+import { TArrayTemplate } from '../../types'
+import { getDisplayLabel, isPrimitiveType } from '../../utils'
+import arrayTemplates from './templates'
+import { ArrayComplexTemplate } from './templates/ArrayComplexTemplate'
 
-export default function ArrayField(props: TArrayTemplate) {
+export function ArrayField(props: TArrayTemplate) {
   const { uiAttribute, namePath, attribute } = props
   const { getValues, setValue, control } = useFormContext()
 
@@ -40,11 +39,10 @@ export default function ArrayField(props: TArrayTemplate) {
         name={namePath}
         control={control}
         render={({ field: { value, onChange } }) => {
-          // TODO: make this into same as getWidget(uiAttribute?.template)
-          const templates = { ...arrayTemplates }
-          const templateName = uiAttribute?.template
           const Template =
-            templates[templateName ?? 'ArrayPrimitiveDatagridTemplate']
+            arrayTemplates[
+              uiAttribute?.template ?? 'ArrayPrimitiveDatagridTemplate'
+            ]
           return (
             <Template
               namePath={namePath}

packages/dm-core-plugins/src/form/templates/ArrayComplexTemplate.tsx → packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayComplexTemplate.tsx

@@ -2,17 +2,17 @@ import { ViewCreator } from '@development-framework/dm-core'
 import { list } from '@equinor/eds-icons'
 import { useState } from 'react'
 import { useFormContext } from 'react-hook-form'
-import AddObject from '../components/AddObjectButton'
-import { OpenObjectButton } from '../components/OpenObjectButton'
-import RemoveObject from '../components/RemoveObjectButton'
-import { useRegistryContext } from '../context/RegistryContext'
-import { TArrayTemplate } from '../types'
-import FormTemplate from './shared/FormTemplate'
+import AddObject from '../../../components/AddObjectButton'
+import { OpenObjectButton } from '../../../components/OpenObjectButton'
+import RemoveObject from '../../../components/RemoveObjectButton'
+import { useRegistryContext } from '../../../context/RegistryContext'
+import { ComplexAttributeTemplate } from '../../../templates'
+import { TArrayTemplate } from '../../../types'
 import {
   getCanOpenOrExpand,
   getExpandViewConfig,
   getOpenViewConfig,
-} from './shared/utils'
+} from '../../../utils'
 
 export const ArrayComplexTemplate = (props: TArrayTemplate) => {
   const { namePath, attribute, uiAttribute } = props
@@ -34,9 +34,9 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
     onOpen
   )
   return (
-    <FormTemplate>
-      <FormTemplate.Header>
-        <FormTemplate.Header.Title
+    <ComplexAttributeTemplate>
+      <ComplexAttributeTemplate.Header>
+        <ComplexAttributeTemplate.Header.Title
           canExpand={canExpand}
           objectIsNotEmpty={isDefined}
           canOpen={canOpen}
@@ -53,7 +53,7 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
           icon={list}
           uiAttribute={uiAttribute}
         />
-        <FormTemplate.Header.Actions uiAttribute={uiAttribute}>
+        <ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
           {canOpen && (
             <OpenObjectButton
               viewId={namePath}
@@ -79,9 +79,9 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
                 onAdd={() => setInitialValue([])}
               />
             ))}
-        </FormTemplate.Header.Actions>
-      </FormTemplate.Header>
-      <FormTemplate.Content
+        </ComplexAttributeTemplate.Header.Actions>
+      </ComplexAttributeTemplate.Header>
+      <ComplexAttributeTemplate.Content
         expanded={!!isExpanded}
         canExpand={!!canExpand}
         padding='px-2 pt-2'
@@ -91,7 +91,7 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
           onOpen={onOpen}
           viewConfig={getExpandViewConfig(uiAttribute)}
         />
-      </FormTemplate.Content>
-    </FormTemplate>
+      </ComplexAttributeTemplate.Content>
+    </ComplexAttributeTemplate>
   )
 }

packages/dm-core-plugins/src/form/templates/ArrayPrimitiveDataGridTemplate.tsx → packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayPrimitiveDataGridTemplate.tsx

@@ -1,10 +1,10 @@
 import { Typography } from '@equinor/eds-core-react'
 import { add } from '@equinor/eds-icons'
-import TooltipButton from '../../common/TooltipButton'
-import { DataGrid } from '../../data-grid/DataGrid'
-import { Fieldset, Legend } from '../styles'
-import { TArrayTemplate, TPrimitive } from '../types'
-import { getDisplayLabel } from '../utils/getDisplayLabel'
+import TooltipButton from '../../../../common/TooltipButton'
+import { DataGrid } from '../../../../data-grid/DataGrid'
+import { Fieldset, Legend } from '../../../styles'
+import { TArrayTemplate, TPrimitive } from '../../../types'
+import { getDisplayLabel } from '../../../utils/getDisplayLabel'
 
 export const ArrayPrimitiveDatagridTemplate = (
   props: TArrayTemplate & {
@@ -124,5 +124,3 @@ export const ArrayPrimitiveDatagridTemplate = (
     </Fieldset>
   )
 }
-
-export default ArrayPrimitiveDatagridTemplate