🐝 Standardise trailing slashes of URL-like envs

adminSiteClient/DatasetEditPage.tsx

@@ -21,6 +21,8 @@ import { faDownload, faHatWizard } from "@fortawesome/free-solid-svg-icons"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
 import { Button } from "antd"
+import urljoin from "url-join"
+
 interface DatasetPageData {
     id: number
     name: string
@@ -254,7 +256,10 @@ class DatasetEditor extends Component<{ dataset: DatasetPageData }> {
                     </Link>
                     {/* Link to Wizard dataset preview */}
                     <a
-                        href={`${ETL_WIZARD_URL}datasets?datasetId=${dataset.id}`}
+                        href={urljoin(
+                            ETL_WIZARD_URL,
+                            `datasets?datasetId=${dataset.id}`
+                        )}
                         target="_blank"
                         className="btn btn-tertiary"
                         rel="noopener"

adminSiteClient/EditorExportTab.tsx

@@ -12,6 +12,7 @@ import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
 import { faHatWizard, faDownload } from "@fortawesome/free-solid-svg-icons"
 import { Button } from "antd"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import urljoin from "url-join"
 
 type ExportSettings = Required<
     Pick<
@@ -231,7 +232,9 @@ export class EditorExportTab<
     }
 
     render() {
-        const chartAnimationUrl = new URL(`${ETL_WIZARD_URL}chart-animation`)
+        const chartAnimationUrl = new URL(
+            urljoin(ETL_WIZARD_URL, "chart-animation")
+        )
         if (this.grapher.canonicalUrl)
             chartAnimationUrl.searchParams.set(
                 "animation_chart_url",

adminSiteClient/VariableEditPage.tsx

@@ -52,6 +52,7 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { DATA_API_URL, ETL_API_URL } from "../settings/clientSettings.js"
 import _ from "lodash"
+import urljoin from "url-join"
 
 interface VariablePageData
     extends Omit<OwidVariableWithDataAndSource, "source"> {
@@ -596,7 +597,7 @@ class VariableEditor extends Component<{
     }
 
     async etlApiIsRunning(): Promise<boolean> {
-        const healthcheckUrl = `${ETL_API_URL}/health`
+        const healthcheckUrl = urljoin(ETL_API_URL, "health")
         try {
             await this.context.admin.rawRequest(
                 healthcheckUrl,
@@ -616,7 +617,7 @@ class VariableEditor extends Component<{
 
         this.context.admin.loadingIndicatorSetting = "loading"
 
-        const url = `${ETL_API_URL}/indicators`
+        const url = urljoin(ETL_API_URL, "indicators")
 
         const indicatorDiff = getDifference(
             this.newVariable,

devTools/cloudflareImagesSync/cloudflareImagesSync.ts

@@ -10,6 +10,7 @@ import {
     IMAGE_HOSTING_R2_CDN_URL,
 } from "../../settings/serverSettings.js"
 import { keyBy } from "@ourworldindata/utils"
+import urljoin from "url-join"
 
 type CloudflareImageDirectory = Record<string, { id: string; filename: string }>
 
@@ -282,7 +283,7 @@ async function uploadImageToCloudflareImages(
         return
     }
 
-    const imageUrl = `${IMAGE_HOSTING_R2_CDN_URL}/production/${filename}`
+    const imageUrl = urljoin(IMAGE_HOSTING_R2_CDN_URL, "production", filename)
     const metadata = stringifyImageMetadata(image)
     const invalidReason = validateImage(image, metadata)
     if (invalidReason) {

packages/@ourworldindata/grapher/src/core/loadVariable.ts

@@ -3,18 +3,19 @@ import {
     OwidVariableDataMetadataDimensions,
 } from "@ourworldindata/types"
 import { fetchWithRetry, readFromAssetMap } from "@ourworldindata/utils"
+import urljoin from "url-join"
 
 export const getVariableDataRoute = (
     dataApiUrl: string,
     variableId: number,
     assetMap?: AssetMap
 ): string => {
-    if (dataApiUrl.includes("v1/indicators/")) {
+    if (dataApiUrl.includes("v1/indicators")) {
         const filename = `${variableId}.data.json`
         return readFromAssetMap(assetMap, {
             path: filename,
             // fetching from Data API, e.g. https://api.ourworldindata.org/v1/indicators/123.data.json
-            fallback: `${dataApiUrl}${filename}`,
+            fallback: urljoin(dataApiUrl, filename),
         })
     } else {
         throw new Error(`dataApiUrl format not supported: ${dataApiUrl}`)
@@ -26,12 +27,12 @@ export const getVariableMetadataRoute = (
     variableId: number,
     assetMap?: AssetMap
 ): string => {
-    if (dataApiUrl.includes("v1/indicators/")) {
+    if (dataApiUrl.includes("v1/indicators")) {
         const filename = `${variableId}.metadata.json`
         return readFromAssetMap(assetMap, {
             path: filename,
             // fetching from Data API, e.g. https://api.ourworldindata.org/v1/indicators/123.metadata.json
-            fallback: `${dataApiUrl}${filename}`,
+            fallback: urljoin(dataApiUrl, filename),
         })
     } else {
         throw new Error(`dataApiUrl format not supported: ${dataApiUrl}`)

settings/clientSettings.ts

@@ -48,9 +48,9 @@ export const MULTI_DIM_DYNAMIC_CONFIG_URL: string =
 export const ADMIN_BASE_URL: string =
     process.env.ADMIN_BASE_URL ??
     `http://${ADMIN_SERVER_HOST}:${ADMIN_SERVER_PORT}`
-// e.g. "https://api.ourworldindata.org/v1/indicators/" or "https://api-staging.owid.io/user/v1/indicators/"
+// e.g. "https://api.ourworldindata.org/v1/indicators" or "https://api-staging.owid.io/user/v1/indicators"
 export const DATA_API_URL: string =
-    process.env.DATA_API_URL ?? "https://api.ourworldindata.org/v1/indicators/"
+    process.env.DATA_API_URL ?? "https://api.ourworldindata.org/v1/indicators"
 
 export const ALGOLIA_ID: string = process.env.ALGOLIA_ID ?? ""
 export const ALGOLIA_SEARCH_KEY: string = process.env.ALGOLIA_SEARCH_KEY ?? ""
@@ -91,7 +91,7 @@ export const IMAGE_HOSTING_R2_BUCKET_SUBFOLDER_PATH: string =
 
 // Link to production wizard.  You need Tailscale to access it in production.
 export const ETL_WIZARD_URL: string =
-    process.env.ETL_WIZARD_URL ?? `http://${ADMIN_SERVER_HOST}:8053/`
+    process.env.ETL_WIZARD_URL ?? `http://${ADMIN_SERVER_HOST}:8053`
 
 // Production ETL API runs on http://etl-prod-2:8083/v1 (you need Tailscale to access it)
 export const ETL_API_URL: string =