Skip to content

Commit af862ac

Browse files
SaraVieiraSaraVieira
authored
show graphiql port on the server tab (codesandbox#2355)
* show graphiql tab on the server tab * clean up css * open tab by default * fix value * cleanup effect * small refactor * fixes * last fixes * remove console.log * change get views * fix url * clean up code * call graphiql by title * add new action * fiu other ports * fix eslint * fix eslint * add gridsome * add optins title * simplify current url function * remve port * fix style * fix lint
1 parent c2e9b5d commit af862ac

File tree

15 files changed

+477
-369
lines changed

15 files changed

+477
-369
lines changed

‎packages/app/src/app/overmind/namespaces/server/actions.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,18 @@ export const onCodeSandboxAPIMessage: Action<{
171171
}
172172
};
173173

174+
export const onBrowserTabOpened: Action<{
175+
port: any;
176+
}> = ({ actions }, { port }) => {
177+
actions.editor.onDevToolsTabAdded({
178+
tab: {
179+
id: 'codesandbox.browser',
180+
closeable: true,
181+
options: port,
182+
},
183+
});
184+
};
185+
174186
export const onBrowserFromPortOpened: Action<{
175187
port: any;
176188
}> = ({ actions }, { port }) => {
@@ -183,6 +195,7 @@ export const onBrowserFromPortOpened: Action<{
183195
options: {
184196
port: port.port,
185197
url: `https://${port.hostname}`,
198+
title: port.title,
186199
},
187200
},
188201
});

