Add ZEIT v1 warning (codesandbox#1391)

<!-- Is it a Bug fix, feature, docs update, ... -->
**What kind of change does this PR introduce?**
Feature 

<!-- You can also link to an open issue here -->
**What is the current behavior?**
No warning saying we only support version 1 of zeit

<!-- if this is a feature change -->
**What is the new behavior?**
Adds a new warning for version 1 and also a way for people to say they want version 2

![zeit2](https://user-images.githubusercontent.com/1051509/50238272-d4c32200-03b6-11e9-89b0-ef2af29504d0.gif)


It also shows a notification saying your feedback was saved but that's not on the gif

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.js

@@ -24,13 +24,18 @@ import {
 class Deployment extends Component {
   componentDidMount = () => {
     this.props.signals.deployment.getDeploys();
+    this.props.signals.deployment.getPeople();
   };
 
   render() {
     const {
       signals,
       store: { user, deployment },
     } = this.props;
+
+    const hasVoted = deployment.peopleWant2.find(
+      a => a.username === user.username
+    );
     return (
       <div>
         <Description>
@@ -45,6 +50,50 @@ class Deployment extends Component {
           {!user.integrations.zeit &&
             ' You need to add ZEIT to your integrations to deploy.'}
         </Description>
+        <Description
+          css={`
+            margin: 0;
+            padding: 0.5rem 1rem;
+
+            background: #122d42;
+          `}
+        >
+          We currently only support Zeit v1.
+          {!hasVoted && deployment.peopleWant2.length ? (
+            <Fragment>
+              <br />
+              <br />
+              If you would like us to support version 2.0 too please add your
+              thumbs up
+            </Fragment>
+          ) : null}
+          <Button
+            css={`
+              padding: 5px 8px;
+              margin-top: 1rem;
+            `}
+            block
+            disabled={hasVoted || !deployment.peopleWant2.length}
+            onClick={() =>
+              signals.deployment.addPersonFor2({
+                username: user.username,
+              })
+            }
+          >
+            {deployment.peopleWant2.length > 0
+              ? `${deployment.peopleWant2.length} people want v2`
+              : null}{' '}
+            <span
+              css={`
+                margin-left: 5px;
+              `}
+              role="img"
+              aria-label="I want this"
+            >
+              👍
+            </span>
+          </Button>
+        </Description>
 
         {user.integrations.zeit ? (
           <Fragment>

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

@@ -1,5 +1,4 @@
 import { omit } from 'lodash-es';
-
 import getTemplate from 'common/templates';
 
 export function createZip({ utils, state }) {
@@ -14,6 +13,61 @@ export function loadZip({ props, jsZip }) {
   return jsZip.loadAsync(file).then(result => ({ contents: result }));
 }
 
+export async function getPeopleWhoWant2() {
+  const Airtable = await import(/* webpackChunkName: 'airtable' */ '../../utils/setAirtable');
+
+  const base = await Airtable.default.base('apppgSmcJWwuXac6t');
+  const params = base('zeit2').select({
+    view: 'Grid view',
+    maxRecords: 100000,
+  });
+  const people = [];
+
+  const getPeople = () =>
+    new Promise(res => {
+      params.eachPage(
+        (records, fetchNextPage) => {
+          records.forEach(record => {
+            people.push(record);
+          });
+          fetchNextPage();
+        },
+        () => res()
+      );
+    });
+
+  await getPeople();
+
+  return {
+    people: people.map(a => a.fields),
+  };
+}
+
+export async function addPersonWhoWant2({ path, props }) {
+  const Airtable = await import(/* webpackChunkName: 'airtable' */ '../../utils/setAirtable');
+
+  const base = await Airtable.default.base('apppgSmcJWwuXac6t');
+
+  const AddPerson = () =>
+    new Promise((res, rej) => {
+      base('zeit2').create({ username: props.username }, err => {
+        if (err) {
+          console.error(err);
+          rej();
+        }
+        res();
+      });
+    });
+
+  try {
+    await AddPerson();
+
+    return path.success();
+  } catch (e) {
+    return path.error();
+  }
+}
+
 export async function createApiData({ props, state }) {
   const { contents } = props;
   const sandboxId = state.get('editor.currentId');

packages/app/src/app/store/modules/deployment/index.js

@@ -5,6 +5,7 @@ import * as sequences from './sequences';
 export default Module({
   model,
   state: {
+    peopleWant2: [],
     hasAlias: false,
     deployToDelete: null,
     deploying: false,
@@ -14,10 +15,12 @@ export default Module({
   },
   signals: {
     getDeploys: sequences.getDeploys,
+    addPersonFor2: sequences.addPersonFor2,
     deployClicked: sequences.deploy,
     deploySandboxClicked: sequences.openDeployModal,
     setDeploymentToDelete: sequences.deploymentToDelete,
     deleteDeployment: sequences.deleteDeployment,
     aliasDeployment: sequences.aliasDeployment,
+    getPeople: sequences.getPeopleWhoWant2,
   },
 });

packages/app/src/app/store/modules/deployment/model.js

@@ -39,7 +39,12 @@ const Deploy = types.model('Deploy', {
   type: types.enumeration('types', ['NPM', 'DOCKER', 'STATIC']),
 });
 
+const People = types.model('Person', {
+  username: types.maybeNull(types.string),
+});
+
 export default {
+  peopleWant2: types.array(People),
   hasAlias: types.boolean,
   deployToDelete: types.maybeNull(types.string),
   deploying: types.boolean,

packages/app/src/app/store/modules/deployment/sequences.js

@@ -14,7 +14,32 @@ export const deploymentToDelete = [
   set(state`deployment.deployToDelete`, props`id`),
 ];
 
+export const getPeopleWhoWant2 = [
+  actions.getPeopleWhoWant2,
+  set(state`deployment.peopleWant2`, props`people`),
+];
+
+export const addPersonFor2 = [
+  actions.addPersonWhoWant2,
+  {
+    success: [
+      actions.getPeopleWhoWant2,
+      set(state`deployment.peopleWant2`, props`people`),
+      addNotification('Your feedback has been saved', 'success'),
+    ],
+    error: [
+      addNotification(
+        'An unknown error occurred when adding your vote',
+        'error'
+      ),
+    ],
+  },
+  actions.getPeopleWhoWant2,
+  set(state`deployment.peopleWant2`, props`people`),
+];
+
 export const getDeploys = [
+  actions.getDeploymentData,
   actions.getDeploymentData,
   set(state`deployment.gettingDeploys`, true),
   actions.getDeploys,

packages/app/src/app/store/utils/pushToAirtable.js

@@ -1,8 +1,6 @@
-import Airtable from 'airtable';
+import Airtable from './setAirtable';
 
-const base = new Airtable({ apiKey: 'keyJugfwdJzOyL7Aa' }).base(
-  'appzdQFPct2p9gFZi'
-);
+const base = Airtable.base('appzdQFPct2p9gFZi');
 
 export default ({ feedback, emoji, sandboxId, username, email }) =>
   new Promise((resolve, reject) => {

packages/app/src/app/store/utils/setAirtable.js

@@ -0,0 +1,3 @@
+import Airtable from 'airtable';
+
+export default new Airtable({ apiKey: 'keyJugfwdJzOyL7Aa' });