🎉 (admin) add copy to markdown button

owid · Feb 3, 2025 · 1d00f30 · 1d00f30
1 parent e6c82da
commit 1d00f30
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git a/adminSiteClient/ChartRow.tsx b/adminSiteClient/ChartRow.tsx
@@ -7,11 +7,18 @@ import { Timeago } from "./Forms.js"
 import { EditableTags } from "./EditableTags.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import {
+    ADMIN_BASE_URL,
     BAKED_GRAPHER_URL,
     GRAPHER_DYNAMIC_THUMBNAIL_URL,
 } from "../settings/clientSettings.js"
 import { ChartListItem, showChartType } from "./ChartList.js"
-import { TaggableType, DbChartTagJoin } from "@ourworldindata/utils"
+import {
+    TaggableType,
+    DbChartTagJoin,
+    copyToClipboard,
+    excludeUndefined,
+} from "@ourworldindata/utils"
+import { Dropdown } from "antd"
 
 @observer
 export class ChartRow extends React.Component<{
@@ -46,6 +53,26 @@ export class ChartRow extends React.Component<{
 
         const highlight = searchHighlight || lodash.identity
 
+        type CopyToMarkdownOptionKey = "admin-url" | "grapher-url"
+        const copyToMarkdownOptions: {
+            key: CopyToMarkdownOptionKey
+            label: string
+        }[] = excludeUndefined([
+            { key: "admin-url", label: "Admin URL" },
+            chart.publishedAt
+                ? { key: "grapher-url", label: "Grapher URL" }
+                : undefined,
+        ])
+
+        const makeMarkdownLink = (key: "admin-url" | "grapher-url") => {
+            switch (key) {
+                case "admin-url":
+                    return `[${chart.title}](${ADMIN_BASE_URL}/charts/${chart.id}/edit)`
+                case "grapher-url":
+                    return `[${chart.title}](${BAKED_GRAPHER_URL}/${chart.slug})`
+            }
+        }
+
         return (
             <tr>
                 <td
@@ -121,6 +148,23 @@ export class ChartRow extends React.Component<{
                     >
                         Edit
                     </Link>
+                    <Dropdown.Button
+                        className="mt-1"
+                        onClick={() =>
+                            copyToClipboard(makeMarkdownLink("admin-url"))
+                        }
+                        menu={{
+                            items: copyToMarkdownOptions,
+                            onClick: (e) =>
+                                copyToClipboard(
+                                    makeMarkdownLink(
+                                        e.key as CopyToMarkdownOptionKey
+                                    )
+                                ),
+                        }}
+                    >
+                        Copy
+                    </Dropdown.Button>
                 </td>
                 <td>
                     <button

diff --git a/adminSiteClient/EditorTextTab.tsx b/adminSiteClient/EditorTextTab.tsx
@@ -2,7 +2,7 @@ import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { LogoOption, RelatedQuestionsConfig } from "@ourworldindata/types"
 import { getErrorMessageRelatedQuestionUrl } from "@ourworldindata/grapher"
-import { slugify } from "@ourworldindata/utils"
+import { copyToClipboard, slugify } from "@ourworldindata/utils"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
 import { Component } from "react"
@@ -20,6 +20,11 @@ import {
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
 import { ErrorMessages } from "./ChartEditorTypes.js"
 import { isChartViewEditorInstance } from "./ChartViewEditor.js"
+import { Button as AntdButton, Space } from "antd"
+import {
+    BAKED_GRAPHER_URL,
+    ADMIN_BASE_URL,
+} from "../settings/clientSettings.js"
 
 @observer
 export class EditorTextTab<
@@ -319,6 +324,32 @@ export class EditorTextTab<
                         helpText="Optional variant name for distinguishing charts with the same title"
                     />
                 </Section>
+                <Section name="Copy">
+                    <Space direction="vertical" size="small">
+                        {grapher.id && (
+                            <AntdButton
+                                onClick={() =>
+                                    copyToClipboard(
+                                        `[${grapher.title}](${ADMIN_BASE_URL}/charts/${grapher.id}/edit)`
+                                    )
+                                }
+                            >
+                                Copy admin link as markdown
+                            </AntdButton>
+                        )}
+                        {grapher.slug && (
+                            <AntdButton
+                                onClick={() =>
+                                    copyToClipboard(
+                                        `[${grapher.title}](${BAKED_GRAPHER_URL}/${grapher.slug})`
+                                    )
+                                }
+                            >
+                                Copy Grapher link as markdown
+                            </AntdButton>
+                        )}
+                    </Space>
+                </Section>
             </div>
         )
     }