Merge branch 'main' into feat/job-ui

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

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+
+test('Read only primitives', async ({ page }) => {
+  await page.goto('http://localhost:3000/')
+  await page.getByText('plugins', { exact: true }).click()
+  await page.getByText('form').click()
+  await page.getByText('read_only_primitives').click()
+  await page.getByText('ReadOnlyPrimitives').click()
+
+  await expect(page.getByLabel('A required string')).not.toBeEditable()
+
+  await expect(
+    page.getByLabel('An optional string (optional)')
+  ).not.toBeEditable()
+
+  await expect(page.getByLabel('A required number')).not.toBeEditable()
+
+  await expect(page.getByLabel('Numbers only (optional)')).not.toBeEditable()
+
+  await expect(page.getByLabel('Integer only (optional)')).not.toBeEditable()
+
+  await expect(
+    page.getByLabel('An optional checkbox (optional)')
+  ).not.toBeEditable()
+
+  await expect(
+    page.getByLabel('A required checbox (e.g. for confirmation purposes)')
+  ).not.toBeEditable()
+})

example/app/data/DemoDataSource/plugins/form/read_only_primitives/blueprints/ReadOnlyPrimitives.blueprint.json

@@ -0,0 +1,65 @@
+{
+  "name": "ReadOnlyPrimitives",
+  "type": "CORE:Blueprint",
+  "attributes": [
+    {
+      "name": "type",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "name",
+      "type": "dmss://system/SIMOS/BlueprintAttribute",
+      "attributeType": "string"
+    },
+    {
+      "name": "stringOptional",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "string",
+      "label": "An optional string",
+      "optional": true
+    },
+    {
+      "name": "stringRequired",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "string",
+      "label": "A required string",
+      "optional": false
+    },
+    {
+      "name": "numberRequired",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "number",
+      "label": "A required number",
+      "optional": false
+    },
+    {
+      "name": "numberOptional",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "number",
+      "label": "Numbers only",
+      "optional": true
+    },
+    {
+      "name": "integer",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "integer",
+      "label": "Integer only",
+      "optional": true
+    },
+    {
+      "name": "checkboxOptional",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "boolean",
+      "label": "An optional checkbox",
+      "optional": true
+    },
+    {
+      "name": "checkboxRequired",
+      "type": "CORE:BlueprintAttribute",
+      "attributeType": "boolean",
+      "label": "A required checbox (e.g. for confirmation purposes)",
+      "optional": false
+    }
+  ]
+}

example/app/data/DemoDataSource/plugins/form/read_only_primitives/readOnlyPrimitives.entity.json

@@ -0,0 +1,12 @@
+{
+  "_id": "readOnlyPrimitives",
+  "name": "ReadOnlyPrimitives",
+  "type": "./blueprints/ReadOnlyPrimitives",
+  "stringRequired": "A required string",
+  "stringOptional": "an optional string",
+  "numberRequired": 2.34,
+  "numberOptional": 3.14,
+  "integer": 30,
+  "checkboxOptional": false,
+  "checkboxRequired": true
+}

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,11 @@
             "name": "locations",
             "type": "PLUGINS:dm-core-plugins/form/fields/ArrayField",
             "showInline": true
+          },
+          {
+            "name": "customers",
+            "type": "PLUGINS:dm-core-plugins/form/fields/ArrayField",
+            "showInline": false
           }
         ],
         "fields": [
@@ -68,8 +79,7 @@
           "customers",
           "isBankrupt"
         ],
