feat: exprimental option to open sandboxes in v2 (#8166)

* feat: add experimental beta sandbox flag

* feat: storage with subscription

* fix: update all sandbox urls

* feat: add data request to rows

* feat: Update CreateSandbox and BetaEditor components

Update CreateSandbox and BetaEditor components with new features and improvements.

* keep the v1 link for sse

* ROWS_KEY in env

* style: Ignore TypeScript error

* rows integration only in prod

* feat: Added isSse property to queries and router

Added isSse property to queries.ts and router.ts files

* fix: ensure sse flag for all templates

* fix: v2 links open without history.push

* fix: undo changes in areas where v2 links are not done

* feat: Rename experiments to Preferences

Rename the 'experiments' component to 'Preferences'

---------

Co-authored-by: Danilo Woznica <[email protected]>

Author: alexnm

.env

@@ -2,4 +2,5 @@ AMPLITUDE_API_KEY=a205ed9b06a7baf5a594bdd30293aa80
 SENTRY_DSN=https://[email protected]/2071895
 IS_ONPREM=false
 USE_STATIC_PREVIEW=false
-PREVIEW_DOMAIN=csb.app
+PREVIEW_DOMAIN=csb.app
+ROWS_API_KEY=""

packages/app/src/app/components/CreateSandbox/CreateSandbox.tsx

@@ -16,6 +16,7 @@ import track from '@codesandbox/common/lib/utils/analytics';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 
 import { useCreateCheckout } from 'app/hooks';
+import { useGlobalPersistedState } from 'app/hooks/usePersistedState';
 import {
   Container,
   Tab,
@@ -39,6 +40,7 @@ import { GithubRepoToImport } from './Import/types';
 import { ImportInfo } from './Import/ImportInfo';
 import { FromRepo } from './Import/FromRepo';
 import { ImportSandbox } from './ImportSandbox';
+import { ExperimentalBetaEditor } from './ExperimentalBetaEditor';
 
 export const COLUMN_MEDIA_THRESHOLD = 1600;
 
@@ -187,6 +189,11 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
     });
   };
 
+  const [hasBetaEditorExperiment] = useGlobalPersistedState(
+    'BETA_SANDBOX_EDITOR',
+    false
+  );
+
   const createFromTemplate = (
     template: TemplateFragment,
     { name }: CreateSandboxParams
@@ -196,6 +203,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
     actions.editor.forkExternalSandbox({
       sandboxId: sandbox.id,
       openInNewWindow: false,
+      hasBetaEditorExperiment,
       body: {
         alias: name,
         collectionId,
@@ -215,7 +223,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
 
   const openTemplate = (template: TemplateFragment) => {
     const { sandbox } = template;
-    const url = sandboxUrl(sandbox);
+    const url = sandboxUrl(sandbox, hasBetaEditorExperiment);
     window.open(url, '_blank');
   };
 
@@ -449,7 +457,7 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                   officialTemplates={officialTemplates}
                 />
               ) : (
-                <>
+                <Stack direction="vertical" gap={2}>
                   <Panel tab={tabState} id="quickstart">
                     <TemplateCategoryList
                       canCheckout={canCheckout}
@@ -666,7 +674,10 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
                         </Panel>
                       ))
                     : null}
-                </>
+                  {tabState.selectedId === 'quickstart' && (
+                    <ExperimentalBetaEditor />
+                  )}
+                </Stack>
               ))}
 
             {viewState === 'fromTemplate' ? (

packages/app/src/app/components/CreateSandbox/ExperimentalBetaEditor.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  Badge,
+  MessageStripe,
+  Stack,
+  Text,
+  Switch,
+} from '@codesandbox/components';
+import { useGlobalPersistedState } from 'app/hooks/usePersistedState';
+import { useActions } from 'app/overmind';
+import track from '@codesandbox/common/lib/utils/analytics';
+import { UnstyledButtonLink } from './elements';
+
+export const ExperimentalBetaEditor = () => {
+  const actions = useActions();
+  const [betaSandboxEditor, setBetaSandboxEditor] = useGlobalPersistedState(
+    'BETA_SANDBOX_EDITOR',
+    false
+  );
+
+  if (betaSandboxEditor) {
+    return (
+      <Stack justify="center" padding={2}>
+        <Text size={3}>
+          Open{' '}
+          <UnstyledButtonLink
+            onClick={() => {
+              actions.modals.newSandboxModal.close();
+              actions.preferences.openPreferencesModal('experiments');
+            }}
+          >
+            Preferences
+          </UnstyledButtonLink>{' '}
+          to disable the new sandbox editor
+        </Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <MessageStripe variant="primary">
+      <Stack direction="horizontal" justify="space-between" align="center">
+        <Stack direction="horizontal" align="center" gap={1}>
+          <Badge icon="sandbox" variant="highlight">
+            Beta
+          </Badge>
+          <Text weight="500">Try the new sandbox editor.</Text>
+          <Text>For a faster and more stable prototyping experience.</Text>
+        </Stack>
+        <Switch
+          onChange={() => {
+            setBetaSandboxEditor(true);
+            track('Enable new sandbox editor - Create modal');
+          }}
+        />
+      </Stack>
+    </MessageStripe>
+  );
+};

packages/app/src/app/components/CreateSandbox/SearchResults/SearchResultList.tsx

@@ -2,6 +2,8 @@ import React, { useEffect } from 'react';
 import { connectInfiniteHits } from 'react-instantsearch-dom';
 import { InfiniteHitsProvided } from 'react-instantsearch-core';
 import { AlgoliaSandboxHit } from '@codesandbox/common/lib/types/algolia';
+import { isServer } from '@codesandbox/common/lib/templates/helpers/is-server';
+import type { TemplateType } from '@codesandbox/common/lib/templates';
 import { TemplateFragment } from 'app/graphql/types';
 import { TemplateGrid } from '../elements';
 import { TemplateCard } from '../TemplateCard';
@@ -60,6 +62,7 @@ const Results = (props: ResultsProps) => {
         template: hit.template,
       },
       team: hit.team,
+      isSse: isServer(hit.template as TemplateType),
     },
   }));
 

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

@@ -3,7 +3,7 @@ import { Tab as BaseTab, TabList, TabPanel } from 'reakit/Tab';
 import { Select } from '@codesandbox/components';
 
 export const Container = styled.div`
-  height: 500px;
+  height: 530px;
   overflow: hidden;
   border-radius: 4px;
   background-color: #151515;
@@ -158,3 +158,15 @@ export const StyledSelect = styled(Select)`
     color: #e5e5e5;
   }
 `;
+
+export const UnstyledButtonLink = styled.button`
+  appearance: none;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  border: none;
+  font-size: inherit;
+  font-family: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+`;

packages/app/src/app/components/CreateSandbox/queries.ts

@@ -14,6 +14,7 @@ const TEMPLATE_FRAGMENT = gql`
       insertedAt
       updatedAt
       isV2
+      isSse
 
       team {
         name

packages/app/src/app/components/CreateSandbox/utils/api.ts

@@ -1,4 +1,5 @@
 import { TemplateType } from '@codesandbox/common/lib/templates';
+import { isServer } from '@codesandbox/common/lib/templates/helpers/is-server';
 import { TemplateInfo } from '../types';
 
 interface IExploreTemplate {
@@ -61,6 +62,7 @@ const mapAPIResponseToTemplateInfo = (
         name: 'CodeSandbox',
       },
       isV2: sandbox.v2,
+      isSse: isServer(sandbox.environment),
       git: sandbox.git && {
         id: sandbox.git.id,
         username: sandbox.git.username,