CC style fixes and relax URL encoding

app/analytics/index.js

@@ -7,22 +7,38 @@ export async function init (accountId) {
     return;
   }
 
+  try {
     await segment.init();
     await google.init(accountId);
 
     initialized = true;
+  } catch (e) {
+    // Just to be extra safe
+  }
 }
 
 export function trackEvent (...args) {
+  try {
     google.sendEvent(...args);
     console.log(`[analytics] track ${args.join(', ')}`);
+  } catch (e) {
+    // Just to be extra safe
+  }
 }
 
 export function setAccountId (accountId) {
+  try {
     google.setUserId(accountId);
     console.log(`[analytics] account Id ${accountId}`);
+  } catch (e) {
+    // Just to be extra safe
+  }
 }
 
 export function trackLegacyEvent (event, properties) {
+  try {
     segment.trackLegacyEvent(event, properties)
+  } catch (e) {
+    // Just to be extra safe
+  }
 }

app/common/__tests__/misc.test.js

@@ -125,8 +125,8 @@ describe('prepareUrlForSending()', () => {
   });
 
   it('encodes querystring with repeated keys', () => {
-    const url = misc.prepareUrlForSending('https://google.com?s=foo&s=foo %20100%');
-    expect(url).toBe('https://google.com/?s=foo&s=foo%20%20100%25');
+    const url = misc.prepareUrlForSending('https://google.com/;@,!?s=foo,;@-!&s=foo %20100%');
+    expect(url).toBe('https://google.com/;@,!?s=foo%2C%3B%40-!&s=foo%20%20100%25');
   });
 });
 

app/common/__tests__/network.test.js

@@ -68,8 +68,7 @@ describe('buildRequestConfig()', () => {
       rejectUnauthorized: true,
       time: true,
       timeout: 0,
-      url: 'http://foo.com:3332/%E2%98%85/hi%40gmail.com/' +
-      'foo%20bar?bar=baz&foo%20bar=hello%26world'
+      url: 'http://foo.com:3332/%E2%98%85/hi@gmail.com/foo%20bar?bar=baz&foo%20bar=hello%26world'
     })
   })
 });

app/common/misc.js

@@ -1,6 +1,7 @@
 import uuid from 'node-uuid';
 import {parse as urlParse, format as urlFormat} from 'url';
 import {DEBOUNCE_MILLIS} from "./constants";
