diff --git a/adminSiteClient/ChartEditor.ts b/adminSiteClient/ChartEditor.ts
index c059e75ebc..839efe0794 100644
--- a/adminSiteClient/ChartEditor.ts
+++ b/adminSiteClient/ChartEditor.ts
@@ -13,7 +13,6 @@ import {
     getParentVariableIdFromChartConfig,
     mergeGrapherConfigs,
     isEmpty,
-    slugify,
     omit,
     CHART_VIEW_PROPS_TO_OMIT,
 } from "@ourworldindata/utils"
@@ -26,8 +25,6 @@ import {
     References,
 } from "./AbstractChartEditor.js"
 import { Admin } from "./Admin.js"
-import { Form, Input, Modal } from "antd"
-import React, { useState } from "react"
 
 export interface Log {
     userId: number
@@ -202,11 +199,6 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
             )
     }
 
-    openNarrativeChartNameModal(): void {
-        const { grapher } = this
-        const suggestedName = grapher.title ? slugify(grapher.title) : undefined
-    }
-
     async saveAsChartView(
         name: string
     ): Promise<{ success: boolean; errorMsg?: string }> {
diff --git a/adminSiteClient/NarrativeChartNameModal.tsx b/adminSiteClient/NarrativeChartNameModal.tsx
new file mode 100644
index 0000000000..81d61c02bd
--- /dev/null
+++ b/adminSiteClient/NarrativeChartNameModal.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import { Form, Input, InputRef, Modal, Spin } from "antd"
+
+export const NarrativeChartNameModal = (props: {
+    initialName: string
+    open: "open" | "open-loading" | "closed"
+    errorMsg?: string
+    onSubmit: (name: string) => void
+    onCancel?: () => void
+}) => {
+    const [name, setName] = useState<string>(props.initialName)
+    const inputField = useRef<InputRef>(null)
+    const isLoading = useMemo(() => props.open === "open-loading", [props.open])
+    const isOpen = useMemo(() => props.open !== "closed", [props.open])
+
+    useEffect(() => setName(props.initialName), [props.initialName])
+
+    useEffect(() => {
+        if (isOpen) {
+            inputField.current?.focus({ cursor: "all" })
+        }
+    }, [isOpen])
+
+    return (
+        <Modal
+            title="Save as narrative chart"
+            open={isOpen}
+            onOk={() => props.onSubmit(name)}
+            onCancel={props.onCancel}
+            onClose={props.onCancel}
+            okButtonProps={{ disabled: !name || isLoading }}
+            cancelButtonProps={{ disabled: isLoading }}
+        >
+            <div>
+                <p>
+                    This will create a new narrative chart that is linked to
+                    this chart. Any currently pending changes will be applied to
+                    the narrative chart.
+                </p>
+                <p>
+                    Please enter a programmatic name for the narrative chart.{" "}
+                    <i>Note that this name cannot be changed later.</i>
+                </p>
+                <Form.Item label="Name">
+                    <Input
+                        ref={inputField}
+                        onChange={(e) => setName(e.target.value)}
+                        value={name}
+                        disabled={isLoading}
+                    />
+                </Form.Item>
+                {isLoading && <Spin />}
+                {props.errorMsg && (
+                    <div
+                        className="alert alert-danger"
+                        style={{ whiteSpace: "pre-wrap" }}
+                    >
+                        {props.errorMsg}
+                    </div>
+                )}
+            </div>
+        </Modal>
+    )
+}
diff --git a/adminSiteClient/SaveButtons.tsx b/adminSiteClient/SaveButtons.tsx
index bdae5d157f..0bdbafca27 100644
--- a/adminSiteClient/SaveButtons.tsx
+++ b/adminSiteClient/SaveButtons.tsx
@@ -1,4 +1,4 @@
-import { Component, useEffect, useMemo, useRef, useState } from "react"
+import { Component } from "react"
 import { ChartEditor, isChartEditorInstance } from "./ChartEditor.js"
 import { action, computed, observable } from "mobx"
 import { observer } from "mobx-react"
@@ -17,7 +17,7 @@ import {
     chartViewsFeatureEnabled,
     isChartViewEditorInstance,
 } from "./ChartViewEditor.js"
-import { Form, Input, InputRef, Modal, Spin } from "antd"
+import { NarrativeChartNameModal } from "./NarrativeChartNameModal.js"
 
 @observer
 export class SaveButtons<Editor extends AbstractChartEditor> extends Component<{
@@ -273,65 +273,3 @@ class SaveButtonsForChartView extends Component<{
         )
     }
 }
-
-const NarrativeChartNameModal = (props: {
-    initialName: string
-    open: "open" | "open-loading" | "closed"
-    errorMsg?: string
-    onSubmit: (name: string) => void
-    onCancel?: () => void
-}) => {
-    const [name, setName] = useState<string>(props.initialName)
-    const inputField = useRef<InputRef>(null)
-    const isLoading = useMemo(() => props.open === "open-loading", [props.open])
-    const isOpen = useMemo(() => props.open !== "closed", [props.open])
-
-    useEffect(() => setName(props.initialName), [props.initialName])
-
-    useEffect(() => {
-        if (isOpen) {
-            inputField.current?.focus({ cursor: "all" })
-        }
-    }, [isOpen])
-
-    return (
-        <Modal
-            title="Save as narrative chart"
-            open={isOpen}
-            onOk={() => props.onSubmit(name)}
-            onCancel={props.onCancel}
-            onClose={props.onCancel}
-            okButtonProps={{ disabled: !name || isLoading }}
-            cancelButtonProps={{ disabled: isLoading }}
-        >
-            <div>
-                <p>
-                    This will create a new narrative chart that is linked to
-                    this chart. Any currently pending changes will be applied to
-                    the narrative chart.
-                </p>
-                <p>
-                    Please enter a programmatic name for the narrative chart.{" "}
-                    <i>Note that this name cannot be changed later.</i>
-                </p>
-                <Form.Item label="Name">
-                    <Input
-                        ref={inputField}
-                        onChange={(e) => setName(e.target.value)}
-                        value={name}
-                        disabled={isLoading}
-                    />
-                </Form.Item>
-                {isLoading && <Spin />}
-                {props.errorMsg && (
-                    <div
-                        className="alert alert-danger"
-                        style={{ whiteSpace: "pre-wrap" }}
-                    >
-                        {props.errorMsg}
-                    </div>
-                )}
-            </div>
-        </Modal>
-    )
-}