Merge branch 'master' into grapher-redesign

owid · Oct 16, 2023 · b851b75 · b851b75
2 parents d8dd47f + bf40949
commit b851b75
Show file tree

Hide file tree

Showing 28 changed files with 388 additions and 267 deletions.
diff --git a/adminSiteClient/ChartList.tsx b/adminSiteClient/ChartList.tsx
@@ -1,11 +1,10 @@
 import React from "react"
 import { observer } from "mobx-react"
 import { runInAction, observable } from "mobx"
-import { Tag } from "./TagBadge.js"
 import { bind } from "decko"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { ChartTypeName, GrapherInterface } from "@ourworldindata/grapher"
-import { startCase } from "@ourworldindata/utils"
+import { startCase, ChartTagJoin } from "@ourworldindata/utils"
 import { References, getFullReferencesCount } from "./ChartEditor.js"
 import { ChartRow } from "./ChartRow.js"
 
@@ -29,7 +28,7 @@ export interface ChartListItem {
     publishedBy: string
     isExplorable: boolean
 
-    tags: Tag[]
+    tags: ChartTagJoin[]
 }
 
 @observer
@@ -41,7 +40,7 @@ export class ChartList extends React.Component<{
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
-    @observable availableTags: Tag[] = []
+    @observable availableTags: ChartTagJoin[] = []
 
     async fetchRefs(grapherId: number | undefined): Promise<References> {
         const { admin } = this.context

diff --git a/adminSiteClient/ChartRow.tsx b/adminSiteClient/ChartRow.tsx
@@ -3,7 +3,6 @@ import { observer } from "mobx-react"
 import { action, runInAction } from "mobx"
 import * as lodash from "lodash"
 import { Link } from "./Link.js"
-import { Tag } from "./TagBadge.js"
 import { Timeago } from "./Forms.js"
 import { EditableTags } from "./EditableTags.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
@@ -12,19 +11,19 @@ import {
     BAKED_GRAPHER_URL,
 } from "../settings/clientSettings.js"
 import { ChartListItem, showChartType } from "./ChartList.js"
-import { TaggableType } from "@ourworldindata/utils"
+import { TaggableType, ChartTagJoin } from "@ourworldindata/utils"
 
 @observer
 export class ChartRow extends React.Component<{
     chart: ChartListItem
     searchHighlight?: (text: string) => string | JSX.Element
-    availableTags: Tag[]
+    availableTags: ChartTagJoin[]
     onDelete: (chart: ChartListItem) => void
 }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
-    async saveTags(tags: Tag[]) {
+    async saveTags(tags: ChartTagJoin[]) {
         const { chart } = this.props
         const json = await this.context.admin.requestJSON(
             `/api/charts/${chart.id}/setTags`,
@@ -36,7 +35,7 @@ export class ChartRow extends React.Component<{
         }
     }
 
-    @action.bound onSaveTags(tags: Tag[]) {
+    @action.bound onSaveTags(tags: ChartTagJoin[]) {
         this.saveTags(tags)
     }
 

diff --git a/adminSiteClient/DatasetEditPage.tsx b/adminSiteClient/DatasetEditPage.tsx
@@ -5,14 +5,13 @@ import * as lodash from "lodash"
 import { Prompt, Redirect } from "react-router-dom"
 import filenamify from "filenamify"
 
-import { OwidSource } from "@ourworldindata/utils"
+import { OwidSource, ChartTagJoin } from "@ourworldindata/utils"
 
 import { AdminLayout } from "./AdminLayout.js"
 import { Link } from "./Link.js"
 import { BindString, Toggle, FieldsRow, Timeago } from "./Forms.js"
 import { EditableTags } from "./EditableTags.js"
 import { ChartList, ChartListItem } from "./ChartList.js"
-import { Tag } from "./TagBadge.js"
 import { VariableList, VariableListItem } from "./VariableList.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
@@ -61,7 +60,7 @@ class DatasetEditable {
         additionalInfo: "",
     }
 
-    @observable tags: Tag[] = []
+    @observable tags: ChartTagJoin[] = []
 
     constructor(json: DatasetPageData) {
         for (const key in this) {
@@ -78,7 +77,7 @@ class DatasetTagEditor extends React.Component<{
     newDataset: DatasetEditable
     availableTags: { id: number; name: string; parentName: string }[]
 }> {
-    @action.bound onSaveTags(tags: Tag[]) {
+    @action.bound onSaveTags(tags: ChartTagJoin[]) {
         this.props.newDataset.tags = tags
     }
 

diff --git a/adminSiteClient/DatasetList.tsx b/adminSiteClient/DatasetList.tsx
@@ -5,7 +5,7 @@ import * as lodash from "lodash"
 import { bind } from "decko"
 
 import { Link } from "./Link.js"
-import { Tag } from "./TagBadge.js"
+import { ChartTagJoin } from "@ourworldindata/utils"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { Timeago } from "./Forms.js"
 import { EditableTags } from "./EditableTags.js"
@@ -20,7 +20,7 @@ export interface DatasetListItem {
     dataEditedByUserName: string
     metadataEditedAt: Date
     metadataEditedByUserName: string
-    tags: Tag[]
+    tags: ChartTagJoin[]
     isPrivate: boolean
     nonRedistributable: boolean
     version: string
@@ -30,13 +30,13 @@ export interface DatasetListItem {
 @observer
 class DatasetRow extends React.Component<{
     dataset: DatasetListItem
-    availableTags: Tag[]
+    availableTags: ChartTagJoin[]
     searchHighlight?: (text: string) => string | JSX.Element
 }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
-    async saveTags(tags: Tag[]) {
+    async saveTags(tags: ChartTagJoin[]) {
         const { dataset } = this.props
         const json = await this.context.admin.requestJSON(
             `/api/datasets/${dataset.id}/setTags`,
@@ -48,7 +48,7 @@ class DatasetRow extends React.Component<{
         }
     }
 
-    @action.bound onSaveTags(tags: Tag[]) {
+    @action.bound onSaveTags(tags: ChartTagJoin[]) {
         this.saveTags(tags)
     }
 
@@ -105,7 +105,7 @@ export class DatasetList extends React.Component<{
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
-    @observable availableTags: Tag[] = []
+    @observable availableTags: ChartTagJoin[] = []
 
     @bind async getTags() {
         const json = await this.context.admin.getJSON("/api/tags.json")

diff --git a/adminSiteClient/EditTags.tsx b/adminSiteClient/EditTags.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
-import { Tag } from "./TagBadge.js"
+import { ChartTagJoin } from "@ourworldindata/utils"
 import {
     ReactTags,
     ReactTagsAPI,
@@ -10,10 +10,10 @@ import {
 
 @observer
 export class EditTags extends React.Component<{
-    tags: Tag[]
-    suggestions: Tag[]
+    tags: ChartTagJoin[]
+    suggestions: ChartTagJoin[]
     onDelete: (index: number) => void
-    onAdd: (tag: Tag) => void
+    onAdd: (tag: ChartTagJoin) => void
     onSave: () => void
 }> {
     dismissable: boolean = true
@@ -66,7 +66,10 @@ export class EditTags extends React.Component<{
     }
 }
 
-const convertTagToAutocomplete = (t: Tag) => ({ value: t.id, label: t.name })
+const convertTagToAutocomplete = (t: ChartTagJoin) => ({
+    value: t.id,
+    label: t.name,
+})
 const convertAutocompleteTotag = (t: TagAutocomplete) => ({
     id: t.value as number,
     name: t.label,

diff --git a/adminSiteClient/EditableTags.tsx b/adminSiteClient/EditableTags.tsx
@@ -2,7 +2,11 @@ import React from "react"
 import * as lodash from "lodash"
 import { observable, action } from "mobx"
 import { observer } from "mobx-react"
-import { KeyChartLevel, Tag, TaggableType } from "@ourworldindata/utils"
+import {
+    KeyChartLevel,
+    TaggableType,
+    ChartTagJoin,
+} from "@ourworldindata/utils"
 import { TagBadge } from "./TagBadge.js"
 import { EditTags } from "./EditTags.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
@@ -16,9 +20,9 @@ interface TaggableItem {
 
 @observer
 export class EditableTags extends React.Component<{
-    tags: Tag[]
-    suggestions: Tag[]
-    onSave: (tags: Tag[]) => void
+    tags: ChartTagJoin[]
+    suggestions: ChartTagJoin[]
+    onSave: (tags: ChartTagJoin[]) => void
     disabled?: boolean
     hasKeyChartSupport?: boolean
     hasSuggestionsSupport?: boolean
@@ -30,9 +34,9 @@ export class EditableTags extends React.Component<{
     @observable isEditing: boolean = false
     base: React.RefObject<HTMLDivElement> = React.createRef()
 
-    @observable tags: Tag[] = lodash.clone(this.props.tags)
+    @observable tags: ChartTagJoin[] = lodash.clone(this.props.tags)
 
-    @action.bound onAddTag(tag: Tag) {
+    @action.bound onAddTag(tag: ChartTagJoin) {
         this.tags.push(tag)
         this.tags = lodash
             // we only want to keep one occurrence of the same tag, whether
@@ -88,9 +92,10 @@ export class EditableTags extends React.Component<{
         const { taggable } = this.props
         if (!taggable?.id) return
 
-        const json: Record<"topics", Tag[]> = await this.context.admin.getJSON(
-            `/api/gpt/suggest-topics/${taggable.type}/${taggable.id}.json`
-        )
+        const json: Record<"topics", ChartTagJoin[]> =
+            await this.context.admin.getJSON(
+                `/api/gpt/suggest-topics/${taggable.type}/${taggable.id}.json`
+            )
 
         if (!json?.topics?.length) return
 
@@ -182,21 +187,21 @@ export class EditableTags extends React.Component<{
     }
 }
 
-const filterUncategorizedTag = (t: Tag) => t.name !== "Uncategorized"
+const filterUncategorizedTag = (t: ChartTagJoin) => t.name !== "Uncategorized"
 
-const filterUnlistedTag = (t: Tag) => t.name !== "Unlisted"
+const filterUnlistedTag = (t: ChartTagJoin) => t.name !== "Unlisted"
 
-const setDefaultKeyChartLevel = (t: Tag) => {
+const setDefaultKeyChartLevel = (t: ChartTagJoin) => {
     if (t.keyChartLevel === undefined) t.keyChartLevel = KeyChartLevel.None
     return t
 }
 
-const setTagStatusToPending = (t: Tag) => {
+const setTagStatusToPending = (t: ChartTagJoin) => {
     t.isApproved = false
     return t
 }
 
-const setTagStatusToApprovedIfUnset = (t: Tag) => {
+const setTagStatusToApprovedIfUnset = (t: ChartTagJoin) => {
     if (t.isApproved === undefined) t.isApproved = true
     return t
 }
diff --git a/adminSiteClient/GdocsIndexPage.tsx b/adminSiteClient/GdocsIndexPage.tsx
@@ -10,11 +10,7 @@ import {
     faPuzzlePiece,
 } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import {
-    OwidGdocTag,
-    OwidGdocInterface,
-    OwidGdocType,
-} from "@ourworldindata/utils"
+import { Tag, OwidGdocInterface, OwidGdocType } from "@ourworldindata/utils"
 import { Route, RouteComponentProps } from "react-router-dom"
 import { Link } from "./Link.js"
 import { GdocsAdd } from "./GdocsAdd.js"
@@ -116,7 +112,7 @@ export class GdocsIndexPage extends React.Component<GdocsMatchProps> {
     }
 
     @computed
-    get tags(): OwidGdocTag[] {
+    get tags(): Tag[] {
         return this.context?.availableTags || []
     }
 

diff --git a/adminSiteClient/GdocsStore.tsx b/adminSiteClient/GdocsStore.tsx
@@ -4,7 +4,7 @@ import {
     getOwidGdocFromJSON,
     OwidGdocInterface,
     OwidGdocJSON,
-    OwidGdocTag,
+    Tag,
 } from "@ourworldindata/utils"
 import { AdminAppContext } from "./AdminAppContext.js"
 import { Admin } from "./Admin.js"
@@ -18,7 +18,7 @@ import { Admin } from "./Admin.js"
  */
 export class GdocsStore {
     @observable gdocs: OwidGdocInterface[] = []
-    @observable availableTags: OwidGdocTag[] = []
+    @observable availableTags: Tag[] = []
     admin: Admin
 
     constructor(admin: Admin) {
@@ -74,7 +74,7 @@ export class GdocsStore {
     }
 
     @action
-    async updateTags(gdoc: OwidGdocInterface, tags: OwidGdocTag[]) {
+    async updateTags(gdoc: OwidGdocInterface, tags: Tag[]) {
         const json = await this.admin.requestJSON(
             `/api/gdocs/${gdoc.id}/setTags`,
             { tagIds: tags.map((t) => t.id) },

diff --git a/adminSiteClient/PostsIndexPage.tsx b/adminSiteClient/PostsIndexPage.tsx
@@ -5,14 +5,13 @@ import fuzzysort from "fuzzysort"
 import * as lodash from "lodash"
 
 import { highlight as fuzzyHighlight } from "@ourworldindata/grapher"
+import { ChartTagJoin, Tag } from "@ourworldindata/utils"
 import { AdminLayout } from "./AdminLayout.js"
 import { SearchField, FieldsRow, Timeago } from "./Forms.js"
 import { EditableTags } from "./EditableTags.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
-import { WORDPRESS_URL } from "../settings/clientSettings.js"
-import { Tag } from "./TagBadge.js"
+import { ADMIN_BASE_URL, WORDPRESS_URL } from "../settings/clientSettings.js"
 import { match } from "ts-pattern"
-import { Link } from "./Link.js"
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
@@ -28,7 +27,7 @@ interface PostIndexMeta {
     status: string
     authors: string[]
     updatedAtInWordpress: string
-    tags: Tag[]
+    tags: ChartTagJoin[]
     gdocSuccessorId: string | undefined
 }
 
@@ -63,7 +62,7 @@ class PostRow extends React.Component<PostRowProps> {
             : GdocStatus.MISSING
     }
 
-    async saveTags(tags: Tag[]) {
+    async saveTags(tags: ChartTagJoin[]) {
         const { post } = this.props
         const json = await this.context.admin.requestJSON(
             `/api/posts/${post.id}/setTags`,
@@ -75,7 +74,7 @@ class PostRow extends React.Component<PostRowProps> {
         }
     }
 
-    @action.bound onSaveTags(tags: Tag[]) {
+    @action.bound onSaveTags(tags: ChartTagJoin[]) {
         this.saveTags(tags)
     }
 
@@ -134,14 +133,14 @@ class PostRow extends React.Component<PostRowProps> {
             .with(GdocStatus.CONVERTING, () => <span>Converting...</span>)
             .with(GdocStatus.CONVERTED, () => (
                 <>
-                    <Link
-                        to={`gdocs/${post.gdocSuccessorId}/preview`}
+                    <a
+                        href={`${ADMIN_BASE_URL}/admin/gdocs/${post.gdocSuccessorId}/preview`}
                         className="btn btn-primary"
                     >
                         <>
                             <FontAwesomeIcon icon={faEye} /> Preview
                         </>
-                    </Link>
+                    </a>
                     <button
                         onClick={this.onRecreateGdoc}
                         className="btn btn-primary alert-danger"