Skip to content

Commit 223707c

Browse files
christianalfonichristianalfoni
committed
github summary with readonly explorer etc
1 parent 52d28f3 commit 223707c

File tree

12 files changed

+176
-116
lines changed

12 files changed

+176
-116
lines changed

‎packages/app/src/app/overmind/utils/items.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
REDESIGNED_SIDEBAR,
55
} from '@codesandbox/common/lib/utils/feature-flags';
66
import { hasPermission } from '@codesandbox/common/lib/utils/permission';
7+
import { config } from 'app/overmind';
8+
import { Overmind } from 'overmind';
79

810
export interface INavigationItem {
911
id: string;
@@ -33,6 +35,12 @@ export const PROJECT_SUMMARY: INavigationItem = {
3335
hasCustomHeader: true,
3436
};
3537

38+
export const GITHUB_SUMMARY: INavigationItem = {
39+
id: 'github-summary',
40+
name: 'Github Info',
41+
hasCustomHeader: true,
42+
};
43+
3644
export const FILES: INavigationItem = {
3745
id: 'files',
3846
name: 'Explorer',
@@ -91,10 +99,13 @@ export function getDisabledItems(store: any): INavigationItem[] {
9199
return [];
92100
}
93101

94-
export default function getItems(store: any): INavigationItem[] {
102+
export default function getItems(
103+
store: Overmind<typeof config>['state']
104+
): INavigationItem[] {
95105
if (!store.editor.currentSandbox) {
96106
return [];
97107
}
108+
98109
if (
99110
store.live.isLive &&
100111
!(
@@ -111,6 +122,10 @@ export default function getItems(store: any): INavigationItem[] {
111122

112123
const { currentSandbox } = store.editor;
113124

125+
if (currentSandbox.git) {
126+
return [GITHUB_SUMMARY];
127+
}
128+
114129
if (!currentSandbox || !currentSandbox.owned) {
115130
return [PROJECT_SUMMARY, CONFIGURATION];
116131
}

‎packages/app/src/app/pages/Sandbox/Editor/Navigation/Navigation.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
const IDS_TO_ICONS = {
2626
project: InfoIcon,
2727
'project-summary': InfoIcon,
28+
'github-summary': GithubIcon,
2829
files: ExplorerIcon,
2930
github: GithubIcon,
3031
deploy: DeployIcon,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { ConfigurationFiles as ConfigurationFilesNew } from './screens/Configura
3333
import { Deployment as DeploymentNew } from './screens/Deployment/index';
3434
import { Explorer } from './screens/Explorer';
3535
import { GitHub as GitHubNew } from './screens/GitHub';
36+
import { GithubSummary } from './screens/GithubSummary';
3637
import { Live as LiveNew } from './screens/Live';
3738
import { NotOwnedSandboxInfo as NotOwnedSandboxInfoNew } from './screens/NotOwnedSandboxInfo';
3839
import { ProjectInfo as ProjectInfoNew } from './screens/ProjectInfo';
@@ -46,6 +47,7 @@ const WorkspaceWrapper = NEW_SIDEBAR ? ThemeProvider : React.Fragment;
4647
const workspaceTabs = {
4748
project: NEW_SIDEBAR ? ProjectInfoNew : ProjectInfo,
4849
'project-summary': NEW_SIDEBAR ? NotOwnedSandboxInfoNew : NotOwnedSandboxInfo,
50+
'github-summary': GithubSummary,
4951
github: NEW_SIDEBAR ? GitHubNew : GitHub,
5052
files: NEW_SIDEBAR ? Explorer : FilesItem,
5153
deploy: NEW_SIDEBAR ? DeploymentNew : Deployment,

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
import React, { FunctionComponent } from 'react';
2-
import { useOvermind } from 'app/overmind';
3-
41
import {
2+
Button,
53
Collapsible,
6-
Text,
7-
SidebarRow,
84
List,
9-
Button,
5+
SidebarRow,
6+
Text,
107
} from '@codesandbox/components';
8+
import { useOvermind } from 'app/overmind';
9+
import React, { FunctionComponent } from 'react';
10+
1111
import { Dependency } from './Dependency';
1212

13-
export const Dependencies: FunctionComponent = () => {
13+
export const Dependencies: FunctionComponent<{ readonly?: boolean }> = ({
14+
readonly = false,
15+
}) => {
1416
const {
1517
actions: {
1618
modalOpened,
@@ -56,14 +58,16 @@ export const Dependencies: FunctionComponent = () => {
5658
/>
5759
))}
5860
</List>
59-
<SidebarRow marginX={2}>
60-
<Button
61-
variant="secondary"
62-
onClick={() => modalOpened({ modal: 'searchDependencies' })}
63-
>
64-
Add dependency
65-
</Button>
66-
</SidebarRow>
61+
{!readonly && (
62+
<SidebarRow marginX={2}>
63+
<Button
64+
variant="secondary"
65+
onClick={() => modalOpened({ modal: 'searchDependencies' })}
66+
>
67+
Add dependency
68+
</Button>
69+
</SidebarRow>
70+
)}
6771
</Collapsible>
6872
);
6973
};

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

Lines changed: 80 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
import React, { FunctionComponent } from 'react';
2-
import { useOvermind } from 'app/overmind';
31
import getTemplateDefinition from '@codesandbox/common/lib/templates';
4-
import CrossIcon from 'react-icons/lib/md/clear';
5-
62
import {
3+
Button,
74
Collapsible,
8-
Link,
9-
Stack,
10-
Input,
11-
Select,
125
FormField,
6+
Input,
7+
Link,
138
List,
149
ListAction,
10+
Select,
1511
SidebarRow,
16-
Button,
12+
Stack,
1713
} from '@codesandbox/components';
1814
import css from '@styled-system/css';
15+
import { useOvermind } from 'app/overmind';
16+
import React, { FunctionComponent } from 'react';
17+
import CrossIcon from 'react-icons/lib/md/clear';
1918

2019
import { fonts as listOfFonts } from './google-fonts';
2120

2221
const isGoogleFont = url => url.includes('fonts.googleapis.com/css');
2322

24-
export const ExternalResources: FunctionComponent = () => {
23+
export const ExternalResources: FunctionComponent<{ readonly: boolean }> = ({
24+
readonly,
25+
}) => {
2526
const {
2627
actions: {
2728
workspace: { externalResourceAdded, externalResourceRemoved },
@@ -58,13 +59,15 @@ export const ExternalResources: FunctionComponent = () => {
5859
<Link href={resource} target="_blank">
5960
{getName(resource)}
6061
</Link>
61-
<Button
62-
variant="link"
63-
css={css({ width: 'auto' })}
64-
onClick={() => externalResourceRemoved(resource)}
65-
>
66-
<CrossIcon />
67-
</Button>
62+
{!readonly && (
63+
<Button
64+
variant="link"
65+
css={css({ width: 'auto' })}
66+
onClick={() => externalResourceRemoved(resource)}
67+
>
68+
<CrossIcon />
69+
</Button>
70+
)}
6871
</ListAction>
6972
))}
7073

@@ -80,65 +83,71 @@ export const ExternalResources: FunctionComponent = () => {
8083
<Link href={resource} target="_blank">
8184
{getFontFamily(resource).name}
8285
</Link>
83-
<Button
84-
variant="link"
85-
css={css({ width: 'auto' })}
86-
onClick={() => externalResourceRemoved(resource)}
87-
>
88-
<CrossIcon />
89-
</Button>
86+
{!readonly && (
87+
<Button
88+
variant="link"
89+
css={css({ width: 'auto' })}
90+
onClick={() => externalResourceRemoved(resource)}
91+
>
92+
<CrossIcon />
93+
</Button>
94+
)}
9095
</ListAction>
9196
))}
9297
</List>
9398
) : null}
9499

95-
<form
96-
onSubmit={event => {
97-
event.preventDefault();
98-
const url = event.target[0].value.trim();
99-
externalResourceAdded(url);
100-
}}
101-
>
102-
<FormField label="External URL" direction="vertical">
103-
<Input
104-
type="text"
105-
required
106-
placeholder="https://cdn.com/bootstrap.css"
107-
key={otherResources.length}
108-
/>
109-
</FormField>
110-
<SidebarRow marginX={2}>
111-
<Button type="submit" variant="secondary">
112-
Add resource
113-
</Button>
114-
</SidebarRow>
115-
</form>
116-
117-
<form
118-
onSubmit={event => {
119-
event.preventDefault();
120-
const fontName = event.target[0].value.trim().replace(/ /g, '+');
121-
const url = `https://fonts.googleapis.com/css?family=${fontName}&display=swap`;
122-
externalResourceAdded(url);
123-
}}
124-
>
125-
<FormField label="Google Fonts" direction="vertical">
126-
<Select
127-
required
128-
placeholder="Select a font family"
129-
key={fonts.length}
130-
>
131-
{listOfFonts.sort().map(name => (
132-
<option key={name}>{name}</option>
133-
))}
134-
</Select>
135-
</FormField>
136-
<SidebarRow marginX={2}>
137-
<Button type="submit" variant="secondary">
138-
Add font
139-
</Button>
140-
</SidebarRow>
141-
</form>
100+
{!readonly && (
101+
<form
102+
onSubmit={event => {
103+
event.preventDefault();
104+
const url = event.target[0].value.trim();
105+
externalResourceAdded(url);
106+
}}
107+
>
108+
<FormField label="External URL" direction="vertical">
109+
<Input
110+
type="text"
111+
required
112+
placeholder="https://cdn.com/bootstrap.css"
113+
key={otherResources.length}
114+
/>
115+
</FormField>
116+
<SidebarRow marginX={2}>
117+
<Button type="submit" variant="secondary">
118+
Add resource
119+
</Button>
120+
</SidebarRow>
121+
</form>
122+
)}
123+
124+
{!readonly && (
125+
<form
126+
onSubmit={event => {
127+
event.preventDefault();
128+
const fontName = event.target[0].value.trim().replace(/ /g, '+');
129+
const url = `https://fonts.googleapis.com/css?family=${fontName}&display=swap`;
130+
externalResourceAdded(url);
131+
}}
132+
>
133+
<FormField label="Google Fonts" direction="vertical">
134+
<Select
135+
required
136+
placeholder="Select a font family"
137+
key={fonts.length}
138+
>
139+
{listOfFonts.sort().map(name => (
140+
<option key={name}>{name}</option>
141+
))}
142+
</Select>
143+
</FormField>
144+
<SidebarRow marginX={2}>
145+
<Button type="submit" variant="secondary">
146+
Add font
147+
</Button>
148+
</SidebarRow>
149+
</form>
150+
)}
142151
</Stack>
143152
</Collapsible>
144153
);

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Entry from '../Entry';
88

99
interface IModuleEntryProps {
1010
module: Module;
11+
readonly?: boolean;
1112
setCurrentModule?: (id: string) => void;
1213
store?: any;
1314
signals?: any;
@@ -31,6 +32,7 @@ const ModuleEntry: React.FC<IModuleEntryProps> = React.memo(
3132
setCurrentModule,
3233
markTabsNotDirty,
3334
depth,
35+
readonly,
3436
renameModule,
3537
deleteEntry,
3638
discardModuleChanges,
@@ -55,6 +57,7 @@ const ModuleEntry: React.FC<IModuleEntryProps> = React.memo(
5557
// @ts-ignore
5658
<Entry
5759
id={module.id}
60+
readonly={readonly}
5861
shortid={module.shortid}
5962
title={module.title}
6063
rightColors={liveUsers.map(([a, b, c]) => `rgb(${a}, ${b}, ${c})`)}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import DirectoryEntry from '..';
99

1010
interface IDirectoryChildrenProps {
1111
depth?: number;
12+
readonly?: boolean;
1213
renameModule?: (title: string, moduleShortid: string) => void;
1314
setCurrentModule?: (id: string) => void;
1415
parentShortid?: string;
@@ -26,6 +27,7 @@ interface IDirectoryChildrenProps {
2627

2728
const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
2829
depth = 0,
30+
readonly,
2931
renameModule,
3032
setCurrentModule,
3133
parentShortid,
@@ -62,6 +64,7 @@ const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
6264
.map(dir => (
6365
<DirectoryEntry
6466
key={dir.id}
67+
readonly={readonly}
6568
siblings={[...directories, ...modules]}
6669
depth={depth + 1}
6770
signals={{ files, editor }}
@@ -85,6 +88,7 @@ const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
8588
).map(m => (
8689
<ModuleEntry
8790
key={m.id}
91+
readonly={readonly}
8892
module={m}
8993
depth={depth}
9094
setCurrentModule={setCurrentModule}

0 commit comments

Comments
 (0)