diff --git a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js index af29e3a7..a9cf5d38 100644 --- a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js +++ b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js @@ -27,6 +27,7 @@ const Wrapper = styled.div` .tab-container { width: 100%; border-left: 1px solid #dcdcdc; + border-right: 1px solid transparent; } &.active { @@ -52,9 +53,9 @@ const Wrapper = styled.div` .close-icon-container { min-height: 20px; border-radius: 3px; - display: none; .close-icon { + display: none; color: #9f9f9f; width: 8px; padding-bottom: 6px; @@ -65,16 +66,20 @@ const Wrapper = styled.div` background-color: #eaeaea; color: rgb(76 76 76); } + + .has-changes-icon { + height: 24px; + } } &.active { - .close-icon-container { + .close-icon-container .close-icon { display: block; } } &:hover{ - .close-icon-container { + .close-icon-container .close-icon { display: block; } } diff --git a/packages/grafnode-components/src/components/RequestTabs/index.js b/packages/grafnode-components/src/components/RequestTabs/index.js index e5c8efc0..fd0bf597 100644 --- a/packages/grafnode-components/src/components/RequestTabs/index.js +++ b/packages/grafnode-components/src/components/RequestTabs/index.js @@ -60,9 +60,15 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => { {rt.name}
handleCloseClick(e, rt)}> - - - + {!rt.hasChanges ? ( + + + + ) : ( + + + + ) }
diff --git a/packages/grafnode-run/src/providers/Store/reducer.js b/packages/grafnode-run/src/providers/Store/reducer.js index cc9afbde..a520dfbb 100644 --- a/packages/grafnode-run/src/providers/Store/reducer.js +++ b/packages/grafnode-run/src/providers/Store/reducer.js @@ -8,7 +8,9 @@ import { flattenItems, findItem, isItemARequest, - itemIsOpenedInTabs + itemIsOpenedInTabs, + cloneItem, + updateRequestTabAsChanged } from './utils'; const reducer = (state, action) => { @@ -42,7 +44,8 @@ const reducer = (state, action) => { id: item.id, name: item.name, method: item.request.method, - collectionId: collection.id + collectionId: collection.id, + hasChanges: false }); draft.activeRequestTabId = item.id; } @@ -79,7 +82,11 @@ const reducer = (state, action) => { let item = findItem(flattenedItems, action.requestTab.id); if(item) { - item.request.url = action.url; + if(!item.draft) { + item.draft = cloneItem(item); + } + item.draft.request.url = action.url; + updateRequestTabAsChanged(draft.requestTabs, item.id); } } }); diff --git a/packages/grafnode-run/src/providers/Store/utils.js b/packages/grafnode-run/src/providers/Store/utils.js index 72ebc4e9..33541ddc 100644 --- a/packages/grafnode-run/src/providers/Store/utils.js +++ b/packages/grafnode-run/src/providers/Store/utils.js @@ -1,5 +1,6 @@ import each from 'lodash/each'; import find from 'lodash/find'; +import cloneDeep from 'lodash/cloneDeep'; export const flattenItems = (items = []) => { const flattenedItems = []; @@ -30,3 +31,14 @@ export const isItemARequest = (item) => { export const itemIsOpenedInTabs = (item, tabs) => { return find(tabs, (t) => t.id === item.id); }; + +export const cloneItem = (item) => { + return cloneDeep(item); +}; + +export const updateRequestTabAsChanged = (requestTabs, itemId) => { + let currentTab = find(requestTabs, (rt) => rt.id == itemId); + if(currentTab) { + currentTab.hasChanges = true; + } +};