feat(dashboard): add Devbox deprecation banner and blocking modal

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<CreateBoxFormProps> = ({
   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<string>();
   const effects = useEffects();
   const nameInputRef = useRef<HTMLInputElement>(null);
@@ -150,6 +158,22 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
         >
           Configure
         </Text>
+
+        {blockDevboxCreation && (
+          <MessageStripe justify="space-between" variant="warning">
+            Devboxes are being deprecated and will be removed soon. Make sure to
+            export or migrate any work you want to keep before then.
+            <MessageStripe.Action
+              as="a"
+              href="https://codesandbox.io/docs"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Learn more
+            </MessageStripe.Action>
+          </MessageStripe>
+        )}
+
         <Stack direction="vertical" gap={2}>
           <Text size={3} as="label">
             Name
@@ -268,7 +292,7 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
               type="button"
               data-selected={runtime === 'vm'}
               onClick={() => setRuntime('vm')}
-              disabled={!runsOnVM}
+              disabled={!runsOnVM || blockDevboxCreation}
             >
               <Stack direction="vertical" gap={2}>
                 <Stack gap={1}>
@@ -287,6 +311,12 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
                   </Text>
                 )}
 
+                {blockDevboxCreation && (
+                  <Text size={3} css={{ color: '#F7CC66' }}>
+                    Devboxes are being deprecated.
+                  </Text>
+                )}
+
                 {!activeTeamInfo?.featureFlags.ubbBeta &&
                   activeTeamInfo?.subscription.status && (
                     <Stack gap={1} align="center" css={{ color: '#A8BFFA' }}>
@@ -377,7 +407,7 @@ export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
             <Button
               type="submit"
               variant="primary"
-              disabled={isFrozen && runtime === 'vm'}
+              disabled={(isFrozen && runtime === 'vm') || devboxBlocked}
               autoWidth
               loading={loading}
             >

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

@@ -506,6 +506,7 @@ export type TeamFeatureFlags = {
   __typename?: 'TeamFeatureFlags';
   blockRepoImport: Scalars['Boolean'];
   blockBranchCreation: Scalars['Boolean'];
+  blockDevboxCreation: Scalars['Boolean'];
   friendOfCsb: Scalars['Boolean'];
   ubbBeta: Scalars['Boolean'];
 };
@@ -3575,6 +3576,7 @@ export type TeamFragmentDashboardFragment = {
     __typename?: 'TeamFeatureFlags';
     blockRepoImport: boolean;
     blockBranchCreation: boolean;
+    blockDevboxCreation: boolean;
     ubbBeta: boolean;
     friendOfCsb: boolean;
   };
@@ -3699,6 +3701,7 @@ export type CurrentTeamInfoFragmentFragment = {
     __typename?: 'TeamFeatureFlags';
     blockRepoImport: boolean;
     blockBranchCreation: boolean;
+    blockDevboxCreation: boolean;
     ubbBeta: boolean;
     friendOfCsb: boolean;
   };
@@ -3874,6 +3877,7 @@ export type _CreateTeamMutation = {
       __typename?: 'TeamFeatureFlags';
       blockRepoImport: boolean;
       blockBranchCreation: boolean;
+      blockDevboxCreation: boolean;
       ubbBeta: boolean;
       friendOfCsb: boolean;
     };
@@ -4733,6 +4737,7 @@ export type AllTeamsQuery = {
         __typename?: 'TeamFeatureFlags';
         blockRepoImport: boolean;
         blockBranchCreation: boolean;
+        blockDevboxCreation: boolean;
         ubbBeta: boolean;
         friendOfCsb: boolean;
       };
@@ -5184,6 +5189,7 @@ export type GetTeamQuery = {
         __typename?: 'TeamFeatureFlags';
         blockRepoImport: boolean;
         blockBranchCreation: boolean;
+        blockDevboxCreation: boolean;
         ubbBeta: boolean;
         friendOfCsb: boolean;
       };

packages/app/src/app/hooks/useWorkspaceFeatureFlags.ts

@@ -3,6 +3,7 @@ import { useAppState } from 'app/overmind';
 export type FeatureFlags = {
   blockRepoImport: boolean;
   blockBranchCreation: boolean;
+  blockDevboxCreation: boolean;
   ubbBeta: boolean;
   friendOfCsb: boolean;
 };
@@ -14,6 +15,7 @@ export const useWorkspaceFeatureFlags = (): FeatureFlags => {
     return {
       blockRepoImport: false,
       blockBranchCreation: false,
+      blockDevboxCreation: false,
       ubbBeta: false,
       friendOfCsb: false,
     };
@@ -22,6 +24,7 @@ export const useWorkspaceFeatureFlags = (): FeatureFlags => {
   return {
     blockRepoImport: activeTeamInfo.featureFlags.blockRepoImport,
     blockBranchCreation: activeTeamInfo.featureFlags.blockBranchCreation,
+    blockDevboxCreation: activeTeamInfo.featureFlags.blockDevboxCreation,
     ubbBeta: activeTeamInfo.featureFlags.ubbBeta,
     friendOfCsb: activeTeamInfo.featureFlags.friendOfCsb,
   };

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

@@ -160,7 +160,8 @@ type ModalName =
   | 'minimumPrivacy'
   | 'import'
   | 'create'
-  | 'branchCreationDeprecated';
+  | 'branchCreationDeprecated'
+  | 'devboxCreationDeprecated';
 
 export const modalOpened = (
   { state, effects }: Context,

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

@@ -162,6 +162,7 @@ export const teamFragmentDashboard = gql`
     featureFlags {
       blockRepoImport
       blockBranchCreation
+      blockDevboxCreation
       ubbBeta
       friendOfCsb
     }
@@ -281,6 +282,7 @@ export const currentTeamInfoFragment = gql`
     featureFlags {
       blockRepoImport
       blockBranchCreation
+      blockDevboxCreation
       ubbBeta
       friendOfCsb
     }

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

@@ -1868,6 +1868,13 @@ export const forkSandbox = async (
     };
   }
 ) => {
+  // Devboxes (v2) are being deprecated. Block creating and forking them and
+  // surface the deprecation modal instead, mirroring the banner content.
+  if (body?.v2 && state.activeTeamInfo?.featureFlags.blockDevboxCreation) {
+    actions.modalOpened({ modal: 'devboxCreationDeprecated' });
+    return undefined;
+  }
+
   effects.analytics.track('Fork Sandbox', { type: 'external', sandboxId });
 
   const usedBody: ForkSandboxBody = body || {};

packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/SandboxMenu.tsx

@@ -102,6 +102,9 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
               sandboxId: sandbox.id,
               openInNewWindow: true,
               redirectAfterFork: true,
+              body: {
+                v2: sandbox.isV2,
+              },
             });
           }}
         >
