feat: add request button near request tabs

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

@@ -16,15 +16,29 @@ const Wrapper = styled.div`
       bottom: -1px;
       position: relative;
       list-style: none;
-      padding: 6px 12px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: 0;
+      padding-right: 0;
       cursor: pointer;
 
+      .tab-container {
+        border-left: 1px solid #dcdcdc;
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+
       &.active {
         border-color: #cfcfcf;
         background: #fff;
         border-radius: 5px 5px 0 0;
+
+        .tab-container {
+          border-left: 1px solid transparent;
+        }
       }
 
+
       .tab-label {
         overflow: hidden;
       }
@@ -46,6 +60,56 @@ const Wrapper = styled.div`
           color: rgb(142, 68, 173);
         }
       }
+
+      &.new-tab {
+        vertical-align: bottom;
+        width: 34px;
+        padding: 3px 0px;
+        display: inline-flex;
+        justify-content: center;
+        color: rgb(117 117 117);
+        margin-bottom: 2px;
+
+        > div {
+          padding: 3px 4px;
+        }
+
+        svg {
+          height: 22px;
+        }
+
+        &:hover {
+          > div {
+            background-color: #eaeaea;
+            color: rgb(76 76 76);
+            border-radius: 3px;
+          }
+        }
+      }
+    }
+
+    li.last-tab {
+      .tab-container {
+        border-right: 1px solid #dcdcdc;
+      }
+
+      &.active {
+        .tab-container {
+          border-right: 1px solid transparent;
+        }
+      }
+    }
+
+    li.active + li {
+      .tab-container {
+        border-left: 1px solid transparent;
+      }
+    }
+
+    li:first-child {
+      .tab-container {
+        border-left: 1px solid transparent;
+      }
     }
   }
 `;

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

@@ -3,9 +3,10 @@ import classnames from 'classnames';
 import StyledWrapper from './StyledWrapper';
 
 const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
-  const getTabClassname = (tab) => {
+  const getTabClassname = (tab, index) => {
     return classnames("request-tab select-none", {
-      'active': tab.id === activeRequestTabId
+      'active': tab.id === activeRequestTabId,
+      'last-tab': requestTabs && requestTabs.length && (index === requestTabs.length - 1) 
     });
   };
 
@@ -45,9 +46,9 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
     <StyledWrapper className="mt-3 flex items-center">
       {requestTabs && requestTabs.length ? (
         <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">
+          {requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
+            return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
+              <div className="flex items-center justify-between tab-container">
                 <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>
@@ -62,6 +63,20 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
               </div>
             </li>
           }) : null}
+          <li className="select-none new-tab ml-1">
+            <div className="flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"  viewBox="0 0 16 16">
+                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+              </svg>
+            </div>
+          </li>
+          <li className="select-none new-tab choose-request">
+            <div className="flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+              </svg>
+            </div>
+          </li>
         </ul>
       ) : null}
     </StyledWrapper>

packages/grafnode-run/src/providers/Store/reducer.js

@@ -62,7 +62,7 @@ const reducer = (state, action) => {
         const uid = nanoid();
         draft.requestTabs.push({
           id: uid,
-          name: 'Untitled Request',
+          name: 'New Tab',
           method: 'GET',
           request: {
             url: 'https://api.spacex.land/graphql/',