convert Login.ts

Author: AlexTugarev

components/dashboard/src/Login.tsx

@@ -4,7 +4,6 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import * as GitpodCookie from "@gitpod/gitpod-protocol/lib/util/gitpod-cookie";
 import { useContext, useEffect, useState, useMemo, useCallback, FC } from "react";
 import { UserContext } from "./user-context";
@@ -18,9 +17,10 @@ import { getURLHash } from "./utils";
 import ErrorMessage from "./components/ErrorMessage";
 import { Heading1, Heading2, Subheading } from "./components/typography/headings";
 import { SSOLoginForm } from "./login/SSOLoginForm";
-import { useAuthProviders } from "./data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "./data/auth-providers/auth-provider-query";
 import { SetupPending } from "./login/SetupPending";
 import { useNeedsSetup } from "./dedicated-setup/use-needs-setup";
+import { AuthProviderDescription } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 export function markLoggedIn() {
     document.cookie = GitpodCookie.generateCookie(window.location.hostname);
@@ -38,7 +38,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
 
     const urlHash = useMemo(() => getURLHash(), []);
 
-    const authProviders = useAuthProviders();
+    const authProviderDescriptions = useAuthProviderDescriptions();
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
     const [hostFromContext, setHostFromContext] = useState<string | undefined>();
     const [repoPathname, setRepoPathname] = useState<string | undefined>();
@@ -58,9 +58,9 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
         }
     }, [urlHash]);
 
-    let providerFromContext: AuthProviderInfo | undefined;
-    if (hostFromContext && authProviders.data) {
-        providerFromContext = authProviders.data.find((provider) => provider.host === hostFromContext);
+    let providerFromContext: AuthProviderDescription | undefined;
+    if (hostFromContext && authProviderDescriptions.data) {
+        providerFromContext = authProviderDescriptions.data.find((provider) => provider.host === hostFromContext);
     }
 
     const updateUser = useCallback(async () => {
@@ -158,19 +158,19 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                             className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                             onClick={() => openLogin(providerFromContext!.host)}
                                         >
-                                            {iconForAuthProvider(providerFromContext.authProviderType)}
+                                            {iconForAuthProvider(providerFromContext.type)}
                                             <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                                 Continue with {simplifyProviderName(providerFromContext.host)}
                                             </span>
                                         </button>
                                     ) : (
-                                        authProviders.data?.map((ap) => (
+                                        authProviderDescriptions.data?.map((ap) => (
                                             <button
                                                 key={"button" + ap.host}
                                                 className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                                 onClick={() => openLogin(ap.host)}
                                             >
-                                                {iconForAuthProvider(ap.authProviderType)}
+                                                {iconForAuthProvider(ap.type)}
                                                 <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                                     Continue with {simplifyProviderName(ap.host)}
                                                 </span>
@@ -179,7 +179,10 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                     )}
                                     <SSOLoginForm
                                         onSuccess={authorizeSuccessful}
-                                        singleOrgMode={!!authProviders.data && authProviders.data.length === 0}
+                                        singleOrgMode={
+                                            !!authProviderDescriptions.data &&
+                                            authProviderDescriptions.data.length === 0
+                                        }
                                     />
                                 </div>
                                 {errorMessage && <ErrorMessage imgSrc={exclamation} message={errorMessage} />}

components/dashboard/src/data/auth-providers/auth-provider-query.ts

@@ -7,6 +7,12 @@
 import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useQuery } from "@tanstack/react-query";
 import { getGitpodService } from "../../service/service";
+import { authProviderClient } from "../../service/public-api";
+import { useCurrentUser } from "../../user-context";
+import {
+    AuthProviderDescription,
+    ListAuthProviderDescriptionsRequest,
+} from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 export const useAuthProviders = () => {
     return useQuery<AuthProviderInfo[]>({
@@ -16,3 +22,22 @@ export const useAuthProviders = () => {
         },
     });
 };
+
+export const useAuthProviderDescriptions = () => {
+    const user = useCurrentUser();
+    const query = useQuery<AuthProviderDescription[]>({
+        queryKey: ["auth-provider-descriptions"],
+        queryFn: async () => {
+            const params = new ListAuthProviderDescriptionsRequest();
+            if (user) {
+                params.id = {
+                    case: "userId",
+                    value: user.id,
+                };
+            }
+            const response = await authProviderClient.listAuthProviderDescriptions(params);
+            return response.descriptions;
+        },
+    });
+    return query;
+};

components/dashboard/src/provider-utils.tsx

@@ -4,20 +4,25 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 import bitbucket from "./images/bitbucket.svg";
 import github from "./images/github.svg";
 import gitlab from "./images/gitlab.svg";
 import { gitpodHostUrl } from "./service/service";
 
-function iconForAuthProvider(type: string) {
+function iconForAuthProvider(type: string | AuthProviderType) {
     switch (type) {
         case "GitHub":
+        case AuthProviderType.GITHUB:
             return <img className="fill-current dark:filter-invert w-5 h-5 ml-3 mr-3 my-auto" src={github} alt="" />;
         case "GitLab":
+        case AuthProviderType.GITLAB:
             return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={gitlab} alt="" />;
         case "Bitbucket":
+        case AuthProviderType.BITBUCKET:
             return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} alt="" />;
         case "BitbucketServer":
+        case AuthProviderType.BITBUCKET_SERVER:
             return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} alt="" />;
         default:
             return <></>;