@@ -149,6 +152,7 @@ export const SandboxMenu: React.FC<SandboxMenuProps> = ({
               openInNewWindow: true,
               redirectAfterFork: true,
               body: {
+                v2: sandbox.isV2,
                 privacy: 'privacy' in sandbox ? sandbox.privacy as 2 | 1 | 0 : undefined,
                 collectionId: 'draft' in sandbox && sandbox.draft ? undefined : 'collection' in sandbox && sandbox.collection.id,
               },

packages/app/src/app/pages/Dashboard/Components/shared/DevboxDeprecationStripe.tsx

@@ -0,0 +1,19 @@
+import { MessageStripe } from '@codesandbox/components';
+import React from 'react';
+
+export const DevboxDeprecationStripe: React.FC = () => {
+  return (
+    <MessageStripe justify="space-between" variant="warning">
+      Devboxes are being deprecated and will be removed soon. Make sure to
+      export or migrate any work you want to keep before then.
+      <MessageStripe.Action
+        as="a"
+        href="https://codesandbox.io/docs"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        Learn more
+      </MessageStripe.Action>
+    </MessageStripe>
+  );
+};

packages/app/src/app/pages/Dashboard/Content/routes/Recent/index.tsx

@@ -3,11 +3,13 @@ import { useAppState, useActions } from 'app/overmind';
 import { sandboxesTypes } from 'app/overmind/namespaces/dashboard/types';
 import { Helmet } from 'react-helmet';
 import { DashboardBranch, DashboardSandbox } from 'app/pages/Dashboard/types';
-import { Loading, Stack } from '@codesandbox/components';
+import { Element, Loading, Stack } from '@codesandbox/components';
 import { RepoInfo } from 'app/overmind/namespaces/sidebar/types';
 import { StyledContentWrapper } from 'app/pages/Dashboard/Components/shared/elements';
 import { ContentSection } from 'app/pages/Dashboard/Components/shared/ContentSection';
+import { DevboxDeprecationStripe } from 'app/pages/Dashboard/Components/shared/DevboxDeprecationStripe';
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
+import { useWorkspaceFeatureFlags } from 'app/hooks/useWorkspaceFeatureFlags';
 import { TopBanner } from './TopBanner';
 import { CreateBranchesRow } from './CreateBranchesRow';
 import { ItemsGrid } from './ItemsGrid';
@@ -20,6 +22,7 @@ export const Recent = () => {
     dashboard: { sandboxes },
   } = useAppState();
   const { isFrozen } = useWorkspaceLimits();
+  const { blockDevboxCreation } = useWorkspaceFeatureFlags();
   const {
     dashboard: { getPage, getWorkspaceSandboxes },
   } = useActions();
@@ -143,6 +146,12 @@ export const Recent = () => {
 
       <TopBanner />
 
+      {blockDevboxCreation && (
+        <Element paddingX={4} paddingBottom={4}>
+          <DevboxDeprecationStripe />
+        </Element>
+      )}
+
       <ContentSection title="Recent">
         {recentRepos.length > 0 && (
           <CreateBranchesRow

packages/app/src/app/pages/Dashboard/Content/routes/Sandboxes/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router-dom';
+import { Element } from '@codesandbox/components';
 import track from '@codesandbox/common/lib/utils/analytics';
 import { useAppState, useActions } from 'app/overmind';
 import { EmptyPage } from 'app/pages/Dashboard/Components/EmptyPage';
@@ -9,8 +10,10 @@ import { SelectionProvider } from 'app/pages/Dashboard/Components/Selection';
 import { VariableGrid } from 'app/pages/Dashboard/Components/VariableGrid';
 import { DashboardGridItem, PageTypes } from 'app/pages/Dashboard/types';
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
+import { useWorkspaceFeatureFlags } from 'app/hooks/useWorkspaceFeatureFlags';
 import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
 import { ActionCard } from 'app/pages/Dashboard/Components/shared/ActionCard';
+import { DevboxDeprecationStripe } from 'app/pages/Dashboard/Components/shared/DevboxDeprecationStripe';
 import { useFilteredItems } from './useFilteredItems';
 
 export const SandboxesPage = () => {
@@ -22,6 +25,7 @@ export const SandboxesPage = () => {
   const items = useFilteredItems(currentPath, cleanParam, level);
   const actions = useActions();
   const { isFrozen } = useWorkspaceLimits();
+  const { blockDevboxCreation } = useWorkspaceFeatureFlags();
   const { hasEditorAccess } = useWorkspaceAuthorization();
   const {
     dashboard: { allCollections },
@@ -86,6 +90,12 @@ export const SandboxesPage = () => {
         showSortOptions={!isEmpty && Boolean(currentPath)}
       />
 
+      {blockDevboxCreation && (
+        <Element paddingX={4} paddingBottom={4}>
+          <DevboxDeprecationStripe />
+        </Element>
+      )}
+
       {isEmpty ? (
         <EmptyPage.StyledWrapper>
           <EmptyPage.StyledGrid>

packages/app/src/app/pages/common/Modals/DevboxCreationDeprecatedModal/index.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent } from 'react';
+import { useActions } from 'app/overmind';
+import { Alert } from '../Common/Alert';
+
+export const DevboxCreationDeprecatedModal: FunctionComponent = () => {
+  const { modalClosed } = useActions();
+
+  return (
+    <Alert
+      title="Devboxes are being deprecated"
+      description={
+        <>
+          Creating and forking Devboxes is being deprecated and will be removed
+          soon. Make sure to export or migrate any work you want to keep before
+          then.{' '}
+          <a
+            href="https://codesandbox.io/docs"
+            target="_blank"
+            rel="noreferrer noopener"
+            style={{ color: '#E4FC82' }}
+          >
+            Learn more.
+          </a>
+        </>
+      }
+      confirmMessage="Close"
+      type="secondary"
+      onPrimaryAction={modalClosed}
+    />
+  );
+};

packages/app/src/app/pages/common/Modals/index.tsx

@@ -22,6 +22,7 @@ import { AccountDeletionConfirmationModal } from './AccountDeletion/DeletedConfi
 import { UndoAccountDeletionModal } from './UndoAccountDeletion';
 import { UndoAccountDeletionConfirmationModal } from './UndoAccountDeletion/UndoDeletedConfirmation';
 import { BranchCreationDeprecatedModal } from './BranchCreationDeprecatedModal';
+import { DevboxCreationDeprecatedModal } from './DevboxCreationDeprecatedModal';
 
 const modals = {
   preferences: {
@@ -97,6 +98,10 @@ const modals = {
     Component: BranchCreationDeprecatedModal,
     width: 450,
   },
+  devboxCreationDeprecated: {
+    Component: DevboxCreationDeprecatedModal,
+    width: 450,
+  },
 };
 
 const Modals: FunctionComponent = () => {