Skip to content

Commit

Permalink
Make editor a little nicer when GitHub isn't linked yet (#6390)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siggisim
siggisim authored Apr 17, 2024
1 parent 2866266 commit ffe1e98
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 32 deletions.
1 change: 1 addition & 0 deletions enterprise/app/code/BUILD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ ts_library(
"//app/components/modal",
"//app/components/spinner",
"//app/errors:error_service",
"//app/icons:github",
"//app/picker:picker_service",
"//app/router",
"//app/service:rpc_service",
Expand Down
34 changes: 24 additions & 10 deletions enterprise/app/code/code.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,23 +108,37 @@
cursor: pointer;
}

.code-sidebar-actions {
.code-editor-link-github {
padding: 16px;
border-top: 2px solid #fafafa;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 200px);
height: calc(100% - 60px);
}

.code-sidebar-actions button {
border: none;
background-color: transparent;
width: 100%;
text-align: left;
cursor: pointer;
.code-editor-link-github button {
display: flex;
align-items: center;
margin-right: 8px;
justify-content: center;
padding: 16px 32px;
font-weight: 600;
border: 0;
border-radius: 100px;
margin-bottom: 12px;
font-size: 18px;
cursor: pointer;
border: 3px solid rgba(255, 255, 255, 0.9);
background-color: #000;
color: #fff;
min-width: 360px;
transition: 300ms ease-in-out;
background-color: #fff;
color: #212121;
border: 3px solid #212121;
}

.code-sidebar-actions button svg {
.code-editor-link-github button svg {
width: 16px;
margin-right: 8px;
}
Expand Down
49 changes: 27 additions & 22 deletions enterprise/app/code/code.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import * as diff from "diff";
import { runner } from "../../../proto/runner_ts_proto";
import CodeBuildButton from "./code_build_button";
import CodeEmptyStateComponent from "./code_empty";
import { ArrowLeft, ArrowUpCircle, ChevronRight, Download, Key, Link, PlusCircle, Send, XCircle } from "lucide-react";
import { ArrowLeft, ArrowUpCircle, ChevronRight, Download, Key, Send, XCircle } from "lucide-react";
import Spinner from "../../../app/components/spinner/spinner";
import { OutlinedButton, FilledButton } from "../../../app/components/button/button";
import { createPullRequest, updatePullRequest } from "./code_pull_request";
Expand Down Expand Up @@ -36,6 +36,7 @@ import OrgPicker from "../org_picker/org_picker";
import capabilities from "../../../app/capabilities/capabilities";
import router from "../../../app/router/router";
import picker_service, { PickerModel } from "../../../app/picker/picker_service";
import { GithubIcon } from "../../../app/icons/github";

interface Props {
user: User;
Expand Down Expand Up @@ -767,7 +768,7 @@ export default class CodeComponent extends React.Component<Props, State> {
redirect_url: window.location.href,
...(this.props.user.displayUser.userId && { user_id: this.props.user.displayUser.userId.id }),
});
window.location.href = `/auth/github/link/?${params}`;
window.location.href = `/auth/github/app/link/?${params}`;
}

handleUpdatePR() {
Expand Down Expand Up @@ -1157,29 +1158,33 @@ export default class CodeComponent extends React.Component<Props, State> {
{this.currentRepo()}
</a>
</div>
<ChevronRight />
{this.state.commitSHA != this.getBranch() && (
{this.getBranch() && this.state.commitSHA != this.getBranch() && (
<>
<ChevronRight />
<a
href={`http://github.com/${this.currentOwner()}/${this.currentRepo()}/tree/${
this.state.prBranch || this.getBranch()
}`}>
{this.state.prBranch || this.getBranch()}
</a>
</>
)}
{this.state.commitSHA && (
<>
<ChevronRight />
<a
target="_blank"
title={this.state.commitSHA}
href={`http://github.com/${this.currentOwner()}/${this.currentRepo()}/commit/${
this.state.commitSHA
}`}>
{this.state.commitSHA?.slice(0, 7)}
</a>{" "}
<span onClick={this.handleUpdateCommitSha.bind(this, undefined)}>
<ArrowUpCircle className="code-update-commit" />
</span>{" "}
</>
)}
<a
target="_blank"
title={this.state.commitSHA}
href={`http://github.com/${this.currentOwner()}/${this.currentRepo()}/commit/${
this.state.commitSHA
}`}>
{this.state.commitSHA?.slice(0, 7)}
</a>{" "}
<span onClick={this.handleUpdateCommitSha.bind(this, undefined)}>
<ArrowUpCircle className="code-update-commit" />
</span>{" "}
{this.currentPath() && (
<>
<ChevronRight />
Expand Down Expand Up @@ -1285,13 +1290,6 @@ export default class CodeComponent extends React.Component<Props, State> {
/>
))}
</div>
{!this.props.user.githubLinked && (
<div className="code-sidebar-actions">
<button onClick={this.handleGitHubClicked.bind(this)}>
<Link className="icon" /> Link GitHub
</button>
</div>
)}
</div>
)}
<div className="code-container">
Expand All @@ -1315,6 +1313,13 @@ export default class CodeComponent extends React.Component<Props, State> {
)}
<div className="code-viewer-container">
{!this.currentRepo() && !this.isSingleFile() && <CodeEmptyStateComponent />}
{this.currentRepo() && !this.isSingleFile() && !this.props.user.githubLinked && (
<div className="code-editor-link-github github-button">
<button onClick={this.handleGitHubClicked.bind(this)}>
<GithubIcon /> Continue with GitHub
</button>
</div>
)}
<div className={`code-viewer ${showDiffView ? "hidden-viewer" : ""}`} ref={this.codeViewer} />
<div className={`diff-viewer ${showDiffView ? "" : "hidden-viewer"}`} ref={this.diffViewer} />
</div>
Expand Down

0 comments on commit ffe1e98

Please sign in to comment.