diff --git a/renderer/components/RequestTabs/RequestTab/StyledWrapper.js b/renderer/components/RequestTabs/RequestTab/StyledWrapper.js
new file mode 100644
index 00000000..783fca55
--- /dev/null
+++ b/renderer/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ .tab-label {
+ overflow: hidden;
+ }
+
+ .tab-name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .close-icon-container {
+ min-height: 20px;
+ border-radius: 3px;
+
+ .close-icon {
+ display: none;
+ color: #9f9f9f;
+ width: 8px;
+ padding-bottom: 6px;
+ padding-top: 6px;
+ }
+
+ &:hover, &:hover .close-icon {
+ background-color: #eaeaea;
+ color: rgb(76 76 76);
+ }
+
+ .has-changes-icon {
+ height: 24px;
+ }
+ }
+`;
+
+export default StyledWrapper;
+
diff --git a/renderer/components/RequestTabs/RequestTab/index.js b/renderer/components/RequestTabs/RequestTab/index.js
new file mode 100644
index 00000000..3ceb86a4
--- /dev/null
+++ b/renderer/components/RequestTabs/RequestTab/index.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import get from 'lodash/get';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { useDispatch } from 'react-redux';
+import { findItemInCollection } from 'utils/collections';
+import StyledWrapper from './StyledWrapper';
+import { IconAlertTriangle } from '@tabler/icons';
+
+const RequestTab = ({tab, collection}) => {
+ const dispatch = useDispatch();
+
+ const handleCloseClick = (event) => {
+ event.stopPropagation();
+ event.preventDefault();
+ dispatch(closeTabs({
+ tabUids: [tab.uid]
+ }))
+ };
+
+ const getMethodColor = (method = '') => {
+ let color = '';
+ method = method.toLocaleLowerCase();
+ switch(method) {
+ case 'get': {
+ color = 'rgb(5, 150, 105)';
+ break;
+ }
+ case 'post': {
+ color = '#8e44ad';
+ break;
+ }
+ }
+
+ return color;
+ };
+
+ const item = findItemInCollection(collection, tab.uid);
+
+ if(!item) {
+ return (
+
+
+
+ Not Found
+
+ handleCloseClick(e)}>
+
+
+ );
+ }
+
+ const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
+
+ return (
+
+
+ {method}
+ {item.name}
+
+ handleCloseClick(e)}>
+ {!item.draft ? (
+
+ ) : (
+
+ ) }
+
+ );
+};
+
+export default RequestTab;
diff --git a/renderer/components/RequestTabs/StyledWrapper.js b/renderer/components/RequestTabs/StyledWrapper.js
index 5c02074f..ddd20e3c 100644
--- a/renderer/components/RequestTabs/StyledWrapper.js
+++ b/renderer/components/RequestTabs/StyledWrapper.js
@@ -1,20 +1,27 @@
import styled from 'styled-components';
const Wrapper = styled.div`
+ border-bottom: 1px solid var(--color-layout-border);
+
ul {
- width: 100%;
padding: 0;
- margin: 0 0 10px;
- padding-left: 1rem;
- border-bottom: 1px solid var(--color-layout-border);
+ margin: 0;
+ display: flex;
+ bottom: -1px;
+ position: relative;
+ overflow: scroll;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
li {
display: inline-flex;
width: 150px;
+ min-width: 150px;
+ max-width: 150px;
border: 1px solid transparent;
border-bottom: none;
- bottom: -1px;
- position: relative;
list-style: none;
padding-top: 8px;
padding-bottom: 8px;
@@ -40,38 +47,6 @@ const Wrapper = styled.div`
}
}
-
- .tab-label {
- overflow: hidden;
- }
-
- .tab-name {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap; }
-
- .close-icon-container {
- min-height: 20px;
- border-radius: 3px;
-
- .close-icon {
- display: none;
- color: #9f9f9f;
- width: 8px;
- padding-bottom: 6px;
- padding-top: 6px;
- }
-
- &:hover, &:hover .close-icon {
- background-color: #eaeaea;
- color: rgb(76 76 76);
- }
-
- .has-changes-icon {
- height: 24px;
- }
- }
-
&.active {
.close-icon-container .close-icon {
display: block;
@@ -84,14 +59,17 @@ const Wrapper = styled.div`
}
}
- &.new-tab {
+ &.short-tab {
vertical-align: bottom;
width: 34px;
+ min-width: 34px;
+ max-width: 34px;
padding: 3px 0px;
display: inline-flex;
justify-content: center;
color: rgb(117 117 117);
- margin-bottom: 2px;
+ position: relative;
+ top: -1px;
> div {
padding: 3px 4px;
@@ -145,6 +123,16 @@ const Wrapper = styled.div`
}
}
}
+
+ &.has-chevrons {
+ ul {
+ li:first-child {
+ .tab-container {
+ border-left: 1px solid #dcdcdc;
+ }
+ }
+ }
+ }
`;
export default Wrapper;
diff --git a/renderer/components/RequestTabs/index.js b/renderer/components/RequestTabs/index.js
index 14bd63d7..f18dbecc 100644
--- a/renderer/components/RequestTabs/index.js
+++ b/renderer/components/RequestTabs/index.js
@@ -1,19 +1,24 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
import find from 'lodash/find';
import filter from 'lodash/filter';
import classnames from 'classnames';
-import { IconHome2 } from '@tabler/icons';
+import { IconHome2, IconChevronRight, IconChevronLeft } from '@tabler/icons';
import { useSelector, useDispatch } from 'react-redux';
-import { focusTab, closeTab } from 'providers/ReduxStore/slices/tabs';
-import { findItemInCollection } from 'utils/collections';
+import { focusTab } from 'providers/ReduxStore/slices/tabs';
+import NewRequest from 'components/Sidebar/NewRequest';
import CollectionToolBar from './CollectionToolBar';
+import RequestTab from './RequestTab';
import StyledWrapper from './StyledWrapper';
const RequestTabs = () => {
+ const dispatch = useDispatch();
+ const tabsRef = useRef();
+ const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
const tabs = useSelector((state) => state.tabs.tabs);
const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
const collections = useSelector((state) => state.collections.collections);
- const dispatch = useDispatch();
+ const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
+ const screenWidth = useSelector((state) => state.app.screenWidth);
const getTabClassname = (tab, index) => {
return classnames("request-tab select-none", {
@@ -22,39 +27,13 @@ const RequestTabs = () => {
});
};
- 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(focusTab({
uid: tab.uid
}));
};
- const handleCloseClick = (event, tab) => {
- event.stopPropagation();
- event.preventDefault();
- dispatch(closeTab({
- tabUid: tab.uid
- }))
- };
-
- const createNewTab = () => {
- // todo
- };
+ const createNewTab = () => setNewRequestModalOpen(true);
if(!activeTabUid) {
return null;
@@ -71,73 +50,89 @@ const RequestTabs = () => {
const activeCollection = find(collections, (c) => c.uid === activeTab.collectionUid);
const collectionRequestTabs = filter(tabs, (t) => t.collectionUid === activeTab.collectionUid);
- const item = findItemInCollection(activeCollection, activeTab.uid);
- if(!item || !item.uid) {
- return (
-
- Request not found!
-
- );
- }
+ const maxTablistWidth = screenWidth - leftSidebarWidth - 150;
+ const tabsWidth = (collectionRequestTabs.length * 150) + 34; // 34: (+)icon
+ const showChevrons = maxTablistWidth < tabsWidth;
- const getRequestName = (tab) => {
- const item = findItemInCollection(activeCollection, tab.uid);
- return item ? item.name : '';
- }
+ const leftSlide = () => {
+ tabsRef.current.scrollBy({
+ left: -120,
+ behavior: 'smooth'
+ });
+ };
- const getRequestMethod = (tab) => {
- const item = findItemInCollection(activeCollection, tab.uid);
- return item ? item.request.method : '';
- }
+ // todo: bring new tab to focus if its not in focus
+ // tabsRef.current.scrollLeft
+
+ const rightSlide = () => {
+ tabsRef.current.scrollBy({
+ left: 120,
+ behavior: 'smooth'
+ });
+ };
+
+ const getRootClassname = () => {
+ return classnames({
+ 'has-chevrons': showChevrons
+ });
+ };
return (
-
+
+ {newRequestModalOpen && setNewRequestModalOpen(false)}/>}
{collectionRequestTabs && collectionRequestTabs.length ? (
<>
-
+
- -
+ {showChevrons ? (
+
-
+
+
+
+
+ ) : null}
+ {/* Moved to post mvp */}
+ {/* -
-
+ */}
+
+
{collectionRequestTabs && collectionRequestTabs.length ? collectionRequestTabs.map((tab, index) => {
- return - handleClick(tab)}>
-
-
- {getRequestMethod(tab)}
- {getRequestName(tab)}
-
-
handleCloseClick(e, tab)}>
- {!tab.hasChanges ? (
-
- ) : (
-
- ) }
-
+ return (
+
- handleClick(tab)}>
+
+
+ )
+ }) : null}
+
+
+
+ {showChevrons ? (
+ -
+
+
- }) : null}
- -
+ ) : null}
+
-
- -
+ {/* Moved to post mvp */}
+ {/*
-
-
+ */}
-
+
);
diff --git a/renderer/components/ResponsePane/ResponseHeaders/index.js b/renderer/components/ResponsePane/ResponseHeaders/index.js
index d2a02d68..46fa1125 100644
--- a/renderer/components/ResponsePane/ResponseHeaders/index.js
+++ b/renderer/components/ResponsePane/ResponseHeaders/index.js
@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
const ResponseHeaders = ({headers}) => {
return (
-
+
diff --git a/renderer/components/ResponsePane/ResponseSize/index.js b/renderer/components/ResponsePane/ResponseSize/index.js
index 7f29e55f..b8cf461f 100644
--- a/renderer/components/ResponsePane/ResponseSize/index.js
+++ b/renderer/components/ResponsePane/ResponseSize/index.js
@@ -13,7 +13,7 @@ const ResponseSize = ({size}) => {
}
return (
-
+
{sizeToDisplay}
)
diff --git a/renderer/components/ResponsePane/ResponseTime/index.js b/renderer/components/ResponsePane/ResponseTime/index.js
index 6497ed36..1261f541 100644
--- a/renderer/components/ResponsePane/ResponseTime/index.js
+++ b/renderer/components/ResponsePane/ResponseTime/index.js
@@ -13,7 +13,7 @@ const ResponseTime = ({duration}) => {
}
return (
-
+
{durationToDisplay}
)
diff --git a/renderer/components/ResponsePane/StatusCode/index.js b/renderer/components/ResponsePane/StatusCode/index.js
index 802637f1..0cd98091 100644
--- a/renderer/components/ResponsePane/StatusCode/index.js
+++ b/renderer/components/ResponsePane/StatusCode/index.js
@@ -5,7 +5,7 @@ import StyledWrapper from './StyledWrapper';
const StatusCode = ({status}) => {
const getTabClassname = () => {
- return classnames('mt-3', {
+ return classnames('', {
'text-blue-700': status >= 100 && status < 200,
'text-green-700': status >= 200 && status < 300,
'text-purple-700': status >= 300 && status < 400,
diff --git a/renderer/components/ResponsePane/StyledWrapper.js b/renderer/components/ResponsePane/StyledWrapper.js
index d5c16399..70e63168 100644
--- a/renderer/components/ResponsePane/StyledWrapper.js
+++ b/renderer/components/ResponsePane/StyledWrapper.js
@@ -6,8 +6,8 @@ const StyledWrapper = styled.div`
padding: 6px 0px;
border: none;
border-bottom: solid 2px transparent;
- margin-right: 20px;
- color: rgb(125 125 125);
+ margin-right: 1.25rem;
+ color: var(--color-tab-inactive);
cursor: pointer;
&:focus, &:active, &:focus-within, &:focus-visible, &:target {
diff --git a/renderer/components/ResponsePane/index.js b/renderer/components/ResponsePane/index.js
index f0449faa..d0c51828 100644
--- a/renderer/components/ResponsePane/index.js
+++ b/renderer/components/ResponsePane/index.js
@@ -1,5 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
+import find from 'lodash/find';
import classnames from 'classnames';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
import QueryResult from './QueryResult';
import Overlay from './Overlay';
import Placeholder from './Placeholder';
@@ -9,17 +12,20 @@ import ResponseTime from './ResponseTime';
import ResponseSize from './ResponseSize';
import StyledWrapper from './StyledWrapper';
-const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
- const [selectedTab, setSelectedTab] = useState('response');
+const ResponsePane = ({rightPaneWidth, item, isLoading}) => {
+ const dispatch = useDispatch();
+ const tabs = useSelector((state) => state.tabs.tabs);
+ const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
- response = response || {};
-
- const getTabClassname = (tabName) => {
- return classnames(`tab select-none ${tabName}`, {
- 'active': tabName === selectedTab
- });
+ const selectTab = (tab) => {
+ dispatch(updateResponsePaneTab({
+ uid: item.uid,
+ responsePaneTab: tab
+ }))
};
+ const response = item.response || {};
+
const getTabPanel = (tab) => {
switch(tab) {
case 'response': {
@@ -40,7 +46,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
return 404 | Not found
;
}
}
- }
+ };
if(isLoading) {
return (
@@ -49,7 +55,6 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
);
}
-
if(response.state !== 'success') {
return (
@@ -58,11 +63,30 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
);
}
+ if(!activeTabUid) {
+ return (
+ Something went wrong
+ );
+ }
+
+ const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+ if(!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {
+ return (
+ An error occured!
+ );
+ }
+
+ const getTabClassname = (tabName) => {
+ return classnames(`tab select-none ${tabName}`, {
+ 'active': tabName === focusedTab.responsePaneTab
+ });
+ };
+
return (
-
-
setSelectedTab('response')}>Response
-
setSelectedTab('headers')}>Headers
+
+
selectTab('response')}>Response
+
selectTab('headers')}>Headers
{!isLoading ? (
@@ -71,8 +95,8 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
) : null }
-
- {getTabPanel(selectedTab)}
+
+ {getTabPanel(focusedTab.responsePaneTab)}
)
diff --git a/renderer/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js b/renderer/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
index aafaeaae..d7fcaf93 100644
--- a/renderer/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
+++ b/renderer/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js
@@ -2,18 +2,27 @@ import React from 'react';
import Modal from 'components/Modal';
import { isItemAFolder } from 'utils/tabs';
import { useDispatch } from 'react-redux';
-import { closeTab } from 'providers/ReduxStore/slices/tabs';
+import { closeTabs } from 'providers/ReduxStore/slices/tabs';
import { deleteItem } from 'providers/ReduxStore/slices/collections';
+import { recursivelyGetAllItemUids } from 'utils/collections';
import StyledWrapper from './StyledWrapper';
const DeleteCollectionItem = ({onClose, item, collection}) => {
const dispatch = useDispatch();
const isFolder = isItemAFolder(item);
const onConfirm = () =>{
- dispatch(closeTab({
- tabUid: item.uid
- }));
- dispatch(deleteItem(item.uid, collection.uid));
+ dispatch(deleteItem(item.uid, collection.uid))
+ .then(() => {
+ if(isFolder) {
+ dispatch(closeTabs({
+ tabUids: recursivelyGetAllItemUids(item.items)
+ }));
+ } else {
+ dispatch(closeTabs({
+ tabUids: [item.uid]
+ }));
+ }
+ });
onClose();
};
diff --git a/renderer/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js b/renderer/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
index 2d2549a3..dc5223db 100644
--- a/renderer/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
+++ b/renderer/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js
@@ -43,13 +43,14 @@ const RenameCollectionItem = ({collection, item, onClose}) => {
handleConfirm={onSubmit}
handleCancel={onClose}
>
-