[dashboard] handle context resolution errors9 (#17159)

Author: svenefftinge

components/dashboard/src/Login.tsx

@@ -24,6 +24,7 @@ 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";
 
 function Item(props: { icon: string; iconSize?: string; text: string }) {
     const iconSize = props.iconSize || 28;
@@ -55,9 +56,8 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
 
     const urlHash = useMemo(() => getURLHash(), []);
 
-    const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
+    const authProviders = useAuthProviders();
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
-    const [providerFromContext, setProviderFromContext] = useState<AuthProviderInfo>();
     const [hostFromContext, setHostFromContext] = useState<string | undefined>();
     const [repoPathname, setRepoPathname] = useState<string | undefined>();
 
@@ -73,18 +73,10 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
         }
     }, [urlHash]);
 
-    useEffect(() => {
-        (async () => {
-            setAuthProviders(await getGitpodService().server.getAuthProviders());
-        })();
-    }, []);
-
-    useEffect(() => {
-        if (hostFromContext && authProviders) {
-            const providerFromContext = authProviders.find((provider) => provider.host === hostFromContext);
-            setProviderFromContext(providerFromContext);
-        }
-    }, [hostFromContext, authProviders]);
+    let providerFromContext: AuthProviderInfo | undefined;
+    if (hostFromContext && authProviders.data) {
+        providerFromContext = authProviders.data.find((provider) => provider.host === hostFromContext);
+    }
 
     const showWelcome = !hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore() && !urlHash.startsWith("https://");
 
@@ -214,15 +206,15 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                     <button
                                         key={"button" + providerFromContext.host}
                                         className="btn-login flex-none w-56 h-10 p-0 inline-flex"
