feat: add back terminalUpgrade tab

codesandbox · Oct 18, 2023 · ddccf0e · ddccf0e
1 parent 9280eaf
commit ddccf0e
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 6 deletions.
diff --git a/packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx
@@ -23,6 +23,7 @@ interface Props {
   views: IViews;
   disableLogging: boolean;
   isOnEmbedPage: boolean;
+  isOnPrem: boolean;
 }
 
 export const DevToolTabs = ({
@@ -38,6 +39,7 @@ export const DevToolTabs = ({
   disableLogging,
   status,
   isOnEmbedPage,
+  isOnPrem,
 }: Props) => {
   const currentPane = views[panes[currentPaneIndex].id];
   const actions =
@@ -54,6 +56,7 @@ export const DevToolTabs = ({
       <Tabs>
         {panes
           .filter(pane => (isOnEmbedPage ? !pane.hideOnEmbedPage : true))
+          .filter(pane => (isOnPrem ? !pane.hideOnEmbedPage : true))
           .map((pane, i) => {
             const active = !hidden && i === currentPaneIndex;
             const view = views[pane.id];

diff --git a/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/elements.ts b/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/elements.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const StyledTitle = styled.div`
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 1rem;
+  color: ${props =>
+    props.theme.light ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.4)'};
+  width: 100%;
+  padding: 1rem;
+  border-bottom: 2px solid;
+  border-color: ${props =>
+    props.theme.light ? 'rgba(0, 0, 0, 0.3)' : 'rgba(255, 255, 255, 0.3)'};
+`;
diff --git a/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/index.tsx b/packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/index.tsx
@@ -0,0 +1,101 @@
+import { Button, ThemeProvider, Text, Stack } from '@codesandbox/components';
+import React from 'react';
+import themeType from '@codesandbox/common/lib/theme';
+
+import { withTheme } from 'styled-components';
+import { useUpgradeFromV1ToV2 } from 'app/hooks/useUpgradeFromV1ToV2';
+import { DevToolProps } from '..';
+import { StyledTitle } from './elements';
+
+type StyledProps = DevToolProps & {
+  theme: typeof themeType & { light: boolean };
+};
+
+export const TerminalUpgradeComponent: React.FC<StyledProps> = ({
+  hidden,
+  theme,
+}) => {
+  const { perform, loading, canConvert } = useUpgradeFromV1ToV2('Terminal Tab');
+
+  if (hidden) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider theme={theme.vscodeTheme}>
+      <Stack
+        direction="vertical"
+        css={{
+          width: '100%',
+        }}
+      >
+        <StyledTitle>Terminal</StyledTitle>
+        <Stack
+          direction="vertical"
+          css={{
+            padding: '1rem',
+          }}
+          gap={4}
+        >
+          <Text>
+            To use the terminal, you need to upgrade your Browser Sandbox into a
+            Cloud Sandbox.
+          </Text>
+          <Text>
+            Cloud Sandboxes are an improved coding experience that run your code
+            in the cloud. They allow you to run Docker, code in new languages,
+            add servers, databases, and much more. See a preview below.
+          </Text>
+          <img alt="" src="/static/img/terminal_upgrade_screenshot.png" />
+          <Text>
+            {canConvert
+              ? `Do you want to convert it into a Cloud Sandbox?`
+              : `Do you want to fork into a Cloud Sandbox?`}
+          </Text>
+          <Stack
+            direction="horizontal"
+            gap={4}
+            css={{
+              justifyContent: 'start',
+            }}
+          >
+            <Button
+              onClick={perform}
+              loading={loading}
+              css={{
+                width: 'inherit',
+                paddingLeft: '1rem',
+                paddingRight: '1rem',
+              }}
+            >
+              Yes, {canConvert ? 'convert' : 'fork and convert'}
+            </Button>
+            <Button
+              as="a"
+              variant="link"
+              style={{
+                width: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+                backgroundColor: 'transparent',
+                color: 'mutedForeground',
+              }}
+              target="_blank"
+              rel="noreferrer noopener"
+              href="https://codesandbox.io/docs/learn/sandboxes/overview?tab=cloud"
+            >
+              Learn more
+            </Button>
+          </Stack>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+};
+
+export const terminalUpgrade = {
+  id: 'codesandbox.terminalUpgrade',
+  title: 'Terminal',
+  Content: withTheme(TerminalUpgradeComponent),
+  actions: [],
+};
diff --git a/packages/app/src/app/components/Preview/DevTools/index.tsx b/packages/app/src/app/components/Preview/DevTools/index.tsx
@@ -13,6 +13,7 @@ import { problems } from './Problems';
 import { reactDevTools } from './React-Devtools';
 import { DevToolTabs } from './Tabs';
 import { terminal } from './Terminal';
+import { terminalUpgrade } from './TerminalUpgrade';
 import { tests } from './Tests';
 
 function unFocus(document, window) {
@@ -80,6 +81,7 @@ const VIEWS: IViews = {
   [tests.id]: tests,
   [terminal.id]: terminal,
   [reactDevTools.id]: reactDevTools,
+  [terminalUpgrade.id]: terminalUpgrade,
 };
 
 type Props = {
@@ -503,10 +505,7 @@ export class DevTools extends React.PureComponent<Props, State> {
     } = this.props;
     const { hidden, height } = this.state;
 
-    // Filter out legacy panel that might be persisted
-    const panes = viewConfig.views.filter(
-      v => v.id !== 'codesandbox.terminalUpgrade'
-    );
+    const panes = viewConfig.views;
 
     return (
       <Container
@@ -544,6 +543,8 @@ export class DevTools extends React.PureComponent<Props, State> {
               closeTab={this.props.closeTab}
               disableLogging={disableLogging}
               isOnEmbedPage={this.props.isOnEmbedPage}
+              // @ts-ignore
+              isOnPrem={window._env_.IS_ONPREM === 'true'}
             />
 
             {!primary && (

diff --git a/packages/common/src/templates/helpers/react-template.ts b/packages/common/src/templates/helpers/react-template.ts
@@ -4,7 +4,15 @@ export class ReactTemplate extends Template {
   getViews(): ViewConfig[] {
     const REACT_VIEWS: ViewConfig[] = [
       {
-        views: [{ id: 'codesandbox.browser' }, { id: 'codesandbox.tests' }],
+        views: [
+          { id: 'codesandbox.browser' },
+          { id: 'codesandbox.tests' },
+          {
+            id: 'codesandbox.terminalUpgrade',
+            hideOnEmbedPage: true,
+            hideOnPrem: true,
+          },
+        ],
       },
       {
         views: [

diff --git a/packages/common/src/templates/template.ts b/packages/common/src/templates/template.ts
@@ -50,6 +50,7 @@ export interface ViewTab {
   closeable?: boolean;
   options?: any;
   hideOnEmbedPage?: boolean;
+  hideOnPrem?: boolean;
 }
 
 export type ViewConfig = {
@@ -59,7 +60,15 @@ export type ViewConfig = {
 
 const CLIENT_VIEWS: ViewConfig[] = [
   {
-    views: [{ id: 'codesandbox.browser' }, { id: 'codesandbox.tests' }],
+    views: [
+      { id: 'codesandbox.browser' },
+      { id: 'codesandbox.tests' },
+      {
+        id: 'codesandbox.terminalUpgrade',
+        hideOnEmbedPage: true,
+        hideOnPrem: true,
+      },
+    ],
   },
   {
     views: [{ id: 'codesandbox.console' }, { id: 'codesandbox.problems' }],