From c6f6cd5c8af6edfe37bcdcc7b0812309a5a513f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Rod=C3=A9s-Guirao?=
 <lucasrodes@users.noreply.github.com>
Date: Thu, 9 Jan 2025 22:49:17 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20wizard=20link=20for=20chart?=
 =?UTF-8?q?=20animation=20(#4407)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Co-authored-by: Marcel Gerber <mgerber59@gmail.com>

* add chart type explicitly

* refactor: conditionally render chart animation link for published graphs

* refactor: remove commented-out code for chart animation tab
---
 adminSiteClient/EditorExportTab.tsx | 51 ++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/adminSiteClient/EditorExportTab.tsx b/adminSiteClient/EditorExportTab.tsx
index ccbd59d7f3..426d9cae7d 100644
--- a/adminSiteClient/EditorExportTab.tsx
+++ b/adminSiteClient/EditorExportTab.tsx
@@ -8,6 +8,10 @@ import {
     GrapherStaticFormat,
 } from "@ourworldindata/utils"
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
+import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
+import { faHatWizard, faDownload } from "@fortawesome/free-solid-svg-icons"
+import { Button } from "antd"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
 type ExportSettings = Required<
     Pick<
@@ -227,6 +231,18 @@ export class EditorExportTab<
     }
 
     render() {
+        const chartAnimationUrl = new URL(`${ETL_WIZARD_URL}chart-animation`)
+        if (this.grapher.canonicalUrl)
+            chartAnimationUrl.searchParams.set(
+                "animation_chart_url",
+                this.grapher.canonicalUrl
+            )
+        chartAnimationUrl.searchParams.set("animation_skip_button", "True")
+        // chartAnimationUrl.searchParams.set(
+        //     "animation_chart_tab",
+        //     this.grapher.tab ?? ""
+        // )
+
         return (
             <div className="EditorExportTab">
                 <Section name="Displayed elements">
@@ -309,40 +325,65 @@ export class EditorExportTab<
                         />
                     )}
                 </Section>
+
                 <Section name="Export static chart">
                     <div className="DownloadButtons">
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadDesktopPNG}
                         >
-                            Download Desktop PNG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Desktop PNG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadDesktopSVG}
                         >
-                            Download Desktop SVG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Desktop SVG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadMobilePNG}
                         >
-                            Download Mobile PNG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Mobile PNG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadMobileSVG}
                         >
-                            Download Mobile SVG
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Mobile SVG
                         </button>
                         <button
                             className="btn btn-primary"
                             onClick={this.onDownloadMobileSVGForSocialMedia}
                         >
-                            Download Mobile SVG for Social Media
+                            {<FontAwesomeIcon icon={faDownload} />} Download
+                            Mobile SVG for Social Media
                         </button>
                     </div>
                 </Section>
+
+                {/* Link to Wizard dataset preview */}
+                {this.grapher.isPublished && (
+                    <Section name="Animate chart">
+                        <a
+                            href={chartAnimationUrl.toString()}
+                            target="_blank"
+                            className="btn btn-tertiary"
+                            rel="noopener"
+                        >
+                            <Button
+                                type="default"
+                                icon={<FontAwesomeIcon icon={faHatWizard} />}
+                            >
+                                Animate with Wizard
+                            </Button>
+                        </a>
+                    </Section>
+                )}
             </div>
         )
     }