From 8748cc5c69ef3ac8ce7fc83b2f25ebf6f37dd9ec Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Fri, 8 Dec 2023 19:09:36 +0100
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=89=20show=20slug=20successors=20i?=
 =?UTF-8?q?n=20admin=20posts=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json              |  4 +-
 adminSiteClient/PostsIndexPage.tsx | 68 ++++++++++++++++++++++----
 adminSiteServer/apiRouter.ts       | 77 +++++++++++++++++++-----------
 3 files changed, 112 insertions(+), 37 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8b5108bba0d..05bdc24a80d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,11 +14,11 @@
     "typescript.preferences.useAliasesForRenames": false,
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "typescript.preferences.importModuleSpecifierEnding": "js",
     "javascript.preferences.importModuleSpecifierEnding": "js",
     "[sql]": {
         "editor.defaultFormatter": "inferrinizzard.prettier-sql-vscode"
     }
-}
+}
\ No newline at end of file
diff --git a/adminSiteClient/PostsIndexPage.tsx b/adminSiteClient/PostsIndexPage.tsx
index 1b464c8f666..72c5faecf3f 100644
--- a/adminSiteClient/PostsIndexPage.tsx
+++ b/adminSiteClient/PostsIndexPage.tsx
@@ -8,6 +8,7 @@ import {
     buildSearchWordsFromSearchString,
     filterFunctionForSearchWords,
     SearchWord,
+    uniq,
 } from "@ourworldindata/utils"
 import { AdminLayout } from "./AdminLayout.js"
 import { SearchField, FieldsRow, Timeago } from "./Forms.js"
@@ -23,6 +24,11 @@ import {
     faRecycle,
 } from "@fortawesome/free-solid-svg-icons"
 
+interface GDocSlugSuccessor {
+    id: string
+    published: boolean
+}
+
 interface PostIndexMeta {
     id: number
     title: string
@@ -31,12 +37,15 @@ interface PostIndexMeta {
     authors: string[]
     slug: string
     updatedAtInWordpress: string
-    tags: ChartTagJoin[]
+    tags: ChartTagJoin[] | null
     gdocSuccessorId: string | undefined
+    gdocSuccessorPublished: boolean
+    gdocSlugSuccessors: GDocSlugSuccessor[] | null
 }
 
 enum GdocStatus {
-    "MISSING" = "MISSING",
+    "MISSING_NO_SLUG_SUCCESSOR" = "MISSING_NO_SLUG_SUCCESSOR",
+    "MISSING_WITH_SLUG_SUCCESSOR" = "MISSING_WITH_SLUG_SUCCESSOR",
     "CONVERTING" = "CONVERTING",
     "CONVERTED" = "CONVERTED",
 }
@@ -51,13 +60,17 @@ class PostRow extends React.Component<PostRowProps> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
-    @observable private postGdocStatus: GdocStatus = GdocStatus.MISSING
+    @observable private postGdocStatus: GdocStatus =
+        GdocStatus.MISSING_NO_SLUG_SUCCESSOR
 
     constructor(props: PostRowProps) {
         super(props)
         this.postGdocStatus = props.post.gdocSuccessorId
             ? GdocStatus.CONVERTED
-            : GdocStatus.MISSING
+            : props.post.gdocSlugSuccessors &&
+              props.post.gdocSlugSuccessors.length > 0
+            ? GdocStatus.MISSING_WITH_SLUG_SUCCESSOR
+            : GdocStatus.MISSING_NO_SLUG_SUCCESSOR
     }
 
     async saveTags(tags: ChartTagJoin[]) {
@@ -111,7 +124,11 @@ class PostRow extends React.Component<PostRowProps> {
                 {},
                 "POST"
             )
-            this.postGdocStatus = GdocStatus.MISSING
+            this.postGdocStatus =
+                this.props.post.gdocSlugSuccessors &&
+                this.props.post.gdocSlugSuccessors.length > 0
+                    ? GdocStatus.MISSING_WITH_SLUG_SUCCESSOR
+                    : GdocStatus.MISSING_NO_SLUG_SUCCESSOR
             this.props.post.gdocSuccessorId = undefined
         }
     }
