Support for pinned requests

packages/insomnia-app/app/common/hotkeys.js

@@ -144,6 +144,8 @@ export const hotKeyRefs = {
 
   REQUEST_SHOW_DUPLICATE: defineHotKey('request_showDuplicate', 'Duplicate Request'),
 
+  REQUEST_TOGGLE_PIN: defineHotKey('request_togglePin', 'Pin/Unpin Request'),
+
   CLOSE_DROPDOWN: defineHotKey('closeDropdown', 'Close Dropdown'),
 
   CLOSE_MODAL: defineHotKey('closeModal', 'Close Modal'),
@@ -288,6 +290,11 @@ const defaultRegistry: HotKeyRegistry = {
     keyComb(true, false, false, false, keyboardKeys.d.keyCode),
   ),
 
+  [hotKeyRefs.REQUEST_TOGGLE_PIN.id]: keyBinds(
+    keyComb(false, false, false, true, keyboardKeys.p.keyCode),
+    keyComb(true, false, true, false, keyboardKeys.p.keyCode),
+  ),
+
   [hotKeyRefs.CLOSE_DROPDOWN.id]: keyBinds(
     keyComb(false, false, false, false, keyboardKeys.esc.keyCode),
     keyComb(false, false, false, false, keyboardKeys.esc.keyCode),

packages/insomnia-app/app/ui/components/dropdowns/request-actions-dropdown.js

@@ -37,9 +37,7 @@ class RequestActionsDropdown extends PureComponent {
   }
 
   _handleSetRequestPinned() {
-    if (this._canPin()) {
-      this.props.handleSetRequestPinned(this.props.request, !this.props.isPinned);
-    }
+    this.props.handleSetRequestPinned(this.props.request, !this.props.isPinned);
   }
 
   _handleRemove() {
@@ -64,11 +62,10 @@ class RequestActionsDropdown extends PureComponent {
         <DropdownButton>
           <i className="fa fa-caret-down" />
         </DropdownButton>
-        {this._canPin() && (
-          <DropdownItem onClick={this._handleSetRequestPinned}>
-            <i className="fa fa-thumb-tack" /> {this.props.isPinned ? 'Unpin' : 'Pin'}
-          </DropdownItem>
-        )}
+        <DropdownItem onClick={this._handleSetRequestPinned}>
+          <i className="fa fa-thumb-tack" /> {this.props.isPinned ? 'Unpin' : 'Pin'}
+          <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_TOGGLE_PIN.id]} />
+        </DropdownItem>
         <DropdownItem onClick={this._handleDuplicate}>
           <i className="fa fa-copy" /> Duplicate
           <DropdownHint keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_SHOW_DUPLICATE.id]} />
@@ -106,9 +103,7 @@ RequestActionsDropdown.propTypes = {
   isPinned: PropTypes.bool.isRequired,
   request: PropTypes.object.isRequired,
   hotKeyRegistry: PropTypes.object.isRequired,
-
-  // Optional
-  handleSetRequestPinned: PropTypes.func,
+  handleSetRequestPinned: PropTypes.func.isRequired,
 };
 
 export default RequestActionsDropdown;

packages/insomnia-app/app/ui/components/settings/shortcuts.js

