refactor: extract button from EntityPickerButton

equinor · Sep 15, 2023 · a8a49a7 · a8a49a7
1 parent 0c702de
commit a8a49a7
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 109 deletions.
diff --git 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<TJob>(defaultJobValues)
+  const [showJobRunnerModal, setShowJobRunnerModal] = useState<boolean>(false)
+  const [showInputModal, setShowInputModal] = useState<boolean>(false)
   const {
     blueprint: jobBlueprint,
     isLoading: isBlueprintLoading,
@@ -73,8 +75,13 @@ export const JobForm = (props: {
             return (
               <>
                 <p>Pick job runner entity:</p>
-                <EntityPickerButton
-                  onChange={(address: string, entity: TValidEntity) => {
+                <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,

diff --git 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<boolean>(false)
   const { setValue, watch } = useFormContext()
   const dmssAPI = useDMSS()
   const { idReference } = useRegistryContext()
@@ -64,13 +65,18 @@ const SelectReference = (props: { type: string; namePath: string }) => {
   }
 
   return (
-    <EntityPickerButton
-      data-testid={`select-${props.namePath}`}
-      onChange={onChange}
-      buttonVariant="outlined"
-      typeFilter={props.type}
-      alternativeButtonText="Select and save"
-    />
+    <>
+      <Button variant="outlined" onClick={() => setShowModal(true)}>
+        Select and save
+      </Button>
+      <EntityPickerDialog
+        data-testid={`select-${props.namePath}`}
+        onChange={onChange}
+        typeFilter={props.type}
+        showModal={showModal}
+        setShowModal={setShowModal}
+      />
+    </>
   )
 }
 

diff --git 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<boolean>(false)
+  const [showModal, setShowModal] = useState<boolean>(false)
+  const [showCopyDocumentModal, setShowCopyDocumentModal] =
+    useState<boolean>(false)
   const [saveDestination, setSaveDestination] = useState<string>(
     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 (
     <div style={{ margin: '0 10px' }}>
-      <Button onClick={() => setShowScrim(true)}>New</Button>
+      <Button onClick={() => setShowModal(true)}>New</Button>
       <Dialog
         isDismissable
-        open={showScrim}
-        onClose={() => setShowScrim(false)}
+        open={showModal}
+        onClose={() => setShowModal(false)}
         width={'600px'}
         height={'370px'}
       >
@@ -168,14 +170,22 @@ export function NewEntityButton(props: {
             {loading ? <Progress.Dots /> : 'Create'}
           </Button>
           {!documentToCopy ? (
-            <EntityPickerButton
-              buttonVariant="outlined"
-              typeFilter={typeToCreate}
-              alternativeButtonText="Copy existing"
-              onChange={(address: string, entity?: TValidEntity) =>
-                setDocumentToCopy(entity)
-              }
-            />
+            <>
+              <Button
+                variant="outlined"
+                onClick={() => setShowCopyDocumentModal(true)}
+              >
+                Copy existing
+              </Button>
+              <EntityPickerDialog
+                showModal={showCopyDocumentModal}
+                setShowModal={setShowCopyDocumentModal}
+                typeFilter={typeToCreate}
+                onChange={(address: string, entity?: TValidEntity) =>
+                  setDocumentToCopy(entity)
+                }
+              />
+            </>
           ) : (
             <Button
               onClick={() => setDocumentToCopy(undefined)}
@@ -185,7 +195,7 @@ export function NewEntityButton(props: {
               Don't copy
             </Button>
           )}
-          <Button variant="ghost" onClick={() => setShowScrim(false)}>
+          <Button variant="ghost" onClick={() => setShowModal(false)}>
             Cancel
           </Button>
         </Dialog.Actions>

diff --git a/...components/Pickers/EntityPickerButton.tsx → ...components/Pickers/EntityPickerDialog.tsx b/...components/Pickers/EntityPickerButton.tsx → ...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: <DataSource>/<rootPackage>/<pathToFolder>
  */
-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<boolean>(false)
   const [loading, setLoading] = useState<boolean>(true)
   const [treeNodes, setTreeNodes] = useState<TreeNode[]>([])
 
@@ -77,78 +75,67 @@ export const EntityPickerButton = (props: {
   }
 
   return (
-    <div>
-      <Button
-        variant={buttonVariant || 'contained'}
-        onClick={() => setShowModal(true)}
-      >
-        {alternativeButtonText || 'Select'}
-      </Button>
-      <Dialog
-        isDismissable
-        open={showModal}
-        onClose={() => {
-          setSelectedTreeNode(undefined)
-          setShowModal(false)
-        }}
-        width={TREE_DIALOG_WIDTH}
-      >
-        <Dialog.Header>
-          <Dialog.Title>
-            {`Select an Entity ${typeFilter ? `of type ${typeFilter}` : ''}`}
-          </Dialog.Title>
-        </Dialog.Header>
-        <Dialog.CustomContent>
-          {loading ? (
-            <div style={{ display: 'flex', justifyContent: 'center' }}>
-              <Progress.Circular />
-            </div>
-          ) : (
-            <div>
-              <div style={{ height: '40vh' }}>
-                <TreeView
-                  ignoredTypes={[EBlueprint.BLUEPRINT]}
-                  nodes={treeNodes}
-                  onSelect={(node: TreeNode) => {
-                    if (typeFilter && node.type !== typeFilter) {
-                      toast.warning(
-                        `Type must be '${truncatePathString(typeFilter, 43)}'`
-                      )
-                      setSelectedTreeNode(undefined)
-                      return
-                    }
-                    setSelectedTreeNode(node)
-                  }}
-                />
-              </div>
-              <p>
-                {selectedTreeNode
-                  ? `Selected: ${
-                      selectedTreeNode?.name ?? selectedTreeNode.nodeId
-                    }`
-                  : 'No entity selected'}
-              </p>
+    <Dialog
+      isDismissable
+      open={showModal}
+      onClose={() => {
+        setSelectedTreeNode(undefined)
+        setShowModal(false)
+      }}
+      width={TREE_DIALOG_WIDTH}
+    >
+      <Dialog.Header>
+        <Dialog.Title>
+          {`Select an Entity ${typeFilter ? `of type ${typeFilter}` : ''}`}
+        </Dialog.Title>
+      </Dialog.Header>
+      <Dialog.CustomContent>
+        {loading ? (
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Progress.Circular />
+          </div>
+        ) : (
+          <div>
+            <div style={{ height: '40vh' }}>
+              <TreeView
+                ignoredTypes={[EBlueprint.BLUEPRINT]}
+                nodes={treeNodes}
+                onSelect={(node: TreeNode) => {
+                  if (typeFilter && node.type !== typeFilter) {
+                    toast.warning(
+                      `Type must be '${truncatePathString(typeFilter, 43)}'`
+                    )
+                    setSelectedTreeNode(undefined)
+                    return
+                  }
+                  setSelectedTreeNode(node)
+                }}
+              />
             </div>
-          )}
-        </Dialog.CustomContent>
-        <Dialog.Actions>
-          <Button
-            disabled={!selectedTreeNode}
-            onClick={handleSelectEntityInTree}
-          >
-            Select
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              setSelectedTreeNode(undefined)
-              setShowModal(false)
-            }}
-          >
-            Cancel
-          </Button>
-        </Dialog.Actions>
-      </Dialog>
-    </div>
+            <p>
+              {selectedTreeNode
+                ? `Selected: ${
+                    selectedTreeNode?.name ?? selectedTreeNode.nodeId
+                  }`
+                : 'No entity selected'}
+            </p>
+          </div>
+        )}
+      </Dialog.CustomContent>
+      <Dialog.Actions>
+        <Button disabled={!selectedTreeNode} onClick={handleSelectEntityInTree}>
+          Select
+        </Button>
+        <Button
+          variant="ghost"
+          onClick={() => {
+            setSelectedTreeNode(undefined)
+            setShowModal(false)
+          }}
+        >
+          Cancel
+        </Button>
+      </Dialog.Actions>
+    </Dialog>
   )
 }
diff --git 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'