From f6732e66a03c38487eb0c11dc006c72a447c9de5 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Sat, 4 Dec 2021 02:03:46 +0530 Subject: [PATCH] feat: RequestTabs --- package-lock.json | 24 +++++-- packages/grafnode-components/package.json | 1 + .../components/RequestTabs/StyledWrapper.js | 53 ++++++++++++++ .../src/components/RequestTabs/index.js | 69 +++++++++++++++++++ packages/grafnode-components/src/index.js | 4 +- .../grafnode-components/webpack.config.js | 3 +- packages/grafnode-run/package-lock.json | 23 +++++-- packages/grafnode-run/package.json | 1 + .../src/pageComponents/Main/index.js | 14 +++- 9 files changed, 176 insertions(+), 16 deletions(-) create mode 100644 packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js create mode 100644 packages/grafnode-components/src/components/RequestTabs/index.js diff --git a/package-lock.json b/package-lock.json index 8d95d677c..d470faf18 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "clean-css": { "version": "5.2.2", diff --git a/packages/grafnode-components/package.json b/packages/grafnode-components/package.json index 966251792..f637a7a44 100644 --- a/packages/grafnode-components/package.json +++ b/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", diff --git a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js new file mode 100644 index 000000000..6f4e02c1b --- /dev/null +++ b/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; diff --git a/packages/grafnode-components/src/components/RequestTabs/index.js b/packages/grafnode-components/src/components/RequestTabs/index.js new file mode 100644 index 000000000..8fdb408de --- /dev/null +++ b/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 ( + + + + ); +}; + +export default RequestTabs; diff --git a/packages/grafnode-components/src/index.js b/packages/grafnode-components/src/index.js index 9753a4832..c1455a656 100644 --- a/packages/grafnode-components/src/index.js +++ b/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 }; diff --git a/packages/grafnode-components/webpack.config.js b/packages/grafnode-components/webpack.config.js index 0bcd5d2a4..a4d3ff679 100644 --- a/packages/grafnode-components/webpack.config.js +++ b/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' } }; \ No newline at end of file diff --git a/packages/grafnode-run/package-lock.json b/packages/grafnode-run/package-lock.json index 1ab1e9add..7f68c0978 100644 --- a/packages/grafnode-run/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "color": { "version": "4.1.0", diff --git a/packages/grafnode-run/package.json b/packages/grafnode-run/package.json index a70bdef53..b97e461da 100644 --- a/packages/grafnode-run/package.json +++ b/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", diff --git a/packages/grafnode-run/src/pageComponents/Main/index.js b/packages/grafnode-run/src/pageComponents/Main/index.js index c631f3797..33286f2eb 100644 --- a/packages/grafnode-run/src/pageComponents/Main/index.js +++ b/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} />
- Request & Response Tabs +