Better HTTP methods

src-web/components/HttpAuthenticationEditor.tsx

@@ -19,7 +19,7 @@ interface Props {
 export function HttpAuthenticationEditor({ request }: Props) {
   const updateHttpRequest = useUpdateAnyHttpRequest();
   const updateGrpcRequest = useUpdateAnyGrpcRequest();
-  const auth = useHttpAuthenticationConfig(
+  const authConfig = useHttpAuthenticationConfig(
     request.authenticationType,
     request.authentication,
     request.id,
@@ -43,7 +43,7 @@ export function HttpAuthenticationEditor({ request }: Props) {
     [request.id, request.model, updateGrpcRequest, updateHttpRequest],
   );
 
-  if (auth.data == null) {
+  if (authConfig.data == null) {
     return <EmptyStateText>No Authentication {request.authenticationType}</EmptyStateText>;
   }
 
@@ -56,9 +56,9 @@ export function HttpAuthenticationEditor({ request }: Props) {
           onChange={(disabled) => handleChange({ ...request.authentication, disabled: !disabled })}
           title="Enabled"
         />
-        {auth.data.actions && (
+        {authConfig.data.actions && (
           <Dropdown
-            items={auth.data.actions.map(
+            items={authConfig.data.actions.map(
               (a): DropdownItem => ({
                 label: a.label,
                 leftSlot: a.icon ? <Icon icon={a.icon} /> : null,
@@ -75,7 +75,7 @@ export function HttpAuthenticationEditor({ request }: Props) {
         autocompleteVariables
         useTemplating
         stateKey={`auth.${request.id}.${request.authenticationType}`}
-        inputs={auth.data.args}
+        inputs={authConfig.data.args}
         data={request.authentication}
         onChange={handleChange}
       />

src-web/components/RecentRequestsDropdown.tsx

@@ -59,8 +59,7 @@ export function RecentRequestsDropdown({ className }: Props) {
 
       recentRequestItems.push({
         label: fallbackRequestName(request),
-        // leftSlot: <CountBadge className="!ml-0 px-0 w-5" count={recentRequestItems.length} />,
+        leftSlot: <HttpMethodTag request={request} />,
-        leftSlot: <HttpMethodTag className="text-right" shortNames request={request} />,
         onSelect: async () => {
           await router.navigate({
             to: '/workspaces/$workspaceId',

src-web/components/SidebarItem.tsx

@@ -217,7 +217,6 @@ export const SidebarItem = memo(function SidebarItem({
 
   const itemPrefix = (item.model === 'http_request' || item.model === 'grpc_request') && (
     <HttpMethodTag
-      shortNames
       request={item}
       className={classNames(!(active || selected) && 'text-text-subtlest')}
     />
@@ -272,7 +271,7 @@ export const SidebarItem = memo(function SidebarItem({
                 onKeyDown={handleInputKeyDown}
               />
             ) : (
-              <span className="truncate w-full">{itemName}</span>
+              <div className="truncate w-full">{itemName}</div>
             )}
           </div>
           {latestGrpcConnection ? (

src-web/components/core/HttpMethodTag.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
 import type { GrpcRequest, HttpRequest } from '@yaakapp-internal/models';
+import classNames from 'classnames';
 
 interface Props {
   request: HttpRequest | GrpcRequest;
@@ -7,46 +7,34 @@ interface Props {
   shortNames?: boolean;
 }
 
-const longMethodMap = {
+const methodNames: Record<string, string> = {
-  get: 'GET',
+  get: ' GET',
-  put: 'PUT',
+  put: ' PUT',
   post: 'POST',
-  patch: 'PATCH',
+  patch: 'PTCH',
-  delete: 'DELETE',
+  delete: 'DELE',
-  options: 'OPTIONS',
+  options: 'OPTN',
   head: 'HEAD',
-} as const;
+  query: 'QURY',
-
-const shortMethodMap: Record<keyof typeof longMethodMap, string> = {
-  get: 'GET',
-  put: 'PUT',
-  post: 'PST',
-  patch: 'PTC',
-  delete: 'DEL',
-  options: 'OPT',
-  head: 'HED',
 };
 
-export function HttpMethodTag({ shortNames, request, className }: Props) {
+export function HttpMethodTag({ request, className }: Props) {
   const method =
     request.model === 'http_request' && request.bodyType === 'graphql'
       ? 'GQL'
       : request.model === 'grpc_request'
-        ? 'GRP'
+        ? 'GRPC'
         : request.method;
 
-  const m = method.toLowerCase();
-  const methodMap: Record<string, string> = shortNames ? shortMethodMap : longMethodMap;
   return (
     <span
       className={classNames(
         className,
-        'text-xs font-mono text-text-subtle',
+        'text-xs font-mono text-text-subtle flex-shrink-0 whitespace-pre',
         'pt-[0.25em]', // Fix for monospace font not vertically centering
-        shortNames && 'w-[2.5em]',
       )}
     >
-      {methodMap[m] ?? m.slice(0, 4).toUpperCase()}
+      {(methodNames[method.toLowerCase()] ?? method.slice(0, 4)).toUpperCase()}
     </span>
   );
 }

src-web/hooks/useHttpAuthenticationConfig.ts

@@ -24,9 +24,17 @@ export function useHttpAuthenticationConfig(
   );
 
   return useQuery({
-    queryKey: ['http_authentication_config', requestId, authName, values, responseKey, forceRefreshCounter],
+    queryKey: [
+      'http_authentication_config',
+      requestId,
+      authName,
+      values,
+      responseKey,
+      forceRefreshCounter,
+    ],
     placeholderData: (prev) => prev, // Keep previous data on refetch
     queryFn: async () => {
+      if (authName == null) return null;
       const config = await invokeCmd<GetHttpAuthenticationConfigResponse>(
         'cmd_get_http_authentication_config',
         {