Merge pull request #3035 from owid/data-insights-feature-branch

🎉 Data Insights
owid · Dec 28, 2023 · 8334052 · 8334052
2 parents f4ab296 + 33c61e8
commit 8334052
Show file tree

Hide file tree

Showing 96 changed files with 2,730 additions and 1,130 deletions.
diff --git a/adminSiteClient/GdocsBreadcrumbsInput.tsx b/adminSiteClient/GdocsBreadcrumbsInput.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
     BreadcrumbItem,
     OwidGdocErrorMessage,
-    OwidGdocInterface,
+    OwidGdocPostInterface,
 } from "@ourworldindata/utils"
 import { Button, Col, Input, Row } from "antd"
 import React from "react"
@@ -76,8 +76,8 @@ export const GdocsBreadcrumbsInput = ({
     setCurrentGdoc,
     errors,
 }: {
-    gdoc: OwidGdocInterface
-    setCurrentGdoc: (gdoc: OwidGdocInterface) => void
+    gdoc: OwidGdocPostInterface
+    setCurrentGdoc: (gdoc: OwidGdocPostInterface) => void
     errors?: OwidGdocErrorMessage[]
 }) => {
     const setBreadcrumbs = (breadcrumbs: BreadcrumbItem[] | undefined) => {

diff --git a/adminSiteClient/GdocsDateline.tsx b/adminSiteClient/GdocsDateline.tsx
@@ -1,23 +1,18 @@
-import { Col, Row } from "antd"
+import { Col } from "antd"
 import { Dayjs } from "dayjs"
-import {
-    dayjs,
-    OwidGdocInterface,
-    OwidGdocErrorMessage,
-} from "@ourworldindata/utils"
+import { dayjs, OwidGdocErrorMessage, OwidGdoc } from "@ourworldindata/utils"
 import React from "react"
 import DatePicker from "./DatePicker.js"
-import { GdocsSettingsContentField } from "./GdocsSettingsContentField.js"
 import { getPropertyMostCriticalError } from "./gdocsValidation.js"
 import { GdocsErrorHelp } from "./GdocsErrorHelp.js"
 
-export const GdocsDateline = ({
+export const GdocsPublishedAt = <T extends OwidGdoc>({
     gdoc,
     setCurrentGdoc,
     errors,
 }: {
-    gdoc: OwidGdocInterface
-    setCurrentGdoc: (gdoc: OwidGdocInterface) => void
+    gdoc: T
+    setCurrentGdoc: (gdoc: T) => void
     errors?: OwidGdocErrorMessage[]
 }) => {
     const { publishedAt } = gdoc
@@ -32,38 +27,27 @@ export const GdocsDateline = ({
     const publishedAtError = getPropertyMostCriticalError("publishedAt", errors)
 
     return (
-        <>
-            <Row gutter={24}>
-                <Col span={16}>
-                    <GdocsSettingsContentField
-                        property="dateline"
-                        gdoc={gdoc}
-                        errors={errors}
-                    />
-                </Col>
-                <Col span={8}>
-                    <label htmlFor="publishedAt">Publication date</label>
-                    <DatePicker
-                        onChange={onChangePublishedAt}
-                        value={publishedAt ? dayjs(publishedAt) : undefined}
-                        format="ddd, MMM D, YYYY"
-                        id="publishedAt"
-                        status={publishedAtError?.type}
-                        // 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
-                        // interpreted by MailChimp's RSS-to-Email as a new
-                        // article.
-                        showToday={false}
-                    />
-                    <GdocsErrorHelp
-                        error={publishedAtError}
-                        help={
-                            "Used in default dateline. Visible in the citation block. Also used to sort articles in lists."
-                        }
-                    />
-                </Col>
-            </Row>
-        </>
+        <Col span={8}>
+            <label htmlFor="publishedAt">Publication date</label>
+            <DatePicker
+                onChange={onChangePublishedAt}
+                value={publishedAt ? dayjs(publishedAt) : undefined}
+                format="ddd, MMM D, YYYY"
+                id="publishedAt"
+                status={publishedAtError?.type}
+                // 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
+                // interpreted by MailChimp's RSS-to-Email as a new
+                // article.
+                showToday={false}
+            />
+            <GdocsErrorHelp
+                error={publishedAtError}
+                help={
+                    "Used in default dateline. Visible in the citation block. Also used to sort articles in lists."
+                }
+            />
+        </Col>
     )
 }
diff --git a/adminSiteClient/GdocsDiff.tsx b/adminSiteClient/GdocsDiff.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer"
 import { stringify } from "safe-stable-stringify"
-import { omit, OwidGdocInterface } from "@ourworldindata/utils"
+import { omit, OwidGdoc } from "@ourworldindata/utils"
 
 // Non-deterministic values which shouldn't be displayed in the diff viewer
 // Errors are already shown in the settings drawer, so we don't show those either
@@ -20,8 +20,8 @@ export const GdocsDiff = ({
     originalGdoc,
     currentGdoc,
 }: {
-    originalGdoc: OwidGdocInterface | undefined
-    currentGdoc: OwidGdocInterface
+    originalGdoc: OwidGdoc | undefined
+    currentGdoc: OwidGdoc
 }) => (
     <ReactDiffViewer
         oldValue={stringify(

diff --git a/adminSiteClient/GdocsIndexPage.tsx b/adminSiteClient/GdocsIndexPage.tsx
@@ -9,16 +9,18 @@ import {
     faNewspaper,
     faPuzzlePiece,
     faQuestion,
+    faThList,
 } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     Tag,
-    OwidGdocInterface,
     OwidGdocType,
     SearchWord,
     buildSearchWordsFromSearchString,
     filterFunctionForSearchWords,
     spansToUnformattedPlainText,
+    OwidGdoc,
+    checkIsGdocPost,
 } from "@ourworldindata/utils"
 import { Route, RouteComponentProps } from "react-router-dom"
 import { Link } from "./Link.js"
@@ -34,6 +36,7 @@ const iconGdocTypeMap = {
     [OwidGdocType.Article]: <FontAwesomeIcon icon={faNewspaper} />,
     [OwidGdocType.TopicPage]: <FontAwesomeIcon icon={faLightbulb} />,
     [OwidGdocType.LinearTopicPage]: <FontAwesomeIcon icon={faLightbulb} />,
+    [OwidGdocType.DataInsight]: <FontAwesomeIcon icon={faThList} />,
 }
 
 @observer
@@ -51,6 +54,7 @@ class GdocsIndexPageSearch extends React.Component<{
             OwidGdocType.Article,
             OwidGdocType.TopicPage,
             OwidGdocType.LinearTopicPage,
+            OwidGdocType.DataInsight,
         ]
         return (
             <div className="d-flex flex-grow-1 flex-wrap">
@@ -108,6 +112,7 @@ export class GdocsIndexPage extends React.Component<GdocsMatchProps> {
         [OwidGdocType.Article]: false,
         [OwidGdocType.TopicPage]: false,
         [OwidGdocType.LinearTopicPage]: false,
+        [OwidGdocType.DataInsight]: false,
     }
 
     @observable search = { value: "" }
@@ -127,7 +132,7 @@ export class GdocsIndexPage extends React.Component<GdocsMatchProps> {
         return this.context?.availableTags || []
     }
 
-    @computed get allGdocsToShow(): OwidGdocInterface[] {
+    @computed get allGdocsToShow(): OwidGdoc[] {
         const { searchWords, context } = this
         if (!context) return []
 
@@ -147,21 +152,31 @@ export class GdocsIndexPage extends React.Component<GdocsMatchProps> {
         if (searchWords.length > 0) {
             const filterFn = filterFunctionForSearchWords(
                 searchWords,
-                (gdoc: OwidGdocInterface) => [
-                    gdoc.content.title,
-                    gdoc.content.subtitle,
-                    gdoc.content.summary
-                        ? spansToUnformattedPlainText(
-                              gdoc.content.summary.flatMap(
-                                  (block) => block.value
-                              )
-                          )
-                        : undefined,
-                    gdoc.slug,
-                    gdoc.id,
-                    gdoc.content.authors?.join(" "),
-                    gdoc.tags?.map(({ name }) => name).join(" "),
-                ]
+                (gdoc: OwidGdoc) => {
+                    const properties = [
+                        gdoc.content.title,
+                        gdoc.slug,
+                        gdoc.content.authors?.join(" "),
+                        gdoc.tags?.map(({ name }) => name).join(" "),
+                        gdoc.id,
+                    ]
+
+                    if (checkIsGdocPost(gdoc)) {
+                        properties.push(
+                            ...[
+                                gdoc.content.subtitle,
+                                gdoc.content.summary
+                                    ? spansToUnformattedPlainText(
+                                          gdoc.content.summary.flatMap(
+                                              (block) => block.value
+                                          )
+                                      )
+                                    : undefined,
+                            ]
+                        )
+                    }
+                    return properties
+                }
             )
             return filteredByType.filter(filterFn)
         } else {

diff --git a/adminSiteClient/GdocsMoreMenu.tsx b/adminSiteClient/GdocsMoreMenu.tsx
@@ -7,7 +7,7 @@ import {
     faBug,
 } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { OwidGdocInterface } from "@ourworldindata/utils"
+import { OwidGdoc } from "@ourworldindata/utils"
 
 enum GdocsMoreMenuAction {
     Debug = "debug",
@@ -21,7 +21,7 @@ export const GdocsMoreMenu = ({
     onUnpublish,
     onDelete,
 }: {
-    gdoc: OwidGdocInterface
+    gdoc: OwidGdoc
     onDebug: VoidFunction
     onUnpublish: VoidFunction
     onDelete: VoidFunction

diff --git a/adminSiteClient/GdocsPreviewPage.tsx b/adminSiteClient/GdocsPreviewPage.tsx
@@ -7,21 +7,23 @@ import React, {
 } from "react"
 import { AdminLayout } from "./AdminLayout.js"
 import { GdocsMatchProps } from "./GdocsIndexPage.js"
-import { GdocsSettingsForm } from "./GdocsSettingsForm.js"
+import { GdocPostSettings, GdocInsightSettings } from "./GdocsSettingsForms.js"
 import { AdminAppContext } from "./AdminAppContext.js"
 import {
     checkIsPlainObjectWithGuard,
     GdocsContentSource,
     getOwidGdocFromJSON,
-    OwidGdocInterface,
     OwidGdocJSON,
     OwidGdocErrorMessage,
     OwidGdocErrorMessageType,
     slugify,
+    OwidGdocType,
+    OwidGdoc,
 } 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 { match as tsMatch, P } from "ts-pattern"
 
 import { getErrors } from "./gdocsValidation.js"
 import { GdocsSaveButtons } from "./GdocsSaveButtons.js"
@@ -37,15 +39,13 @@ import { GdocsDiff } from "./GdocsDiff.js"
 export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
     const { id } = match.params
     const [gdoc, setGdoc] = useState<{
-        original?: OwidGdocInterface
-        current?: OwidGdocInterface
+        original?: OwidGdoc
+        current?: OwidGdoc
     }>({ original: undefined, current: undefined })
     const originalGdoc = gdoc.original
     const currentGdoc = gdoc.current
     const setCurrentGdoc = (
-        updater: (
-            current: OwidGdocInterface | undefined
-        ) => OwidGdocInterface | undefined
+        updater: (current: OwidGdoc | undefined) => OwidGdoc | undefined
     ) => {
         setGdoc(({ original, current }) => ({
             original,
@@ -92,6 +92,9 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
                 // if images need to be uploaded from the original
                 const original = await fetchGdoc(GdocsContentSource.Internal)
                 const current = await fetchGdoc(GdocsContentSource.Gdocs)
+                if (!current.slug && current.content.title) {
+                    current.slug = slugify(current.content.title)
+                }
                 admin.loadingIndicatorSetting = "off"
                 setGdoc({ original, current })
             } catch (error) {
@@ -273,13 +276,52 @@ export const GdocsPreviewPage = ({ match, history }: GdocsMatchProps) => {
                         </Button>
                     }
                 >
-                    <GdocsSettingsForm
-                        gdoc={currentGdoc}
-                        setCurrentGdoc={(updatedGdoc) =>
-                            setCurrentGdoc(() => updatedGdoc)
-                        }
-                        errors={errors}
-                    />
+                    {tsMatch(currentGdoc)
+                        .with(
+                            {
+                                content: {
+                                    type: P.union(
+                                        OwidGdocType.Article,
+                                        OwidGdocType.TopicPage,
+                                        OwidGdocType.LinearTopicPage,
+                                        OwidGdocType.Fragment
+                                    ),
+                                },
+                            },
+                            (gdoc) => (
+                                <GdocPostSettings
+                                    gdoc={gdoc}
+                                    setCurrentGdoc={(updatedGdoc) =>
+                                        setCurrentGdoc(() => updatedGdoc)
+                                    }
+                                    errors={errors}
+                                />
+                            )
+                        )
+                        .with(
+                            {
+                                content: {
+                                    type: OwidGdocType.DataInsight,
+                                },
+                            },
+                            (gdoc) => (
+                                <GdocInsightSettings
+                                    gdoc={gdoc}
+                                    setCurrentGdoc={(updatedGdoc) =>
+                                        setCurrentGdoc(() => updatedGdoc)
+                                    }
+                                    errors={errors}
+                                />
+                            )
+                        )
+                        .with(P.any, () => (
+                            <div>
+                                Unknown gdoc type. Add a <strong>type</strong>{" "}
+                                to the front-matter of this gdoc and reload this
+                                page.
+                            </div>
+                        ))
+                        .run()}
                 </Drawer>
                 <Drawer
                     placement="bottom"

diff --git a/adminSiteClient/GdocsPublicationContext.tsx b/adminSiteClient/GdocsPublicationContext.tsx
@@ -1,7 +1,7 @@
 import { Col, Radio, RadioChangeEvent, Row } from "antd"
 import {
     OwidGdocPublicationContext,
-    OwidGdocInterface,
+    OwidGdocPostInterface,
 } from "@ourworldindata/utils"
 import React from "react"
 import { GdocsErrorHelp } from "./GdocsErrorHelp.js"
@@ -10,8 +10,8 @@ export const GdocsPublicationContext = ({
     gdoc,
     setCurrentGdoc,
 }: {
-    gdoc: OwidGdocInterface
-    setCurrentGdoc: (gdoc: OwidGdocInterface) => void
+    gdoc: OwidGdocPostInterface
+    setCurrentGdoc: (gdoc: OwidGdocPostInterface) => void
 }) => {
     const { publicationContext } = gdoc