diff --git a/frontend/chains/ChainSelect.js b/frontend/chains/ChainSelect.js
index 7c499f29..586d679f 100644
--- a/frontend/chains/ChainSelect.js
+++ b/frontend/chains/ChainSelect.js
@@ -1,10 +1,15 @@
import React from "react";
import axios from "axios";
+import { FormHelperText, Text } from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { AsyncAPIObjectSelect } from "components/AsyncAPIObjectSelect";
import { MenuList } from "components/select/MenuList";
import { SingleValue } from "components/select/SingleValue";
import { Option } from "components/select/Option";
+import { LinkText } from "components/LinkText";
+import { EditorViewState } from "chains/editor/contexts";
const toOption = (chain) => ({
label: chain.name,
@@ -54,3 +59,24 @@ export const ChainSelect = ({ onChange, value, is_agent }) => {
/>
);
};
+
+export const ChainSelectHelp = ({ value, field }) => {
+ const editor = React.useContext(EditorViewState);
+
+ return (
+
+ {field.description}
+ {value && (
+ editor.selectOrOpenChain(value)}
+ >
+ Open
+
+ )}
+
+ );
+};
+
+ChainSelect.help = ChainSelectHelp;
diff --git a/frontend/components/LinkText.js b/frontend/components/LinkText.js
new file mode 100644
index 00000000..bc33babf
--- /dev/null
+++ b/frontend/components/LinkText.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { Text } from "@chakra-ui/react";
+
+export const LinkText = ({ children, ...props }) => (
+
+ {children}
+
+);
diff --git a/frontend/json_form/fields/APISelect.js b/frontend/json_form/fields/APISelect.js
index 13d183a9..3d27e963 100644
--- a/frontend/json_form/fields/APISelect.js
+++ b/frontend/json_form/fields/APISelect.js
@@ -2,12 +2,17 @@ import React from "react";
import { Box, FormLabel, FormHelperText } from "@chakra-ui/react";
import { getLabel } from "json_form/utils";
+export const DefaultHelp = ({ field }) => (
+ {field.description}
+);
+
/**
* Generic JSONSchemaForm field component that wraps a Select component. This is a
* shortcut for adding integrating a custom component with JSONSchemaForm.
*/
export const APISelect = ({
Component,
+ HelpComponent,
name,
field,
isRequired,
@@ -34,7 +39,7 @@ export const APISelect = ({
value={value}
width={"100%"}
/>
- {field.description}
+
);
};
@@ -46,6 +51,16 @@ export const APISelect = ({
*/
APISelect.for_select = (component) => {
return (props) => {
- return ;
+ return (
+
+ );
};
};
+
+APISelect.defaultProps = {
+ HelpComponent: DefaultHelp,
+};