feat: HttpRequestPane

packages/grafnode-components/src/components/GraphQLRequestPane/index.js

@@ -4,7 +4,7 @@ import StyledWrapper from './StyledWrapper';
 import QueryEditor from '../QueryEditor';
 import RequestHeaders from '../RequestHeaders';
 
-const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
+const GraphQLRequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
   return (
     <StyledWrapper className="h-full">
       <Tabs className='react-tabs mt-1 flex flex-grow flex-col h-full' forceRenderTabPanel>
@@ -29,4 +29,4 @@ const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange})
   )
 };
 
-export default RequestPane;
+export default GraphQLRequestPane;

packages/grafnode-components/src/components/HttpRequestPane/StyledWrapper.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .react-tabs__tab-list {
+    border-bottom: none !important;
+    padding-top: 0;
+    padding-left: 0 !important;
+    display: flex;
+    align-items: center;
+    margin: 0;
+
+    .react-tabs__tab {
+      font-size: 14px;
+      padding: 6px 0px;
+      border: none;
+      user-select: none;
+      border-bottom: solid 2px transparent;
+      margin-right: 20px;
+      color: rgb(117 117 117);
+      outline: none !important;
+
+      &:focus, &:active, &:focus-within, &:focus-visible, &:target {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      &:after {
+        display: none !important;
+      }
+    }
+  }
+
+  .react-tabs__tab--selected {
+    border: none;
+    color: #322e2c !important;
+    border-bottom: solid 2px #8e44ad !important;
+    border-color: #8e44ad !important;
+    background: inherit;
+    outline: none !important;
+    box-shadow: none !important;
+
+    &:focus, &:active, &:focus-within, &:focus-visible, &:target {
+      border: none;
+      outline: none !important;
+      box-shadow: none !important;
+      border-bottom: solid 2px #8e44ad !important;
+      border-color: #8e44ad !important;
+      background: inherit;
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .react-tabs__tab-panel--selected {
+    height: 90%;
+  }
+`;
+
+export default StyledWrapper;

packages/grafnode-components/src/components/HttpRequestPane/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
+import StyledWrapper from './StyledWrapper';
+import QueryParams from '../QueryParams';
+import RequestHeaders from '../RequestHeaders';
+
+const HttpRequestPane = ({leftPaneWidth}) => {
+  return (
+    <StyledWrapper className="h-full">
+      <Tabs className='react-tabs mt-1 flex flex-grow flex-col h-full' forceRenderTabPanel>
+        <TabList>
+          <Tab tabIndex="-1">Params</Tab>
+          <Tab tabIndex="-1">Headers</Tab>
+        </TabList>
+        <TabPanel>
+          <QueryParams />
+        </TabPanel>
+        <TabPanel>
+          <RequestHeaders />
+        </TabPanel>
+      </Tabs>
+    </StyledWrapper>
+  )
+};
+
+export default HttpRequestPane;

packages/grafnode-components/src/components/QueryParams/StyledWrapper.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+
+    thead, td {
+      border: 1px solid #efefef;
+    }
+
+    thead {
+      color: #616161;
+      font-size: 0.75rem;
+    }
+    td {
+      padding: 6px 10px;
+    }
+  }
+
+  .btn-add-param {
+    margin-block: 10px;
+    padding: 5px;
+  }
+
+  input[type="text"] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+
+    &:focus{
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+`;
+
+export default Wrapper;

packages/grafnode-components/src/components/QueryParams/index.js

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import { IconTrash } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const initialState = [{
+  uid: nanoid(),
+  enabled: true
+}];
+
+const QueryParams = () => {
+  const [params, setParams] = useState(initialState);
+
+  const addParam = () => {
+    let newParam = {
+      uid: nanoid(),
+      key: '',
+      value: '',
+      description: '',
+      enabled: true
+    };
+
+    let newParams = [...params, newParam];
+    setParams(newParams);
+  };
+
+  const handleParamValueChange = (e, index, menu) => {
+    // todo: yet to implement
+  };
+  
+  const handleRemoveHeader = (index) => {
+    params.splice(index, 1);
+    setParams([...params]);
+  };
+  
+  return (
+    <StyledWrapper className="mt-4">
+      <table>
+        <thead>
+          <tr>
+            <td>Key</td>
+            <td>Value</td>
+            <td>Description</td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {params && params.length ? params.map((header, index) => {
+            return (
+              <tr key={header.uid}>
+                <td>
+                  <input
+                    type="text"
+                    name="key"
+                    autocomplete="off"
+                    defaultValue={params[index].key}
+                    onChange={(e) => handleParamValueChange(e, index, 'key')}
+                  />
+                </td>
+                <td>
+                  <input
+                    type="text"
+                    name="value"
+                    autocomplete="off"
+                    defaultValue={params[index].value}
+                    onChange={(e) => handleParamValueChange(e, index, 'value')}
+                  />
+                </td>
+                <td>
+                  <input
+                    type="text"
+                    name="description"
+                    autocomplete="off"
+                    defaultValue={params[index].description}
+                    onChange={(e) => handleParamValueChange(e, index, 'description')}
+                  />
+                </td>
+                <td>
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      className="mr-3"
+                      defaultChecked={header.enabled}
+                      name="enabled"
+                      onChange={(e) => handleParamValueChange(e, index, 'enabled')}
+                    />
+                    <button onClick={() => handleRemoveHeader(index)}>
+                      <IconTrash strokeWidth={1.5} size={20}/>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            );
+          }) : null}
+        </tbody>
+      </table>
+      <button className="btn-add-param" onClick={addParam}>+ Add Param</button>
+    </StyledWrapper>
+  )
+};
+export default QueryParams;

packages/grafnode-components/src/components/RequestTabPanel/index.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import find from 'lodash/find';
 import QueryUrl from '../QueryUrl';
-import RequestPane from '../RequestPane';
+import GraphQLRequestPane from '../GraphQLRequestPane';
+import HttpRequestPane from '../HttpRequestPane';
 import ResponsePane from '../ResponsePane';
 import Welcome from '../Welcome';
 import {
@@ -120,13 +121,21 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
       <section className="main flex flex-grow">
         <section className="request-pane px-4">
           <div style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}>
-            <RequestPane
+            {item.request.type === 'graphql' ? (
-              onRunQuery={runQuery}
+              <GraphQLRequestPane
-              schema={schema}
+                onRunQuery={runQuery}
-              leftPaneWidth={leftPaneWidth}
+                schema={schema}
-              value={item.request.body.graphql.query}
+                leftPaneWidth={leftPaneWidth}
-              onQueryChange={onGraphqlQueryChange}
+                value={item.request.body.graphql.query}
-            />
+                onQueryChange={onGraphqlQueryChange}
+              />
+            ) : null}
+
+            {item.request.type === 'http' ? (
+              <HttpRequestPane
+                leftPaneWidth={leftPaneWidth}
+              />
+            ) : null}
           </div>
         </section>