fix: disables all edit form buttons when in readOnly mode

equinor · Sep 12, 2023 · a79fb64 · a79fb64
1 parent c72d62a
commit a79fb64
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 98 deletions.
diff --git a/example/app/data/DemoDataSource/recipes/plugins/form/read_only/car.recipe.json b/example/app/data/DemoDataSource/recipes/plugins/form/read_only/car.recipe.json
@@ -17,5 +17,28 @@
       ],
       "readOnly": true
     }
-  }
+  },
+  "uiRecipes": [
+    {
+      "name": "MyCustomList",
+      "type": "dmss://system/SIMOS/UiRecipe",
+      "description": "",
+      "plugin": "@development-framework/dm-core-plugins/list",
+      "dimensions": "*",
+      "config": {
+        "type": "PLUGINS:dm-core-plugins/list/ListPluginConfig",
+        "views": [],
+        "headers": [
+          "name",
+          "plateNumber"
+        ],
+        "openInline": false,
+        "functionality": {
+          "type": "PLUGINS:dm-core-plugins/list/FunctionalityConfig",
+          "delete": true
+        },
+        "readOnly": true
+      }
+    }
+  ]
 }
diff --git a/example/app/data/DemoDataSource/recipes/plugins/form/read_only/carRentalCompany.recipe.json b/example/app/data/DemoDataSource/recipes/plugins/form/read_only/carRentalCompany.recipe.json
@@ -35,6 +35,12 @@
             "showInline": false,
             "uiRecipe": "defaultForm"
           },
+          {
+            "name": "ceo",
+            "type": "PLUGINS:dm-core-plugins/form/fields/ObjectField",
+            "showInline": false,
+            "uiRecipe": "defaultForm"
+          },
           {
             "name": "trainee",
             "type": "PLUGINS:dm-core-plugins/form/fields/ObjectField",
@@ -56,6 +62,12 @@
             "name": "locations",
             "type": "PLUGINS:dm-core-plugins/form/fields/ArrayField",
             "showInline": true
+          },
+          {
+            "name": "customers",
+            "type": "PLUGINS:dm-core-plugins/form/fields/ArrayField",
+            "showInline": false,
+            "uiRecipe": "myCustomArrayRecipe"
           }
         ],
         "fields": [
@@ -68,8 +80,7 @@
           "customers",
           "isBankrupt"
         ],
-        "readOnly": true,
-        "editToggle": true
+        "readOnly": true
       }
     }
   ]

diff --git a/example/app/data/DemoDataSource/recipes/plugins/form/read_only/customer.recipe.json b/example/app/data/DemoDataSource/recipes/plugins/form/read_only/customer.recipe.json
@@ -4,7 +4,11 @@
   "initialUiRecipe": {
     "name": "form",
     "type": "CORE:UiRecipe",
-    "plugin": "@development-framework/dm-core-plugins/form"
+    "plugin": "@development-framework/dm-core-plugins/form",
+    "config": {
+      "type": "PLUGINS:dm-core-plugins/form/FormInput",
+      "readOnly": true
+    }
   },
   "uiRecipes": [
     {
@@ -18,6 +22,27 @@
       "type": "CORE:UiRecipe",
       "plugin": "@development-framework/dm-core-plugins/form",
       "category": "edit"
+    },
+    {
+      "name": "myCustomArrayRecipe",
+      "type": "dmss://system/SIMOS/UiRecipe",
+      "description": "",
+      "plugin": "@development-framework/dm-core-plugins/list",
+      "dimensions": "*",
+      "config": {
+        "type": "PLUGINS:dm-core-plugins/list/ListPluginConfig",
+        "views": [],
+        "headers": [
+          "name",
+          "plateNumber"
+        ],
+        "openInline": false,
+        "functionality": {
+          "type": "PLUGINS:dm-core-plugins/list/FunctionalityConfig",
+          "delete": true
+        },
+        "readOnly": true
+      }
     }
   ]
 }
diff --git a/packages/dm-core-plugins/blueprints/form/FormInput.json b/packages/dm-core-plugins/blueprints/form/FormInput.json
@@ -32,14 +32,6 @@
       "optional": true,
       "contained": true,
       "default": false
