Privacy popup (codesandbox#3205)

* Revert "Revert "Privacy popup" (codesandbox#3204)"

This reverts commit c73d174.

* custom caret

* Make updating privacy optimistic

* Add tracking of updating privacy of a sandbox

* Add tracking for opening the tooltip

* add popup for non owners as well

* track if popup is opened by owner or not

Author: siddharthkp

packages/app/src/app/overmind/namespaces/workspace/actions.ts

@@ -4,6 +4,7 @@ import slugify from '@codesandbox/common/lib/utils/slugify';
 import { Action, AsyncAction } from 'app/overmind';
 import { withOwnedSandbox } from 'app/overmind/factories';
 import getItems from 'app/overmind/utils/items';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 export const valueChanged: Action<{
   field: string;
@@ -203,25 +204,41 @@ export const sandboxDeleted: AsyncAction = async ({
   effects.router.redirectToSandboxWizard();
 };
 
-export const sandboxPrivacyChanged: AsyncAction<0 | 1 | 2> = async (
-  { actions, effects, state },
-  privacy
-) => {
+export const sandboxPrivacyChanged: AsyncAction<{
+  privacy: 0 | 1 | 2;
+  source?: string;
+}> = async ({ actions, effects, state }, { privacy, source = 'generic' }) => {
+  track('Sandbox - Update Privacy', {
+    privacy,
+    source,
+  });
+
   const oldPrivacy = state.editor.currentSandbox.privacy;
-  const sandbox = await effects.api.updatePrivacy(
-    state.editor.currentSandbox.id,
-    privacy
-  );
-  state.editor.currentSandbox.previewSecret = sandbox.previewSecret;
   state.editor.currentSandbox.privacy = privacy;
 
-  if (
-    getTemplate(state.editor.currentSandbox.template).isServer &&
-    ((oldPrivacy !== 2 && privacy === 2) || (oldPrivacy === 2 && privacy !== 2))
-  ) {
-    // Privacy changed from private to unlisted/public or other way around, restart
-    // the sandbox to notify containers
-    actions.server.restartContainer();
+  try {
+    const sandbox = await effects.api.updatePrivacy(
+      state.editor.currentSandbox.id,
+      privacy
+    );
+    state.editor.currentSandbox.previewSecret = sandbox.previewSecret;
+    state.editor.currentSandbox.privacy = privacy;
+
+    if (
+      getTemplate(state.editor.currentSandbox.template).isServer &&
+      ((oldPrivacy !== 2 && privacy === 2) ||
+        (oldPrivacy === 2 && privacy !== 2))
+    ) {
+      // Privacy changed from private to unlisted/public or other way around, restart
+      // the sandbox to notify containers
+      actions.server.restartContainer();
+    }
+  } catch (error) {
+    state.editor.currentSandbox.privacy = oldPrivacy;
+    actions.internal.handleError({
+      message: "We weren't able to update the sandbox privacy",
+      error,
+    });
   }
 };
 

packages/app/src/app/pages/Dashboard/Content/SandboxGrid/index.tsx

@@ -196,6 +196,10 @@ class SandboxGridComponent extends React.Component<
   };
 
   setSandboxesPrivacy = (privacy: number) => {
+    track('Sandbox - Update Privacy', {
+      privacy,
+      source: 'dashboard',
+    });
     setSandboxesPrivacy(this.props.selectedSandboxes, privacy);
   };
 

packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts

@@ -0,0 +1,88 @@
+import styled, {
+  StyledComponent,
+  StyledComponentInnerOtherProps,
+} from 'styled-components';
+import css from '@styled-system/css';
+
+export const Element = styled.div<{
+  margin?: number;
+  marginX?: number;
+  marginBottom?: number;
+}>(props =>
+  css({
+    margin: props.margin || null,
+    marginX: props.marginX || null,
+    marginBottom: props.marginBottom || null,
+  })
+);
+
+export const Container = styled(Element)(
+  css({
+    '.tippy-content': {
+      width: '200px',
+      backgroundColor: 'grays.500',
+      border: '1px solid',
+      borderColor: 'grays.600',
+      padding: 4,
+      borderRadius: 'medium',
+      whiteSpace: 'normal',
+    },
+  })
+);
+
+export const Text = styled(Element)<{
+  color?: string;
+  size?: string;
+  align?: string;
+}>(props =>
+  css({
+    color: props.color || 'white',
+    fontSize: props.size || 'inherit',
+    textAlign: props.align || 'left',
+  })
+);
+
+export const Link = styled.a(
+  css({
+    color: 'blues.300',
+    textDecoration: 'none',
+  })
+);
+
+const caret =
+  'data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTAgMjQiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjNzU3NTc1Ij48cGF0aCBkPSJtNS4wMDAwNiAxNy0zLjAwMDA2LTRoNnoiLz48cGF0aCBkPSJtNC45OTk5NCA3IDMuMDAwMDYgNGgtNnoiLz48L2c+PC9zdmc+';
+
+export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) =>
+  css({
+    appearance: 'none',
+    backgroundImage: `url(${caret})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: '96% 50%',
+    width: '100%',
+    backgroundColor: 'grays.800',
+    color: 'white',
+    border: '1px solid',
+    borderColor: 'grays.600',
+    borderRadius: 'medium',
+    paddingX: 2,
+    height: 24,
+    boxSizing: 'border-box',
+    fontFamily: 'body',
+    transition: 'backgroundColor',
+    transitionDuration: theme.speeds[2],
+    ':hover': {
+      backgroundColor: 'grays.700',
+    },
+    ':disabled': {
+      opacity: 0.5,
+      cursor: 'not-allowed',
+      ':hover': {
+        backgroundColor: 'grays.800',
+      },
+    },
+  })
+) as StyledComponent<
+  'select',
+  any,
+  StyledComponentInnerOtherProps<typeof Element>
+>;

packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { useOvermind } from 'app/overmind';
+import { ThemeProvider } from 'styled-components';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import theme from '@codesandbox/common/lib/design-language/theme';
+import track from '@codesandbox/common/lib/utils/analytics';
+import { Container, Text, Link, Select } from './elements';
+import * as Icons from './icons';
+
+export const PrivacyTooltip = () => {
+  const {
+    actions: {
+      workspace: { sandboxPrivacyChanged },
+    },
+    state: {
+      user,
+      editor: {
+        currentSandbox: { owned, privacy },
+      },
+    },
+  } = useOvermind();
+
+  useEffect(() => {
+    track('Open Sandbox Privacy Tooltip', { owned });
+  }, [owned]);
+
+  const config = {
+    0: {
+      description: 'Everyone can see this Sandbox',
+      icon: <Icons.Public />,
+    },
+    1: {
+      description:
+        'Only people with a private link are able to see this Sandbox',
+      icon: <Icons.Unlisted />,
+    },
+    2: {
+      description: 'Only you can see this Sandbox.',
+      icon: <Icons.Private />,
+    },
+  };
+
+  const onChange = event => {
+    const value = event.target.value;
+    sandboxPrivacyChanged({
+      privacy: Number(value) as 0 | 1 | 2,
+      source: 'tooltip',
+    });
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Container>
+        <Tooltip
+          delay={0}
+          interactive
+          content={
+            <>
+              <Text size="3" marginBottom={4}>
+                {owned ? (
+                  <>
+                    {user && user.subscription ? (
+                      'Adjust privacy settings.'
+                    ) : (
+                      <>
+                        You can change privacy of a sandbox as a Pro.
+                        <br />
+                        <Link href="/pricing">Upgrade to Pro</Link>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  'The author has set privacy to'
+                )}
+              </Text>
+
+              <Select
+                marginBottom={2}
+                value={privacy}
+                onChange={onChange}
+                disabled={!user || !user.subscription || !owned}
+              >
+                <option value={0}>Public</option>
+                <option value={1}>Unlisted</option>
+                <option value={2}>Private</option>
+              </Select>
+              <Text size="2" color="grays.300">
+                {config[privacy].description}
+              </Text>
+            </>
+          }
+        >
+          {config[privacy].icon}
+        </Tooltip>
+      </Container>
+    </ThemeProvider>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx

@@ -11,8 +11,8 @@ import React, {
   useState,
 } from 'react';
 import { useSpring, animated } from 'react-spring';
-
 import { useOvermind } from 'app/overmind';
+import { PrivacyTooltip } from '../PrivacyTooltip';
 
 import {
   Container,
@@ -109,7 +109,6 @@ export const SandboxName: FunctionComponent = () => {
             </Folder>
           </animated.div>
         )}
-
         {updatingName ? (
           <Form onSubmit={submitNameChange}>
             <NameInput
@@ -140,6 +139,8 @@ export const SandboxName: FunctionComponent = () => {
           </Name>
         )}
 
+        {!updatingName ? <PrivacyTooltip /> : null}
+
         {currentSandbox.customTemplate ? (
           <Tooltip
             content={

packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx

@@ -62,6 +62,7 @@ export const Name = styled.span<{ owned?: boolean }>`
   ${({ theme, owned }) => css`
     color: ${theme.light ? 'black' : 'white'};
     margin-left: 0.25rem;
+    margin-right: ${owned ? 0 : '0.5rem'};
     cursor: ${owned ? 'pointer' : 'initial'};
     text-overflow: ellipsis;
     appearance: ${owned ? 'none' : 'initial'};

packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/elements.ts

@@ -47,6 +47,7 @@ export const Centered = styled.div`
   display: flex;
   justify-content: center;
   z-index: 0; /* So pointer events on left and right continue */
+  z-index: 10; /* override: this probably breaks something, not sure what */
   margin: 0 3rem;
 `;
 

packages/app/src/app/pages/Sandbox/Editor/Header/elements.ts

@@ -35,7 +35,10 @@ export const Privacy: FunctionComponent<Props> = ({ editable }) => {
               onChange={({
                 target: { value },
               }: ChangeEvent<HTMLSelectElement>) =>
-                sandboxPrivacyChanged(Number(value) as 0 | 1 | 2)
+                sandboxPrivacyChanged({
+                  privacy: Number(value) as 0 | 1 | 2,
+                  source: 'sidebar',
+                })
               }
               value={privacy}
             >

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Privacy/index.tsx

@@ -94,7 +94,7 @@ const ContentSplit: React.FC = () => {
               right: 0,
               bottom: bottomOffset,
               height: statusBar ? 'auto' : 'calc(100% - 3.5rem)',
-              zIndex: 999999,
+              zIndex: 9,
             }}
           >
             <SplitPane