fixes ContentTypeDropdown and AuthDropdown (#4918)

packages/insomnia-components/src/dropdown/dropdown.tsx

@@ -146,9 +146,9 @@ interface State {
 }
 
 const isComponent = (match: string) => (child: ReactNode) => any(equals(match), [
-  // @ts-expect-error not sure
+  // @ts-expect-error this is required by our API for Dropdown
   child.type.name,
-  // @ts-expect-error not sure
+  // @ts-expect-error this is required by our API for Dropdown
   child.type.displayName,
 ]);
 

packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx

@@ -1,5 +1,6 @@
 import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import classnames from 'classnames';
+import { any, equals } from 'ramda';
 import React, { CSSProperties, Fragment, PureComponent, ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 
@@ -36,6 +37,17 @@ interface State {
   uniquenessKey: number;
 }
 
+const isComponent = (match: string) => (child: ReactNode) => any(equals(match), [
+  // @ts-expect-error this is required by our API for Dropdown
+  child.type.name,
+  // @ts-expect-error this is required by our API for Dropdown
+  child.type.displayName,
+]);
+
+const isDropdownItem = isComponent(DropdownItem.name);
+const isDropdownButton = isComponent(DropdownButton.name);
+const isDropdownDivider = isComponent(DropdownDivider.name);
+
 @autoBindMethodsForReact(AUTOBIND_CFG)
 export class Dropdown extends PureComponent<DropdownProps, State> {
   private _node: HTMLDivElement | null = null;
@@ -356,8 +368,7 @@ export class Dropdown extends PureComponent<DropdownProps, State> {
     const allChildren = this._getFlattenedChildren(children);
 
     const visibleChildren = allChildren.filter((child, i) => {
-      // @ts-expect-error -- TSCONVERSION this should cater for all types that ReactNode can be
-      if (child.type.name !== DropdownItem.name) {
+      if (isDropdownItem(child)) {
         return true;
       }
 
@@ -368,11 +379,9 @@ export class Dropdown extends PureComponent<DropdownProps, State> {
     for (let i = 0; i < allChildren.length; i++) {
       const child = allChildren[i];
 
-      // @ts-expect-error -- TSCONVERSION this should cater for all types that ReactNode can be
-      if (child.type.name === DropdownButton.name) {
+      if (isDropdownButton(child)) {
         dropdownButtons.push(child);
-      // @ts-expect-error -- TSCONVERSION this should cater for all types that ReactNode can be
-      } else if (child.type.name === DropdownItem.name) {
+      } else if (isDropdownItem(child)) {
         const active = i === filterActiveIndex;
         const hide = !visibleChildren.includes(child);
         dropdownItems.push(
@@ -387,14 +396,12 @@ export class Dropdown extends PureComponent<DropdownProps, State> {
             {child}
           </li>,
         );
-      // @ts-expect-error -- TSCONVERSION this should cater for all types that ReactNode can be
-      } else if (child.type.name === DropdownDivider.name) {
+      } else if (isDropdownDivider(child)) {
         const currentIndex = visibleChildren.indexOf(child);
         const nextChild = visibleChildren[currentIndex + 1];
 
         // Only show the divider if the next child is a DropdownItem
-        // @ts-expect-error -- TSCONVERSION this should cater for all types that ReactNode can be
-        if (nextChild && nextChild.type.name === DropdownItem.name) {
+        if (nextChild && isDropdownItem(nextChild)) {
           dropdownItems.push(<li key={i}>{child}</li>);
         }
       }

packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useCallback } from 'react';
+import { useSelector } from 'react-redux';
 
 import {
   AUTH_ASAP,
@@ -16,6 +17,7 @@ import {
 } from '../../../common/constants';
 import * as models from '../../../models';
 import type { Request, RequestAuthentication } from '../../../models/request';
+import { selectActiveRequest } from '../../redux/selectors';
 import { Dropdown } from '../base/dropdown/dropdown';
 import { DropdownButton } from '../base/dropdown/dropdown-button';
 import { DropdownDivider } from '../base/dropdown/dropdown-divider';
@@ -34,17 +36,27 @@ const AuthItem: FC<{
     {nameOverride || getAuthTypeName(type, true)}
   </DropdownItem>
 );
+AuthItem.displayName = DropdownItem.name;
 
 interface Props {
-  className?: string;
   onChange: (request: Request, arg1: RequestAuthentication) => Promise<Request>;
-  request: Request;
 }
 
-export const AuthDropdown: FC<Props> = ({ children, className, onChange, request }) => {
-  const { authentication } = request;
+export const AuthDropdown: FC<Props> = ({ onChange }) => {
+  const activeRequest = useSelector(selectActiveRequest);
 
   const onClick = useCallback((type: string) => {
+    if (!activeRequest) {
+      return;
+    }
+
+    if (!('authentication' in activeRequest)) {
+      // gRPC Requests don't have `authentication`
+      return;
+    }
+
+    const { authentication } = activeRequest;
+
     const fn = async () => {
       if (type === authentication.type) {
       // Type didn't change
@@ -73,21 +85,34 @@ export const AuthDropdown: FC<Props> = ({ children, className, onChange, request
           break;
         }
       }
-      onChange(request, newAuthentication);
+      onChange(activeRequest, newAuthentication);
     };
     fn();
-  }, [authentication, onChange, request]);
+  }, [onChange, activeRequest]);
 
-  const isCurrent = useCallback((type: string) => (
-    type === (authentication.type || AUTH_NONE)
-  ), [authentication.type]);
+  const isCurrent = useCallback((type: string) => {
+    if (!activeRequest) {
+      return false;
+    }
+    if (!('authentication' in activeRequest)) {
+      return false;
+    }
+    return type === (activeRequest.authentication.type || AUTH_NONE);
+  }, [activeRequest]);
+
+  if (!activeRequest) {
+    return null;
+  }
 
   const itemProps = { onClick, isCurrent };
 
   return (
     <Dropdown beside>
       <DropdownDivider>Auth Types</DropdownDivider>
-      <DropdownButton className={className}>{children}</DropdownButton>
+      <DropdownButton className="tall">
+        {'authentication' in activeRequest ? getAuthTypeName(activeRequest.authentication.type) || 'Auth' : 'Auth'}
+        <i className="fa fa-caret-down space-left" />
+      </DropdownButton>
       <AuthItem type={AUTH_BASIC} {...itemProps} />
       <AuthItem type={AUTH_DIGEST} {...itemProps} />
       <AuthItem type={AUTH_OAUTH_1} {...itemProps} />

packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx

@@ -16,16 +16,15 @@ import {
   getContentTypeName,
 } from '../../../common/constants';
 import { selectActiveRequest } from '../../redux/selectors';
-import { Dropdown, DropdownProps } from '../base/dropdown/dropdown';
+import { Dropdown } from '../base/dropdown/dropdown';
 import { DropdownButton } from '../base/dropdown/dropdown-button';
 import { DropdownDivider } from '../base/dropdown/dropdown-divider';
 import { DropdownItem } from '../base/dropdown/dropdown-item';
 import { AlertModal } from '../modals/alert-modal';
 import { showModal } from '../modals/index';
 
-interface Props extends DropdownProps {
+interface Props {
   onChange: (mimeType: string | null) => void;
-  className?: string;
 }
 
 const EMPTY_MIME_TYPE = null;
@@ -41,7 +40,10 @@ const MimeTypeItem: FC<{
 }) => {
   const activeRequest = useSelector(selectActiveRequest);
   const handleChangeMimeType = useCallback(async (mimeType: string | null) => {
-    if (activeRequest) {
+    if (!activeRequest) {
+      return;
+    }
+
     const { body } = activeRequest;
     const hasMimeType = 'mimeType' in body;
     if (hasMimeType && body.mimeType === mimeType) {
@@ -71,7 +73,6 @@ const MimeTypeItem: FC<{
         addCancel: true,
       });
     }
-    }
 
     onChange(mimeType);
     trackSegmentEvent(SegmentEvent.requestBodyTypeSelect, { type: mimeType });
@@ -87,15 +88,26 @@ const MimeTypeItem: FC<{
     </DropdownItem>
   );
 };
+MimeTypeItem.displayName = DropdownItem.name;
 
-export const ContentTypeDropdown: FC<Props> = ({
-  children,
-  className,
-  onChange,
-  ...extraProps
-}) => (
-  <Dropdown beside {...extraProps}>
-    <DropdownButton className={className}>{children}</DropdownButton>
+export const ContentTypeDropdown: FC<Props> = ({ onChange }) => {
+  const activeRequest = useSelector(selectActiveRequest);
+
+  if (!activeRequest) {
+    return null;
+  }
+  const { body } = activeRequest;
+  const hasMimeType = 'mimeType' in body;
+  const hasParams = body && 'params' in body && body.params;
+  const numBodyParams = hasParams ? body.params?.filter(({ disabled }) => !disabled).length : 0;
+
+  return (
+    <Dropdown>
+      <DropdownButton className="tall">
+        {hasMimeType ? getContentTypeName(body.mimeType) : 'Body'}
+        {numBodyParams ? <span className="bubble space-left">{numBodyParams}</span> : null}
+        <i className="fa fa-caret-down space-left" />
+      </DropdownButton>
       <DropdownDivider>
         <span>
           <i className="fa fa-bars" /> Structured
@@ -123,4 +135,5 @@ export const ContentTypeDropdown: FC<Props> = ({
       <MimeTypeItem mimeType={CONTENT_TYPE_FILE} onChange={onChange} />
       <MimeTypeItem mimeType={EMPTY_MIME_TYPE} forcedName="No Body" onChange={onChange} />
     </Dropdown>
-);
+  );
+};

packages/insomnia/src/ui/components/panes/request-pane.tsx

@@ -4,7 +4,6 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import { useMount } from 'react-use';
 
-import { getAuthTypeName, getContentTypeName } from '../../../common/constants';
 import * as models from '../../../models';
 import { queryAllWorkspaceUrls } from '../../../models/helpers/query-all-workspace-urls';
 import type {
@@ -147,12 +146,6 @@ export const RequestPane: FC<Props> = ({
     );
   }
 
-  let numBodyParams = 0;
-
-  if (request.body && request.body.params) {
-    numBodyParams = request.body.params.filter(p => !p.disabled).length;
-  }
-
   const numParameters = request.parameters.filter(p => !p.disabled).length;
   const numHeaders = request.headers.filter(h => !h.disabled).length;
   const urlHasQueryParameters = request.url.indexOf('?') >= 0;
@@ -185,24 +178,12 @@ export const RequestPane: FC<Props> = ({
           <Tab tabIndex="=1">
             <ContentTypeDropdown
               onChange={updateRequestMimeType}
-              className="tall"
-            >
-              {typeof request.body.mimeType === 'string'
-                ? getContentTypeName(request.body.mimeType)
-                : 'Body'}
-              {numBodyParams ? <span className="bubble space-left">{numBodyParams}</span> : null}
-              <i className="fa fa-caret-down space-left" />
-            </ContentTypeDropdown>
+            />
           </Tab>
           <Tab tabIndex="=1">
             <AuthDropdown
               onChange={updateRequestAuthentication}
-              request={request}
-              className="tall"
-            >
-              {getAuthTypeName(request.authentication.type) || 'Auth'}
-              <i className="fa fa-caret-down space-left" />
-            </AuthDropdown>
+            />
           </Tab>
           <Tab tabIndex="=1">
             <button>