Merge pull request #409 from kreneskyp/chain_draggable

Chains may now be dragged-n-dropped into graph from chain modal

frontend/chains/ChainCard.js

@@ -10,6 +10,7 @@ import {
 import { useColorMode } from "@chakra-ui/color-mode";
 import { ChainEditButton } from "chains/ChainEditButton";
 import { ModalClose } from "components/Modal";
+import { ChainDraggable } from "chains/ChainDraggable";
 
 const ChainCard = ({ chain, children, ...props }) => {
   const close = React.useContext(ModalClose);
@@ -55,6 +56,7 @@ const ChainCard = ({ chain, children, ...props }) => {
           </Text>
         </VStack>
         <HStack spacing={2} pt={4} display="flex" justifyContent="flex-end">
+          <ChainDraggable chain={chain} />
           <ChainEditButton chain={chain} onClick={close} />
         </HStack>
       </CardBody>

frontend/chains/ChainDraggable.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Box } from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChain } from "@fortawesome/free-solid-svg-icons";
+import { DraggableNode } from "chains/editor/DraggableNode";
+import { useEditorColorMode } from "chains/editor/useColorMode";
+
+export const ChainDraggable = ({ chain }) => {
+  const { isLight } = useEditorColorMode();
+  const style = isLight
+    ? {
+        bg: "gray.100",
+        _hover: { bg: "gray.300" },
+      }
+    : {
+        bg: "whiteAlpha.200",
+        _hover: { bg: "whiteAlpha.300" },
+      };
+
+  return (
+    <DraggableNode
+      name={chain.name}
+      description={chain.description}
+      config={{ chain_id: chain.id }}
+      class_path="ix.runnable.flow.load_chain_id"
+    >
+      <Box
+        p={2}
+        h={8}
+        borderRadius={5}
+        borderLeft={"6px solid"}
+        borderColor={"blue.300"}
+        fontSize={"sm"}
+        display={"flex"}
+        alignItems={"center"}
+        {...style}
+      >
+        <FontAwesomeIcon icon={faChain} style={{ marginRight: "5px" }} />{" "}
+        Reference
+      </Box>
+    </DraggableNode>
+  );
+};