feat: #353 Aligning UI for Chain Trigger

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<ElementModificationProps> = ({
               bodyMimeTypeField: BodyMimeTypeField,
               singleSelectField: SingleSelectField,
               contextServiceField: ContextServiceField,
-              chainTriggerSelectField: ChainTriggerSelectField,
+              chainTriggerElementIdField: ChainTriggerElementIdField,
             }}
             widgets={widgets}
             onChange={(e) => {

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",

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<string, JSONSchema7, FormContext>
+> = (props) => {
+  return props.schema.readOnly ? (
+    <ChainTriggerUsedByField {...props} />
+  ) : (
+    <ChainTriggerSelectField {...props} />
+  );
+};
+
+export default ChainTriggerElementIdField;

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<string, JSONSchema7, FormContext>
+> = ({ id, formData}) => {
+  const notificationService = useNotificationService();
+
+  const [chains, setChains] = useState<Chain[]>([]);
+  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 (
+    <>
+      <label htmlFor={id} className={styles["field-label"]}>
+        Used By
+      </label>
+      <ChainColumn chains={chains} />
+    </>
+  );
+};
+
+export default ChainTriggerUsedByField;

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(

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<ChainColumnProps> = ({ chains }) => {
   const [open, setOpen] = useState(false);
-  const navigate = useNavigate();
 
   if (!chains || chains.length === 0) {
     return <div style={{ color: 'var(--vscode-descriptionForeground, rgba(0, 0, 0, 0.45))' }}>No chains</div>;
@@ -28,7 +26,7 @@ export const ChainColumn: React.FC<ChainColumnProps> = ({ chains }) => {
         void api.openChainInNewTab(chainId);
       }
     } else {
-      void navigate(`/chains/${chainId}/graph`);
+      window.open(`/chains/${chainId}/graph`, "_blank");
       setOpen(false);
     }
   };