Allow output Presets to be saved and used

Author: jreyesr

.github/workflows/npm-publish.yml

@@ -4,14 +4,20 @@ on:
   release:
     types: [created]
 
+permissions:
+  id-token: write
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: 16
+          node-version: 24
+          registry-url: 'https://registry.npmjs.org'
+          package-manager-cache: false
       - run: npm ci
       # - run: npm test
       - run: npm run build
@@ -20,13 +26,12 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
+          node-version: 24
+          registry-url: 'https://registry.npmjs.org'
+          package-manager-cache: false
       - run: npm ci
-      - run: npm run build
+      - run: npm run build --if-present
       - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

CHANGELOG.md

@@ -1,3 +1,11 @@
+# v1.6.0
+
+**Date:** 2026/05/26
+
+### New features
+
+- Add stored presets for commonly-used Output settings ([#24](https://github.com/jreyesr/insomnia-plugin-batch-requests/discussions/24)) ([docs](./README.md#output-presets))
+
 # v1.5.1
 
 **Date:** 2025/08/28
@@ -13,7 +21,7 @@
 
 ### New features
 
-- Add a new template tag that can send different files on each request
+- Add a new template tag that can send different files on each request ([docs](./README.md#sending-files))
 
 # v1.4.0
 
@@ -23,7 +31,7 @@
 
 - Add a way to read outputs (that will be written back to the CSV) from the response's headers, status code and request
   time, in addition to the response body as
-  JSON ([#13](https://github.com/jreyesr/insomnia-plugin-batch-requests/pull/13))
+  JSON ([#13](https://github.com/jreyesr/insomnia-plugin-batch-requests/pull/13)) ([docs](./README.md#sources-of-output-data))
 
 # v1.3.0
 

README.md

@@ -115,6 +115,22 @@ Since `v1.4.0`, it's possible to extract data from several places in the respons
 
 The source of data is chosen in the center dropdown of each Output. If required, the right-hand text field will appear and must contain something, otherwise it'll be hidden.
 
+### Output presets
+
+Since `v1.6.0`, it's possible to store and load different settings for the Outputs section (see [#24](https://github.com/jreyesr/insomnia-plugin-batch-requests/discussions/24)).
+For example, if you usually load CSV files that have the same columns, call the same Request and extract the same fields
+to the same CSV columns, that can be stored into a Preset for subsequent reuse. This is controlled by the following buttons:
+
+![img.png](images/presets.png)
+
+* To store a Preset for later, first configure the desired Outputs (CSV column + source + JSONPath query or header name). 
+  Then, click the Save preset button and give the preset a name. This will record the currently configured Outputs
+* To load a Preset, choose a CSV file (otherwise the preset picker won't be enabled), and then select the desired preset
+  from the list. If you haven't saved a preset, the picker won't activate. Once you choose a preset, the configuration
+  in the Outputs will be overwritten with what was stored in the preset.
+* To delete a Preset, first load it with the picker, and then click the Delete button to the right of the preset picker.
+  If you haven't chosen a preset, the button will be disabled.
+
 ### Extra settings
 
 There are two additional options that can be set when sending batch requests. They appear in the **Run Config** section, above the progress bar:

__tests__/BatchDialog.test.js

@@ -6,6 +6,7 @@ import BatchDialog from '../components/BatchDialog'
 
 
 const mockAlert = jest.fn();
+const mockAllItems = jest.fn();
 const mockGetItem = jest.fn();
 const mockSetItem = jest.fn();
 const mockRemoveItem = jest.fn();
@@ -19,6 +20,7 @@ utils.selectFile = jest.fn();
 
 beforeEach(() => {
   mockGetItem.mockReturnValue(JSON.stringify({defaultDelay: 0.1}));
+  mockAllItems.mockReturnValue([])
   utils.readCsv.mockImplementation(originalReadCsv);
   utils.selectFile.mockImplementation(originalSelectFile);
 })
@@ -30,6 +32,7 @@ afterEach(() => {
 const mockContext = {
   store: {
     hasItem: jest.fn(k => true),
+    all: mockAllItems,
     getItem: mockGetItem,
     setItem: mockSetItem,
     removeItem: mockRemoveItem,
@@ -67,7 +70,7 @@ it('does not enable the buttons on load', async () => {
   await waitFor(() => expect(delayField).toHaveValue(0.1));
 
   expect(getByText(/run!/i)).toBeDisabled();
-  expect(getByText(/save/i)).toBeDisabled();
+  expect(getByText(/^save$/i)).toBeDisabled();
 });
 
 it('prompts the user to choose a file', async () => {

__tests__/BatchDialogSettings.test.js

@@ -63,7 +63,7 @@ it('rejects negative numbers', async () => {
 
   await user.clear(delayField);
   await user.type(delayField, "-0.1")
-  expect(delayField).toHaveValue(0.1);
+  expect(delayField).toHaveValue(0.1); // The field rejects the - so it becomes 0.1
 });
 
 it("doesn't enable the Save button when loading", async () => {

__tests__/OutputFieldsChooser.test.js

@@ -5,7 +5,7 @@ import OutputFieldsChooser from '../components/OutputFieldsChooser'
 
 it('displays default UI', () => {
   const {container} = render(
-    <OutputFieldsChooser colNames={["a", "b"]} />,
+    <OutputFieldsChooser colNames={["a", "b"]} presets={[]}/>,
   );
 
   expect(container).toHaveTextContent("Add");
@@ -14,7 +14,7 @@ it('displays default UI', () => {
 it('can add a field', async () => {
   const user = userEvent.setup();
   const {getByText, getAllByTestId} = render(
-    <OutputFieldsChooser colNames={["a", "b"]} onChange={jest.fn()} />,
+    <OutputFieldsChooser colNames={["a", "b"]} onChange={jest.fn()} presets={[]}/>,
   );
 
   await user.click(getByText("Add"));
@@ -26,7 +26,7 @@ it('notifies parent when field is added', async () => {
   const onChange = jest.fn();
   const user = userEvent.setup();
   const {getByText} = render(
-    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} />,
+    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} presets={[]}/>,
   );
 
   await user.click(getByText("Add"));
@@ -38,7 +38,7 @@ it('notifies parent when field is deleted', async () => {
   const onChange = jest.fn();
   const user = userEvent.setup();
   const {getByText, getByTestId, queryAllByTestId} = render(
-    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} />,
+    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} presets={[]}/>,
   );
   await user.click(getByText("Add"));
   onChange.mockClear();
@@ -54,7 +54,7 @@ it('notifies parent when field is updated', async () => {
   const onChange = jest.fn();
   const user = userEvent.setup();
   const {getByText, getByTestId} = render(
-    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} />,
+    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} presets={[]}/>,
   );
   await user.click(getByText("Add"));
   onChange.mockClear();
@@ -70,7 +70,7 @@ it("tracks the output's context", async () => {
   const onChange = jest.fn();
   const user = userEvent.setup();
   const {getByText, getByTestId} = render(
-    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} />,
+    <OutputFieldsChooser colNames={["a", "b"]} onChange={onChange} presets={[]}/>,
   );
   await user.click(getByText("Add"));
   onChange.mockClear();

components/BatchDialog.js

@@ -1,7 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { stringify } from 'csv-stringify/sync';
-
-import { writeFile, readCsv, readSettings, makeRequest } from '../utils';
+import React, {useCallback, useEffect, useState} from 'react';
+import {stringify} from 'csv-stringify/sync';
+
+import {
+  writeFile,
+  readCsv,
+  readSettings,
+  makeRequest,
+  getAllPresets,
+  savePreset,
+  getPreset,
+  deletePreset
+} from '../utils';
 import Queue from "queue-promise"
 
 import SampleTable from './SampleTable';
@@ -23,15 +32,28 @@ export default function BatchDialog({context, request}) {
   const [delay, setDelay] = useState(0);
   const [parallelism, setParallelism] = useState(1);
 
+  const [presets, setPresets] = useState([])
+  const [loadedPreset, setLoadedPreset] = useState(null)
+
   // Load default delay from plugin settings on mount
   useEffect(() => {
     async function loadSettings() {
       const settings = await readSettings(context.store);
       setDelay(parseFloat(settings.defaultDelay ?? 0))
     }
+
     loadSettings();
   }, [])
 
+  async function updatePresets() {
+    setPresets(await getAllPresets(context.store))
+  }
+
+  // fill up the presets on component load
+  useEffect(() => {
+    updatePresets()
+  }, [])
+
   const onFileChosen = async (path) => {
     setCsvPath(path);
     const {headers, results} = await readCsv(path);
@@ -57,10 +79,10 @@ export default function BatchDialog({context, request}) {
       interval: 0,
       start: false,
     });
-    
+
     // Hook a promise to the queue's "end" event
     const isDone = new Promise(resolve => queue.on("end", resolve))
-    for(const [i, row] of csvData.entries()) {
+    for (const [i, row] of csvData.entries()) {
       queue.enqueue(() => makeRequest(context, request, i, row, delay, outputConfig, setSent, setCsvData))
     }
 
@@ -76,10 +98,28 @@ export default function BatchDialog({context, request}) {
     setOutputConfig(x)
   }
 
-  console.debug("canRun", outputConfig.map(x => `${x.name} - ${x.jsonPath} - ${x.context} - ${Boolean(x.name && (x.jsonPath || ["statusCode", "reqTime"].includes(x.context))) ? "T" : "F"}`))
+  const onSavePresetButtonClicked = async () => {
+    const presetName = await context.app.prompt("Preset name", {
+      label: "Provide a name for the new saved preset",
+      defaultValue: `New preset ${new Date().toDateString()}`,
+    })
+    await savePreset(context.store, presetName, outputConfig)
+    updatePresets()
+  }
+
+  const onPresetSelectedForLoad = async ({target: {value}}) => {
+    const preset = await getPreset(context.store, value)
+    setOutputConfig(preset.outputs)
+    setLoadedPreset(preset.outputs) // this notifies the child OutputFieldsChooser via an effect
+  }
+
+  const onDeletePresetButtonClicked = async (presetName) => {
+    await deletePreset(context.store, presetName)
+    updatePresets()
+  }
 
   const onChangeDelay = ({target: {value}}) => {
-    if(value < 0) return;
+    if (value < 0) return;
     setDelay(value)
   }
 
@@ -89,21 +129,26 @@ export default function BatchDialog({context, request}) {
     </FormRow>
     {csvData.length ? (
       <FormRow label="Sample data" insideLabel={false}>
-        <SampleTable columnNames={csvHeaders} data={csvData} />
+        <SampleTable columnNames={csvHeaders} data={csvData}/>
       </FormRow>
     ) : <p>Choose a file above to preview it!</p>}
 
-    <OutputFieldsChooser colNames={csvHeaders} onChange={onChangeOutputFields} />
+    <OutputFieldsChooser colNames={csvHeaders} presets={presets} onChange={onChangeOutputFields}
+                         onSavePreset={onSavePresetButtonClicked} onLoadPreset={onPresetSelectedForLoad}
+                         loadedPreset={loadedPreset}
+                         onDeletePreset={onDeletePresetButtonClicked}/>
 
     <FormRow label="Run config">
-      <DelaySelector value={delay} onChange={onChangeDelay}/>
-      <ParallelSelector value={parallelism} onChange={({target: {value}}) => setParallelism(value)}/>
+      <div style={{display: "flex", flexDirection: "row", gap: "1em"}}>
+        <DelaySelector value={delay} onChange={onChangeDelay}/>
+        <ParallelSelector value={parallelism} onChange={({target: {value}}) => setParallelism(value)}/>
+      </div>
     </FormRow>
 
     <FormRow label="Progress">
-      <ProgressBar bgcolor="#ff6b6b" completed={sent * 100 / totalRequests} text={`${sent}/${totalRequests}`} />
+      <ProgressBar bgcolor="#ff6b6b" completed={sent * 100 / totalRequests} text={`${sent}/${totalRequests}`}/>
     </FormRow>
-    
+
     <ActionButton title="Run!" icon="fa-person-running" onClick={onRun} disabled={!canRun}/>
     <ActionButton title="Save" icon="fa-save" onClick={saveCsv} disabled={!canRun} style={{marginLeft: 5}}/>
   </React.Fragment>);

components/DelaySelector.js

@@ -1,5 +1,5 @@
 export default function DelaySelector({value, onChange}) {
-  return <label>
+  return <label style={{flexGrow: 1}}>
     Delay in seconds
     <input
       type="number"

components/OutputFieldsChooser.js

@@ -1,10 +1,10 @@
-import React, { useCallback, useState } from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 
 import ActionButton from './ActionButton';
 import FormRow from './FormRow';
 import OutputField from './OutputField';
 
-export default function OutputFieldsChooser({colNames, onChange}) {
+export default function OutputFieldsChooser({colNames, presets, onChange, onSavePreset, onLoadPreset, loadedPreset, onDeletePreset}) {
   const [outputs, setOutputs] = useState([]);
 
   const addNew = useCallback(() => {
@@ -20,22 +20,50 @@ export default function OutputFieldsChooser({colNames, onChange}) {
     setOutputs(cloned);
     onChange(cloned);
   }, [outputs, setOutputs, onChange]);
-  
+
   const deleteField = useCallback((i) => () => {
     let cloned = JSON.parse(JSON.stringify(outputs))
     cloned.splice(i, 1); // Remove one element at position i
     setOutputs(cloned);
     onChange(cloned);
   }, [outputs, setOutputs, onChange]);
 
+  // runs every time parent loads a new preset
+  useEffect(() => {
+    if (!loadedPreset) return
+
+    setOutputs(loadedPreset)
+  }, [setOutputs, loadedPreset]);
+
+  const [selectedPreset, setSelectedPreset] = useState("")
+  const onSelectedPresetChange = useCallback((ev) => {
+    setSelectedPreset(ev.target.value)
+    onLoadPreset(ev)
+  }, [setSelectedPreset, onLoadPreset])
+
   return <FormRow label="Outputs">
-    {outputs.map((o, i) => 
-      <OutputField key={i} 
-        options={colNames} 
-        name={o.name} context={o.context} jsonPath={o.jsonPath} 
-        onChange={updateField(i)} onDelete={deleteField(i)}
+    {outputs.map((o, i) =>
+      <OutputField key={i}
+                   options={colNames}
+                   name={o.name} context={o.context} jsonPath={o.jsonPath}
+                   onChange={updateField(i)} onDelete={deleteField(i)}
       />
     )}
-    <ActionButton title="Add" icon="fa-plus" onClick={addNew}/>
+
+    <div style={{display: "flex", flexDirection: "row", gap: "1em"}}>
+      <ActionButton title="Add" icon="fa-plus" onClick={addNew}/>
+      <ActionButton title="Save preset" icon="fa-upload" onClick={onSavePreset} disabled={outputs.length === 0}/>
+      <select
+        value={selectedPreset}
+        onChange={onSelectedPresetChange}
+        data-testid="loadPreset"
+        disabled={presets.length === 0 || colNames.length === 0}
+        style={{width: "auto"}}
+      >
+        <option value="">Load preset...</option>
+        {presets.map(o => <option key={o.name} value={o.name}>{o.name}</option>)}
+      </select>
+      <ActionButton title="" icon="fa-trash" onClick={() => onDeletePreset(selectedPreset)} disabled={presets.length === 0 || selectedPreset === ""}/>
+    </div>
   </FormRow>
 }