feat: add vm tier setting when creating a devbox

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

@@ -129,16 +129,18 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
 
   const createFromTemplate = (
     template: TemplateFragment,
-    { name, createAs, permission, editor }: CreateParams
+    { name, createAs, permission, editor, customVMTier }: CreateParams
   ) => {
     const { sandbox } = template;
     const openInVSCode = editor === 'vscode';
 
     track(`Create ${type} - Create`, {
       type: 'fork',
+      title: name,
       template_name:
         template.sandbox.title || template.sandbox.alias || template.sandbox.id,
       open_in_editor: editor,
+      ...(customVMTier ? { vm_tier: customVMTier } : {}),
     });
 
     actions.editor.forkExternalSandbox({
@@ -147,6 +149,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
       openInVSCode,
       autoLaunchVSCode,
       hasBetaEditorExperiment,
+      customVMTier,
       body: {
         title: name,
         collectionId,

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

@@ -18,6 +18,7 @@ import { Query } from 'react-apollo';
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
 import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { Link } from 'react-router-dom';
+import { VMTier } from 'app/overmind/effects/api/types';
 import { CreateParams } from '../utils/types';
 
 interface CreateBoxFormProps {
@@ -42,12 +43,16 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
   const label = type === 'sandbox' ? 'Sandbox' : 'Devbox';
 
   const { activeTeamInfo, activeTeam } = useAppState();
-  const { hasReachedSandboxLimit, hasReachedDraftLimit } = useWorkspaceLimits();
+  const {
+    hasReachedSandboxLimit,
+    hasReachedDraftLimit,
+    highestAllowedVMTier,
+  } = useWorkspaceLimits();
   const { isAdmin } = useWorkspaceAuthorization();
   const [name, setName] = useState<string>();
   const effects = useEffects();
   const nameInputRef = useRef<HTMLInputElement>(null);
-  const { isPro } = useWorkspaceSubscription();
+  const { isFree } = useWorkspaceSubscription();
   const isDraft = collectionId === undefined;
   const canSetPrivacy = !isDraft;
   const canCreateDraft = !hasReachedDraftLimit;
@@ -65,21 +70,9 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
     'csb'
   );
 
-  const defaultSpecs =
-    // eslint-disable-next-line no-nested-ternary
-    type === 'sandbox'
-      ? 'Browser'
-      : isPro
-      ? '4 vCPUs - 8GiB RAM - 12GB disk'
-      : '2 vCPUs - 2GiB RAM - 6GB disk';
-
-  const specsInfo =
-    // eslint-disable-next-line no-nested-ternary
-    type === 'sandbox'
-      ? 'Sandboxes run in your browser.'
-      : isPro
-      ? 'VM specs are currently tied to your Pro subscription.'
-      : 'Better specs are available for Pro workspaces';
+  const defaultTier = isFree ? 1 : 2;
+  const [selectedTier, setSelectedTier] = useState<number>(defaultTier);
+  const [availableTiers, setAvailableTiers] = useState<VMTier[]>([]);
 
   useEffect(() => {
     effects.api.getSandboxTitle().then(({ title }) => {
@@ -89,6 +82,13 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
         nameInputRef.current.select();
       }
     });
+    if (type === 'devbox') {
+      effects.api.getVMSpecs().then(res => {
+        setAvailableTiers(
+          res.vmTiers.filter(t => t.tier <= highestAllowedVMTier)
+        );
+      });
+    }
   }, []);
 
   return (
@@ -109,6 +109,11 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
           createAs: type,
           permission,
           editor: type === 'sandbox' ? 'csb' : editor, // ensure 'csb' is always passed when creating a sandbox
+          customVMTier:
+            // Only pass customVMTier if user selects something else than the default
+            availableTiers.length > 0 && selectedTier !== defaultTier
+              ? selectedTier
+              : undefined,
         });
       }}
     >
@@ -285,15 +290,38 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
           <Text size={3} as="label">
             Runtime
           </Text>
