Show when response was sent (Closes #1488)

packages/insomnia-app/app/ui/components/dropdowns/response-history-dropdown.js

@@ -10,6 +10,7 @@ import TimeTag from '../tags/time-tag';
 import SizeTag from '../tags/size-tag';
 import { executeHotKey } from '../../../common/hotkeys-listener';
 import { hotKeyRefs } from '../../../common/hotkeys';
+import TimeFromNow from '../time-from-now';
 
 @autobind
 class ResponseHistoryDropdown extends PureComponent {
@@ -86,12 +87,12 @@ class ResponseHistoryDropdown extends PureComponent {
           key={activeResponse ? activeResponse._id : 'n/a'}
           {...extraProps}>
           <DropdownButton className="btn btn--super-compact tall" title="Response history">
+            {activeResponse && <TimeFromNow timestamp={activeResponse.created} capitalize />}
             {!isLatestResponseActive ? (
-              <i className="fa fa-thumb-tack" />
+              <i className="fa fa-thumb-tack space-left" />
             ) : (
-              <i className="fa fa-clock-o" />
+              <i className="fa fa-caret-down space-left" />
             )}
-            <i className="fa fa-caret-down" />
           </DropdownButton>
           <DropdownDivider>Response History</DropdownDivider>
           <DropdownItem buttonClass={PromptButton} addIcon onClick={this._handleDeleteResponse}>

packages/insomnia-app/app/ui/components/time-from-now.js

@@ -7,6 +7,7 @@ type Props = {
   timestamp: number | Date | string,
   intervalSeconds?: number,
   className?: string,
+  capitalize?: boolean,
 };
 
 type State = {
@@ -26,8 +27,23 @@ class TimeFromNow extends React.PureComponent<Props, State> {
   }
 
   _update() {
-    const { timestamp } = this.props;
-    this.setState({ text: moment(timestamp).fromNow() });
+    const { timestamp, capitalize } = this.props;
+
+    let text = moment(timestamp).fromNow();
+
+    // Shorten default case
+    if (text === 'a few seconds ago') {
+      text = 'just now';
+    }
+
+    // Capitalize if needed
+    if (capitalize) {
+      text = text.replace(/\w\S*/g, function(txt) {
+        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+      });
+    }
+
+    this.setState({ text });
   }
 
   componentDidMount() {
@@ -43,6 +59,7 @@ class TimeFromNow extends React.PureComponent<Props, State> {
   render() {
     const { className, timestamp } = this.props;
     const { text } = this.state;
+
     return (
       <span title={moment(timestamp).toString()} className={className}>
         {text}