Sep 14, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 12, 2023 · Sep 12, 2023
diff --git a/site/src/api/queries/appearance.ts b/site/src/api/queries/appearance.ts
 import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
 import { AppearanceConfig } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";

 export const appearance = () => {
  return {
    queryKey: ["appearance"],
    queryFn: async () =>
      getMetadataAsJSON<AppearanceConfig>("appearance") ?? API.getAppearance(),
  };
 };

 export const updateAppearance = (queryClient: QueryClient) => {
  return {
    mutationFn: API.updateAppearance,
    onSuccess: (newConfig: AppearanceConfig) => {
      queryClient.setQueryData(["appearance"], newConfig);
    },
  };
 };
diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts
 import * as API from "api/api";
 import { BuildInfoResponse } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";

 export const buildInfo = () => {
  return {
    queryKey: ["buildInfo"],
    queryFn: async () =>
      getMetadataAsJSON<BuildInfoResponse>("build-info") ?? API.getBuildInfo(),
  };
 };
diff --git a/site/src/api/queries/entitlements.ts b/site/src/api/queries/entitlements.ts
 import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
 import { Entitlements } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";

 const ENTITLEMENTS_QUERY_KEY = ["entitlements"];

 export const entitlements = () => {
  return {
    queryKey: ENTITLEMENTS_QUERY_KEY,
    queryFn: async () =>
      getMetadataAsJSON<Entitlements>("entitlements") ?? API.getEntitlements(),
  };
 };

 export const refreshEntitlements = (queryClient: QueryClient) => {
  return {
    mutationFn: API.refreshEntitlements,
    onSuccess: async () => {
      await queryClient.invalidateQueries({
        queryKey: ENTITLEMENTS_QUERY_KEY,
      });
    },
  };
 };
diff --git a/site/src/api/queries/experiments.ts b/site/src/api/queries/experiments.ts
 import * as API from "api/api";
 import { Experiments } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";

 export const experiments = () => {
  return {
    queryKey: ["experiments"],
    queryFn: async () =>
      getMetadataAsJSON<Experiments>("experiments") ?? API.getExperiments(),
  };
 };