-          <Input
-            css={{ cursor: 'not-allowed' }}
-            value={defaultSpecs}
-            disabled
-          />
-          <Stack gap={1} align="center" css={{ color: '#A8BFFA' }}>
-            <Icon name="circleBang" />
-            <Text size={3}>{specsInfo}</Text>
-          </Stack>
+          {type === 'sandbox' ? (
+            <>
+              <Input css={{ cursor: 'not-allowed' }} value="Browser" disabled />
+              <Stack gap={1} align="center" css={{ color: '#A8BFFA' }}>
+                <Icon name="circleBang" />
+                <Text size={3}>Sandboxes run in your browser.</Text>
+              </Stack>
+            </>
+          ) : (
+            <>
+              <Select
+                value={selectedTier}
+                disabled={availableTiers.length === 0}
+                onChange={e => setSelectedTier(parseInt(e.target.value, 10))}
+              >
+                {availableTiers.map(t => (
+                  <option key={t.shortid} value={t.tier}>
+                    {t.name} ({t.cpu} vCPUs, {t.memory} GiB RAM, {t.storage} GB
+                    Disk for {t.creditBasis} credits/hour)
+                  </option>
+                ))}
+              </Select>
+              {isFree && (
+                <Stack gap={1} align="center" css={{ color: '#A8BFFA' }}>
+                  <Icon name="circleBang" />
+                  <Text size={3}>
+                    Better specs are available for Pro workspaces.
+                  </Text>
+                </Stack>
+              )}
+            </>
+          )}
         </Stack>
       </Stack>
 

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

@@ -5,6 +5,7 @@ export type CreateParams = {
   createAs: 'devbox' | 'sandbox';
   permission: 0 | 1 | 2;
   editor: 'csb' | 'vscode';
+  customVMTier?: number;
 };
 
 export interface TemplateCollection {

packages/app/src/app/graphql/types.ts

@@ -2058,6 +2058,12 @@ export type RootMutationType = {
    * Not passing a specific argument will leave it unchanged, explicitly passing `null` will revert it to the default.
    */
   updateProjectSettings: ProjectSettings;
+  /**
+   * Update the VM tier of a project. All branches will start using this new VM tier as soon as the user connects
+   * to the branch (also for running branches). To optimistically update a branch without reload/reconnect,
+   * you can pass a branch ID as well that we'll update immediately.
+   */
+  updateProjectVmTier: Resources;
   /**
    * Update the settings for a sandbox. All settings are nullable.
    * Not passing a specific argument will leave it unchanged, explicitly passing `null` will revert it to the default.
@@ -2623,6 +2629,12 @@ export type RootMutationTypeUpdateProjectSettingsArgs = {
   projectId: Scalars['UUID4'];
 };
 
+export type RootMutationTypeUpdateProjectVmTierArgs = {
+  branchId: InputMaybe<Scalars['String']>;
+  projectId: Scalars['UUID4'];
+  vmTier: Scalars['Int'];
+};
+
 export type RootMutationTypeUpdateSandboxSettingsArgs = {
   aiConsent: InputMaybe<Scalars['Boolean']>;
   sandboxId: Scalars['ID'];
@@ -4719,6 +4731,7 @@ export type CurrentTeamInfoFragmentFragment = {
     includedCredits: number;
     includedSandboxes: number;
     includedDrafts: number;
+    includedVmTier: number;
     onDemandCreditLimit: number | null;
   };
   usage: { __typename?: 'TeamUsage'; sandboxes: number; credits: number };
@@ -6127,6 +6140,7 @@ export type GetTeamQuery = {
         includedCredits: number;
         includedSandboxes: number;
         includedDrafts: number;
+        includedVmTier: number;
         onDemandCreditLimit: number | null;
       };
       usage: { __typename?: 'TeamUsage'; sandboxes: number; credits: number };

packages/app/src/app/hooks/useWorkspaceLimits.ts

@@ -20,6 +20,7 @@ export const useWorkspaceLimits = (): WorkspaceLimitsReturn => {
       isFrozen: undefined,
       hasReachedSandboxLimit: undefined,
       hasReachedDraftLimit: undefined,
+      highestAllowedVMTier: undefined,
     };
   }
 
@@ -49,7 +50,11 @@ export const useWorkspaceLimits = (): WorkspaceLimitsReturn => {
   const userDrafts =
     userAuthorizations.find(ua => ua.userId === user.id)?.drafts ?? 0;
   const hasReachedDraftLimit =
-    applyUbbRestrictions && isFree === true && userDrafts >= limits.includedDrafts;
+    applyUbbRestrictions &&
+    isFree === true &&
+    userDrafts >= limits.includedDrafts;
+
+  const highestAllowedVMTier = limits.includedVmTier;
 
   return {
     isOutOfCredits,
@@ -64,6 +69,7 @@ export const useWorkspaceLimits = (): WorkspaceLimitsReturn => {
       isAtSpendingLimit ||
       isCloseToSpendingLimit,
     isFrozen: applyUbbRestrictions && frozen,
+    highestAllowedVMTier,
   };
 };
 
@@ -77,6 +83,7 @@ export type WorkspaceLimitsReturn =
       isFrozen: undefined;
       hasReachedSandboxLimit: undefined;
       hasReachedDraftLimit: undefined;
+      highestAllowedVMTier: undefined;
     }
   | {
       isOutOfCredits: boolean;
@@ -87,4 +94,5 @@ export type WorkspaceLimitsReturn =
       isFrozen: boolean;
       hasReachedSandboxLimit: boolean;
       hasReachedDraftLimit: boolean;
+      highestAllowedVMTier: number;
     };

packages/app/src/app/overmind/effects/api/index.ts

@@ -678,4 +678,12 @@ export default {
     // version null ensures no /v1 is in the URL
     return api.get('/vm_tiers', undefined, { version: null });
   },
+  setVMSpecs(sandboxId: string, vmTier: number) {
+    console.log('vm_tier', vmTier);
+    console.log('type', typeof vmTier);
+
+    return api.patch(`/sandboxes/${sandboxId}/vm_tier`, {
+      vmTier,
+    });
+  },
 };

packages/app/src/app/overmind/effects/api/types.ts

@@ -63,6 +63,7 @@ export type VMTier = {
   memory: number;
   storage: number;
   creditBasis: number;
+  tier: number;
 };
 
 export type APIPricingResult = {

packages/app/src/app/overmind/effects/gql/dashboard/fragments.ts

@@ -231,6 +231,7 @@ export const currentTeamInfoFragment = gql`
       includedCredits
       includedSandboxes
       includedDrafts
+      includedVmTier
       onDemandCreditLimit
     }
 

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

@@ -754,13 +754,15 @@ export const forkExternalSandbox = async (
     openInVSCode,
     autoLaunchVSCode,
     hasBetaEditorExperiment,
+    customVMTier,
     body,
   }: {
     sandboxId: string;
     openInNewWindow?: boolean;
     openInVSCode?: boolean;
     autoLaunchVSCode?: boolean;
     hasBetaEditorExperiment?: boolean;
+    customVMTier?: number;
     body?: {
       collectionId: string;
       alias?: string;
@@ -770,7 +772,7 @@ export const forkExternalSandbox = async (
     };
   }
 ) => {
-  effects.analytics.track('Fork Sandbox', { type: 'external' });
+  effects.analytics.track('Fork Sandbox', { type: 'external', sandboxId });
 
   const usedBody: ForkSandboxBody = body || {};
 
@@ -780,6 +782,11 @@ export const forkExternalSandbox = async (
 
   try {
     const forkedSandbox = await effects.api.forkSandbox(sandboxId, usedBody);
+
+    if (customVMTier) {
+      await effects.api.setVMSpecs(forkedSandbox.id, customVMTier);
+    }
+
     if (openInVSCode) {
       if (autoLaunchVSCode) {
         window.open(vsCodeUrl(forkedSandbox.id));

packages/app/src/app/utils/fuzzyMatchGithubToCsb.ts

@@ -17,17 +17,13 @@ export const fuzzyMatchGithubToCsb = (
 
   if (bestMatch) {
     track('Match GH to CSB - success', {
-      codesandbox: 'V1',
-      event_source: 'UI',
+      match: bestMatch.login,
     });
 
     return bestMatch;
   }
 
-  track('Match GH to CSB - fail', {
-    codesandbox: 'V1',
-    event_source: 'UI',
-  });
+  track('Match GH to CSB - fail');
 
   return accounts[0];
 };