feat: RequestTabs

package-lock.json

@@ -17,6 +17,7 @@
 				"@tippyjs/react": "^4.2.6",
 				"babel-plugin-styled-components": "^2.0.2",
 				"babel-preset-next": "^1.4.0",
+				"classnames": "^2.3.1",
 				"eslint": "7.32.0",
 				"eslint-config-next": "12.0.4",
 				"immer": "^9.0.7",
@@ -3011,6 +3012,11 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/@next/react-dev-overlay/node_modules/classnames": {
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+			"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+		},
 		"node_modules/@next/react-dev-overlay/node_modules/source-map": {
 			"version": "0.8.0-beta.0",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -4973,9 +4979,9 @@
 			}
 		},
 		"node_modules/classnames": {
-			"version": "2.2.6",
+			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-			"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
 		},
 		"node_modules/clean-css": {
 			"version": "5.2.2",
@@ -14320,6 +14326,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",
@@ -16525,6 +16532,11 @@
 						"supports-color": "^7.1.0"
 					}
 				},
+				"classnames": {
+					"version": "2.2.6",
+					"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+					"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+				},
 				"source-map": {
 					"version": "0.8.0-beta.0",
 					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -18046,9 +18058,9 @@
 			}
 		},
 		"classnames": {
-			"version": "2.2.6",
+			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-			"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
 		},
 		"clean-css": {
 			"version": "5.2.2",

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'
   }
 };

packages/grafnode-run/package-lock.json

@@ -14,6 +14,7 @@
         "@grafnode/www": "^0.0.1",
         "@tabler/icons": "^1.46.0",
         "@tippyjs/react": "^4.2.6",
+        "classnames": "^2.3.1",
         "immer": "^9.0.7",
         "nanoid": "^3.1.30",
         "next": "12.0.4",
@@ -2415,6 +2416,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/@next/react-dev-overlay/node_modules/classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "node_modules/@next/react-refresh-utils": {
       "version": "12.0.4",
       "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.4.tgz",
@@ -3467,9 +3473,9 @@
       }
     },
     "node_modules/classnames": {
-      "version": "2.2.6",
+      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
     },
     "node_modules/color": {
       "version": "4.1.0",
@@ -9725,6 +9731,11 @@
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
           }
+        },
+        "classnames": {
+          "version": "2.2.6",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+          "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
         }
       }
     },
@@ -10443,9 +10454,9 @@
       }
     },
     "classnames": {
-      "version": "2.2.6",
+      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
     },
     "color": {
       "version": "4.1.0",

packages/grafnode-run/package.json

@@ -26,6 +26,7 @@
     "@grafnode/www": "^0.0.1",
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
+    "classnames": "^2.3.1",
     "immer": "^9.0.7",
     "nanoid": "^3.1.30",
     "next": "12.0.4",

packages/grafnode-run/src/pageComponents/Main/index.js

@@ -1,5 +1,9 @@
 import React from 'react';
-import {Navbar, Sidebar} from '@grafnode/components';
+import {
+  Navbar,
+  RequestTabs,
+  Sidebar
+} from '@grafnode/components';
 import actions from 'providers/Store/actions';
 import { useStore } from 'providers/Store';
 import StyledWrapper from './StyledWrapper';
@@ -9,6 +13,7 @@ export default function Main() {
 
   const {
     collections,
+    requestTabs,
     activeRequestTabId
   } = state;
 
@@ -25,7 +30,12 @@ export default function Main() {
           activeRequestTabId={activeRequestTabId}
         />
         <section className='mt-4 flex flex-grow flex-col'>
-          Request & Response Tabs
+          <RequestTabs
+            requestTabs={requestTabs}
+            actions={actions}
+            dispatch={dispatch}
+            activeRequestTabId={activeRequestTabId}
+          />
         </section>
       </StyledWrapper>
     </div>