-    },
-    {
-      "name": "editToggle",
-      "type": "dmss://system/SIMOS/BlueprintAttribute",
-      "attributeType": "boolean",
-      "optional": true,
-      "contained": true,
-      "default": false
     }
   ]
 }
diff --git a/packages/dm-core-plugins/blueprints/list/ListPluginConfig.json b/packages/dm-core-plugins/blueprints/list/ListPluginConfig.json
@@ -52,6 +52,13 @@
       "dimensions": "*",
       "default": [],
       "optional": false
+    },
+    {
+      "name": "readOnly",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "boolean",
+      "optional": true,
+      "default": false
     }
   ]
 }
diff --git a/packages/dm-core-plugins/src/form/components/AttributeList.tsx b/packages/dm-core-plugins/src/form/components/AttributeList.tsx
@@ -2,7 +2,6 @@ import { Stack, TAttribute, TBlueprint } from '@development-framework/dm-core'
 import React, { useState } from 'react'
 import { AttributeField } from '../fields/AttributeField'
 import { TConfig } from '../types'
-import { Button } from '@equinor/eds-core-react'
 
 export const AttributeList = (props: {
   namePath: string
@@ -14,9 +13,6 @@ export const AttributeList = (props: {
   const [readOnly, setReadOnly] = useState<boolean | undefined>(
     config?.readOnly
   )
-  const toggleHandler = () => {
-    setReadOnly(!readOnly)
-  }
 
   const prefix = namePath === '' ? `` : `${namePath}.`
 
@@ -49,12 +45,5 @@ export const AttributeList = (props: {
     )
   })
 
-  return (
-    <Stack spacing={1}>
-      {config?.editToggle && (
-        <Button onClick={toggleHandler}>{readOnly ? 'Edit' : 'View'}</Button>
-      )}
-      {attributeFields}
-    </Stack>
-  )
+  return <Stack spacing={1}>{attributeFields}</Stack>
 }
diff --git a/packages/dm-core-plugins/src/form/components/Form.tsx b/packages/dm-core-plugins/src/form/components/Form.tsx
@@ -54,13 +54,15 @@ export const Form = (props: TFormProps) => {
                 config={config}
                 blueprint={blueprint}
               />
-              <Button
-                type="submit"
-                data-testid="form-submit"
-                style={{ alignSelf: 'flex-start' }}
-              >
-                Submit
-              </Button>
+              {!config?.readOnly && (
+                <Button
+                  type="submit"
+                  data-testid="form-submit"
+                  style={{ alignSelf: 'flex-start' }}
+                >
+                  Submit
+                </Button>
+              )}
             </Stack>
           </form>
         </RegistryProvider>

diff --git a/packages/dm-core-plugins/src/form/fields/ArrayField.tsx b/packages/dm-core-plugins/src/form/fields/ArrayField.tsx
@@ -111,32 +111,34 @@ export default function ArrayField(props: TArrayFieldProps) {
                 readOnly={readOnly}
               />
             </Stack>
-            <Button
-              disabled={readOnly}
-              variant="outlined"
-              type="button"
-              onClick={() => remove(index)}
-            >
-              Remove
-            </Button>
+            {!readOnly && (
+              <Button
+                variant="outlined"
+                type="button"
+                onClick={() => remove(index)}
+              >
+                Remove
+              </Button>
+            )}
           </Stack>
         )
       })}
-      <Button
-        disabled={readOnly}
-        variant="outlined"
-        data-testid={`add-${namePath}`}
-        onClick={() => {
-          if (isPrimitiveType(type)) {
-            const defaultValue = isPrimitive(type) ? ' ' : {}
-            append(defaultValue)
-          } else {
-            handleAddObject()
-          }
-        }}
-      >
-        Add
-      </Button>
+      {!readOnly && (
+        <Button
+          variant="outlined"
+          data-testid={`add-${namePath}`}
+          onClick={() => {
+            if (isPrimitiveType(type)) {
+              const defaultValue = isPrimitive(type) ? ' ' : {}
+              append(defaultValue)
+            } else {
+              handleAddObject()
+            }
+          }}
+        >
+          Add
+        </Button>
+      )}
     </Stack>
   )
 }
