diff --git a/example/src/plugins/job-ui-single/pages/JobForm.tsx b/example/src/plugins/job-ui-single/pages/JobForm.tsx index 90234a9bf..bf7f48103 100644 --- a/example/src/plugins/job-ui-single/pages/JobForm.tsx +++ b/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(defaultJobValues) + const [showJobRunnerModal, setShowJobRunnerModal] = useState(false) + const [showInputModal, setShowInputModal] = useState(false) const { blueprint: jobBlueprint, isLoading: isBlueprintLoading, @@ -73,8 +75,13 @@ export const JobForm = (props: { return ( <>

Pick job runner entity:

- { + + { setFormData({ ...formData, runner: entity }) }} /> @@ -96,7 +103,10 @@ export const JobForm = (props: { JSON.stringify(formData.applicationInput.address)}

- setShowInputModal(true)}>Select + { const linkReference: TLinkReference = { type: EBlueprint.REFERENCE, diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField.tsx index caec50178..f5d2381bd 100644 --- a/packages/dm-core-plugins/src/form/fields/ObjectField.tsx +++ b/packages/dm-core-plugins/src/form/fields/ObjectField.tsx @@ -1,6 +1,6 @@ import { EBlueprint, - EntityPickerButton, + EntityPickerDialog, EntityView, ErrorResponse, Loading, @@ -15,7 +15,7 @@ import { } from '@development-framework/dm-core' import { Button, Typography } from '@equinor/eds-core-react' import { AxiosError, AxiosResponse } from 'axios' -import React from 'react' +import React, { useState } from 'react' import { useFormContext } from 'react-hook-form' import styled from 'styled-components' import { defaultConfig } from '../FormPlugin' @@ -26,6 +26,7 @@ import { getWidget } from '../context/WidgetContext' import { TContentProps, TObjectFieldProps, TUiRecipeForm } from '../types' const SelectReference = (props: { type: string; namePath: string }) => { + const [showModal, setShowModal] = useState(false) const { setValue, watch } = useFormContext() const dmssAPI = useDMSS() const { idReference } = useRegistryContext() @@ -64,13 +65,18 @@ const SelectReference = (props: { type: string; namePath: string }) => { } return ( - + <> + + + ) } diff --git a/packages/dm-core/src/components/NewEntityButton.tsx b/packages/dm-core/src/components/NewEntityButton.tsx index a83f54850..ee769a143 100644 --- a/packages/dm-core/src/components/NewEntityButton.tsx +++ b/packages/dm-core/src/components/NewEntityButton.tsx @@ -9,7 +9,7 @@ import { Dialog } from './Dialog' import { BlueprintPicker, DestinationPicker, - EntityPickerButton, + EntityPickerDialog, } from './Pickers' // TODO fix this component - the component is not working due to a hook error somewhere, probably in the context @@ -19,7 +19,9 @@ export function NewEntityButton(props: { defaultDestination?: string }) { const { type, onCreated, defaultDestination } = props - const [showScrim, setShowScrim] = useState(false) + const [showModal, setShowModal] = useState(false) + const [showCopyDocumentModal, setShowCopyDocumentModal] = + useState(false) const [saveDestination, setSaveDestination] = useState( defaultDestination ? defaultDestination : '' ) @@ -72,7 +74,7 @@ export function NewEntityButton(props: { delete newDocumentToCopy._id addEntityToPath({ ...newDocumentToCopy }) - .then(() => setShowScrim(false)) + .then(() => setShowModal(false)) .finally(() => { setDocumentToCopy(undefined) setNewName('') @@ -92,7 +94,7 @@ export function NewEntityButton(props: { addEntityToPath({ ...newEntity, name: newName as string, - }).then(() => setShowScrim(false)) + }).then(() => setShowModal(false)) }) .finally(() => { setLoading(false) @@ -104,11 +106,11 @@ export function NewEntityButton(props: { return (
- + setShowScrim(false)} + open={showModal} + onClose={() => setShowModal(false)} width={'600px'} height={'370px'} > @@ -168,14 +170,22 @@ export function NewEntityButton(props: { {loading ? : 'Create'} {!documentToCopy ? ( - - setDocumentToCopy(entity) - } - /> + <> + + + setDocumentToCopy(entity) + } + /> + ) : ( )} - diff --git a/packages/dm-core/src/components/Pickers/EntityPickerButton.tsx b/packages/dm-core/src/components/Pickers/EntityPickerDialog.tsx similarity index 54% rename from packages/dm-core/src/components/Pickers/EntityPickerButton.tsx rename to packages/dm-core/src/components/Pickers/EntityPickerDialog.tsx index 535d9ea29..f5653f3b8 100644 --- a/packages/dm-core/src/components/Pickers/EntityPickerButton.tsx +++ b/packages/dm-core/src/components/Pickers/EntityPickerDialog.tsx @@ -26,17 +26,15 @@ import { TreeView } from '../TreeView' * @param variant: optional attribute to override the variant / styling used for the button * @param scope: optional attribute to define scope for tree view. The scope must be on the format: // */ -export const EntityPickerButton = (props: { +export const EntityPickerDialog = (props: { onChange: (address: string, entity?: TValidEntity) => void + showModal: boolean + setShowModal: (x: boolean) => void typeFilter?: string - alternativeButtonText?: string - buttonVariant?: 'contained' | 'outlined' | 'ghost' | 'ghost_icon' scope?: string }) => { - const { onChange, typeFilter, alternativeButtonText, buttonVariant, scope } = - props + const { onChange, showModal, setShowModal, typeFilter, scope } = props const appConfig = useContext(ApplicationContext) - const [showModal, setShowModal] = useState(false) const [loading, setLoading] = useState(true) const [treeNodes, setTreeNodes] = useState([]) @@ -77,78 +75,67 @@ export const EntityPickerButton = (props: { } return ( -
- - { - setSelectedTreeNode(undefined) - setShowModal(false) - }} - width={TREE_DIALOG_WIDTH} - > - - - {`Select an Entity ${typeFilter ? `of type ${typeFilter}` : ''}`} - - - - {loading ? ( -
- -
- ) : ( -
-
- { - if (typeFilter && node.type !== typeFilter) { - toast.warning( - `Type must be '${truncatePathString(typeFilter, 43)}'` - ) - setSelectedTreeNode(undefined) - return - } - setSelectedTreeNode(node) - }} - /> -
-

- {selectedTreeNode - ? `Selected: ${ - selectedTreeNode?.name ?? selectedTreeNode.nodeId - }` - : 'No entity selected'} -

+ { + setSelectedTreeNode(undefined) + setShowModal(false) + }} + width={TREE_DIALOG_WIDTH} + > + + + {`Select an Entity ${typeFilter ? `of type ${typeFilter}` : ''}`} + + + + {loading ? ( +
+ +
+ ) : ( +
+
+ { + if (typeFilter && node.type !== typeFilter) { + toast.warning( + `Type must be '${truncatePathString(typeFilter, 43)}'` + ) + setSelectedTreeNode(undefined) + return + } + setSelectedTreeNode(node) + }} + />
- )} - - - - - -
-
+

+ {selectedTreeNode + ? `Selected: ${ + selectedTreeNode?.name ?? selectedTreeNode.nodeId + }` + : 'No entity selected'} +

+
+ )} + + + + + +
) } diff --git a/packages/dm-core/src/components/Pickers/index.tsx b/packages/dm-core/src/components/Pickers/index.tsx index dc22fad96..7ddb3c3a6 100644 --- a/packages/dm-core/src/components/Pickers/index.tsx +++ b/packages/dm-core/src/components/Pickers/index.tsx @@ -1,6 +1,6 @@ export * from './BlueprintPicker' export * from './DestinationPicker' -export * from './EntityPickerInput' -export * from './EntityPickerButton' +export * from './EntityPickerDialog' export * from './EntityPickerDropdown' +export * from './EntityPickerInput' export * from './JobHandlerPicker'