Merge big open working PRs

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-ARG VARIANT=18
+ARG VARIANT=22
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:dev-${VARIANT}
 
 COPY .tmux.conf /home/node/.tmux.conf

.github/actions/setup-node-yarn-deps/action.yml

@@ -3,6 +3,11 @@ description: Runs all the setup steps required to have the proper Node version a
 runs:
     using: composite
     steps:
+        # Corepack must be enabled _before_ running setup-node, otherwise the caching setup will error
+        - name: Enable corepack
+          run: corepack enable
+          shell: bash
+
         - name: Use Node.js (.nvmrc)
           uses: actions/setup-node@v4
           with:

.nvmrc

@@ -1 +1 @@
-18.16.0
+22.12.0

.yarnrc.yml

@@ -7,5 +7,3 @@ logFilters:
       level: discard
 
 nodeLinker: node-modules
-
-yarnPath: .yarn/releases/yarn-4.1.1.cjs

adminShared/patchHelper.ts

@@ -71,7 +71,10 @@ export function setValueRecursive(
             let newObject: any = {}
             if (json !== undefined && checkIsPlainObjectWithGuard(json))
                 newObject = { ...json }
-            const currentValue = newObject.hasOwnProperty(currentPart)
+            const currentValue = Object.prototype.hasOwnProperty.call(
+                newObject,
+                currentPart
+            )
                 ? newObject[currentPart]
                 : undefined
             const updatedValue = setValueRecursive(

adminShared/schemaProcessing.ts

@@ -128,9 +128,9 @@ function extractSchemaRecursive(
         // then do not emit anything directly and recurse over the
         // described properties
         if (
-            schema.hasOwnProperty("type") &&
+            Object.prototype.hasOwnProperty.call(schema, "type") &&
             schema.type === "object" &&
-            schema.hasOwnProperty("properties") &&
+            Object.prototype.hasOwnProperty.call(schema, "properties") &&
             checkIsPlainObjectWithGuard(schema.properties)
         ) {
             // Color scales are complex objects that are treated as opaque objects with a special
@@ -166,15 +166,15 @@ function extractSchemaRecursive(
             // paternProperties is ".*" and the type of those
             // is string (interpreted as a color)
             // We yield something like this as a single entry
-            schema.hasOwnProperty("type") &&
+            Object.prototype.hasOwnProperty.call(schema, "type") &&
             schema.type === "object" &&
-            schema.hasOwnProperty("patternProperties") &&
+            Object.prototype.hasOwnProperty.call(schema, "patternProperties") &&
             Object.values(
                 schema.patternProperties as Record<string, any>
             ).every(
                 (item: any) =>
                     checkIsPlainObjectWithGuard(item) &&
-                    item.hasOwnProperty("type") &&
+                    Object.prototype.hasOwnProperty.call(item, "type") &&
                     isPlainTypeString((item as any).type)
             )
         ) {
@@ -234,7 +234,7 @@ function extractSchemaRecursive(
             // a primitive type. If so we collect all the types
             // and yield a single FieldDefinition with the merged
             // type
-            schema.hasOwnProperty("oneOf") &&
+            Object.prototype.hasOwnProperty.call(schema, "oneOf") &&
             isArray(schema.oneOf) &&
             schema.oneOf.map((item) => item.type).every(isPlainTypeStringOrNull)
         ) {
@@ -264,13 +264,13 @@ function recursiveDereference(
         schema !== undefined &&
         checkIsPlainObjectWithGuard(schema)
     ) {
-        if (schema.hasOwnProperty("$ref")) {
+        if (Object.prototype.hasOwnProperty.call(schema, "$ref")) {
             const ref = schema["$ref"] as string
             const localPrefix = "#/$defs/"
             if (!ref.startsWith(localPrefix))
                 throw "Only local refs are supported at the moment!"
             const refName = ref.substring(localPrefix.length)
-            if (!defs.hasOwnProperty(refName)) {
+            if (!Object.prototype.hasOwnProperty.call(defs, refName)) {
                 console.error("Reference not found", refName)
                 return schema
             } else return defs[refName] // Note: we are not using recursive dereferencing, i.e. if there are refs in the $defs section we don't resolve them here
@@ -281,7 +281,7 @@ function recursiveDereference(
 }
 
 function dereference(schema: Record<string, unknown>): any {
-    if (!schema.hasOwnProperty("$defs")) return
+    if (!Object.prototype.hasOwnProperty.call(schema, "$defs")) return
     const defs = schema["$defs"] as Record<string, unknown>
 
     const dereferenced = recursiveDereference(schema, defs)

adminSiteClient/Admin.tsx

@@ -162,7 +162,6 @@ export class Admin {
     }
 
     @action.bound private removeRequest(request: Promise<Response>): void {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.currentRequests = this.currentRequests.filter(
             (req) => req !== request
         )

adminSiteClient/AdminSidebar.tsx

@@ -37,7 +37,7 @@ export const AdminSidebar = (): React.ReactElement => (
             {chartViewsFeatureEnabled && (
                 <li>
                     <Link to="/chartViews">
-                        <FontAwesomeIcon icon={faPanorama} /> Narrative views
+                        <FontAwesomeIcon icon={faPanorama} /> Narrative charts
                     </Link>
                 </li>
             )}

adminSiteClient/ChartEditor.ts

@@ -200,15 +200,15 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
             )
     }
 
-    async saveAsNarrativeView(): Promise<void> {
+    async saveAsChartView(): Promise<void> {
         const { patchConfig, grapher } = this
 
         const chartJson = omit(patchConfig, CHART_VIEW_PROPS_TO_OMIT)
 
         const suggestedName = grapher.title ? slugify(grapher.title) : undefined
 
         const name = prompt(
-            "Please enter a programmatic name for the narrative view. Note that this name cannot be changed later.",
+            "Please enter a programmatic name for the narrative chart. Note that this name cannot be changed later.",
             suggestedName
         )
 

adminSiteClient/ChartViewEditor.ts

@@ -5,7 +5,7 @@ import {
     References,
     type EditorTab,
 } from "./AbstractChartEditor.js"
-import { ENV } from "../settings/clientSettings.js"
+import { BAKED_BASE_URL, ENV } from "../settings/clientSettings.js"
 import {
     CHART_VIEW_PROPS_TO_OMIT,
     CHART_VIEW_PROPS_TO_PERSIST,
@@ -16,7 +16,8 @@ import { diffGrapherConfigs, omit, pick } from "@ourworldindata/utils"
 // Don't yet show chart views in the admin interface
 // This is low-stakes - if it shows up anyhow (e.g. on staging servers), it's not a big deal.
 // TODO: Remove this flag once we're launching this feature
-export const chartViewsFeatureEnabled = ENV === "development"
+export const chartViewsFeatureEnabled =
+    ENV === "development" || BAKED_BASE_URL.includes("narrative-")
 
 export interface Chart {
     id: number

adminSiteClient/ChartViewIndexPage.tsx

@@ -7,7 +7,7 @@ import { AdminAppContext } from "./AdminAppContext.js"
 import { Timeago } from "./Forms.js"
 import { ColumnsType } from "antd/es/table/InternalTable.js"
 import { ApiChartViewOverview } from "../adminShared/AdminTypes.js"
-import { BAKED_GRAPHER_URL } from "../settings/clientSettings.js"
+import { GRAPHER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js"
 import { Link } from "./Link.js"
 import {
     buildSearchWordsFromSearchString,
@@ -28,7 +28,7 @@ function createColumns(
             width: 200,
             render: (chartConfigId) => (
                 <img
-                    src={`${BAKED_GRAPHER_URL}/by-uuid/${chartConfigId}.svg`}
+                    src={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/by-uuid/${chartConfigId}.svg`}
                     style={{ maxWidth: 200, maxHeight: 200 }}
                 />
             ),
@@ -135,7 +135,7 @@ export function ChartViewIndexPage() {
     }, [admin])
 
     return (
-        <AdminLayout title="Narrative views">
+        <AdminLayout title="Narrative charts">
             <main className="ChartViewIndexPage">
                 <Flex justify="space-between">
                     <Input

adminSiteClient/EditorReferencesTab.tsx

@@ -127,7 +127,7 @@ export const ReferencesSection = (props: {
 
     const chartViews = !!props.references?.chartViews?.length && (
         <>
-            <p>Narrative views based on this chart</p>
+            <p>Narrative charts based on this chart</p>
             <ul className="list-group">
                 {props.references.chartViews.map((chartView) => (
                     <li key={chartView.id} className="list-group-item">

adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx

@@ -136,7 +136,7 @@ export function fetchVariablesParametersFromQueryString(
     sExpressionContext: OperationContext
 ): FetchVariablesParameters {
     let filterQuery: Operation | undefined = undefined
-    if (params.hasOwnProperty("filter")) {
+    if (Object.prototype.hasOwnProperty.call(params, "filter")) {
         filterQuery = parseToOperation(params.filter!, sExpressionContext)
     }
     return {

adminSiteClient/SaveButtons.tsx

@@ -61,8 +61,8 @@ class SaveButtonsForChart extends Component<{
         void this.props.editor.saveAsNewGrapher()
     }
 
-    @action.bound onSaveAsNarrativeView() {
-        void this.props.editor.saveAsNarrativeView()
+    @action.bound onSaveAsChartView() {
+        void this.props.editor.saveAsChartView()
     }
 
     @action.bound onPublishToggle() {
@@ -120,10 +120,10 @@ class SaveButtonsForChart extends Component<{
                     <div className="mt-2">
                         <button
                             className="btn btn-primary"
-                            onClick={this.onSaveAsNarrativeView}
+                            onClick={this.onSaveAsChartView}
                             disabled={isSavingDisabled}
                         >
-                            Save as narrative view
+                            Save as narrative chart
                         </button>
                     </div>
                 )}

adminSiteClient/SiteRedirectsIndexPage.tsx

@@ -7,10 +7,10 @@ import { AdminAppContext } from "./AdminAppContext.js"
 import { AdminLayout } from "./AdminLayout.js"
 import { Link } from "./Link.js"
 
-const SOURCE_PATTERN = /^\/$|^\/.*[^\/]+$/
+const SOURCE_PATTERN = /^\/$|^\/.*[^/]+$/
 const INVALID_SOURCE_MESSAGE =
     "URL must start with a slash and cannot end with a slash, unless it's the root."
-const TARGET_PATTERN = /^\/$|^(https?:\/\/|\/).*[^\/]+$/
+const TARGET_PATTERN = /^\/$|^(https?:\/\/|\/).*[^/]+$/
 const INVALID_TARGET_MESSAGE =
     "URL must start with a slash or http(s):// and cannot end with a slash, unless it's the root."
 

adminSiteClient/VariablesIndexPage.tsx

@@ -8,7 +8,7 @@ import {
     reaction,
     IReactionDisposer,
 } from "mobx"
-import * as lodash from "lodash"
+import lodash from "lodash"
 
 import { AdminLayout } from "./AdminLayout.js"
 import { SearchField, FieldsRow } from "./Forms.js"
@@ -42,7 +42,7 @@ export class VariablesIndexPage extends Component {
                 const html = text.replace(
                     new RegExp(
                         this.highlightSearch.replace(
-                            /[-\/\\^$*+?.()|[\]{}]/g,
+                            /[-/\\^$*+?.()|[\]{}]/g,
                             "\\$&"
                         ),
                         "i"

adminSiteClient/gdocsValidation.ts

@@ -33,7 +33,7 @@ function validatePublishedAt(gdoc: OwidGdoc, errors: OwidGdocErrorMessage[]) {
 }
 
 function validateSlug(gdoc: OwidGdoc, errors: OwidGdocErrorMessage[]) {
-    if (!gdoc.slug.match(/^[a-z0-9-\/]+$/)) {
+    if (!gdoc.slug.match(/^[a-z0-9-/]+$/)) {
         errors.push({
             property: "slug",
             type: OwidGdocErrorMessageType.Error,