-        "readOnly": true,
-        "editToggle": true
+        "readOnly": true
       }
     }
   ]

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": [
     {

example/app/data/DemoDataSource/recipes/plugins/form/read_only_primitives/readOnlyPrimitives.recipe.json

@@ -0,0 +1,44 @@
+{
+  "type": "CORE:RecipeLink",
+  "_blueprintPath_": "/plugins/form/read_only_primitives/blueprints/ReadOnlyPrimitives",
+  "initialUiRecipe": {
+    "name": "ViewSelector",
+    "type": "CORE:UiRecipe",
+    "plugin": "@development-framework/dm-core-plugins/view_selector",
+    "config": {
+      "type": "PLUGINS:dm-core-plugins/view_selector/ViewSelectorConfig",
+      "childTabsOnRender": true,
+      "asSidebar": false,
+      "items": [
+        {
+          "type": "PLUGINS:dm-core-plugins/view_selector/ViewSelectorItem",
+          "view": {
+            "type": "CORE:ReferenceViewConfig",
+            "recipe": "ReadOnly"
+          }
+        }
+      ]
+    }
+  },
+  "uiRecipes": [
+    {
+      "name": "ReadOnly",
+      "type": "CORE:UiRecipe",
+      "plugin": "@development-framework/dm-core-plugins/form",
+      "category": "edit",
+      "config": {
+        "type": "PLUGINS:dm-core-plugins/form/FormInput",
+        "fields": [
+          "stringRequired",
+          "stringOptional",
+          "numberRequired",
+          "numberOptional",
+          "integer",
+          "checkboxOptional",
+          "checkboxRequired"
+        ],
+        "readOnly": true
+      }
+    }
+  ]
+}

example/requirements.txt

@@ -1 +1 @@
-dm-cli==1.1.0
+dm-cli==1.1.1

example/src/plugins/job-ui-single/pages/JobForm.tsx

@@ -1,6 +1,6 @@
 import {
   EBlueprint,
-  EntityPickerButton,
+  EntityPickerDialog,
   JobStatus,
   Loading,
   Stack,
@@ -36,6 +36,8 @@ export const JobForm = (props: {
     started: 'Not started',
   }
   const [formData, setFormData] = useState<TJob>(defaultJobValues)
+  const [showJobRunnerModal, setShowJobRunnerModal] = useState<boolean>(false)
+  const [showInputModal, setShowInputModal] = useState<boolean>(false)
   const {
     blueprint: jobBlueprint,
     isLoading: isBlueprintLoading,
@@ -73,7 +75,12 @@ export const JobForm = (props: {
             return (
               <>
                 <p>Pick job runner entity:</p>
-                <EntityPickerButton
+                <Button onClick={() => setShowJobRunnerModal(true)}>
+                  Select
+                </Button>
+                <EntityPickerDialog
+                  showModal={showJobRunnerModal}
+                  setShowModal={setShowJobRunnerModal}
                   onChange={(address: string, entity?: TValidEntity) => {
                     setFormData({ ...formData, runner: entity })
                   }}
@@ -96,7 +103,10 @@ export const JobForm = (props: {
                         JSON.stringify(formData.applicationInput.address)}
                   </p>
                 </div>
-                <EntityPickerButton
+                <Button onClick={() => setShowInputModal(true)}>Select</Button>
+                <EntityPickerDialog
+                  showModal={showInputModal}
+                  setShowModal={setShowInputModal}
                   onChange={(address: string) => {
                     const linkReference: TLinkReference = {
                       type: EBlueprint.REFERENCE,

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
     }
   ]
 }

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

@@ -1,23 +1,14 @@
-import { Stack, TAttribute, TBlueprint } from '@development-framework/dm-core'
-import React, { useState } from 'react'
+import { TAttribute, TBlueprint } from '@development-framework/dm-core'
+import React from 'react'
 import { AttributeField } from '../fields/AttributeField'
 import { TConfig } from '../types'
-import { Button } from '@equinor/eds-core-react'
 
 export const AttributeList = (props: {
   namePath: string
   config: TConfig | undefined
   blueprint: TBlueprint | undefined
 }) => {
   const { namePath, config, blueprint } = props
-
-  const [readOnly, setReadOnly] = useState<boolean | undefined>(
-    config?.readOnly
-  )
-  const toggleHandler = () => {
-    setReadOnly(!readOnly)
-  }
-
   const prefix = namePath === '' ? `` : `${namePath}.`
 
   const attributes = blueprint?.attributes ?? []
@@ -43,18 +34,11 @@ export const AttributeList = (props: {
           namePath={`${prefix}${attribute.name}`}
           attribute={attribute}
           uiAttribute={uiAttribute}
-          readOnly={readOnly}
+          readOnly={config?.readOnly}
         />
       </div>
     )
   })
 
-  return (
-    <Stack spacing={1}>
-      {config?.editToggle && (
-        <Button onClick={toggleHandler}>{readOnly ? 'Edit' : 'View'}</Button>
-      )}
-      {attributeFields}
-    </Stack>
-  )
+  return <>{attributeFields}</>
 }

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>

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>
   )
 }