Merge pull request #7 from jreyesr/feat/default-delay

Add configuration option for default delay

README.md

@@ -43,6 +43,21 @@ On the plugin dialog (see the image below), you should:
 
 ![A screenshot showing the main plugin UI. From top to bottom, there is a button to load a file, a table showing a preview of the data, a series of fields to specify output data, and a button to run the request multiple times](images/runner_ui.png)
 
+### Configuration
+
+Since `v1.2.0`, there is a Global Configuration dialog in which you can select a default request delay, in case you usually work with servers that require a delay between requests.
+
+1. Click on the dropdown to the right of the workspace name.
+2. Click the `Batch Requests: Settings` option.
+3. A dialog will open, containing a number field called `Default delay`. Set its value to your preferred delay.
+4. Click the Save button. It will only be enabled after you make a change to the field.
+5. Dismiss the Global Configuration dialog.
+6. From now on, whenever you open the main plugin dialog by right-clicking a request, the Delay field will be prefilled with your preferred delay. You can always adjust it.
+
+![a screenshot showing the workspace menu, with a new option for the plugin's configuration](./images/settings_1.png)
+
+![a screenshot showing the configuration dialog, with a field for the default delay and a Save button](./images/settings_2.png)
+
 ## Development
 
 1. Identify your Insomnia plugin folder. On Ubuntu, it should be `~/.config/Insomnia/plugins`. Alternatively, open Insomnia, select the `Application>Preferences` menu, go to the Plugins tab, then click the `Reveal Plugins Folder` button.

components/BatchDialog.js

@@ -1,8 +1,8 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import csv from 'csvtojson';
 import { stringify } from 'csv-stringify/sync';
 
-import { applyJsonPath, readResponseFromFile, writeFile } from '../utils';
+import { applyJsonPath, readResponseFromFile, writeFile, readSettings } from '../utils';
 
 import SampleTable from './SampleTable';
 import FormRow from './FormRow';
@@ -20,6 +20,15 @@ export default function BatchDialog({context, request}) {
   const [sent, setSent] = useState(0);
   const [delay, setDelay] = useState(0);
 
+  // Load default delay from plugin settings on mount
+  useEffect(() => {
+    async function loadSettings() {
+      const settings = await readSettings(context.store);
+      setDelay(parseFloat(settings.defaultDelay ?? 0))
+    }
+    loadSettings();
+  }, [])
+
   const onFileChosen = (path => {
     setCsvPath(path);
     csv()

components/BatchDialogSettings.js

@@ -0,0 +1,48 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import ActionButton from './ActionButton';
+import DelaySelector from './DelaySelector';
+import FormRow from './FormRow';
+
+import { readSettings, writeSettings } from '../utils';
+
+export default function BatchDialogSettings({context}) {
+  const [isDirty, setIsDirty] = useState(false);
+  const setDirty = () => setIsDirty(true);
+
+  const [defaultDelay, setDefaultDelay] = useState(0);
+  // When mounting component, read from storage to init state
+  useEffect(() => {
+    async function loadSettings() {
+      const settings = await readSettings(context.store);
+      setDefaultDelay(parseFloat(settings.defaultDelay ?? 0));
+    }
+    loadSettings();
+  }, [])
+
+  const saveSettings = useCallback(async () => {
+    await writeSettings(context.store, {
+      defaultDelay: defaultDelay,
+    });
+    context.app.alert("Success!", "Settings saved")
+    setIsDirty(false);
+
+    // Refetch data from store, to ensure that it was saved
+    const settings = await readSettings(context.store);
+    setDefaultDelay(parseFloat(settings.defaultDelay));
+  }, [defaultDelay]);
+
+  const onChangeDelay = ({target: {value}}) => {
+    if(value < 0) return;
+    setDefaultDelay(parseFloat(value));
+    setDirty();
+  }
+
+  return (<React.Fragment>
+    <FormRow label="Default delay">
+      <DelaySelector value={defaultDelay} onChange={onChangeDelay}/>
+    </FormRow>
+
+    <ActionButton title="Save" icon="fa-save" onClick={saveSettings} disabled={!isDirty}/>
+  </React.Fragment>);
+}

main.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import BatchDialog from './components/BatchDialog';
+import BatchDialogSettings from './components/BatchDialogSettings';
 import { templateTags } from './tags';
 
 module.exports.requestActions = [{
@@ -18,4 +19,19 @@ module.exports.requestActions = [{
   },
 }];
 
+module.exports.workspaceActions = [{
+  label: 'Batch Requests: Settings',
+  icon: 'fa-cog',
+  action: async (context) => {
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    root.render(<BatchDialogSettings context={context}/>)
+
+    context.app.dialog('Batch Requests: Settings', container, {
+      onHide: () => root.unmount(),
+    });
+  },
+}];
+
+
 module.exports.templateTags = templateTags;

utils.js

@@ -31,4 +31,12 @@ export const applyJsonPath = (jsonpath, data) => {
   return JSONPath({path: jsonpath, json: data, flatten: true, wrap: false});
 }
 
-export const readResponseFromFile = (path) => fs.readFileSync(path, {encoding: "utf-8"})
+export const readResponseFromFile = (path) => fs.readFileSync(path, {encoding: "utf-8"})
+
+const STORE_KEY = "settings_global";
+export const readSettings = async (store) => {
+  if(await store.hasItem(STORE_KEY)) return JSON.parse(await store.getItem(STORE_KEY))
+  else return {}
+};
+
+export const writeSettings = async (store, newSettings) => await store.setItem(STORE_KEY, JSON.stringify(newSettings));