diff --git a/packages/app/src/app/components/Create/CreateBox/CreateBoxForm.tsx b/packages/app/src/app/components/Create/CreateBox/CreateBoxForm.tsx index 42449fe6e89..1117b05b0ef 100644 --- a/packages/app/src/app/components/Create/CreateBox/CreateBoxForm.tsx +++ b/packages/app/src/app/components/Create/CreateBox/CreateBoxForm.tsx @@ -8,9 +8,11 @@ import { Input, Icon, Select, + MessageStripe, } from '@codesandbox/components'; import { useActions, useAppState, useEffects } from 'app/overmind'; +import { useWorkspaceFeatureFlags } from 'app/hooks/useWorkspaceFeatureFlags'; import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription'; import { useGlobalPersistedState } from 'app/hooks/usePersistedState'; import { PATHED_SANDBOXES_FOLDER_QUERY } from 'app/pages/Dashboard/queries'; @@ -56,6 +58,12 @@ export const CreateBoxForm: React.FC = ({ const { activeTeamInfo, activeTeam, hasLogIn } = useAppState(); const { signInClicked } = useActions(); const { highestAllowedVMTier, isFrozen } = useWorkspaceLimits(); + const { blockDevboxCreation } = useWorkspaceFeatureFlags(); + + // Devboxes are being deprecated. When the team has the flag set, surface the + // deprecation banner, disable the Devbox runtime option, and block creating + // one (relevant for Devbox-only templates that can't fall back to Sandbox). + const devboxBlocked = runtime === 'vm' && blockDevboxCreation; const [name, setName] = useState(); const effects = useEffects(); const nameInputRef = useRef(null); @@ -150,6 +158,22 @@ export const CreateBoxForm: React.FC = ({ > Configure + + {blockDevboxCreation && ( + + Devboxes are being deprecated and will be removed soon. Make sure to + export or migrate any work you want to keep before then. + + Learn more + + + )} + Name @@ -268,7 +292,7 @@ export const CreateBoxForm: React.FC = ({ type="button" data-selected={runtime === 'vm'} onClick={() => setRuntime('vm')} - disabled={!runsOnVM} + disabled={!runsOnVM || blockDevboxCreation} > @@ -287,6 +311,12 @@ export const CreateBoxForm: React.FC = ({ )} + {blockDevboxCreation && ( + + Devboxes are being deprecated. + + )} + {!activeTeamInfo?.featureFlags.ubbBeta && activeTeamInfo?.subscription.status && ( @@ -377,7 +407,7 @@ export const CreateBoxForm: React.FC = ({