feat: save request modal + folder drilldown

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",

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}
       >
         <span style={{marginLeft: 5}}>Send</span>
-       </button>
+      </button>
+      <SaveRequestButton folders={collections}/>
     </StyledWrapper>
   )
 };

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}
         />
       </div>
       <section className="main">

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;

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 (
+    <StyledWrapper className="flex items-center">
+      <button
+        style={{backgroundColor: '#8e44ad'}}
+        className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
+        onClick={() => {
+          setOpenSaveRequestModal(true);
+        }}
+      >
+        <span style={{marginLeft: 5}}>Save</span>
+      </button>
+      {openSaveRequestModal ? (
+        <Modal 
+          size ="md"
+          title ="save request"
+          confirmText ="Save"
+          cancelText ="Cancel"
+          handleCancel = {() => setOpenSaveRequestModal(false)}
+          handleConfirm = {() => setOpenSaveRequestModal(false)}
+        >
+          <p className="mb-2">Select a folder to save request:</p>
+          <div className="folder-list">
+            {showFolders && showFolders.length ?  showFolders.map((folder) => (
+                <div 
+                  key={folder.id}
+                  className="folder-name"
+                  onClick={() => handleFolderClick(folder)}
+                >
+                  <FontAwesomeIcon className="mr-3 text-gray-500" icon={faFolder} style={{fontSize: 20}}/>
+                  {folder.name}
+                </div>
+            )): null}
+          </div>
+        </Modal>
+      ): null}
+    </StyledWrapper>
+  )
+};
+
+export default SaveRequestButton;

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",