From f063d4daa363ca119111a343fbef624314a13a32 Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Wed, 21 Aug 2024 14:32:21 +0100
Subject: [PATCH] feat(cdp): Notify if template updates are available (#24386)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../hogfunctions/HogFunctionConfiguration.tsx  | 18 +++++++++++++-----
 .../hogFunctionConfigurationLogic.tsx          | 10 +++++++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
index 8fcb30b45dd4c..a1a055618386a 100644
--- a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
+++ b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx
@@ -1,4 +1,4 @@
-import { IconInfo, IconPlus } from '@posthog/icons'
+import { IconPlus } from '@posthog/icons'
 import {
     LemonBanner,
     LemonButton,
@@ -7,6 +7,7 @@ import {
     LemonInput,
     LemonLabel,
     LemonSwitch,
+    LemonTag,
     LemonTextArea,
     Link,
     SpinnerOverlay,
@@ -51,6 +52,7 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
         sparkline,
         sparklineLoading,
         template,
+        templateHasChanged,
     } = useValues(logic)
     const {
         submitConfiguration,
@@ -211,9 +213,6 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
                                                     <div className="flex-1">
                                                         <LemonButton>Close</LemonButton>
                                                     </div>
-                                                    <LemonButton onClick={() => resetToTemplate()}>
-                                                        Reset to template
-                                                    </LemonButton>
 
                                                     <LemonButton
                                                         type="secondary"
@@ -221,6 +220,12 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
                                                     >
                                                         New function from template
                                                     </LemonButton>
+
+                                                    {templateHasChanged ? (
+                                                        <LemonButton type="primary" onClick={() => resetToTemplate()}>
+                                                            Update
+                                                        </LemonButton>
+                                                    ) : null}
                                                 </div>
                                             </div>
                                         }
@@ -229,7 +234,10 @@ export function HogFunctionConfiguration({ templateId, id }: { templateId?: stri
                                             <Link subtle className="flex items-center gap-1 flex-wrap p-2">
                                                 Built from template:
                                                 <span className="font-semibold">{hogFunction?.template.name}</span>
-                                                <DestinationTag status={hogFunction.template.status} /> <IconInfo />
+                                                <DestinationTag status={hogFunction.template.status} />
+                                                {templateHasChanged ? (
+                                                    <LemonTag type="success">Update available!</LemonTag>
+                                                ) : null}
                                             </Link>
                                         </div>
                                     </LemonDropdown>
diff --git a/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx b/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx
index 363dfc3934878..c67a021e03987 100644
--- a/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx
+++ b/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx
@@ -487,6 +487,13 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
             },
             { resultEqualityCheck: equal },
         ],
+
+        templateHasChanged: [
+            (s) => [s.hogFunction, s.configuration],
+            (hogFunction, configuration) => {
+                return hogFunction?.template?.hog && hogFunction.template.hog !== configuration.hog
+            },
+        ],
     })),
 
     listeners(({ actions, values, cache }) => ({
@@ -583,8 +590,9 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
                     name: values.configuration.name,
                     description: values.configuration.description,
                     inputs,
-                    enabled: false,
                 })
+
+                lemonToast.success('Template updates applied but not saved.')
             }
         },
         setConfigurationValue: () => {