starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-21 08:59:07 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Show gRPC requests in sidebar

Browse Source
This commit is contained in:
Gregory Schier
2024-02-03 13:08:24 -08:00
parent 04f31cd4a7
commit 23431b40e9
33 changed files with 389 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-web/components/AppRouter.tsx
View File

@@ -1,7 +1,7 @@
import { createBrowserRouter, Navigate, Outlet, RouterProvider } from 'react-router-dom';
import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
import { useRecentRequests } from '../hooks/useRecentRequests';
import { useRequests } from '../hooks/useRequests';
import { useHttpRequests } from '../hooks/useHttpRequests';
import { GlobalHooks } from './GlobalHooks';
import Workspace from './Workspace';
import Workspaces from './Workspaces';
@@ -49,7 +49,7 @@ export function AppRouter() {
function WorkspaceOrRedirect() {
const recentRequests = useRecentRequests();
const activeEnvironmentId = useActiveEnvironmentId();
const requests = useRequests();
const requests = useHttpRequests();
const request = requests.find((r) => r.id === recentRequests[0]);
const routes = useAppRoutes();

4
src-web/components/BasicAuth.tsx
View File

@@ -1,4 +1,4 @@
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
import type { HttpRequest } from '../lib/models';
import { Input } from './core/Input';
import { VStack } from './core/Stacks';
@@ -9,7 +9,7 @@ interface Props {
}
export function BasicAuth({ requestId, authentication }: Props) {
const updateRequest = useUpdateRequest(requestId);
const updateRequest = useUpdateHttpRequest(requestId);
return (
<VStack className="my-2" space={2}>

4
src-web/components/BearerAuth.tsx
View File

@@ -1,4 +1,4 @@
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
import type { HttpRequest } from '../lib/models';
import { Input } from './core/Input';
import { VStack } from './core/Stacks';
@@ -9,7 +9,7 @@ interface Props {
}
export function BearerAuth({ requestId, authentication }: Props) {
const updateRequest = useUpdateRequest(requestId);
const updateRequest = useUpdateHttpRequest(requestId);
return (
<VStack className="my-2" space={2}>

8
src-web/components/GlobalHooks.tsx
View File

@@ -8,7 +8,7 @@ import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
import { useRecentRequests } from '../hooks/useRecentRequests';
import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
import { requestsQueryKey } from '../hooks/useRequests';
import { httpRequestsQueryKey } from '../hooks/useHttpRequests';
import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
import { responsesQueryKey } from '../hooks/useResponses';
import { settingsQueryKey } from '../hooks/useSettings';
@@ -47,7 +47,7 @@ export function GlobalHooks() {
const queryKey =
payload.model === 'http_request'
? requestsQueryKey(payload)
? httpRequestsQueryKey(payload)
: payload.model === 'http_response'
? responsesQueryKey(payload)
: payload.model === 'workspace'
@@ -76,7 +76,7 @@ export function GlobalHooks() {
const queryKey =
payload.model === 'http_request'
? requestsQueryKey(payload)
? httpRequestsQueryKey(payload)
: payload.model === 'http_response'
? responsesQueryKey(payload)
: payload.model === 'workspace'
@@ -115,7 +115,7 @@ export function GlobalHooks() {
if (payload.model === 'workspace') {
queryClient.setQueryData<Workspace[]>(workspacesQueryKey(), removeById(payload));
} else if (payload.model === 'http_request') {
queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(payload), removeById(payload));
queryClient.setQueryData<HttpRequest[]>(httpRequestsQueryKey(payload), removeById(payload));
} else if (payload.model === 'http_response') {
queryClient.setQueryData<HttpResponse[]>(responsesQueryKey(payload), removeById(payload));
} else if (payload.model === 'key_value') {

6
src-web/components/GrpcConnectionLayout.tsx
View File

@@ -208,7 +208,7 @@ export function GrpcConnectionLayout({ style }: Props) {
className="border border-highlight"
size="sm"
title="to-do"
hotkeyAction={grpc.isStreaming ? undefined : 'request.send'}
hotkeyAction={grpc.isStreaming ? undefined : 'http_request.send'}
onClick={grpc.isStreaming ? handleCancel : handleConnect}
icon={
grpc.isStreaming
@@ -227,7 +227,7 @@ export function GrpcConnectionLayout({ style }: Props) {
className="border border-highlight"
size="sm"
title="to-do"
hotkeyAction="request.send"
hotkeyAction="grpc_request.send"
onClick={() => grpc.send.mutateAsync({ message: message.value ?? '' })}
icon="sendHorizontal"
/>
@@ -331,7 +331,7 @@ export function GrpcConnectionLayout({ style }: Props) {
forceUpdateKey={resp}
/>
) : (
<HotKeyList hotkeys={['grpc.send', 'sidebar.toggle', 'urlBar.focus']} />
<HotKeyList hotkeys={['grpc_request.send', 'sidebar.toggle', 'urlBar.focus']} />
)}
</div>
)

4
src-web/components/RecentRequestsDropdown.tsx
View File

@@ -7,7 +7,7 @@ import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
import { useAppRoutes } from '../hooks/useAppRoutes';
import { useHotKey } from '../hooks/useHotKey';
import { useRecentRequests } from '../hooks/useRecentRequests';
import { useRequests } from '../hooks/useRequests';
import { useHttpRequests } from '../hooks/useHttpRequests';
import { fallbackRequestName } from '../lib/fallbackRequestName';
import type { ButtonProps } from './core/Button';
import { Button } from './core/Button';
@@ -19,7 +19,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
const activeRequest = useActiveRequest();
const activeWorkspaceId = useActiveWorkspaceId();
const activeEnvironmentId = useActiveEnvironmentId();
const requests = useRequests();
const requests = useHttpRequests();
const routes = useAppRoutes();
const allRecentRequestIds = useRecentRequests();
const recentRequestIds = useMemo(() => allRecentRequestIds.slice(1), [allRecentRequestIds]);

6
src-web/components/RequestPane.tsx
View File

@@ -6,7 +6,7 @@ import { useActiveRequest } from '../hooks/useActiveRequest';
import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
import { useSendRequest } from '../hooks/useSendRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
import { tryFormatJson } from '../lib/formatters';
import type { HttpHeader, HttpRequest, HttpUrlParameter } from '../lib/models';
import {
@@ -43,9 +43,9 @@ interface Props {
const useActiveTab = createGlobalState<string>('body');
export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
const activeRequest = useActiveRequest();
const activeRequest = useActiveRequest('http_request');
const activeRequestId = activeRequest?.id ?? null;
const updateRequest = useUpdateRequest(activeRequestId);
const updateRequest = useUpdateHttpRequest(activeRequestId);
const [activeTab, setActiveTab] = useActiveTab();
const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest?.id ?? null);

2
src-web/components/ResponsePane.tsx
View File

@@ -110,7 +110,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
<>
<span />
<HotKeyList
hotkeys={['request.send', 'request.create', 'sidebar.toggle', 'urlBar.focus']}
hotkeys={['http_request.send', 'http_request.create', 'sidebar.toggle', 'urlBar.focus']}
/>
</>
)}

53
src-web/components/Sidebar.tsx
View File

@@ -11,26 +11,27 @@ import { useActiveRequestId } from '../hooks/useActiveRequestId';
import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
import { useAppRoutes } from '../hooks/useAppRoutes';
import { useCreateFolder } from '../hooks/useCreateFolder';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
import { useDeleteAnyRequest } from '../hooks/useDeleteAnyRequest';
import { useDeleteFolder } from '../hooks/useDeleteFolder';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
import { useFolders } from '../hooks/useFolders';
import { useGrpcRequests } from '../hooks/useGrpcRequests';
import { useHotKey } from '../hooks/useHotKey';
import { useKeyValue } from '../hooks/useKeyValue';
import { useLatestResponse } from '../hooks/useLatestResponse';
import { usePrompt } from '../hooks/usePrompt';
import { useRequests } from '../hooks/useRequests';
import { useHttpRequests } from '../hooks/useHttpRequests';
import { useSendManyRequests } from '../hooks/useSendFolder';
import { useSendRequest } from '../hooks/useSendRequest';
import { useSidebarHidden } from '../hooks/useSidebarHidden';
import { useUpdateAnyFolder } from '../hooks/useUpdateAnyFolder';
import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import { useUpdateAnyHttpRequest } from '../hooks/useUpdateAnyHttpRequest';
import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
import { fallbackRequestName } from '../lib/fallbackRequestName';
import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
import type { Folder, HttpRequest, Workspace } from '../lib/models';
import type { Folder, GrpcRequest, HttpRequest, Workspace } from '../lib/models';
import { isResponseLoading } from '../lib/models';
import { ContextMenu } from './core/Dropdown';
import { Icon } from './core/Icon';
@@ -48,7 +49,7 @@ enum ItemTypes {
}
interface TreeNode {
item: Workspace | Folder | HttpRequest;
item: Workspace | Folder | HttpRequest | GrpcRequest;
children: TreeNode[];
depth: number;
}
@@ -58,7 +59,8 @@ export function Sidebar({ className }: Props) {
const sidebarRef = useRef<HTMLLIElement>(null);
const activeRequestId = useActiveRequestId();
const activeEnvironmentId = useActiveEnvironmentId();
const requests = useRequests();
const httpRequests = useHttpRequests();
const grpcRequests = useGrpcRequests();
const folders = useFolders();
const deleteAnyRequest = useDeleteAnyRequest();
const activeWorkspace = useActiveWorkspace();
@@ -67,7 +69,7 @@ export function Sidebar({ className }: Props) {
const [hasFocus, setHasFocus] = useState<boolean>(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const [selectedTree, setSelectedTree] = useState<TreeNode | null>(null);
const updateAnyRequest = useUpdateAnyRequest();
const updateAnyRequest = useUpdateAnyHttpRequest();
const updateAnyFolder = useUpdateAnyFolder();
const [draggingId, setDraggingId] = useState<string | null>(null);
const [hoveredTree, setHoveredTree] = useState<TreeNode | null>(null);
@@ -78,7 +80,7 @@ export function Sidebar({ className }: Props) {
namespace: NAMESPACE_NO_SYNC,
});
useHotKey('request.duplicate', () => {
useHotKey('http_request.duplicate', () => {
duplicateRequest.mutate();
});
@@ -110,7 +112,7 @@ export function Sidebar({ className }: Props) {
// Put requests and folders into a tree structure
const next = (node: TreeNode): TreeNode => {
const childItems = [...requests, ...folders].filter((f) =>
const childItems = [...httpRequests, ...grpcRequests, ...folders].filter((f) =>
node.item.model === 'workspace' ? f.folderId == null : f.folderId === node.item.id,
);
@@ -119,7 +121,7 @@ export function Sidebar({ className }: Props) {
for (const item of childItems) {
treeParentMap[item.id] = node;
node.children.push(next({ item, children: [], depth }));
if (item.model === 'http_request') {
if (item.model !== 'folder') {
selectableRequests.push({ id: item.id, index: selectableRequestIndex++, tree: node });
}
}
@@ -129,7 +131,7 @@ export function Sidebar({ className }: Props) {
const tree = next({ item: activeWorkspace, children: [], depth: 0 });
return { tree, treeParentMap, selectableRequests };
}, [activeWorkspace, requests, folders]);
}, [activeWorkspace, httpRequests, grpcRequests, folders]);
const focusActiveRequest = useCallback(
(
@@ -160,7 +162,7 @@ export function Sidebar({ className }: Props) {
);
const handleSelect = useCallback(
(id: string) => {
async (id: string) => {
const tree = treeParentMap[id ?? 'n/a'] ?? null;
const children = tree?.children ?? [];
const node = children.find((m) => m.item.id === id) ?? null;
@@ -171,7 +173,7 @@ export function Sidebar({ className }: Props) {
const { item } = node;
if (item.model === 'folder') {
collapsed.set((c) => ({ ...c, [item.id]: !c[item.id] }));
await collapsed.set((c) => ({ ...c, [item.id]: !c[item.id] }));
} else {
routes.navigate('request', {
requestId: id,
@@ -339,6 +341,10 @@ export function Sidebar({ className }: Props) {
if (child.item.model === 'folder') {
const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
return updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
} else if (child.item.model === 'grpc_request') {
// TODO
// const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
// return updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
} else if (child.item.model === 'http_request') {
const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
return updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
@@ -350,6 +356,10 @@ export function Sidebar({ className }: Props) {
if (child.item.model === 'folder') {
const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
await updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
} else if (child.item.model === 'grpc_request') {
// TODO
// const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
// await updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
} else if (child.item.model === 'http_request') {
const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
await updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
@@ -454,7 +464,9 @@ function SidebarItems({
itemId={child.item.id}
itemName={child.item.name}
itemFallbackName={
child.item.model === 'http_request' ? fallbackRequestName(child.item) : 'New Folder'
child.item.model === 'http_request' || child.item.model === 'grpc_request'
? fallbackRequestName(child.item)
: 'New Folder'
}
itemModel={child.item.model}
onMove={handleMove}
@@ -524,16 +536,15 @@ const SidebarItem = forwardRef(function SidebarItem(
ref: ForwardedRef<HTMLLIElement>,
) {
const activeRequest = useActiveRequest();
const createRequest = useCreateRequest();
const createRequest = useCreateHttpRequest();
const createFolder = useCreateFolder();
const deleteFolder = useDeleteFolder(itemId);
const deleteRequest = useDeleteRequest(itemId);
const duplicateRequest = useDuplicateRequest({ id: itemId, navigateAfter: true });
const sendRequest = useSendRequest(itemId);
const sendAndDownloadRequest = useSendRequest(itemId, { download: true });
const sendManyRequests = useSendManyRequests();
const latestResponse = useLatestResponse(itemId);
const updateRequest = useUpdateRequest(itemId);
const updateRequest = useUpdateHttpRequest(itemId);
const updateAnyFolder = useUpdateAnyFolder();
const prompt = usePrompt();
const [editing, setEditing] = useState<boolean>(false);
@@ -570,7 +581,7 @@ const SidebarItem = forwardRef(function SidebarItem(
);
const handleStartEditing = useCallback(() => {
if (itemModel !== 'http_request') return;
if (itemModel !== 'http_request' && itemModel !== 'grpc_request') return;
setEditing(true);
}, [setEditing, itemModel]);
@@ -652,7 +663,7 @@ const SidebarItem = forwardRef(function SidebarItem(
{
key: 'sendRequest',
label: 'Send',
hotKeyAction: 'request.send',
hotKeyAction: 'http_request.send',
hotKeyLabelOnly: true, // Already bound in URL bar
leftSlot: <Icon icon="sendHorizontal" />,
onSelect: () => sendRequest.mutate(),
@@ -661,7 +672,7 @@ const SidebarItem = forwardRef(function SidebarItem(
{
key: 'duplicateRequest',
label: 'Duplicate',
hotKeyAction: 'request.duplicate',
hotKeyAction: 'http_request.duplicate',
hotKeyLabelOnly: true, // Would trigger for every request (bad)
leftSlot: <Icon icon="copy" />,
onSelect: () => {

25
src-web/components/SidebarActions.tsx
View File

@@ -1,6 +1,7 @@
import { memo } from 'react';
import { useCreateFolder } from '../hooks/useCreateFolder';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
import { useSidebarHidden } from '../hooks/useSidebarHidden';
import { trackEvent } from '../lib/analytics';
import { Dropdown } from './core/Dropdown';
@@ -8,16 +9,17 @@ import { IconButton } from './core/IconButton';
import { HStack } from './core/Stacks';
export const SidebarActions = memo(function SidebarActions() {
const createRequest = useCreateRequest();
const createHttpRequest = useCreateHttpRequest();
const createGrpcRequest = useCreateGrpcRequest();
const createFolder = useCreateFolder();
const { hidden, toggle } = useSidebarHidden();
return (
<HStack>
<IconButton
onClick={() => {
onClick={async () => {
trackEvent('Sidebar', 'Toggle');
toggle();
await toggle();
}}
className="pointer-events-auto"
size="sm"
@@ -28,14 +30,19 @@ export const SidebarActions = memo(function SidebarActions() {
<Dropdown
items={[
{
key: 'create-request',
label: 'New Request',
hotKeyAction: 'request.create',
onSelect: () => createRequest.mutate({}),
key: 'create-http-request',
label: 'HTTP Request',
hotKeyAction: 'http_request.create',
onSelect: () => createHttpRequest.mutate({}),
},
{
key: 'create-grpc-request',
label: 'GRPC Request',
onSelect: () => createGrpcRequest.mutate({}),
},
{
key: 'create-folder',
label: 'New Folder',
label: 'Folder',
onSelect: () => createFolder.mutate({}),
},
]}

2
src-web/components/UrlBar.tsx
View File

@@ -83,7 +83,7 @@ export const UrlBar = memo(function UrlBar({
className="w-8 mr-0.5 my-0.5"
icon={isLoading ? 'update' : submitIcon}
spin={isLoading}
hotkeyAction="request.send"
hotkeyAction="http_request.send"
/>
)
}

3
src-web/components/Workspace.tsx
View File

@@ -34,6 +34,7 @@ export default function Workspace() {
const { setWidth, width, resetWidth } = useSidebarWidth();
const { hide, show, hidden } = useSidebarHidden();
const activeRequest = useActiveRequest();
console.log('ACTIVE REQUEST', activeRequest);
const windowSize = useWindowSize();
const [floating, setFloating] = useState<boolean>(false);
@@ -166,7 +167,7 @@ export default function Workspace() {
>
<WorkspaceHeader className="pointer-events-none" />
</HeaderSize>
{activeRequest?.name.includes('gRPC') ? (
{activeRequest?.model === 'grpc_request' ? (
<GrpcConnectionLayout style={body} />
) : (
<HttpRequestLayout style={body} />

2
src-web/components/core/SplitLayout.tsx
View File

@@ -140,7 +140,7 @@ export function SplitLayout({
const activeRequestId = useActiveRequestId();
if (activeRequestId === null) {
return <HotKeyList hotkeys={['request.create', 'sidebar.toggle']} />;
return <HotKeyList hotkeys={['http_request.create', 'sidebar.toggle']} />;
}
return (