refactor(db): rename chart_views#slug to chart_views#name

adminShared/AdminTypes.ts

@@ -1,6 +1,6 @@
 export interface ApiChartViewOverview {
     id: number
-    slug: string
+    name: string
     parent: {
         id: number
         title: string

adminSiteClient/ChartEditor.ts

@@ -34,7 +34,7 @@ export interface Log {
 
 export interface ChartViewMinimalInformation {
     id: number
-    slug: string
+    name: string
     title: string
 }
 
@@ -213,18 +213,20 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
         delete chartJson.isPublished
         delete chartJson.slug
 
-        const suggestedSlug = grapher.title ? slugify(grapher.title) : undefined
+        const suggestedName = grapher.title ? slugify(grapher.title) : undefined
 
-        const slug = prompt(
-            "Please enter a slug for the narrative view. Note that the slug cannot be changed later.",
-            suggestedSlug
+        const name = prompt(
+            "Please enter a programmatic name for the narrative view. Note that this name cannot be changed later.",
+            suggestedName
         )
 
+        if (name === null) return
+
         // Need to open intermediary tab before AJAX to avoid popup blockers
         const w = window.open("/", "_blank") as Window
 
         const body = {
-            slug,
+            name,
             parentChartId: grapher.id,
             config: chartJson,
         }

adminSiteClient/ChartViewEditorPage.tsx

@@ -17,7 +17,7 @@ export class ChartViewEditorPage
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
-    idAndSlug: { id: number; slug: string } | undefined = undefined
+    idAndName: { id: number; name: string } | undefined = undefined
 
     patchConfig: GrapherInterface = {}
     fullConfig: GrapherInterface = {}
@@ -31,7 +31,7 @@ export class ChartViewEditorPage
             `/api/chartViews/${this.chartViewId}`
         )
 
-        this.idAndSlug = { id: data.id, slug: data.slug }
+        this.idAndName = { id: data.id, name: data.name }
         this.fullConfig = data.configFull
         this.patchConfig = data.configPatch
         this.parentChartId = data.parentChartId

adminSiteClient/ChartViewIndexPage.tsx

@@ -39,11 +39,11 @@ function createColumns(
             ),
         },
         {
-            title: "Slug",
-            dataIndex: "slug",
-            key: "slug",
+            title: "Name",
+            dataIndex: "name",
+            key: "name",
             width: 150,
-            render: (slug) => highlightFn(slug),
+            render: (name) => highlightFn(name),
         },
         {
             title: "Title",
@@ -124,7 +124,7 @@ export function ChartViewIndexPage() {
             (chartView: ApiChartViewOverview) => [
                 `${chartView.id}`,
                 chartView.title,
-                chartView.slug,
+                chartView.name,
                 chartView.parent.title,
             ]
         )

adminSiteServer/apiRouter.ts

@@ -294,7 +294,7 @@ const getReferencesByChartId = async (
     const chartViewsPromise = db.knexRaw<ChartViewMinimalInformation>(
         knex,
         `-- sql
-        SELECT cv.id, cv.slug, cc.full ->> "$.title" AS title
+        SELECT cv.id, cv.name, cc.full ->> "$.title" AS title
         FROM chart_views cv
         JOIN chart_configs cc ON cc.id = cv.chartConfigId
         WHERE cv.parentChartId = ?`,
@@ -3312,7 +3312,7 @@ const createPatchConfigAndFullConfigForChartView = async (
 }
 
 getRouteWithROTransaction(apiRouter, "/chartViews", async (req, res, trx) => {
-    type ChartViewRow = Pick<DbPlainChartView, "id" | "slug" | "updatedAt"> & {
+    type ChartViewRow = Pick<DbPlainChartView, "id" | "name" | "updatedAt"> & {
         lastEditedByUser: string
         chartConfigId: string
         title: string
@@ -3325,7 +3325,7 @@ getRouteWithROTransaction(apiRouter, "/chartViews", async (req, res, trx) => {
         `-- sql
         SELECT
             cv.id,
-            cv.slug,
+            cv.name,
             cv.updatedAt,
             cv.lastEditedByUserId,
             cv.chartConfigId,
@@ -3344,7 +3344,7 @@ getRouteWithROTransaction(apiRouter, "/chartViews", async (req, res, trx) => {
 
     const chartViews: ApiChartViewOverview[] = rows.map((row) => ({
         id: row.id,
-        slug: row.slug,
+        name: row.name,
         updatedAt: row.updatedAt?.toISOString() ?? null,
         lastEditedByUser: row.lastEditedByUser,
         chartConfigId: row.chartConfigId,
@@ -3366,7 +3366,7 @@ getRouteWithROTransaction(
 
         type ChartViewRow = Pick<
             DbPlainChartView,
-            "id" | "slug" | "updatedAt"
+            "id" | "name" | "updatedAt"
         > & {
             lastEditedByUser: string
             chartConfigId: string
@@ -3381,7 +3381,7 @@ getRouteWithROTransaction(
             `-- sql
         SELECT
             cv.id,
-            cv.slug,
+            cv.name,
             cv.updatedAt,
             cv.lastEditedByUserId,
             u.fullName as lastEditedByUser,
@@ -3416,12 +3416,12 @@ getRouteWithROTransaction(
 )
 
 postRouteWithRWTransaction(apiRouter, "/chartViews", async (req, res, trx) => {
-    const { slug, parentChartId } = req.body as Pick<
+    const { name, parentChartId } = req.body as Pick<
         DbPlainChartView,
-        "slug" | "parentChartId"
+        "name" | "parentChartId"
     >
     const rawConfig = req.body.config as GrapherInterface
-    if (!slug || !parentChartId || !rawConfig) {
+    if (!name || !parentChartId || !rawConfig) {
         throw new JsonError("Invalid request", 400)
     }
 
@@ -3441,7 +3441,7 @@ postRouteWithRWTransaction(apiRouter, "/chartViews", async (req, res, trx) => {
 
     // insert into chart_views
     const insertRow: DbInsertChartView = {
-        slug,
+        name,
         parentChartId,
         lastEditedByUserId: res.locals.user.id,
         chartConfigId: chartConfigId,

db/migration/1733004083678-RenameChartViewsSlug.ts

@@ -0,0 +1,19 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class RenameChartViewsSlug1733004083678 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(
+            `-- sql
+            ALTER TABLE chart_views RENAME COLUMN slug TO name, RENAME INDEX slug TO name;
+            `
+        )
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(
+            `-- sql
+            ALTER TABLE chart_views RENAME COLUMN name TO slug, RENAME INDEX name TO slug;
+            `
+        )
+    }
+}

packages/@ourworldindata/types/src/dbTypes/ChartViews.ts

@@ -1,7 +1,7 @@
 export const ChartViewsTableName = "chart_views"
 export interface DbInsertChartView {
     id?: number
-    slug: string
+    name: string
     chartConfigId: string
     parentChartId: number
     createdAt?: Date | null