feat: remove request headers

package.json

@@ -7,6 +7,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-spread": "^7.16.7",
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/runtime": "^7.16.3",

packages/grafnode-components/.babelrc

@@ -2,5 +2,10 @@
   "presets": [
     "@babel/preset-env",
     ["@babel/preset-react", {"runtime": "automatic"}]
+  ],
+  "plugins": [
+    ["@babel/plugin-transform-spread", {
+      "loose": true
+    }]
   ]
 }

packages/grafnode-components/package.json

@@ -29,6 +29,7 @@
     "codemirror": "^5.64.0",
     "escape-html": "^1.0.3",
     "markdown-it": "^12.2.0",
+    "nanoid": "^3.1.30",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-tabs": "^3.2.3",

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

@@ -1,15 +1,22 @@
 import React, { useState } from 'react';
+import { nanoid } from 'nanoid';
 import StyledWrapper from './StyledWrapper';
 
+const initialState = [{
+  uid: nanoid(),
+  enabled: true
+}];
+
 const RequestHeaders = () => {
-  const [headers, setHeaders] = useState([{enabled: true}]);
+  const [headers, setHeaders] = useState(initialState);
 
   const addHeader = () => {
     let newHeader = {
+      uid: nanoid(),
       key: '',
       value: '',
       description: '',
-      enabled: true,
+      enabled: true
     };
 
     let newHeaders = [...headers, newHeader];
@@ -22,7 +29,7 @@ const RequestHeaders = () => {
   
   const handleRemoveHeader = (index) => {
     headers.splice(index, 1);
-    setHeaders(...headers);
+    setHeaders([...headers]);
   };
   
   return (
@@ -40,7 +47,7 @@ const RequestHeaders = () => {
         <tbody>
           {headers && headers.length && headers.map((header, index) => {
             return (
-              <tr key={index}>
+              <tr key={header.uid}>
                 <td>
                   <input
                     type="checkbox"
@@ -79,7 +86,7 @@ const RequestHeaders = () => {
                   </button>
                 </td>
               </tr>
-            )
+            );
           })}
         </tbody>
       </table>

packages/grafnode-components/webpack.config.js

@@ -40,6 +40,7 @@ module.exports = {
     'graphql': 'graphql',
     'escape-html': 'escape-html',
     'markdown-it': 'markdown-it',
+    'nanoid': 'nanoid',
     'graphql-request': 'graphql-request'
   },
   plugins: [