Rename action slug prop to route

Using the `action` prop is deprecated, and is logged for `ctx.redirect`
and `io.display.link`. Like with the `href` prop in tables, we aren't
iterating through table data in order to log it for table cells or
menuItems. We may want to consider some way to do that.

I cannot get TypeScript to complain about extraneous keys in the
`renderCell` return type, so usages of `action` instead of `route`
in versions of the SDK moving forward will simply do nothing, but won't
trigger a TypeScript error alerting developers about it. Obviously not
ideal.

We haven't yet fully migrated from `actions` to `routes` in the
non-experimental API, and merging this will update the live docs for all
of the effected methods. Maybe we shouldn't do that yet? Or should not
make the documentation changes yet, and allow both properties for now?

Close T-338

src/components/displayLink.ts

@@ -8,7 +8,7 @@ export default function displayLink(
         url: string
       }
     | {
-        action: string
+        route: string
         params?: SerializableRecord
       }
   )

src/examples/app/index.ts

@@ -35,7 +35,7 @@ const hello_app = new Page({
         },
         {
           label: 'Action link',
-          action: 'hello_app/hello_world',
+          route: 'hello_app/hello_world',
         },
         // {
         //   label: 'Inline action',
@@ -59,7 +59,7 @@ const hello_app = new Page({
           rowMenuItems: () => [
             {
               label: 'Hello',
-              action: 'hello_app/hello_world',
+              route: 'hello_app/hello_world',
             },
           ],
         }),
@@ -82,7 +82,7 @@ const hello_app = new Page({
           rowMenuItems: () => [
             {
               label: 'Hello',
-              action: 'hello_app/hello_world',
+              route: 'hello_app/hello_world',
             },
           ],
         }),
@@ -122,11 +122,11 @@ const users = new Page({
       menuItems: [
         {
           label: 'View funnel',
-          action: 'users/view_funnel',
+          route: 'users/view_funnel',
         },
         {
           label: 'Create user',
-          action: 'users/create',
+          route: 'users/create',
         },
       ],
       children: [
@@ -135,7 +135,7 @@ const users = new Page({
           rowMenuItems: row => [
             {
               label: 'Edit',
-              action: 'users/edit',
+              route: 'users/edit',
               params: { id: row.id },
             },
           ],
@@ -210,11 +210,11 @@ const interval = new Interval({
           menuItems: [
             {
               label: 'Reload',
-              action: 'info',
+              route: 'info',
             },
             {
               label: 'Add timestamp param',
-              action: 'info',
+              route: 'info',
               params: { timestamp: new Date().valueOf() },
             },
           ],

src/examples/basic/index.ts

@@ -45,13 +45,13 @@ const actionLinks: IntervalActionHandler = async () => {
       url: 'https://example.com',
     }),
     io.display.link('Action link', {
-      action: 'helloCurrentUser',
+      route: 'helloCurrentUser',
       params: {
         message: 'From a button!',
       },
     }),
     io.display.link('This same action', {
-      action: 'actionLinks',
+      route: 'actionLinks',
       params: {
         prevActionAt: new Date().toISOString(),
       },
@@ -124,7 +124,7 @@ const prod = new Interval({
       const { workDone = false } = ctx.params
       if (!workDone) {
         await ctx.redirect({
-          action: 'perform_common_work',
+          route: 'perform_common_work',
         })
         startedWork = true
       }
@@ -142,7 +142,7 @@ const prod = new Interval({
       )
       await sleep(2000)
       await ctx.redirect({
-        action: 'perform_redirect_flow',
+        route: 'perform_redirect_flow',
         params: {
           workDone: true,
         },
@@ -405,6 +405,11 @@ const interval = new Interval({
           action: 'helloCurrentUser',
           params: { message: 'Hello from metadata!' },
         },
+        {
+          label: 'External link',
+          value: 'Click me',
+          url: 'https://interval.com',
+        },
         {
           label: 'Image',
           value: 'Optional caption',
@@ -1046,7 +1051,7 @@ const interval = new Interval({
       return { url: url.href }
     },
     redirect: async () => {
-      const [url, , action, paramsStr] = await io.group([
+      const [url, , route, paramsStr] = await io.group([
         io.input.url('Enter a URL').optional(),
         io.display.markdown('--- or ---'),
         io.input.text('Enter an action slug').optional(),
@@ -1060,7 +1065,7 @@ const interval = new Interval({
       let params = undefined
       if (url) {
         await ctx.redirect({ url: url.toString() })
-      } else if (action) {
+      } else if (route) {
         if (paramsStr) {
           try {
             params = JSON.parse(paramsStr)
@@ -1069,20 +1074,20 @@ const interval = new Interval({
           }
         }
 
-        await ctx.redirect({ action, params })
+        await ctx.redirect({ route, params })
       } else {
         throw new Error('Must enter either a URL or an action slug')
       }
 
       console.log({
         url,
-        action,
+        route,
         params,
       })
 
       return {
         url: url?.toString(),
-        action,
+        route,
         paramsStr,
       }
     },

src/examples/basic/selectFromTable.ts

@@ -82,7 +82,7 @@ export const table_actions: IntervalActionHandler = async io => {
     rowMenuItems: row => [
       {
         label: 'Edit',
-        action: 'edit_user',
+        route: 'edit_user',
         params: { email: row.email },
       },
     ],

src/examples/basic/table.ts

@@ -98,24 +98,24 @@ export const display_table: IntervalActionHandler = async io => {
     rowMenuItems: row => [
       {
         label: 'Edit',
-        action: 'edit_user',
+        route: 'edit_user',
         params: { email: row.email },
       },
       {
         label: 'Edit',
-        action: 'edit_user',
+        route: 'edit_user',
         params: { email: row.email },
         disabled: true,
       },
       {
         label: 'Delete',
-        action: 'delete_user',
+        route: 'delete_user',
         params: { email: row.email },
         theme: 'danger',
       },
       {
         label: 'Delete',
-        action: 'delete_user',
+        route: 'delete_user',
         params: { email: row.email },
         theme: 'danger',
         disabled: true,
@@ -223,7 +223,7 @@ export const async_table: IntervalActionHandler = async io => {
     rowMenuItems: row => [
       {
         label: 'Edit',
-        action: 'edit_user',
+        route: 'edit_user',
         params: { email: row.email },
       },
     ],
@@ -261,7 +261,7 @@ export const select_table: IntervalActionHandler = async io => {
     rowMenuItems: row => [
       {
         label: 'Edit',
-        action: 'edit_user',
+        route: 'edit_user',
         params: { email: row.email },
       },
     ],

src/examples/structure/index.ts

@@ -47,7 +47,7 @@ const routes: IntervalRouteDefinitions = {
         menuItems: [
           {
             label: 'Create user',
-            action: 'users/create',
+            route: 'users/create',
           },
         ],
         children: [
@@ -56,7 +56,7 @@ const routes: IntervalRouteDefinitions = {
             rowMenuItems: row => [
               {
                 label: 'Edit',
-                action: 'users/edit',
+                route: 'users/edit',
                 params: { id: row.id },
               },
             ],
@@ -99,12 +99,12 @@ const routes: IntervalRouteDefinitions = {
                 rowMenuItems: row => [
                   {
                     label: 'Edit',
-                    action: 'users/subscriptions/edit',
+                    route: 'users/subscriptions/edit',
                     params: { id: row.id },
                   },
                   {
                     label: 'Cancel',
-                    action: 'users/subscriptions/cancel',
+                    route: 'users/subscriptions/cancel',
                     theme: 'danger',
                     params: { id: row.id },
                   },
@@ -140,7 +140,7 @@ const routes: IntervalRouteDefinitions = {
             menuItems: [
               {
                 label: 'Create comment',
-                action: 'users/comments/create',
+                route: 'users/comments/create',
               },
             ],
             children: [
@@ -149,7 +149,7 @@ const routes: IntervalRouteDefinitions = {
                 rowMenuItems: row => [
                   {
                     label: 'Edit',
-                    action: 'users/comments/edit',
+                    route: 'users/comments/edit',
                     params: { id: row.id },
                   },
                 ],

src/internalRpcSchema.ts

@@ -257,7 +257,14 @@ export const wsServerSchema = {
       z.object({
         transactionId: z.string(),
       }),
-      linkSchema
+      z.union([
+        linkSchema,
+        // deprecated in favor of `route` from linkSchema
+        z.object({
+          action: z.string(),
+          params: serializableRecord.optional(),
+        }),
+      ])
     ),
     returns: z.boolean(),
   },

src/ioSchema.ts

@@ -191,7 +191,9 @@ export const tableRowValue = z.union([
         url: z.string(),
       })
       .optional(),
+    // Deprecated in favor of route
     action: z.string().optional(),
+    route: z.string().optional(),
     params: serializableRecord.optional(),
   }),
 ])
@@ -209,11 +211,21 @@ export const menuItem = z.intersection(
     theme: z.enum(['default', 'danger']).optional(),
   }),
   z.union([
-    z.object({
-      action: z.string(),
-      params: serializableRecord.optional(),
-      disabled: z.boolean().optional(),
-    }),
+    z.intersection(
+      z.object({
+        params: serializableRecord.optional(),
+        disabled: z.boolean().optional(),
+      }),
+      z.union([
+        z.object({
+          route: z.string(),
+        }),
+        z.object({
+          // deprecated in favor of `route`
+          action: z.string(),
+        }),
+      ])
+    ),
     z.object({
       url: z.string(),
       disabled: z.boolean().optional(),
@@ -230,11 +242,21 @@ export const buttonItem = z.intersection(
     theme: buttonTheme.optional(),
   }),
   z.union([
-    z.object({
-      action: z.string(),
-      params: serializableRecord.optional(),
-      disabled: z.boolean().optional(),
-    }),
+    z.intersection(
+      z.object({
+        params: serializableRecord.optional(),
+        disabled: z.boolean().optional(),
+      }),
+      z.union([
+        z.object({
+          route: z.string(),
+        }),
+        z.object({
+          // deprecated in favor of `route`
+          action: z.string(),
+        }),
+      ])
+    ),
     z.object({
       url: z.string(),
       disabled: z.boolean().optional(),
@@ -250,7 +272,7 @@ export const linkSchema = z.union([
     url: z.string(),
   }),
   z.object({
-    action: z.string(),
+    route: z.string(),
     params: serializableRecord.optional(),
   }),
 ])
@@ -318,6 +340,8 @@ export const metaItemSchema = z.object({
       url: z.string(),
     })
     .optional(),
+  route: z.string().optional(),
+  // Deprecated in favor of `route` above
   action: z.string().optional(),
   params: serializableRecord.optional(),
   error: z.string().nullish(),
@@ -373,6 +397,11 @@ const DISPLAY_SCHEMA = {
         z.object({
           href: z.string(),
         }),
+        // deprecated in favor of `route` in linkSchema
+        z.object({
+          action: z.string(),
+          params: serializableRecord.optional(),
+        }),
         linkSchema,
       ])
     ),