@@ -120,7 +137,7 @@ class PostRow extends React.Component<PostRowProps> {
         const { post, availableTags } = this.props
         const { postGdocStatus } = this
         const gdocElement = match(postGdocStatus)
-            .with(GdocStatus.MISSING, () => (
+            .with(GdocStatus.MISSING_NO_SLUG_SUCCESSOR, () => (
                 <button
                     onClick={async () => await this.onConvertGdoc()}
                     className="btn btn-primary"
@@ -128,6 +145,34 @@ class PostRow extends React.Component<PostRowProps> {
                     Create GDoc
                 </button>
             ))
+            .with(GdocStatus.MISSING_WITH_SLUG_SUCCESSOR, () => (
+                <>
+                    {uniq(post.gdocSlugSuccessors).map((gdocSlugSuccessor) => (
+                        <a
+                            key={gdocSlugSuccessor.id}
+                            href={`${ADMIN_BASE_URL}/admin/gdocs/${gdocSlugSuccessor.id}/preview`}
+                            className="btn btn-primary"
+                        >
+                            <>
+                                <FontAwesomeIcon icon={faEye} /> Preview
+                                {gdocSlugSuccessor.published ? (
+                                    <span className="badge badge-success">
+                                        (published)
+                                    </span>
+                                ) : (
+                                    <></>
+                                )}
+                            </>
+                        </a>
+                    ))}
+                    <button
+                        onClick={async () => await this.onConvertGdoc()}
+                        className="btn btn-primary"
+                    >
+                        Create GDoc
+                    </button>
+                </>
+            ))
             .with(GdocStatus.CONVERTING, () => <span>Converting...</span>)
             .with(GdocStatus.CONVERTED, () => (
                 <>
@@ -137,6 +182,13 @@ class PostRow extends React.Component<PostRowProps> {
                     >
                         <>
                             <FontAwesomeIcon icon={faEye} /> Preview
+                            {post.gdocSuccessorPublished ? (
+                                <span className="badge badge-success">
+                                    (published)
+                                </span>
+                            ) : (
+                                <></>
+                            )}
                         </>
                     </a>
                     <button
@@ -172,7 +224,7 @@ class PostRow extends React.Component<PostRowProps> {
                 <td>{post.slug}</td>
                 <td style={{ minWidth: "380px" }}>
                     <EditableTags
-                        tags={post.tags}
+                        tags={post.tags ?? []}
                         suggestions={availableTags}
                         onSave={this.onSaveTags}
                     />
@@ -223,7 +275,7 @@ export class PostsIndexPage extends React.Component {
 
     @computed get postsToShow(): PostIndexMeta[] {
         const { searchWords, posts } = this
-        if (searchWords.length > 0) {
+        if (posts.length > 0 && searchWords.length > 0) {
             const filterFn = filterFunctionForSearchWords(
                 searchWords,
                 (post: PostIndexMeta) => [
diff --git a/adminSiteServer/apiRouter.ts b/adminSiteServer/apiRouter.ts
index 622b792ad91..eb9e4bf7f68 100644
--- a/adminSiteServer/apiRouter.ts
+++ b/adminSiteServer/apiRouter.ts
@@ -48,6 +48,7 @@ import {
     DimensionProperty,
     TaggableType,
     ChartTagJoin,
+    sortBy,
 } from "@ourworldindata/utils"
 import {
     GrapherInterface,
@@ -2207,8 +2208,8 @@ apiRouter.put("/tags/:tagId", async (req: Request) => {
         if (!gdoc.length) {
             return {
                 success: true,
-                tagUpdateWarning: `The tag's slug has been updated, but there isn't a published Gdoc page with the same slug. 
-                    
+                tagUpdateWarning: `The tag's slug has been updated, but there isn't a published Gdoc page with the same slug.
+
 Are you sure you haven't made a typo?`,
             }
         }
@@ -2284,32 +2285,54 @@ apiRouter.delete("/redirects/:id", async (req: Request, res: Response) => {
 })
 
 apiRouter.get("/posts.json", async (req) => {
-    const rows = await select(
-        "id",
-        "title",
-        "type",
-        "slug",
-        "status",
-        "updated_at_in_wordpress",
-        "gdocSuccessorId"
-    ).from(
-        db
-            .knexInstance()
-            .from(postsTable)
-            .orderBy("updated_at_in_wordpress", "desc")
+    const raw_rows = await db.queryMysql(
+        `-- sql
+        with posts_tags_aggregated as (
+            select post_id, if(count(tags.id) = 0, json_array(), json_arrayagg(json_object("id", tags.id, "name", tags.name))) as tags
+            from post_tags
+            left join tags on tags.id = post_tags.tag_id
+            group by post_id
+        ), post_gdoc_slug_successors as (
+            select posts.id, if (count(gdocSlugSuccessor.id) = 0, json_array(), json_arrayagg(json_object("id", gdocSlugSuccessor.id, "published", gdocSlugSuccessor.published ))) as gdocSlugSuccessors
+            from posts
+            left join posts_gdocs gdocSlugSuccessor on gdocSlugSuccessor.slug = posts.slug
+            group by posts.id
+        )
+        select
+             posts.id as id,
+             posts.title as title,
+             posts.type as type,
+             posts.slug as slug,
+             status,
+             updated_at_in_wordpress,
+             posts.authors, -- authors is a json array of objects with name and order
+             posts_tags_aggregated.tags as tags,
+             gdocSuccessorId,
+             gdocSuccessor.published as isGdocSuccessorPublished,
+             -- posts can either have explict successors via the gdocSuccessorId column
+             -- or implicit successors if a gdoc has been created that uses the same slug
+             -- as a Wp post (the gdoc one wins once it is published)
+             post_gdoc_slug_successors.gdocSlugSuccessors as gdocSlugSuccessors
+         from posts
+         left join post_gdoc_slug_successors on post_gdoc_slug_successors.id = posts.id
+         left join posts_gdocs gdocSuccessor on gdocSuccessor.id = posts.gdocSuccessorId
+         left join posts_tags_aggregated on posts_tags_aggregated.post_id = posts.id
+         order by updated_at_in_wordpress desc`,
+        []
     )
-
-    const tagsByPostId = await getTagsByPostId()
-
-    const authorship = await wpdb.getAuthorship()
-
-    for (const post of rows) {
-        const postAsAny = post as any
-        postAsAny.authors = authorship.get(post.id) || []
-        postAsAny.tags = tagsByPostId.get(post.id) || []
-    }
-
-    return { posts: rows.map((r) => camelCaseProperties(r)) }
+    const rows = raw_rows.map((row: any) => ({
+        ...row,
+        tags: JSON.parse(row.tags),
+        isGdocSuccessorPublished: !!row.isGdocSuccessorPublished,
+        gdocSlugSuccessors: JSON.parse(row.gdocSlugSuccessors),
+        authors: row.authors
+            ? sortBy(JSON.parse(row.authors), "order").map(
+                  (author) => author.author
+              )
+            : [],
+    }))
+
+    return { posts: rows }
 })
 
 apiRouter.post(

From 1634193307c5ba1b284053baeb6fdd88c11b603b Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Mon, 11 Dec 2023 13:46:31 +0100
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=84=20tweak=20styling=20of=20posts?=
 =?UTF-8?q?=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminSiteClient/PostsIndexPage.tsx | 25 ++++++++-----------------
 adminSiteClient/admin.scss         |  6 ++++++
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/adminSiteClient/PostsIndexPage.tsx b/adminSiteClient/PostsIndexPage.tsx
index 72c5faecf3f..723d1d728a1 100644
--- a/adminSiteClient/PostsIndexPage.tsx
+++ b/adminSiteClient/PostsIndexPage.tsx
@@ -140,7 +140,7 @@ class PostRow extends React.Component<PostRowProps> {
             .with(GdocStatus.MISSING_NO_SLUG_SUCCESSOR, () => (
                 <button
                     onClick={async () => await this.onConvertGdoc()}
-                    className="btn btn-primary"
+                    className="btn btn-primary btn-sm"
                 >
                     Create GDoc
                 </button>
@@ -151,26 +151,19 @@ class PostRow extends React.Component<PostRowProps> {
                         <a
                             key={gdocSlugSuccessor.id}
                             href={`${ADMIN_BASE_URL}/admin/gdocs/${gdocSlugSuccessor.id}/preview`}
-                            className="btn btn-primary"
+                            className="btn btn-primary btn-sm"
+                            title="Preview GDoc with same slug"
                         >
                             <>
                                 <FontAwesomeIcon icon={faEye} /> Preview
                                 {gdocSlugSuccessor.published ? (
-                                    <span className="badge badge-success">
-                                        (published)
-                                    </span>
+                                    <span title="Published">✅</span>
                                 ) : (
                                     <></>
                                 )}
                             </>
                         </a>
                     ))}
-                    <button
-                        onClick={async () => await this.onConvertGdoc()}
-                        className="btn btn-primary"
-                    >
-                        Create GDoc
-                    </button>
                 </>
             ))
             .with(GdocStatus.CONVERTING, () => <span>Converting...</span>)
@@ -178,14 +171,12 @@ class PostRow extends React.Component<PostRowProps> {
                 <>
                     <a
                         href={`${ADMIN_BASE_URL}/admin/gdocs/${post.gdocSuccessorId}/preview`}
-                        className="btn btn-primary"
+                        className="btn btn-primary btn-sm button-with-margin"
                     >
                         <>
                             <FontAwesomeIcon icon={faEye} /> Preview
                             {post.gdocSuccessorPublished ? (
-                                <span className="badge badge-success">
-                                    (published)
-                                </span>
+                                <span title="Published">✅</span>
                             ) : (
                                 <></>
                             )}
@@ -193,7 +184,7 @@ class PostRow extends React.Component<PostRowProps> {
                     </a>
                     <button
                         onClick={this.onRecreateGdoc}
-                        className="btn btn-primary alert-danger"
+                        className="btn btn-primary alert-danger btn-sm button-with-margin"
                     >
                         <FontAwesomeIcon
                             icon={faRecycle}
@@ -204,7 +195,7 @@ class PostRow extends React.Component<PostRowProps> {
                     </button>
                     <button
                         onClick={this.onUnlinkGdoc}
-                        className="btn btn-primary alert-danger"
+                        className="btn btn-primary alert-danger btn-sm button-with-margin"
                     >
                         <FontAwesomeIcon
                             icon={faChainBroken}
diff --git a/adminSiteClient/admin.scss b/adminSiteClient/admin.scss
index bb7d613da1c..84dc218ae3b 100644
--- a/adminSiteClient/admin.scss
+++ b/adminSiteClient/admin.scss
@@ -1341,3 +1341,9 @@ main:not(.ChartEditorPage):not(.GdocsEditPage) {
         z-index: 0;
     }
 }
+
+.PostsIndexPage {
+    .button-with-margin {
+        margin: 1px;
+    }
+}

From 5272548b628d3a47f129f5d7188db5741d0f394f Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Wed, 20 Dec 2023 23:47:50 +0100
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=9D=20fix=20eslint=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminSiteServer/apiRouter.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/adminSiteServer/apiRouter.ts b/adminSiteServer/apiRouter.ts
index eb9e4bf7f68..4c00eaa25c6 100644
--- a/adminSiteServer/apiRouter.ts
+++ b/adminSiteServer/apiRouter.ts
@@ -80,7 +80,6 @@ import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.
 import {
     postsTable,
     setTagsForPost,
-    select,
     getTagsByPostId,
 } from "../db/model/Post.js"
 import {