feat: detect changes in request url

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

packages/grafnode-components/src/components/RequestTabs/index.js

@@ -60,9 +60,15 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
                   <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
                 </div>
                 <div className="flex px-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">
+                  {!rt.hasChanges ? (
+                    <svg focusable="false"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>
+                  ) : (
+                    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" class="has-changes-icon" viewBox="0 0 8 8">
+                      <circle cx="4" cy="4" r="3"/>
+                    </svg>
+                  ) }
                 </div>
               </div>
             </li>

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

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