Add/user invite (#3536)

* duplicate header

* get all the pieces ther

* move Actions into a file

* delete dead code

* move usermenu container styles to usermenu

* make avatar wrap not take extra spac

* align avatar with buttons

* vertical align menubar

* redesign menu + sandbox name

* get the right logos top left

* adjust alignment

* remove debug line

* fixed margin issues

* overmind-graphql

* UI

* UI

* fix

* More UI

* Add change link permissions

* Add resubscribing

* Fix type

* Fix link update

* Update CircleCI scripts

* refactored to effect and cleaned up (#3537)

* refactored to effect and cleaned up

* clean and add disposeWhere

* New changes

* Set right connection places

* Push

* fix effects proxy

* WIP

* WIP

* Polish

* Update GraphQL typings

* Typing changes

* return promise on mutations

* Fix ts issues

* fix typing

* Change prop order

* Fixes

* Deduplicate yarn.lock

* Update cases

* Update schema

* Quickfix

* use endpoint instead of url

* fix weird event typing

* Move collaborators queries to own folder

* move collaborators to folder and add overmind package

* try catch loading colalborators

* Allow joining of a live session any time

* Fix overlay examples

* Fix replacing url

* Add feature flag

Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: Christian Alfoni <[email protected]>

Author: 3 people

.circleci/config.yml

@@ -376,10 +376,6 @@ workflows:
       - create-docker-image:
           requires:
             - build-prod
-            - lint
-            - typecheck
-            # - test-integrations
-            - test-jest
       - deploy-production-approval:
           type: approval
           filters:
@@ -390,6 +386,11 @@ workflows:
           requires:
             - deploy-production-approval
             - create-docker-image
+            - build-prod
+            - lint
+            - typecheck
+            # - test-integrations
+            - test-jest
           filters:
             branches:
               only:

.graphqlconfig.yml

@@ -5,4 +5,4 @@ projects:
       endpoints:
         prod: 'https://codesandbox.io/api/graphql'
         staging: 'https://codesandbox.stream/api/graphql'
-        dev: 'http://localhost:4000/api/graphql'
+        dev: 'http://server:4000/api/graphql'

README.md

@@ -256,12 +256,12 @@ Thanks goes to these wonderful people
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
 
+<!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Thanks
 
 <a href="https://www.chromaticqa.com/"><img src="https://cdn-images-1.medium.com/letterbox/147/36/50/50/1*oHHjTjInDOBxIuYHDY2gFA.png?source=logoAvatar-d7276495b101---37816ec27d7a" width="120"/></a>
 
-Thanks to [Chromatic](https://www.chromaticqa.com/) for providing the visual testing platform that helps us catch unexpected changes.
+Thanks to [Chromatic](https://www.chromaticqa.com/) for providing the visual
+testing platform that helps us catch unexpected changes.

packages/app/package.json

@@ -15,6 +15,7 @@
     "graphql:replace-schema": "sed -i '' 's/RootQueryType/RootQuery/g' ./src/app/graphql/schema.graphql && sed -i '' 's/RootMutationType/RootMutation/g' ./src/app/graphql/schema.graphql",
     "generate:graphql": "graphql get-schema -e prod --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js",
     "generate:graphql:staging": "graphql get-schema -e staging --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js --staging",
+    "generate:graphql:dev": "graphql get-schema -e dev --project app && yarn graphql:replace-schema && graphql-codegen --config ./scripts/codegen.js --dev",
     "build:embed": "cross-env NODE_ENV=production webpack --config config/webpack.embed.js",
     "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js && yarn copy-assets",
     "build:sandpack-sandbox": "cross-env NODE_ENV=production SANDPACK=true SANDBOX_ONLY=true node scripts/build.js && cross-env SANDBOX_ONLY=true yarn copy-assets",
@@ -70,12 +71,13 @@
     ]
   },
   "dependencies": {
+    "@absinthe/socket": "^0.2.1",
     "@apollo/react-hooks": "^3.1.3",
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
+    "@codesandbox/components": "0.0.1",
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.1.0",
-    "@codesandbox/components": "0.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",
@@ -115,16 +117,18 @@
     "date-fns-tz": "^1.0.7",
     "debug": "^2.6.8",
     "dot-object": "^1.9.0",
-    "downshift": "^1.0.0-rc.14",
+    "downshift": "^5.0.0",
     "eslint-plugin-react-hooks": "1.6.0",
     "eslint-plugin-vue": "^4.2.2",
     "estree-walker": "^1.0.1",
     "file-saver": "^1.3.3",
     "fontfaceobserver": "^2.0.13",
+    "framer-motion": "^1.8.4",
     "fuse.js": "^3.2.1",
     "geniejs": "^0.5.1",
     "glamor": "^2.20.25",
-    "graphql": "^14.5.8",
+    "graphql": "^14.6.0",
+    "graphql-subscriptions-client": "^0.12.0",
     "graphql-tag": "^2.10.1",
     "gsap": "^1.20.3",
     "gulp": "^3.9.1",
@@ -163,9 +167,10 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^22.0.3",
+    "overmind": "^23.0.0-1582285704974",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^23.0.3",
+    "overmind-graphql": "^3.0.0-1582705151381",
+    "overmind-react": "^24.0.0-1582285704974",
     "phoenix": "^1.4.11",
     "postcss": "^7.0.26",
     "postcss-selector-parser": "^2.2.3",

packages/app/scripts/codegen.js

@@ -1,10 +1,28 @@
 const isStaging = process.argv.includes('--staging');
+const isDev = process.argv.includes('--dev');
 
-const URL = `https://codesandbox.${isStaging ? `stream` : `io`}/api/graphql`;
+const host = (() => {
+  if (isDev) {
+    return 'http://server:4000';
+  }
+
+  if (isStaging) {
+    return 'https://codesandbox.stream';
+  }
+
+  return 'https://codesandbox.io';
+})();
+
+const URL = `${host}/api/graphql`;
 
 module.exports = {
   schema: URL,
-  documents: [`./src/**/*.gql`, `./src/**/queries.ts`, `./src/**/mutations.ts`],
+  documents: [
+    `./src/**/*.gql`,
+    `./src/app/overmind/effects/gql/**/*.ts`,
+    `./src/**/queries.ts`,
+    `./src/**/mutations.ts`,
+  ],
   overwrite: true,
   hooks: {
     afterAllFileWrite: [`prettier --write`],

packages/app/src/app/components/Overlay/Overlay.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import { useTransition, animated, config } from 'react-spring';
+import React, { useState, useLayoutEffect } from 'react';
+import { motion } from 'framer-motion';
 import track from '@codesandbox/common/lib/utils/analytics';
-import { Container } from './elements';
+import Portal from '@codesandbox/common/lib/components/Portal';
+import { Container, ContentContainer } from './elements';
 
 interface IOverlayProps {
   event: string;
@@ -11,8 +12,11 @@ interface IOverlayProps {
   children: (handleOpen: () => void) => React.ReactNode;
   content: React.ComponentType;
   noHeightAnimation?: boolean;
+  width?: number;
 }
 
+const POPOVER_WIDTH = 390;
+
 const noop = () => undefined;
 export const Overlay: React.FC<IOverlayProps> = ({
   event,
@@ -22,33 +26,48 @@ export const Overlay: React.FC<IOverlayProps> = ({
   children,
   content: Content,
   noHeightAnimation = true,
+  width = POPOVER_WIDTH,
 }) => {
   const [open, setOpen] = useState(isOpen === undefined ? false : isOpen);
   const isControlled = isOpen !== undefined;
   const openState = isControlled ? isOpen : open;
+  const element = React.useRef<HTMLDivElement>();
+  const bounds = React.useRef<{
+    top: number;
+    left: number;
+    height: number;
+    width: number;
+  }>({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  });
 
-  useEffect(() => {
-    const handleClick = (e: MouseEvent) => {
-      if (!e.defaultPrevented && openState) {
-        if (event) {
-          track(`Closed ${event}`);
-        }
-        if (isControlled) {
-          if (onClose) {
-            onClose();
-          }
-        } else {
-          setOpen(false);
-        }
-      }
+  useLayoutEffect(() => {
+    const posData = element.current.getBoundingClientRect();
+    bounds.current = {
+      top: posData.top,
+      left: posData.left,
+      width: posData.width,
+      height: posData.height,
     };
+  }, []);
 
-    document.addEventListener('mousedown', handleClick);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, [isOpen, onClose, event, openState, isControlled]);
+  const handleClick = () => {
+    if (openState) {
+      if (event) {
+        track(`Closed ${event}`);
+      }
+      if (isControlled) {
+        if (onClose) {
+          onClose();
+        }
+      } else {
+        setOpen(false);
+      }
+    }
+  };
 
   const handleOpen = () => {
     if (event) {
@@ -63,35 +82,37 @@ export const Overlay: React.FC<IOverlayProps> = ({
     }
   };
 
-  const transitions = useTransition(openState, null, {
-    config: config.default,
-    from: {
-      ...(noHeightAnimation ? {} : { height: 0 }),
-      opacity: 0.6,
-      position: 'absolute',
-      top: 'calc(100% + 1rem)',
-      right: 0,
-      zIndex: 10,
-      overflow: 'hidden',
-      boxShadow: '0 3px 3px rgba(0, 0, 0, 0.3)',
-    },
-    enter: { ...(noHeightAnimation ? {} : { height: 'auto' }), opacity: 1 },
-    leave: { ...(noHeightAnimation ? {} : { height: 0 }), opacity: 0 },
-  });
-
   return (
-    <Container onMouseDown={e => e.preventDefault()}>
+    <Container onMouseDown={e => e.stopPropagation()} ref={element}>
       {children(handleOpen)}
-      {transitions.map(({ item, props }, i) =>
-        item ? (
-          // eslint-disable-next-line
-          <animated.div key={i} style={props}>
-            <Content />
-          </animated.div>
-        ) : (
-          // eslint-disable-next-line
-          <animated.span key={i} style={props} />
-        )
+
+      {openState && (
+        <Portal>
+          <ContentContainer onClick={handleClick}>
+            <motion.div
+              onClick={e => e.stopPropagation()}
+              style={{
+                opacity: 0.6,
+                position: 'absolute',
+                zIndex: 10,
+                overflow: 'hidden',
+                boxShadow: '0 3px 3px rgba(0, 0, 0, 0.3)',
+                height: 'auto',
+                borderRadius: 4,
+                top: bounds.current.top + bounds.current.height + 8,
+                left: bounds.current.left + bounds.current.width - width * 0.75,
+                width,
+              }}
+              transition={{
+                duration: 0.2,
+              }}
+              initial={{ y: -5 }}
+              animate={{ opacity: 1, y: 0 }}
+            >
+              <Content />
+            </motion.div>
+          </ContentContainer>
+        </Portal>
       )}
     </Container>
   );

packages/app/src/app/components/Overlay/elements.ts

@@ -1,5 +1,15 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  display: inherit;
   position: relative;
 `;
+
+export const ContentContainer = styled.div`
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 10;
+`;