Merge pull request #462 from kreneskyp/select_links

ChainSelect link to open

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 (
+    <FormHelperText fontSize={"xs"}>
+      <Text as={"span"}>{field.description}</Text>
+      {value && (
+        <LinkText
+          fontSize={"xs"}
+          pl={"3px"}
+          onClick={() => editor.selectOrOpenChain(value)}
+        >
+          Open <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+        </LinkText>
+      )}
+    </FormHelperText>
+  );
+};
+
+ChainSelect.help = ChainSelectHelp;

frontend/components/LinkText.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Text } from "@chakra-ui/react";
+
+export const LinkText = ({ children, ...props }) => (
+  <Text
+    as={"span"}
+    color={"blue.300"}
+    css={{ textDecoration: "underline dotted" }}
+    mr={1}
+    cursor={"pointer"}
+    {...props}
+  >
+    {children}
+  </Text>
+);

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 }) => (
+  <FormHelperText fontSize={"xs"}>{field.description}</FormHelperText>
+);
+
 /**
  * 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%"}
       />
-      <FormHelperText fontSize={"xs"}>{field.description}</FormHelperText>
+      <HelpComponent field={field} value={value} config={config} />
     </Box>
   );
 };
@@ -46,6 +51,16 @@ export const APISelect = ({
  */
 APISelect.for_select = (component) => {
   return (props) => {
-    return <APISelect Component={component} {...props} />;
+    return (
+      <APISelect
+        Component={component}
+        HelpComponent={component.help || DefaultHelp}
+        {...props}
+      />
+    );
   };
 };
+
+APISelect.defaultProps = {
+  HelpComponent: DefaultHelp,
+};