[dashboard] Add Git Providers

Author: AlexTugarev

components/dashboard/src/App.tsx

@@ -14,7 +14,7 @@ const Account = React.lazy(() => import(/* webpackPrefetch: true */ './settings/
 const Notifications = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Notifications'));
 const Plans = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Plans'));
 const EnvironmentVariables = React.lazy(() => import(/* webpackPrefetch: true */ './settings/EnvironmentVariables'));
-const GitIntegrations = React.lazy(() => import(/* webpackPrefetch: true */ './settings/GitIntegrations'));
+const Integrations = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Integrations'));
 const Preferences = React.lazy(() => import(/* webpackPrefetch: true */ './settings/Preferences'));
 
 function Loading() {
@@ -70,10 +70,10 @@ function App() {
                                 <Route path={["/", "/workspaces"]} exact render={
                                     () => <Workspaces />} />
                                 <Route path="/account" exact component={Account} />
+                                <Route path={["/integrations", "/access-control"]} exact component={Integrations} />
                                 <Route path="/notifications" exact component={Notifications} />
                                 <Route path="/plans" exact component={Plans} />
                                 <Route path="/variables" exact component={EnvironmentVariables} />
-                                <Route path="/integrations" exact component={GitIntegrations} />
                                 <Route path="/preferences" exact component={Preferences} />
                             </React.Fragment>
                         )}

components/dashboard/src/Login.tsx

@@ -2,6 +2,7 @@ import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "./user-context";
 import { getGitpodService, gitpodHostUrl, reconnectGitpodService } from "./service/service";
+import { iconForAuthProvider, simplifyProviderName } from "./provider-utils";
 
 export function Login() {
     const { setUser } = useContext(UserContext);
@@ -92,32 +93,6 @@ export function Login() {
     </div>);
 }
 
-function iconForAuthProvider(type: string) {
-    switch (type) {
-        case "GitHub":
-            return "/images/github.svg"
-        case "GitLab":
-            return "/images/gitlab.svg"
-        case "BitBucket":
-            return "/images/bitbucket.svg"
-        default:
-            break;
-    }
-}
-
-function simplifyProviderName(host: string) {
-    switch (host) {
-        case "github.com":
-            return "GitHub"
-        case "gitlab.com":
-            return "GitLab"
-        case "bitbucket.org":
-            return "BitBucket"
-        default:
-            return host;
-    }
-}
-
 function getLoginUrl(host: string) {
     const returnTo = gitpodHostUrl.with({ pathname: 'login-success' }).toString();
     return gitpodHostUrl.withApi({

components/dashboard/src/components/ContextMenu.tsx

@@ -43,6 +43,9 @@ function ContextMenu(props: ContextMenuProps) {
     })
 
     const font = "text-gray-600 hover:text-gray-800"
+
+    const menuId = String(Math.random());
+
     return (
         <div className="relative cursor-pointer">
             <div onClick={(e) => {
@@ -53,15 +56,15 @@ function ContextMenu(props: ContextMenuProps) {
             </div>
             {expanded?
                 <div className={`mt-2 z-50 ${props.width || 'w-48'} bg-white absolute right-0 flex flex-col border border-gray-200 rounded-lg truncated`}>
-                    {enhancedEntries.map(e => {
+                    {enhancedEntries.map((e, index) => {
                         const clickable = e.href || e.onClick;
                         const entry = <div key={e.title} className={`px-4 flex py-3 ${clickable?'hover:bg-gray-200':''} text-sm leading-1 ${e.customFontStyle || font} ${e.separator? ' border-b border-gray-200':''}`} >
                             <div>{e.title}</div><div className="flex-1"></div>{e.active ? <div className="pl-1 font-semibold">&#x2713;</div>: null}
                         </div>
                         if (!clickable) {
                             return entry;
                         }
-                        return <a key={e.title} href={e.href} onClick={e.onClick}>
+                        return <a key={`entry-${menuId}-${index}-${e.title}`} href={e.href} onClick={e.onClick}>
                             {entry}
                         </a>
                     })}

components/dashboard/src/provider-utils.tsx

@@ -0,0 +1,28 @@
+
+function iconForAuthProvider(type: string) {
+    switch (type) {
+        case "GitHub":
+            return "/images/github.svg"
+        case "GitLab":
+            return "/images/gitlab.svg"
+        case "BitBucket":
+            return "/images/bitbucket.svg"
+        default:
+            break;
+    }
+}
+
+function simplifyProviderName(host: string) {
+    switch (host) {
+        case "github.com":
+            return "GitHub"
+        case "gitlab.com":
+            return "GitLab"
+        case "bitbucket.org":
+            return "BitBucket"
+        default:
+            return host;
+    }
+}
+
+export { iconForAuthProvider, simplifyProviderName }

components/dashboard/src/service/service-mock.ts

@@ -41,6 +41,24 @@ const gitpodServiceMock = createServiceMock({
             "isReadonly": false
         }]
     },
+    getOwnAuthProviders: async () => {
+        return [{
+            "id": "foobar123",
+            "ownerId": "1234",
+            "status": "verified",
+            "host": "testing.doptig.com/gitlab",
+            "type": "GitLab",
+            "oauth": {
+              "authorizationUrl": "https://testing.doptig.com/gitlab/oauth/authorize",
+              "tokenUrl": "https://testing.doptig.com/gitlab/oauth/token",
+              "settingsUrl": "https://testing.doptig.com/gitlab/profile/applications",
+              "callBackUrl": "https://gitpod-staging.com/auth/testing.doptig.com/gitlab/callback",
+              "clientId": "clientid-123",
+              "clientSecret": "redacted"
+            },
+            "deleted": false
+          }]
+    },
     onDidOpenConnection: Event.None,
     onDidCloseConnection: Event.None,