Merge pull request #10 from NickRimmer/fixes/9-grpc-requests-support

Show tabs for gRPC requests

.eslintrc.json

@@ -24,7 +24,7 @@
         ],
         "linebreak-style": [
             "error",
-            "windows"
+            "unix"
         ],
         "quotes": [
             "error",

.github/workflows/pr-validation.yml

@@ -21,4 +21,5 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
+    - run: npm run lint
     - run: npm run publish-dry

.vscode/settings.json

@@ -17,4 +17,5 @@
     "[scss]": {
         "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
     },
+    "files.eol": "\n"
 }

package.json

@@ -35,7 +35,9 @@
     "publish": "npm run build && cd dist && npm publish",
     "publish-dry": "npm run build && cd dist && npm publish --dry-run",
     "install": "copyfiles -u 1 ./dist/* %appdata%/insomnia/plugins/insomnia-plugin-request-navigator",
-    "install-dev": "copyfiles -u 1 ./dist/* %appdata%/insomnia-app/plugins/insomnia-plugin-request-navigator"
+    "install-dev": "copyfiles -u 1 ./dist/* %appdata%/insomnia-app/plugins/insomnia-plugin-request-navigator",
+    "lint": "eslint --ext .ts,.tsx .",
+    "lint-fix": "eslint --ext .ts,.tsx --fix ."
   },
   "watch": {
     "watch-trigger": {
@@ -48,7 +50,6 @@
   "dependencies": {
     "@types/react": "^16.14.5",
     "@types/react-dom": "^16.9.12",
-    "prop-types": "^15.5.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-sortable-hoc": "^2.0.0"

src/index.ts

@@ -3,8 +3,9 @@ import * as ui from './ui'
 
 const init = () => {
   // can be used during development, to be able to access insomnia instance from console for experiments
-  // global.dev = {}
-  // global.dev.insomnia = insomnia
+  // (global as any).dev = {
+  //   insomnia
+  // }
 
   // initialize ui components
   ui.render()

src/services/insomnia/connector/index.ts

@@ -28,8 +28,8 @@ export const connect = (): boolean => {
   // connect to db changes
   subscibeForDbChangeEvents((doc, method) => {
     if (method === 'update' && doc.type === 'WorkspaceMeta') notifyRequestSelected(doc)
-    if (method === 'update' && doc.type === 'Request') notifyRequestUpdated(doc)
-    if (method === 'remove' && doc.type === 'Request') notifyRequestDeleted(doc)
+    if (method === 'update' && (doc.type === 'Request' || doc.type === 'GrpcRequest')) notifyRequestUpdated(doc)
+    if (method === 'remove' && (doc.type === 'Request' || doc.type === 'GrpcRequest')) notifyRequestDeleted(doc)
   })
 
   return true
@@ -39,7 +39,14 @@ export const connect = (): boolean => {
 let storeInternal: any = {}
 export const getStore = (): any => storeInternal
 export const getState = (): any => storeInternal.getState().entities
-export const getAllRequests = (): DocBaseModel[] => getState().requests
+export const getAllRequests = (): Record<string, DocBaseModel> => {
+  const result = {}
+
+  Object.assign(result, getState().requests)
+  Object.assign(result, getState().grpcRequests)
+
+  return result
+}
 
 // react router
 let routerInternal: any = {}

src/services/insomnia/navigator/index.ts

@@ -12,7 +12,7 @@ export const navigateToRequest = (requestId: string): boolean => {
   }
 
   // to make sure we do not set not existing request as active
-  const request = state.entities.requests[requestId]
+  const request = state.entities.requests[requestId] ?? state.entities.grpcRequests[requestId]
   if (!request) {
     console.warn('[plugin-navigator]', 'request not found', requestId)
     return false

src/ui/tab-button/tab-button.styles.scss

@@ -1,7 +1,7 @@
 .plugin-request-navigator-tab-button {
   position: relative;
   color: var(--hl);
-  padding: 5px 16px 7px 14px;
+  padding: 7px 21px 8px 14px;
   background-color: var(--hl-xs);
   border-radius: 3px 3px 0 0;
   cursor: pointer;
@@ -13,7 +13,9 @@
   white-space: nowrap;
 
   .title {
-    transition: margin-left 0.05s ease-in-out, margin-right 0.05s ease-in-out;
+    transition:
+      margin-left 0.05s ease-in-out,
+      margin-right 0.05s ease-in-out;
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -51,15 +53,34 @@
     top: 0;
     bottom: 0;
     right: 0;
-    padding: 0 6px 0 4px;
+    padding: 0 7px 0 5px;
     display: flex;
     align-items: center;
     padding-top: 1px;
-    transition: color 0.1s ease-in-out, opacity 0.1s ease-in-out;
+    transition:
+      color 0.2s ease-in-out,
+      opacity 0.2s ease-in-out 0.1s;
+
+    &:before {
+      $size: 8px;
+      content: "";
+      height: 100%;
+      width: $size;
+      position: absolute;
+      left: 0;
+      margin-left: -$size;
+      background: linear-gradient(90deg, transparent 0%, var(--hl-xs) 100%);
+      opacity: 0;
+    }
 
     &:hover {
+      opacity: 1;
       color: var(--color-font);
       background-color: var(--hl-xs);
+
+      &:before {
+        opacity: 1;
+      }
     }
   }
 
@@ -75,9 +96,7 @@
   &.active {
     border: 1px solid var(--hl-md);
     border-bottom: none;
-  }
 
-  &:hover {
     .btn-close {
       opacity: 1;
     }
@@ -86,15 +105,21 @@
   &.hidden {
     visibility: visible;
     pointer-events: none;
-    opacity: 0.5;
+    opacity: 0.4;
     border: none;
 
     .title {
       opacity: 0;
     }
   }
+
+  &:has(.btn-close:hover) {
+    color: var(--hl) !important;
+  }
 }
 
 #plugin-request-navigator-hub .plugin-request-navigator-tab-button {
-  transition: color 0.1s ease-in-out, transform 0.2s ease-in-out;
+  transition:
+    color 0.1s ease-in-out,
+    transform 0.2s ease-in-out;
 }

src/ui/tab-button/tab-button.tsx

@@ -24,8 +24,11 @@ export const TabButton: FC<TabButtonProps> = (props) => {
         onClick={onClickButton}
         data-request-id={requestId}
         data-title={title}
+        data-method={method}
       >
-        <div className='btn-close' onClick={onClickClose}><i className='fa-solid fa-xmark'></i></div>
+        <div className='btn-close' onClick={onClickClose}>
+          <i className='fa-solid fa-xmark'></i>
+        </div>
         <div className='title'>
           <span className={`method ${method.toLocaleLowerCase()}`}>{method.toUpperCase()}</span>
           <span>{children}</span>

src/ui/tab-dropdown/tab-dropdown.styles.scss

@@ -1,6 +1,6 @@
 #plugin-request-navigator-hub .tab-dropdown {
   .button {
-    padding: 5px 11px;
+    padding: 8px 11px;
     border-radius: 3px 3px 0 0;
     cursor: pointer;
     border: 1px solid transparent;
@@ -21,16 +21,49 @@
     z-index: 1;
     right: 0;
     background-color: var(--color-bg);
-    margin-top: 4px;
+    border: solid 1px var(--hl-xs);
+    margin-top: 1px;
 
     li {
       color: var(--hl);
-      padding: 9px 34px;
+      padding: 9px 28px 9px 25px;
       background-color: var(--hl-xxs);
       border-bottom: solid 1px var(--hl-xs);
       cursor: pointer;
       position: relative;
 
+      .title {
+        .method {
+          opacity: 0.6;
+          color: var(--color-info);
+          margin-right: 5px;
+
+          &.get {
+            color: var(--color-surprise);
+          }
+
+          &.post {
+            color: var(--color-success);
+          }
+
+          &.put {
+            color: var(--color-warning);
+          }
+
+          &.patch {
+            color: var(--color-notice);
+          }
+
+          &.delete {
+            color: var(--color-danger);
+          }
+        }
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
       .btn-close {
         position: absolute;
         color: var(--hl);
@@ -42,7 +75,9 @@
         align-items: center;
         padding-top: 1px;
         opacity: 0;
-        transition: color 0.1s ease-in-out, opacity 0.1s ease-in-out;
+        transition:
+          color 0.1s ease-in-out,
+          opacity 0.1s ease-in-out;
 
         &:hover {
           color: var(--color-font);

src/ui/tab-dropdown/tab-dropdown.tsx

@@ -33,7 +33,7 @@ export const TabDropdown: FC<TabDropdownProps> = ({ tabs, onMenuClicked, onClose
     onMenuClicked(tab.requestId)
   }
 
-  const onMenuItemCloseClicked = (e: MouseEvent, tab: TabData) => {
+  const onMenuItemCloseClicked = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, tab: TabData) => {
     onCloseClicked(tab.requestId)
     e.stopPropagation()
   }
@@ -50,7 +50,10 @@ export const TabDropdown: FC<TabDropdownProps> = ({ tabs, onMenuClicked, onClose
           className={tab.isActive ? 'active' : ''}
           onClick={() => onMenuItemClicked(tab)}>
           <div className='btn-close' onClick={(e) => onMenuItemCloseClicked(e, tab)}><i className='fa-solid fa-xmark'></i></div>
-          <div className='title'>{tab.title}</div>
+          <div className='title'>
+            <span className={`method ${tab.method?.toLocaleLowerCase()}`}>{tab.method?.toUpperCase()}</span>
+            <span className='text'>{tab.title}</span>
+          </div>
         </li>))}
       </ul>
     </div>

src/ui/tabs-panel/tabs-panel.hook.ts

@@ -9,7 +9,6 @@ import { onRouteChanged } from '../../services/insomnia/events/route-changed'
 import { getAllRequests } from '../../services/insomnia/connector'
 import { navigateToRequest } from '../../services/insomnia/navigator'
 import React from 'react'
-import { set } from 'immutable'
 
 export const useTabsPanel = (id: string)/*: UseTabsPanelData*/ => {
   const tabDataRef = useRef<TabData[]>([])
@@ -54,7 +53,11 @@ export const useTabsPanel = (id: string)/*: UseTabsPanelData*/ => {
 
       if (!tabDataRef.current.find(tab => tab.requestId == requestId)) {
         const requestInfo = getAllRequests()[requestId]
-        const tabData = { isActive: true, requestId, title: requestInfo.name, method: (requestInfo as any).method }
+
+        let method = (requestInfo as any).method
+        if (!method && requestInfo._id.startsWith('greq_')) method = 'gRPC'
+
+        const tabData = { isActive: true, requestId, title: requestInfo.name, method }
         tabDataRef.current.forEach((x) => x.isActive = false)
         setTabs([...tabDataRef.current, tabData])
       } else {
@@ -124,7 +127,12 @@ export const useTabsPanel = (id: string)/*: UseTabsPanelData*/ => {
     const tabsToCollapse: TabData[] = []
     children.forEach((element) => {
       if (element.getBoundingClientRect().right > parentRightBound) {
-        tabsToCollapse.push({ title: element.getAttribute('data-title'), requestId: element.getAttribute('data-request-id'), isActive: element.classList.contains('active') } as TabData)
+        tabsToCollapse.push({
+          method: element.getAttribute('data-method'),
+          title: element.getAttribute('data-title'),
+          requestId: element.getAttribute('data-request-id'),
+          isActive: element.classList.contains('active')
+        } as TabData)
       }
     })
 

src/ui/tabs-panel/tabs-panel.styles.scss

@@ -16,6 +16,7 @@
       position: absolute;
       z-index: 20;
       background-color: var(--color-bg);
+      border: solid 1px var(--hl-xs);
 
       li {
         color: var(--hl);
@@ -30,6 +31,10 @@
           background-color: var(--hl-xs);
           color: var(--color-font);
         }
+
+        &:last-child {
+          border-bottom: none;
+        }
       }
     }
   }

src/ui/tabs-panel/tabs-panel.types.ts

@@ -1,8 +1,6 @@
-import { SortEndHandler } from 'react-sortable-hoc'
-
 export type TabData = {
   requestId: string;
   title: string;
   isActive: boolean;
-  method: string;
+  method: string | undefined;
 }