Skip to content

Commit 5ed2c89

Browse files
siddharthkpsiddharthkp
authored
Sidebar: Not owned + templates (codesandbox#3420)
* copy project info for not logged in * replace stats * repurpose summary * some improvements for template * switch toggle width = height
1 parent a5c3153 commit 5ed2c89

File tree

8 files changed

+199
-138
lines changed

8 files changed

+199
-138
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { Live } from './items/Live';
2525
import { Live as LiveNew } from './screens/Live';
2626
import { More } from './items/More';
2727
import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
28+
import { NotOwnedSandboxInfo as NotOwnedSandboxInfoNew } from './screens/NotOwnedSandboxInfo';
2829
import { ProjectInfo } from './items/ProjectInfo';
2930
import { ProjectInfo as ProjectInfoNew } from './screens/ProjectInfo';
3031
import { Deployment as DeploymentNew } from './screens/Deployment/index';
@@ -39,7 +40,9 @@ const WorkspaceWrapper = REDESIGNED_SIDEBAR ? ThemeProvider : React.Fragment;
3940

4041
const workspaceTabs = {
4142
project: REDESIGNED_SIDEBAR ? ProjectInfoNew : ProjectInfo,
42-
'project-summary': NotOwnedSandboxInfo,
43+
'project-summary': REDESIGNED_SIDEBAR
44+
? NotOwnedSandboxInfoNew
45+
: NotOwnedSandboxInfo,
4346
github: REDESIGNED_SIDEBAR ? GitHubNew : GitHub,
4447
files: REDESIGNED_SIDEBAR ? Explorer : FilesItem,
4548
deploy: REDESIGNED_SIDEBAR ? DeploymentNew : Deployment,

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/index.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import css from '@styled-system/css';
77
import DirectoryEntry from './DirectoryEntry/index';
88
import EditIcons from './DirectoryEntry/Entry/EditIcons';
99

10-
export const Files: React.FC = () => {
10+
export const Files = ({ defaultOpen = null }) => {
1111
const {
1212
state: { editor: editorState, isLoggedIn },
1313
actions: { editor, files },
@@ -27,7 +27,11 @@ export const Files: React.FC = () => {
2727

2828
return (
2929
<>
30-
<Collapsible title="Files" defaultOpen css={{ position: 'relative' }}>
30+
<Collapsible
31+
title="Files"
32+
defaultOpen={defaultOpen}
33+
css={{ position: 'relative' }}
34+
>
3135
<SidebarRow
3236
justify="flex-end"
3337
css={css({

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/index.tsx

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
import React from 'react';
2+
import { useOvermind } from 'app/overmind';
23
import { Files } from './Files';
34
import { Dependencies } from './Dependencies';
45
import { ExternalResources } from './ExternalResources';
56

6-
export const Explorer = () => (
7-
<>
8-
<Files />
9-
<Dependencies />
10-
<ExternalResources />
11-
</>
12-
);
7+
export const Explorer = ({ filesDefaultOpen = true }) => {
8+
const {
9+
state: { editor },
10+
} = useOvermind();
11+
12+
const template = editor.currentSandbox.template;
13+
14+
return (
15+
<>
16+
<Files defaultOpen={filesDefaultOpen} />
17+
{template !== 'static' && (
18+
<>
19+
<Dependencies />
20+
<ExternalResources />
21+
</>
22+
)}
23+
</>
24+
);
25+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/NotOwnedSandboxInfo/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import { Explorer } from '../Explorer';
3+
import { Summary } from '../ProjectInfo/Summary';
4+
5+
export const NotOwnedSandboxInfo = () => (
6+
<>
7+
<Summary />
8+
<Explorer filesDefaultOpen={false} />
9+
</>
10+
);

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Description.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ export const Description: FunctionComponent<Props> = ({ editable }) => {
7575
valueChanged({ field: 'description', value });
7676
};
7777

78+
if (!description && !editable) return null;
79+
7880
return editing ? (
7981
<FormField
8082
direction="vertical"

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import React, { useEffect } from 'react';
2+
import { useOvermind } from 'app/overmind';
3+
4+
import {
5+
Element,
6+
Collapsible,
7+
Text,
8+
Link,
9+
Label,
10+
Avatar,
11+
Stack,
12+
List,
13+
ListItem,
14+
ListAction,
15+
Switch,
16+
Stats,
17+
} from '@codesandbox/components';
18+
19+
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
20+
import {
21+
sandboxUrl,
22+
profileUrl,
23+
} from '@codesandbox/common/lib/utils/url-generator';
24+
import getTemplateDefinition from '@codesandbox/common/lib/templates';
25+
import { Icons } from '@codesandbox/template-icons';
26+
import getIcon from '@codesandbox/common/lib/templates/icons';
27+
28+
import { css } from '@styled-system/css';
29+
import { Title } from './Title';
30+
import { Description } from './Description';
31+
import { TemplateConfig } from './TemplateConfig';
32+
33+
export const Summary = () => {
34+
const {
35+
actions: {
36+
editor: { frozenUpdated, sessionFreezeOverride },
37+
},
38+
state: {
39+
editor: { currentSandbox, sessionFrozen },
40+
},
41+
} = useOvermind();
42+
const {
43+
owned,
44+
author,
45+
isFrozen,
46+
customTemplate,
47+
template,
48+
forkedFromSandbox,
49+
forkedTemplateSandbox,
50+
} = currentSandbox;
51+
52+
useEffect(() => {
53+
// always freeze it on start
54+
if (customTemplate) {
55+
frozenUpdated({ frozen: true });
56+
}
57+
}, [customTemplate, frozenUpdated]);
58+
59+
const updateFrozenState = () => {
60+
if (customTemplate) {
61+
return sessionFreezeOverride({ frozen: !sessionFrozen });
62+
}
63+
64+
return frozenUpdated({ frozen: !isFrozen });
65+
};
66+
67+
const isForked = forkedFromSandbox || forkedTemplateSandbox;
68+
const { url: templateUrl } = getTemplateDefinition(template);
69+
70+
return (
71+
<>
72+
<Collapsible
73+
title={customTemplate ? 'Template Info' : 'Sandbox Info'}
74+
defaultOpen
75+
>
76+
<Stack direction="vertical" gap={6}>
77+
<Element as="section" css={css({ paddingX: 2 })}>
78+
{customTemplate ? (
79+
<Stack gap={2} align="center" marginBottom={2}>
80+
<TemplateIcon
81+
iconUrl={customTemplate.iconUrl}
82+
environment={template}
83+
/>
84+
<Title editable={owned} />
85+
</Stack>
86+
) : (
87+
<>
88+
<Title editable={owned} />
89+
</>
90+
)}
91+
<Description editable={owned} />
92+
</Element>
93+
94+
<Element as="section" css={css({ paddingX: 2 })}>
95+
{author ? (
96+
<Link href={profileUrl(author.username)}>
97+
<Stack gap={2} align="center" marginBottom={4}>
98+
<Avatar user={author} /> <Text>{author.username}</Text>
99+
</Stack>
100+
</Link>
101+
) : null}
102+
<Stats sandbox={currentSandbox} />
103+
</Element>
104+
105+
<List>
106+
{customTemplate && <TemplateConfig />}
107+
{owned && (
108+
<ListAction justify="space-between">
109+
<Label htmlFor="frozen">Frozen</Label>
110+
<Switch
111+
id="frozen"
112+
onChange={updateFrozenState}
113+
on={customTemplate ? sessionFrozen : isFrozen}
114+
/>
115+
</ListAction>
116+
)}
117+
{isForked ? (
118+
<ListItem justify="space-between">
119+
<Text>
120+
{forkedTemplateSandbox ? 'Template' : 'Forked From'}
121+
</Text>
122+
<Link
123+
variant="muted"
124+
href={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
125+
target="_blank"
126+
>
127+
{getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
128+
</Link>
129+
</ListItem>
130+
) : null}
131+
<ListItem justify="space-between">
132+
<Text>Environment</Text>
133+
<Link variant="muted" href={templateUrl} target="_blank">
134+
{template}
135+
</Link>
136+
</ListItem>
137+
</List>
138+
</Stack>
139+
</Collapsible>
140+
</>
141+
);
142+
};
143+
144+
const TemplateIcon = ({ iconUrl, environment }) => {
145+
const Icon = Icons[iconUrl] || getIcon(environment);
146+
return <Icon />;
147+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/index.tsx

Lines changed: 9 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,12 @@
1-
import React, { useEffect } from 'react';
2-
import {
3-
Element,
4-
Collapsible,
5-
Text,
6-
Link,
7-
Label,
8-
Avatar,
9-
Stack,
10-
List,
11-
ListAction,
12-
ListItem,
13-
Switch,
14-
Stats,
15-
} from '@codesandbox/components';
16-
17-
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
18-
import {
19-
sandboxUrl,
20-
profileUrl,
21-
} from '@codesandbox/common/lib/utils/url-generator';
22-
import getTemplateDefinition from '@codesandbox/common/lib/templates';
23-
import { useOvermind } from 'app/overmind';
24-
25-
import { css } from '@styled-system/css';
26-
import { Title } from './Title';
27-
import { Description } from './Description';
1+
import React from 'react';
2+
import { Summary } from './Summary';
283
import { Privacy } from './Privacy';
294
import { Config } from './Config';
30-
import { TemplateConfig } from './TemplateConfig';
31-
32-
export const ProjectInfo = () => {
33-
const {
34-
actions: {
35-
editor: { frozenUpdated, sessionFreezeOverride },
36-
},
37-
state: {
38-
editor: { currentSandbox, sessionFrozen },
39-
},
40-
} = useOvermind();
41-
const {
42-
author,
43-
isFrozen,
44-
customTemplate,
45-
template,
46-
forkedFromSandbox,
47-
forkedTemplateSandbox,
48-
} = currentSandbox;
49-
50-
useEffect(() => {
51-
// always freeze it on start
52-
if (customTemplate) {
53-
frozenUpdated({ frozen: true });
54-
}
55-
}, [customTemplate, frozenUpdated]);
56-
57-
const updateFrozenState = () => {
58-
if (customTemplate) {
59-
return sessionFreezeOverride({ frozen: !sessionFrozen });
60-
}
61-
62-
return frozenUpdated({ frozen: !isFrozen });
63-
};
64-
65-
const isForked = forkedFromSandbox || forkedTemplateSandbox;
66-
const { url: templateUrl } = getTemplateDefinition(template);
67-
68-
return (
69-
<>
70-
<Collapsible
71-
title={customTemplate ? 'Template Info' : 'Sandbox Info'}
72-
defaultOpen
73-
>
74-
<Stack direction="vertical" gap={6}>
75-
<Element as="section" css={css({ paddingX: 2 })}>
76-
<Title editable />
77-
<Element marginTop={2}>
78-
<Description editable />
79-
</Element>
80-
</Element>
81-
82-
<Element as="section" css={css({ paddingX: 2 })}>
83-
{author ? (
84-
<Link href={profileUrl(author.username)}>
85-
<Stack gap={2} align="center" marginBottom={4}>
86-
<Avatar user={author} /> <Text>{author.username}</Text>
87-
</Stack>
88-
</Link>
89-
) : null}
90-
<Stats sandbox={currentSandbox} />
91-
</Element>
925

93-
<List>
94-
{customTemplate && <TemplateConfig />}
95-
<ListAction onClick={updateFrozenState} justify="space-between">
96-
<Label htmlFor="frozen">Frozen</Label>
97-
<Switch
98-
id="frozen"
99-
onChange={updateFrozenState}
100-
on={customTemplate ? sessionFrozen : isFrozen}
101-
/>
102-
</ListAction>
103-
{isForked ? (
104-
<ListItem justify="space-between">
105-
<Text>
106-
{forkedTemplateSandbox ? 'Template' : 'Forked From'}
107-
</Text>
108-
<Link
109-
variant="muted"
110-
href={sandboxUrl(forkedFromSandbox || forkedTemplateSandbox)}
111-
target="_blank"
112-
>
113-
{getSandboxName(forkedFromSandbox || forkedTemplateSandbox)}
114-
</Link>
115-
</ListItem>
116-
) : null}
117-
<ListItem justify="space-between">
118-
<Text>Environment</Text>
119-
<Link variant="muted" href={templateUrl} target="_blank">
120-
{template}
121-
</Link>
122-
</ListItem>
123-
</List>
124-
</Stack>
125-
</Collapsible>
126-
<Privacy />
127-
<Config />
128-
</>
129-
);
130-
};
6+
export const ProjectInfo = () => (
7+
<>
8+
<Summary />
9+
<Privacy />
10+
<Config />
11+
</>
12+
);

‎packages/components/src/components/Switch/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const SwitchBackground = styled.div(
1717

1818
const SwitchToggle = styled.span(
1919
css({
20-
width: 4,
20+
width: '14px',
2121
height: '14px',
2222
backgroundColor: 'switch.foregroundOff',
2323
borderRadius: '50%',

0 commit comments

Comments
 (0)