void;
};
-const items = [
- { label: 'GET', value: 'GET' },
- { label: 'PUT', value: 'PUT' },
- { label: 'POST', value: 'POST' },
- { label: 'PATCH', value: 'PATCH' },
- { label: 'DELETE', value: 'DELETE' },
- { label: 'OPTIONS', value: 'OPTIONS' },
- { label: 'HEAD', value: 'HEAD' },
-];
+const methodItems = ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'].map((m) => ({
+ value: m,
+ label: m,
+}));
export const RequestMethodDropdown = memo(function RequestMethodDropdown({
method,
onChange,
}: Props) {
- const handleChange = useCallback((i: DropdownMenuRadioItem) => onChange(i.value), [onChange]);
return (
-
-
-
-
-
+
+
+
);
});
diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx
index 52fa876b..ad61eb48 100644
--- a/src-web/components/RequestPane.tsx
+++ b/src-web/components/RequestPane.tsx
@@ -33,7 +33,7 @@ export function RequestPane({ fullHeight, className }: Props) {
value: 'body',
label: activeRequest?.bodyType ?? 'NoBody',
options: {
- onValueChange: (t) => updateRequest.mutate({ bodyType: t.value }),
+ onChange: (bodyType: string) => updateRequest.mutate({ bodyType }),
value: activeRequest?.bodyType ?? 'nobody',
items: [
{ label: 'No Body', value: 'nobody' },
@@ -60,7 +60,12 @@ export function RequestPane({ fullHeight, className }: Props) {
{activeRequest && (
<>
-
+
null,
+ leftSlot: ,
+ },
+ '-----',
+ {
+ label: 'Delete Request',
+ onSelect: deleteRequest.mutate,
+ leftSlot: ,
+ },
+ ]}
+ >
+
+
+ );
+});
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 62a9a768..90c6a289 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -8,7 +8,7 @@ import { useResponseViewMode } from '../hooks/useResponseViewMode';
import { tryFormatJson } from '../lib/formatters';
import type { HttpResponse } from '../lib/models';
import { pluralize } from '../lib/pluralize';
-import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
import { Editor } from './core/Editor';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';
@@ -85,6 +85,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
{
label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
onSelect: deleteAllResponses.mutate,
+ hidden: responses.length <= 1,
disabled: responses.length === 0,
},
'-----',
@@ -95,14 +96,12 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
})),
]}
>
-
-
-
+
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 7db9c07f..799e8fe7 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -1,14 +1,8 @@
import classnames from 'classnames';
-import type {
- CSSProperties,
- ForwardedRef,
- KeyboardEvent,
- MouseEvent as ReactMouseEvent,
-} from 'react';
+import type { ForwardedRef, KeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import type { XYCoord } from 'react-dnd';
-import { useDrag, useDragLayer, useDrop } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useDrag, useDrop } from 'react-dnd';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useCreateRequest } from '../hooks/useCreateRequest';
import { useDeleteRequest } from '../hooks/useDeleteRequest';
@@ -18,10 +12,9 @@ import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import type { HttpRequest } from '../lib/models';
import { Button } from './core/Button';
-import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';
-import { ScrollArea } from './core/ScrollArea';
import { HStack, VStack } from './core/Stacks';
import { WindowDragRegion } from './core/WindowDragRegion';
import { DropMarker } from './DropMarker';
@@ -115,16 +108,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
}}
/>
-
-
-
-
-
-
+
+
+
@@ -190,23 +180,21 @@ function SidebarItems({
return (
<>
- {requests.map((r, i) => {
- return (
-
- {hoveredIndex === i && }
-
-
- );
- })}
+ {requests.map((r, i) => (
+
+ {hoveredIndex === i && }
+
+
+ ))}
{hoveredIndex === requests.length && }
);
@@ -317,20 +305,17 @@ const _SidebarItem = forwardRef(function SidebarItem(
)}
-
-
-
+ color="custom"
+ size="sm"
+ iconSize="sm"
+ title="Delete request"
+ icon="dotsH"
+ />
@@ -375,11 +360,7 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
[onMove],
);
- const [{ isDragging }, connectDrag, preview] = useDrag<
- DragItem,
- unknown,
- { isDragging: boolean }
- >(
+ const [{ isDragging }, connectDrag] = useDrag(
() => ({
type: ItemTypes.REQUEST,
item: () => ({ id: requestId, requestName, workspaceId }),
@@ -390,8 +371,6 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
[onEnd],
);
- preview(getEmptyImage(), { captureDraggingState: true });
-
connectDrag(ref);
connectDrop(ref);
@@ -407,39 +386,3 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
/>
);
});
-
-function CustomDragLayer({ sidebarWidth }: { sidebarWidth: number }) {
- const { itemType, isDragging, item, currentOffset } = useDragLayer((monitor) => ({
- item: monitor.getItem(),
- itemType: monitor.getItemType(),
- currentOffset: monitor.getSourceClientOffset(),
- isDragging: monitor.isDragging(),
- }));
-
- const styles = useMemo(() => {
- if (currentOffset === null) {
- return { display: 'none' };
- }
- const transform = `translate(${currentOffset.x}px, ${currentOffset.y}px)`;
- return { transform, WebkitTransform: transform };
- }, [currentOffset]);
-
- if (!isDragging) {
- return null;
- }
-
- return (
-
-
- {itemType === ItemTypes.REQUEST && (
-
- )}
-
-