Refactor model emit, and recent conn dropdown

2026-03-25 19:01:14 +01:00 · 2024-02-05 10:39:47 -08:00
parent bf90f84d16
commit a7f2a86d71
29 changed files with 691 additions and 458 deletions
--- a/src-web/components/RequestPane.tsx
+++ b/src-web/components/RequestPane.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import type { CSSProperties, FormEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
-import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useSendRequest } from '../hooks/useSendRequest';
@@ -38,128 +37,128 @@ interface Props {
  style: CSSProperties;
  fullHeight: boolean;
  className?: string;
+  activeRequest: HttpRequest;
 }

 const useActiveTab = createGlobalState<string>('body');

-export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
-  const activeRequest = useActiveRequest('http_request');
-  const activeRequestId = activeRequest?.id ?? null;
+export const RequestPane = memo(function RequestPane({
+  style,
+  fullHeight,
+  className,
+  activeRequest,
+}: Props) {
+  const activeRequestId = activeRequest.id;
  const updateRequest = useUpdateHttpRequest(activeRequestId);
  const [activeTab, setActiveTab] = useActiveTab();
  const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
-  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest?.id ?? null);
+  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);

  const tabs: TabItem[] = useMemo(
-    () =>
-      activeRequest === null
-        ? []
-        : [
-            {
-              value: 'body',
-              options: {
-                value: activeRequest.bodyType,
-                items: [
-                  { type: 'separator', label: 'Form Data' },
-                  { label: 'Url Encoded', value: BODY_TYPE_FORM_URLENCODED },
-                  { label: 'Multi-Part', value: BODY_TYPE_FORM_MULTIPART },
-                  { type: 'separator', label: 'Text Content' },
-                  { label: 'JSON', value: BODY_TYPE_JSON },
-                  { label: 'XML', value: BODY_TYPE_XML },
-                  { label: 'GraphQL', value: BODY_TYPE_GRAPHQL },
-                  { type: 'separator', label: 'Other' },
-                  { label: 'No Body', shortLabel: 'Body', value: BODY_TYPE_NONE },
-                ],
-                onChange: async (bodyType) => {
-                  const patch: Partial<HttpRequest> = { bodyType };
-                  if (bodyType === BODY_TYPE_NONE) {
-                    patch.headers = activeRequest?.headers.filter(
-                      (h) => h.name.toLowerCase() !== 'content-type',
-                    );
-                  } else if (
-                    bodyType === BODY_TYPE_FORM_URLENCODED ||
-                    bodyType === BODY_TYPE_FORM_MULTIPART ||
-                    bodyType === BODY_TYPE_JSON ||
-                    bodyType === BODY_TYPE_XML
-                  ) {
-                    patch.method = 'POST';
-                    patch.headers = [
-                      ...(activeRequest?.headers.filter(
-                        (h) => h.name.toLowerCase() !== 'content-type',
-                      ) ?? []),
-                      {
-                        name: 'Content-Type',
-                        value: bodyType,
-                        enabled: true,
-                      },
-                    ];
-                  } else if (bodyType == BODY_TYPE_GRAPHQL) {
-                    patch.method = 'POST';
-                    patch.headers = [
-                      ...(activeRequest?.headers.filter(
-                        (h) => h.name.toLowerCase() !== 'content-type',
-                      ) ?? []),
-                      {
-                        name: 'Content-Type',
-                        value: 'application/json',
-                        enabled: true,
-                      },
-                    ];
-                  }
-
-                  // Force update header editor so any changed headers are reflected
-                  setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
-
-                  updateRequest.mutate(patch);
-                },
-              },
-            },
-            {
-              value: 'params',
-              label: (
-                <div className="flex items-center">
-                  Params
-                  <CountBadge count={activeRequest.urlParameters.filter((p) => p.name).length} />
-                </div>
-              ),
-            },
-            {
-              value: 'headers',
-              label: (
-                <div className="flex items-center">
-                  Headers
-                  <CountBadge count={activeRequest.headers.filter((h) => h.name).length} />
-                </div>
-              ),
-            },
-            {
-              value: 'auth',
-              label: 'Auth',
-              options: {
-                value: activeRequest.authenticationType,
-                items: [
-                  { label: 'Basic Auth', shortLabel: 'Basic', value: AUTH_TYPE_BASIC },
-                  { label: 'Bearer Token', shortLabel: 'Bearer', value: AUTH_TYPE_BEARER },
-                  { type: 'separator' },
-                  { label: 'No Authentication', shortLabel: 'Auth', value: AUTH_TYPE_NONE },
-                ],
-                onChange: async (authenticationType) => {
-                  let authentication: HttpRequest['authentication'] = activeRequest?.authentication;
-                  if (authenticationType === AUTH_TYPE_BASIC) {
-                    authentication = {
-                      username: authentication.username ?? '',
-                      password: authentication.password ?? '',
-                    };
-                  } else if (authenticationType === AUTH_TYPE_BEARER) {
-                    authentication = {
-                      token: authentication.token ?? '',
-                    };
-                  }
-                  updateRequest.mutate({ authenticationType, authentication });
-                },
-              },
-            },
+    () => [
+      {
+        value: 'body',
+        options: {
+          value: activeRequest.bodyType,
+          items: [
+            { type: 'separator', label: 'Form Data' },
+            { label: 'Url Encoded', value: BODY_TYPE_FORM_URLENCODED },
+            { label: 'Multi-Part', value: BODY_TYPE_FORM_MULTIPART },
+            { type: 'separator', label: 'Text Content' },
+            { label: 'JSON', value: BODY_TYPE_JSON },
+            { label: 'XML', value: BODY_TYPE_XML },
+            { label: 'GraphQL', value: BODY_TYPE_GRAPHQL },
+            { type: 'separator', label: 'Other' },
+            { label: 'No Body', shortLabel: 'Body', value: BODY_TYPE_NONE },
          ],
+          onChange: async (bodyType) => {
+            const patch: Partial<HttpRequest> = { bodyType };
+            if (bodyType === BODY_TYPE_NONE) {
+              patch.headers = activeRequest.headers.filter(
+                (h) => h.name.toLowerCase() !== 'content-type',
+              );
+            } else if (
+              bodyType === BODY_TYPE_FORM_URLENCODED ||
+              bodyType === BODY_TYPE_FORM_MULTIPART ||
+              bodyType === BODY_TYPE_JSON ||
+              bodyType === BODY_TYPE_XML
+            ) {
+              patch.method = 'POST';
+              patch.headers = [
+                ...(activeRequest.headers.filter((h) => h.name.toLowerCase() !== 'content-type') ??
+                  []),
+                {
+                  name: 'Content-Type',
+                  value: bodyType,
+                  enabled: true,
+                },
+              ];
+            } else if (bodyType == BODY_TYPE_GRAPHQL) {
+              patch.method = 'POST';
+              patch.headers = [
+                ...(activeRequest.headers.filter((h) => h.name.toLowerCase() !== 'content-type') ??
+                  []),
+                {
+                  name: 'Content-Type',
+                  value: 'application/json',
+                  enabled: true,
+                },
+              ];
+            }
+
+            // Force update header editor so any changed headers are reflected
+            setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
+
+            updateRequest.mutate(patch);
+          },
+        },
+      },
+      {
+        value: 'params',
+        label: (
+          <div className="flex items-center">
+            Params
+            <CountBadge count={activeRequest.urlParameters.filter((p) => p.name).length} />
+          </div>
+        ),
+      },
+      {
+        value: 'headers',
+        label: (
+          <div className="flex items-center">
+            Headers
+            <CountBadge count={activeRequest.headers.filter((h) => h.name).length} />
+          </div>
+        ),
+      },
+      {
+        value: 'auth',
+        label: 'Auth',
+        options: {
+          value: activeRequest.authenticationType,
+          items: [
+            { label: 'Basic Auth', shortLabel: 'Basic', value: AUTH_TYPE_BASIC },
+            { label: 'Bearer Token', shortLabel: 'Bearer', value: AUTH_TYPE_BEARER },
+            { type: 'separator' },
+            { label: 'No Authentication', shortLabel: 'Auth', value: AUTH_TYPE_NONE },
+          ],
+          onChange: async (authenticationType) => {
+            let authentication: HttpRequest['authentication'] = activeRequest.authentication;
+            if (authenticationType === AUTH_TYPE_BASIC) {
+              authentication = {
+                username: authentication.username ?? '',
+                password: authentication.password ?? '',
+              };
+            } else if (authenticationType === AUTH_TYPE_BEARER) {
+              authentication = {
+                token: authentication.token ?? '',
+              };
+            }
+            updateRequest.mutate({ authenticationType, authentication });
+          },
+        },
+      },
+    ],
    [activeRequest, updateRequest],
  );

@@ -180,7 +179,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
    [updateRequest],
  );

