feat(admin): enable "Save as narrative view"

owid · Nov 27, 2024 · 9e97c78 · 9e97c78
1 parent 0758f9f
commit 9e97c78
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 25 deletions.
diff --git a/adminSiteClient/ChartEditor.ts b/adminSiteClient/ChartEditor.ts
@@ -14,6 +14,7 @@ import {
     getParentVariableIdFromChartConfig,
     mergeGrapherConfigs,
     isEmpty,
+    slugify,
 } from "@ourworldindata/utils"
 import { action, computed, observable, runInAction } from "mobx"
 import { BAKED_GRAPHER_URL } from "../settings/clientSettings.js"
@@ -201,6 +202,42 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
             )
     }
 
+    async saveAsNarrativeView(): Promise<void> {
+        const { patchConfig, grapher } = this
+
+        const chartJson = { ...patchConfig }
+        delete chartJson.id
+        delete chartJson.isPublished
+        delete chartJson.slug
+
+        const suggestedSlug = grapher.title ? slugify(grapher.title) : undefined
+
+        const slug = prompt(
+            "Please enter a slug for the narrative view. Note that the slug cannot be changed later.",
+            suggestedSlug
+        )
+
+        // Need to open intermediary tab before AJAX to avoid popup blockers
+        const w = window.open("/", "_blank") as Window
+
+        const body = {
+            slug,
+            parentChartId: grapher.id,
+            config: chartJson,
+        }
+
+        const json = await this.manager.admin.requestJSON(
+            "/api/chartViews",
+            body,
+            "POST"
+        )
+
+        if (json.success)
+            w.location.assign(
+                this.manager.admin.url(`chartViews/${json.chartViewId}/edit`)
+            )
+    }
+
     publishGrapher(): void {
         const url = `${BAKED_GRAPHER_URL}/${this.grapher.displaySlug}`
 

diff --git a/adminSiteClient/SaveButtons.tsx b/adminSiteClient/SaveButtons.tsx
@@ -51,6 +51,10 @@ class SaveButtonsForChart extends React.Component<{
         void this.props.editor.saveAsNewGrapher()
     }
 
+    @action.bound onSaveAsNarrativeView() {
+        void this.props.editor.saveAsNarrativeView()
+    }
+
     @action.bound onPublishToggle() {
         if (this.props.editor.grapher.isPublished)
             this.props.editor.unpublishGrapher()
@@ -77,31 +81,41 @@ class SaveButtonsForChart extends React.Component<{
 
         return (
             <div className="SaveButtons">
-                <button
-                    className="btn btn-success"
-                    onClick={this.onSaveChart}
-                    disabled={isSavingDisabled}
-                >
-                    {grapher.isPublished
-                        ? "Update chart"
-                        : grapher.id
-                          ? "Save draft"
-                          : "Create draft"}
-                </button>{" "}
-                <button
-                    className="btn btn-secondary"
-                    onClick={this.onSaveAsNew}
-                    disabled={isSavingDisabled}
-                >
-                    Save as new
-                </button>{" "}
-                <button
-                    className="btn btn-danger"
-                    onClick={this.onPublishToggle}
-                    disabled={isSavingDisabled}
-                >
-                    {grapher.isPublished ? "Unpublish" : "Publish"}
-                </button>
+                <div>
+                    <button
+                        className="btn btn-success"
+                        onClick={this.onSaveChart}
+                        disabled={isSavingDisabled}
+                    >
+                        {grapher.isPublished
+                            ? "Update chart"
+                            : grapher.id
+                              ? "Save draft"
+                              : "Create draft"}
+                    </button>{" "}
+                    <button
+                        className="btn btn-secondary"
+                        onClick={this.onSaveAsNew}
+                        disabled={isSavingDisabled}
+                    >
+                        Save as new
+                    </button>{" "}
+                    <button
+                        className="btn btn-danger"
+                        onClick={this.onPublishToggle}
+                        disabled={isSavingDisabled}
+                    >
+                        {grapher.isPublished ? "Unpublish" : "Publish"}
+                    </button>
+                </div>
+                <div className="mt-2">
+                    <button
+                        className="btn btn-primary"
+                        onClick={this.onSaveAsNarrativeView}
+                    >
+                        Save as narrative view
+                    </button>
+                </div>
             </div>
         )
     }