extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-21 23:43:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: RequestTabs

Browse Source
This commit is contained in:
Anoop M D 2021-12-04 02:03:46 +05:30
parent a863f9730d
commit f6732e66a0
9 changed files with 176 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@ -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",

1
packages/grafnode-components/package.json
View File

@ -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",

53
packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js Normal file
View File

@ -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;

69
packages/grafnode-components/src/components/RequestTabs/index.js Normal file
View File

@ -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;

4
packages/grafnode-components/src/index.js
View File

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

3
packages/grafnode-components/webpack.config.js
View File

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

23
packages/grafnode-run/package-lock.json generated
View File

@ -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",

1
packages/grafnode-run/package.json
View File

@ -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",

14
packages/grafnode-run/src/pageComponents/Main/index.js
View File

@ -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>