Skip to content

Commit 07a38f8

Browse files
SaraVieiraCompuIves
SaraVieira
authored and
CompuIves
committed
Dashboard improvements (codesandbox#1592)
* satart * fix renaming * delete and edit folders * remove create * fix path0 * fix paddinh * minor fix * some fixes * more small enhancements * add empty trash button * only show button when there are sandboxes in the trash * commment folders * comment import too maybe idk :(
1 parent 3917050 commit 07a38f8

File tree

20 files changed

+243
-86
lines changed

20 files changed

+243
-86
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"start:dynamic": "lerna run dev --scope dynamic-pages --stream",
1717
"start:home": "lerna run start --scope homepage --stream",
1818
"start:test": "lerna run start:test --scope app --stream",
19-
"start:dev_api": "lerna run start --parallel --scope codesandbox-api & lerna run start:dev_api --scope app --stream",
19+
"start:dev_api": "yarn build:deps && (lerna run start --parallel --scope codesandbox-api & lerna run start:dev_api --scope app --stream)",
2020
"test": "lerna run test --ignore codesandbox-browserfs",
2121
"test:integrations": "lerna exec --scope app --stream -- yarn test:integrations",
2222
"test:jest-lite": "lerna exec --scope app --stream -- yarn run test jest-lite --watch --coverage",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ class Content extends React.Component {
1212
const {
1313
sandboxes,
1414
Header,
15+
SubHeader,
1516
isLoading,
1617
ExtraElement,
1718
hideOrder,
@@ -45,6 +46,7 @@ class Content extends React.Component {
4546
possibleTemplates={possibleTemplates}
4647
/>
4748
</HeaderContainer>
49+
{SubHeader}
4850
{isLoading ? (
4951
<DelayedAnimation
5052
delay={0.6}

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import React from 'react';
22
import { inject, Observer } from 'mobx-react';
33
import { uniq } from 'lodash-es';
44
import { Query } from 'react-apollo';
5+
import Button from 'common/lib/components/Button';
56

67
import Sandboxes from '../../Sandboxes';
78

89
import { DELETED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
910

10-
const DeletedSandboxes = ({ store }) => {
11+
const DeletedSandboxes = ({ store, signals }) => {
1112
document.title = 'Deleted Sandboxes - CodeSandbox';
13+
1214
return (
1315
<Query
1416
fetchPolicy="cache-and-network"
@@ -32,11 +34,34 @@ const DeletedSandboxes = ({ store }) => {
3234
const orderedSandboxes = store.dashboard.getFilteredSandboxes(
3335
sandboxes
3436
);
37+
signals.dashboard.setTrashSandboxes({
38+
sandboxIds: orderedSandboxes.map(i => i.id),
39+
});
40+
41+
const DeleteButton = () =>
42+
orderedSandboxes.length ? (
43+
<Button
44+
css={`
45+
width: 200px;
46+
margin: 20px 0;
47+
`}
48+
small
49+
danger
50+
onClick={() => {
51+
signals.modalOpened({
52+
modal: 'emptyTrash',
53+
});
54+
}}
55+
>
56+
Empty Trash
57+
</Button>
58+
) : null;
3559

3660
return (
3761
<Sandboxes
3862
isLoading={loading}
3963
Header="Deleted Sandboxes"
64+
SubHeader={<DeleteButton />}
4065
sandboxes={orderedSandboxes}
4166
possibleTemplates={possibleTemplates}
4267
/>

‎packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Folders.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import { withRouter } from 'react-router-dom';
3+
import FolderEntry from '../../../Sidebar/SandboxesItem/FolderEntry';
4+
import getChildCollections from '../../../utils/get-child-collections';
5+
6+
import { Folder, FoldersWrapper } from './elements';
7+
8+
const Folders = ({ loading, me, history, match: { params }, teamId }) => {
9+
const getPath = name => (params.path ? `${params.path}/${name}` : '/' + name);
10+
11+
if (loading) return null;
12+
13+
const { children, foldersByPath, folders } = getChildCollections(
14+
me.collections,
15+
(me.collection || {}).path
16+
);
17+
18+
if (children.size === 0) return null;
19+
20+
return (
21+
<FoldersWrapper>
22+
{Array.from(children)
23+
.sort()
24+
.map(name => (
25+
<Folder>
26+
<FolderEntry
27+
key={name}
28+
toToggle={false}
29+
allowCreate={false}
30+
basePath={window.location.pathname}
31+
teamId={teamId}
32+
path={getPath(name)}
33+
folders={folders}
34+
foldersByPath={foldersByPath}
35+
name={name}
36+
open={false}
37+
onSelect={() => {
38+
history.push(window.location.pathname + '/' + name);
39+
}}
40+
currentPath={window.location.pathname}
41+
currentTeamId={teamId}
42+
/>
43+
</Folder>
44+
))}
45+
</FoldersWrapper>
46+
);
47+
};
48+
49+
export default withRouter(Folders);

‎packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/elements.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styled from 'styled-components';
2+
3+
export const Folder = styled.div`
4+
min-width: 235px;
5+
height: 40px;
6+
display: flex;
7+
align-items: center;
8+
margin-right: 30px;
9+
padding: 0 11px;
10+
margin-bottom: 20px;
11+
12+
background: #25282a;
13+
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
14+
`;
15+
16+
export const FoldersWrapper = styled.section`
17+
display: flex;
18+
margin-top: 40px;
19+
flex-wrap: wrap;
20+
`;

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ import React from 'react';
22
import { uniq } from 'lodash-es';
33
import { inject, observer, Observer } from 'mobx-react';
44
import { Query } from 'react-apollo';
5-
65
import { basename } from 'path';
7-
86
import Sandboxes from '../../Sandboxes';
97
import Navigation from './Navigation';
8+
// import Folders from './Folders';
109
import CreateNewSandbox from '../../CreateNewSandbox';
11-
import getMostUsedTemplate from '../utils/getMostUsedTemplate';
10+
import getMostUsedTemplate from '../../../utils/get-most-used-template';
1211

1312
import { PATHED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
1413

@@ -17,7 +16,6 @@ const PathedSandboxes = props => {
1716
const teamId = props.match.params.teamId;
1817

1918
document.title = `${basename(path) || 'Dashboard'} - CodeSandbox`;
20-
2119
return (
2220
<Query query={PATHED_SANDBOXES_CONTENT_QUERY} variables={{ path, teamId }}>
2321
{({ loading, error, data }) => (
@@ -67,6 +65,10 @@ const PathedSandboxes = props => {
6765
isLoading={loading}
6866
possibleTemplates={possibleTemplates}
6967
Header={<Navigation teamId={teamId} path={path} />}
68+
// Fix React Virtualized First
69+
// SubHeader={
70+
// <Folders me={data.me} loading={loading} teamId={teamId} />
71+
// }
7072
sandboxes={orderedSandboxes}
7173
/>
7274
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { observer, inject } from 'mobx-react';
33

44
import { Query } from 'react-apollo';
55

6-
import getMostUsedTemplate from '../utils/getMostUsedTemplate';
6+
import getMostUsedTemplate from '../../../utils/get-most-used-template';
77

88
import Sandboxes from '../../Sandboxes';
99

‎packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.js‎

Lines changed: 78 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { ARROW_LEFT, ARROW_RIGHT, ESC } from 'common/lib/utils/keycodes';
2323

2424
import { Container, AnimatedChevron, IconContainer } from './elements';
2525

26-
import getDirectChildren from '../utils/get-direct-children';
26+
import getDirectChildren from '../../../utils/get-direct-children';
2727
import { entryTarget, collectTarget } from '../folder-drop-target';
2828

2929
import CreateFolderEntry from './CreateFolderEntry';
@@ -92,6 +92,8 @@ class FolderEntry extends React.Component {
9292
foldersByPath,
9393
depth,
9494
isOver,
95+
toToggle = true,
96+
allowCreate = true,
9597
canDrop,
9698
connectDropTarget,
9799
connectDragSource,
@@ -106,72 +108,75 @@ class FolderEntry extends React.Component {
106108
const url = `${basePath}${path}`;
107109
const children = getDirectChildren(path, folders);
108110

109-
return connectDropTarget(
110-
connectDragSource(
111-
<div>
112-
<ContextMenu
113-
items={[
111+
const menuItems = [
112+
{
113+
title: 'Rename Folder',
114+
icon: RenameIcon,
115+
action: () => {
116+
this.setState({ renamingDirectory: true });
117+
return true;
118+
},
119+
},
120+
{
121+
title: 'Delete Folder',
122+
icon: TrashIcon,
123+
color: theme.red.darken(0.2)(),
124+
action: () => {
125+
track('Dashboard - Folder Deleted');
126+
client.mutate({
127+
mutation: DELETE_FOLDER_MUTATION,
128+
variables: { path, teamId },
129+
130+
refetchQueries: [
114131
{
115-
title: 'Create Folder',
116-
icon: AddFolderIcon,
117-
action: () => {
118-
this.setState({ creatingDirectory: true, open: true });
119-
return true;
120-
},
132+
query: PATHED_SANDBOXES_CONTENT_QUERY,
133+
variables: { path: '/', teamId },
121134
},
122-
{
123-
title: 'Rename Folder',
124-
icon: RenameIcon,
125-
action: () => {
126-
this.setState({ renamingDirectory: true });
127-
return true;
135+
],
136+
update: (cache, { data: { deleteCollection } }) => {
137+
const variables = {};
138+
if (teamId) {
139+
variables.teamId = teamId;
140+
}
141+
142+
const cacheData = cache.readQuery({
143+
query: PATHED_SANDBOXES_FOLDER_QUERY,
144+
variables,
145+
});
146+
147+
cache.writeQuery({
148+
query: PATHED_SANDBOXES_FOLDER_QUERY,
149+
variables,
150+
data: {
151+
...cacheData,
152+
me: {
153+
...cacheData.me,
154+
collections: deleteCollection,
155+
},
128156
},
129-
},
130-
{
131-
title: 'Delete Folder',
132-
icon: TrashIcon,
133-
color: theme.red.darken(0.2)(),
134-
action: () => {
135-
track('Dashboard - Folder Deleted');
136-
client.mutate({
137-
mutation: DELETE_FOLDER_MUTATION,
138-
variables: { path, teamId },
139-
140-
refetchQueries: [
141-
{
142-
query: PATHED_SANDBOXES_CONTENT_QUERY,
143-
variables: { path: '/', teamId },
144-
},
145-
],
146-
update: (cache, { data: { deleteCollection } }) => {
147-
const variables = {};
148-
if (teamId) {
149-
variables.teamId = teamId;
150-
}
151-
152-
const cacheData = cache.readQuery({
153-
query: PATHED_SANDBOXES_FOLDER_QUERY,
154-
variables,
155-
});
157+
});
158+
},
159+
});
160+
return true;
161+
},
162+
},
163+
];
164+
165+
if (allowCreate) {
166+
menuItems.unshift({
167+
title: 'Create Folder',
168+
icon: AddFolderIcon,
169+
action: () => {
170+
this.setState({ creatingDirectory: true, open: true });
171+
return true;
172+
},
173+
});
174+
}
156175

157-
cache.writeQuery({
158-
query: PATHED_SANDBOXES_FOLDER_QUERY,
159-
variables,
160-
data: {
161-
...cacheData,
162-
me: {
163-
...cacheData.me,
164-
collections: deleteCollection,
165-
},
166-
},
167-
});
168-
},
169-
});
170-
return true;
171-
},
172-
},
173-
]}
174-
>
176+
return connectDropTarget(
177+
connectDragSource(
178+
<div>
179+
<ContextMenu items={menuItems}>
175180
<Container
176181
as={onSelect ? 'div' : undefined}
177182
onClick={onSelect ? this.handleSelect : undefined}
@@ -194,11 +199,13 @@ class FolderEntry extends React.Component {
194199
tabIndex={0}
195200
>
196201
<IconContainer>
197-
<AnimatedChevron
198-
onClick={this.toggleOpen}
199-
open={this.state.open}
200-
style={{ opacity: children.size > 0 ? 1 : 0 }}
201-
/>
202+
{toToggle ? (
203+
<AnimatedChevron
204+
onClick={this.toggleOpen}
205+
open={this.state.open}
206+
style={{ opacity: children.size > 0 ? 1 : 0 }}
207+
/>
208+
) : null}
202209
<FolderIcon />
203210
</IconContainer>{' '}
204211
{this.state.renamingDirectory ? (
@@ -211,7 +218,6 @@ class FolderEntry extends React.Component {
211218
if (e) {
212219
e.preventDefault();
213220
}
214-
215221
mutate({
216222
variables: {
217223
path,
@@ -279,7 +285,9 @@ class FolderEntry extends React.Component {
279285
</ContextMenu>
280286

281287
<ReactShow
282-
show={children.size > 0 && !isDragging && this.state.open}
288+
show={
289+
children.size > 0 && !isDragging && this.state.open && toToggle
290+
}
283291
duration={250}
284292
stayMounted={false}
285293
style={{

0 commit comments

Comments
 (0)