Fix/nitpicks

packages/insomnia-components/src/svg-icon.tsx

@@ -8,6 +8,7 @@ import { SvgIcnBrackets } from './assets/svgr/IcnBrackets';
 import { SvgIcnBug } from './assets/svgr/IcnBug';
 import { SvgIcnBurgerMenu } from './assets/svgr/IcnBurgerMenu';
 import { SvgIcnCheckmark } from './assets/svgr/IcnCheckmark';
+import { SvgIcnCheckmarkCircle } from './assets/svgr/IcnCheckmarkCircle';
 import { SvgIcnChevronDown } from './assets/svgr/IcnChevronDown';
 import { SvgIcnChevronUp } from './assets/svgr/IcnChevronUp';
 import { SvgIcnClock } from './assets/svgr/IcnClock';
@@ -18,7 +19,6 @@ import { SvgIcnDragGrip } from './assets/svgr/IcnDragGrip';
 import { SvgIcnElevator } from './assets/svgr/IcnElevator';
 import { SvgIcnEllipsis } from './assets/svgr/IcnEllipsis';
 import { SvgIcnEllipsisCircle } from './assets/svgr/IcnEllipsisCircle';
-import { SvgIcnEllipsisCircle2 } from './assets/svgr/IcnEllipsisCircle2';
 import { SvgIcnEmpty } from './assets/svgr/IcnEmpty';
 import { SvgIcnErrors } from './assets/svgr/IcnErrors';
 import { SvgIcnFile } from './assets/svgr/IcnFile';
