coder · BrunoQuaresma · Sep 14, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
@@ -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);
+    },
+  };
+};
@@ -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(),
+  };
+};
@@ -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,
+      });
+    },
+  };
+};
@@ -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(),
+  };
+};
@@ -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 {
@@ -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 />;
@@ -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,
         },
       }}
     >

@@ -15,7 +15,7 @@ export const ServiceBanner: React.FC = () => {
       <ServiceBannerView
         message={message}
         backgroundColor={background_color}
-        preview={appearance.preview}
+        isPreview={appearance.isPreview}
       />
     );
   } else {

@@ -20,6 +20,6 @@ export const Preview: Story = {
   args: {
     message: "weeeee",
     backgroundColor: "#000000",
-    preview: true,
+    isPreview: true,
   },
 };
@@ -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
@@ -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={{

@@ -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();
@@ -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");
         }
 

@@ -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> = {

@@ -1,6 +1,6 @@
 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();

@@ -4,17 +4,23 @@ import { FC } from "react";
 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";
 
-  const updateAppearance = (
+  const onSaveAppearance = async (
     newConfig: Partial<UpdateAppearanceConfig>,
     preview: boolean,
   ) => {
@@ -26,7 +32,14 @@ const AppearanceSettingsPage: FC = () => {
       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 (
@@ -38,7 +51,7 @@ const AppearanceSettingsPage: FC = () => {
       <AppearanceSettingsPageView
         appearance={appearance.config}
         isEntitled={isEntitled}
-        updateAppearance={updateAppearance}
+        onSaveAppearance={onSaveAppearance}
       />
     </>
   );

@@ -14,13 +14,16 @@ const meta: Meta<typeof AppearanceSettingsPageView> = {
       },
     },
     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 = {};
@@ -25,15 +25,15 @@ import { colors } from "theme/colors";
 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();
@@ -43,7 +43,7 @@ export const AppearanceSettingsPageView = ({
     initialValues: {
       logo_url: appearance.logo_url,
     },
-    onSubmit: (values) => updateAppearance(values, false),
+    onSubmit: (values) => onSaveAppearance(values, false),
   });
   const logoFieldHelpers = getFormHelpers(logoForm);
 
@@ -56,7 +56,7 @@ export const AppearanceSettingsPageView = ({
           appearance.service_banner.background_color ?? colors.blue[7],
       },
       onSubmit: (values) =>
-        updateAppearance(
+        onSaveAppearance(
           {
             service_banner: values,
           },
@@ -123,7 +123,7 @@ export const AppearanceSettingsPageView = ({
           !isEntitled && (
             <Button
               onClick={() => {
-                updateAppearance(
+                onSaveAppearance(
                   {
                     service_banner: {
                       message:
@@ -162,7 +162,7 @@ export const AppearanceSettingsPageView = ({
                       ...serviceBannerForm.values,
                       enabled: newState,
                     };
-                    updateAppearance(
+                    onSaveAppearance(
                       {
                         service_banner: newBanner,
                       },
@@ -196,7 +196,7 @@ export const AppearanceSettingsPageView = ({
                     "background_color",
                     color.hex,
                   );
-                  updateAppearance(
+                  onSaveAppearance(
                     {
                       service_banner: {
                         ...serviceBannerForm.values,