Apr 23, 2024 · Apr 22, 2024 · Apr 22, 2024 · Apr 22, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/site/src/api/queries/appearance.ts b/site/src/api/queries/appearance.ts
 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
 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(),
  };
  });
 };
diff --git a/site/src/api/queries/entitlements.ts b/site/src/api/queries/entitlements.ts
 const entitlementsQueryKey = ["entitlements"] as const;

 export const entitlements = (): UseQueryOptions<Entitlements> => {
  return {
 ...cachedQuery(initialEntitlementsData),
  returncachedQuery({
 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
 const experimentsKey = ["experiments"] as const;

 export const experiments = (): UseQueryOptions<Experiments> => {
  return {
 ...cachedQuery(initialExperimentsData),
  returncachedQuery({
 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
 export const me = (): UseQueryOptions<User> & {
  queryKey: QueryKey;
 } => {
  return {
 ...cachedQuery(initialUserData),
  returncachedQuery({
 initialData:initialUserData,
    queryKey: meKey,
    queryFn: API.getAuthenticatedUser,
  };
  });
 };

 export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
 }

 export const hasFirstUser = (): UseQueryOptions<boolean> => {
  return {
  returncachedQuery({
    // This cannot be false otherwise it will not fetch!
 ...cachedQuery(typeofinitialUserData !== "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
 import type { 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
  useEffect,
  useState,
 } from "react";
 import {type UseQueryOptions,useQuery } from "react-query";
 import { useQuery } from "react-query";
 import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
 import { cachedQuery } from "api/queries/util";
 import type { Region, WorkspaceProxy } from "api/typesGenerated";
    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/modules/dashboard/DashboardProvider.tsx b/site/src/modules/dashboard/DashboardProvider.tsx
 } from "react";
 import { useQuery } from "react-query";
 import { appearance } from "api/queries/appearance";
 import { buildInfo } from "api/queries/buildInfo";
 import { entitlements } from "api/queries/entitlements";
 import { experiments } from "api/queries/experiments";
 import type {
  AppearanceConfig,
  BuildInfoResponse,
  Entitlements,
  Experiments,
 } from "api/typesGenerated";
 }

 export interface DashboardValue {
  buildInfo: BuildInfoResponse;
  entitlements: Entitlements;
  experiments: Experiments;
  appearance: Appearance;
 );

 export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
  const buildInfoQuery = useQuery(buildInfo());
  const entitlementsQuery = useQuery(entitlements());
  const experimentsQuery = useQuery(experiments());
  const appearanceQuery = useQuery(appearance());

  const isLoading =
    !buildInfoQuery.data ||
    !entitlementsQuery.data ||
    !appearanceQuery.data ||
    !experimentsQuery.data;
    !entitlementsQuery.data || !appearanceQuery.data || !experimentsQuery.data;

  const [configPreview, setConfigPreview] = useState<AppearanceConfig>();

  return (
    <DashboardContext.Provider
      value={{
        buildInfo: buildInfoQuery.data,
        entitlements: entitlementsQuery.data,
        experiments: experimentsQuery.data,
        appearance: {
diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { buildInfo } from "api/queries/buildInfo";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useProxy } from "contexts/ProxyContext";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "../useFeatureVisibility";
 import { NavbarView } from "./NavbarView";

 export const Navbar: FC = () => {
  const { appearance, buildInfo } = useDashboard();
  const { appearance } = useDashboard();
  const buildInfoQuery = useQuery(buildInfo());
  const { user: me, permissions, signOut } = useAuthenticated();
  const featureVisibility = useFeatureVisibility();
  const canViewAuditLog =
    <NavbarView
      user={me}
      logo_url={appearance.config.logo_url}
      buildInfo={buildInfo}
      buildInfo={buildInfoQuery.data}
      supportLinks={appearance.config.support_links}
      onSignOut={signOut}
      canViewAuditLog={canViewAuditLog}
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Badge from "@mui/material/Badge";
 import type { FC, ReactNode } from "react";
 import type { FC } from "react";
 import type * as TypesGen from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import {
  buildInfo?: TypesGen.BuildInfoResponse;
  supportLinks?: readonly TypesGen.LinkConfig[];
  onSignOut: () => void;
  children?: ReactNode;
 }

 export const UserDropdown: FC<UserDropdownProps> = ({
diff --git a/site/src/modules/resources/AgentVersion.tsx b/site/src/modules/resources/AgentVersion.tsx
  );

  if (status === agentVersionStatus.Updated) {
    return<span>Updated</span>;
    returnnull;
  }

  return (
diff --git a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import { DashboardContext } from "modules/dashboard/DashboardProvider";
 import {
  MockAppearanceConfig,
  MockBuildInfo,
  MockCanceledWorkspace,
  MockCancelingWorkspace,
  MockDeletedWorkspace,
  MockDeletingWorkspace,
  MockEntitlementsWithScheduling,
  MockExperiments,
  MockFailedWorkspace,
  MockPendingWorkspace,
  MockStartingWorkspace,
  MockStoppedWorkspace,
  MockStoppingWorkspace,
  MockWorkspace,
  MockBuildInfo,
  MockEntitlementsWithScheduling,
  MockExperiments,
  MockAppearanceConfig,
 } from "testHelpers/entities";
 import { WorkspaceStatusBadge } from "./WorkspaceStatusBadge";

 const meta: Meta<typeof WorkspaceStatusBadge> = {
  title: "modules/workspaces/WorkspaceStatusBadge",
  component: WorkspaceStatusBadge,
  parameters: {
    queries: [
      {
        key: ["buildInfo"],
        data: MockBuildInfo,
      },
    ],
  },
  decorators: [
    (Story) => (
      <DashboardContext.Provider
        value={{
          buildInfo: MockBuildInfo,
          entitlements: MockEntitlementsWithScheduling,
          experiments: MockExperiments,
          appearance: MockedAppearance,
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
 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";
  const redirectTo = retrieveRedirect(location.search);
  const applicationName = getApplicationName();
  const navigate = useNavigate();
  const buildInfoQuery = useQuery(buildInfo());

  if (isSignedIn) {
    // If the redirect is going to a workspace application, and we
        authMethods={authMethodsQuery.data}
        error={signInError}
        isLoading={isLoading || authMethodsQuery.isLoading}
        buildInfo={buildInfoQuery.data}
        isSigningIn={isSigningIn}
        onSignIn={async ({ email, password }) => {
          await signIn(email, password);
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
 import type { Interpolation, Theme } from "@emotion/react";
 import type { FC } from "react";
 import { useLocation } from "react-router-dom";
 import type { AuthMethods } from "api/typesGenerated";
 import type { AuthMethods, BuildInfoResponse } from "api/typesGenerated";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import { Loader } from "components/Loader/Loader";
 import { getApplicationName, getLogoURL } from "utils/appearance";
  authMethods: AuthMethods | undefined;
  error: unknown;
  isLoading: boolean;
  buildInfo?: BuildInfoResponse;
  isSigningIn: boolean;
  onSignIn: (credentials: { email: string; password: string }) => void;
 }
  authMethods,
  error,
  isLoading,
  buildInfo,
  isSigningIn,
  onSignIn,
 }) => {
          />
        )}
        <footer css={styles.footer}>
          Copyright © {new Date().getFullYear()} Coder Technologies, Inc.
          <div>
            Copyright &copy; {new Date().getFullYear()} Coder Technologies, Inc.
          </div>
          <div>{buildInfo?.version}</div>
        </footer>
      </div>
    </div>
diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
  component: Workspace,
  parameters: {
    queries: [
      {
        key: ["buildInfo"],
        data: Mocks.MockBuildInfo,
      },
      {
        key: ["portForward", Mocks.MockWorkspaceAgent.id],
        data: Mocks.MockListeningPortsResponse,
    (Story) => (
      <DashboardContext.Provider
        value={{
          buildInfo: Mocks.MockBuildInfo,
          entitlements: Mocks.MockEntitlementsWithScheduling,
          experiments: Mocks.MockExperiments,
          appearance: MockedAppearance,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,11 +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(),
		};
		});
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,11 +8,11 @@ const initialEntitlementsData = getMetadataAsJSON<Entitlements>("entitlements");
		const entitlementsQueryKey = ["entitlements"] as const;

		export const entitlements = (): UseQueryOptions<Entitlements> => {
		return {
		...cachedQuery(initialEntitlementsData),
		returncachedQuery({
		initialData:initialEntitlementsData,
		queryKey: entitlementsQueryKey,
		queryFn: () => API.getEntitlements(),
		};
		});
		};

		export const refreshEntitlements = (queryClient: QueryClient) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,11 +8,11 @@ const initialExperimentsData = getMetadataAsJSON<Experiments>("experiments");
		const experimentsKey = ["experiments"] as const;

		export const experiments = (): UseQueryOptions<Experiments> => {
		return {
		...cachedQuery(initialExperimentsData),
		returncachedQuery({
		initialData:initialExperimentsData,
		queryKey: experimentsKey,
		queryFn: () => API.getExperiments(),
		} satisfies UseQueryOptions<Experiments>;
		});
		};

		export const availableExperiments = () => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -129,11 +129,11 @@ const meKey = ["me"];
		export const me = (): UseQueryOptions<User> & {
		queryKey: QueryKey;
		} => {
		return {
		...cachedQuery(initialUserData),
		returncachedQuery({
		initialData:initialUserData,
		queryKey: meKey,
		queryFn: API.getAuthenticatedUser,
		};
		});
		};

		export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
Expand All		@@ -144,12 +144,12 @@ export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
		}

		export const hasFirstUser = (): UseQueryOptions<boolean> => {
		return {
		returncachedQuery({
		// This cannot be false otherwise it will not fetch!
		...cachedQuery(typeofinitialUserData !== "undefined" ? true : undefined),
		initialData: Boolean(initialUserData) \|\|undefined,
		queryKey: ["hasFirstUser"],
		queryFn: API.hasFirstUser,
		};
		});
		};

		export const login = (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,23 +1,27 @@
		import type { 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,
		});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,7 +7,7 @@ import {
		useEffect,
		useState,
		} from "react";
		import {type UseQueryOptions,useQuery } from "react-query";
		import { useQuery } from "react-query";
		import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
		import { cachedQuery } from "api/queries/util";
		import type { Region, WorkspaceProxy } from "api/typesGenerated";
Expand DownExpand Up		@@ -131,11 +131,13 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
		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.
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,12 +7,10 @@ import {
		} from "react";
		import { useQuery } from "react-query";
		import { appearance } from "api/queries/appearance";
		import { buildInfo } from "api/queries/buildInfo";
		import { entitlements } from "api/queries/entitlements";
		import { experiments } from "api/queries/experiments";
		import type {
		AppearanceConfig,
		BuildInfoResponse,
		Entitlements,
		Experiments,
		} from "api/typesGenerated";
Expand All		@@ -27,7 +25,6 @@ interface Appearance {
		}

		export interface DashboardValue {
		buildInfo: BuildInfoResponse;
		entitlements: Entitlements;
		experiments: Experiments;
		appearance: Appearance;
Expand All		@@ -38,16 +35,12 @@ export const DashboardContext = createContext<DashboardValue \| undefined>(
		);

		export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
		const buildInfoQuery = useQuery(buildInfo());
		const entitlementsQuery = useQuery(entitlements());
		const experimentsQuery = useQuery(experiments());
		const appearanceQuery = useQuery(appearance());

		const isLoading =
		!buildInfoQuery.data \|\|
		!entitlementsQuery.data \|\|
		!appearanceQuery.data \|\|
		!experimentsQuery.data;
		!entitlementsQuery.data \|\| !appearanceQuery.data \|\| !experimentsQuery.data;

		const [configPreview, setConfigPreview] = useState<AppearanceConfig>();

Expand DownExpand Up		@@ -84,7 +77,6 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
		return (
		<DashboardContext.Provider
		value={{
		buildInfo: buildInfoQuery.data,
		entitlements: entitlementsQuery.data,
		experiments: experimentsQuery.data,
		appearance: {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,12 +1,15 @@
		import type { FC } from "react";
		import { useQuery } from "react-query";
		import { buildInfo } from "api/queries/buildInfo";
		import { useAuthenticated } from "contexts/auth/RequireAuth";
		import { useProxy } from "contexts/ProxyContext";
		import { useDashboard } from "modules/dashboard/useDashboard";
		import { useFeatureVisibility } from "../useFeatureVisibility";
		import { NavbarView } from "./NavbarView";

		export const Navbar: FC = () => {
		const { appearance, buildInfo } = useDashboard();
		const { appearance } = useDashboard();
		const buildInfoQuery = useQuery(buildInfo());
		const { user: me, permissions, signOut } = useAuthenticated();
		const featureVisibility = useFeatureVisibility();
		const canViewAuditLog =
Expand All		@@ -19,7 +22,7 @@ export const Navbar: FC = () => {
		<NavbarView
		user={me}
		logo_url={appearance.config.logo_url}
		buildInfo={buildInfo}
		buildInfo={buildInfoQuery.data}
		supportLinks={appearance.config.support_links}
		onSignOut={signOut}
		canViewAuditLog={canViewAuditLog}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
		import Badge from "@mui/material/Badge";
		import type { FC, ReactNode } from "react";
		import type { FC } from "react";
		import type * as TypesGen from "api/typesGenerated";
		import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
		import {
Expand All		@@ -17,7 +17,6 @@ export interface UserDropdownProps {
		buildInfo?: TypesGen.BuildInfoResponse;
		supportLinks?: readonly TypesGen.LinkConfig[];
		onSignOut: () => void;
		children?: ReactNode;
		}

		export const UserDropdown: FC<UserDropdownProps> = ({
Expand Down