Allow prompt values to be clear + add actions to template tag plugin API (#2736)

Co-authored-by: Opender Singh <opender.singh@konghq.com>

packages/insomnia-app/app/plugins/context/index.js

@@ -6,6 +6,8 @@ import * as _request from './request';
 import * as _response from './response';
 import * as _store from './store';
 
+export { PluginStore } from './store';
+
 export const app = _app;
 export const data = _data;
 export const network = _network;

packages/insomnia-app/app/plugins/context/store.js

@@ -2,7 +2,16 @@
 import type { Plugin } from '../index';
 import * as models from '../../models';
 
-export function init(plugin: Plugin) {
+export type PluginStore = {
+  hasItem(string): Promise<boolean>,
+  setItem(string, string): Promise<void>,
+  getItem(string): Promise<string | null>,
+  removeItem(string): Promise<void>,
+  clear(): Promise<void>,
+  all(): Promise<Array<{ key: string, value: string }>>,
+};
+
+export function init(plugin: Plugin): { store: PluginStore } {
   return {
     store: {
       async hasItem(key: string): Promise<boolean> {

packages/insomnia-app/app/templating/base-extension.js

@@ -46,6 +46,10 @@ export default class BaseExtension {
     return this._ext.args || [];
   }
 
+  getActions() {
+    return this._ext.actions || [];
+  }
+
   isDeprecated() {
     return this._ext.deprecated || false;
   }

packages/insomnia-app/app/templating/extensions/index.js

@@ -2,6 +2,7 @@
 import type { NunjucksParsedTagArg } from '../utils';
 import type { Request } from '../../models/request';
 import type { Response } from '../../models/response';
+import type { PluginStore } from '../../plugins/context';
 
 export type PluginArgumentValue = string | number | boolean;
 type DisplayName = string | ((args: Array<NunjucksParsedTagArg>) => string);
@@ -75,12 +76,23 @@ export type PluginTemplateTagContext = {
   },
 };
 
+export type PluginTemplateTagActionContext = {
+  store: PluginStore,
+};
+
+export type PluginTemplateTagAction = {
+  name: string,
+  icon?: string,
+  run: (context: PluginTemplateTagActionContext) => Promise<void>,
+};
+
 export type PluginTemplateTag = {
   args: Array<PluginArgument>,
   name: string,
   displayName: DisplayName,
   disablePreview: () => boolean,
   description: string,
+  actions: Array<PluginTemplateTagAction>,
   run: (context: PluginTemplateTagContext, ...arg: Array<any>) => Promise<any> | any,
   deprecated?: boolean,
   validate?: (value: any) => ?string,

packages/insomnia-app/app/templating/index.js

@@ -100,6 +100,7 @@ export async function getTagDefinitions(): Promise<Array<NunjucksParsedTag>> {
       description: ext.getDescription(),
       disablePreview: ext.getDisablePreview(),
       args: ext.getArgs(),
+      actions: ext.getActions(),
     }));
 }
 

packages/insomnia-app/app/templating/utils.js

@@ -2,6 +2,7 @@
 
 import type { PluginArgumentEnumOption } from './extensions';
 import objectPath from 'objectpath';
+import type { PluginStore } from '../plugins/context';
 
 export type NunjucksParsedTagArg = {
   type: 'string' | 'number' | 'boolean' | 'variable' | 'expression' | 'enum' | 'file' | 'model',
@@ -21,9 +22,16 @@ export type NunjucksParsedTagArg = {
   extensions?: Array<string>,
 };
 
+export type NunjucksActionTag = {
+  name: string,
+  icon?: string,
+  run: (context: PluginStore) => Promise<void>,
+};
+
 export type NunjucksParsedTag = {
   name: string,
   args: Array<NunjucksParsedTagArg>,
+  actions: Array<NunjucksActionTag>,
   rawValue?: string,
   displayName?: string,
   description?: string,

packages/insomnia-app/app/ui/components/templating/tag-editor.js

@@ -4,7 +4,11 @@ import autobind from 'autobind-decorator';
 import classnames from 'classnames';
 import clone from 'clone';
 import * as templating from '../../../templating';
-import type { NunjucksParsedTag, NunjucksParsedTagArg } from '../../../templating/utils';
+import type {
+  NunjucksActionTag,
+  NunjucksParsedTag,
+  NunjucksParsedTagArg,
+} from '../../../templating/utils';
 import * as templateUtils from '../../../templating/utils';
 import * as db from '../../../common/database';
 import * as models from '../../../models';
@@ -15,6 +19,8 @@ import type { Workspace } from '../../../models/workspace';
 import type { PluginArgumentEnumOption } from '../../../templating/extensions/index';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown/index';
 import FileInputButton from '../base/file-input-button';
+import { getTemplateTags } from '../../../plugins';
+import * as pluginContexts from '../../../plugins/context';
 
 type Props = {
   handleRender: Function,
@@ -252,6 +258,20 @@ class TagEditor extends React.PureComponent<Props, State> {
     this._update(this.state.tagDefinitions, tagDefinition, null, false);
   }
 
+  async _handleActionClick(action: NunjucksActionTag) {
+    const templateTags = await getTemplateTags();
+    const activeTemplateTag = templateTags.find(({ templateTag }) => {
+      return templateTag.name === this.state.activeTagData.name;
+    });
+
+    const helperContext = {
+      ...pluginContexts.store.init(activeTemplateTag.plugin),
+    };
+
+    await action.run(helperContext);
+    return this._handleRefresh();
+  }
+
   _setSelectRef(n: ?HTMLSelectElement) {
     this._select = n;
 
@@ -626,6 +646,33 @@ class TagEditor extends React.PureComponent<Props, State> {
     );
   }
 
+  renderActions(actions = []) {
+    return (
+      <div className="form-row">
+        <div className="form-control">
+          <label>Actions</label>
+          <div className="form-row">{actions.map(this.renderAction)}</div>
+        </div>
+      </div>
+    );
+  }
+
+  renderAction(action: NunjucksActionTag, index: number) {
+    const name = action.name;
+    const icon = action.icon ? <i className={action.icon} /> : undefined;
+
+    return (
+      <button
+        key={name}
+        className="btn btn--clicky btn--largest"
+        type="button"
+        onClick={() => this._handleActionClick(action)}>
+        {icon}
+        {name}
+      </button>
+    );
+  }
+
   render() {
     const { error, preview, activeTagDefinition, activeTagData, rendering } = this.state;
 
@@ -671,6 +718,9 @@ class TagEditor extends React.PureComponent<Props, State> {
           activeTagDefinition.args.map((argDefinition: NunjucksParsedTagArg, index) =>
             this.renderArg(argDefinition, activeTagData.args, index),
           )}
+
+        {activeTagDefinition?.actions?.length && this.renderActions(activeTagDefinition.actions)}
+
         {!activeTagDefinition && (
           <div className="form-control form-control--outlined">
             <label>

packages/insomnia-app/app/ui/css/components/forms.less

@@ -268,6 +268,10 @@
     min-height: var(--line-height-sm);
     height: unset;
   }
+
+  &.btn--largest {
+    width: 100%;
+  }
 }
 
 *:disabled {

plugins/insomnia-plugin-prompt/index.js

@@ -48,6 +48,16 @@ module.exports.templateTags = [
         defaultValue: true,
       },
     ],
+    actions: [
+      {
+        name: 'Clear',
+        icon: 'fa fa-trash',
+        run: context => {
+          console.log(`[prompt] Clear action`);
+          return context.store.clear();
+        },
+      },
+    ],
     async run(context, title, label, defaultValue, explicitStorageKey, maskText, saveLastValue) {
       if (!title) {
         throw new Error('Title attribute is required for prompt tag');