Private GitHub import (codesandbox#1082)

Fixes codesandbox#860

Author: CompuIves

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

@@ -3,12 +3,15 @@ import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import QuickActions from 'app/pages/Sandbox/QuickActions';
 
+import Button from 'app/components/Button';
+import NotFound from 'app/pages/common/NotFound';
 import Navigation from 'app/pages/common/Navigation';
 import Title from 'app/components/Title';
 import Centered from 'common/components/flex/Centered';
 import Fullscreen from 'common/components/flex/Fullscreen';
 import Padding from 'common/components/spacing/Padding';
 import Skeleton from 'app/components/Skeleton';
+import GithubIntegration from 'app/src/app/pages/common/GithubIntegration';
 
 import Editor from './Editor';
 
@@ -54,29 +57,15 @@ class SandboxPage extends React.Component {
   getContent() {
     const { store } = this.props;
 
+    const { hasLogIn } = store;
+
     if (store.editor.notFound) {
-      return (
-        <React.Fragment>
-          <div
-            style={{
-              fontWeight: 300,
-              color: 'rgba(255, 255, 255, 0.5)',
-              marginBottom: '1rem',
-              fontSize: '1.5rem',
-            }}
-          >
-            404 Not Found
-          </div>
-          <Title style={{ fontSize: '1.25rem' }}>
-            We could not find the sandbox you{"'"}re looking for
-          </Title>
-          <br />
-          <Link to="/s">Create Sandbox</Link>
-        </React.Fragment>
-      );
+      return <NotFound />;
     }
 
     if (store.editor.error) {
+      const isGithub = this.props.match.params.id.indexOf('github') > -1;
+      const hasPrivateAccess = store.user && store.user.integrations.github;
       return (
         <React.Fragment>
           <div
@@ -89,9 +78,41 @@ class SandboxPage extends React.Component {
           >
             Something went wrong
           </div>
-          <Title style={{ fontSize: '1.25rem' }}>{store.editor.error}</Title>
+          <Title style={{ fontSize: '1.25rem', marginBottom: 0 }}>
+            {store.editor.error}
+          </Title>
           <br />
-          <Link to="/s">Create Sandbox</Link>
+          <div style={{ display: 'flex', maxWidth: 400, width: '100%' }}>
+            <Button block small style={{ margin: '.5rem' }} href="/s">
+              Create Sandbox
+            </Button>
+            <Button block small style={{ margin: '.5rem' }} href="/">
+              {hasLogIn ? 'Dashboard' : 'Homepage'}
+            </Button>
+          </div>
+          {hasLogIn &&
+            isGithub &&
+            !hasPrivateAccess && (
+              <div
+                style={{ maxWidth: 400, marginTop: '2.5rem', width: '100%' }}
+              >
+                <div
+                  style={{
+                    fontWeight: 300,
+                    color: 'rgba(255, 255, 255, 0.7)',
+                    marginBottom: '1rem',
+                    fontSize: '1rem',
+                    textAlign: 'center',
+                    lineHeight: 1.6,
+                  }}
+                >
+                  Did you try to open a private GitHub repository and are you a{' '}
+                  <Link to="/patron">patron</Link>? Then you might need to get
+                  private access:
+                </div>
+                <GithubIntegration small />
+              </div>
+            )}
         </React.Fragment>
       );
     }

packages/app/src/app/pages/common/NotFound/elements.js

@@ -6,19 +6,27 @@ export const Container = styled.div`
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  font-size: 1.5rem;
   color: white;
   height: 100vh;
 `;
 
 export const Title = styled.h1`
-  margin-bottom: 0;
+  font-weight: 300;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+`;
+
+export const SubTitle = styled.h2`
+  font-weight: 300;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
 `;
 
 export const Buttons = styled.div`
   display: flex;
   justify-content: space-around;
   min-width: 450px;
-  flex-wrap: wrap;
   margin-top: 0.5rem;
 `;

packages/app/src/app/pages/common/NotFound/index.js

@@ -1,25 +1,25 @@
 import React from 'react';
 
 import { inject } from 'mobx-react';
-import SubTitle from 'app/components/SubTitle';
+
 import Button from 'app/components/Button';
 import { newSandboxWizard } from 'common/utils/url-generator';
 
-import { Container, Title, Buttons } from './elements';
+import { Container, Title, SubTitle, Buttons } from './elements';
 
 function NotFound({ store }) {
   const { hasLogIn } = store;
 
   return (
     <Container>
       <Title>404</Title>
-      <SubTitle>We could not find the page you{"'"}re looking for :(</SubTitle>
+      <SubTitle>We could not find the page you{"'"}re looking for.</SubTitle>
       <Buttons>
         <Button small block style={{ margin: '.5rem' }} to={newSandboxWizard()}>
           Create Sandbox
         </Button>
         <Button small block style={{ margin: '.5rem' }} href="/">
-          To {hasLogIn ? 'Dashboard' : 'Homepage'}
+          {hasLogIn ? 'Dashboard' : 'Homepage'}
         </Button>
       </Buttons>
     </Container>

packages/app/src/app/store/actions.js

@@ -232,7 +232,7 @@ export function closeTabByIndex({ state, props }) {
 export function signInGithub({ browser, path, props }) {
   const { useExtraScopes } = props;
   const popup = browser.openPopup(
-    `/auth/github${useExtraScopes ? '?scope=user:email,public_repo' : ''}`,
+    `/auth/github${useExtraScopes ? '?scope=user:email,repo' : ''}`,
     'sign in'
   );
 

yarn.lock

@@ -23729,6 +23729,14 @@ uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9:
     source-map "~0.6.1"
     source-map-support "~0.5.6"
 
+uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9, "uglify-es@npm:terser":
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.8.1.tgz#cb70070ac9e0a71add169dfb63c0a64fca2738ac"
+  dependencies:
+    commander "~2.16.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.6"
+
 uglify-js@3.3.x:
   version "3.3.28"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.28.tgz#0efb9a13850e11303361c1051f64d2ec68d9be06"