diff --git a/packages/dm-core-plugins/src/form/fields/AttributeField.tsx b/packages/dm-core-plugins/src/form/fields/AttributeField.tsx
@@ -65,6 +65,7 @@ export const AttributeField = (props: TAttributeFieldProps) => {
           optional={attribute.optional ?? false}
           uiAttribute={uiAttribute}
           defaultValue={attribute.default}
+          readOnly={readOnly}
         />
       )
 

diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField.tsx
@@ -167,16 +167,17 @@ export const ContainedAttribute = (props: TContentProps): JSX.Element => {
     uiRecipe,
     blueprint,
     defaultValue,
+    readOnly,
   } = props
   const { watch } = useFormContext()
   const { idReference, onOpen } = useRegistryContext()
   const value = watch(namePath)
   const isDefined = value && Object.keys(value).length > 0
-
   return (
     <Stack spacing={0.25} alignItems="flex-start">
       <Typography bold={true}>{displayLabel}</Typography>
       {optional &&
+        !readOnly &&
         (isDefined ? (
           <RemoveObject namePath={namePath} />
         ) : (
@@ -247,8 +248,15 @@ const Indent = styled.div`
 `
 
 export const UncontainedAttribute = (props: TContentProps): JSX.Element => {
-  const { type, namePath, displayLabel, uiAttribute, uiRecipe, optional } =
-    props
+  const {
+    type,
+    namePath,
+    displayLabel,
+    uiAttribute,
+    uiRecipe,
+    optional,
+    readOnly,
+  } = props
   const { watch } = useFormContext()
   const { idReference, onOpen } = useRegistryContext()
   const value = watch(namePath)
@@ -263,8 +271,10 @@ export const UncontainedAttribute = (props: TContentProps): JSX.Element => {
       <Typography bold={true}>{displayLabel}</Typography>
       {address && <Typography>Address: {value.address}</Typography>}
       <Stack direction="row" spacing={0.5}>
-        <SelectReference type={type} namePath={namePath} />
-        {optional && address && <RemoveObject namePath={namePath} />}
+        {!readOnly && <SelectReference type={type} namePath={namePath} />}
+        {optional && address && !readOnly && (
+          <RemoveObject namePath={namePath} />
+        )}
         {address && onOpen && !uiAttribute?.showInline && (
           <OpenObjectButton
             viewId={namePath}
@@ -290,7 +300,8 @@ export const UncontainedAttribute = (props: TContentProps): JSX.Element => {
 }
 
 export const ObjectField = (props: TObjectFieldProps): JSX.Element => {
-  const { type, namePath, uiAttribute, displayLabel, defaultValue } = props
+  const { type, namePath, uiAttribute, displayLabel, defaultValue, readOnly } =
+    props
   const { getValues } = useFormContext()
 
   // Be able to override the object field
@@ -308,6 +319,7 @@ export const ObjectField = (props: TObjectFieldProps): JSX.Element => {
       label={displayLabel}
       type={type === 'object' && values ? values.type : type}
       defaultValue={defaultValue}
+      readOnly={readOnly}
     />
   )
 }
@@ -321,6 +333,7 @@ export const ObjectTypeSelector = (props: TObjectFieldProps): JSX.Element => {
     contained,
     uiAttribute,
     defaultValue,
+    readOnly,
   } = props
 
   const { blueprint, uiRecipes, isLoading, error } = useBlueprint(type)
@@ -345,6 +358,7 @@ export const ObjectTypeSelector = (props: TObjectFieldProps): JSX.Element => {
       uiRecipe={uiRecipe}
       uiAttribute={uiAttribute}
       defaultValue={defaultValue}
+      readOnly={readOnly}
     />
   )
 }
diff --git a/packages/dm-core-plugins/src/form/types.tsx b/packages/dm-core-plugins/src/form/types.tsx
@@ -99,7 +99,6 @@ export type TConfig = {
   attributes: TAttributeConfig[]
   fields: string[]
   readOnly?: boolean
-  editToggle?: boolean
 }
 
 export type TUiRecipeForm = Omit<TUiRecipe, 'config'> & { config: TConfig }