feat: form label is configurable

equinor · Jan 10, 2024 · da0b8f4 · da0b8f4
1 parent 292f1b3
commit da0b8f4
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 11 deletions.
diff --git a/example/app/data/DemoDataSource/recipes/plugins/form/uncontained/company.recipe.json b/example/app/data/DemoDataSource/recipes/plugins/form/uncontained/company.recipe.json
@@ -65,7 +65,8 @@
               "type": "PLUGINS:dm-core-plugins/form/FormFunctionalityConfig",
               "open": false,
               "expand": true
-            }
+            },
+            "label": "The Trainee"
           },
           {
             "name": "description",
@@ -77,7 +78,8 @@
           {
             "name": "averageSalary",
             "type": "PLUGINS:dm-core-plugins/form/fields/NumberField",
-            "hideOptionalLabel": true
+            "hideOptionalLabel": true,
+            "label": "Salary (avg)"
           }
         ],
         "fields": [

diff --git a/packages/dm-core-plugins/blueprints/form/fields/Field.json b/packages/dm-core-plugins/blueprints/form/fields/Field.json
@@ -43,6 +43,13 @@
       "attributeType": "boolean",
       "optional": true,
       "default": false
+    },
+    {
+      "name": "label",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string",
+      "optional": true,
+      "description": "What will be displayed in form. If this is not set, then form will use the attribute 'name'."
     }
   ]
 }
diff --git a/packages/dm-core-plugins/src/form/fields/ArrayField.tsx b/packages/dm-core-plugins/src/form/fields/ArrayField.tsx
@@ -28,7 +28,8 @@ export default function ArrayField(props: TArrayTemplate) {
         value={value}
         label={getDisplayLabel(
           attribute,
-          uiAttribute?.config?.hideOptionalLabel
+          uiAttribute?.config?.hideOptionalLabel,
+          uiAttribute
         )}
       />
     )

diff --git a/packages/dm-core-plugins/src/form/fields/NumberField.tsx b/packages/dm-core-plugins/src/form/fields/NumberField.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Controller } from 'react-hook-form'
 import { getWidget } from '../context/WidgetContext'
-import { TField, TUiAttributeString } from '../types'
+import { TField } from '../types'
 import { useRegistryContext } from '../context/RegistryContext'
 import { getDisplayLabel } from '../utils/getDisplayLabel'
 const REGEX_FLOAT = /^\d+(\.\d+)?([eE][-+]?\d+)?$/
@@ -40,7 +40,8 @@ export const NumberField = (props: TField) => {
               !uiAttribute?.config?.hideLabel
                 ? getDisplayLabel(
                     attribute,
-                    uiAttribute?.hideOptionalLabel || uiAttribute?.readOnly
+                    uiAttribute?.hideOptionalLabel || uiAttribute?.readOnly,
+                    uiAttribute
                   )
                 : ''
             }

