Skip to content

Commit

Permalink
Show gRPCs in requests dialog (#4127)
Browse files Browse the repository at this point in the history 
Co-authored-by: Vincenzo De Petris <vincenzodepetris@gmail.it>
Co-authored-by: Opender Singh <opender.singh@konghq.com>
Co-authored-by: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
  • Loading branch information
@vincendep @develohpanda @dimitropoulos
4 people committed Jan 14, 2022
1 parent 9ca90a5 commit ba15a73
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 22 deletions.
51 changes: 31 additions & 20 deletions packages/insomnia-app/app/ui/components/modals/request-switcher-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,39 @@ import React, { Fragment, PureComponent } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { AUTOBIND_CFG } from '../../../common/constants';
import { AUTOBIND_CFG, METHOD_GRPC } from '../../../common/constants';
import { hotKeyRefs } from '../../../common/hotkeys';
import { executeHotKey } from '../../../common/hotkeys-listener';
import { keyboardKeys } from '../../../common/keyboard-keys';
import { fuzzyMatchAll } from '../../../common/misc';
import type { BaseModel } from '../../../models';
import * as models from '../../../models';
import { GrpcRequest, isGrpcRequest } from '../../../models/grpc-request';
import { isRequest, Request } from '../../../models/request';
import { isRequestGroup } from '../../../models/request-group';
import { isRequestGroup, RequestGroup } from '../../../models/request-group';
import { Workspace } from '../../../models/workspace';
import { RootState } from '../../redux/modules';
import { activateWorkspace } from '../../redux/modules/workspace';
import { selectActiveRequest, selectActiveWorkspace, selectRequestMetas, selectWorkspaceRequestsAndRequestGroups, selectWorkspacesForActiveProject } from '../../redux/selectors';
import { selectActiveRequest, selectActiveWorkspace, selectGrpcRequestMetas, selectRequestMetas, selectWorkspaceRequestsAndRequestGroups, selectWorkspacesForActiveProject } from '../../redux/selectors';
import { Button } from '../base/button';
import { Highlight } from '../base/highlight';
import { Modal } from '../base/modal';
import { ModalBody } from '../base/modal-body';
import { ModalHeader } from '../base/modal-header';
import { KeydownBinder } from '../keydown-binder';
import { GrpcTag } from '../tags/grpc-tag';
import { MethodTag } from '../tags/method-tag';

type ReduxProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;

const mapStateToProps = (state: RootState) => {
const activeRequest = selectActiveRequest(state);
// the request switcher modal does not know about grpc requests yet
const normalizedRequest = activeRequest && isRequest(activeRequest) ? activeRequest : undefined;

return {
activeRequest: normalizedRequest,
activeRequest,
workspace: selectActiveWorkspace(state),
workspaces: selectWorkspacesForActiveProject(state),
requestMetas: selectRequestMetas(state),
grpcRequestMetas: selectGrpcRequestMetas(state),
workspaceChildren: selectWorkspaceRequestsAndRequestGroups(state),
};
};
Expand All @@ -56,7 +56,7 @@ interface Props extends ReduxProps {
interface State {
searchString: string;
workspaces: Workspace[];
matchedRequests: Request[];
matchedRequests: (Request | GrpcRequest)[];
matchedWorkspaces: Workspace[];
activeIndex: number;
maxRequests: number;
Expand Down Expand Up @@ -179,7 +179,7 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
this.modal?.hide();
}

_activateRequest(request: Request) {
_activateRequest(request: Request | GrpcRequest) {
if (!request) {
return;
}
Expand All @@ -193,7 +193,7 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
}

/** Return array of path segments for given request or folder */
_groupOf(requestOrRequestGroup: BaseModel): string[] {
_groupOf(requestOrRequestGroup: Request | GrpcRequest | RequestGroup): string[] {
const { workspaceChildren } = this.props;
const requestGroups = workspaceChildren.filter(isRequestGroup);
const matchedGroups = requestGroups.filter(g => g._id === requestOrRequestGroup.parentId);
Expand All @@ -213,16 +213,23 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
return this._groupOf(matchedGroups[0]);
}

_isMatch(request: Request, searchStrings: string): number | null {
_isMatch(request: Request | GrpcRequest, searchStrings: string): number | null {
let finalUrl = request.url;
let method = '';

if (request.parameters) {
if (isRequest(request)) {
finalUrl = joinUrlAndQueryString(finalUrl, buildQueryStringFromParams(request.parameters));
method = request.method;
}

if (isGrpcRequest(request)) {
finalUrl = request.url + request.protoMethodName;
method = METHOD_GRPC;
}

const match = fuzzyMatchAll(
searchStrings,
[request.name, finalUrl, request.method || '', this._groupOf(request).join('/')],
[request.name, finalUrl, method, this._groupOf(request).join('/')],
{
splitSpace: true,
},
Expand All @@ -243,17 +250,20 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
}

_handleChangeValue(searchString: string) {
const { workspace, workspaceChildren, workspaces, requestMetas, activeRequest } = this.props;
const { workspace, workspaceChildren, workspaces, requestMetas, grpcRequestMetas, activeRequest } = this.props;
const { maxRequests, maxWorkspaces, hideNeverActiveRequests } = this.state;
const lastActiveMap = {};

for (const meta of requestMetas) {
lastActiveMap[meta.parentId] = meta.lastActive;
}
for (const meta of grpcRequestMetas) {
lastActiveMap[meta.parentId] = meta.lastActive;
}

// OPTIMIZATION: This only filters if we have a filter
let matchedRequests = workspaceChildren
.filter(isRequest)
let matchedRequests = (workspaceChildren
.filter(child => isRequest(child) || isGrpcRequest(child)) as (Request | GrpcRequest)[])
.sort((a, b) => {
const aLA = lastActiveMap[a._id] || 0;
const bLA = lastActiveMap[b._id] || 0;
Expand All @@ -274,7 +284,7 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
matchedRequests = matchedRequests
.map(r => ({
request: r,
score: this._isMatch(r as any, searchString),
score: this._isMatch(r, searchString),
}))
.filter(v => v.score !== null)
.sort((a, b) => (a.score || -Infinity) - (b.score || -Infinity))
Expand All @@ -295,7 +305,7 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
this.setState({
searchString,
activeIndex: indexOfFirstNonActiveRequest >= 0 ? indexOfFirstNonActiveRequest : 0,
matchedRequests: (matchedRequests as any[]).slice(0, maxRequests),
matchedRequests: matchedRequests.slice(0, maxRequests),
matchedWorkspaces: matchedWorkspaces.slice(0, maxWorkspaces),
});
}
Expand Down Expand Up @@ -468,8 +478,9 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
<Highlight search={searchString} text={r.name} />
</div>
<div className="margin-left-xs faint">
<MethodTag method={r.method} />
<Highlight search={searchString} text={r.url} />
{ isRequest(r) ? <MethodTag method={r.method} /> : null}
{ isGrpcRequest(r) ? <GrpcTag /> : null }
{ <Highlight search={searchString} text={isGrpcRequest(r) ? r.url + r.protoMethodName : r.url } /> }
</div>
</Button>
</li>
Expand Down
10 changes: 8 additions & 2 deletions packages/insomnia-app/app/ui/redux/selectors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ValueOf } from 'type-fest';
import { isWorkspaceActivity } from '../../common/constants';
import * as models from '../../models';
import { BaseModel } from '../../models';
import { GrpcRequest, isGrpcRequest } from '../../models/grpc-request';
import { getStatusCandidates } from '../../models/helpers/get-status-candidates';
import { sortProjects } from '../../models/helpers/project';
import { DEFAULT_PROJECT_ID, isRemoteProject } from '../../models/project';
Expand Down Expand Up @@ -77,6 +78,11 @@ export const selectRequestMetas = createSelector(
entities => entities.requestMetas,
);

export const selectGrpcRequestMetas = createSelector(
selectEntitiesLists,
entities => entities.grpcRequestMetas,
);

export const selectProjects = createSelector(
selectEntitiesLists,
entities => sortProjects(entities.projects),
Expand Down Expand Up @@ -295,8 +301,8 @@ export const selectWorkspaceRequestsAndRequestGroups = createSelector(
selectActiveWorkspaceEntities,
entities => {
return entities.filter(
e => isRequest(e) || isRequestGroup(e),
) as (Request | RequestGroup)[];
e => isRequest(e) || isGrpcRequest(e) || isRequestGroup(e),
) as (Request | GrpcRequest | RequestGroup)[];
},
);

Expand Down

0 comments on commit ba15a73

Please sign in to comment.