‎packages/app/src/app/pages/Sandbox/Editor/Content/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,9 @@ class EditorPreview extends React.Component {
424424
const browserConfig = {
425425
id: 'codesandbox.browser',
426426
title: options =>
427-
options.port ? `Browser (:${options.port})` : `Browser`,
427+
options.port || options.title
428+
? `Browser (${options.title || `:${options.port}`})`
429+
: `Browser`,
428430
Content: ({ hidden, options }) => (
429431
<Preview
430432
options={options}

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/EnvEntry.js‎

Lines changed: 46 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,67 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import CrossIcon from 'react-icons/lib/md/clear';
33
import EditIcon from 'react-icons/lib/go/pencil';
4-
import EnvIcon from 'react-icons/lib/go/key';
54

65
import {
76
EntryContainer,
87
IconArea,
98
Icon,
109
WorkspaceInputContainer,
1110
} from '../../../elements';
12-
import EnvModal from './EnvModal';
11+
import { EnvironmentIcon, IconWrapper } from './elements';
12+
import { EnvModal } from './EnvModal';
1313

14-
export default class VersionEntry extends React.PureComponent {
15-
state = {
16-
hovering: false,
17-
editing: false,
18-
};
14+
export const EnvEntry = ({ name, onSubmit, onDelete, value }) => {
15+
const [hovering, setHovering] = useState(false);
16+
const [editing, setEditing] = useState(false);
1917

20-
onMouseEnter = () => this.setState({ hovering: true });
21-
onMouseLeave = () => this.setState({ hovering: false });
18+
const enableEditing = () => setEditing(true);
2219

23-
enableEditing = () => {
24-
this.setState({ editing: true });
25-
};
26-
disableEditing = () => {
27-
this.setState({ editing: false });
28-
};
20+
const disableEditing = () => setEditing(false);
2921

30-
onSubmit = values => {
31-
this.setState({ editing: false });
22+
const onSubmitEntry = values => {
23+
setEditing(false);
3224

33-
if (values.name !== this.props.name) {
25+
if (values.name !== name) {
3426
// The name changed, we recreate the env var.
35-
36-
this.props.onDelete(this.props.name);
27+
onDelete(name);
3728
}
38-
39-
this.props.onSubmit(values);
29+
onSubmit(values);
4030
};
4131

42-
onDelete = e => {
32+
const onDeleteEntry = e => {
4333
e.stopPropagation();
44-
this.props.onDelete(this.props.name);
34+
onDelete(name);
4535
};
4636

47-
render() {
48-
const { hovering } = this.state;
49-
return this.state.editing || !this.props.value ? (
50-
<WorkspaceInputContainer>
51-
<EnvModal
52-
onCancel={!this.props.value ? undefined : this.disableEditing}
53-
onSubmit={this.onSubmit}
54-
name={this.props.name}
55-
value={this.props.value}
56-
/>
57-
</WorkspaceInputContainer>
58-
) : (
59-
<EntryContainer
60-
onMouseEnter={this.onMouseEnter}
61-
onMouseLeave={this.onMouseLeave}
62-
onClick={this.enableEditing}
63-
>
64-
<div style={{ display: 'flex', alignItems: 'center' }}>
65-
<EnvIcon
66-
style={{
67-
marginRight: '0.6rem',
68-
fontSize: '1rem',
69-
marginLeft: 4,
70-
}}
71-
/>{' '}
72-
{this.props.name}
73-
</div>
74-
{hovering && (
75-
<IconArea>
76-
<Icon>
77-
<EditIcon onClick={this.enableEditing} />
78-
</Icon>
79-
<Icon>
80-
<CrossIcon onClick={this.onDelete} />
81-
</Icon>
82-
</IconArea>
83-
)}
84-
</EntryContainer>
85-
);
86-
}
87-
}
37+
return editing || !value ? (
38+
<WorkspaceInputContainer>
39+
<EnvModal
40+
onCancel={!value ? undefined : disableEditing}
41+
onSubmit={onSubmitEntry}
42+
name={name}
43+
value={value}
44+
/>
45+
</WorkspaceInputContainer>
46+
) : (
47+
<EntryContainer
48+
onMouseEnter={() => setHovering(true)}
49+
onMouseLeave={() => setHovering(false)}
50+
onClick={enableEditing}
51+
>
52+
<IconWrapper>
53+
<EnvironmentIcon /> {name}
54+
</IconWrapper>
55+
{hovering && (
56+
<IconArea>
57+
<Icon>
58+
<EditIcon onClick={enableEditing} />
59+
</Icon>
60+
<Icon>
61+
<CrossIcon onClick={onDeleteEntry} />
62+
</Icon>
63+
</IconArea>
64+
)}
65+
</EntryContainer>
66+
);
67+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/EnvModal.js‎

Lines changed: 50 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,78 @@
1-
import React from 'react';
2-
import styled from 'styled-components';
3-
1+
import React, { useState } from 'react';
42
import Input from '@codesandbox/common/lib/components/Input';
53
import { Button } from '@codesandbox/common/lib/components/Button';
4+
import { InputContainer, ErrorMessage } from './elements';
65

7-
const InputContainer = styled.div`
8-
display: flex;
9-
width: 100%;
10-
`;
11-
12-
const ErrorMessage = styled.div`
13-
color: ${props => props.theme.red};
14-
font-size: 12px;
15-
margin: 0.5rem 0;
16-
font-style: italic;
17-
`;
18-
19-
export default class EnvModal extends React.PureComponent {
20-
state = {
21-
name: this.props.name || '',
22-
value: this.props.value || '',
23-
};
6+
export const EnvModal = props => {
7+
const [name, setName] = useState(props.name || '');
8+
const [value, setValue] = useState(props.value || '');
249

25-
onNameChange = e => this.setState({ name: e.target.value });
26-
onValueChange = e => this.setState({ value: e.target.value });
10+
const onNameChange = e => setName(e.target.value);
11+
const onValueChange = e => setValue(e.target.value);
2712

28-
onCancel = e => {
13+
const onCancel = e => {
2914
e.preventDefault();
3015
e.stopPropagation();
3116

32-
this.props.onCancel();
17+
props.onCancel();
3318
};
3419

35-
onSubmit = e => {
20+
const onSubmit = e => {
3621
e.preventDefault();
3722
e.stopPropagation();
3823

39-
this.props.onSubmit({ name: this.state.name, value: this.state.value });
24+
props.onSubmit({ name, value });
4025

41-
this.setState({ name: '', value: '' });
26+
setName('');
27+
setValue('');
4228
};
4329

44-
isValid = () => {
45-
if (/\s/.test(this.state.name)) {
30+
const isValid = () => {
31+
if (/\s/.test(name)) {
4632
return "The name and the value can't contain spaces.";
4733
}
4834

4935
return false;
5036
};
5137

52-
render() {
53-
const errorMessage = this.isValid();
54-
return (
55-
<form style={{ width: '100%' }} onSubmit={this.onSubmit}>
56-
<div>
57-
<InputContainer
38+
const errorMessage = isValid();
39+
return (
40+
<form style={{ width: '100%' }} onSubmit={onSubmit}>
41+
<div>
42+
<InputContainer>
43+
<Input
5844
style={{
59-
flexDirection: 'column',
60-
marginBottom: '.5rem',
45+
marginBottom: '0.25rem',
6146
}}
62-
>
63-
<Input
64-
placeholder="Name"
65-
style={{
66-
marginLeft: 0,
67-
marginRight: 0,
68-
marginBottom: '.25rem',
69-
width: '100%',
70-
}}
71-
onChange={this.onNameChange}
72-
value={this.state.name}
73-
/>
74-
<Input
75-
placeholder="Value"
76-
onChange={this.onValueChange}
77-
style={{ marginLeft: 0, marginRight: 0, width: '100%' }}
78-
value={this.state.value}
79-
/>
80-
</InputContainer>
81-
</div>
82-
<div style={{ display: 'flex' }}>
83-
{this.props.onCancel && (
84-
<Button
85-
onClick={this.onCancel}
86-
style={{ flex: 1, marginRight: '.25rem' }}
87-
red
88-
small
89-
>
90-
Cancel
91-
</Button>
92-
)}
93-
47+
placeholder="Name"
48+
onChange={onNameChange}
49+
value={name}
50+
/>
51+
<Input placeholder="Value" onChange={onValueChange} value={value} />
52+
</InputContainer>
53+
</div>
54+
<div style={{ display: 'flex' }}>
55+
{props.onCancel && (
9456
<Button
95-
style={{ flex: 1, marginLeft: this.props.onCancel ? '.25rem' : 0 }}
96-
block
97-
disabled={!this.state.name || !this.state.value || errorMessage}
57+
onClick={onCancel}
58+
style={{ flex: 1, marginRight: '.25rem' }}
59+
red
9860
small
9961
>
100-
Save Secret
62+
Cancel
10163
</Button>
102-
</div>
103-
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
104-
</form>
105-
);
106-
}
107-
}
64+
)}
65+
66+
<Button
67+
style={{ flex: 1, marginLeft: props.onCancel ? '.25rem' : 0 }}
68+
block
69+
disabled={!name || !value || errorMessage}
70+
small
71+
>
72+
Save Secret
73+
</Button>
74+
</div>
75+
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
76+
</form>
77+
);
78+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/EnvVars/elements.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import styled from 'styled-components';
2+
import EnvIcon from 'react-icons/lib/go/key';
3+
4+
export const EnvironmentIcon = styled(EnvIcon)`
5+
margin-right: 0.6rem;
6+
font-size: 1rem;
7+
margin-left: 4px;
8+
`;
9+
10+
export const IconWrapper = styled.div`
11+
display: flex;
12+
align-items: center;
13+
`;
14+
15+
export const InputContainer = styled.div`
16+
display: flex;
17+
width: 100%;
18+
flex-direction: column;
19+
margin-bottom: 0.5rem;
20+
`;
21+
22+
export const ErrorMessage = styled.div`
23+
color: ${props => props.theme.red};
24+
font-size: 12px;
25+
margin: 0.5rem 0;
26+
font-style: italic;
27+
`;

0 commit comments

Comments
 (0)