Skip to content

Commit cc0a9c0

Browse files
SaraVieiraSaraVieira
authored
Github Sidebar (codesandbox#3402)
* start github * add sign in * remove listAction * add form field * fix icons * add margin
1 parent 444d108 commit cc0a9c0

File tree

10 files changed

+469
-2
lines changed

10 files changed

+469
-2
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ const FILES: INavigationItem = {
3232
id: 'files',
3333
name: 'Explorer',
3434
hasCustomHeader: true,
35-
defaultOpen: true,
3635
};
3736

3837
const GITHUB: INavigationItem = {
3938
id: 'github',
4039
name: 'GitHub',
4140
showAsDisabledIfHidden: true,
41+
defaultOpen: true,
4242
};
4343

4444
const DEPLOYMENT: INavigationItem = {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { ProjectInfo } from './items/ProjectInfo';
2929
import { ProjectInfo as ProjectInfoNew } from './screens/ProjectInfo';
3030
import { Deployment as DeploymentNew } from './screens/Deployment/index';
3131
import { Server as ServerNew } from './screens/Server';
32+
import { GitHub as GitHubNew } from './screens/GitHub';
3233

3334
import { Server } from './items/Server';
3435
import { SSEDownNotice } from './SSEDownNotice';
@@ -39,8 +40,8 @@ const WorkspaceWrapper = REDESIGNED_SIDEBAR ? ThemeProvider : React.Fragment;
3940
const workspaceTabs = {
4041
project: REDESIGNED_SIDEBAR ? ProjectInfoNew : ProjectInfo,
4142
'project-summary': NotOwnedSandboxInfo,
43+
github: REDESIGNED_SIDEBAR ? GitHubNew : GitHub,
4244
files: REDESIGNED_SIDEBAR ? Explorer : FilesItem,
43-
github: GitHub,
4445
deploy: REDESIGNED_SIDEBAR ? DeploymentNew : Deployment,
4546
config: REDESIGNED_SIDEBAR ? ConfigurationFilesNew : ConfigurationFiles,
4647
live: REDESIGNED_SIDEBAR ? LiveNew : Live,

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Changes.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { Text, List, ListItem } from '@codesandbox/components';
3+
import { AddedIcon, DeletedIcon, ChangedIcon } from './Icons';
4+
5+
const getChanges = changes => changes.slice().sort();
6+
7+
export const Changes = ({ added, modified, deleted }) => (
8+
<List paddingBottom={6}>
9+
{getChanges(added).map(change => (
10+
<ListItem gap={2}>
11+
<AddedIcon /> <Text variant="muted">{change}</Text>
12+
</ListItem>
13+
))}
14+
{getChanges(modified).map(change => (
15+
<ListItem gap={2}>
16+
<ChangedIcon /> <Text variant="muted">{change}</Text>
17+
</ListItem>
18+
))}
19+
{getChanges(deleted).map(change => (
20+
<ListItem gap={2}>
21+
<DeletedIcon /> <Text variant="muted">{change}</Text>
22+
</ListItem>
23+
))}
24+
</List>
25+
);

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CommitForm.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React, { ChangeEvent } from 'react';
2+
import { css } from '@styled-system/css';
3+
import {
4+
FormField,
5+
Stack,
6+
Input,
7+
Textarea,
8+
Button,
9+
} from '@codesandbox/components';
10+
import { useOvermind } from 'app/overmind';
11+
12+
export const CommitForm = () => {
13+
const {
14+
actions: {
15+
git: {
16+
createCommitClicked,
17+
createPrClicked,
18+
descriptionChanged,
19+
subjectChanged,
20+
},
21+
},
22+
state: {
23+
editor: { isAllModulesSynced },
24+
git: { description, originalGitChanges: gitChanges, subject },
25+
},
26+
} = useOvermind();
27+
28+
const hasWriteAccess = (rights: string) =>
29+
['admin', 'write'].includes(rights);
30+
31+
const modulesNotSaved = !isAllModulesSynced;
32+
33+
const changeSubject = ({
34+
target: { value },
35+
}: ChangeEvent<HTMLInputElement>) => subjectChanged({ subject: value });
36+
37+
const changeDescription = ({
38+
target: { value },
39+
}: ChangeEvent<HTMLTextAreaElement>) =>
40+
descriptionChanged({ description: value });
41+
42+
return (
43+
<>
44+
<Stack as="form" direction="vertical" gap={1} marginX={2}>
45+
<FormField direction="vertical" label="Commit message">
46+
<Input
47+
css={css({ marginTop: 2 })}
48+
placeholder="Subject"
49+
onChange={changeSubject}
50+
value={subject}
51+
/>
52+
</FormField>
53+
<FormField direction="vertical" label="Commit description" hideLabel>
54+
<Textarea
55+
maxLength={280}
56+
placeholder="Description"
57+
onChange={changeDescription}
58+
value={description}
59+
/>
60+
</FormField>
61+
<Stack gap={2}>
62+
{hasWriteAccess(gitChanges.rights) && (
63+
<Button
64+
variant="secondary"
65+
disabled={!subject || modulesNotSaved}
66+
onClick={() => createCommitClicked()}
67+
>
68+
Commit
69+
</Button>
70+
)}
71+
72+
<Button
73+
variant="secondary"
74+
disabled={!subject || modulesNotSaved}
75+
onClick={() => createPrClicked()}
76+
>
77+
Open PR
78+
</Button>
79+
</Stack>
80+
</Stack>
81+
</>
82+
);
83+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/CreateRepo.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { css } from '@styled-system/css';
2+
import track from '@codesandbox/common/lib/utils/analytics';
3+
import React, { ChangeEvent } from 'react';
4+
import {
5+
Collapsible,
6+
Input,
7+
Element,
8+
Stack,
9+
Button,
10+
Text,
11+
} from '@codesandbox/components';
12+
import { useOvermind } from 'app/overmind';
13+
14+
export const CreateRepo = () => {
15+
const {
16+
actions: {
17+
git: { createRepoClicked, repoTitleChanged },
18+
},
19+
state: {
20+
editor: {
21+
isAllModulesSynced,
22+
currentSandbox: { originalGit },
23+
},
24+
git: { error, repoTitle },
25+
},
26+
} = useOvermind();
27+
28+
const updateRepoTitle = ({
29+
target: { value: title },
30+
}: ChangeEvent<HTMLInputElement>) => repoTitleChanged({ title });
31+
32+
const createRepo = () => {
33+
track('Export to GitHub Clicked');
34+
createRepoClicked();
35+
};
36+
37+
return (
38+
<Collapsible
39+
title={originalGit ? 'Export to GitHub' : 'Github'}
40+
defaultOpen={!originalGit}
41+
>
42+
<Element css={css({ paddingX: 2 })}>
43+
{!isAllModulesSynced && (
44+
<Text marginBottom={2} block variant="danger">
45+
Save your files first before exporting.
46+
</Text>
47+
)}
48+
49+
{error && (
50+
<Text marginBottom={2} block variant="danger">
51+
{error}
52+
</Text>
53+
)}
54+
55+
<Stack as="form" direction="vertical" gap={2}>
56+
<Input
57+
type="text"
58+
onChange={updateRepoTitle}
59+
value={repoTitle}
60+
placeholder="Enter repository name"
61+
/>
62+
<Button
63+
disabled={Boolean(error) || !repoTitle || !isAllModulesSynced}
64+
onClick={createRepo}
65+
variant="secondary"
66+
>
67+
Create Repository
68+
</Button>
69+
</Stack>
70+
</Element>
71+
</Collapsible>
72+
);
73+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/GithubLogin.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useOvermind } from 'app/overmind';
2+
import { css } from '@styled-system/css';
3+
import React from 'react';
4+
import {
5+
Integration,
6+
Text,
7+
Element,
8+
Stack,
9+
Button,
10+
Collapsible,
11+
} from '@codesandbox/components';
12+
import { GitHubIcon } from './Icons';
13+
14+
export const GithubLogin = () => {
15+
const {
16+
actions: { signInGithubClicked },
17+
state: { isLoadingGithub },
18+
} = useOvermind();
19+
20+
return (
21+
<Collapsible title="Github" defaultOpen>
22+
<Element
23+
css={css({
24+
paddingX: 2,
25+
})}
26+
>
27+
<Text variant="muted" marginBottom={4} block>
28+
You can create commits and open pull requests if you add GitHub to
29+
your integrations.
30+
</Text>
31+
<Integration icon={GitHubIcon} title="GitHub">
32+
<Element
33+
marginX={2}
34+
css={css({
35+
display: 'grid',
36+
gridTemplateColumns: '1fr 50px',
37+
gridGap: 4,
38+
})}
39+
>
40+
<Stack direction="vertical">
41+
<Text variant="muted">Enables</Text>
42+
<Text>Commits & PRs</Text>
43+
</Stack>
44+
<Button
45+
disabled={isLoadingGithub}
46+
onClick={() => signInGithubClicked()}
47+
>
48+
Sign In
49+
</Button>
50+
</Element>
51+
</Integration>
52+
</Element>
53+
</Collapsible>
54+
);
55+
};

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/Icons.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
3+
export const GitHubIcon = () => (
4+
<svg
5+
width="16"
6+
height="16"
7+
viewBox="0 0 16 16"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
>
11+
<path
12+
d="M14.9269 4.08427C14.2115 2.82782 13.2411 1.83308 12.0155 1.09983C10.7897 0.366548 9.45149 0 7.99993 0C6.54855 0 5.20991 0.36666 3.98437 1.09983C2.75864 1.83304 1.78831 2.82782 1.07293 4.08427C0.357655 5.34069 0 6.71272 0 8.2003C0 9.98723 0.50859 11.5941 1.52602 13.0213C2.54335 14.4486 3.85758 15.4362 5.46862 15.9843C5.65615 16.02 5.79497 15.9949 5.88523 15.9096C5.97553 15.8243 6.02062 15.7174 6.02062 15.5894C6.02062 15.5681 6.01884 15.3759 6.01537 15.0128C6.01179 14.6497 6.01012 14.333 6.01012 14.0627L5.77052 14.1052C5.61776 14.1338 5.42505 14.146 5.19239 14.1426C4.95984 14.1392 4.71843 14.1142 4.46848 14.0678C4.21841 14.0218 3.98583 13.915 3.77053 13.7477C3.55535 13.5804 3.40259 13.3614 3.31229 13.0911L3.20813 12.8454C3.1387 12.6818 3.02939 12.5001 2.88006 12.3009C2.73073 12.1015 2.57973 11.9664 2.42697 11.8952L2.35403 11.8417C2.30544 11.8061 2.26034 11.7632 2.21864 11.7135C2.17698 11.6637 2.14578 11.6139 2.12495 11.564C2.10408 11.514 2.12137 11.4731 2.17701 11.441C2.23265 11.4088 2.3332 11.3932 2.4791 11.3932L2.68735 11.4251C2.82625 11.4537 2.99805 11.5389 3.20298 11.6814C3.40781 11.8237 3.57618 12.0088 3.70814 12.2364C3.86795 12.5284 4.06047 12.7508 4.28627 12.9039C4.51189 13.057 4.73937 13.1334 4.96849 13.1334C5.19761 13.1334 5.3955 13.1156 5.56223 13.0802C5.72879 13.0446 5.88505 12.991 6.03095 12.9199C6.09344 12.4428 6.26361 12.0762 6.54129 11.82C6.14551 11.7774 5.78968 11.7132 5.47361 11.6278C5.15773 11.5423 4.83131 11.4035 4.49456 11.2111C4.15763 11.019 3.87812 10.7805 3.65597 10.4959C3.43378 10.2111 3.25144 9.83726 3.10918 9.37467C2.96686 8.91189 2.89568 8.37806 2.89568 7.77302C2.89568 6.91153 3.17004 6.17843 3.71865 5.57332C3.46166 4.92564 3.48592 4.19958 3.79151 3.3952C3.9929 3.33106 4.29156 3.37919 4.68734 3.5393C5.0832 3.69948 5.37303 3.83669 5.55713 3.95046C5.74123 4.06419 5.88873 4.16057 5.99986 4.23873C6.64582 4.05372 7.31242 3.96119 7.99985 3.96119C8.68729 3.96119 9.35404 4.05372 10 4.23873L10.3958 3.98259C10.6665 3.81167 10.9862 3.65505 11.354 3.51267C11.722 3.37036 12.0035 3.33117 12.198 3.39531C12.5104 4.19973 12.5382 4.92575 12.2812 5.57343C12.8297 6.17855 13.1042 6.91183 13.1042 7.77313C13.1042 8.37817 13.0328 8.91369 12.8907 9.38002C12.7484 9.84642 12.5645 10.2199 12.3388 10.5012C12.113 10.7825 11.8317 11.0192 11.4949 11.2113C11.1581 11.4035 10.8316 11.5422 10.5157 11.6277C10.1997 11.7132 9.84384 11.7775 9.44806 11.8202C9.80903 12.1404 9.98956 12.6458 9.98956 13.3363V15.5891C9.98956 15.7171 10.033 15.8239 10.1199 15.9093C10.2067 15.9946 10.3437 16.0197 10.5313 15.9839C12.1425 15.4359 13.4568 14.4483 14.474 13.021C15.4912 11.5938 16 9.98693 16 8.2C15.9996 6.7126 15.6418 5.34069 14.9269 4.08427Z"
13+
fill="white"
14+
/>
15+
</svg>
16+
);
17+
18+
export const AddedIcon = () => (
19+
<svg
20+
width="16"
21+
height="16"
22+
viewBox="0 0 16 16"
23+
fill="none"
24+
xmlns="http://www.w3.org/2000/svg"
25+
>
26+
<path
27+
fillRule="evenodd"
28+
clipRule="evenodd"
29+
d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM9 12H7V9H4V7H7V4H9V7H12V9H9V12Z"
30+
fill="#30D158"
31+
/>
32+
</svg>
33+
);
34+
35+
export const DeletedIcon = () => (
36+
<svg
37+
width="16"
38+
height="16"
39+
viewBox="0 0 16 16"
40+
fill="none"
41+
xmlns="http://www.w3.org/2000/svg"
42+
>
43+
<path
44+
fillRule="evenodd"
45+
clipRule="evenodd"
46+
d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM12 7H4V9H12V7Z"
47+
fill="#FF453A"
48+
/>
49+
</svg>
50+
);
51+
52+
export const ChangedIcon = () => (
53+
<svg
54+
width="16"
55+
height="16"
56+
viewBox="0 0 16 16"
57+
fill="none"
58+
xmlns="http://www.w3.org/2000/svg"
59+
>
60+
<path
61+
fillRule="evenodd"
62+
clipRule="evenodd"
63+
d="M2 1H14C14.5523 1 15 1.44772 15 2V14C15 14.5523 14.5523 15 14 15H2C1.44772 15 1 14.5523 1 14V2C1 1.44772 1.44772 1 2 1ZM0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
64+
fill="#F69935"
65+
/>
66+
</svg>
67+
);

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/GitHub/NotLoggedIn.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import css from '@styled-system/css';
3+
4+
import {
5+
Element,
6+
Collapsible,
7+
Stack,
8+
Text,
9+
Button,
10+
} from '@codesandbox/components';
11+
import { useOvermind } from 'app/overmind';
12+
13+
export const NotLoggedIn = () => {
14+
const {
15+
actions: { signInClicked },
16+
} = useOvermind();
17+
18+
return (
19+
<Collapsible title="GitHub" defaultOpen>
20+
<Element css={css({ paddingX: 2 })}>
21+
<Stack direction="vertical" gap={2} marginBottom={6}>
22+
<Text size={2} variant="muted" block>
23+
You need to be signed in to export this sandbox to GitHub and make
24+
commits and pull requests to it.
25+
</Text>
26+
</Stack>
27+
<Button
28+
variant="primary"
29+
onClick={() => signInClicked({ useExtraScopes: false })}
30+
>
31+
Sign in with GitHub
32+
</Button>
33+
</Element>
34+
</Collapsible>
35+
);
36+
};

0 commit comments

Comments
 (0)