fix(site): Update the template form when a value is changed (coder#7873)

BrunoQuaresma · web-flow · commit 3121ccc7ff88 · 2023-06-06T11:25:25.000-03:00
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { updateTemplateMeta } from "api/api"
 import { UpdateTemplateMeta } from "api/typesGenerated"
 import { displaySuccess } from "components/GlobalSnackbar/utils"
@@ -7,14 +7,18 @@ import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
 import { useNavigate, useParams } from "react-router-dom"
 import { pageTitle } from "utils/page"
-import { useTemplateSettingsContext } from "../TemplateSettingsLayout"
+import {
+  getTemplateQuery,
+  useTemplateSettingsContext,
+} from "../TemplateSettingsLayout"
 import { TemplateSettingsPageView } from "./TemplateSettingsPageView"
 
 export const TemplateSettingsPage: FC = () => {
   const { template: templateName } = useParams() as { template: string }
   const { t } = useTranslation("templateSettingsPage")
   const navigate = useNavigate()
   const { template } = useTemplateSettingsContext()
+  const queryClient = useQueryClient()
   const {
     mutate: updateTemplate,
     isLoading: isSubmitting,
@@ -23,6 +27,9 @@ export const TemplateSettingsPage: FC = () => {
     (data: UpdateTemplateMeta) => updateTemplateMeta(template.id, data),
     {
       onSuccess: async () => {
+        await queryClient.invalidateQueries({
+          queryKey: getTemplateQuery(templateName),
+        })
         displaySuccess("Template updated successfully")
       },
     },
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
@@ -34,10 +34,13 @@ const fetchTemplateSettings = async (orgId: string, name: string) => {
   }
 }
 
+export const getTemplateQuery = (name: string) => ["template", name, "settings"]
+
 const useTemplate = (orgId: string, name: string) => {
   return useQuery({
-    queryKey: ["template", name, "settings"],
+    queryKey: getTemplateQuery(name),
     queryFn: () => fetchTemplateSettings(orgId, name),
+    keepPreviousData: true,
   })
 }
 

Original file line number	Diff line number	Diff line change
`@@ -34,10 +34,13 @@ const fetchTemplateSettings = async (orgId: string, name: string) => {`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`
	`37`	`+export const getTemplateQuery = (name: string) => ["template", name, "settings"]`
	`38`	`+`
`37`	`39`	`const useTemplate = (orgId: string, name: string) => {`
`38`	`40`	`return useQuery({`
`39`		`- queryKey: ["template", name, "settings"],`
	`41`	`+ queryKey: getTemplateQuery(name),`
`40`	`42`	`queryFn: () => fetchTemplateSettings(orgId, name),`
	`43`	`+ keepPreviousData: true,`
`41`	`44`	`})`
`42`	`45`	`}`
`43`	`46`