Show gRPCs in requests dialog

[vincendep]

changelog(Improvements): gRPC requests will now appear in the request switcher

Closes #3271

[develohpanda]

Thanks for the PR! We do need to add some UI for GRPC requests in the request switcher as well. For instance, the following is what I see when hitting cmd + p.

Ideally we follow a similar pattern to REST requests.

I also noticed the following lines: https://github.com/vincendep/insomnia/blob/21047c818165a63c79d9484edf723e39cd85416b/packages/insomnia-app/app/ui/components/modals/request-switcher-modal.tsx#L34-L35

We'll need to remove this (now that GRPC requests have been introduced to the request switcher), and determine whether there are any implications. I couldn't see any while browsing this file.

Lastly, could you also please (at the very least) add screenshots or gifs to PR descriptions? It really helps with code reviews. Thank you! 🙏🏽

[vincendep]

Hi @develohpanda, so sorry for my lazyness 😄, I'll be more explicative for my next pull requests. Speaking of UI changes, do you think would be ok to show only "gRPC" (as Add Request dropdown),

or maybe we should include the selected gRPC method some how?

[develohpanda]

No worries at all! It would be nice to show the url + selected grpc method name. Should be fairly straightforward to get that information I think

[filfreire]

@vincendep, in case you are interested you could achieve what @develohpanda mentioned with something like:

Near line 224:

       finalUrl = joinUrlAndQueryString(finalUrl, buildQueryStringFromParams(request.parameters));
     }
 
+    if (isGrpcRequest(request)) {
+      finalUrl = request.url + request.protoMethodName;
+    }
+
     const match = fuzzyMatchAll(
       searchStrings,
       [request.name, finalUrl, request.method || '', this._groupOf(request).join('/')],

Near line 477:

                       </div>
                       <div className="margin-left-xs faint">
                         { isRequest(r) ? <MethodTag method={r.method} /> : null }
-                        <Highlight search={searchString} text={r.url} />
+                        <Highlight
+                          search={searchString}
+                          text={ isGrpcRequest(r) ? r.url + r.protoMethodName : r.url }
+                        />
                       </div>
                     </Button>
                   </li>

Example of how it would look like:

[vincendep]

Sorry about end of communications by I didn't found time to work on this.
Hi @filfreire, thanks for your help, I'll give it a try soon and see if I can close this. Btw I think that would be nice to show also the gRPC tag in place of the method tag

[vincendep]

Here a screenshoot of the update

[filfreire]

Looks good to me, great work @vincendep 👍

[filfreire]

FYI @dimitropoulos @develohpanda this PR would be a good candidate to get merged before the next release.

[develohpanda]

Thanks for the updates @vincendep! I pushed a few small commits, please take a look!

These commits remove a redundant comment and improves some TS types that were incorrect after the changes in this PR (due to a quirk of TS and not your fault 🤗)

[develohpanda]

Unfortunately with this change we lose type safety (matchedRequest should not be of type RequestGroup). There's a known bug in TS regarding this, and I haven't seen any reliable workarounds for it.

After

Before

I've updated some of the type definitions here to bring the as cast alongside: e348696

[vincendep]

Hi @develohpanda. Thanks for the explanation, given thath I'm a beginner with TS every advice is welcome