-                                        onClick={() => openLogin(providerFromContext.host)}
+                                        onClick={() => openLogin(providerFromContext!.host)}
                                     >
                                         {iconForAuthProvider(providerFromContext.authProviderType)}
                                         <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.map((ap) => (
+                                    authProviders.data?.map((ap) => (
                                         <button
                                             key={"button" + ap.host}
                                             className="btn-login flex-none w-56 h-10 p-0 inline-flex"

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023 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.
+ */
+
+import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
+import { useQuery } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+
+export const useAuthProviders = () => {
+    return useQuery<AuthProviderInfo[]>({
+        queryKey: ["auth-providers"],
+        queryFn: async () => {
+            return await getGitpodService().server.getAuthProviders();
+        },
+    });
+};

components/dashboard/src/data/workspaces/resolve-context-query.ts

@@ -9,11 +9,17 @@ import { useQuery } from "@tanstack/react-query";
 import { getGitpodService } from "../../service/service";
 
 export function useWorkspaceContext(contextUrl?: string) {
-    const query = useQuery<WorkspaceContext | null, Error>(["workspace-context", contextUrl], () => {
-        if (!contextUrl) {
-            return null;
-        }
-        return getGitpodService().server.resolveContext(contextUrl);
-    });
+    const query = useQuery<WorkspaceContext | null, Error>(
+        ["workspace-context", contextUrl],
+        () => {
+            if (!contextUrl) {
+                return null;
+            }
+            return getGitpodService().server.resolveContext(contextUrl);
+        },
+        {
+            retry: false,
+        },
+    );
     return query;
 }

components/dashboard/src/projects/NewProject.tsx

@@ -23,6 +23,7 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import { projectsPathNew } from "./projects.routes";
 import { Heading1, Subheading } from "../components/typography/headings";
+import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
 
 export default function NewProject() {
     const currentTeam = useCurrentOrg()?.data;
@@ -39,24 +40,25 @@ export default function NewProject() {
 
     const [project, setProject] = useState<Project | undefined>();
 
-    const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
+    const authProviders = useAuthProviders();
     const [isGitHubAppEnabled, setIsGitHubAppEnabled] = useState<boolean>();
     const [isGitHubWebhooksUnauthorized, setIsGitHubWebhooksUnauthorized] = useState<boolean>();
 
     useEffect(() => {
         const { server } = getGitpodService();
-        Promise.all([
-            server.getAuthProviders().then((v) => () => setAuthProviders(v)),
-            server.isGitHubAppEnabled().then((v) => () => setIsGitHubAppEnabled(v)),
-        ]).then((setters) => setters.forEach((s) => s()));
+        Promise.all([server.isGitHubAppEnabled().then((v) => () => setIsGitHubAppEnabled(v))]).then((setters) =>
+            setters.forEach((s) => s()),
+        );
     }, []);
 
     useEffect(() => {
-        if (user && authProviders && selectedProviderHost === undefined) {
+        if (user && authProviders.data && selectedProviderHost === undefined) {
             for (let i = user.identities.length - 1; i >= 0; i--) {
                 const candidate = user.identities[i];
                 if (candidate) {
-                    const authProvider = authProviders.find((ap) => ap.authProviderId === candidate.authProviderId);
+                    const authProvider = authProviders.data.find(
+                        (ap) => ap.authProviderId === candidate.authProviderId,
+                    );
                     const host = authProvider?.host;
                     if (host) {
                         setSelectedProviderHost(host);
@@ -72,7 +74,7 @@ export default function NewProject() {
         if (!authProviders || !selectedProviderHost || isGitHubAppEnabled) {
             return;
         }
-        const ap = authProviders.find((ap) => ap.host === selectedProviderHost);
+        const ap = authProviders.data?.find((ap) => ap.host === selectedProviderHost);
         if (!ap || ap.authProviderType !== "GitHub") {
             return;
         }
@@ -164,7 +166,7 @@ export default function NewProject() {
     };
 
     const authorize = () => {
-        const ap = authProviders.find((ap) => ap.host === selectedProviderHost);
+        const ap = authProviders.data?.find((ap) => ap.host === selectedProviderHost);
         if (!ap) {
             return;
         }
@@ -487,7 +489,7 @@ export default function NewProject() {
         }
 
         if (showGitProviders) {
-            return <GitProviders onHostSelected={onGitProviderSeleted} authProviders={authProviders} />;
+            return <GitProviders onHostSelected={onGitProviderSeleted} authProviders={authProviders.data || []} />;
         }
 
         return renderRepos();

components/dashboard/src/start/CreateWorkspace.tsx

@@ -30,6 +30,7 @@ import { UsageLimitReachedModal } from "../components/UsageLimitReachedModal";
 import { StartWorkspaceOptions } from "./start-workspace-options";
 import { useLocation } from "react-router";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
+import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
 
 export interface CreateWorkspaceProps {
     contextUrl: string;
@@ -382,6 +383,7 @@ export function LimitReachedOutOfHours() {
 
 export function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
     const [statusMessage, setStatusMessage] = useState<React.ReactNode>();
+    const authProviders = useAuthProviders();
     const { host, owner, repoName, userIsOwner, userScopes, lastUpdate } = p.error.data;
     const repoFullName = owner && repoName ? `${owner}/${repoName}` : "";
 
@@ -394,7 +396,7 @@ export function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
             console.log("userScopes", userScopes);
             console.log("lastUpdate", lastUpdate);
 
-            const authProvider = (await getGitpodService().server.getAuthProviders()).find((p) => p.host === host);
+            const authProvider = authProviders.data?.find((p) => p.host === host);
             if (!authProvider) {
                 return;
             }

components/dashboard/src/user-settings/Integrations.tsx

@@ -29,6 +29,7 @@ import { AuthEntryItem } from "./AuthEntryItem";
 import { IntegrationEntryItem } from "./IntegrationItemEntry";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { SelectAccountModal } from "./SelectAccountModal";
+import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
 
 export default function Integrations() {
     return (
@@ -45,7 +46,7 @@ export default function Integrations() {
 function GitProviders() {
     const { user, setUser } = useContext(UserContext);
 
-    const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
+    const authProviders = useAuthProviders();
     const [allScopes, setAllScopes] = useState<Map<string, string[]>>(new Map());
     const [disconnectModal, setDisconnectModal] = useState<{ provider: AuthProviderInfo } | undefined>(undefined);
     const [editModal, setEditModal] = useState<
@@ -54,20 +55,11 @@ function GitProviders() {
     const [selectAccountModal, setSelectAccountModal] = useState<SelectAccountPayload | undefined>(undefined);
     const [errorMessage, setErrorMessage] = useState<string | undefined>();
 
-    useEffect(() => {
-        updateAuthProviders();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const updateAuthProviders = useCallback(async () => {
-        setAuthProviders(await getGitpodService().server.getAuthProviders());
-    }, []);
-
     const updateCurrentScopes = useCallback(async () => {
         if (user) {
             const scopesByProvider = new Map<string, string[]>();
             const connectedProviders = user.identities.map((i) =>
-                authProviders.find((ap) => ap.authProviderId === i.authProviderId),
+                authProviders.data?.find((ap) => ap.authProviderId === i.authProviderId),
             );
             for (let provider of connectedProviders) {
                 if (!provider) {
@@ -106,7 +98,7 @@ function GitProviders() {
                     separator: true,
                 });
             }
-            const connectedWithSecondProvider = authProviders.some(
+            const connectedWithSecondProvider = authProviders.data?.some(
                 (p) => p.authProviderId !== provider.authProviderId && isConnected(p.authProviderId),
             );
             if (connectedWithSecondProvider) {
@@ -340,8 +332,8 @@ function GitProviders() {
                 </a>
             </Subheading>
             <ItemsList className="pt-6">
-                {authProviders &&
-                    authProviders.map((ap) => (
+                {authProviders.data &&
+                    authProviders.data.map((ap) => (
                         <AuthEntryItem
                             key={ap.authProviderId}
                             isConnected={isConnected}