diff --git a/packages/grafnode-components/package.json b/packages/grafnode-components/package.json index 779408a3c..b78b877e2 100644 --- a/packages/grafnode-components/package.json +++ b/packages/grafnode-components/package.json @@ -18,8 +18,7 @@ "url": "https://github.com/grafnode/grafnode/issues" }, "homepage": "https://github.com/grafnode/grafnode#readme", - "dependencies": { - }, + "dependencies": {}, "peerDependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", diff --git a/packages/grafnode-components/src/components/QueryUrl/index.js b/packages/grafnode-components/src/components/QueryUrl/index.js index e047222af..95f6fbb21 100644 --- a/packages/grafnode-components/src/components/QueryUrl/index.js +++ b/packages/grafnode-components/src/components/QueryUrl/index.js @@ -4,8 +4,9 @@ import { faCaretDown } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import Dropdown from '../Dropdown'; import StyledWrapper from './StyledWrapper'; +import SaveRequestButton from '../SaveRequest'; -const QueryUrl = ({value, onChange, handleRun}) => { +const QueryUrl = ({value, onChange, handleRun, collections}) => { const dropdownTippyRef = useRef(); const viewProfile = () => {}; @@ -93,7 +94,8 @@ const QueryUrl = ({value, onChange, handleRun}) => { onClick={handleRun} > Send - + + ) }; diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js index 6776ba9c8..c2fffc2d4 100644 --- a/packages/grafnode-components/src/components/RequestTabPanel/index.js +++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js @@ -125,6 +125,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re value = {url} onChange={onUrlChange} handleRun={runQuery} + collections={collections} /> diff --git a/packages/grafnode-components/src/components/SaveRequest/StyledWrapper.js b/packages/grafnode-components/src/components/SaveRequest/StyledWrapper.js new file mode 100644 index 000000000..f0679fe18 --- /dev/null +++ b/packages/grafnode-components/src/components/SaveRequest/StyledWrapper.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + height: 2.3rem; + + .folder-list { + border: 1px solid #ccc; + border-radius: 5px; + + .folder-name { + padding-block: 8px; + padding-inline: 12px; + cursor: pointer; + &: hover { + background-color: #e8e8e8; + } + } +`; + +export default Wrapper; diff --git a/packages/grafnode-components/src/components/SaveRequest/index.js b/packages/grafnode-components/src/components/SaveRequest/index.js new file mode 100644 index 000000000..7356a5e54 --- /dev/null +++ b/packages/grafnode-components/src/components/SaveRequest/index.js @@ -0,0 +1,64 @@ +import React, { useState, useEffect } from 'react'; +import { faFolder } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import StyledWrapper from './StyledWrapper'; +import Modal from '../Modal'; + +const SaveRequestButton = ({folders}) => { + const [openSaveRequestModal, setOpenSaveRequestModal] = useState(false); + const [showFolders, setShowFolders] = useState([]); + + useEffect(() => { + setShowFolders(folders); + }, [folders, openSaveRequestModal]) + + const handleFolderClick = (folder) => { + let subFolders = []; + for (let item of folder.items) { + if (item.items) { + subFolders.push(item) + } + } + subFolders.length ? setShowFolders(subFolders) : setShowFolders((prev) => prev); + } + + return ( + + { + setOpenSaveRequestModal(true); + }} + > + Save + + {openSaveRequestModal ? ( + setOpenSaveRequestModal(false)} + handleConfirm = {() => setOpenSaveRequestModal(false)} + > + Select a folder to save request: + + {showFolders && showFolders.length ? showFolders.map((folder) => ( + handleFolderClick(folder)} + > + + {folder.name} + + )): null} + + + ): null} + + ) +}; + +export default SaveRequestButton; diff --git a/packages/grafnode-run/package.json b/packages/grafnode-run/package.json index acbbdda8e..e8e535878 100644 --- a/packages/grafnode-run/package.json +++ b/packages/grafnode-run/package.json @@ -21,8 +21,10 @@ }, "homepage": "https://github.com/grafnode/grafnode#readme", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", + "@grafnode/components": "^0.0.1", "@grafnode/www": "^0.0.1", "@tabler/icons": "^1.46.0", "@tippyjs/react": "^4.2.6", @@ -31,6 +33,7 @@ "codemirror-graphql": "^1.2.5", "escape-html": "^1.0.3", "graphiql": "^1.5.9", + "graphql": "^16.2.0", "graphql-request": "^3.7.0", "immer": "^9.0.7", "lodash": "^4.17.21",
Select a folder to save request: