From 187840549c503b0146beacec7514a3f24235678e Mon Sep 17 00:00:00 2001
From: Andrea Vesterhus <andrea.vesterhus@bouvet.no>
Date: Tue, 5 Mar 2024 17:13:11 +0100
Subject: [PATCH] refactor: FormTemplate -> ComplexAttributeTemplate

---
 .../templates/ArrayComplexTemplate.tsx        |  20 +-
 .../ArrayPrimitiveListTemplate.tsx            |  22 ++-
 .../ObjectModelContainedTemplate.tsx          |  23 ++-
 .../ObjectModelUncontainedTemplate.tsx        |  23 ++-
 .../ObjectStorageUncontainedTemplate.tsx      |  20 +-
 .../ComplexAttributeTemplate.tsx              |  12 ++
 .../ComplexAttributeTemplateContent.tsx       |  29 +++
 .../ComplexAttributeTemplateHeader.tsx        |  17 ++
 .../ComplexAttributeTemplateHeaderActions.tsx |  27 +++
 .../ComplexAttributeTemplateHeaderTitle.tsx   | 106 +++++++++++
 .../src/form/templates/index.ts               |   1 +
 .../form/templates/shared/FormTemplate.tsx    | 172 ------------------
 12 files changed, 251 insertions(+), 221 deletions(-)
 create mode 100644 packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplate.tsx
 create mode 100644 packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateContent.tsx
 create mode 100644 packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeader.tsx
 create mode 100644 packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderActions.tsx
 create mode 100644 packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderTitle.tsx
 create mode 100644 packages/dm-core-plugins/src/form/templates/index.ts
 delete mode 100644 packages/dm-core-plugins/src/form/templates/shared/FormTemplate.tsx

diff --git a/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayComplexTemplate.tsx b/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayComplexTemplate.tsx
index 391cd964e..e2713b0b8 100644
--- a/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayComplexTemplate.tsx
+++ b/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayComplexTemplate.tsx
@@ -6,7 +6,7 @@ import AddObject from '../../../components/AddObjectButton'
 import { OpenObjectButton } from '../../../components/OpenObjectButton'
 import RemoveObject from '../../../components/RemoveObjectButton'
 import { useRegistryContext } from '../../../context/RegistryContext'
-import FormTemplate from '../../../templates/shared/FormTemplate'
+import { ComplexAttributeTemplate } from '../../../templates'
 import { TArrayTemplate } from '../../../types'
 import {
   getCanOpenOrExpand,
@@ -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>
   )
 }
diff --git a/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayPrimitiveListTemplate/ArrayPrimitiveListTemplate.tsx b/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayPrimitiveListTemplate/ArrayPrimitiveListTemplate.tsx
index 2f9cb297d..e7af91faf 100644
--- a/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayPrimitiveListTemplate/ArrayPrimitiveListTemplate.tsx
+++ b/packages/dm-core-plugins/src/form/fields/ArrayField/templates/ArrayPrimitiveListTemplate/ArrayPrimitiveListTemplate.tsx
@@ -1,7 +1,7 @@
 import { list } from '@equinor/eds-icons'
 import { useState } from 'react'
 import { useRegistryContext } from '../../../../context/RegistryContext'
-import FormTemplate from '../../../../templates/shared/FormTemplate'
+import { ComplexAttributeTemplate } from '../../../../templates'
 import { TArrayTemplate, TPrimitive } from '../../../../types'
 import { PrimitiveArray } from './PrimitiveArray/PrimitiveArray'
 
@@ -21,9 +21,9 @@ export const ArrayPrimitiveListTemplate = (
   )
 
   return (
-    <FormTemplate>
-      <FormTemplate.Header>
-        <FormTemplate.Header.Title
+    <ComplexAttributeTemplate>
+      <ComplexAttributeTemplate.Header>
+        <ComplexAttributeTemplate.Header.Title
           canExpand={true}
           canOpen={false}
           isExpanded={isExpanded}
@@ -33,9 +33,13 @@ export const ArrayPrimitiveListTemplate = (
           icon={list}
           uiAttribute={uiAttribute}
         />
-        <FormTemplate.Header.Actions uiAttribute={uiAttribute} />
-      </FormTemplate.Header>
-      <FormTemplate.Content padding='' expanded={!!isExpanded} canExpand={true}>
+        <ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute} />
+      </ComplexAttributeTemplate.Header>
+      <ComplexAttributeTemplate.Content
+        padding=''
+        expanded={!!isExpanded}
+        canExpand={true}
+      >
         <PrimitiveArray
           uiAttribute={uiAttribute}
           data={value}
@@ -43,7 +47,7 @@ export const ArrayPrimitiveListTemplate = (
           attribute={attribute}
           onChange={onChange}
         />
-      </FormTemplate.Content>
-    </FormTemplate>
+      </ComplexAttributeTemplate.Content>
+    </ComplexAttributeTemplate>
   )
 }
diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelContainedTemplate.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelContainedTemplate.tsx
index cb059c1a1..5a188793b 100644
--- a/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelContainedTemplate.tsx
+++ b/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelContainedTemplate.tsx
@@ -6,7 +6,7 @@ import AddObjectBySearchButton from '../../../components/AddObjectBySearchButton
 import { OpenObjectButton } from '../../../components/OpenObjectButton'
 import RemoveObject from '../../../components/RemoveObjectButton'
 import { useRegistryContext } from '../../../context/RegistryContext'
-import FormTemplate from '../../../templates/shared/FormTemplate'
+import { ComplexAttributeTemplate } from '../../../templates'
 import { TObjectTemplate } from '../../../types'
 import {
   getCanOpenOrExpand as getCanOpenExpand,
@@ -34,9 +34,9 @@ export const ObjectModelContainedTemplate = (
     onOpen
   )
   return (
-    <FormTemplate>
-      <FormTemplate.Header>
-        <FormTemplate.Header.Title
+    <ComplexAttributeTemplate>
+      <ComplexAttributeTemplate.Header>
+        <ComplexAttributeTemplate.Header.Title
           canExpand={canExpand}
           canOpen={canOpen}
           isExpanded={isExpanded}
@@ -53,7 +53,7 @@ export const ObjectModelContainedTemplate = (
           uiAttribute={uiAttribute}
           namePath={namePath}
         />
-        <FormTemplate.Header.Actions uiAttribute={uiAttribute}>
+        <ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
           {canOpen && (
             <OpenObjectButton
               viewId={namePath}
@@ -91,9 +91,12 @@ export const ObjectModelContainedTemplate = (
                 namePath={namePath}
               />
             )}
-        </FormTemplate.Header.Actions>
-      </FormTemplate.Header>
-      <FormTemplate.Content expanded={!!isExpanded} canExpand={!!canExpand}>
+        </ComplexAttributeTemplate.Header.Actions>
+      </ComplexAttributeTemplate.Header>
+      <ComplexAttributeTemplate.Content
+        expanded={!!isExpanded}
+        canExpand={!!canExpand}
+      >
         <ViewCreator
           idReference={`${idReference}.${attribute.name}`}
           onOpen={onOpen}
@@ -109,7 +112,7 @@ export const ObjectModelContainedTemplate = (
             )
           }
         />
-      </FormTemplate.Content>
-    </FormTemplate>
+      </ComplexAttributeTemplate.Content>
+    </ComplexAttributeTemplate>
   )
 }
diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelUncontainedTemplate.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelUncontainedTemplate.tsx
index 3a5a3f7b8..c55fa9c0f 100644
--- a/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelUncontainedTemplate.tsx
+++ b/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectModelUncontainedTemplate.tsx
@@ -10,7 +10,7 @@ import { OpenObjectButton } from '../../../components/OpenObjectButton'
 import RemoveObject from '../../../components/RemoveObjectButton'
 import { SelectReference } from '../../../components/SelectReference'
 import { useRegistryContext } from '../../../context/RegistryContext'
-import FormTemplate from '../../../templates/shared/FormTemplate'
+import { ComplexAttributeTemplate } from '../../../templates'
 import { TObjectTemplate } from '../../../types'
 import {
   getCanOpenOrExpand,
@@ -46,9 +46,9 @@ export const ObjectModelUncontainedTemplate = (
     onOpen
   )
   return (
-    <FormTemplate>
-      <FormTemplate.Header>
-        <FormTemplate.Header.Title
+    <ComplexAttributeTemplate>
+      <ComplexAttributeTemplate.Header>
+        <ComplexAttributeTemplate.Header.Title
           canExpand={canExpand}
           canOpen={canOpen}
           isExpanded={isExpanded}
@@ -61,7 +61,7 @@ export const ObjectModelUncontainedTemplate = (
           icon={link}
           uiAttribute={uiAttribute}
         />
-        <FormTemplate.Header.Actions uiAttribute={uiAttribute}>
+        <ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
           {canOpen && (
             <OpenObjectButton
               viewId={namePath}
@@ -86,15 +86,18 @@ export const ObjectModelUncontainedTemplate = (
                 namePath={namePath}
               />
             )}
-        </FormTemplate.Header.Actions>
-      </FormTemplate.Header>
-      <FormTemplate.Content expanded={!!isExpanded} canExpand={!!canExpand}>
+        </ComplexAttributeTemplate.Header.Actions>
+      </ComplexAttributeTemplate.Header>
+      <ComplexAttributeTemplate.Content
+        expanded={!!isExpanded}
+        canExpand={!!canExpand}
+      >
         <ViewCreator
           idReference={address ?? ''}
           onOpen={onOpen}
           viewConfig={getExpandViewConfig(uiAttribute)}
         />
-      </FormTemplate.Content>
-    </FormTemplate>
+      </ComplexAttributeTemplate.Content>
+    </ComplexAttributeTemplate>
   )
 }
diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectStorageUncontainedTemplate.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectStorageUncontainedTemplate.tsx
index 26ad1663d..aeb697e6d 100644
--- a/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectStorageUncontainedTemplate.tsx
+++ b/packages/dm-core-plugins/src/form/fields/ObjectField/templates/ObjectStorageUncontainedTemplate.tsx
@@ -8,7 +8,7 @@ import { useFormContext } from 'react-hook-form'
 import { OpenObjectButton } from '../../../components/OpenObjectButton'
 import RemoveObject from '../../../components/RemoveObjectButton'
 import { useRegistryContext } from '../../../context/RegistryContext'
-import FormTemplate from '../../../templates/shared/FormTemplate'
+import { ComplexAttributeTemplate } from '../../../templates'
 import { TObjectTemplate } from '../../../types'
 import {
   getCanOpenOrExpand,
@@ -36,9 +36,9 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
   )
 
   return (
-    <FormTemplate>
-      <FormTemplate.Header>
-        <FormTemplate.Header.Title
+    <ComplexAttributeTemplate>
+      <ComplexAttributeTemplate.Header>
+        <ComplexAttributeTemplate.Header.Title
           canExpand={canExpand}
           canOpen={canOpen}
           isExpanded={isExpanded}
@@ -50,7 +50,7 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
           }
           uiAttribute={uiAttribute}
         />
-        <FormTemplate.Header.Actions uiAttribute={uiAttribute}>
+        <ComplexAttributeTemplate.Header.Actions uiAttribute={uiAttribute}>
           {canOpen && referenceExists && (
             <OpenObjectButton
               viewId={namePath}
@@ -68,14 +68,14 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
           {attribute.optional && referenceExists && !config.readOnly && (
             <RemoveObject namePath={namePath} />
           )}
-        </FormTemplate.Header.Actions>
-      </FormTemplate.Header>
+        </ComplexAttributeTemplate.Header.Actions>
+      </ComplexAttributeTemplate.Header>
       <div
         className={`${
           canExpand && isExpanded && referenceExists ? '' : 'hidden'
         }`}
       >
-        <FormTemplate.Content
+        <ComplexAttributeTemplate.Content
           expanded={!!isExpanded}
           canExpand={!!(canExpand && referenceExists)}
         >
@@ -84,8 +84,8 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
             onOpen={onOpen}
             viewConfig={getExpandViewConfig(uiAttribute)}
           />
-        </FormTemplate.Content>
+        </ComplexAttributeTemplate.Content>
       </div>
-    </FormTemplate>
+    </ComplexAttributeTemplate>
   )
 }
diff --git a/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplate.tsx b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplate.tsx
new file mode 100644
index 000000000..1c7beb0e1
--- /dev/null
+++ b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplate.tsx
@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react'
+import { ComplexAttributeTemplateContent } from './ComplexAttributeTemplateContent'
+import { ComplexAttributeTemplateHeader } from './ComplexAttributeTemplateHeader'
+
+export const ComplexAttributeTemplate = ({ children }: PropsWithChildren) => {
+  return (
+    <div className='border border-[#dddddd] rounded-md w-full'>{children}</div>
+  )
+}
+
+ComplexAttributeTemplate.Header = ComplexAttributeTemplateHeader
+ComplexAttributeTemplate.Content = ComplexAttributeTemplateContent
diff --git a/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateContent.tsx b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateContent.tsx
new file mode 100644
index 000000000..c738da739
--- /dev/null
+++ b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateContent.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+type ComplexAttributeTemplateContentProps = {
+  children: React.ReactNode
+  expanded: boolean
+  canExpand: boolean
+  padding?: string
+}
+
+export const ComplexAttributeTemplateContent = ({
+  children,
+  padding,
+  expanded,
+  canExpand,
+}: ComplexAttributeTemplateContentProps) => {
+  return (
+    <>
+      {canExpand && (
+        <div
+          className={`border-t border-[#dddddd] ${padding ?? 'p-2'} w-full ${
+            expanded ? '' : 'hidden'
+          }`}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeader.tsx b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeader.tsx
new file mode 100644
index 000000000..4cb943e10
--- /dev/null
+++ b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeader.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { ComplexAttributeTemplateHeaderActions } from './ComplexAttributeTemplateHeaderActions'
+import { ComplexAttributeTemplateHeaderTitle } from './ComplexAttributeTemplateHeaderTitle'
+
+export const ComplexAttributeTemplateHeader = ({
+  children,
+  objectIsNotEmpty = true,
+}: { children: React.ReactNode; objectIsNotEmpty?: boolean }) => {
+  return (
+    <legend className='flex h-10 justify-between bg-equinor-lightgray items-center pr-2 rounded-[inherit] transition duration-75'>
+      {children}
+    </legend>
+  )
+}
+
+ComplexAttributeTemplateHeader.Title = ComplexAttributeTemplateHeaderTitle
+ComplexAttributeTemplateHeader.Actions = ComplexAttributeTemplateHeaderActions
diff --git a/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderActions.tsx b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderActions.tsx
new file mode 100644
index 000000000..d74e04d7b
--- /dev/null
+++ b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderActions.tsx
@@ -0,0 +1,27 @@
+import { EdsProvider, Icon, Tooltip } from '@equinor/eds-core-react'
+import { info_circle } from '@equinor/eds-icons'
+import { tokens } from '@equinor/eds-tokens'
+import React from 'react'
+import { TUiAttribute } from '../../types'
+
+export const ComplexAttributeTemplateHeaderActions = ({
+  children,
+  uiAttribute,
+}: { children?: React.ReactNode; uiAttribute?: TUiAttribute }) => {
+  return (
+    <div className='flex items-center'>
+      {uiAttribute?.tooltip && (
+        <EdsProvider density='compact'>
+          <Tooltip title={uiAttribute?.tooltip}>
+            <Icon
+              data={info_circle}
+              size={16}
+              color={tokens.colors.interactive.primary__resting.hex}
+            />
+          </Tooltip>
+        </EdsProvider>
+      )}
+      {children}
+    </div>
+  )
+}
diff --git a/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderTitle.tsx b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderTitle.tsx
new file mode 100644
index 000000000..8d5934bcc
--- /dev/null
+++ b/packages/dm-core-plugins/src/form/templates/ComplexAttributeTemplate/ComplexAttributeTemplateHeaderTitle.tsx
@@ -0,0 +1,106 @@
+import { TAttribute } from '@development-framework/dm-core'
+import { Icon, Typography } from '@equinor/eds-core-react'
+import { IconData, file, file_description } from '@equinor/eds-icons'
+import { useState } from 'react'
+import ExpandChevron from '../../components/ExpandChevron'
+import { TUiAttribute } from '../../types'
+import { getDisplayLabel } from '../../utils'
+
+type ComplexAttributeTemplateHeaderTitleProps = {
+  canExpand: boolean | undefined
+  canOpen: boolean | undefined
+  isExpanded: boolean | undefined
+  attribute: TAttribute
+  objectIsNotEmpty: boolean
+  setIsExpanded?: (expanded: boolean) => void
+  onOpen?: () => void
+  icon?: IconData
+  uiAttribute?: TUiAttribute
+  namePath?: string
+}
+
+export const ComplexAttributeTemplateHeaderTitle = ({
+  canExpand,
+  canOpen,
+  isExpanded,
+  setIsExpanded,
+  attribute,
+  onOpen,
+  objectIsNotEmpty,
+  icon,
+  uiAttribute,
+  namePath,
+}: ComplexAttributeTemplateHeaderTitleProps) => {
+  const [isHovering, setIsHovering] = useState(false)
+
+  const hideOptional = uiAttribute?.hideOptionalLabel ?? false
+
+  function handleLabelClick(
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) {
+    if (!objectIsNotEmpty) return
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault()
+      canOpen && onOpen?.()
+      return
+    }
+    if (canExpand) {
+      setIsExpanded?.(!isExpanded)
+      return
+    }
+    canOpen && onOpen?.()
+  }
+
+  return (
+    <div
+      className={`flex flex-start items-center ${!canExpand ? 'ps-2' : 'ps-1'}`}
+    >
+      {canExpand && (
+        <span
+          className={`flex w-fit rounded-full items-center ${
+            canExpand && isHovering ? 'bg-equinor-lightgreen' : ''
+          }`}
+        >
+          <ExpandChevron
+            isExpanded={isExpanded ?? false}
+            setIsExpanded={(exp) => setIsExpanded?.(exp)}
+          />
+        </span>
+      )}
+      <div
+        className={`flex items-center space-x-1 ${
+          objectIsNotEmpty ? '' : 'opacity-40'
+        }
+          ${
+            objectIsNotEmpty && (canOpen || canExpand)
+              ? 'cursor-pointer hover:opacity-80'
+              : ''
+          }
+      `}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        onClick={handleLabelClick}
+      >
+        <Icon
+          data={icon ?? (objectIsNotEmpty ? file_description : file)}
+          color='#3d3d3d'
+        />
+        <Typography
+          bold={true}
+          className={`
+            ${
+              objectIsNotEmpty && isHovering && canOpen && !canExpand
+                ? 'underline'
+                : ''
+            }`}
+          aria-label={`form-complex-${namePath}`}
+        >
+          {getDisplayLabel(attribute, true, uiAttribute)}
+        </Typography>
+        {attribute.optional && !hideOptional && (
+          <p className='ps-1 mt-0.5 text-xs'>Optional</p>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/dm-core-plugins/src/form/templates/index.ts b/packages/dm-core-plugins/src/form/templates/index.ts
new file mode 100644
index 000000000..5da14ec7b
--- /dev/null
+++ b/packages/dm-core-plugins/src/form/templates/index.ts
@@ -0,0 +1 @@
+export * from './ComplexAttributeTemplate/ComplexAttributeTemplate'
diff --git a/packages/dm-core-plugins/src/form/templates/shared/FormTemplate.tsx b/packages/dm-core-plugins/src/form/templates/shared/FormTemplate.tsx
deleted file mode 100644
index a16969ae8..000000000
--- a/packages/dm-core-plugins/src/form/templates/shared/FormTemplate.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import { TAttribute, colors } from '@development-framework/dm-core'
-import { EdsProvider, Icon, Tooltip, Typography } from '@equinor/eds-core-react'
-import {
-  IconData,
-  file,
-  file_description,
-  info_circle,
-} from '@equinor/eds-icons'
-import { PropsWithChildren, useState } from 'react'
-import ExpandChevron from '../../components/ExpandChevron'
-import { TUiAttribute } from '../../types'
-import { getDisplayLabel } from '../../utils/getDisplayLabel'
-
-const FormTemplate = ({ children }: PropsWithChildren) => {
-  return (
-    <div className='border border-[#dddddd] rounded-md w-full'>{children}</div>
-  )
-}
-
-const FormTemplateHeader = ({
-  children,
-  objectIsNotEmpty = true,
-}: PropsWithChildren & { objectIsNotEmpty?: boolean }) => {
-  return (
-    <legend className='flex h-10 justify-between bg-equinor-lightgray items-center pr-2 rounded-[inherit] transition duration-75'>
-      {children}
-    </legend>
-  )
-}
-
-const FormTemplateHeaderActions = ({
-  children,
-  uiAttribute,
-}: PropsWithChildren & { uiAttribute?: TUiAttribute }) => {
-  return (
-    <div className='flex items-center'>
-      {uiAttribute?.tooltip && (
-        <EdsProvider density='compact'>
-          <Tooltip title={uiAttribute?.tooltip}>
-            <Icon data={info_circle} size={16} color={colors.equinorGreen} />
-          </Tooltip>
-        </EdsProvider>
-      )}
-      {children}
-    </div>
-  )
-}
-
-const FormTemplateContent = ({
-  children,
-  padding,
-  expanded,
-  canExpand,
-}: PropsWithChildren & {
-  expanded: boolean
-  canExpand: boolean
-  padding?: string
-}) => {
-  return (
-    <>
-      {canExpand && (
-        <div
-          className={`border-t border-[#dddddd] ${padding ?? 'p-2'} w-full
-      ${expanded ? '' : 'hidden'}
-      `}
-        >
-          {children}
-        </div>
-      )}
-    </>
-  )
-}
-
-const FormTemplateHeaderTitle = ({
-  canExpand,
-  canOpen,
-  isExpanded,
-  setIsExpanded,
-  attribute,
-  onOpen,
-  objectIsNotEmpty,
-  icon,
-  uiAttribute,
-  namePath,
-}: {
-  canExpand: boolean | undefined
-  canOpen: boolean | undefined
-  isExpanded: boolean | undefined
-  attribute: TAttribute
-  objectIsNotEmpty: boolean
-  setIsExpanded?: (expanded: boolean) => void
-  onOpen?: () => void
-  icon?: IconData
-  uiAttribute?: TUiAttribute
-  namePath?: string
-}) => {
-  const [isHovering, setIsHovering] = useState(false)
-
-  const hideOptional = uiAttribute?.hideOptionalLabel ?? false
-  return (
-    <div
-      className={`flex flex-start items-center ${!canExpand ? 'ps-2' : 'ps-1'}`}
-    >
-      {canExpand && (
-        <span
-          className={`flex w-fit rounded-full items-center ${
-            canExpand && isHovering ? 'bg-equinor-lightgreen' : ''
-          }`}
-        >
-          <ExpandChevron
-            isExpanded={isExpanded ?? false}
-            setIsExpanded={(exp) => setIsExpanded?.(exp)}
-          />
-        </span>
-      )}
-      <div
-        className={`flex items-center space-x-1 ${
-          objectIsNotEmpty ? '' : 'opacity-40'
-        }
-        ${
-          objectIsNotEmpty && (canOpen || canExpand)
-            ? 'cursor-pointer hover:opacity-80'
-            : ''
-        }
-    `}
-        onMouseEnter={() => setIsHovering(true)}
-        onMouseLeave={() => setIsHovering(false)}
-        onClick={(event) => {
-          if (!objectIsNotEmpty) return
-          if (event.ctrlKey || event.metaKey) {
-            event.preventDefault()
-            canOpen && onOpen?.()
-            return
-          }
-          if (canExpand) {
-            setIsExpanded?.(!isExpanded)
-            return
-          }
-          canOpen && onOpen?.()
-        }}
-      >
-        <Icon
-          data={icon ?? (objectIsNotEmpty ? file_description : file)}
-          color='#3d3d3d'
-        />
-        <Typography
-          bold={true}
-          className={`
-          ${
-            objectIsNotEmpty && isHovering && canOpen && !canExpand
-              ? 'underline'
-              : ''
-          }`}
-          aria-label={`form-complex-${namePath}`}
-        >
-          {getDisplayLabel(attribute, true, uiAttribute)}
-        </Typography>
-        {attribute.optional && !hideOptional && (
-          <p className='ps-1 mt-0.5 text-xs'>Optional</p>
-        )}
-      </div>
-    </div>
-  )
-}
-
-FormTemplate.Header = FormTemplateHeader
-FormTemplate.Content = FormTemplateContent
-
-FormTemplateHeader.Title = FormTemplateHeaderTitle
-FormTemplateHeader.Actions = FormTemplateHeaderActions
-
-export default FormTemplate