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, +};