diff --git a/packages/dm-core-plugins/src/form/fields/StringField.tsx b/packages/dm-core-plugins/src/form/fields/StringField.tsx
@@ -10,7 +10,6 @@ export const StringField = (props: TField) => {
   const Widget = getWidget(uiAttribute?.widget ?? 'TextWidget')
   const { config } = useRegistryContext()
   const readOnly = uiAttribute?.readOnly || config.readOnly
-  console.log(uiAttribute)
   return (
     <Controller
       name={namePath}
@@ -36,7 +35,8 @@ export const StringField = (props: TField) => {
               !uiAttribute?.config?.hideLabel
                 ? getDisplayLabel(
                     attribute,
-                    uiAttribute?.hideOptionalLabel || uiAttribute?.readOnly
+                    uiAttribute?.hideOptionalLabel || uiAttribute?.readOnly,
+                    uiAttribute
                   )
                 : ''
             }

diff --git a/packages/dm-core-plugins/src/form/templates/ArrayComplexTemplate.tsx b/packages/dm-core-plugins/src/form/templates/ArrayComplexTemplate.tsx
@@ -52,6 +52,7 @@ export const ArrayComplexTemplate = (props: TArrayTemplate) => {
           attribute={attribute}
           icon={list}
           hideOptionalLabel={uiAttribute?.hideOptionalLabel}
+          uiAttribute={uiAttribute}
         />
         {canOpen && (
           <OpenObjectButton

diff --git a/packages/dm-core-plugins/src/form/templates/ArrayPrimitiveListTemplate.tsx b/packages/dm-core-plugins/src/form/templates/ArrayPrimitiveListTemplate.tsx
@@ -34,6 +34,7 @@ export const ArrayPrimitiveListTemplate = (
             objectIsNotEmpty={true}
             icon={list}
             hideOptionalLabel={true}
+            uiAttribute={uiAttribute}
           />
         </FormTemplate.Header>
         {isExpanded && (

diff --git a/packages/dm-core-plugins/src/form/templates/ObjectModelContainedTemplate.tsx b/packages/dm-core-plugins/src/form/templates/ObjectModelContainedTemplate.tsx
@@ -51,6 +51,7 @@ export const ObjectModelContainedTemplate = (
             )
           }
           hideOptionalLabel={uiAttribute?.config?.hideOptionalLabel}
+          uiAttribute={uiAttribute}
         />
         <FormTemplate.Header.Actions>
           {canOpen && (

diff --git a/packages/dm-core-plugins/src/form/templates/ObjectModelUncontainedTemplate.tsx b/packages/dm-core-plugins/src/form/templates/ObjectModelUncontainedTemplate.tsx
@@ -45,6 +45,7 @@ export const ObjectModelUncontainedTemplate = (
     uiAttribute,
     onOpen
   )
+  console.log(uiAttribute)
   return (
     <FormTemplate>
       <FormTemplate.Header>
@@ -60,6 +61,7 @@ export const ObjectModelUncontainedTemplate = (
           }
           icon={link}
           hideOptionalLabel={uiAttribute?.hideOptionalLabel}
+          uiAttribute={uiAttribute}
         />
         <FormTemplate.Header.Actions>
           {canOpen && (

diff --git a/packages/dm-core-plugins/src/form/templates/ObjectStorageUncontainedTemplate.tsx b/packages/dm-core-plugins/src/form/templates/ObjectStorageUncontainedTemplate.tsx
@@ -53,6 +53,7 @@ export const ObjectStorageUncontainedTemplate = (props: TObjectTemplate) => {
             onOpen?.(namePath, getOpenViewConfig(uiAttribute), address)
           }
           hideOptionalLabel={uiAttribute?.hideOptionalLabel}
+          uiAttribute={uiAttribute}
         />
         <FormTemplate.Header.Actions>
           {canOpen && referenceExists && (

diff --git a/packages/dm-core-plugins/src/form/templates/shared/FormTemplate.tsx b/packages/dm-core-plugins/src/form/templates/shared/FormTemplate.tsx
@@ -4,6 +4,7 @@ import { IconData, file, file_description } from '@equinor/eds-icons'
 import ExpandChevron from '../../components/ExpandChevron'
 import { TAttribute } from '@development-framework/dm-core'
 import { getDisplayLabel } from '../../utils/getDisplayLabel'
+import { TUiAttribute } from '../../types'
 
 const FormTemplate = ({ children }: PropsWithChildren) => {
   return <div className='border border-[#dddddd] rounded-md'>{children}</div>
@@ -54,6 +55,7 @@ const FormTemplateHeaderTitle = ({
   objectIsNotEmpty,
   icon,
   hideOptionalLabel,
+  uiAttribute,
 }: {
   canExpand: boolean | undefined
   canOpen: boolean | undefined
@@ -64,6 +66,7 @@ const FormTemplateHeaderTitle = ({
   onOpen?: () => void
   icon?: IconData
   hideOptionalLabel?: boolean
+  uiAttribute?: TUiAttribute
 }) => {
   const [isHovering, setIsHovering] = useState(false)
 
@@ -124,7 +127,7 @@ const FormTemplateHeaderTitle = ({
               : ''
           }`}
         >
-          {getDisplayLabel(attribute, true)}
+          {getDisplayLabel(attribute, true, uiAttribute)}
         </Typography>
         {attribute.optional && !hideOptionalLabel && (
           <p className='ps-1 mt-0.5 text-xs'>Optional</p>

diff --git a/packages/dm-core-plugins/src/form/types.tsx b/packages/dm-core-plugins/src/form/types.tsx
@@ -49,6 +49,7 @@ type TUiAttributeBase = {
     open: boolean
   }
   hideOptionalLabel?: boolean
+  label?: string
 }
 export type TUiAttributeString = TUiAttributeBase & {
   widget: string

diff --git a/packages/dm-core-plugins/src/form/utils/getDisplayLabel.tsx b/packages/dm-core-plugins/src/form/utils/getDisplayLabel.tsx
@@ -1,13 +1,21 @@
 import { TAttribute } from '@development-framework/dm-core'
 import lodash from 'lodash'
+import { TUiAttribute } from '../types'
+import { label } from '@equinor/eds-icons'
 
 export const getDisplayLabel = (
   attribute: TAttribute,
-  hideOptionalLabel: boolean | undefined
+  hideOptionalLabel?: boolean | undefined,
+  uiAttribute?: TUiAttribute
 ) => {
-  const { name, label } = attribute
+  const { name, label: attributeLabel } = attribute
+
+  if (uiAttribute?.label) return uiAttribute?.label
+
   const displayLabel =
-    label === undefined || label === '' ? lodash.startCase(name) : label
+    attributeLabel === undefined || attributeLabel === ''
+      ? lodash.startCase(name)
+      : attributeLabel
 
   return !hideOptionalLabel && attribute.optional
     ? displayLabel + ' (Optional)'