gRPC in import/export

src-web/components/GrpcConnectionMessagesPane.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { format } from 'date-fns';
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useGrpcEvents } from '../hooks/useGrpcEvents';

src-web/components/SettingsDropdown.tsx

@@ -65,30 +65,7 @@ export function SettingsDropdown() {
           key: 'import-data',
           label: 'Import Data',
           leftSlot: <Icon icon="folderInput" />,
-          onSelect: () => {
-            dialog.show({
-              id: 'import',
-              title: 'Import Data',
-              size: 'sm',
-              render: ({ hide }) => {
-                return (
-                  <VStack space={3} className="pb-4">
-                    <p>Insomnia or Postman Collection v2/v2.1 formats are supported</p>
-                    <Button
-                      size="sm"
-                      color="primary"
-                      onClick={async () => {
-                        await importData.mutateAsync();
-                        hide();
-                      }}
-                    >
-                      Select File
-                    </Button>
-                  </VStack>
-                );
-              },
-            });
-          },
+          onSelect: () => importData.mutate(),
         },
         {
           key: 'export-data',

src-web/components/Workspace.tsx

@@ -9,6 +9,7 @@ import type {
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowSize } from 'react-use';
 import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useImportData } from '../hooks/useImportData';
 import { useIsFullscreen } from '../hooks/useIsFullscreen';
 import { useOsInfo } from '../hooks/useOsInfo';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
@@ -36,6 +37,7 @@ export default function Workspace() {
   const { hide, show, hidden } = useSidebarHidden();
   const activeRequest = useActiveRequest();
   const windowSize = useWindowSize();
+  const importData = useImportData();
   const [floating, setFloating] = useState<boolean>(false);
   const [isResizing, setIsResizing] = useState<boolean>(false);
   const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
@@ -165,7 +167,7 @@ export default function Workspace() {
           hotkeys={['http_request.create', 'sidebar.toggle', 'settings.show']}
           bottomSlot={
             <HStack space={1} justifyContent="center" className="mt-3">
-              <Button size="sm" color="gray">
+              <Button size="sm" color="gray" onClick={() => importData.mutate()}>
                 Import
               </Button>
               <Button size="sm" color="gray">