Fix body change setting headers/method

src-web/components/RequestPane.tsx

@@ -32,6 +32,7 @@ import { BinaryFileEditor } from './BinaryFileEditor';
 import { CountBadge } from './core/CountBadge';
 import { Editor } from './core/Editor';
 import type { GenericCompletionOption } from './core/Editor/genericCompletion';
+import { InlineCode } from './core/InlineCode';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
@@ -39,6 +40,7 @@ import { FormMultipartEditor } from './FormMultipartEditor';
 import { FormUrlencodedEditor } from './FormUrlencodedEditor';
 import { GraphQLEditor } from './GraphQLEditor';
 import { HeadersEditor } from './HeadersEditor';
+import { useToast } from './ToastContext';
 import { UrlBar } from './UrlBar';
 import { UrlParametersEditor } from './UrlParameterEditor';
 
@@ -67,6 +69,7 @@ export const RequestPane = memo(function RequestPane({
 
   const handleContentTypeChange = useCallback(
     async (contentType: string | null) => {
+      console.log('UPDATE CONTENT TYPE', contentType);
       const headers = activeRequest.headers.filter((h) => h.name.toLowerCase() !== 'content-type');
 
       if (contentType != null) {
@@ -84,6 +87,8 @@ export const RequestPane = memo(function RequestPane({
     [activeRequest.headers, activeRequestId, updateRequest],
   );
 
+  const toast = useToast();
+
   const tabs: TabItem[] = useMemo(
     () => [
       {
@@ -104,25 +109,44 @@ export const RequestPane = memo(function RequestPane({
             { label: 'No Body', shortLabel: 'Body', value: BODY_TYPE_NONE },
           ],
           onChange: async (bodyType) => {
+            if (bodyType === activeRequest.bodyType) return;
+
+            const showMethodToast = (newMethod: string) => {
+              if (activeRequest.method.toLowerCase() === newMethod.toLowerCase()) return;
+              toast.show({
+                id: 'switched-method',
+                message: (
+                  <>
+                    Request method switched to <InlineCode>POST</InlineCode>
+                  </>
+                ),
+              });
+            };
+
             const patch: Partial<HttpRequest> = { bodyType };
             let newContentType: string | null | undefined;
             if (bodyType === BODY_TYPE_NONE) {
               newContentType = null;
             } else if (
-              activeRequest.method.toLowerCase() !== 'put' &&
+              bodyType === BODY_TYPE_FORM_URLENCODED ||
-              activeRequest.method.toLowerCase() !== 'patch' &&
+              bodyType === BODY_TYPE_FORM_MULTIPART ||
-              activeRequest.method.toLowerCase() !== 'post' &&
+              bodyType === BODY_TYPE_JSON ||
-              (bodyType === BODY_TYPE_FORM_URLENCODED ||
+              bodyType === BODY_TYPE_OTHER ||
-                bodyType === BODY_TYPE_FORM_MULTIPART ||
+              bodyType === BODY_TYPE_XML
-                bodyType === BODY_TYPE_JSON ||
-                bodyType === BODY_TYPE_OTHER ||
-                bodyType === BODY_TYPE_XML)
             ) {
-              patch.method = 'POST';
+              const isDefaultishRequest =
+                activeRequest.bodyType === BODY_TYPE_NONE &&
+                activeRequest.method.toLowerCase() === 'get';
+              const requiresPost = bodyType === BODY_TYPE_FORM_MULTIPART;
+              if (isDefaultishRequest || requiresPost) {
+                patch.method = 'POST';
+                showMethodToast(patch.method);
+              }
               newContentType = bodyType === BODY_TYPE_OTHER ? 'text/plain' : bodyType;
             } else if (bodyType == BODY_TYPE_GRAPHQL) {
               patch.method = 'POST';
               newContentType = 'application/json';
+              showMethodToast(patch.method);
             }
 
             await updateRequest.mutateAsync({ id: activeRequestId, update: patch });
@@ -191,6 +215,7 @@ export const RequestPane = memo(function RequestPane({
       activeRequest.urlParameters,
       activeRequestId,
       handleContentTypeChange,
+      toast,
       updateRequest,
     ],
   );

src-web/components/core/Editor/twig/placeholder.ts

@@ -55,7 +55,6 @@ export const placeholders = function (variables: { name: string }[]) {
       }
 
       const isFunction = groupMatch.includes('(');
-      console.log('VAIRABLES', variables, groupMatch);
       return Decoration.replace({
         inclusive: true,
         widget: new PlaceholderWidget(

src-web/components/core/Toast.tsx

@@ -15,10 +15,11 @@ export interface ToastProps {
   className?: string;
   timeout: number | null;
   action?: ReactNode;
-  variant?: 'copied' | 'success' | 'info' | 'warning' | 'error';
+  variant?: 'custom' | 'copied' | 'success' | 'info' | 'warning' | 'error';
 }
 
-const ICONS: Record<NonNullable<ToastProps['variant']>, IconProps['icon']> = {
+const ICONS: Record<NonNullable<ToastProps['variant']>, IconProps['icon'] | null> = {
+  custom: null,
   copied: 'copyCheck',
   warning: 'alert',
   error: 'alert',
@@ -33,7 +34,7 @@ export function Toast({
   onClose,
   timeout,
   action,
-  variant,
+  variant = 'info',
 }: ToastProps) {
   useKey(
     'Escape',
@@ -45,6 +46,8 @@ export function Toast({
     [open],
   );
 
+  const icon = variant in ICONS && ICONS[variant];
+
   return (
     <motion.div
       initial={{ opacity: 0, right: '-10%' }}
@@ -65,9 +68,9 @@ export function Toast({
       )}
     >
       <div className="px-3 py-3 flex items-center gap-2">
-        {variant != null && (
+        {icon && (
           <Icon
-            icon={ICONS[variant]}
+            icon={icon}
             className={classNames(
               variant === 'success' && 'text-fg-success',
               variant === 'warning' && 'text-fg-warning',

src-web/hooks/useNotificationToast.tsx

@@ -27,6 +27,7 @@ export function useNotificationToast() {
       id: payload.id,
       timeout: null,
       message: payload.message,
+      variant: 'custom',
       onClose: () => markRead(payload.id),
       action:
         actionLabel && actionUrl ? (