diff --git a/src/components/modal/chain_element/ChainElementModification.tsx b/src/components/modal/chain_element/ChainElementModification.tsx index ec3e51b8..76458f4f 100644 --- a/src/components/modal/chain_element/ChainElementModification.tsx +++ b/src/components/modal/chain_element/ChainElementModification.tsx @@ -53,7 +53,7 @@ import { FullscreenButton } from "../FullscreenButton.tsx"; import { useDocumentation } from "../../../hooks/useDocumentation.ts"; import { OverridableIcon } from "../../../icons/IconProvider.tsx"; import { isVsCode } from "../../../api/rest/vscodeExtensionApi.ts"; -import ChainTriggerSelectField from "./field/select/ChainTriggerSelectField.tsx"; +import ChainTriggerElementIdField from "./field/ChainTriggerElementIdField.tsx"; type ElementModificationProps = { node: ChainGraphNode; @@ -725,7 +725,7 @@ export const ChainElementModification: React.FC = ({ bodyMimeTypeField: BodyMimeTypeField, singleSelectField: SingleSelectField, contextServiceField: ContextServiceField, - chainTriggerSelectField: ChainTriggerSelectField, + chainTriggerElementIdField: ChainTriggerElementIdField, }} widgets={widgets} onChange={(e) => { diff --git a/src/components/modal/chain_element/ChainElementModificationConstants.ts b/src/components/modal/chain_element/ChainElementModificationConstants.ts index 1691ca5e..48962058 100644 --- a/src/components/modal/chain_element/ChainElementModificationConstants.ts +++ b/src/components/modal/chain_element/ChainElementModificationConstants.ts @@ -246,7 +246,7 @@ export const INITIAL_UI_SCHEMA: UiSchema = { }, chainTriggerParameters: { triggerElementId: { - "ui:field": "chainTriggerSelectField", + "ui:field": "chainTriggerElementIdField", }, chainCallTimeout: { "ui:fieldReplacesAnyOrOneOf": true, @@ -349,7 +349,7 @@ export const INITIAL_UI_SCHEMA: UiSchema = { "ui:widget": "hidden", }, elementId: { - "ui:field": "chainTriggerSelectField", + "ui:field": "chainTriggerElementIdField", }, reuseElementId: { "ui:field": "singleSelectField", diff --git a/src/components/modal/chain_element/field/ChainTriggerElementIdField.tsx b/src/components/modal/chain_element/field/ChainTriggerElementIdField.tsx new file mode 100644 index 00000000..bc3862d5 --- /dev/null +++ b/src/components/modal/chain_element/field/ChainTriggerElementIdField.tsx @@ -0,0 +1,18 @@ +import { FieldProps } from "@rjsf/utils"; +import { JSONSchema7 } from "json-schema"; +import React, { } from "react"; +import { FormContext } from "../ChainElementModification"; +import ChainTriggerSelectField from "./select/ChainTriggerSelectField"; +import ChainTriggerUsedByField from "./ChainTriggerUsedByField"; + +const ChainTriggerElementIdField: React.FC< + FieldProps +> = (props) => { + return props.schema.readOnly ? ( + + ) : ( + + ); +}; + +export default ChainTriggerElementIdField; diff --git a/src/components/modal/chain_element/field/ChainTriggerUsedByField.tsx b/src/components/modal/chain_element/field/ChainTriggerUsedByField.tsx new file mode 100644 index 00000000..e289c634 --- /dev/null +++ b/src/components/modal/chain_element/field/ChainTriggerUsedByField.tsx @@ -0,0 +1,57 @@ +import { FieldProps } from "@rjsf/utils"; +import React, { useEffect, useState } from "react"; +import { ElementWithChainName } from "../../../../api/apiTypes"; +import { useNotificationService } from "../../../../hooks/useNotificationService"; +import { api } from "../../../../api/api"; +import { Chain, ChainColumn } from "../../../services/ChainColumn"; +import { JSONSchema7 } from "json-schema"; +import { FormContext } from "../ChainElementModification"; +import styles from "../ChainElementModification.module.css"; + +const ChainTriggerUsedByField: React.FC< + FieldProps +> = ({ id, formData}) => { + const notificationService = useNotificationService(); + + const [chains, setChains] = useState([]); + const elementId = formData; + + useEffect(() => { + const loadChainCallElements = async () => { + try { + const elements: ElementWithChainName[] = await api.getElementsByType( + "any-chain", + "chain-call-2", + ); + + const chainsUsingElement: Chain[] = []; + elements.forEach((element: ElementWithChainName) => { + if (element.properties?.elementId === elementId) { + chainsUsingElement.push({ + id: element.chainId, + name: element.chainName, + }); + } + }); + setChains(chainsUsingElement); + } catch (error) { + notificationService.requestFailed( + "Failed to load chain call elements", + error, + ); + } + }; + void loadChainCallElements(); + }, [elementId, notificationService]); + + return ( + <> + + + + ); +}; + +export default ChainTriggerUsedByField; diff --git a/src/components/modal/chain_element/field/select/ChainTriggerSelectField.tsx b/src/components/modal/chain_element/field/select/ChainTriggerSelectField.tsx index b00d4a41..ec3f7eae 100644 --- a/src/components/modal/chain_element/field/select/ChainTriggerSelectField.tsx +++ b/src/components/modal/chain_element/field/select/ChainTriggerSelectField.tsx @@ -24,7 +24,7 @@ const ChainTriggerSelectField: React.FC< const title = uiSchema?.["ui:title"] ?? schema?.title ?? ""; useEffect(() => { - const loadHttpTriggerElements = async () => { + const loadChainTriggerElements = async () => { setIsLoading(true); try { @@ -55,7 +55,7 @@ const ChainTriggerSelectField: React.FC< setIsLoading(false); } }; - void loadHttpTriggerElements(); + void loadChainTriggerElements(); }, [notificationService]); const handleChange = useCallback( diff --git a/src/components/services/ChainColumn.tsx b/src/components/services/ChainColumn.tsx index 08633c3d..c1b8bdb9 100644 --- a/src/components/services/ChainColumn.tsx +++ b/src/components/services/ChainColumn.tsx @@ -1,11 +1,10 @@ import React, { useState } from 'react'; import { Dropdown, Button, Menu } from 'antd'; -import { useNavigate } from 'react-router-dom'; import { isVsCode, VSCodeExtensionApi } from '../../api/rest/vscodeExtensionApi'; import { api } from '../../api/api'; import { OverridableIcon } from "../../icons/IconProvider.tsx"; -interface Chain { +export interface Chain { id: string; name: string; } @@ -16,7 +15,6 @@ interface ChainColumnProps { export const ChainColumn: React.FC = ({ chains }) => { const [open, setOpen] = useState(false); - const navigate = useNavigate(); if (!chains || chains.length === 0) { return
No chains
; @@ -28,7 +26,7 @@ export const ChainColumn: React.FC = ({ chains }) => { void api.openChainInNewTab(chainId); } } else { - void navigate(`/chains/${chainId}/graph`); + window.open(`/chains/${chainId}/graph`, "_blank"); setOpen(false); } };