🐝 (staging) sophia

.vscode/launch.json

@@ -94,7 +94,7 @@
         },
         {
             "name": "Launch admin server",
-            "program": "${workspaceFolder}/adminSiteServer/app.tsx",
+            "program": "${workspaceFolder}/adminSiteServer/app.ts",
             "request": "launch",
             "type": "node",
             "runtimeExecutable": "yarn",
@@ -113,7 +113,7 @@
         },
         {
             "name": "Launch admin server (via fnm)",
-            "program": "${workspaceFolder}/adminSiteServer/app.tsx",
+            "program": "${workspaceFolder}/adminSiteServer/app.ts",
             "request": "launch",
             "type": "node",
             "runtimeExecutable": "fnm",

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)

adminShared/search.tsx

@@ -1,5 +1,5 @@
 import { drop, escapeRegExp, sortBy } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 
 export interface SearchWord {
     regex: RegExp

adminSiteClient/Admin.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import ReactDOM from "react-dom"
 import * as lodash from "lodash"
 import { observable, computed, action } from "mobx"
@@ -163,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/AdminApp.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Admin } from "./Admin.js"
 import { ChartEditorPage } from "./ChartEditorPage.js"
 import { action } from "mobx"
@@ -40,7 +40,7 @@ import { AdminLayout } from "./AdminLayout.js"
 import { BulkGrapherConfigEditorPage } from "./BulkGrapherConfigEditor.js"
 import { GdocsIndexPage, GdocsMatchProps } from "./GdocsIndexPage.js"
 import { GdocsPreviewPage } from "./GdocsPreviewPage.js"
-import { GdocsStoreProvider } from "./GdocsStore.js"
+import { GdocsStoreProvider } from "./GdocsStoreProvider.js"
 import { IndicatorChartEditorPage } from "./IndicatorChartEditorPage.js"
 import { ChartViewEditorPage } from "./ChartViewEditorPage.js"
 import { ChartViewIndexPage } from "./ChartViewIndexPage.js"

adminSiteClient/AdminAppContext.ts

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Admin } from "./Admin.js"
 
 export interface AdminAppContextType {

adminSiteClient/AdminLayout.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, action, computed } from "mobx"
 import { observer } from "mobx-react"
 

adminSiteClient/AdminSidebar.tsx

@@ -1,5 +1,5 @@
 import { Link } from "./Link.js"
-import React from "react"
+import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     faChartBar,

adminSiteClient/BulkDownloadPage.tsx

@@ -1,10 +1,10 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { AdminLayout } from "./AdminLayout.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 @observer
-export class BulkDownloadPage extends React.Component {
+export class BulkDownloadPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
@@ -20,7 +20,7 @@ export class BulkDownloadPage extends React.Component {
     }
 }
 
-export class DownloadChartsSection extends React.Component {
+export class DownloadChartsSection extends Component {
     render() {
         return (
             <section>

adminSiteClient/BulkGrapherConfigEditor.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import {
     chartBulkUpdateAllowedColumnNamesAndTypes,
     WHITELISTED_SQL_COLUMN_NAMES,
@@ -130,7 +130,7 @@ const config: GrapherConfigGridEditorConfig = {
     finalVariableLayerModificationFn: () => ({}),
 }
 
-export class BulkGrapherConfigEditorPage extends React.Component {
+export class BulkGrapherConfigEditorPage extends Component {
     render() {
         return (
             <AdminLayout title="Bulk chart editor">

adminSiteClient/ChartEditorView.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import {
     observable,

adminSiteClient/ChartIndexPage.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, action, runInAction } from "mobx"
 
@@ -15,7 +15,7 @@ import {
 import { sortNumeric, SortOrder } from "@ourworldindata/utils"
 
 @observer
-export class ChartIndexPage extends React.Component {
+export class ChartIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 

adminSiteClient/ChartList.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { runInAction, observable } from "mobx"
 import { bind } from "decko"

adminSiteClient/ChartRow.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { action, runInAction } from "mobx"
 import * as lodash from "lodash"
@@ -127,6 +127,8 @@ export class ChartRow extends React.Component<{
     }
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function InheritanceStatus({ chart }: { chart: ChartListItem }) {
     // if no information is available, return an empty cell
     if (

adminSiteClient/ChartViewIndexPage.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useMemo, useState } from "react"
+import { useContext, useEffect, useMemo, useState } from "react"
+import * as React from "react"
 import { Button, Flex, Input, Space, Table } from "antd"
 
 import { AdminLayout } from "./AdminLayout.js"

adminSiteClient/ColorSchemeDropdown.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { computed, action } from "mobx"
 import Select from "react-select"
 import { GrapherChartOrMapType } from "@ourworldindata/types"
@@ -27,7 +27,7 @@ interface ColorSchemeDropdownProps {
 }
 
 @observer
-export class ColorSchemeDropdown extends React.Component<ColorSchemeDropdownProps> {
+export class ColorSchemeDropdown extends Component<ColorSchemeDropdownProps> {
     static defaultProps = {
         additionalOptions: [],
         gradientColorCount: 6,

adminSiteClient/Colorpicker.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { SketchPicker } from "react-color"
@@ -16,7 +16,7 @@ interface ColorpickerProps {
 }
 
 @observer
-export class Colorpicker extends React.Component<ColorpickerProps> {
+export class Colorpicker extends Component<ColorpickerProps> {
     @action.bound onColor(color: string) {
         if (color === "") {
             this.props.onColor(undefined)
@@ -39,7 +39,7 @@ export class Colorpicker extends React.Component<ColorpickerProps> {
         }
 
         return (
-            <React.Fragment>
+            <Fragment>
                 <SketchPicker
                     disableAlpha
                     presetColors={availableColors.map((color) => ({
@@ -49,7 +49,7 @@ export class Colorpicker extends React.Component<ColorpickerProps> {
                     color={this.props.color}
                     onChange={(color) => this.onColor(color.hex)}
                 />
-            </React.Fragment>
+            </Fragment>
         )
     }
 }