refactor: interactive message

Author: xiaodemen

packages/insomnia/src/common/constants.ts

@@ -549,3 +549,5 @@ export const RESPONSE_CODE_REASONS: Record<number, string> = {
 
 // (ms) curently server timeout is 30s
 export const INSOMNIA_FETCH_TIME_OUT = 30_000;
+
+export const PREF_SECURITY = 'Insomnia’s Preferences → Security';

packages/insomnia/src/common/interactive-messages.ts

@@ -0,0 +1,31 @@
+import { PREF_SECURITY } from '~/common/constants';
+import { showSettingsModal } from '~/ui/components/modals/settings-modal';
+
+const interactives = [{ text: PREF_SECURITY, handler: () => showSettingsModal({ tab: 'general' }) }];
+
+export function buildInteractiveMessage(message: string) {
+  const parts = [];
+  let prev = '';
+  for (let i = 0; i < message.length; i++) {
+    let matched = false;
+    for (const { text, handler } of interactives) {
+      matched = message.startsWith(text, i);
+      if (matched) {
+        if (prev) {
+          parts.push({ text: prev });
+          prev = '';
+        }
+        parts.push({ text, handler });
+        i += text.length - 1;
+        break;
+      }
+    }
+    if (!matched) {
+      prev += message[i];
+    }
+  }
+  if (prev) {
+    parts.push({ text: prev });
+  }
+  return parts;
+}

packages/insomnia/src/common/validators.ts

@@ -1,3 +1,5 @@
+import { PREF_SECURITY } from '~/common/constants';
+
 import type { CaCertificate } from '../models/ca-certificate';
 import type { ClientCertificate } from '../models/client-certificate';
 import type { Settings } from '../models/settings';
@@ -14,7 +16,7 @@ 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}’.`;
+      throw `Insomnia cannot access the file ‘${fileName}’. You must specify which directories Insomnia can access in ${PREF_SECURITY}.`;
     }
   };
 

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

@@ -1,3 +1,5 @@
+import { PREF_SECURITY } from '~/common/constants';
+
 import packageJson from '../../package.json';
 import type { CloudProviderCredential } from '../models/cloud-credential';
 import type { Request } from '../models/request';
@@ -188,7 +190,7 @@ export default class BaseExtension {
             ?.getSettings()
             .dataFolders.some((folder: string) => folder !== '' && path.startsWith(folder));
           if (!allowed) {
-            throw `Insomnia cannot access the file ‘${path}’.`;
+            throw `Insomnia cannot access the file ‘${path}’. You must specify which directories Insomnia can access in ${PREF_SECURITY}.`;
           }
           return fetchFromTemplateWorkerDatabase('readFile', { path, encoding });
         },

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

@@ -5,6 +5,8 @@ import os from 'node:os';
 
 import iconv from 'iconv-lite';
 
+import { PREF_SECURITY } from '~/common/constants';
+
 import { database as db } from '../common/database';
 import * as models from '../models/index';
 import type { Request } from '../models/request';
@@ -124,7 +126,7 @@ export default class BaseExtension {
             ?.getSettings()
             .dataFolders.some((folder: string) => folder !== '' && path.startsWith(folder));
           if (!allowed) {
-            throw `Insomnia cannot access the file ‘${path}’.`;
+            throw `Insomnia cannot access the file ‘${path}’. You must specify which directories Insomnia can access in ${PREF_SECURITY}.`;
           }
 
           const content = await fs.promises.readFile(path);

packages/insomnia/src/ui/components/modals/nunjucks-modal.tsx

@@ -75,6 +75,7 @@ export const NunjucksModal = forwardRef<NunjucksModalHandle, ModalProps & Props>
         defaultValue={template}
         workspace={workspace}
         editorId={state.editorId}
+        close={() => modalRef.current?.hide()}
       />
     );
   } else {

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

@@ -2,7 +2,7 @@ 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 { buildInteractiveMessage } from '~/common/interactive-messages';
 
 import { database as db } from '../../common/database';
 import * as models from '../../models';
@@ -140,27 +140,28 @@ 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');
+  const messages = previewString.includes('Insomnia cannot access')
+    ? buildInteractiveMessage(previewString)
+    : [{ text: previewString }];
 
   return (
     <div className="relative flex h-full w-full justify-between gap-[var(--padding-sm)] overflow-auto">
       <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
+        {messages.map(({ text, handler }, index) =>
+          handler ? (
+            <Link
+              className="cursor-pointer text-[--color-surprise]"
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              onPress={handler}
+            >
+              {text}
             </Link>
-            .
-          </span>
+          ) : (
+            text
+          ),
         )}
       </span>
 

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

@@ -3,6 +3,7 @@ import { Button, Link } from 'react-aria-components';
 import { useParams, useSearchParams } from 'react-router';
 import * as reactUse from 'react-use';
 
+import { buildInteractiveMessage } from '~/common/interactive-messages';
 import { useRootLoaderData } from '~/root';
 import {
   type ConnectActionParams,
@@ -73,32 +74,34 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(
       } else {
         // only for request render error
         const errorMessage = searchParams.get('error') || '';
-        const settingTip = errorMessage.includes('Insomnia cannot access');
+        const messages = errorMessage.includes('Insomnia cannot access')
+          ? buildInteractiveMessage(errorMessage)
+          : [{ text: errorMessage }];
         const close = showModal(AlertModal, {
           title: 'Unexpected Request Failure',
           message: (
             <div>
               <p>The request failed due to an unhandled error:</p>
               <code className="wide selectable">
-                <p className="w-full overflow-y-auto text-wrap">
-                  {searchParams.get('error')}
-                  {settingTip && (
-                    <span>
-                      {' '}
-                      You must specify which directories Insomnia can access in{' '}
+                <div className="w-full overflow-y-auto text-wrap">
+                  {messages.map(({ text, handler }, index) =>
+                    handler ? (
                       <Link
                         className="cursor-pointer text-[--color-surprise]"
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
                         onPress={() => {
                           close();
-                          showSettingsModal({ tab: 'general' });
+                          handler();
                         }}
                       >
-                        Insomnia’s Preferences → Security
+                        {text}
                       </Link>
-                      .
-                    </span>
+                    ) : (
+                      text
+                    ),
                   )}
-                </p>
+                </div>
               </code>
             </div>
           ),

packages/insomnia/src/ui/components/templating/tag-editor.tsx

@@ -2,9 +2,11 @@ import classnames from 'classnames';
 import clone from 'clone';
 import { localTemplateTags } from 'insomnia/src/templating/local-template-tags';
 import React, { type FC, useCallback, useEffect, useState } from 'react';
-import { Button } from 'react-aria-components';
+import { Button, Link } from 'react-aria-components';
 import * as reactUse from 'react-use';
 
+import { buildInteractiveMessage } from '~/common/interactive-messages';
+
 import { database as db } from '../../../common/database';
 import { docsAfterResponseScript } from '../../../common/documentation';
 import { delay, fnOrString } from '../../../common/misc';
@@ -33,6 +35,7 @@ interface Props {
   onChange: (...args: any[]) => any;
   workspace: Workspace;
   editorId?: string;
+  close: () => void;
 }
 
 interface State {
@@ -251,7 +254,31 @@ export const TagEditor: FC<Props> = props => {
   }
   let previewElement;
   if (error) {
-    previewElement = <textarea className="danger" value={error || 'Error'} readOnly rows={5} />;
+    if (error.startsWith('Insomnia cannot access')) {
+      previewElement = (
+        <div className="danger min-h-[115px] rounded-md border border-solid border-[var(--hl-md)] bg-[var(--hl-xxs)] p-[var(--padding-sm)]">
+          {buildInteractiveMessage(error).map(({ text, handler }, index) =>
+            handler ? (
+              <Link
+                className="cursor-pointer text-[--color-surprise]"
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                onPress={() => {
+                  props.close();
+                  handler();
+                }}
+              >
+                {text}
+              </Link>
+            ) : (
+              text
+            ),
+          )}
+        </div>
+      );
+    } else {
+      previewElement = <textarea className="danger" value={error || 'Error'} readOnly rows={5} />;
+    }
   } else if (rendering) {
     previewElement = <textarea value="rendering..." readOnly rows={5} />;
   } else {