feat: multiple tabs - [INS-4225]

[CurryYangxx]

Changes

• create a TabList and Tab Component, and import it in every type of file page.
• store tab data in localstorage, use InsomniaTabContext to manage state of the tabs
• create a useInsomniaTab hook
  • get tab type according to the location pathname
  • check if tab exist
  • pack tab data
  • add new tab
• sync tab data with db
• click "+" to add tab
• right click context menu: Close all & Close others
  • rename the origin IPC show-context-menu to show-nunjucks-context-menu
  • add a new IPC show-context-menu as the common context menu method
• support drag and drop to re-arrange tabs
• collection runner improvements: runner improvements (multiple tabs)-[INS-4779] #8244
• keep long connection for openning tabs: feat(tabs): keep connection for tabs-[INS-4778] #8266

related to #6108

[filfreire]

LGTM

Found issue where tabs disappear when pressing OPTION + TAB in the UI after a few times

some suggestions for this PR or other follow-up PRs:

• allow for pressing CTRL + TAB / CTRL + SHIFT + TAB to alternate between tabs
• perhaps also allow the same for pressing CTRL + 1 (1 to 9) to go to 1st -> 9th tab, 0 being last tab?
• allow middle-mouse click to close a tab
• capture COMMAND+W (and windows/linux equivalent) to close tabs

[kaynansc]

it would be nice capture COMMAND+W (and windows/linux equivalent) to close tabs

[CurryYangxx]

Update: (5e90726)
Because we can move a request or a folder to another collection. So, we need to update tab data after the move action.

• add patches field to database changeBuffer, so that we can know if user change the parentId
• request move
  • update tab by id (workspaceId, workspaceName, url)
  • revalidate workspace activeRequest
• folder move
  • batch update (workspaceId, workspaceName, url)
  • revalidate workspace activeRequest (if the activeRequest is in the folder, we need to clear it)

[filfreire]

@CurryYangxx, I took a pass at the branch again and tried after your commit and seems copying and moving seems to be working.

I noticed one other thing - for example if you have 2 tabs open for 2 requests, and maybe you are working on pre-request/after-response scripts, or docs, or headers.... etc. in both, the moment you switch tabs, you are not redirected to the "sub-tab" you were at when browsing the request.

So each time we switch between tabs we don't remember where inside the tab specifically the user was.

[CurryYangxx]

4. there are too many refs introduced in this pr there ideally should be none
   https://blog.logrocket.com/why-you-should-use-refs-sparingly-in-production/

The use scenario of ref mentioned in this article is different from that in this pr. First, the article points out that ref is used to directly operate DOM, and uses class components as an example. However, in react function components, useRef can not only obtain the reference of DOM, but also be used to reference a variable to avoid re-rendering or side effects. The scenario in pr is the latter.

[jackkav]

https://refine.dev/blog/react-useref-hook-and-ref/#best-practices-when-working-with-refs

Avoid over-reliance on refs. You should use refs as an escape hatch to access DOM elements, browser APIs, and work with systems external to your React application. If you find yourself over-relying on refs, probably there is something you're doing wrong.

I have made a PR to show how you could go about a first pass of simplification https://github.com/Kong/insomnia/pull/8322/files

I would encourage you to keep taking passes aiming to remove one hook, context or ref with each pass.