feat: Improve wording for Security Whitelist Error Message [INS-1277]

Author: xiaodemen

packages/insomnia/src/common/validators.ts

@@ -1,7 +1,7 @@
-import type { CaCertificate } from "../models/ca-certificate";
-import type { ClientCertificate } from "../models/client-certificate";
-import type { Settings } from "../models/settings";
-import type { RenderedRequest } from "../templating/types";
+import type { CaCertificate } from '../models/ca-certificate';
+import type { ClientCertificate } from '../models/client-certificate';
+import type { Settings } from '../models/settings';
+import type { RenderedRequest } from '../templating/types';
 
 export function isFsAccessingAllowed(
   renderedRequest: RenderedRequest,
@@ -14,13 +14,15 @@ export function isFsAccessingAllowed(
     if (fromCli) {
       throw `Insomnia cannot access the file ‘${fileName}’. You can specify paths with one or more "--dataFolders <directory>" or "-f <directory>" to allow accessing.`;
     } else {
-      throw `Insomnia cannot access the file ‘${fileName}’. You can adjust this in Preferences → Security.`;
+      throw `Insomnia cannot access the file ‘${fileName}’.`;
     }
-  }
+  };
 
   // case1: check request body (set by scripts or request body editor)
   if (renderedRequest.body.fileName !== undefined && renderedRequest.body.fileName !== '') {
-    const allowed = settings?.dataFolders.some(folder => folder !== '' && renderedRequest.body.fileName?.startsWith(folder));
+    const allowed = settings?.dataFolders.some(
+      folder => folder !== '' && renderedRequest.body.fileName?.startsWith(folder),
+    );
     if (!allowed) {
       throwError(renderedRequest.body.fileName);
     }
@@ -29,7 +31,7 @@ export function isFsAccessingAllowed(
   // case2: check the body form data - "file" type params
   if (Array.isArray(renderedRequest.body.params)) {
     renderedRequest.body.params.forEach(param => {
-      if (param.type === "file" && !param.disabled) {
+      if (param.type === 'file' && !param.disabled) {
         const allowed = settings?.dataFolders.some(folder => folder !== '' && param.fileName?.startsWith(folder));
         if (!allowed) {
           throwError(param.fileName || param.value);
@@ -56,7 +58,9 @@ export function isFsAccessingAllowed(
 
       [cert.key, cert.cert, cert.pfx].forEach(targetPath => {
         if (targetPath) {
-          const allowed = settings?.dataFolders.some(folder => folder !== '' && targetPath !== "" && targetPath?.startsWith(folder));
+          const allowed = settings?.dataFolders.some(
+            folder => folder !== '' && targetPath !== '' && targetPath?.startsWith(folder),
+          );
           if (!allowed) {
             throwError(targetPath);
           }

packages/insomnia/src/templating/base-extension-worker.ts

@@ -188,7 +188,7 @@ export default class BaseExtension {
             ?.getSettings()
             .dataFolders.some((folder: string) => folder !== '' && path.startsWith(folder));
           if (!allowed) {
-            throw `Insomnia cannot access the file ‘${path}’. You can adjust this in Preferences → Security.`;
+            throw `Insomnia cannot access the file ‘${path}’.`;
           }
           return fetchFromTemplateWorkerDatabase('readFile', { path, encoding });
         },

packages/insomnia/src/templating/base-extension.ts

@@ -124,7 +124,7 @@ export default class BaseExtension {
             ?.getSettings()
             .dataFolders.some((folder: string) => folder !== '' && path.startsWith(folder));
           if (!allowed) {
-            throw `Insomnia cannot access the file ‘${path}’. You can adjust this in Preferences → Security.`;
+            throw `Insomnia cannot access the file ‘${path}’.`;
           }
 
           const content = await fs.promises.readFile(path);

packages/insomnia/src/ui/components/modals/index.ts

@@ -34,6 +34,7 @@ export function showModal<
   TModalProps extends ModalProps &
     React.RefAttributes<{
       show: (options: any) => void;
+      hide: () => void;
     }>,
 >(modalComponent: ModalComponent<TModalProps>, config?: ModalHandleShowOptions<GetRefHandleFromProps<TModalProps>>) {
   const name = modalComponent.name || modalComponent.displayName;
@@ -42,12 +43,18 @@ export function showModal<
 
   const modalHandle = getModalComponentHandle(name) as unknown as GetRefHandleFromProps<TModalProps>;
 
-  return modalHandle.show(config);
+  modalHandle.show(config);
+  return () => {
+    const modalHandle = getModalComponentHandle(name) as unknown as GetRefHandleFromProps<TModalProps>;
+    if (modalHandle) {
+      modalHandle.hide();
+    }
+  };
 }
 
 export function showError(config: ErrorModalOptions) {
   try {
-    return showModal(ErrorModal, config);
+    showModal(ErrorModal, config);
   } catch (err) {
     console.log('[modal] Cannot show modal', err, config);
   }

packages/insomnia/src/ui/components/rendered-query-string.tsx

@@ -1,5 +1,8 @@
 import classNames from 'classnames';
 import React, { type FC, useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-aria-components';
+
+import { showSettingsModal } from '~/ui/components/modals/settings-modal';
 
 import { database as db } from '../../common/database';
 import * as models from '../../models';
@@ -74,6 +77,7 @@ export const RenderedQueryString: FC<Props> = ({ request }) => {
         });
 
         if (!result) {
+          setTooLong(false);
           return;
         }
 
@@ -136,11 +140,29 @@ export const RenderedQueryString: FC<Props> = ({ request }) => {
     }
   }, [tooLong]);
 
+  const showPreferneces = useCallback(() => {
+    showSettingsModal({ tab: 'general' });
+  }, []);
+
   const className = previewString === defaultPreview ? 'super-duper-faint' : 'selectable force-wrap';
+  // naive way to detect the access file error
+  const settingTip = previewString.includes('Insomnia cannot access');
 
   return (
     <div className="relative flex h-full w-full justify-between gap-[var(--padding-sm)] overflow-auto">
-      <span className={classNames('my-auto', className)}>{previewString}</span>
+      <span className={classNames('my-auto', className)}>
+        {previewString}
+        {settingTip && (
+          <span>
+            {' '}
+            You must specify which directories Insomnia can access in{' '}
+            <Link className="cursor-pointer text-[--color-surprise]" onPress={showPreferneces}>
+              Insomnia’s Preferences → Security
+            </Link>
+            .
+          </span>
+        )}
+      </span>
 
       <CopyButton
         size="small"

packages/insomnia/src/ui/components/request-url-bar.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Button } from 'react-aria-components';
+import { Button, Link } from 'react-aria-components';
 import { useParams, useSearchParams } from 'react-router';
 import * as reactUse from 'react-use';
 
@@ -13,6 +13,7 @@ import {
   useDebugRequestSendActionFetcher,
 } from '~/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.request.$requestId.send';
 import { OneLineEditor, type OneLineEditorHandle } from '~/ui/components/.client/codemirror/one-line-editor';
+import { showSettingsModal } from '~/ui/components/modals/settings-modal';
 
 import { database as db } from '../../common/database';
 import * as models from '../../models';
@@ -71,13 +72,33 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(
         setUndefinedEnvironmentVariables(searchParams.get('undefinedEnvironmentVariables')!);
       } else {
         // only for request render error
-        showModal(AlertModal, {
+        const errorMessage = searchParams.get('error') || '';
+        const settingTip = errorMessage.includes('Insomnia cannot access');
+        const close = showModal(AlertModal, {
           title: 'Unexpected Request Failure',
           message: (
             <div>
               <p>The request failed due to an unhandled error:</p>
               <code className="wide selectable">
-                <pre className="w-full overflow-y-auto text-wrap" >{searchParams.get('error')}</pre>
+                <p className="w-full overflow-y-auto text-wrap">
+                  {searchParams.get('error')}
+                  {settingTip && (
+                    <span>
+                      {' '}
+                      You must specify which directories Insomnia can access in{' '}
+                      <Link
+                        className="cursor-pointer text-[--color-surprise]"
+                        onPress={() => {
+                          close();
+                          showSettingsModal({ tab: 'general' });
+                        }}
+                      >
+                        Insomnia’s Preferences → Security
+                      </Link>
+                      .
+                    </span>
+                  )}
+                </p>
               </code>
             </div>
           ),

packages/insomnia/src/ui/components/settings/general.tsx

@@ -225,10 +225,7 @@ export const General: FC = () => {
           help="If checked, clears the OAuth session every time Insomnia is relaunched."
         />
         <button
-          className="pointer h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
-          style={{
-            padding: 0,
-          }}
+          className="pointer h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-sm] hover:bg-[--hl-xs]"
           onClick={initNewOAuthSession}
         >
           Clear OAuth 2 session

packages/insomnia/src/ui/hooks/use-filtered-requests.ts

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
 
+import type { BaseModel } from '~/models';
+
 import { fuzzyMatchAll } from '../../common/misc';
 import { isRequestGroup } from '../../models/request-group';
 
@@ -8,7 +10,7 @@ interface SearchableFields {
   description: string;
   url?: string;
   _id: string;
-  type: string;
+  type: BaseModel['type'];
 }
 
 function isMatched(filter: string, doc: SearchableFields): boolean {