+import * as querystring from './querystring';
 
 export function getBasicAuthHeader (username, password) {
   const name = 'Authorization';
@@ -88,7 +89,10 @@ export function prepareUrlForSending (url) {
 
   if (parsedUrl.pathname) {
     const segments = parsedUrl.pathname.split('/');
-    parsedUrl.pathname = segments.map(flexibleEncodeComponent).join('/');
+    parsedUrl.pathname = segments.map(flexibleEncodeComponent).join('/')
+      .replace(/%3B/gi, ';') // Don't encode ; in pathname
+      .replace(/%40/gi, '@') // Don't encode @ in pathname
+      .replace(/%2C/gi, ','); // Don't encode , in pathname
   }
 
   // ~~~~~~~~~~~~~~ //
@@ -98,6 +102,16 @@ export function prepareUrlForSending (url) {
   // Deleting search key will force url.format to encode parsedURL.query
   delete parsedUrl.search;
 
+  for (const name of Object.keys(parsedUrl.query)) {
+    const value = parsedUrl.query[name];
+    delete parsedUrl[name];
+    if (Array.isArray(value)) {
+      parsedUrl[flexibleEncodeComponent(name)] = value.map(flexibleEncodeComponent);
+    } else {
+      parsedUrl[flexibleEncodeComponent(name)] = flexibleEncodeComponent(value);
+    }
+  }
+
   return urlFormat(parsedUrl);
 }
 

app/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "insomnia",
-  "version": "3.7.1",
+  "version": "3.7.2",
   "productName": "Insomnia",
   "longName": "Insomnia REST Client",
   "description": "A simple and beautiful REST API client",

app/ui/components/Toast.js

@@ -40,13 +40,18 @@ class Toast extends Component {
   }
 
   _handleClick (notification) {
+    if (!notification) {
+      // Not sure how this happened, but Sentry says it has
+      return;
+    }
+
     if (notification.key === KEY_PLUS_IS_HERE) {
       showModal(SettingsModal, TAB_PLUS);
     }
 
-    analytics.trackEvent('Notification', 'Click', notification.key);
-
     this._markAsRead(notification);
+
+    analytics.trackEvent('Notification', 'Click', notification.key);
   }
 
   _handleShowNotifications () {

app/ui/components/modals/PaymentModal.js

@@ -69,29 +69,56 @@ class PaymentModal extends Component {
       return;
     }
 
+    const cardType = Stripe.card.cardType(value);
     const lastChar = value[e.target.value.length - 1];
     const num = value.replace(/[^0-9]*/g, '');
+    let newNum = '';
+
+    if (cardType === 'American Express') {
+      // 1111 222222 33333
+      const g1 = num.slice(0, 4);
+      const g2 = num.slice(4, 10);
+      const g3 = num.slice(10, 15);
+
+      newNum = g1;
+      newNum += g2 ? ` ${g2}` : '';
+      newNum += g3 ? ` ${g3}` : '';
+    } else if (cardType === 'Diners Club') {
+      // 1111 2222 3333 44
+      const g1 = num.slice(0, 4);
+      const g2 = num.slice(4, 8);
+      const g3 = num.slice(8, 12);
+      const g4 = num.slice(12, 14);
+
+      newNum = g1;
+      newNum += g2 ? ` ${g2}` : '';
+      newNum += g3 ? ` ${g3}` : '';
+      newNum += g4 ? ` ${g4}` : '';
+    } else {
+      // 1111 2222 3333 4444
       const g1 = num.slice(0, 4);
       const g2 = num.slice(4, 8);
       const g3 = num.slice(8, 12);
       const g4 = num.slice(12, 16);
 
-    let newNum = g1;
-    newNum += g2 ? `-${g2}` : '';
-    newNum += g3 ? `-${g3}` : '';
-    newNum += g4 ? `-${g4}` : '';
-
-    // Handle trailing dash so we can add and delete dashes properly
-    const numNumbers = (g1 + g2 + g3 + g4).length;
-    if (lastChar === '-' && g4.length !== 4 && numNumbers % 4 === 0) {
-      newNum += '-';
+      newNum = g1;
+      newNum += g2 ? ` ${g2}` : '';
+      newNum += g3 ? ` ${g3}` : '';
+      newNum += g4 ? ` ${g4}` : '';
+    }
+
+    // Handle trailing dash so we can add and delete dashes properly
+    if (lastChar === ' ') {
+      newNum += ' ';
     }
 
-    const cardType = Stripe.card.cardType(newNum);
     this.setState({cardType: cardType === 'Unknown' ? '' : cardType});
 
+    // Only update number if it changed from the user's original to prevent cursor jump
+    if (newNum !== value) {
       e.target.value = newNum;
     }
+  }
 
   _handleSubmit (e) {
     e.preventDefault();
@@ -100,7 +127,7 @@ class PaymentModal extends Component {
 
     const params = {
       name: this._nameInput.value,
-      number: this._cardNumberInput.value.replace(/-/g, ''),
+      number: this._cardNumberInput.value.replace(/ /g, ''),
       cvc: this._cvcInput.value,
       exp_month: parseInt(this._expiryMonthInput.value, 10),
       exp_year: parseInt(this._expiryYearInput.value, 10),
@@ -185,9 +212,8 @@ class PaymentModal extends Component {
                 <div className="form-control form-control--outlined">
                   <input type="text"
                          required="required"
-                         pattern=".{19,20}"
                          id="payment-card-number"
-                         placeholder="4242-4242-4242-4242"
+                         placeholder="4012 8888 8888 1881"
                          onChange={this._handleCreditCardNumberChange.bind(this)}
                          ref={n => this._cardNumberInput = n}/>
                 </div>

scripts/sentry-release.sh

@@ -26,8 +26,18 @@ echo "-- Uploading Source Maps for $APP_VERSION --"
 curl https://app.getsentry.com/api/0/projects/schierco/insomnia-app/releases/${APP_VERSION}/files/ \
   -X POST \
   -u "$SENTRY_TOKEN:" \
-  -F file=@./build/bundle.js \
-  -F name="bundle.js"
+  -F file=@./build/main.js \
+  -F name="main.js"
+
+echo ""
+
+curl https://app.getsentry.com/api/0/projects/schierco/insomnia-app/releases/${APP_VERSION}/files/ \
+  -X POST \
+  -u "$SENTRY_TOKEN:" \
+  -F file=@./build/main.js.map \
+  -F name="main.js.map"
+
+echo ""
 
 curl https://app.getsentry.com/api/0/projects/schierco/insomnia-app/releases/${APP_VERSION}/files/ \
   -X POST \
@@ -35,6 +45,8 @@ curl https://app.getsentry.com/api/0/projects/schierco/insomnia-app/releases/${A
   -F file=@./build/bundle.js \
   -F name="bundle.js"
 
+echo ""
+
 # Upload a file for the given release
 curl https://app.getsentry.com/api/0/projects/schierco/insomnia-app/releases/${APP_VERSION}/files/ \
   -X POST \