Refactor/remove-react-hack-mime-type (#5183)

* undrill update mime type * use content type as a key
2026-04-22 15:18:27 -04:00 · 2022-09-15 11:40:02 +02:00
parent dc56947574
commit fbf2fde422
5 changed files with 21 additions and 68 deletions
--- a/packages/insomnia/src/ui/components/panes/request-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/request-pane.tsx
@@ -4,6 +4,7 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import { useMount } from 'react-use';

+import { getContentTypeFromHeaders } from '../../../common/constants';
 import * as models from '../../../models';
 import { queryAllWorkspaceUrls } from '../../../models/helpers/query-all-workspace-urls';
 import { update } from '../../../models/helpers/request-operations';
@@ -34,10 +35,8 @@ interface Props {
  forceUpdateRequest: (r: Request, patch: Partial<Request>) => Promise<Request>;
  forceUpdateRequestHeaders: (r: Request, headers: RequestHeader[]) => Promise<Request>;
  handleImport: Function;
-  headerEditorKey: string;
  request?: Request | null;
  settings: Settings;
-  updateRequestMimeType: (mimeType: string | null) => Promise<Request | null>;
  workspace: Workspace;
 }

@@ -47,10 +46,8 @@ export const RequestPane: FC<Props> = ({
  forceUpdateRequest,
  forceUpdateRequestHeaders,
  handleImport,
-  headerEditorKey,
  request,
  settings,
-  updateRequestMimeType,
  workspace,
 }) => {

@@ -126,11 +123,24 @@ export const RequestPane: FC<Props> = ({
    );
  }

+  async function updateRequestMimeType(mimeType: string | null): Promise<Request | null> {
+    if (!request) {
+      console.warn('Tried to update request mime-type when no active request');
+      return null;
+    }
+    const requestMeta = await models.requestMeta.getOrCreateByParentId(request._id,);
+    // Switched to No body
+    const savedRequestBody = typeof mimeType !== 'string' ? request.body : {};
+    // Clear saved value in requestMeta
+    await models.requestMeta.update(requestMeta, { savedRequestBody });
+    // @ts-expect-error -- TSCONVERSION mimeType can be null when no body is selected but the updateMimeType logic needs to be reexamined
+    return models.request.updateMimeType(request, mimeType, false, requestMeta.savedRequestBody);
+  }
  const numParameters = request.parameters.filter(p => !p.disabled).length;
  const numHeaders = request.headers.filter(h => !h.disabled).length;
  const urlHasQueryParameters = request.url.indexOf('?') >= 0;
  const uniqueKey = `${forceRefreshCounter}::${request._id}`;
-
+  const contentType = getContentTypeFromHeaders(request.headers) || request.body.mimeType;
  return (
    <Pane type="request">
      <PaneHeader>
@@ -150,9 +160,7 @@ export const RequestPane: FC<Props> = ({
      <Tabs className={classnames(paneBodyClasses, 'react-tabs')} forceRenderTabPanel>
        <TabList>
          <Tab tabIndex="-1">
-            <ContentTypeDropdown
-              onChange={updateRequestMimeType}
-            />
+            <ContentTypeDropdown onChange={updateRequestMimeType} />
          </Tab>
          <Tab tabIndex="-1">
            <AuthDropdown />
@@ -215,7 +223,7 @@ export const RequestPane: FC<Props> = ({
              errorClassName="tall wide vertically-align font-error pad text-center"
            >
              <RequestParametersEditor
-                key={headerEditorKey}
+                key={contentType}
                request={request}
                bulk={settings.useBulkParametersEditor}
              />
@@ -240,7 +248,7 @@ export const RequestPane: FC<Props> = ({
        <TabPanel className="react-tabs__tab-panel header-editor">
          <ErrorBoundary key={uniqueKey} errorClassName="font-error pad text-center">
            <RequestHeadersEditor
-              key={headerEditorKey}
+              key={contentType}
              request={request}
              bulk={settings.useBulkHeaderEditor}
            />
--- a/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
+++ b/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
@@ -154,14 +154,13 @@ interface Props {
  workspaceId: string;
  environmentId: string;
  forceRefreshKey: number;
-  headerEditorKey: string;
 }

 // requestId is something we can read from the router params in the future.
 // essentially we can lift up the states and merge request pane and response pane into a single page and divide the UI there.
 // currently this is blocked by the way page layout divide the panes with dragging functionality
 // TODO: @gatzjames discuss above assertion in light of request and settings drills
-export const WebSocketRequestPane: FC<Props> = ({ request, workspaceId, environmentId, forceRefreshKey, headerEditorKey }) => {
+export const WebSocketRequestPane: FC<Props> = ({ request, workspaceId, environmentId, forceRefreshKey }) => {
  const readyState = useWSReadyState(request._id);
  const { useBulkParametersEditor } = useSelector(selectSettings);

@@ -277,7 +276,6 @@ export const WebSocketRequestPane: FC<Props> = ({ request, workspaceId, environm
              errorClassName="tall wide vertically-align font-error pad text-center"
            >
              <RequestParametersEditor
-                key={headerEditorKey}
                request={request}
                bulk={useBulkParametersEditor}
                disabled={disabled}
--- a/packages/insomnia/src/ui/components/wrapper-debug.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-debug.tsx
@@ -44,8 +44,6 @@ interface Props {
  handleForceUpdateRequestHeaders: (r: Request, headers: RequestHeader[]) => Promise<Request>;
  handleImport: Function;
  handleSetResponseFilter: (filter: string) => void;
-  handleUpdateRequestMimeType: (mimeType: string | null) => Promise<Request | null>;
-  headerEditorKey: string;
  vcs: VCS | null;
 }
 export const WrapperDebug: FC<Props> = ({
@@ -58,8 +56,6 @@ export const WrapperDebug: FC<Props> = ({
  handleForceUpdateRequestHeaders,
  handleImport,
  handleSetResponseFilter,
-  handleUpdateRequestMimeType,
-  headerEditorKey,
  vcs,
 }) => {
  const activeProject = useSelector(selectActiveProject);
@@ -136,7 +132,6 @@ export const WrapperDebug: FC<Props> = ({
                  workspaceId={activeWorkspace._id}
                  environmentId={activeEnvironment ? activeEnvironment._id : ''}
                  forceRefreshKey={forceRefreshKey}
-                  headerEditorKey={headerEditorKey}
                />
              ) : (
                <RequestPane
@@ -145,10 +140,8 @@ export const WrapperDebug: FC<Props> = ({
                  forceUpdateRequest={handleForceUpdateRequest}
                  forceUpdateRequestHeaders={handleForceUpdateRequestHeaders}
                  handleImport={handleImport}
-                  headerEditorKey={headerEditorKey}
                  request={activeRequest}
                  settings={settings}
-                  updateRequestMimeType={handleUpdateRequestMimeType}
                  workspace={activeWorkspace}
                />
              )
--- a/packages/insomnia/src/ui/components/wrapper.tsx
+++ b/packages/insomnia/src/ui/components/wrapper.tsx
@@ -121,8 +121,6 @@ const spectral = initializeSpectral();

 export type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & {
  handleSetResponseFilter: Function;
-  handleUpdateRequestMimeType: (mimeType: string | null) => Promise<Request | null>;
-  headerEditorKey: string;
  vcs: VCS | null;
  gitVCS: GitVCS | null;
 };
@@ -313,10 +311,8 @@ export class WrapperClass extends PureComponent<Props, State> {
      activeGitRepository,
      activeWorkspace,
      activeApiSpec,
-      handleUpdateRequestMimeType,
      gitVCS,
      vcs,
-      headerEditorKey,
    } = this.props;

    // Setup git sync dropdown for use in Design/Debug pages
@@ -492,10 +488,8 @@ export class WrapperClass extends PureComponent<Props, State> {
                  handleForceUpdateRequestHeaders={this._handleForceUpdateRequestHeaders}
                  handleImport={this._handleImport}
                  handleSetResponseFilter={this._handleSetResponseFilter}
-                  handleUpdateRequestMimeType={handleUpdateRequestMimeType}
                  handleSetActiveResponse={this.handleSetActiveResponse}
                  vcs={vcs}
-                  headerEditorKey={headerEditorKey}
                />
              </Suspense>
            }
--- a/packages/insomnia/src/ui/containers/app.tsx
+++ b/packages/insomnia/src/ui/containers/app.tsx
@@ -26,10 +26,10 @@ import { GrpcRequest, isGrpcRequest } from '../../models/grpc-request';
 import { getByParentId as getGrpcRequestMetaByParentId } from '../../models/grpc-request-meta';
 import * as requestOperations from '../../models/helpers/request-operations';
 import { isNotDefaultProject } from '../../models/project';
-import { Request, updateMimeType } from '../../models/request';
+import { Request } from '../../models/request';
 import { type RequestGroupMeta } from '../../models/request-group-meta';
 import { getByParentId as getRequestMetaByParentId } from '../../models/request-meta';
-import { isWebSocketRequest, WebSocketRequest } from '../../models/websocket-request';
+import { WebSocketRequest } from '../../models/websocket-request';
 import { isWorkspace } from '../../models/workspace';
 import * as plugins from '../../plugins';
 import * as themes from '../../plugins/misc';
@@ -90,7 +90,6 @@ interface State {
  vcs: VCS | null;
  gitVCS: GitVCS | null;
  forceRefreshCounter: number;
-  forceRefreshHeaderCounter: number;
  isMigratingChildren: boolean;
 }

@@ -108,7 +107,6 @@ class App extends PureComponent<AppProps, State> {
      vcs: null,
      gitVCS: null,
      forceRefreshCounter: 0,
-      forceRefreshHeaderCounter: 0,
      isMigratingChildren: false,
    };

@@ -348,41 +346,6 @@ class App extends PureComponent<AppProps, State> {
    }, 2000);
  }

-  async _handleUpdateRequestMimeType(mimeType: string | null): Promise<Request | null> {
-    if (!this.props.activeRequest) {
-      console.warn('Tried to update request mime-type when no active request');
-      return null;
-    }
-
-    if (isWebSocketRequest(this.props.activeRequest)) {
-      console.warn('Tried to update request mime-type on WebSocket request');
-      return null;
-    }
-
-    const requestMeta = await models.requestMeta.getOrCreateByParentId(
-      this.props.activeRequest._id,
-    );
-    const savedBody = requestMeta.savedRequestBody;
-    const saveValue =
-      typeof mimeType !== 'string' // Switched to No body
-        ? this.props.activeRequest.body
-        : {};
-    // Clear saved value in requestMeta
-    await models.requestMeta.update(requestMeta, {
-      savedRequestBody: saveValue,
-    });
-    // @ts-expect-error -- TSCONVERSION should skip this if active request is grpc request
-    const newRequest = await updateMimeType(this.props.activeRequest, mimeType, false, savedBody);
-    // Force it to update, because other editor components (header editor)
-    // needs to change. Need to wait a delay so the next render can finish
-    setTimeout(() => {
-      this.setState({
-        forceRefreshHeaderCounter: this.state.forceRefreshHeaderCounter + 1,
-      });
-    }, 500);
-    return newRequest;
-  }
-
  _handleKeyDown(event: KeyboardEvent) {
    for (const [definition, callback] of this._globalKeyMap) {
      executeHotKey(event, definition, callback);
@@ -810,7 +773,6 @@ class App extends PureComponent<AppProps, State> {
      gitVCS,
      vcs,
      forceRefreshCounter,
-      forceRefreshHeaderCounter,
    } = this.state;
    const uniquenessKey = `${forceRefreshCounter}::${activeWorkspace?._id || 'n/a'}`;
    return (
@@ -824,8 +786,6 @@ class App extends PureComponent<AppProps, State> {
                <Wrapper
                  ref={this._setWrapperRef}
                  handleSetResponseFilter={this._handleSetResponseFilter}
-                  handleUpdateRequestMimeType={this._handleUpdateRequestMimeType}
-                  headerEditorKey={forceRefreshHeaderCounter + ''}
                  vcs={vcs}
                  gitVCS={gitVCS}
                />