-  const sendRequest = useSendRequest(activeRequest?.id ?? null);
+  const sendRequest = useSendRequest(activeRequest.id ?? null);
  const handleSend = useCallback(
    async (e: FormEvent) => {
      e.preventDefault();
@@ -267,7 +266,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                  placeholder="..."
                  className="!bg-gray-50"
                  heightMode={fullHeight ? 'full' : 'auto'}
-                  defaultValue={`${activeRequest?.body?.text ?? ''}`}
+                  defaultValue={`${activeRequest.body?.text ?? ''}`}
                  contentType="application/json"
                  onChange={handleBodyTextChange}
                  format={tryFormatJson}
@@ -280,7 +279,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                  placeholder="..."
                  className="!bg-gray-50"
                  heightMode={fullHeight ? 'full' : 'auto'}
-                  defaultValue={`${activeRequest?.body?.text ?? ''}`}
+                  defaultValue={`${activeRequest.body?.text ?? ''}`}
                  contentType="text/xml"
                  onChange={handleBodyTextChange}
                />
@@ -289,7 +288,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                  forceUpdateKey={forceUpdateKey}
                  baseRequest={activeRequest}
                  className="!bg-gray-50"
-                  defaultValue={`${activeRequest?.body?.text ?? ''}`}
+                  defaultValue={`${activeRequest.body?.text ?? ''}`}
                  onChange={handleBodyTextChange}
                />
              ) : activeRequest.bodyType === BODY_TYPE_FORM_URLENCODED ? (