Skip to content

Commit e173f99

Browse files
SaraVieiraCompuIves
SaraVieira
authored and
CompuIves
committed
Now integration (codesandbox#1221)
* add better now integration * order * add link icon
1 parent 8df7e5c commit e173f99

File tree

8 files changed

+451
-31
lines changed

8 files changed

+451
-31
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Elements.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import styled from 'styled-components';
2+
3+
export const Deploys = styled.ul`
4+
list-style: none;
5+
padding: 0;
6+
margin-top: 1rem;
7+
flex-direction: column;
8+
font-size: 0.875rem;
9+
margin: 0 0.25rem;
10+
`;
11+
12+
export const Deploy = styled.li`
13+
display: flex;
14+
margin-bottom: 1.5rem;
15+
flex-direction: column;
16+
`;
17+
18+
export const State = styled.span`
19+
align-items: center;
20+
display: flex;
21+
text-transform: capitalize;
22+
margin-bottom: 0.5rem;
23+
24+
&:before {
25+
content: '';
26+
display: block;
27+
width: 10px;
28+
height: 10px;
29+
border-radius: 50%;
30+
margin-right: 0.5rem;
31+
background: ${props => {
32+
if (
33+
props.state === 'DEPLOYING' ||
34+
props.state === 'BUILDING' ||
35+
props.state === 'INITIALIZING'
36+
)
37+
return '#fccb7e';
38+
if (
39+
props.state === 'DEPLOYMENT_ERROR' ||
40+
props.state === 'BUILD_ERROR' ||
41+
props.state === 'ERROR'
42+
)
43+
return props.theme.red;
44+
if (props.state === 'BOOTED' || props.state === 'READY')
45+
return props.theme.green;
46+
if (props.state === 'FROZEN') return props.theme.blue;
47+
48+
return props.theme.gray;
49+
}};
50+
}
51+
`;
52+
53+
export const Name = styled.span`
54+
font-weight: 600;
55+
color: ${props =>
56+
props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
57+
font-size: 1rem;
58+
margin-top: 0;
59+
margin-bottom: 0.5rem;
60+
vertical-align: middle;
61+
62+
span {
63+
color: ${props =>
64+
props.theme.light
65+
? props.theme.background3.darken(0.5)
66+
: props.theme.background3.lighten(0.5)};
67+
font-size: 12px;
68+
margin-left: 0.5rem;
69+
}
70+
`;
71+
72+
export const Link = styled.a`
73+
padding: 0.25rem 0.4rem;
74+
background-color: ${props => props.theme.secondary};
75+
text-decoration: none;
76+
border: none;
77+
font-size: 0.75rem;
78+
color: white;
79+
border-radius: 2px;
80+
font-weight: 600;
81+
margin-top: 0.75rem;
82+
83+
&:disabled {
84+
background: ${props => props.theme.gray};
85+
}
86+
`;
87+
88+
export const Action = Link.withComponent('button');
89+
90+
export const ButtonContainer = styled.section`
91+
display: flex;
92+
> *:not(:last-child) {
93+
margin-right: 0.5rem;
94+
}
95+
`;

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/index.js‎

Lines changed: 139 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,148 @@
1-
import React from 'react';
1+
import React, { Component, Fragment } from 'react';
22
import { inject, observer } from 'mobx-react';
3+
import TrashIcon from 'react-icons/lib/fa/trash';
4+
import LinkIcon from 'react-icons/lib/fa/external-link';
35
import Button from 'app/components/Button';
6+
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
47

58
import ZeitIntegration from '../../../../../common/ZeitIntegration';
6-
import { Description, WorkspaceInputContainer } from '../../elements';
9+
import {
10+
Description,
11+
WorkspaceInputContainer,
12+
WorkspaceSubtitle,
13+
} from '../../elements';
14+
import {
15+
Deploys,
16+
Deploy,
17+
State,
18+
Name,
19+
Link,
20+
Action,
21+
ButtonContainer,
22+
} from './Elements';
723

8-
const Deployment = ({ signals, store }) => (
9-
<div>
10-
<Description>
11-
You can deploy a production version of your sandbox using{' '}
12-
<a href="https://zeit.co/now" target="_blank" rel="noreferrer noopener">
13-
ZEIT Now
14-
</a>.
15-
{!store.user.integrations.zeit &&
16-
' You need to add ZEIT to your integrations to deploy.'}
17-
</Description>
24+
class Deployment extends Component {
25+
componentDidMount = () => {
26+
this.props.signals.deployment.getDeploys();
27+
};
1828

19-
{store.user.integrations.zeit ? (
20-
<WorkspaceInputContainer style={{ marginTop: '1rem' }}>
21-
<Button block onClick={() => signals.deployment.deploySandboxClicked()}>
22-
Deploy Sandbox
23-
</Button>
24-
</WorkspaceInputContainer>
25-
) : (
26-
<div style={{ margin: '1rem' }}>
27-
<ZeitIntegration small />
29+
render() {
30+
const {
31+
signals,
32+
store: { user, deployment },
33+
} = this.props;
34+
return (
35+
<div>
36+
<Description>
37+
You can deploy a production version of your sandbox using{' '}
38+
<a
39+
href="https://zeit.co/now"
40+
target="_blank"
41+
rel="noreferrer noopener"
42+
>
43+
ZEIT Now
44+
</a>.
45+
{!user.integrations.zeit &&
46+
' You need to add ZEIT to your integrations to deploy.'}
47+
</Description>
48+
49+
{user.integrations.zeit ? (
50+
<Fragment>
51+
<WorkspaceInputContainer style={{ marginTop: '1rem' }}>
52+
<Button
53+
block
54+
onClick={() => signals.deployment.deploySandboxClicked()}
55+
>
56+
Deploy Sandbox
57+
</Button>
58+
</WorkspaceInputContainer>
59+
{deployment.sandboxDeploys.length ? (
60+
<Fragment>
61+
<WorkspaceSubtitle style={{ margin: '1rem 0' }}>
62+
Sandbox Deploys
63+
</WorkspaceSubtitle>
64+
<WorkspaceInputContainer>
65+
<Deploys>
66+
{deployment.sandboxDeploys.map(deploy => (
67+
<Deploy key={deploy.uid}>
68+
<Name>
69+
{deploy.name}
70+
<span>
71+
({distanceInWordsToNow(deploy.created)} ago)
72+
</span>
73+
</Name>
74+
<State state={deploy.state}>
75+
{deploy.state.toLowerCase()}
76+
</State>
77+
{deploy.alias.length ? (
78+
<span>
79+
Aliased to{' '}
80+
{deploy.alias.map(a => (
81+
<a
82+
href={`https://${a.alias}`}
83+
target="_blank"
84+
rel="noreferrer noopener"
85+
>
86+
{a.alias}
87+
</a>
88+
))}
89+
</span>
90+
) : null}
91+
<ButtonContainer>
92+
<Link
93+
href={`https://${deploy.url}`}
94+
target="_blank"
95+
rel="noreferrer noopener"
96+
>
97+
<LinkIcon /> <span>Visit</span>
98+
</Link>
99+
<Action
100+
disabled={deployment[`${deploy.uid}Deleting`]}
101+
onClick={() => {
102+
signals.deployment.setDeploymentToDelete({
103+
id: deploy.uid,
104+
});
105+
signals.modalOpened({
106+
modal: 'deleteDeployment',
107+
});
108+
}}
109+
>
110+
{deployment[`${deploy.uid}Deleting`] ? (
111+
'Deleting'
112+
) : (
113+
<Fragment>
114+
<TrashIcon /> <span>Delete</span>
115+
</Fragment>
116+
)}
117+
</Action>
118+
{deployment.hasAlias && deploy.state === 'READY' ? (
119+
<Action
120+
disabled={deploy.alias.length}
121+
onClick={() => {
122+
signals.deployment.aliasDeployment({
123+
id: deploy.uid,
124+
});
125+
}}
126+
>
127+
{deploy.alias.length ? 'Aliased' : 'Alias'}
128+
</Action>
129+
) : null}
130+
</ButtonContainer>
131+
</Deploy>
132+
))}
133+
</Deploys>
134+
</WorkspaceInputContainer>
135+
</Fragment>
136+
) : null}
137+
</Fragment>
138+
) : (
139+
<div style={{ margin: '1rem' }}>
140+
<ZeitIntegration small />
141+
</div>
142+
)}
28143
</div>
29-
)}
30-
</div>
31-
);
144+
);
145+
}
146+
}
32147

33148
export default inject('signals', 'store')(observer(Deployment));

‎packages/app/src/app/pages/common/Modals/DeleteDeploymentModal/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import Alert from 'app/components/Alert';
3+
import { inject } from 'mobx-react';
4+
5+
function DeleteDeploymentModal({ signals }) {
6+
return (
7+
<Alert
8+
title="Delete Deployment"
9+
body={<span>Are you sure you want to delete this Deployment?</span>}
10+
onCancel={() => signals.modalClosed()}
11+
onDelete={() => signals.deployment.deleteDeployment()}
12+
/>
13+
);
14+
}
15+
16+
export default inject('signals')(DeleteDeploymentModal);

‎packages/app/src/app/pages/common/Modals/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Modal from 'app/components/Modal';
55
import NewSandbox from './NewSandbox';
66
import PreferencesModal from './PreferencesModal';
77
import DeleteSandboxModal from './DeleteSandboxModal';
8+
import DeleteDeploymentModal from './DeleteDeploymentModal/';
89
import ShareModal from './ShareModal';
910
import DeploymentModal from './DeploymentModal';
1011
import ExportGitHubModal from './ExportGitHubModal';
@@ -53,6 +54,10 @@ const modals = {
5354
Component: DeleteSandboxModal,
5455
width: 400,
5556
},
57+
deleteDeployment: {
58+
Component: DeleteDeploymentModal,
59+
width: 400,
60+
},
5661
deleteProfileSandbox: {
5762
Component: DeleteProfileSandboxModal,
5863
width: 400,

0 commit comments

Comments
 (0)