Remove appearance service

coder · BrunoQuaresma · Sep 14, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
commit e94af69ed7d68155374057efd5d59eae15caeef1
diff --git a/site/src/api/queries/appearance.ts b/site/src/api/queries/appearance.ts
@@ -0,0 +1,33 @@
+import { QueryClient } from "@tanstack/react-query";
+import * as API from "api/api";
+import { AppearanceConfig } from "api/typesGenerated";
+
+export const appearance = () => {
+  return {
+    queryKey: ["appearance"],
+    queryFn: fetchAppearance,
+  };
+};
+
+export const updateAppearance = (queryClient: QueryClient) => {
+  return {
+    mutationFn: API.updateAppearance,
+    onSuccess: (newConfig: AppearanceConfig) => {
+      queryClient.setQueryData(["appearance"], newConfig);
+    },
+  };
+};
+
+const fetchAppearance = () => {
+  const appearance = document.querySelector("meta[property=appearance]");
+  if (appearance) {
+    const rawContent = appearance.getAttribute("content");
+    try {
+      return JSON.parse(rawContent as string);
+    } catch (ex) {
+      // Ignore this and fetch as normal!
+    }
+  }
+
+  return API.getAppearance();
+};
diff --git a/site/src/components/Dashboard/DashboardProvider.tsx b/site/src/components/Dashboard/DashboardProvider.tsx
@@ -1,5 +1,4 @@
 import { useQuery } from "@tanstack/react-query";
-import { useMachine } from "@xstate/react";
 import { buildInfo } from "api/queries/buildInfo";
 import { experiments } from "api/queries/experiments";
 import { entitlements } from "api/queries/entitlements";
@@ -10,14 +9,18 @@ import {
   Experiments,
 } from "api/typesGenerated";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
-import { createContext, FC, PropsWithChildren, useContext } from "react";
-import { appearanceMachine } from "xServices/appearance/appearanceXService";
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from "react";
+import { appearance } from "api/queries/appearance";
 
 interface Appearance {
   config: AppearanceConfig;
-  preview: boolean;
   setPreview: (config: AppearanceConfig) => void;
-  save: (config: AppearanceConfig) => void;
 }
 
 interface DashboardProviderValue {
@@ -35,27 +38,13 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
   const buildInfoQuery = useQuery(buildInfo());
   const entitlementsQuery = useQuery(entitlements());
   const experimentsQuery = useQuery(experiments());
-  const [appearanceState, appearanceSend] = useMachine(appearanceMachine);
-  const { appearance, preview } = appearanceState.context;
+  const appearanceQuery = useQuery(appearance());
   const isLoading =
     !buildInfoQuery.data ||
     !entitlementsQuery.data ||
-    !appearance ||
+    !appearanceQuery.data ||
     !experimentsQuery.data;
-
-  const setAppearancePreview = (config: AppearanceConfig) => {
-    appearanceSend({
-      type: "SET_PREVIEW_APPEARANCE",
-      appearance: config,
-    });
-  };
-
-  const saveAppearance = (config: AppearanceConfig) => {
-    appearanceSend({
-      type: "SAVE_APPEARANCE",
-      appearance: config,
-    });
-  };
+  const [configPreview, setConfigPreview] = useState<AppearanceConfig>();
 
   if (isLoading) {
     return <FullScreenLoader />;
@@ -68,10 +57,8 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
         entitlements: entitlementsQuery.data,
         experiments: experimentsQuery.data,
         appearance: {
-          preview,
-          config: appearance,
-          setPreview: setAppearancePreview,
-          save: saveAppearance,
+          config: configPreview ?? appearanceQuery.data,
+          setPreview: setConfigPreview,
         },
       }}
     >

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx
@@ -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}
       />
     </>
   );

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -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,

diff --git a/site/src/xServices/appearance/appearanceXService.ts b/site/src/xServices/appearance/appearanceXService.ts