fix: add missing data-css attributes

Author: dziraf

src/frontend/components/routes/bulk-action.tsx

@@ -17,6 +17,7 @@ import {
 } from '../app/index.js'
 import { useTranslation, useNotice, useResource } from '../../hooks/index.js'
 import allowOverride from '../../hoc/allow-override.js'
+import { getDataCss } from '../../index.js'
 
 type MatchParams = Pick<BulkActionParams, 'actionName' | 'resourceId'>
 
@@ -97,10 +98,13 @@ const BulkAction: React.FC = () => {
     return <NoActionError resourceId={resourceId!} actionName={actionName!} />
   }
 
+  const routeWrapperCss = getDataCss(resource.id, action.actionType, action.name, 'route-wrapper')
+  const routeActionCss = getDataCss(resource.id, action.actionType, action.name, 'route')
+
   if (action.showInDrawer) {
     if (!listAction) {
       return (
-        <DrawerPortal width={action.containerWidth}>
+        <DrawerPortal width={action.containerWidth} data-css={routeActionCss}>
           <BaseActionComponent
             action={action as ActionJSON}
             resource={resource}
@@ -116,15 +120,15 @@ const BulkAction: React.FC = () => {
 
     return (
       <>
-        <DrawerPortal width={action.containerWidth}>
+        <DrawerPortal width={action.containerWidth} data-css={routeActionCss}>
           <BaseActionComponent
             action={action as ActionJSON}
             resource={resource}
             records={records}
             setTag={setTag}
           />
         </DrawerPortal>
-        <Wrapper width={listAction.containerWidth}>
+        <Wrapper width={listAction.containerWidth} data-css={routeWrapperCss}>
           <ActionHeader
             resource={resource}
             action={listAction}
@@ -138,7 +142,7 @@ const BulkAction: React.FC = () => {
   }
 
   return (
-    <Wrapper width={action.containerWidth}>
+    <Wrapper width={action.containerWidth} data-css={routeWrapperCss}>
       {!action?.showInDrawer ? <ActionHeader resource={resource} action={action} tag={tag} /> : ''}
       <BaseActionComponent
         action={action as ActionJSON}

src/frontend/components/routes/record-action.tsx

@@ -15,6 +15,7 @@ import DrawerPortal from '../app/drawer-portal.js'
 import { ActionResponse, RecordActionResponse } from '../../../backend/actions/action.interface.js'
 import mergeRecordResponse from '../../hooks/use-record/merge-record-response.js'
 import allowOverride from '../../hoc/allow-override.js'
+import { getDataCss } from '../../index.js'
 
 const api = new ApiClient()
 
@@ -116,10 +117,13 @@ const RecordAction: React.FC = () => {
     return <NoRecordError resourceId={resourceId!} recordId={recordId!} />
   }
 
+  const routeWrapperCss = getDataCss(resource.id, action.actionType, action.name, 'route-wrapper')
+  const routeActionCss = getDataCss(resource.id, action.actionType, action.name, 'route')
+
   if (action.showInDrawer) {
     if (!listAction) {
       return (
-        <DrawerPortal width={action.containerWidth}>
+        <DrawerPortal width={action.containerWidth} data-css={routeActionCss}>
           <BaseActionComponent action={action as ActionJSON} resource={resource} record={record} />
         </DrawerPortal>
       )
@@ -131,10 +135,10 @@ const RecordAction: React.FC = () => {
 
     return (
       <>
-        <DrawerPortal width={action.containerWidth}>
+        <DrawerPortal width={action.containerWidth} data-css={routeActionCss}>
           <BaseActionComponent action={action as ActionJSON} resource={resource} record={record} />
         </DrawerPortal>
-        <Wrapper width={listAction.containerWidth}>
+        <Wrapper width={listAction.containerWidth} data-css={routeWrapperCss}>
           <ActionHeader
             resource={resource}
             action={listAction}
@@ -148,7 +152,7 @@ const RecordAction: React.FC = () => {
   }
 
   return (
-    <Wrapper width={action.containerWidth}>
+    <Wrapper width={action.containerWidth} data-css={routeWrapperCss}>
       <ActionHeader
         resource={resource}
         action={action}

src/frontend/components/routes/resource-action.tsx

@@ -13,7 +13,7 @@ import { NoActionError, NoResourceError } from '../app/error-message.js'
 import FilterDrawer from '../app/filter-drawer.js'
 import { ActionHeader } from '../app/index.js'
 import Wrapper from './utils/wrapper.js'
-import { getResourceElementCss } from '../../utils/data-css-name.js'
+import { getDataCss, getResourceElementCss } from '../../utils/data-css-name.js'
 
 type PropsFromState = {
   resources: Array<ResourceJSON>
@@ -42,11 +42,12 @@ const ResourceAction: React.FC<Props> = (props) => {
   const listAction = resource.resourceActions.find((r) => r.name === listActionName)
 
   const contentTag = getResourceElementCss(resource.id, action.name)
+  const routeActionCss = getDataCss(resource.id, action.actionType, action.name, 'route')
 
   if (action.showInDrawer) {
     if (!listAction) {
       return (
-        <DrawerPortal width={action.containerWidth}>
+        <DrawerPortal width={action.containerWidth} data-css={routeActionCss}>
           <BaseActionComponent action={action} resource={resource} />
         </DrawerPortal>
       )
@@ -58,14 +59,14 @@ const ResourceAction: React.FC<Props> = (props) => {
 
     return (
       <>
-        <DrawerPortal width={action.containerWidth}>
+        <DrawerPortal width={action.containerWidth} data-css={routeActionCss}>
           <BaseActionComponent
             action={action}
             resource={resource}
             setTag={setTag}
           />
         </DrawerPortal>
-        <Wrapper width={listAction.containerWidth}>
+        <Wrapper width={listAction.containerWidth} data-css={contentTag}>
           <ActionHeader
             resource={resource}
             action={listAction}