Add time to publishedAt date picker (#3729)

adminSiteClient/GdocsDateline.tsx

@@ -2,6 +2,7 @@ import { Col, DatePicker } from "antd"
 import { Dayjs } from "dayjs"
 import { dayjs, OwidGdocErrorMessage, OwidGdoc } from "@ourworldindata/utils"
 import React from "react"
+import { PUBLISHED_AT_FORMAT } from "../settings/clientSettings"
 import { getPropertyMostCriticalError } from "./gdocsValidation.js"
 import { GdocsErrorHelp } from "./GdocsErrorHelp.js"
 
@@ -31,9 +32,10 @@ export const GdocsPublishedAt = <T extends OwidGdoc>({
             <DatePicker
                 onChange={onChangePublishedAt}
                 value={publishedAt ? dayjs(publishedAt) : undefined}
-                format="ddd, MMM D, YYYY"
+                format={PUBLISHED_AT_FORMAT}
                 id="publishedAt"
                 status={publishedAtError?.type}
+                showTime
                 // The "Today" button has been disabled because it sets
                 // the time to the current time. This time change makes
                 // it all the way to the atom feed, which is then

adminSiteClient/GdocsPreviewPage.tsx

@@ -16,6 +16,7 @@ import {
 import { AdminAppContext } from "./AdminAppContext.js"
 import {
     checkIsPlainObjectWithGuard,
+    dayjs,
     GdocsContentSource,
     getOwidGdocFromJSON,
     OwidGdocJSON,
@@ -24,10 +25,15 @@ import {
     slugify,
     OwidGdocType,
     OwidGdoc,
+    Tippy,
 } from "@ourworldindata/utils"
 import { Button, Col, Drawer, Row, Space, Tag, Typography } from "antd"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faGear, faAngleLeft } from "@fortawesome/free-solid-svg-icons"
+import {
+    faGear,
+    faAngleLeft,
+    faQuestionCircle,
+} from "@fortawesome/free-solid-svg-icons"
 import { match as tsMatch, P } from "ts-pattern"
 
 import { getErrors } from "./gdocsValidation.js"
@@ -40,7 +46,10 @@ import { GdocsEditLink } from "./GdocsEditLink.js"
 import { openSuccessNotification } from "./gdocsNotifications.js"
 import { GdocsDiffButton } from "./GdocsDiffButton.js"
 import { GdocsDiff } from "./GdocsDiff.js"
-import { BAKED_BASE_URL } from "../settings/clientSettings.js"
+import {
+    BAKED_BASE_URL,
+    PUBLISHED_AT_FORMAT,
+} from "../settings/clientSettings.js"
 
 export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
     const { id } = match.params
@@ -229,11 +238,26 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
                             {currentGdoc.published && (
                                 <>
                                     [
-                                    <a
-                                        href={`${BAKED_BASE_URL}/${currentGdoc.slug}`}
-                                    >
-                                        View live
-                                    </a>
+                                    {currentGdoc.publishedAt &&
+                                    currentGdoc.publishedAt <= new Date() ? (
+                                        <>
+                                            <a
+                                                href={`${BAKED_BASE_URL}/${currentGdoc.slug}`}
+                                            >
+                                                View live
+                                            </a>
+                                            <Tippy
+                                                content="There might be a slight delay before content scheduled into the future becomes live."
+                                                placement="bottom"
+                                            >
+                                                <FontAwesomeIcon
+                                                    icon={faQuestionCircle}
+                                                />
+                                            </Tippy>
+                                        </>
+                                    ) : (
+                                        `Scheduled for ${dayjs(currentGdoc.publishedAt).format(PUBLISHED_AT_FORMAT)}`
+                                    )}
                                     ]
                                 </>
                             )}

baker/GrapherBaker.tsx

@@ -60,7 +60,7 @@ import { getSlugForTopicTag, getTagToSlugMap } from "./GrapherBakingUtils.js"
 import { knexRaw } from "../db/db.js"
 import { getRelatedChartsForVariable } from "../db/model/Chart.js"
 import pMap from "p-map"
-import { getGdocBaseObjectBySlug } from "../db/model/Gdoc/GdocFactory.js"
+import { getPublishedGdocBaseObjectBySlug } from "../db/model/Gdoc/GdocFactory.js"
 
 const renderDatapageIfApplicable = async (
     grapher: GrapherInterface,
@@ -247,7 +247,7 @@ export async function renderDataPageV2(
         }
         let gdoc: OwidGdocBaseInterface | undefined = undefined
         if (slug) {
-            gdoc = await getGdocBaseObjectBySlug(knex, slug, true)
+            gdoc = await getPublishedGdocBaseObjectBySlug(knex, slug, true)
         }
         if (gdoc) {
             const citation = getShortPageCitation(

db/db.ts

@@ -256,7 +256,7 @@ export const getPublishedDataInsights = (
         FROM posts_gdocs
         WHERE type = '${OwidGdocType.DataInsight}'
             AND published = TRUE
-            AND publishedAt < NOW()
+            AND publishedAt <= NOW()
         ORDER BY publishedAt DESC
         LIMIT ?`,
         [limit]
@@ -279,7 +279,7 @@ export const getPublishedDataInsightCount = (
         FROM posts_gdocs
         WHERE type = '${OwidGdocType.DataInsight}'
             AND published = TRUE
-            AND publishedAt < NOW()`
+            AND publishedAt <= NOW()`
     ).then((res) => res?.count ?? 0)
 }
 
@@ -416,7 +416,7 @@ export const getPublishedGdocPostsWithTags = async (
     FROM
         posts_gdocs g
     LEFT JOIN posts_gdocs_x_tags gxt ON
-        g.id = gxt.gdocId 
+        g.id = gxt.gdocId
     LEFT JOIN tags t ON
         gxt.tagId = t.id
     WHERE
@@ -595,9 +595,9 @@ export function getMinimalTagsWithIsTopic(
     return knexRaw<MinimalTagWithIsTopic>(
         knex,
         `-- sql
-        SELECT t.id, 
-        t.name, 
-        t.slug, 
+        SELECT t.id,
+        t.name,
+        t.slug,
         t.slug IS NOT NULL AND MAX(IF(pg.type IN (:types), TRUE, FALSE)) AS isTopic
         FROM tags t
         LEFT JOIN posts_gdocs_x_tags gt ON t.id = gt.tagId

db/model/Gdoc/GdocFactory.ts

@@ -226,7 +226,7 @@ export async function getAllMinimalGdocBaseObjects(
     })
 }
 
-export async function getGdocBaseObjectBySlug(
+export async function getPublishedGdocBaseObjectBySlug(
     knex: KnexReadonlyTransaction,
     slug: string,
     fetchLinkedTags: boolean
@@ -237,7 +237,8 @@ export async function getGdocBaseObjectBySlug(
             SELECT *
             FROM posts_gdocs
             WHERE slug = ?
-            AND published = 1`,
+            AND published = 1
+            AND publishedAt <= NOW()`,
         [slug]
     )
     if (!row) return undefined
@@ -266,7 +267,7 @@ export async function getAndLoadGdocBySlug(
     knex: KnexReadWriteTransaction,
     slug: string
 ): Promise<GdocPost | GdocDataInsight | GdocHomepage | GdocAuthor> {
-    const base = await getGdocBaseObjectBySlug(knex, slug, true)
+    const base = await getPublishedGdocBaseObjectBySlug(knex, slug, true)
     if (!base) {
         throw new Error(
             `No published Google Doc with slug "${slug}" found in the database`

settings/clientSettings.ts

@@ -88,3 +88,5 @@ export const ETL_API_URL: string =
 
 export const GDOCS_DETAILS_ON_DEMAND_ID: string =
     process.env.GDOCS_DETAILS_ON_DEMAND_ID ?? ""
+
+export const PUBLISHED_AT_FORMAT = "ddd, MMM D, YYYY HH:mm"