Skip to content

Commit c3de776

Browse files
alexnmnecoline
alexnm
and
necoline
authored
feat: new create modals (#8182)
* initial commit * feat: Update modals and actions Update modals and actions in multiple components * feat: Add 'Start something new' heading Added 'Start something new' heading in RecentHeader component. * Update 11 files * feat: Update CreateBox component Update CreateBox component by removing unused imports, refactoring panel component, and updating template rendering logic. * implement search * feat: Update CreateBox, GenericCreate, ImportRepository, and Editor Update CreateBox, GenericCreate, ImportRepository, and Editor components with new code * feat: Updated Badge component Added 'boxDevbox' icon to Badge component and updated import path for TemplateCard * cleanup * refactor: Change showBetaBadge to showDevboxBadge in SandboxCard.tsx Refactored the code in SandboxCard.tsx to replace instances of showBetaBadge with showDevboxBadge. * feat: Add Devbox and Sandbox alternatives Added DevboxAlternative and SandboxAlternative components to the CreateBox and TemplateList files. * style: Update text color and underline style Update text color and underline style in CreateBox and elements components * feat: Add optional v2 parameter to body object Update CreateBox and actions.ts to include optional v2 parameter in body object. * feat: Update UI text and functionality * Update SyncedSandboxListItem.tsx * Update constants.ts and PermissionSettings.tsx * Update 8 files * Update FromTemplate.tsx and useEssentialTemplates.ts * Update CreateBox.tsx and state.ts * feat: Upgrade Sandbox to Devbox Upgrade sandbox to devbox, improving coding experience and adding new features. * Update 13 files * fix: ui styles * refactor: Refactor CreateBox and FromTemplate components Refactor CreateBox and FromTemplate components to use CreateParams type for onSubmit function and update variable names. * Update useFeaturedTemplates.ts * refactor: Remove TemplatesRow component The TemplatesRow component and its imports are removed from the project. * feat: Update getting started video * feat: Removed outdated instruction videos * feat: Updated documentation videos Added new videos and removed old ones from the documentation section. * feat: Add tracking for create actions Add tracking for creating new templates, selecting templates, opening templates, and clicking tabs in the create flow. * refactor: Update DevboxAlternative component Update DevboxAlternative component to include onClick event handling and track function calls * refactor: Refactor CreateBox, elements, and LargeCTAButton components Refactored CreateBox, elements, and LargeCTAButton components for improved readability and styling. * temporarily remove second step * refactor: Update component styles Update LargeCTAButton.tsx and RecentHeader.tsx styles * style: Update LargeCTAButton styles Update padding and add min-height to LargeCTAButton component * feat: Add activeTeam check Add activeTeam check in internalActions.ts * feat: update URLs * Update useBetaSandboxEditor.ts * feat: Update beta sandbox editor hooks Updated user IDs in the useBetaSandboxEditor hooks. * chore: update tests * update templates * Update url-generator.ts * feat: Updated CreateBox Added conditional rendering for SearchBox component and removed paddingBottom style * fix: anonymous access * chore: remove personal space announcement * feat: Update button descriptions Update button descriptions in Create component and RecentHeader component --------- Co-authored-by: Neco Hubner <[email protected]>
1 parent 844c49b commit c3de776

File tree

121 files changed

+2665
-2568
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+2665
-2568
lines changed

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

Lines changed: 522 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import React, { useState } from 'react';
2+
import {
3+
Stack,
4+
Element,
5+
Button,
6+
Text,
7+
Input,
8+
Radio,
9+
Icon,
10+
} from '@codesandbox/components';
11+
12+
import { CreateParams } from '../utils/types';
13+
14+
interface CreateBoxFormProps {
15+
type: 'sandbox' | 'devbox';
16+
onCancel: () => void;
17+
onSubmit: (params: CreateParams) => void;
18+
}
19+
20+
export const CreateBoxForm: React.FC<CreateBoxFormProps> = ({
21+
type,
22+
onCancel,
23+
onSubmit,
24+
}) => {
25+
const label = type === 'sandbox' ? 'Sandbox' : 'Devbox';
26+
27+
const [name, setName] = useState<string>();
28+
// TODO: default privacy in workspace
29+
const [permission, setPermission] = useState<0 | 1 | 2>(0);
30+
const [editor, setEditor] = useState<'web' | 'vscode'>('web');
31+
const showVMSpecs = type === 'devbox';
32+
const disableEditorChange = type === 'sandbox';
33+
34+
const defaultSpecs = '4 vCPUs - 8GiB RAM - 16GB disk';
35+
36+
return (
37+
<Stack
38+
direction="vertical"
39+
gap={7}
40+
css={{ width: '100%', height: '100%', paddingBottom: '24px' }}
41+
>
42+
<Element
43+
as="form"
44+
css={{
45+
display: 'flex',
46+
flexDirection: 'column',
47+
width: '100%',
48+
height: '100%',
49+
justifyContent: 'space-between',
50+
}}
51+
onSubmit={e => {
52+
e.preventDefault();
53+
onSubmit({
54+
name,
55+
createAs: type,
56+
permission,
57+
editor,
58+
});
59+
}}
60+
>
61+
<Stack direction="vertical" gap={6}>
62+
<Text
63+
as="h2"
64+
css={{
65+
fontSize: '16px',
66+
fontWeight: 500,
67+
margin: 0,
68+
}}
69+
>
70+
Create {label}
71+
</Text>
72+
<Stack direction="vertical" gap={1}>
73+
<Text size={3} as="label">
74+
Name
75+
</Text>
76+
<Text size={3} id="name-desc" variant="muted">
77+
Leaving this field empty will generate a random name.
78+
</Text>
79+
<Input
80+
autoFocus
81+
id="sb-name"
82+
name="sb-name"
83+
type="text"
84+
value={name}
85+
placeholder={`Let's give this ${label} a name.`}
86+
onChange={e => setName(e.target.value)}
87+
aria-describedby="name-desc"
88+
/>
89+
</Stack>
90+
91+
<Stack direction="vertical" gap={2}>
92+
<Text size={3} as="label">
93+
Visibility
94+
</Text>
95+
<Stack direction="vertical" gap={1}>
96+
<Radio
97+
checked={permission === 0}
98+
onChange={() => setPermission(0)}
99+
label="Public"
100+
/>
101+
<Radio
102+
checked={permission === 1}
103+
onChange={() => setPermission(1)}
104+
label="Unlisted"
105+
/>
106+
<Radio
107+
checked={permission === 2}
108+
onChange={() => setPermission(2)}
109+
label="Private"
110+
/>
111+
</Stack>
112+
</Stack>
113+
114+
<Stack direction="vertical" gap={2}>
115+
<Text size={3} as="label">
116+
Open in
117+
</Text>
118+
<Stack direction="vertical" gap={1}>
119+
<Radio
120+
disabled={disableEditorChange}
121+
checked={editor === 'web'}
122+
onChange={() => setEditor('web')}
123+
label="Web editor"
124+
/>
125+
<Radio
126+
disabled={disableEditorChange}
127+
checked={editor === 'vscode'}
128+
onChange={() => setEditor('vscode')}
129+
label="VSCode"
130+
/>
131+
</Stack>
132+
{disableEditorChange && (
133+
<Stack gap={1}>
134+
<Icon color="#999" name="circleBang" />
135+
<Text size={3} variant="muted">
136+
Sandboxes can only be open in the web editor.
137+
</Text>
138+
</Stack>
139+
)}
140+
</Stack>
141+
142+
{showVMSpecs && (
143+
<Stack direction="vertical" align="flex-start" gap={2}>
144+
<Text size={3} as="label">
145+
Virtual machine specifications
146+
</Text>
147+
<Input value={defaultSpecs} disabled />
148+
<Stack gap={1}>
149+
<Icon color="#999" name="circleBang" />
150+
<Text size={3} variant="muted">
151+
VM specs are currently tied to your subscription.
152+
</Text>
153+
</Stack>
154+
</Stack>
155+
)}
156+
</Stack>
157+
158+
<Stack css={{ justifyContent: 'flex-end' }}>
159+
<Stack gap={2}>
160+
<Button
161+
type="button"
162+
variant="secondary"
163+
onClick={onCancel}
164+
autoWidth
165+
>
166+
Cancel
167+
</Button>
168+
<Button type="submit" variant="primary" autoWidth>
169+
Create {label}
170+
</Button>
171+
</Stack>
172+
</Stack>
173+
</Element>
174+
</Stack>
175+
);
176+
};

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
2+
import { Stack, Text } from '@codesandbox/components';
3+
import { TemplateFragment } from 'app/graphql/types';
4+
import React from 'react';
5+
6+
interface TemplateInfoProps {
7+
template: TemplateFragment;
8+
}
9+
10+
export const TemplateInfo = ({ template }: TemplateInfoProps) => {
11+
const { UserIcon } = getTemplateIcon(
12+
template.sandbox.title,
13+
template.iconUrl,
14+
template.sandbox?.source?.template
15+
);
16+
17+
const title = template.sandbox.title || template.sandbox.alias;
18+
const author =
19+
template.sandbox?.team?.name ||
20+
template.sandbox?.author?.username ||
21+
'CodeSandbox';
22+
23+
return (
24+
<Stack direction="vertical" gap={4}>
25+
<UserIcon />
26+
<Stack direction="vertical" gap={1}>
27+
<Text size={3} weight="500">
28+
{title}
29+
</Text>
30+
{author && (
31+
<Text size={2} css={{ color: '#999' }}>
32+
{author}
33+
</Text>
34+
)}
35+
</Stack>
36+
<Text size={2} css={{ color: '#999', lineHeight: '1.4' }}>
37+
{template.sandbox.description}
38+
</Text>
39+
</Stack>
40+
);
41+
};

‎packages/app/src/app/components/Create/GenericCreate.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React, { useEffect } from 'react';
2+
3+
import { Stack, Text, IconButton, Element } from '@codesandbox/components';
4+
import track from '@codesandbox/common/lib/utils/analytics';
5+
import { useActions } from 'app/overmind';
6+
import { Container, HeaderInformation } from './elements';
7+
import { LargeCTAButton } from '../dashboard/LargeCTAButton';
8+
import {
9+
DEVBOX_BUTTON_DESCRIPTION,
10+
IMPORT_BUTTON_DESCRIPTION,
11+
SANDBOX_BUTTON_DESCRIPTION,
12+
} from './utils/constants';
13+
14+
export const GenericCreate: React.FC<{
15+
closeModal?: () => void;
16+
isModal?: boolean;
17+
}> = ({ closeModal, isModal }) => {
18+
const actions = useActions();
19+
20+
useEffect(() => {
21+
track('Generic Create - Show', {
22+
codesandbox: 'V1',
23+
event_source: 'UI',
24+
});
25+
}, []);
26+
27+
return (
28+
<Container
29+
css={{
30+
height: '260px',
31+
'@media screen and (max-width: 750px)': {
32+
height: 'auto',
33+
},
34+
}}
35+
>
36+
<Stack
37+
gap={4}
38+
align="center"
39+
css={{
40+
width: '100%',
41+
padding: '24px',
42+
'@media screen and (max-width: 750px)': {
43+
padding: '16px',
44+
},
45+
}}
46+
>
47+
<HeaderInformation>
48+
<Text size={4} variant="muted">
49+
Create
50+
</Text>
51+
</HeaderInformation>
52+
53+
{/* isModal is undefined on /s/ page */}
54+
{isModal ? (
55+
<IconButton
56+
name="cross"
57+
variant="square"
58+
size={16}
59+
title="Close modal"
60+
onClick={() => closeModal()}
61+
/>
62+
) : null}
63+
</Stack>
64+
65+
<Element
66+
paddingBottom={6}
67+
paddingX={6}
68+
css={{
69+
display: 'grid',
70+
gridTemplateColumns: '1fr 1fr 1fr',
71+
gap: '16px',
72+
'@media screen and (max-width: 750px)': {
73+
gridTemplateColumns: '1fr',
74+
},
75+
}}
76+
>
77+
<LargeCTAButton
78+
icon="boxRepository"
79+
title="Import repository"
80+
subtitle={IMPORT_BUTTON_DESCRIPTION}
81+
onClick={() => {
82+
track('Generic Create - Import Repository', {
83+
codesandbox: 'V1',
84+
event_source: 'UI',
85+
});
86+
if (closeModal) {
87+
closeModal();
88+
}
89+
actions.modalOpened({ modal: 'importRepository' });
90+
}}
91+
variant="primary"
92+
alignment="vertical"
93+
/>
94+
95+
<LargeCTAButton
96+
icon="boxDevbox"
97+
title="Create a Devbox"
98+
subtitle={DEVBOX_BUTTON_DESCRIPTION}
99+
onClick={() => {
100+
track('Generic Create - Create Devbox', {
101+
codesandbox: 'V1',
102+
event_source: 'UI',
103+
});
104+
if (closeModal) {
105+
closeModal();
106+
}
107+
actions.modalOpened({ modal: 'createDevbox' });
108+
}}
109+
variant="primary"
110+
alignment="vertical"
111+
/>
112+
113+
<LargeCTAButton
114+
icon="boxSandbox"
115+
title="Create a Sandbox"
116+
subtitle={SANDBOX_BUTTON_DESCRIPTION}
117+
onClick={() => {
118+
track('Generic Create - Create Sandbox', {
119+
codesandbox: 'V1',
120+
event_source: 'UI',
121+
});
122+
if (closeModal) {
123+
closeModal();
124+
}
125+
actions.modalOpened({ modal: 'createSandbox' });
126+
}}
127+
variant="secondary"
128+
alignment="vertical"
129+
/>
130+
</Element>
131+
</Container>
132+
);
133+
};

0 commit comments

Comments
 (0)