From ddccf0e7826cc7604a09fea23e0976969d7f6938 Mon Sep 17 00:00:00 2001 From: Alex Moldovan Date: Wed, 18 Oct 2023 14:13:16 +0000 Subject: [PATCH] feat: add back terminalUpgrade tab --- .../Preview/DevTools/Tabs/index.tsx | 3 + .../DevTools/TerminalUpgrade/elements.ts | 15 +++ .../DevTools/TerminalUpgrade/index.tsx | 101 ++++++++++++++++++ .../app/components/Preview/DevTools/index.tsx | 9 +- .../src/templates/helpers/react-template.ts | 10 +- packages/common/src/templates/template.ts | 11 +- 6 files changed, 143 insertions(+), 6 deletions(-) create mode 100644 packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/elements.ts create mode 100644 packages/app/src/app/components/Preview/DevTools/TerminalUpgrade/index.tsx diff --git a/packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx index 2e2405d9061..84c2133bf4c 100644 --- 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 = ({ {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 new file mode 100644 index 00000000000..f24445f3241 --- /dev/null +++ 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 new file mode 100644 index 00000000000..26ebc8b81b1 --- /dev/null +++ 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 = ({ + hidden, + theme, +}) => { + const { perform, loading, canConvert } = useUpgradeFromV1ToV2('Terminal Tab'); + + if (hidden) { + return null; + } + + return ( + + + Terminal + + + To use the terminal, you need to upgrade your Browser Sandbox into a + Cloud Sandbox. + + + 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. + + + + {canConvert + ? `Do you want to convert it into a Cloud Sandbox?` + : `Do you want to fork into a Cloud Sandbox?`} + + + + + + + + + ); +}; + +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 index 8d56032104e..dfea1969f8b 100644 --- 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 { } = 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 ( { 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 index 03db8f5302c..2195cb31f15 100644 --- 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 index 3779034a0c3..5b0d7dd7a8c 100644 --- 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' }],