Add UI for controlling row actions on views, and add support for view row actions in button actions

packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte

@@ -38,7 +38,10 @@
       return
     }
     const res = await API.rowActions.fetch(tableId)
-    rowActions = Object.values(res || {})
+    rowActions = Object.values(res || {}).map(action => ({
+      ...action,
+      enabled: !isView || action.allowedViews?.includes(ds.id),
+    }))
   }
 
   const createRowAction = async () => {
@@ -58,6 +61,23 @@
       notifications.error("Error creating row action")
     }
   }
+
+  const toggleAction = async (action, enabled) => {
+    console.log(action, enabled)
+    if (enabled) {
+      await API.rowActions.enableView({
+        tableId,
+        rowActionId: action.id,
+        viewId: ds.id,
+      })
+    } else {
+      await API.rowActions.disableView({
+        tableId,
+        rowActionId: action.id,
+        viewId: ds.id,
+      })
+    }
+  }
 </script>
 
 <DetailPopover title="Row actions">
@@ -87,7 +107,10 @@
           <svelte:fragment slot="right">
             {#if isView}
               <span>
-                <Toggle />
+                <Toggle
+                  value={action.enabled}
+                  on:change={e => toggleAction(action, e.detail)}
+                />
               </span>
             {/if}
           </svelte:fragment>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RowAction.svelte

@@ -15,10 +15,13 @@
   }))
   $: viewOptions = $viewsV2.list.map(view => ({
     label: view.name,
+    tableId: view.tableId,
     resourceId: view.id,
   }))
+  $: console.log($viewsV2.list)
   $: datasourceOptions = [...(tableOptions || []), ...(viewOptions || [])]
-  $: fetchRowActions(parameters.resourceId)
+  $: resourceId = parameters.resourceId
+  $: fetchRowActions(resourceId)
   $: rowActionOptions = rowActions.map(action => ({
     label: action.name,
     value: action.id,
@@ -30,8 +33,15 @@
       return
     }
     try {
-      const res = await API.rowActions.fetch(resourceId)
+      const isView = resourceId.startsWith("view_")
-      rowActions = Object.values(res || {})
+      let tableId = resourceId
+      if (isView) {
+        tableId = viewOptions.find(x => x.resourceId === resourceId).tableId
+      }
+      const res = await API.rowActions.fetch(tableId)
+      rowActions = Object.values(res || {}).filter(action => {
+        return !isView || action.allowedViews?.includes(resourceId)
+      })
     } catch (err) {
       console.error(err)
       rowActions = []

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte

@@ -63,7 +63,7 @@
       onClick: async row => {
         await API.rowActions.trigger({
           rowActionId: action.id,
-          tableId: id,
+          sourceId: id,
           rowId: row._id,
         })
       },

packages/client/src/utils/buttonActions.js

@@ -497,7 +497,7 @@ const rowActionHandler = async action => {
   const { resourceId, rowId, rowActionId } = action.parameters
   await API.rowActions.trigger({
     rowActionId,
-    tableId: resourceId,
+    sourceId: resourceId,
     rowId,
   })
 }

packages/frontend-core/src/api/rowActions.js

@@ -50,14 +50,38 @@ export const buildRowActionEndpoints = API => ({
     })
   },
 
+  /**
+   * Enables a row action for a certain view
+   * @param tableId the ID of the parent table
+   * @param rowActionId the ID of the row action
+   * @param viewId the ID of the view
+   */
+  enableView: async ({ tableId, rowActionId, viewId }) => {
+    return await API.post({
+      url: `/api/tables/${tableId}/actions/${rowActionId}/permissions/${viewId}`,
+    })
+  },
+
+  /**
+   * Disables a row action for a certain view
+   * @param tableId the ID of the parent table
+   * @param rowActionId the ID of the row action
+   * @param viewId the ID of the view
+   */
+  disableView: async ({ tableId, rowActionId, viewId }) => {
+    return await API.delete({
+      url: `/api/tables/${tableId}/actions/${rowActionId}/permissions/${viewId}`,
+    })
+  },
+
   /**
    * Triggers a row action.
    * @param tableId the ID of the table
    * @param rowActionId the ID of the row action to trigger
    */
-  trigger: async ({ tableId, rowActionId, rowId }) => {
+  trigger: async ({ sourceId, rowActionId, rowId }) => {
     return await API.post({
-      url: `/api/tables/${tableId}/actions/${rowActionId}/trigger`,
+      url: `/api/tables/${sourceId}/actions/${rowActionId}/trigger`,
       body: {
         rowId,
       },