Skip to content

Commit 12796ac

Browse files
siddharthkpSaraVieira
siddharthkp
authored and
SaraVieira
committed
Sidebar: Polish deployments (codesandbox#3387)
* add not owner and not deployed pages * fix margins * fix stories
1 parent 3d02b0a commit 12796ac

File tree

7 files changed

+266
-183
lines changed

7 files changed

+266
-183
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/Netlify.tsx

+63-62
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
Element,
88
ListAction,
99
Text,
10-
Stack,
10+
Link,
1111
List,
1212
ListItem,
1313
Button,
1414
Integration,
1515
} from '@codesandbox/components';
16-
import { css } from '@styled-system/css';
16+
1717
import { NetlifyIcon, FileIcon, VisitIcon, FlagIcon } from './icons';
1818

1919
export const Netlify = () => {
@@ -44,68 +44,69 @@ export const Netlify = () => {
4444
template.netlify !== false && (
4545
<>
4646
<Integration icon={NetlifyIcon} title="netlify">
47-
<Stack direction="vertical">
48-
<Text variant="muted">Enables</Text>
49-
<Text>Deployments</Text>
50-
</Stack>
51-
<Button
52-
disabled={deploying || building}
53-
onClick={() => {
54-
track('Deploy Clicked', { provider: 'netlify' });
55-
deployWithNetlify();
56-
}}
57-
>
58-
Deploy
59-
</Button>
60-
<Element
61-
css={css({
62-
gridColumnStart: 1,
63-
gridColumnEnd: 3,
64-
})}
65-
>
66-
{netlifySite ? (
67-
<List>
47+
<Element marginX={2} marginBottom={netlifySite ? 6 : 0}>
48+
<Text variant="muted" block marginBottom={4}>
49+
Deploy your sandbox to{' '}
50+
<Link href="https://www.netlify.com/" target="_blank">
51+
Netlify
52+
</Link>
53+
</Text>
54+
<Button
55+
disabled={deploying || building}
56+
onClick={() => {
57+
track('Deploy Clicked', { provider: 'netlify' });
58+
deployWithNetlify();
59+
}}
60+
>
61+
Deploy to Netlify
62+
</Button>
63+
</Element>
64+
65+
{netlifySite && (
66+
<List>
67+
<ListItem>
68+
<Text weight="bold">{netlifySite.name}</Text>
69+
</ListItem>
70+
{building && !netlifyLogs && (
6871
<ListItem>
69-
<Text weight="bold">{netlifySite.name}</Text>
72+
<Text variant="muted">Building</Text>
7073
</ListItem>
71-
{building && !netlifyLogs && (
72-
<ListItem>
73-
<Text variant="muted">Building</Text>
74-
</ListItem>
75-
)}
76-
{netlifySite.url ? (
77-
<ListAction
78-
onClick={() => window.open(netlifySite.url, '_blank')}
79-
>
80-
<Element marginRight={2}>
81-
<VisitIcon />
82-
</Element>{' '}
83-
Visit Site
84-
</ListAction>
85-
) : null}
86-
{netlifySite.url ? (
87-
<ListAction
88-
onClick={() => window.open(netlifyClaimUrl, '_blank')}
89-
>
90-
<Element marginRight={2}>
91-
<FlagIcon />
92-
</Element>{' '}
93-
Claim Site
94-
</ListAction>
95-
) : null}
96-
{netlifyLogs ? (
97-
<ListAction
98-
onClick={() => modalOpened({ modal: 'netlifyLogs' })}
99-
>
100-
<Element marginRight={2}>
101-
<FileIcon />
102-
</Element>{' '}
103-
View Logs
104-
</ListAction>
105-
) : null}
106-
</List>
107-
) : null}
108-
</Element>
74+
)}
75+
76+
{netlifySite.url && (
77+
<ListAction
78+
onClick={() => window.open(netlifySite.url, '_blank')}
79+
>
80+
<Element marginRight={2}>
81+
<VisitIcon />
82+
</Element>{' '}
83+
Visit Site
84+
</ListAction>
85+
)}
86+
87+
{netlifySite.url && (
88+
<ListAction
89+
onClick={() => window.open(netlifyClaimUrl, '_blank')}
90+
>
91+
<Element marginRight={2}>
92+
<FlagIcon />
93+
</Element>{' '}
94+
Claim Site
95+
</ListAction>
96+
)}
97+
98+
{netlifyLogs && (
99+
<ListAction
100+
onClick={() => modalOpened({ modal: 'netlifyLogs' })}
101+
>
102+
<Element marginRight={2}>
103+
<FileIcon />
104+
</Element>{' '}
105+
View Logs
106+
</ListAction>
107+
)}
108+
</List>
109+
)}
109110
</Integration>
110111
</>
111112
)

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotLoggedIn.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import css from '@styled-system/css';
3+
4+
import {
5+
Element,
6+
Collapsible,
7+
Stack,
8+
Text,
9+
Button,
10+
} from '@codesandbox/components';
11+
import { useOvermind } from 'app/overmind';
12+
13+
export const NotLoggedIn = () => {
14+
const {
15+
actions: { signInClicked },
16+
} = useOvermind();
17+
18+
return (
19+
<Collapsible title="Deployment" defaultOpen>
20+
<Element css={css({ paddingX: 2 })}>
21+
<Stack direction="vertical" gap={2} marginBottom={6}>
22+
<Text size={2} variant="muted" block>
23+
You can deploy a production version of your sandbox using one our
24+
supported providers - Netlify or ZEIT.
25+
</Text>
26+
<Text size={2} variant="muted" block>
27+
You need to be signed in to deploy this sandbox.
28+
</Text>
29+
</Stack>
30+
<Button
31+
variant="primary"
32+
onClick={() => signInClicked({ useExtraScopes: false })}
33+
>
34+
Sign in with GitHub
35+
</Button>
36+
</Element>
37+
</Collapsible>
38+
);
39+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Deployment/NotOwner.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import css from '@styled-system/css';
3+
4+
import {
5+
Element,
6+
Collapsible,
7+
Stack,
8+
Text,
9+
Button,
10+
} from '@codesandbox/components';
11+
import { useOvermind } from 'app/overmind';
12+
13+
export const NotOwner = () => {
14+
const {
15+
actions: {
16+
editor: { forkSandboxClicked },
17+
},
18+
state: {
19+
editor: { isForkingSandbox },
20+
},
21+
} = useOvermind();
22+
23+
return (
24+
<Collapsible title="Deployment" defaultOpen>
25+
<Element css={css({ paddingX: 2 })}>
26+
<Stack direction="vertical" gap={2} marginBottom={6}>
27+
<Text size={2} variant="muted" block>
28+
You can deploy a production version of your sandbox using one our
29+
supported providers - Netlify or ZEIT.
30+
</Text>
31+
<Text size={2} variant="muted" block>
32+
You need to own this sandbox to deploy.
33+
</Text>
34+
</Stack>
35+
<Button
36+
variant="primary"
37+
disabled={isForkingSandbox}
38+
onClick={() => forkSandboxClicked()}
39+
>
40+
{isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}
41+
</Button>
42+
</Element>
43+
</Collapsible>
44+
);
45+
};

0 commit comments

Comments
 (0)