URL handler to install plugins (#1930)

packages/insomnia-app/app/ui/components/modals/ask-modal.js

@@ -15,6 +15,7 @@ class AskModal extends PureComponent {
       message: '',
       yesText: 'Yes',
       noText: 'No',
+      loading: false,
     };
   }
 
@@ -26,10 +27,17 @@ class AskModal extends PureComponent {
     this.yesButton = n;
   }
 
-  _handleYes() {
-    this.hide();
-    this._doneCallback && this._doneCallback(true);
+  async _handleYes() {
+    this.setState({ loading: true });
+
+    if (this._doneCallback) {
+      // Wait for the callback to finish before closing
+      await this._doneCallback(true);
+    }
+
     this._promiseCallback(true);
+
+    this.hide();
   }
 
   _handleNo() {
@@ -52,6 +60,7 @@ class AskModal extends PureComponent {
       message: message || 'No message provided',
       yesText: yesText || 'Yes',
       noText: noText || 'No',
+      loading: false,
     });
 
     this.modal.show();
@@ -66,7 +75,7 @@ class AskModal extends PureComponent {
   }
 
   render() {
-    const { message, title, yesText, noText } = this.state;
+    const { message, title, yesText, noText, loading } = this.state;
 
     return (
       <Modal noEscape ref={this._setModalRef} closeOnKeyCodes={[13]}>
@@ -77,8 +86,12 @@ class AskModal extends PureComponent {
             <button className="btn" onClick={this._handleNo}>
               {noText}
             </button>
-            <button ref={this._setYesButtonRef} className="btn" onClick={this._handleYes}>
-              {yesText}
+            <button
+              ref={this._setYesButtonRef}
+              className="btn"
+              onClick={this._handleYes}
+              disabled={loading}>
+              {loading && <i className="fa fa-refresh fa-spin" />} {yesText}
             </button>
           </div>
         </ModalFooter>

packages/insomnia-app/app/ui/components/modals/settings-modal.js

@@ -22,6 +22,7 @@ import * as session from '../../../account/session';
 
 export const TAB_INDEX_EXPORT = 1;
 export const TAB_INDEX_SHORTCUTS = 3;
+export const TAB_INDEX_PLUGINS = 5;
 
 @autobind
 class SettingsModal extends PureComponent {

packages/insomnia-app/app/ui/redux/modules/global.js

@@ -14,6 +14,8 @@ import * as models from '../../../models';
 import SelectModal from '../../components/modals/select-modal';
 import { showError, showModal } from '../../components/modals/index';
 import * as db from '../../../common/database';
+import SettingsModal, { TAB_INDEX_PLUGINS } from '../../components/modals/settings-modal';
+import install from '../../../plugins/install';
 
 const LOCALSTORAGE_PREFIX = `insomnia::meta`;
 
@@ -27,6 +29,7 @@ const COMMAND_ALERT = 'app/alert';
 const COMMAND_LOGIN = 'app/auth/login';
 const COMMAND_TRIAL_END = 'app/billing/trial-end';
 const COMMAND_IMPORT_URI = 'app/import';
+const COMMAND_PLUGIN_INSTALL = 'plugins/install';
 
 // ~~~~~~~~ //
 // REDUCERS //
@@ -107,6 +110,36 @@ export function newCommand(command, args) {
         });
         dispatch(importUri(args.workspaceId, args.uri));
         break;
+      case COMMAND_PLUGIN_INSTALL:
+        showModal(AskModal, {
+          title: 'Plugin Install',
+          message: (
+            <React.Fragment>
+              Do you want to install <code>{args.name}</code>?
+            </React.Fragment>
+          ),
+          yesText: 'Install',
+          noText: 'Cancel',
+          onDone: async isYes => {
+            if (!isYes) {
+              return;
+            }
+
+            try {
+              await install(args.name);
+              showModal(SettingsModal, TAB_INDEX_PLUGINS);
+            } catch (err) {
+              showError({
+                title: 'Plugin Install',
+                message: 'Failed to install plugin',
+                error: err.message,
+              });
+            }
+          },
+        });
+        break;
+      default:
+      // Nothing
     }
   };
 }