fix: fork browser sandbox if multiple can be created (#8537)

* fix: fork browser sandbox if multiple can be created * fix: choose id depending on what's given

Author: CompuIves

packages/app/src/app/components/Create/CreateBox.tsx

@@ -163,7 +163,14 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
 
  const createFromTemplate = (
  sandbox: SandboxToFork,
- { name, createAs, permission, editor, customVMTier }: CreateParams
+ {
+ name,
+ createAs,
+ permission,
+ editor,
+ customVMTier,
+ sandboxId,
+ }: CreateParams
  ) => {
  const openInVSCode = editor === 'vscode';
 
@@ -177,7 +184,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
 
  actions.editor
  .forkExternalSandbox({
- sandboxId: sandbox.id,
+ sandboxId,
  openInNewWindow: false,
  openInVSCode,
  autoLaunchVSCode,

packages/app/src/app/components/Create/CreateBox/CreateBoxForm.tsx

@@ -121,6 +121,10 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
  e.preventDefault();
 
  onSubmit({
+ sandboxId:
+ runtime === 'browser'
+ ? template.browserSandboxId ?? template.id
+ : template.id,
  name,
  createAs: runtime === 'browser' ? 'sandbox' : 'devbox',
  permission,

packages/app/src/app/components/Create/utils/types.ts

@@ -2,6 +2,7 @@ import { GetGithubRepoQuery } from 'app/graphql/types';
 import { TemplateType } from '@codesandbox/common/lib/templates';
 
 export type CreateParams = {
+ sandboxId: string;
  name?: string;
  createAs: 'devbox' | 'sandbox';
  permission: 0 | 1 | 2;