feat: RequestTabs

packages/grafnode-components/package.json

@@ -23,6 +23,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
+    "classnames": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-tabs": "^3.2.3",

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

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  ul {
+    width: 100%;
+    padding: 0;
+    margin: 0 0 10px;
+    padding-left: 1rem;
+    border-bottom: 1px solid #cfcfcf;
+
+    li {
+      display: inline-block;
+      width: 150px;
+      border: 1px solid transparent;
+      border-bottom: none;
+      bottom: -1px;
+      position: relative;
+      list-style: none;
+      padding: 6px 12px;
+      cursor: pointer;
+
+      &.active {
+        border-color: #cfcfcf;
+        background: #fff;
+        border-radius: 5px 5px 0 0;
+      }
+
+      .tab-label {
+        overflow: hidden;
+      }
+
+      .tab-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;      }
+
+      .close-icon-container {
+        min-height: 20px;
+
+        .close-icon {
+          color: #9f9f9f;
+          width: 8px;
+        }
+
+        &:hover .close-icon{
+          color: rgb(142, 68, 173);
+        }
+      }
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import classnames from 'classnames';
+import StyledWrapper from './StyledWrapper';
+
+const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
+  const getTabClassname = (tab) => {
+    return classnames("request-tab select-none", {
+      'active': tab.id === activeRequestTabId
+    });
+  };
+
+  const getMethodColor = (method) => {
+    let color = '';
+    switch(method) {
+      case 'GET': {
+        color = 'rgb(5, 150, 105)';
+        break;
+      }
+      case 'POST': {
+        color = '#8e44ad';
+        break;
+      }
+    }
+
+    return color;
+  };
+
+  const handleClick = (tab) => {
+    dispatch({
+      type: actions.REQUEST_TAB_CLICK,
+      requestTab: tab
+    });
+  };
+
+  const handleCloseClick = (event, tab) => {
+    event.stopPropagation();
+    event.preventDefault();
+    dispatch({
+      type: actions.REQUEST_TAB_CLOSE,
+      requestTab: tab
+    });
+  };
+
+  return (
+    <StyledWrapper className="mt-3 flex items-center">
+      <ul role="tablist">
+        {requestTabs && requestTabs.length ? requestTabs.map((rt) => {
+          return <li key={rt.id} className={getTabClassname(rt)} role="tab" onClick={() => handleClick(rt)}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center tab-label">
+                <span className="tab-method" style={{fontSize: 13, color: getMethodColor(rt.method)}}>{rt.method}</span>
+                <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
+              </div>
+              {rt.id === activeRequestTabId ? (
+                <div className="flex pl-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
+                  <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+                    <path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
+                  </svg>
+                </div>
+              ) : null}
+            </div>
+          </li>
+        }) : null}
+      </ul>
+    </StyledWrapper>
+  );
+};
+
+export default RequestTabs;

packages/grafnode-components/src/index.js

@@ -1,7 +1,9 @@
 import Navbar from './components/Navbar';
 import Sidebar from './components/Sidebar';
+import RequestTabs from './components/RequestTabs';
 
 export {
   Navbar,
-  Sidebar
+  Sidebar,
+  RequestTabs
 };

packages/grafnode-components/webpack.config.js

@@ -25,6 +25,7 @@ module.exports = {
     'styled-components': 'styled-components',
     '@tabler/icon': '@tabler/icon',
     '@fortawesome/free-solid-svg-icons': '@fortawesome/free-solid-svg-icons',
-    '@fortawesome/react-fontawesome': '@fortawesome/react-fontawesome'
+    '@fortawesome/react-fontawesome': '@fortawesome/react-fontawesome',
+    'classnames': 'classnames'
   }
 };