From 991514d8a60489fce06fba8f2399bb9bd9ee1ea1 Mon Sep 17 00:00:00 2001
From: Will Vedder <willvedd@gmail.com>
Date: Thu, 2 Nov 2023 03:25:27 -0400
Subject: [PATCH] Notifications in `auth0 ul template update` preview (#895)

* Adding notification in storybook

* Adding notification in CLI

* Adjust command path in helper text

---------

Co-authored-by: Will Vedder <will.vedder@okta.com>
Co-authored-by: Sergiu Ghitea <28300158+sergiught@users.noreply.github.com>
---
 .../branding-customization-notification.js    | 46 +++++++++++++++++++
 .../cli/data/branding/storybook/index.html    |  2 +-
 internal/cli/universal_login_templates.go     |  2 +
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 internal/cli/data/branding/storybook/branding-customization-notification.js

diff --git a/internal/cli/data/branding/storybook/branding-customization-notification.js b/internal/cli/data/branding/storybook/branding-customization-notification.js
new file mode 100644
index 000000000..3541bc065
--- /dev/null
+++ b/internal/cli/data/branding/storybook/branding-customization-notification.js
@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var checkIfStorybookRendered = setInterval(function () {
+    var targetDiv = document.querySelectorAll("#panel-tab-content > div")[0];
+    if (targetDiv) {
+      clearInterval(checkIfStorybookRendered);
+      var insertHTML = `
+          <div 
+            id="branding-customization-notification"
+            style="
+              padding: 30px 20px 20px;
+              background: #ffff57;
+              margin: 0;
+              position:relative;
+            "
+          >
+              <p style="
+                  line-height: 1.45em;
+                  font-size: 1.4em;
+                ">An improved branding customization UI experience is available through the <b><code>auth0 universal-login customize</code></b> command.</p>
+              <button 
+                id="branding-close-button"
+                style="
+                  position: absolute;
+                  top:0px;
+                  right:0px;
+                  background: transparent;
+                  border: none;
+                  padding: 10px 15px;
+                  cursor:pointer;
+                  text-decoration: underline;
+                "
+              >Close</button>
+          </div>
+          `;
+      targetDiv.innerHTML = insertHTML + targetDiv.innerHTML;
+
+      var brandingCloseButton = document.getElementById('branding-close-button');
+      brandingCloseButton.addEventListener('click', function () {
+        var brandingCustomizationNotification = document.getElementById('branding-customization-notification');
+        if (brandingCustomizationNotification) {
+          brandingCustomizationNotification.remove();
+        }
+      });
+    }
+  }, 100);
+});
diff --git a/internal/cli/data/branding/storybook/index.html b/internal/cli/data/branding/storybook/index.html
index 47370ed94..b844d482e 100644
--- a/internal/cli/data/branding/storybook/index.html
+++ b/internal/cli/data/branding/storybook/index.html
@@ -52,4 +52,4 @@
             
         
             
-              window['DOCS_MODE'] = false;</script><script src="runtime~main.61b5b68c70da183b7397.manager.bundle.js"></script><script src="vendors~main.f2c971dea89201865b97.manager.bundle.js"></script><script src="main.10eb9558f241369aaa99.manager.bundle.js"></script></body></html>
\ No newline at end of file
+              window['DOCS_MODE'] = false;</script><script src="runtime~main.61b5b68c70da183b7397.manager.bundle.js"></script><script src="vendors~main.f2c971dea89201865b97.manager.bundle.js"></script><script src="main.10eb9558f241369aaa99.manager.bundle.js"></script><script src="./branding-customization-notification.js"></script></body></html>
diff --git a/internal/cli/universal_login_templates.go b/internal/cli/universal_login_templates.go
index 4469b85d7..b2c5602f5 100644
--- a/internal/cli/universal_login_templates.go
+++ b/internal/cli/universal_login_templates.go
@@ -140,6 +140,8 @@ func updateBrandingTemplateCmd(cli *cli) *cobra.Command {
 		RunE: func(cmd *cobra.Command, args []string) error {
 			ctx := cmd.Context()
 
+			cli.renderer.Warnf("An improved branding customization UI experience is available through the `auth0 universal-login customize` command.")
+
 			var templateData *TemplateData
 			if err := ansi.Waiting(func() (err error) {
 				templateData, err = cli.fetchTemplateData(ctx)