Skip to content

Commit 0760ac6

Browse files
christianalfonichristianalfoni
authored
Merge branch 'master' into fix-saving-code
2 parents 30f4bf4 + 2ec8a5e commit 0760ac6

File tree

28 files changed

+1111
-67
lines changed

28 files changed

+1111
-67
lines changed

‎.circleci/config.yml‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,13 @@ commands:
214214
JEST_JUNIT_OUTPUT: '/tmp/test-results/js-test-results.xml'
215215
- store_test_results: *store_test_results
216216
- store_artifacts: *store_artifacts
217-
test_visual_regressions:
218-
description: "Test Chromatic with 'yarn chromatic'"
219-
steps:
220-
- restore_cache: *restore_deps_cache
221-
- attach_workspace: *attach_deps_workspace
222-
- run:
223-
command: yarn chromatic
217+
# test_visual_regressions:
218+
# description: "Test Chromatic with 'yarn chromatic'"
219+
# steps:
220+
# - restore_cache: *restore_deps_cache
221+
# - attach_workspace: *attach_deps_workspace
222+
# - run:
223+
# command: yarn chromatic
224224
test_jest:
225225
description: 'Test with `yarn test`'
226226
steps:
@@ -298,11 +298,11 @@ jobs:
298298
steps:
299299
- checkout_with_cache
300300
- test_integrations
301-
test-visual-regressions:
302-
executor: node
303-
steps:
304-
- checkout_with_cache
305-
- test_visual_regressions
301+
# test-visual-regressions:
302+
# executor: node
303+
# steps:
304+
# - checkout_with_cache
305+
# - test_visual_regressions
306306
test-jest:
307307
executor: node
308308
steps:
@@ -363,9 +363,9 @@ workflows:
363363
- test-integrations:
364364
requires:
365365
- build-deps
366-
- test-visual-regressions:
367-
requires:
368-
- build-deps
366+
# - test-visual-regressions:
367+
# requires:
368+
# - build-deps
369369
- typecheck:
370370
requires:
371371
- build-deps
@@ -389,7 +389,7 @@ workflows:
389389
- typecheck
390390
- test-integrations
391391
- test-jest
392-
- test-visual-regressions
392+
# - test-visual-regressions
393393
filters:
394394
branches:
395395
only:

packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/UserSearchInput.tsx renamed to packages/app/src/app/components/UserSearchInput/UserSearchInput.tsx

File renamed without changes.

‎packages/app/src/app/components/UserSearchInput/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { UserSearchInput } from './UserSearchInput';

‎packages/app/src/app/pages/Dashboard/Content/index.js‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from 'react';
22
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
33

4+
import codesandbox from '@codesandbox/components/lib/themes/codesandbox.json';
5+
import { ThemeProvider } from '@codesandbox/components';
6+
47
import { RecentSandboxes } from './routes/RecentSandboxes';
58
import PathedSandboxes from './routes/PathedSandboxes';
69
import { Templates } from './routes/Templates';
@@ -10,25 +13,27 @@ import CreateTeam from './routes/CreateTeam';
1013
import TeamView from './routes/TeamView';
1114

1215
const Content = () => (
13-
<Switch>
14-
<Route path="/dashboard/recent" component={RecentSandboxes} />
15-
<Route path="/dashboard/trash" component={DeletedSandboxes} />
16-
<Route path="/dashboard/templates" exact component={Templates} />
17-
<Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
18-
<Route path="/dashboard/search" component={SearchSandboxes} />
19-
<Route path="/dashboard/teams/new" component={CreateTeam} />
20-
<Route exact path="/dashboard/teams/:teamId" component={TeamView} />
21-
<Route
22-
path="/dashboard/teams/:teamId/sandboxes/:path*"
23-
component={PathedSandboxes}
24-
/>
25-
<Route
26-
path="/dashboard/teams/:teamId/templates"
27-
component={Templates}
28-
exact
29-
/>
30-
<Redirect to="/dashboard/recent" />
31-
</Switch>
16+
<ThemeProvider theme={codesandbox}>
17+
<Switch>
18+
<Route path="/dashboard/recent" component={RecentSandboxes} />
19+
<Route path="/dashboard/trash" component={DeletedSandboxes} />
20+
<Route path="/dashboard/templates" exact component={Templates} />
21+
<Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
22+
<Route path="/dashboard/search" component={SearchSandboxes} />
23+
<Route path="/dashboard/teams/new" component={CreateTeam} />
24+
<Route exact path="/dashboard/teams/:teamId" component={TeamView} />
25+
<Route
26+
path="/dashboard/teams/:teamId/sandboxes/:path*"
27+
component={PathedSandboxes}
28+
/>
29+
<Route
30+
path="/dashboard/teams/:teamId/templates"
31+
component={Templates}
32+
exact
33+
/>
34+
<Redirect to="/dashboard/recent" />
35+
</Switch>
36+
</ThemeProvider>
3237
);
3338