@@ -32,6 +32,7 @@ const HOT_KEY_DEFS: Array<HotKeyDefinition> = [
   hotKeyRefs.REQUEST_SHOW_DELETE,
   hotKeyRefs.REQUEST_SHOW_CREATE_FOLDER,
   hotKeyRefs.REQUEST_SHOW_DUPLICATE,
+  hotKeyRefs.REQUEST_TOGGLE_PIN,
   hotKeyRefs.REQUEST_SHOW_GENERATE_CODE_EDITOR,
   hotKeyRefs.SHOW_COOKIES_EDITOR,
   hotKeyRefs.ENVIRONMENT_SHOW_EDITOR,

packages/insomnia-app/app/ui/components/sidebar/sidebar-children.js

@@ -16,6 +16,11 @@ type Child = {
   pinned: boolean,
 };
 
+export type SidebarChildObjects = {
+  pinned: Array<Child>,
+  all: Array<Child>,
+};
+
 type Props = {
   // Required
   handleActivateRequest: Function,
@@ -29,7 +34,7 @@ type Props = {
   handleGenerateCode: Function,
   handleCopyAsCurl: Function,
   moveDoc: Function,
-  childObjects: Array<Child>,
+  childObjects: SidebarChildObjects,
   workspace: Workspace,
   filter: string,
   hotKeyRegistry: HotKeyRegistry,
@@ -39,7 +44,7 @@ type Props = {
 };
 
 class SidebarChildren extends React.PureComponent<Props> {
-  _renderChildren(children: Array<Child>): React.Node {
+  _renderChildren(children: Array<Child>, isInPinnedList: boolean): React.Node {
     const {
       filter,
       handleCreateRequest,
@@ -61,15 +66,15 @@ class SidebarChildren extends React.PureComponent<Props> {
     const activeRequestId = activeRequest ? activeRequest._id : 'n/a';
 
     return children.map(child => {
-      if (child.hidden) {
+      if (!isInPinnedList && child.hidden) {
         return null;
       }
 
       if (child.doc.type === models.request.type) {
         return (
           <SidebarRequestRow
             key={child.doc._id}
-            filter={filter || ''}
+            filter={isInPinnedList ? '' : filter || ''}
             moveDoc={moveDoc}
             handleActivateRequest={handleActivateRequest}
             handleSetRequestPinned={handleSetRequestPinned}
@@ -104,7 +109,7 @@ class SidebarChildren extends React.PureComponent<Props> {
       }
 
       const isActive = hasActiveChild(child.children);
-      const children = this._renderChildren(child.children);
+      const children = this._renderChildren(child.children, isInPinnedList);
 
       return (
         <SidebarRequestGroupRow
@@ -129,26 +134,24 @@ class SidebarChildren extends React.PureComponent<Props> {
     });
   }
 
-  _renderList(children: Array<Child>): React.Node {
+  _renderList(children: Array<Child>, pinnedList: boolean): React.Node {
     return (
       <ul className="sidebar__list sidebar__list-root theme--sidebar__list">
-        {this._renderChildren(children)}
+        {this._renderChildren(children, pinnedList)}
       </ul>
     );
   }
 
   render() {
     const { childObjects } = this.props;
 
-    const pinnedChildren = childObjects.filter(c => c.pinned);
-    const unpinnedChildren = childObjects.filter(c => !c.pinned);
-    const showSeparator = pinnedChildren.length > 0 && unpinnedChildren.length > 0;
+    const showSeparator = childObjects.pinned.length > 0;
 
     return (
       <React.Fragment>
-        {this._renderList(pinnedChildren)}
-        {showSeparator && <div className="sidebar__list-separator" />}
-        {this._renderList(unpinnedChildren)}
+        {this._renderList(childObjects.pinned, true)}
+        <div className={`sidebar__list-separator${showSeparator ? '' : '--invisible'}`} />
+        {this._renderList(childObjects.all, false)}
       </React.Fragment>
     );
   }

packages/insomnia-app/app/ui/components/sidebar/sidebar-request-row.js

@@ -125,7 +125,7 @@ class SidebarRequestRow extends PureComponent {
                     <Highlight search={filter} text={value} {...props} />
                   )}
                 />
-                {isPinned && <i className="sidebar__item__icon-x fa fa-thumb-tack" />}
+                {isPinned && <i className="sidebar__item__icon-pin fa fa-thumb-tack" />}
               </div>
             </button>
             <div className="sidebar__actions">

packages/insomnia-app/app/ui/components/sidebar/sidebar.js

@@ -178,7 +178,7 @@ Sidebar.propTypes = {
   width: PropTypes.number.isRequired,
   isLoading: PropTypes.bool.isRequired,
   workspace: PropTypes.object.isRequired,
-  childObjects: PropTypes.arrayOf(PropTypes.object).isRequired,
+  childObjects: PropTypes.object.isRequired,
   workspaces: PropTypes.arrayOf(PropTypes.object).isRequired,
   unseenWorkspaces: PropTypes.arrayOf(PropTypes.object).isRequired,
   environments: PropTypes.arrayOf(PropTypes.object).isRequired,

packages/insomnia-app/app/ui/components/wrapper.js

@@ -10,6 +10,7 @@ import type {
   RequestHeader,
   RequestParameter,
 } from '../../models/request';
+import type { SidebarChildObjects } from './sidebar/sidebar-children';
 
 import * as React from 'react';
 import autobind from 'autobind-decorator';
@@ -115,7 +116,7 @@ type Props = {
   sidebarWidth: number,
   sidebarHidden: boolean,
   sidebarFilter: string,
-  sidebarChildren: Array<Object>,
+  sidebarChildren: SidebarChildObjects,
   settings: Settings,
   workspaces: Array<Workspace>,
   unseenWorkspaces: Array<Workspace>,
@@ -616,7 +617,7 @@ class Wrapper extends React.PureComponent<Props, State> {
           <AddKeyCombinationModal ref={registerModal} />
           <ExportRequestsModal
             ref={registerModal}
-            childObjects={sidebarChildren}
+            childObjects={sidebarChildren.all}
             handleExportRequestsToFile={handleExportRequestsToFile}
           />
         </ErrorBoundary>

packages/insomnia-app/app/ui/containers/app.js

@@ -215,6 +215,18 @@ class App extends PureComponent {
           await this._requestDuplicate(this.props.activeRequest);
         },
       ],
+      [
+        hotKeyRefs.REQUEST_TOGGLE_PIN,
+        async () => {
+          const metas = Object.values(this.props.entities.requestMetas).filter(
+            m => m.parentId === this.props.activeRequest._id,
+          );
+          await this._handleSetRequestPinned(
+            this.props.activeRequest,
+            !(metas[0] && metas[0].pinned),
+          );
+        },
+      ],
       [hotKeyRefs.SIDEBAR_TOGGLE, this._handleToggleSidebar],
       [hotKeyRefs.PLUGIN_RELOAD, this._handleReloadPlugins],
       [
@@ -439,7 +451,6 @@ class App extends PureComponent {
 
   async _handleSetRequestPinned(request, pinned) {
     App._updateRequestMetaByParentId(request._id, { pinned });
-    models.request.update(request, { parentId: this.props.activeWorkspace._id });
   }
 
   _handleSetResponsePreviewMode(requestId, previewMode) {

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

@@ -193,6 +193,10 @@
     height: 2px;
     background-color: var(--hl-sm);
     margin: @padding-sm 0;
+
+    &--invisible {
+      display: none;
+    }
   }
 
   .sidebar__list--collapsed > * {
@@ -281,8 +285,9 @@
       padding-right: @padding-sm;
     }
 
-    &-x {
+    &-pin {
       padding: 0 @padding-sm;
+      display: initial;
     }
   }
 
@@ -292,7 +297,7 @@
 
   .sidebar__clickable {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
     height: 100%;
 
@@ -389,6 +394,10 @@
     display: initial;
   }
 
+  .sidebar__item:hover .sidebar__item__icon-pin {
+    display: none;
+  }
+
   // ~~~~~~~~~~~~~~ //
   // Sidebar Footer //
   // ~~~~~~~~~~~~~~ //

packages/insomnia-app/app/ui/redux/selectors.js

@@ -135,7 +135,7 @@ export const selectSidebarChildren = createSelector(
   (collapsed, pinned, activeWorkspace, activeWorkspaceMeta, childrenMap) => {
     const sidebarFilter = activeWorkspaceMeta ? activeWorkspaceMeta.sidebarFilter : '';
 
-    function next(parentId) {
+    function next(parentId, pinnedChildren) {
       const children = (childrenMap[parentId] || [])
         .filter(doc => {
           return doc.type === models.request.type || doc.type === models.requestGroup.type;
@@ -149,15 +149,23 @@ export const selectSidebarChildren = createSelector(
         });
 
       if (children.length > 0) {
-        return children.map(c => ({
-          doc: c,
-          hidden: false,
-          collapsed: !!collapsed[c._id],
-          pinned: !!pinned[c._id],
+        return children.map(c => {
+          const child = {
+            doc: c,
+            hidden: false,
+            collapsed: !!collapsed[c._id],
+            pinned: !!pinned[c._id],
+          };
+
+          if (child.pinned) {
+            pinnedChildren.push(child);
+          }
 
           // Don't add children of requests
-          children: c.type === models.request.type ? [] : next(c._id),
-        }));
+          child.children = c.type === models.request.type ? [] : next(c._id, pinnedChildren);
+
+          return child;
+        });
       } else {
         return children;
       }
@@ -189,8 +197,11 @@ export const selectSidebarChildren = createSelector(
       return children;
     }
 
-    const childrenTree = next(activeWorkspace._id, false);
-    return matchChildren(childrenTree);
+    let pinnedChildren = [];
+    const childrenTree = next(activeWorkspace._id, pinnedChildren);
+    const matchedChildren = matchChildren(childrenTree);
+
+    return { pinned: pinnedChildren, all: matchedChildren };
   },
 );