@@ -128,7 +128,7 @@ export const IconEnum = {
   warningCircle: 'warning-circle',
   x: 'x',
   disconnected: 'disconnected',
-  ellipsisCircle2: 'ellipsis-circle2',
+  checkmarkCircle: 'checkmark-circle',
   receive: 'receive',
   sent: 'sent',
   systemEvent: 'system-event',
@@ -236,7 +236,7 @@ export class SvgIcon extends Component<SvgIconProps> {
     [IconEnum.disconnected]: [ThemeEnum.default, SvgIcnDisconnected],
     [IconEnum.receive]: [ThemeEnum.default, SvgIcnReceive],
     [IconEnum.sent]: [ThemeEnum.default, SvgIcnSent],
-    [IconEnum.ellipsisCircle2]: [ThemeEnum.default, SvgIcnEllipsisCircle2],
+    [IconEnum.checkmarkCircle]: [ThemeEnum.default, SvgIcnCheckmarkCircle],
     [IconEnum.systemEvent]: [ThemeEnum.default, SvgIcnSystemEvent],
   };
 

packages/insomnia/src/ui/components/websockets/action-bar.tsx

@@ -29,7 +29,6 @@ const ActionButton: FC<ActionButtonProps> = ({ requestId, readyState }) => {
   if (readyState === ReadyState.CONNECTING || readyState === ReadyState.CLOSED) {
     return (
       <Button
-        name="websocketActionConnectBtn"
         type="submit"
         form="websocketUrlForm"
       >
@@ -41,7 +40,6 @@ const ActionButton: FC<ActionButtonProps> = ({ requestId, readyState }) => {
   return (
     <Button
       className="urlbar__send-btn"
-      name="websocketActionCloseBtn"
       type="button"
       warning
       onClick={() => {

packages/insomnia/src/ui/components/websockets/event-log-view.tsx

@@ -89,7 +89,7 @@ function getIcon(event: WebSocketEvent): SvgIconProps['icon'] {
       }
     }
     case 'open': {
-      return 'ellipsis-circle2';
+      return 'checkmark-circle';
     }
     case 'close': {
       return 'disconnected';

packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx

@@ -14,7 +14,6 @@ import { AuthWrapper } from '../editors/auth/auth-wrapper';
 import { RequestHeadersEditor } from '../editors/request-headers-editor';
 import { showAlert, showModal } from '../modals';
 import { RequestRenderErrorModal } from '../modals/request-render-error-modal';
-import { EmptyStatePane } from '../panes/empty-state-pane';
 import { Pane, PaneHeader as OriginalPaneHeader } from '../panes/pane';
 import { WebSocketActionBar } from './action-bar';
 
@@ -157,7 +156,7 @@ export const WebSocketRequestPane: FC<Props> = ({ request, workspaceId, environm
     const fn = async () => {
       const payload = await models.webSocketPayload.getByParentId(request._id);
       if (isMounted && payload) {
-        setInitialValue(payload?.value || '');
+        setInitialValue(payload.value);
         setPreviewMode(payload.mode);
       }
     };
@@ -214,40 +213,23 @@ export const WebSocketRequestPane: FC<Props> = ({ request, workspaceId, environm
           </Tab>
         </TabList>
         <TabPanel className="react-tabs__tab-panel">
-          {!disabled && (
-            <EmptyStatePane
-              icon={<i className="fa fa-paper-plane" />}
-              documentationLinks={[
-                {
-                  title: 'Introduction to Insomnia',
-                  url: 'https://docs.insomnia.rest/insomnia/get-started',
-                },
-              ]}
-              title="Enter a URL and connect to a WebSocket server to start sending data"
-              secondaryAction="Select a payload type from above to send data to the connection"
-            />
-          )}
-          {disabled && (
-            <>
-              <PaneSendButton>
-                <SendButton
-                  type="submit"
-                  form="websocketMessageForm"
-                  disabled={readyState !== ReadyState.OPEN}
-                >
-                  Send
-                </SendButton>
-              </PaneSendButton>
-              <WebSocketRequestForm
-                key={uniqueKey}
-                request={request}
-                previewMode={previewMode}
-                initialValue={initialValue}
-                createOrUpdatePayload={createOrUpdatePayload}
-                environmentId={environmentId}
-              />
-            </>
-          )}
+          <PaneSendButton>
+            <SendButton
+              type="submit"
+              form="websocketMessageForm"
+              disabled={readyState !== ReadyState.OPEN}
+            >
+              Send
+            </SendButton>
+          </PaneSendButton>
+          <WebSocketRequestForm
+            key={uniqueKey}
+            request={request}
+            previewMode={previewMode}
+            initialValue={initialValue}
+            createOrUpdatePayload={createOrUpdatePayload}
+            environmentId={environmentId}
+          />
         </TabPanel>
         <TabPanel className="react-tabs__tab-panel">
           <AuthWrapper

packages/insomnia/src/ui/components/websockets/websocket-response-pane.tsx

@@ -12,6 +12,7 @@ import { useWebSocketConnectionEvents } from '../../context/websocket-client/use
 import { selectActiveResponse } from '../../redux/selectors';
 import { ResponseHistoryDropdown } from '../dropdowns/response-history-dropdown';
 import { ErrorBoundary } from '../error-boundary';
+import { EmptyStatePane } from '../panes/empty-state-pane';
 import { Pane, PaneHeader as OriginalPaneHeader } from '../panes/pane';
 import { SizeTag } from '../tags/size-tag';
 import { StatusTag } from '../tags/status-tag';
@@ -58,6 +59,17 @@ export const WebSocketResponsePane: FC<{ requestId: string; handleSetActiveRespo
       return (
         <Pane type="response">
           <PaneHeader />
+          <EmptyStatePane
+            icon={<i className="fa fa-paper-plane" />}
+            documentationLinks={[
+              {
+                title: 'Introduction to Insomnia',
+                url: 'https://docs.insomnia.rest/insomnia/get-started',
+              },
+            ]}
+            title="Enter a URL and connect to a WebSocket server to start sending data"
+            secondaryAction="Select a payload type from above to send data to the connection"
+          />
         </Pane>
       );
     }

packages/insomnia/src/ui/components/wrapper-debug.tsx

@@ -134,6 +134,7 @@ export const WrapperDebug: FC<Props> = ({
             ) : (
               isWebSocketRequest(activeRequest) ? (
                 <WebSocketRequestPane
+                  key={activeRequest._id}
                   request={activeRequest}
                   workspaceId={activeWorkspace._id}
                   environmentId={activeEnvironment ? activeEnvironment._id : ''}