Skip to content

Commit

Permalink
Add Git Integrations
Browse files Browse the repository at this point in the history
closes #3333
  • Loading branch information
AlexTugarev committed Mar 26, 2021
1 parent e4974b4 commit 4011270
Show file tree
Hide file tree
Showing 14 changed files with 585 additions and 154 deletions.
8 changes: 4 additions & 4 deletions components/dashboard/src/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* See License-AGPL.txt in the project root for license information.
*/

import * as images from './images';
import { gitpod, gitpodIcon, terminal } from './images';
import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
import { useContext, useEffect, useState } from "react";
import { UserContext } from "./user-context";
Expand Down Expand Up @@ -52,7 +52,7 @@ export function Login() {
<div id="feature-section-column" className="flex max-w-2xl h-full ml-auto pt-6">
<div className="flex flex-col space-y-12 pl-6 pr-24 m-auto">
<div>
<img src={images.gitpod} className="h-8" />
<img src={gitpod} className="h-8" />
</div>
<div>
<h1 className="xl:text-7xl text-5xl">Save Time<br /> with Prebuilds</h1>
Expand All @@ -61,7 +61,7 @@ export function Login() {
Gitpod continuously builds your git branches like a CI server. This means no more waiting for dependencies to be downloaded and builds to finish. <a className="underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/prebuilds/" target="gitpod-docs">Learn more about Prebuilds</a>
</div>
<div>
<img src={images.terminal} className="h-64 -ml-8" />
<img src={terminal} className="h-64 -ml-8" />
</div>
</div>
</div>
Expand All @@ -71,7 +71,7 @@ export function Login() {
<div className="flex-grow h-100 flex flex-row items-center justify-center" >
<div className="rounded-xl px-10 py-10 mx-auto">
<div className="mx-auto pb-8">
<img src={images.gitpodIcon} className="h-16 mx-auto" />
<img src={gitpodIcon} className="h-16 mx-auto" />
</div>
<div className="mx-auto text-center pb-8 space-y-2">
<h1 className="text-3xl">Log in to Gitpod</h1>
Expand Down
39 changes: 39 additions & 0 deletions components/dashboard/src/components/CheckBox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* Copyright (c) 2021 Gitpod GmbH. All rights reserved.
* Licensed under the GNU Affero General Public License (AGPL).
* See License-AGPL.txt in the project root for license information.
*/


function CheckBox(props: {
name?: string,
title: string,
desc: string,
checked: boolean,
disabled?: boolean,
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}) {
const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
checked: props.checked,
disabled: props.disabled,
onChange: props.onChange,
};
if (props.name) {
inputProps.name = props.name;
}

const checkboxId = `checkbox-${props.title}-${String(Math.random())}`;

return <div className="flex mt-4">
<input className={"h-4 w-4 focus:ring-0 mt-1 rounded cursor-pointer border-2 " + (props.checked ? 'bg-gray-800' : '')} type="checkbox"
id={checkboxId}
{...inputProps}
/>
<div className="flex flex-col ml-2">
<label htmlFor={checkboxId} className="text-gray-800 text-md font-semibold tracking-wide">{props.title}</label>
<div className="text-gray-400 text-md">{props.desc}</div>
</div>
</div>
}

export default CheckBox;
6 changes: 5 additions & 1 deletion components/dashboard/src/images.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import gitpod from './images/gitpod.svg';
import gitpodIcon from './icons/gitpod.svg';
import theia from './images/theia-gray.svg';
import vscode from './images/vscode.svg';
import copy from './images/copy.svg';
import exclamation from './images/exclamation.svg';

export {
github,
Expand All @@ -21,5 +23,7 @@ export {
gitpod,
gitpodIcon,
theia,
vscode
vscode,
copy,
exclamation,
}
4 changes: 4 additions & 0 deletions components/dashboard/src/images/copy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions components/dashboard/src/images/exclamation.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 39 additions & 5 deletions components/dashboard/src/provider-utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,18 @@
* See License-AGPL.txt in the project root for license information.
*/

import * as images from './images';
import {github, gitlab, bitbucket} from './images';
import { gitpodHostUrl } from "./service/service";


function iconForAuthProvider(type: string) {
switch (type) {
case "GitHub":
return images.github
return github
case "GitLab":
return images.gitlab
return gitlab
case "Bitbucket":
return images.bitbucket
return bitbucket
default:
break;
}
Expand All @@ -32,4 +34,36 @@ function simplifyProviderName(host: string) {
}
}

export { iconForAuthProvider, simplifyProviderName }
async function openAuthorizeWindow({ host, scopes, onSuccess, onError }: { host: string, scopes?: string[], onSuccess?: () => void, onError?: (error?: string) => void }) {
const returnTo = gitpodHostUrl.with({ pathname: 'login-success' }).toString();
const url = gitpodHostUrl.withApi({
pathname: '/authorize',
search: `returnTo=${encodeURIComponent(returnTo)}&host=${host}&override=true&scopes=${(scopes || []).join(',')}`
}).toString();

const newWindow = window.open(url, "gitpod-connect");
if (!newWindow) {
console.log(`Failed to open the authorize window for ${host}`);
onError && onError("failed");
return;
}

const eventListener = (event: MessageEvent) => {
// todo: check event.origin

if (event.data === "auth-success") {
window.removeEventListener("message", eventListener);

if (event.source && "close" in event.source && event.source.close) {
console.log(`Authorization OK. Closing child window.`);
event.source.close();
} else {
// todo: add a button to the /login-success page to close, if this should not work as expected
}
onSuccess && onSuccess();
}
};
window.addEventListener("message", eventListener);
}

export { iconForAuthProvider, simplifyProviderName, openAuthorizeWindow }
Loading

0 comments on commit 4011270

Please sign in to comment.