Skip to content

Commit ae00fe1

Browse files
SaraVieiraCompuIves
SaraVieira
authored and
CompuIves
committed
refactor eployment ui (codesandbox#1515)
1 parent 97bd007 commit ae00fe1

File tree

7 files changed

+334
-150
lines changed

7 files changed

+334
-150
lines changed

‎packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import styled from 'styled-components';
2+
3+
export const Details = styled.div`
4+
display: inline-flex;
5+
justify-content: space-between;
6+
align-items: center;
7+
flex: 3;
8+
padding: 0.75rem 1rem;
9+
background-color: ${props => props.bgColor};
10+
`;
11+
12+
export const Heading = styled.div`
13+
color: ${props =>
14+
props.theme.light ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)'};
15+
font-size: 0.75rem;
16+
margin-bottom: 0.25rem;
17+
`;
18+
19+
export const Info = styled.div`
20+
font-weight: 400;
21+
`;
22+
23+
export const Action = styled.div`
24+
display: flex;
25+
transition: 0.3s ease all;
26+
border: 1px solid
27+
${props => (props.red ? 'rgba(255, 0, 0, 0.4)' : props.theme.secondary)};
28+
border-radius: 4px;
29+
30+
justify-content: center;
31+
align-items: center;
32+
33+
color: ${props => (props.red ? 'rgba(255, 0, 0, 0.6)' : 'white')};
34+
35+
background-color: ${props =>
36+
props.red ? 'transparent' : props.theme.secondary};
37+
38+
opacity: 0.8;
39+
cursor: pointer;
40+
41+
height: 1.5rem;
42+
width: 1.5rem;
43+
44+
&:hover {
45+
opacity: 1;
46+
47+
color: white;
48+
background-color: ${props =>
49+
props.red ? 'rgba(255, 0, 0, 0.6)' : props.theme.secondary};
50+
}
51+
`;

‎packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import Margin from 'common/components/spacing/Margin';
3+
import Button from '../../Button';
4+
5+
import { Details, Info } from './elements';
6+
7+
function DetailInfo({ info, deploy, bgColor }) {
8+
return (
9+
<Details bgColor={bgColor}>
10+
<Margin right={2}>
11+
<Info>{info}</Info>
12+
</Margin>
13+
<Button small onClick={deploy}>
14+
Deploy
15+
</Button>
16+
</Details>
17+
);
18+
}
19+
20+
export default DetailInfo;

‎packages/app/src/app/components/DeploymentIntegration/elements.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const Container = styled.div`
4+
display: inline-flex;
5+
border-radius: 4px;
6+
overflow: hidden;
7+
width: 100%;
8+
flex-direction: column;
9+
font-size: 0.875rem;
10+
11+
color: ${props =>
12+
props.theme.light ? '#636363' : 'rgba(255, 255, 255, 0.8)'};
13+
14+
${props =>
15+
props.loading &&
16+
css`
17+
opacity: 0.5;
18+
`};
19+
`;
20+
21+
export const IntegrationBlock = styled.div`
22+
display: inline-flex;
23+
align-items: center;
24+
background-color: ${props => props.bgColor};
25+
flex: 1;
26+
color: white;
27+
padding: 0.75em 0.75em;
28+
font-size: 1em;
29+
justify-content: space-between;
30+
31+
> div {
32+
display: flex;
33+
align-items: center;
34+
}
35+
`;
36+
37+
export const Name = styled.span`
38+
margin-left: 0.75em;
39+
font-size: 1.375em;
40+
`;

‎packages/app/src/app/components/DeploymentIntegration/index.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import Down from 'react-icons/lib/fa/angle-down';
3+
import Up from 'react-icons/lib/fa/angle-up';
4+
import DetailInfo from './DetailInfo';
5+
import { Container, IntegrationBlock, Name } from './elements';
6+
7+
function Integration({
8+
Icon,
9+
name,
10+
deploy,
11+
children,
12+
color,
13+
loading,
14+
open = true,
15+
toggle,
16+
}) {
17+
return (
18+
<Container loading={loading}>
19+
<IntegrationBlock bgColor={color}>
20+
<div>
21+
<Icon />
22+
<Name>{name}</Name>
23+
</div>
24+
{open ? (
25+
<Up
26+
css={`
27+
cursor: pointer;
28+
width: 1.5rem;
29+
height: auto;
30+
`}
31+
onClick={toggle}
32+
/>
33+
) : (
34+
<Down
35+
css={`
36+
cursor: pointer;
37+
width: 1.5rem;
38+
height: auto;
39+
`}
40+
onClick={toggle}
41+
/>
42+
)}
43+
</IntegrationBlock>
44+
{open ? (
45+
<DetailInfo deploy={deploy} info={children} bgColor={color} />
46+
) : null}
47+
</Container>
48+
);
49+
}
50+
51+
export default Integration;

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

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
import styled from 'styled-components';
22

3+
const mapColorToState = (state, theme) => {
4+
const STARTING = ['DEPLOYING', 'BUILDING', 'INITIALIZING'];
5+
const ERROR = ['DEPLOYMENT_ERROR', 'BUILD_ERROR', 'ERROR'];
6+
const STARTED = ['BOOTED', 'READY'];
7+
8+
if (STARTING.includes(state)) return '#fccb7e';
9+
if (ERROR.includes(state)) return theme.red;
10+
if (STARTED.includes(state)) return theme.green;
11+
if (state === 'FROZEN') return theme.blue;
12+
13+
return theme.gray;
14+
};
15+
316
export const Deploys = styled.ul`
417
list-style: none;
518
padding: 0;
@@ -28,25 +41,7 @@ export const State = styled.span`
2841
height: 10px;
2942
border-radius: 50%;
3043
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-
}};
44+
background: ${props => mapColorToState(props.state, props.theme)};
5045
}
5146
`;
5247

@@ -93,3 +88,16 @@ export const ButtonContainer = styled.section`
9388
margin-right: 0.5rem;
9489
}
9590
`;
91+
92+
export const DeploysWrapper = styled.div`
93+
background: rgb(0, 0, 0);
94+
border-radius: 4px;
95+
font-size: 0.875rem;
96+
color: rgba(255, 255, 255, 0.8);
97+
padding: 0.75rem 1rem;
98+
padding: 0.75rem 0rem;
99+
border-top-right-radius: 0;
100+
border-top-left-radius: 0;
101+
margin: 0.5rem 0.75rem;
102+
margin-top: 0;
103+
`;

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

Lines changed: 6 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,21 @@
1-
import React, { Component, Fragment } from 'react';
1+
import React, { Component } 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';
5-
import Button from 'app/components/Button';
6-
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
7-
8-
import ZeitIntegration from '../../../../../common/ZeitIntegration';
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';
3+
import { Description } from '../../elements';
4+
import ZeitDeployments from './zeit';
235

246
class Deployment extends Component {
257
componentDidMount = () => {
268
this.props.signals.deployment.getDeploys();
279
};
2810

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

0 commit comments

Comments
 (0)