🎉 automatic breadcrumbs from the tag graph

adminSiteClient/GdocsBreadcrumbsInput.tsx → adminSiteClient/GdocsManualBreadcrumbsInput.tsx

@@ -70,7 +70,7 @@ export const BreadcrumbLine = ({
     )
 }
 
-export const GdocsBreadcrumbsInput = ({
+export const GdocsManualBreadcrumbsInput = ({
     gdoc,
     setCurrentGdoc,
     errors,
@@ -85,56 +85,63 @@ export const GdocsBreadcrumbsInput = ({
             breadcrumbs[breadcrumbs.length - 1].href = undefined
         } else breadcrumbs = undefined
 
-        setCurrentGdoc({ ...gdoc, breadcrumbs: breadcrumbs ?? null })
+        setCurrentGdoc({ ...gdoc, manualBreadcrumbs: breadcrumbs ?? null })
     }
 
     const setItemAtIndex = (item: BreadcrumbItem, i: number) => {
-        const breadcrumbs = [...(gdoc.breadcrumbs ?? [])]
+        const breadcrumbs = [...(gdoc.manualBreadcrumbs ?? [])]
         breadcrumbs[i] = item
         setBreadcrumbs(breadcrumbs)
     }
 
     const removeItemAtIndex = (i: number) => {
-        const breadcrumbs = [...(gdoc.breadcrumbs ?? [])]
+        const breadcrumbs = [...(gdoc.manualBreadcrumbs ?? [])]
         breadcrumbs.splice(i, 1)
         setBreadcrumbs(breadcrumbs)
     }
 
     return (
         <div className="form-group">
-            <div className="d-flex justify-content-between">
-                Breadcrumbs
-                <Button
-                    type="dashed"
-                    onClick={() =>
-                        setBreadcrumbs([
-                            { label: "" },
-                            ...(gdoc.breadcrumbs ?? []),
-                        ])
-                    }
-                >
-                    <FontAwesomeIcon icon={faPlus} className="mr-1" /> Add
-                    breadcrumb
-                </Button>
-            </div>
-            {gdoc.breadcrumbs?.map((item, i) => (
+            <div className="d-flex justify-content-between">Breadcrumbs</div>
+            {!!gdoc.breadcrumbs?.length && !gdoc.manualBreadcrumbs?.length && (
+                <p>
+                    The breadcrumbs for this article will be automatically
+                    generated, based on this article's tags and the tag graph.
+                    If you want to override these breadcrumbs, you can do so
+                    here.
+                </p>
+            )}
+            <Button
+                type="dashed"
+                onClick={() =>
+                    setBreadcrumbs([
+                        { label: "" },
+                        ...(gdoc.manualBreadcrumbs ?? []),
+                    ])
+                }
+            >
+                <FontAwesomeIcon icon={faPlus} className="mr-1" /> Add
+                breadcrumb
+            </Button>
+            {gdoc.manualBreadcrumbs?.map((item, i) => (
                 <BreadcrumbLine
                     item={item}
                     setItem={(item) => setItemAtIndex(item, i)}
                     removeItem={() => removeItemAtIndex(i)}
                     key={i}
                     labelError={getPropertyMostCriticalError(
-                        `breadcrumbs[${i}].label`,
+                        `manualBreadcrumbs[${i}].label`,
                         errors
                     )}
                     hrefError={getPropertyMostCriticalError(
-                        `breadcrumbs[${i}].href`,
+                        `manualBreadcrumbs[${i}].href`,
                         errors
                     )}
-                    isLastBreadcrumbItem={i === gdoc.breadcrumbs!.length - 1}
+                    isLastBreadcrumbItem={
+                        i === gdoc.manualBreadcrumbs!.length - 1
+                    }
                 />
             ))}
-            {!gdoc.breadcrumbs?.length && <i>No breadcrumbs</i>}
         </div>
     )
 }

adminSiteClient/GdocsSettingsForms.tsx

@@ -15,7 +15,7 @@ import {
 import { GdocsPublishedAt } from "./GdocsDateline.js"
 import { GdocsPublicationContext } from "./GdocsPublicationContext.js"
 import { Alert } from "antd"
-import { GdocsBreadcrumbsInput } from "./GdocsBreadcrumbsInput.js"
+import { GdocsManualBreadcrumbsInput } from "./GdocsManualBreadcrumbsInput.js"
 
 const GdocCommonErrors = ({
     errors,
@@ -155,7 +155,7 @@ export const GdocPostSettings = ({
                     errors={errors}
                     description="An optional property to override the excerpt of this post in our atom feed, which is used for the newsletter"
                 />
-                <GdocsBreadcrumbsInput
+                <GdocsManualBreadcrumbsInput
                     gdoc={gdoc}
                     errors={errors}
                     setCurrentGdoc={setCurrentGdoc}

adminSiteClient/gdocsDeploy.ts

@@ -46,7 +46,8 @@ export const checkIsLightningUpdate = (
         Exclude<keyof OwidGdocBaseInterface, "content">,
         boolean
     > = {
-        breadcrumbs: true,
+        breadcrumbs: true, // automatically generated, not actually possible to change via the admin preview
+        manualBreadcrumbs: true,
         errors: true,
         linkedAuthors: false,
         linkedCharts: true,

adminSiteClient/gdocsValidation.ts

@@ -140,12 +140,12 @@ function validateExcerpt(
     }
 }
 
-function validateBreadcrumbs(
+function validateManualBreadcrumbs(
     gdoc: OwidGdocPostInterface,
     errors: OwidGdocErrorMessage[]
 ) {
-    if (gdoc.breadcrumbs) {
-        for (const [i, breadcrumb] of gdoc.breadcrumbs.entries()) {
+    if (gdoc.manualBreadcrumbs) {
+        for (const [i, breadcrumb] of gdoc.manualBreadcrumbs.entries()) {
             if (!breadcrumb.label) {
                 errors.push({
                     property: `breadcrumbs[${i}].label`,
@@ -155,7 +155,7 @@ function validateBreadcrumbs(
             }
 
             // Last item can be missing a href
-            if (!breadcrumb.href && i !== gdoc.breadcrumbs.length - 1) {
+            if (!breadcrumb.href && i !== gdoc.manualBreadcrumbs.length - 1) {
                 errors.push({
                     property: `breadcrumbs[${i}].href`,
                     type: OwidGdocErrorMessageType.Error,
@@ -292,7 +292,7 @@ export const getErrors = (gdoc: OwidGdoc): OwidGdocErrorMessage[] => {
     if (checkIsGdocPost(gdoc)) {
         validateRefs(gdoc, errors)
         validateExcerpt(gdoc, errors)
-        validateBreadcrumbs(gdoc, errors)
+        validateManualBreadcrumbs(gdoc, errors)
         validateAtomFields(gdoc, errors)
     } else if (checkIsDataInsight(gdoc)) {
         validateApprovedBy(gdoc, errors)