diff --git a/site/src/components/Dashboard/DashboardProvider.tsx b/site/src/components/Dashboard/DashboardProvider.tsx
 import { useMachine } from "@xstate/react";
 import { useQuery } from "@tanstack/react-query";
 import { buildInfo } from "api/queries/buildInfo";
 import { experiments } from "api/queries/experiments";
 import { entitlements } from "api/queries/entitlements";
 import {
  AppearanceConfig,
  BuildInfoResponse,
  Entitlements,
  Experiments,
 } from "api/typesGenerated";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
 import { createContext, FC, PropsWithChildren, useContext } from "react";
 import { appearanceMachine } from "xServices/appearance/appearanceXService";
 import { buildInfoMachine } from "xServices/buildInfo/buildInfoXService";
 import { entitlementsMachine } from "xServices/entitlements/entitlementsXService";
 import { experimentsMachine } from "xServices/experiments/experimentsMachine";
 import {
  createContext,
  FC,
  PropsWithChildren,
  useContext,
  useState,
 } from "react";
 import { appearance } from "api/queries/appearance";

 interface Appearance {
  config: AppearanceConfig;
 preview: boolean;
 isPreview: boolean;
  setPreview: (config: AppearanceConfig) => void;
  save: (config: AppearanceConfig) => void;
 }

 interface DashboardProviderValue {
 >(undefined);

 export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
  const [buildInfoState] = useMachine(buildInfoMachine);
  const [entitlementsState] = useMachine(entitlementsMachine);
  const [appearanceState, appearanceSend] = useMachine(appearanceMachine);
  const [experimentsState] = useMachine(experimentsMachine);
  const { buildInfo } = buildInfoState.context;
  const { entitlements } = entitlementsState.context;
  const { appearance, preview } = appearanceState.context;
  const { experiments } = experimentsState.context;
  const isLoading = !buildInfo || !entitlements || !appearance || !experiments;

  const setAppearancePreview = (config: AppearanceConfig) => {
    appearanceSend({
      type: "SET_PREVIEW_APPEARANCE",
      appearance: config,
    });
  };

  const saveAppearance = (config: AppearanceConfig) => {
    appearanceSend({
      type: "SAVE_APPEARANCE",
      appearance: config,
    });
  };
  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;
  const [configPreview, setConfigPreview] = useState<AppearanceConfig>();

  if (isLoading) {
    return <FullScreenLoader />;
  return (
    <DashboardProviderContext.Provider
      value={{
        buildInfo,
        entitlements,
        experiments,
        buildInfo: buildInfoQuery.data,
        entitlements: entitlementsQuery.data,
        experiments: experimentsQuery.data,
        appearance: {
          preview,
          config: appearance,
          setPreview: setAppearancePreview,
          save: saveAppearance,
          config: configPreview ?? appearanceQuery.data,
          setPreview: setConfigPreview,
          isPreview: configPreview !== undefined,
        },
      }}
    >
diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBanner.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBanner.tsx
      <ServiceBannerView
        message={message}
        backgroundColor={background_color}
 preview={appearance.preview}
 isPreview={appearance.isPreview}
      />
    );
  } else {
diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.stories.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.stories.tsx
  args: {
    message: "weeeee",
    backgroundColor: "#000000",
 preview: true,
 isPreview: true,
  },
 };
diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
 export interface ServiceBannerViewProps {
  message: string;
  backgroundColor: string;
 preview: boolean;
 isPreview: boolean;
 }

 export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
  message,
  backgroundColor,
 preview,
 isPreview,
 }) => {
  const styles = useStyles();
  // We don't want anything funky like an image or a heading in the service
      className={styles.container}
      style={{ backgroundColor: backgroundColor }}
    >
      {preview && <Pill text="Preview" type="info" lightBorder />}
      {isPreview && <Pill text="Preview" type="info" lightBorder />}
      <div
        className={styles.centerContent}
        style={{
diff --git a/site/src/components/RequireAuth/RequireAuth.tsx b/site/src/components/RequireAuth/RequireAuth.tsx
 import { FullScreenLoader } from "../Loader/FullScreenLoader";
 import { DashboardProvider } from "components/Dashboard/DashboardProvider";
 import { ProxyProvider } from "contexts/ProxyContext";
 import { isApiError } from "api/errors";

 export const RequireAuth: FC = () => {
  const [authState, authSend] = useAuth();
  useEffect(() => {
    const interceptorHandle = axios.interceptors.response.use(
      (okResponse) => okResponse,
      (error) => {
      (error: unknown) => {
        // 401 Unauthorized
        // If we encountered an authentication error, then our token is probably
        // invalid and we should update the auth state to reflect that.
        if (error.response.status === 401) {
        if (isApiError(error) &&error.response.status === 401) {
          authSend("SIGN_OUT");
        }

diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx
  MockBuildInfo,
  MockEntitlementsWithScheduling,
  MockExperiments,
 MockAppearance,
 MockAppearanceConfig,
 } from "testHelpers/entities";
 import { WorkspaceStatusBadge } from "./WorkspaceStatusBadge";
 import { DashboardProviderContext } from "components/Dashboard/DashboardProvider";
 import type { Meta, StoryObj } from "@storybook/react";

 const MockedAppearance = {
  config: MockAppearance,
  preview: false,
  setPreview: () => null,
  save: () => null,
  config: MockAppearanceConfig,
  isPreview: false,
  setPreview: () => {},
 };

 const meta: Meta<typeof WorkspaceStatusBadge> = {
diff --git a/site/src/hooks/useFeatureVisibility.ts b/site/src/hooks/useFeatureVisibility.ts
 import { FeatureName } from "api/typesGenerated";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors";
 import { selectFeatureVisibility } from "utils/entitlements";

 export const useFeatureVisibility = (): Record<FeatureName, boolean> => {
  const { entitlements } = useDashboard();
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateAppearance } from "api/queries/appearance";
 import { getErrorMessage } from "api/errors";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";

 // ServiceBanner is unlike the other Deployment Settings pages because it
 // implements a form, whereas the others are read-only. We make this
 // exception because the Service Banner is visual, and configuring it from
 // the command line would be a significantly worse user experience.
 const AppearanceSettingsPage: FC = () => {
  const { appearance, entitlements } = useDashboard();
  const queryClient = useQueryClient();
  const updateAppearanceMutation = useMutation(updateAppearance(queryClient));
  const isEntitled =
    entitlements.features["appearance"].entitlement !== "not_entitled";

  constupdateAppearance = (
  constonSaveAppearance = async (
    newConfig: Partial<UpdateAppearanceConfig>,
    preview: boolean,
  ) => {
      appearance.setPreview(newAppearance);
      return;
    }
    appearance.save(newAppearance);
    try {
      await updateAppearanceMutation.mutateAsync(newAppearance);
      displaySuccess("Successfully updated appearance settings!");
    } catch (error) {
      displayError(
        getErrorMessage(error, "Failed to update appearance settings."),
      );
    }
  };

  return (
      <AppearanceSettingsPageView
        appearance={appearance.config}
        isEntitled={isEntitled}
 updateAppearance={updateAppearance}
 onSaveAppearance={onSaveAppearance}
      />
    </>
  );
diff --git a/...rc/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx b/...rc/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx
      },
    },
    isEntitled: false,
    updateAppearance: () => {
      return undefined;
    },
  },
 };

 export default meta;
 type Story = StoryObj<typeof AppearanceSettingsPageView>;

 export const Page: Story = {};
 export const Entitled: Story = {
  args: {
    isEntitled: true,
  },
 };

 export const NotEntitled: Story = {};
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
 export type AppearanceSettingsPageViewProps = {
  appearance: UpdateAppearanceConfig;
  isEntitled: boolean;
 updateAppearance: (
 onSaveAppearance: (
    newConfig: Partial<UpdateAppearanceConfig>,
    preview: boolean,
  ) => void;
 };
 export const AppearanceSettingsPageView = ({
  appearance,
  isEntitled,
 updateAppearance,
 onSaveAppearance,
 }: AppearanceSettingsPageViewProps): JSX.Element => {
  const styles = useStyles();
  const theme = useTheme();
    initialValues: {
      logo_url: appearance.logo_url,
    },
    onSubmit: (values) =>updateAppearance(values, false),
    onSubmit: (values) =>onSaveAppearance(values, false),
  });
  const logoFieldHelpers = getFormHelpers(logoForm);

          appearance.service_banner.background_color ?? colors.blue[7],
      },
      onSubmit: (values) =>
 updateAppearance(
 onSaveAppearance(
          {
            service_banner: values,
          },
          !isEntitled && (
            <Button
              onClick={() => {
 updateAppearance(
 onSaveAppearance(
                  {
                    service_banner: {
                      message:
                      ...serviceBannerForm.values,
                      enabled: newState,
                    };
 updateAppearance(
 onSaveAppearance(
                      {
                        service_banner: newBanner,
                      },
                    "background_color",
                    color.hex,
                  );
 updateAppearance(
 onSaveAppearance(
                    {
                      service_banner: {
                        ...serviceBannerForm.values,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,21 @@
		import { QueryClient } from "@tanstack/react-query";
		import * as API from "api/api";
		import { AppearanceConfig } from "api/typesGenerated";
		import { getMetadataAsJSON } from "utils/metadata";

		export const appearance = () => {
		return {
		queryKey: ["appearance"],
		queryFn: async () =>
		getMetadataAsJSON<AppearanceConfig>("appearance") ?? API.getAppearance(),
		};
		};

		export const updateAppearance = (queryClient: QueryClient) => {
		return {
		mutationFn: API.updateAppearance,
		onSuccess: (newConfig: AppearanceConfig) => {
		queryClient.setQueryData(["appearance"], newConfig);
		},
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,11 @@
		import * as API from "api/api";
		import { BuildInfoResponse } from "api/typesGenerated";
		import { getMetadataAsJSON } from "utils/metadata";

		export const buildInfo = () => {
		return {
		queryKey: ["buildInfo"],
		queryFn: async () =>
		getMetadataAsJSON<BuildInfoResponse>("build-info") ?? API.getBuildInfo(),
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,25 @@
		import { QueryClient } from "@tanstack/react-query";
		import * as API from "api/api";
		import { Entitlements } from "api/typesGenerated";
		import { getMetadataAsJSON } from "utils/metadata";

		const ENTITLEMENTS_QUERY_KEY = ["entitlements"];

		export const entitlements = () => {
		return {
		queryKey: ENTITLEMENTS_QUERY_KEY,
		queryFn: async () =>
		getMetadataAsJSON<Entitlements>("entitlements") ?? API.getEntitlements(),
		};
		};

		export const refreshEntitlements = (queryClient: QueryClient) => {
		return {
		mutationFn: API.refreshEntitlements,
		onSuccess: async () => {
		await queryClient.invalidateQueries({
		queryKey: ENTITLEMENTS_QUERY_KEY,
		});
		},
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,11 @@
		import * as API from "api/api";
		import { Experiments } from "api/typesGenerated";
		import { getMetadataAsJSON } from "utils/metadata";

		export const experiments = () => {
		return {
		queryKey: ["experiments"],
		queryFn: async () =>
		getMetadataAsJSON<Experiments>("experiments") ?? API.getExperiments(),
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -1,22 +1,27 @@
		import { useMachine } from "@xstate/react";
		import { useQuery } from "@tanstack/react-query";
		import { buildInfo } from "api/queries/buildInfo";
		import { experiments } from "api/queries/experiments";
		import { entitlements } from "api/queries/entitlements";
		import {
		AppearanceConfig,
		BuildInfoResponse,
		Entitlements,
		Experiments,
		} from "api/typesGenerated";
		import { FullScreenLoader } from "components/Loader/FullScreenLoader";
		import { createContext, FC, PropsWithChildren, useContext } from "react";
		import { appearanceMachine } from "xServices/appearance/appearanceXService";
		import { buildInfoMachine } from "xServices/buildInfo/buildInfoXService";
		import { entitlementsMachine } from "xServices/entitlements/entitlementsXService";
		import { experimentsMachine } from "xServices/experiments/experimentsMachine";
		import {
		createContext,
		FC,
		PropsWithChildren,
		useContext,
		useState,
		} from "react";
		import { appearance } from "api/queries/appearance";

		interface Appearance {
		config: AppearanceConfig;
		preview: boolean;
		isPreview: boolean;
		setPreview: (config: AppearanceConfig) => void;
		save: (config: AppearanceConfig) => void;
		}

		interface DashboardProviderValue {
Expand All		@@ -31,29 +36,16 @@ export const DashboardProviderContext = createContext<
		>(undefined);

		export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
		const [buildInfoState] = useMachine(buildInfoMachine);
		const [entitlementsState] = useMachine(entitlementsMachine);
		const [appearanceState, appearanceSend] = useMachine(appearanceMachine);
		const [experimentsState] = useMachine(experimentsMachine);
		const { buildInfo } = buildInfoState.context;
		const { entitlements } = entitlementsState.context;
		const { appearance, preview } = appearanceState.context;
		const { experiments } = experimentsState.context;
		const isLoading = !buildInfo \|\| !entitlements \|\| !appearance \|\| !experiments;

		const setAppearancePreview = (config: AppearanceConfig) => {
		appearanceSend({
		type: "SET_PREVIEW_APPEARANCE",
		appearance: config,
		});
		};

		const saveAppearance = (config: AppearanceConfig) => {
		appearanceSend({
		type: "SAVE_APPEARANCE",
		appearance: config,
		});
		};
		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;
		const [configPreview, setConfigPreview] = useState<AppearanceConfig>();

		if (isLoading) {
		return <FullScreenLoader />;
Expand All		@@ -62,14 +54,13 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
		return (
		<DashboardProviderContext.Provider
		value={{
		buildInfo,
		entitlements,
		experiments,
		buildInfo: buildInfoQuery.data,
		entitlements: entitlementsQuery.data,
		experiments: experimentsQuery.data,
		appearance: {
		preview,
		config: appearance,
		setPreview: setAppearancePreview,
		save: saveAppearance,
		config: configPreview ?? appearanceQuery.data,
		setPreview: setConfigPreview,
		isPreview: configPreview !== undefined,
		},
		}}
		>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,7 +15,7 @@ export const ServiceBanner: React.FC = () => {
		<ServiceBannerView
		message={message}
		backgroundColor={background_color}
		preview={appearance.preview}
		isPreview={appearance.isPreview}
		/>
		);
		} else {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,6 +20,6 @@ export const Preview: Story = {
		args: {
		message: "weeeee",
		backgroundColor: "#000000",
		preview: true,
		isPreview: true,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,13 +7,13 @@ import { hex } from "color-convert";
		export interface ServiceBannerViewProps {
		message: string;
		backgroundColor: string;
		preview: boolean;
		isPreview: boolean;
		}

		export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
		message,
		backgroundColor,
		preview,
		isPreview,
		}) => {
		const styles = useStyles();
		// We don't want anything funky like an image or a heading in the service
Expand All		@@ -34,7 +34,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
		className={styles.container}
		style={{ backgroundColor: backgroundColor }}
		>
		{preview && <Pill text="Preview" type="info" lightBorder />}
		{isPreview && <Pill text="Preview" type="info" lightBorder />}
		<div
		className={styles.centerContent}
		style={{
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,6 +6,7 @@ import { embedRedirect } from "../../utils/redirect";
		import { FullScreenLoader } from "../Loader/FullScreenLoader";
		import { DashboardProvider } from "components/Dashboard/DashboardProvider";
		import { ProxyProvider } from "contexts/ProxyContext";
		import { isApiError } from "api/errors";

		export const RequireAuth: FC = () => {
		const [authState, authSend] = useAuth();
Expand All		@@ -18,11 +19,11 @@ export const RequireAuth: FC = () => {
		useEffect(() => {
		const interceptorHandle = axios.interceptors.response.use(
		(okResponse) => okResponse,
		(error) => {
		(error: unknown) => {
		// 401 Unauthorized
		// If we encountered an authentication error, then our token is probably
		// invalid and we should update the auth state to reflect that.
		if (error.response.status === 401) {
		if (isApiError(error) &&error.response.status === 401) {
		authSend("SIGN_OUT");
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,17 +12,16 @@ import {
		MockBuildInfo,
		MockEntitlementsWithScheduling,
		MockExperiments,
		MockAppearance,
		MockAppearanceConfig,
		} from "testHelpers/entities";
		import { WorkspaceStatusBadge } from "./WorkspaceStatusBadge";
		import { DashboardProviderContext } from "components/Dashboard/DashboardProvider";
		import type { Meta, StoryObj } from "@storybook/react";

		const MockedAppearance = {
		config: MockAppearance,
		preview: false,
		setPreview: () => null,
		save: () => null,
		config: MockAppearanceConfig,
		isPreview: false,
		setPreview: () => {},
		};

		const meta: Meta<typeof WorkspaceStatusBadge> = {
Expand Down