3439
export default withRouter(Content);

‎packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from 'react';
22
import styled from 'styled-components';
33

4+
import { Button } from '@codesandbox/components';
5+
46
import { useMutation } from '@apollo/react-hooks';
57

6-
import Input from '@codesandbox/common/lib/components/Input';
7-
import { Button } from '@codesandbox/common/lib/components/Button';
88
import track from '@codesandbox/common/lib/utils/analytics';
99

10+
import { UserSearchInput } from 'app/components/UserSearchInput';
11+
1012
import { useOvermind } from 'app/overmind';
1113
import { INVITE_TO_TEAM } from '../../../../queries';
1214
import { IAddTeamMemberProps, IMutationVariables } from './types';
@@ -21,13 +23,13 @@ const ErrorMessage = styled.div`
2123
export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
2224
const { actions } = useOvermind();
2325
const [inviteToTeam, { loading, error }] = useMutation(INVITE_TO_TEAM);
24-
let input: HTMLInputElement = null;
26+
const [inviteValue, setInviteValue] = React.useState('');
2527

2628
const submit: React.FormEventHandler = e => {
2729
e.preventDefault();
2830
e.stopPropagation();
2931

30-
let isEmail = input.value.includes('@');
32+
let isEmail = inviteValue.includes('@');
3133

3234
track('Team - Add Member', { email: isEmail });
3335

@@ -37,23 +39,22 @@ export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
3739

3840
const variables: IMutationVariables = { teamId };
3941

40-
const { value } = input;
4142
if (isEmail) {
42-
variables.email = value;
43+
variables.email = inviteValue;
4344
} else {
44-
variables.username = value;
45+
variables.username = inviteValue;
4546
}
4647

4748
inviteToTeam({
4849
variables,
4950
}).then(() => {
5051
actions.notificationAdded({
51-
title: `${value} has been invited!`,
52+
title: `${inviteValue} has been invited!`,
5253
notificationType: 'success',
5354
});
5455
});
5556

56-
input.value = '';
57+
setInviteValue('');
5758
};
5859

5960
const errorMessage =
@@ -63,14 +64,13 @@ export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
6364
<>
6465
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
6566
<form style={{ display: 'flex' }} onSubmit={loading ? undefined : submit}>
66-
<Input
67-
ref={node => {
68-
input = node;
67+
<UserSearchInput
68+
inputValue={inviteValue}
69+
onInputValueChange={val => {
70+
setInviteValue(val);
6971
}}
70-
placeholder="Add member by username"
71-
block
7272
/>
73-
<Button type="submit" disabled={loading} style={{ width: 200 }} small>
73+
<Button type="submit" loading={loading} style={{ width: 200 }}>
7474
{loading ? 'Adding Member...' : 'Add Member'}
7575
</Button>
7676
</form>

‎packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import AutosizeTextArea from '@codesandbox/common/lib/components/AutosizeTextArea';
2-
import { Button } from '@codesandbox/common/lib/components/Button';
2+
import { Button } from '@codesandbox/components';
33
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
44
import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
55
import track from '@codesandbox/common/lib/utils/analytics';
@@ -133,20 +133,18 @@ class TeamView extends React.PureComponent {
133133
}}
134134
>
135135
<Button
136-
style={{ marginRight: '.5rem' }}
137-
red
138-
small
136+
style={{ marginRight: '.5rem', flex: 1 }}
137+
variant="danger"
139138
onClick={stopEditing}
140139
type="reset"
141-
disabled={descriptionLoading}
140+
loading={descriptionLoading}
142141
>
143142
Cancel
144143
</Button>
145144
<Button
146-
style={{ marginLeft: '.5rem' }}
147-
small
145+
style={{ marginLeft: '.5rem', flex: 1 }}
148146
type="submit"
149-
disabled={descriptionLoading}
147+
loading={descriptionLoading}
150148
>
151149
Confirm
152150
</Button>

‎packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
3+
import { Element, Link } from '@codesandbox/components';
4+
5+
export const SandboxCard = ({ sandbox }) => (
6+
<Element>
7+
<Link href={sandboxUrl({ id: sandbox.id, alias: sandbox.alias })}>
8+
{sandbox.title || sandbox.alias || sandbox.id}
9+
</Link>
10+
</Element>
11+
);

‎packages/app/src/app/pages/NewDashboard/Content/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
3+
4+
// import { RecentSandboxes } from './routes/RecentSandboxes';
5+
// import PathedSandboxes from './routes/PathedSandboxes';
6+
// import { Templates } from './routes/Templates';
7+
// import DeletedSandboxes from './routes/DeletedSandboxes';
8+
// import SearchSandboxes from './routes/SearchSandboxes';
9+
// import CreateTeam from './routes/CreateTeam';
10+
// import TeamView from './routes/TeamView';
11+
import { Element } from '@codesandbox/components';
12+
import { StartSandboxes } from './routes/StartSandboxes';
13+
import { Templates } from './routes/Templates';
14+
15+
const ContentComponent = () => (
16+
<Element style={{ width: 960, margin: '40px auto' }}>
17+
<Switch>
18+
<Route path="/new-dashboard/start" component={StartSandboxes} />
19+
<Route path="/new-dashboard/templates" component={Templates} />
20+
{/* <Route path="/dashboard/trash" component={DeletedSandboxes} />
21+
<Route path="/dashboard/templates" exact component={Templates} />
22+
<Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
23+
<Route path="/dashboard/search" component={SearchSandboxes} />
24+
<Route path="/dashboard/teams/new" component={CreateTeam} />
25+
<Route exact path="/dashboard/teams/:teamId" component={TeamView} />
26+
<Route
27+
path="/dashboard/teams/:teamId/sandboxes/:path*"
28+
component={PathedSandboxes}
29+
/>
30+
<Route
31+
path="/dashboard/teams/:teamId/templates"
32+
component={Templates}
33+
exact
34+
/> */}
35+
<Redirect to="/new-dashboard/start" />
36+
</Switch>
37+
</Element>
38+
);
39+
40+
export const Content = withRouter(ContentComponent);

‎packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from 'react';
2+
import css from '@styled-system/css';
3+
import { Element, Text, Button } from '@codesandbox/components';
4+
import { useQuery } from '@apollo/react-hooks';
5+
import { useOvermind } from 'app/overmind';
6+
import {
7+
RecentSandboxesQuery,
8+
RecentSandboxesQueryVariables,
9+
ListPersonalTemplatesQuery,
10+
ListPersonalTemplatesQueryVariables,
11+
} from 'app/graphql/types';
12+
import { LIST_PERSONAL_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
13+
import { RECENT_SANDBOXES_CONTENT_QUERY } from '../../../queries';
14+
import { SandboxCard } from '../../../Components/SandboxCard';
15+
16+
export const StartSandboxes = () => {
17+
const {
18+
state,
19+
actions: { modalOpened },
20+
} = useOvermind();
21+
const { loading, error, data } = useQuery<
22+
RecentSandboxesQuery,
23+
RecentSandboxesQueryVariables
24+
>(RECENT_SANDBOXES_CONTENT_QUERY, {
25+
variables: {
26+
orderField: state.dashboard.orderBy.field,
27+
// @ts-ignore
28+
orderDirection: state.dashboard.orderBy.order.toUpperCase(),
29+
},
30+
});
31+
32+
const {
33+
data: templatesData,
34+
error: templatesError,
35+
loading: templatesLoading,
36+
} = useQuery<ListPersonalTemplatesQuery, ListPersonalTemplatesQueryVariables>(
37+
LIST_PERSONAL_TEMPLATES,
38+
{
39+
variables: {},
40+
fetchPolicy: 'cache-and-network',
41+
}
42+
);
43+
44+
if (error || templatesError) {
45+
return <Text>Error</Text>;
46+
}
47+
48+
if (loading || templatesLoading) {
49+
return <Text>loading</Text>;
50+
}
51+
52+
const sandboxes = data && data.me && data.me.sandboxes;
53+
const templates =
54+
templatesData &&
55+
templatesData.me &&
56+
templatesData.me.recentlyUsedTemplates.slice(0, 4);
57+
58+
return (
59+
<Element>
60+
<Text marginBottom={4} block>
61+
Recently used Templates
62+
</Text>
63+
<Element
64+
css={css({
65+
display: 'grid',
66+
gridTemplateColumns: 'repeat(4,1fr)',
67+
gridGap: 6,
68+
})}
69+
marginBottom={8}
70+
>
71+
{templates.map(({ sandbox }) => (
72+
<SandboxCard sandbox={sandbox} key={sandbox.id} />
73+
))}
74+
</Element>
75+
76+
<Text marginBottom={4} block>
77+
Your Recent Sandboxes
78+
</Text>
79+
<Element
80+
css={css({
81+
display: 'grid',
82+
gridTemplateColumns: 'repeat(4,1fr)',
83+
gridGap: 6,
84+
})}
85+
>
86+
<Button onClick={() => modalOpened({ modal: 'newSandbox' })}>
87+
New Sandbox
88+
</Button>
89+
{sandboxes.map(sandbox => (
90+
<SandboxCard sandbox={sandbox} key={sandbox.id} />
91+
))}
92+
</Element>
93+
</Element>
94+
);
95+
};

0 commit comments

Comments
 (0)