feat: request headers

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

@@ -0,0 +1,39 @@
+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: #777777;
+      font-size: 0.75rem;
+    }
+    td {
+      padding: 6px 10px;
+    }
+  }
+
+  .btn-add-header {
+    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;
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const RequestHeaders = () => {
+  const [headers, setHeaders] = useState([{enabled: true}]);
+
+  const addHeader = () => {
+    let newHeader = {
+      key: '',
+      value: '',
+      description: '',
+      enabled: true,
+    };
+
+    let newHeaders = [...headers, newHeader];
+    setHeaders(newHeaders);
+  };
+
+  const handleHeaderValueChange = (e, index, menu) => {
+    // todo: yet to implement
+  };
+  
+  const handleRemoveHeader = (index) => {
+    headers.splice(index, 1);
+    setHeaders(...headers);
+  };
+  
+  return (
+    <StyledWrapper className="mt-4">
+      <table>
+        <thead>
+          <tr>
+            <td></td>
+            <td>KEY</td>
+            <td>VALUE</td>
+            <td>DESCRIPTION</td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {headers && headers.length && headers.map((header, index) => {
+            return (
+              <tr key={index}>
+                <td>
+                  <input
+                    type="checkbox"
+                    defaultChecked={header.enabled}
+                    name="enabled"
+                    onChange={(e) => handleHeaderValueChange(e, index, 'enabled')}
+                  />
+                </td>
+                <td>
+                  <input
+                    type="text"
+                    name="key"
+                    defaultValue={headers[index].key}
+                    onChange={(e) => handleHeaderValueChange(e, index, 'key')}
+                  />
+                </td>
+                <td>
+                  <input
+                    type="text"
+                    name="value"
+                    defaultValue={headers[index].value}
+                    onChange={(e) => handleHeaderValueChange(e, index, 'value')}
+                  />
+                </td>
+                <td>
+                  <input
+                    type="text"
+                    name="description"
+                    defaultValue={headers[index].description}
+                    onChange={(e) => handleHeaderValueChange(e, index, 'description')}
+                  />
+                </td>
+                <td>
+                  <button onClick={() => handleRemoveHeader(index)}>
+                    remove
+                  </button>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      <button className="btn-add-header" onClick={addHeader}>+ Add Header</button>
+    </StyledWrapper>
+  )
+};
+export default RequestHeaders;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import StyledWrapper from './StyledWrapper';
 import QueryEditor from '../QueryEditor';
+import RequestHeaders from '../RequestHeaders';
 
 const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
   return (
@@ -21,7 +22,7 @@ const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange})
           />
         </TabPanel>
         <TabPanel>
-          Headers
+          <RequestHeaders />
         </TabPanel>
       </Tabs>
     </StyledWrapper>