Improving GitHub URL parse (codesandbox#448)

* refactor(github-integration): Adding better URL parse

* test(github-integration): Adding tests to the gitHubRepoPattern

* chore: Adding myself to contributors table

Author: arthurdenner

.all-contributorsrc

@@ -245,6 +245,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "arthurdenner",
+      "name": "Arthur Denner",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/13774309?v=4",
+      "profile": "https://github.com/arthurdenner",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-24-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-25-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 An online code editor tailored for web applications.
 
@@ -40,5 +40,5 @@ Thanks goes to these wonderful people
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub><b>Johann Hubert Sonntagbauer</b></sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub><b>Joachim Seminck</b></sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub><b>Subramanya Chakravarthy</b></sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub><b>Robert (Robby) O'Connor</b></sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub><b>Bogdan Luca</b></sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub><b>Divjot Singh</b></sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub><b>Jason Nall</b></sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>Lionel</b></sub>](https://elrumordelaluz.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub><b>Philipp Brumm</b></sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub><b>Valentin Hervieu</b></sub>](http://valentin-hervieu.fr)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AValentinH "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1499218?v=4" width="100px;"/><br /><sub><b>Anenth</b></sub>](http://anenth.js.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/410792?v=4" width="100px;"/><br /><sub><b>Dony Sukardi</b></sub>](http://dsds.io)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Adonysukardi "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=donysukardi "Code") | [<img src="https://avatars3.githubusercontent.com/u/89046?v=4" width="100px;"/><br /><sub><b>Geoffrey Dhuyvetters</b></sub>](https://github.com/duivvv)<br />[🎨](#design-duivvv "Design") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=duivvv "Code") | [<img src="https://avatars3.githubusercontent.com/u/3381746?v=4" width="100px;"/><br /><sub><b>Eswar Yaganti</b></sub>](http://nyaganti.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nagamalli9999 "Code") [🚇](#infra-nagamalli9999 "Infrastructure (Hosting, Build-Tools, etc)") |
-| [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | [<img src="https://avatars0.githubusercontent.com/u/1650995?v=4" width="100px;"/><br /><sub><b>Bilal Budhani</b></sub>](https://bilalbudhani.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=BilalBudhani "Code") | [<img src="https://avatars3.githubusercontent.com/u/843342?v=4" width="100px;"/><br /><sub><b>El Juli</b></sub>](https://github.com/JulianMayorga)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=JulianMayorga "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | [<img src="https://avatars0.githubusercontent.com/u/1650995?v=4" width="100px;"/><br /><sub><b>Bilal Budhani</b></sub>](https://bilalbudhani.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=BilalBudhani "Code") | [<img src="https://avatars3.githubusercontent.com/u/843342?v=4" width="100px;"/><br /><sub><b>El Juli</b></sub>](https://github.com/JulianMayorga)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=JulianMayorga "Code") | [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=arthurdenner "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/pages/GitHub/index.js

@@ -10,7 +10,11 @@ import MaxWidth from 'common/components/flex/MaxWidth';
 import Margin from 'common/components/spacing/Margin';
 import Input from 'app/components/Input';
 import Button from 'app/components/buttons/Button';
-import { gitHubToSandboxUrl, protocolAndHost } from 'common/utils/url-generator';
+import {
+  gitHubRepoPattern,
+  gitHubToSandboxUrl,
+  protocolAndHost,
+} from 'common/utils/url-generator';
 
 const Container = styled.div`
   height: 100%;
@@ -31,7 +35,9 @@ const Label = styled.label`
   color: rgba(255, 255, 255, 0.3);
 `;
 
-const Description = styled.div`margin-bottom: 1rem;`;
+const Description = styled.div`
+  margin-bottom: 1rem;
+`;
 
 const StyledInput = styled(Input)`
   font-size: 1.25rem;
@@ -62,15 +68,22 @@ export default class GitHub extends React.PureComponent<{}, State> {
   updateUrl = e => {
     const url = e.target.value;
 
-    if (!url.includes('github.com')) {
+    if (!url) {
+      this.setState({
+        url,
+        error: null,
+        transformedUrl: '',
+      });
+    } else if (!gitHubRepoPattern.test(url)) {
       this.setState({
         url,
-        error: "The URL should contain from 'github.com'.",
+        error: 'The URL provided is not valid.',
+        transformedUrl: '',
       });
     } else {
       this.setState({
         url: e.target.value,
-        transformedUrl: getFullGitHubUrl(url),
+        transformedUrl: getFullGitHubUrl(url.trim()),
         error: null,
       });
     }

packages/common/utils/url-generator.js

@@ -1,6 +1,10 @@
 // @flow
 import type { Sandbox } from 'common/types';
 
+export const gitHubRepoPattern = /(https?:\/\/)?((www.)?)github.com(\/\w+){2,}/;
+const gitHubPrefix = /(https?:\/\/)?((www.)?)github.com/;
+const dotGit = /(\.git)$/;
+
 const buildEncodedUri = (strings: Array<string>, ...values: Array<string>) =>
   strings[0] +
   values
@@ -115,7 +119,7 @@ export const optionsToParameterizedUrl = (options: Object) => {
 };
 
 export const gitHubToSandboxUrl = (githubUrl: string) =>
-  githubUrl.replace(/https?:\/\/(www.)?github.com/, '/s/github');
+  githubUrl.replace(gitHubPrefix, '/s/github').replace(dotGit, '');
 
 export const searchUrl = query => `/search${query ? `?query=${query}` : ''}`;
 export const patronUrl = () => `/patron`;

packages/common/utils/url-generator.test.js

@@ -1,16 +1,47 @@
-import { gitHubToSandboxUrl } from './url-generator';
+import { gitHubRepoPattern, gitHubToSandboxUrl } from './url-generator';
+
+const invalidUrls = [
+  'github.com/',
+  'github.com/user/',
+  'http://github.com/',
+  'http://github.com/user/',
+  'http://www.github.com/',
+  'http://www.github.com/user/',
+  'https://github.com/user/',
+  'https://www.github.com/user/',
+  'www.github.com/',
+  'www.github.com/user/',
+];
+
+const validUrls = [
+  'github.com/user/repo',
+  'http://github.com/user/repo',
+  'http://www.github.com/user/repo',
+  'https://github.com/user/repo',
+  'https://www.github.com/user/repo',
+  'www.github.com/user/repo',
+];
 
 describe('url-generator', () => {
   describe('gitHubToSandboxUrl', () => {
-    [
-      'http://github.com/user/repo',
-      'http://www.github.com/user/repo',
-      'https://github.com/user/repo',
-      'https://www.github.com/user/repo',
-    ].forEach(inputUrl => {
+    validUrls.forEach(inputUrl => {
       test(`handles ${inputUrl} urls`, () => {
         expect(gitHubToSandboxUrl(inputUrl)).toBe('/s/github/user/repo');
       });
     });
   });
+
+  describe('gitHubRepoPattern', () => {
+    validUrls.forEach(inputUrl => {
+      test(`validates ${inputUrl} as truthy`, () => {
+        expect(gitHubRepoPattern.test(inputUrl)).toBeTruthy();
+      });
+    });
+
+    invalidUrls.forEach(inputUrl => {
+      test(`validates ${inputUrl} as falsy`, () => {
+        expect(gitHubRepoPattern.test(inputUrl)).toBeFalsy();
+      });
+    });
+  });
 });