Merge branch 'main' into version-on-login

coder · aslilac · Apr 23, 2024 · Apr 22, 2024 · Apr 22, 2024 · Apr 22, 2024
commit f4f9358996029e63d2c93456ea71a8ddd3a31b52
diff --git a/site/src/api/queries/appearance.ts b/site/src/api/queries/appearance.ts
@@ -8,13 +8,12 @@ const initialAppearanceData = getMetadataAsJSON<AppearanceConfig>("appearance");
 const appearanceConfigKey = ["appearance"] as const;
 
 export const appearance = (): UseQueryOptions<AppearanceConfig> => {
-  return {
-    // We either have our initial data or should immediately
-    // fetch and never again!
-    ...cachedQuery(initialAppearanceData),
+  // We either have our initial data or should immediately fetch and never again!
+  return cachedQuery({
+    initialData: initialAppearanceData,
     queryKey: ["appearance"],
     queryFn: () => API.getAppearance(),
-  };
+  });
 };
 
 export const updateAppearance = (queryClient: QueryClient) => {

diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts
@@ -8,17 +8,10 @@ const initialBuildInfoData = getMetadataAsJSON<BuildInfoResponse>("build-info");
 const buildInfoKey = ["buildInfo"] as const;
 
 export const buildInfo = (): UseQueryOptions<BuildInfoResponse> => {
-  return {
-    // We either have our initial data or should immediately
-    // fetch and never again!
-    ...cachedQuery(initialBuildInfoData),
+  // The version of the app can't change without reloading the page.
+  return cachedQuery({
+    initialData: initialBuildInfoData,
     queryKey: buildInfoKey,
     queryFn: () => API.getBuildInfo(),
-    // The version of the app can't change without reloading the page.
-    cacheTime: Infinity,
-    staleTime: Infinity,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-  };
+  });
 };
diff --git a/site/src/api/queries/entitlements.ts b/site/src/api/queries/entitlements.ts
@@ -8,11 +8,11 @@ const initialEntitlementsData = getMetadataAsJSON<Entitlements>("entitlements");
 const entitlementsQueryKey = ["entitlements"] as const;
 
 export const entitlements = (): UseQueryOptions<Entitlements> => {
-  return {
-    ...cachedQuery(initialEntitlementsData),
+  return cachedQuery({
+    initialData: initialEntitlementsData,
     queryKey: entitlementsQueryKey,
     queryFn: () => API.getEntitlements(),
-  };
+  });
 };
 
 export const refreshEntitlements = (queryClient: QueryClient) => {

diff --git a/site/src/api/queries/experiments.ts b/site/src/api/queries/experiments.ts
@@ -8,11 +8,11 @@ const initialExperimentsData = getMetadataAsJSON<Experiments>("experiments");
 const experimentsKey = ["experiments"] as const;
 
 export const experiments = (): UseQueryOptions<Experiments> => {
-  return {
-    ...cachedQuery(initialExperimentsData),
+  return cachedQuery({
+    initialData: initialExperimentsData,
     queryKey: experimentsKey,
     queryFn: () => API.getExperiments(),
-  } satisfies UseQueryOptions<Experiments>;
+  });
 };
 
 export const availableExperiments = () => {

diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -129,11 +129,11 @@ const meKey = ["me"];
 export const me = (): UseQueryOptions<User> & {
   queryKey: QueryKey;
 } => {
-  return {
-    ...cachedQuery(initialUserData),
+  return cachedQuery({
+    initialData: initialUserData,
     queryKey: meKey,
     queryFn: API.getAuthenticatedUser,
-  };
+  });
 };
 
 export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
@@ -144,12 +144,12 @@ export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
 }
 
 export const hasFirstUser = (): UseQueryOptions<boolean> => {
-  return {
+  return cachedQuery({
     // This cannot be false otherwise it will not fetch!
-    ...cachedQuery(typeof initialUserData !== "undefined" ? true : undefined),
+    initialData: Boolean(initialUserData) || undefined,
     queryKey: ["hasFirstUser"],
     queryFn: API.hasFirstUser,
-  };
+  });
 };
 
 export const login = (

diff --git a/site/src/api/queries/util.ts b/site/src/api/queries/util.ts
@@ -1,23 +1,27 @@
-import type { UseQueryOptions } from "react-query";
+import { UseQueryOptions } from "react-query";
 
-// cachedQuery allows the caller to only make a request
-// a single time, and use `initialData` if it is provided.
-//
-// This is particularly helpful for passing values injected
-// via metadata. We do this for the initial user fetch, buildinfo,
-// and a few others to reduce page load time.
-export const cachedQuery = <T>(initialData?: T): Partial<UseQueryOptions<T>> =>
-  // Only do this if there is initial data,
-  // otherwise it can conflict with tests.
-  initialData
-    ? {
-        cacheTime: Infinity,
-        staleTime: Infinity,
-        refetchOnMount: false,
-        refetchOnReconnect: false,
-        refetchOnWindowFocus: false,
-        initialData,
-      }
-    : {
-        initialData,
-      };
+/**
+ * cachedQuery allows the caller to only make a request a single time, and use
+ * `initialData` if it is provided. This is particularly helpful for passing
+ * values injected via metadata. We do this for the initial user fetch,
+ * buildinfo, and a few others to reduce page load time.
+ */
+export const cachedQuery = <
+  TQueryOptions extends UseQueryOptions<TData>,
+  TData,
+>(
+  options: TQueryOptions,
+): TQueryOptions =>
+  // Only do this if there is initial data, otherwise it can conflict with tests.
+  ({
+    ...(options.initialData
+      ? {
+          cacheTime: Infinity,
+          staleTime: Infinity,
+          refetchOnMount: false,
+          refetchOnReconnect: false,
+          refetchOnWindowFocus: false,
+        }
+      : {}),
+    ...options,
+  });
diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
@@ -7,7 +7,7 @@
  useEffect,
  useState,
 } from "react";
 import { type UseQueryOptions, useQuery } from "react-query";
 import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
 import { cachedQuery } from "api/queries/util";
 import type { Region, WorkspaceProxy } from "api/typesGenerated";
@@ -131,11 +131,13 @@
     error: proxiesError,
     isLoading: proxiesLoading,
     isFetched: proxiesFetched,
-  } = useQuery({
-    ...cachedQuery(initialData),
-    queryKey,
-    queryFn: query,
-  } as UseQueryOptions<readonly Region[]>);
+  } = useQuery(
+    cachedQuery({
+      initialData,
+      queryKey,
+      queryFn: query,
+    }),
+  );
 
   // Every time we get a new proxiesResponse, update the latency check
   // to each workspace proxy.

diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -3,6 +3,7 @@ import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { Navigate, useLocation, useNavigate } from "react-router-dom";
 import { buildInfo } from "api/queries/buildInfo";
+import { authMethods } from "api/queries/users";
 import { useAuthContext } from "contexts/auth/AuthProvider";
 import { getApplicationName } from "utils/appearance";
 import { retrieveRedirect } from "utils/redirect";
@@ -65,7 +66,7 @@ export const LoginPage: FC = () => {
       <LoginPageView
         authMethods={authMethodsQuery.data}
         error={signInError}
-        isLoading={isLoading}
+        isLoading={isLoading || authMethodsQuery.isLoading}
         buildInfo={buildInfoQuery.data}
         isSigningIn={isSigningIn}
         onSignIn={async ({ email, password }) => {

diff --git a/site/src/utils/appearance.ts b/site/src/utils/appearance.ts
@@ -3,8 +3,8 @@ export const getApplicationName = (): string => {
     .querySelector(`meta[name=application-name]`)
     ?.getAttribute("content");
   // Fallback to "Coder" if the application name is not available for some reason.
-  // We need to check if the content does not look like {{ .ApplicationName}}
-  // as it means that Coder is running in development mode (port :8080).
+  // We need to check if the content does not look like `{{ .ApplicationName }}`
+  // as it means that Coder is running in development mode.
   return c && !c.startsWith("{{ .") ? c : "Coder";
 };