feat(small): added data-css to essential html tags (SoftwareBrothers#…

…1274)(@jwasiak) Authored-by: Jarosław Wasiak <[email protected]>
livesession · Oct 13, 2022 · 2e4ce94 · 2e4ce94
1 parent 8e49688
commit 2e4ce94
Show file tree

Hide file tree

Showing 30 changed files with 206 additions and 145 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 .nyc_output
 .DS_store
 .vscode
+.nova
 .idea
 .cache
 lib
@@ -26,3 +27,4 @@ src/frontend/assets/scripts
 .env
 firebase.env.json
 yarn-error.log
+
diff --git a/src/frontend/components/actions/bulk-delete.tsx b/src/frontend/components/actions/bulk-delete.tsx
@@ -1,18 +1,16 @@
+import { Button, DrawerContent, DrawerFooter, Icon, MessageBox, Table, TableBody, TableCell, TableRow, Text } from '@adminjs/design-system'
 import React, { useState } from 'react'
-import {
-  Table, TableBody, TableRow, TableCell, Text,
-  DrawerContent, DrawerFooter, Button, MessageBox, Icon,
-} from '@adminjs/design-system'
 import { useNavigate } from 'react-router'
 
+import allowOverride from '../../hoc/allow-override'
+import withNotice, { AddNoticeProps } from '../../hoc/with-notice'
+import { useTranslation } from '../../hooks'
+import { getActionElementCss } from '../../utils'
+import ApiClient from '../../utils/api-client'
+import ActionHeader from '../app/action-header/action-header'
 import PropertyType from '../property-type'
 import { ActionProps } from './action.props'
-import ApiClient from '../../utils/api-client'
-import withNotice, { AddNoticeProps } from '../../hoc/with-notice'
 import { appendForceRefresh } from './utils/append-force-refresh'
-import ActionHeader from '../app/action-header/action-header'
-import { useTranslation } from '../../hooks'
-import allowOverride from '../../hoc/allow-override'
 
 /**
  * @name BulkDeleteAction
@@ -66,16 +64,20 @@ const BulkDelete: React.FC<ActionProps & AddNoticeProps> = (props) => {
     })
   }
 
+  const contentTag = getActionElementCss(resource.id, action.name, 'drawer-content')
+  const tableTag = getActionElementCss(resource.id, action.name, 'table')
+  const footerTag = getActionElementCss(resource.id, action.name, 'drawer-footer')
+
   return (
     <>
-      <DrawerContent>
+      <DrawerContent data-css={contentTag}>
         {action?.showInDrawer ? <ActionHeader omitActions {...props} /> : null}
         <MessageBox
           mb="xxl"
           variant="danger"
           message={translateMessage('theseRecordsWillBeRemoved', resource.id, { count: records.length })}
         />
-        <Table>
+        <Table data-css={tableTag}>
           <TableBody>
             {records.map((record) => (
               <TableRow key={record.id}>
@@ -92,7 +94,7 @@ const BulkDelete: React.FC<ActionProps & AddNoticeProps> = (props) => {
           </TableBody>
         </Table>
       </DrawerContent>
-      <DrawerFooter>
+      <DrawerFooter data-css={footerTag}>
         <Button variant="primary" size="lg" onClick={handleClick} disabled={loading}>
           {loading ? (<Icon icon="Fade" spin />) : null}
           {translateButton('confirmRemovalMany', resource.id, { count: records.length })}

diff --git a/src/frontend/components/actions/edit.tsx b/src/frontend/components/actions/edit.tsx
@@ -1,16 +1,17 @@
+import { Box, Button, DrawerContent, DrawerFooter, Icon } from '@adminjs/design-system'
 import React, { FC, useEffect } from 'react'
 import { useNavigate } from 'react-router'
-import { DrawerContent, Box, DrawerFooter, Button, Icon } from '@adminjs/design-system'
 
-import PropertyType from '../property-type'
-import { ActionProps } from './action.props'
-import ActionHeader from '../app/action-header/action-header'
+import allowOverride from '../../hoc/allow-override'
 import useRecord from '../../hooks/use-record/use-record'
+import { useTranslation } from '../../hooks/use-translation'
 import { RecordJSON } from '../../interfaces'
+import { getActionElementCss } from '../../utils'
+import ActionHeader from '../app/action-header/action-header'
+import PropertyType from '../property-type'
+import { ActionProps } from './action.props'
 import { appendForceRefresh } from './utils/append-force-refresh'
-import { useTranslation } from '../../hooks/use-translation'
 import LayoutElementRenderer from './utils/layout-element-renderer'
-import allowOverride from '../../hoc/allow-override'
 
 const Edit: FC<ActionProps> = (props) => {
   const { record: initialRecord, resource, action } = props
@@ -41,15 +42,20 @@ const Edit: FC<ActionProps> = (props) => {
     return false
   }
 
+  const contentTag = getActionElementCss(resource.id, action.name, 'drawer-content')
+  const formTag = getActionElementCss(resource.id, action.name, 'form')
+  const footerTag = getActionElementCss(resource.id, action.name, 'drawer-footer')
+  const buttonTag = getActionElementCss(resource.id, action.name, 'drawer-submit')
+
   return (
     <Box
       as="form"
       onSubmit={submit}
       flex
-      flexGrow={1}
       flexDirection="column"
+      data-css={formTag}
     >
-      <DrawerContent>
+      <DrawerContent data-css={contentTag}>
         {action?.showInDrawer ? <ActionHeader {...props} /> : null}
         {action.layout ? action.layout.map((layoutElement, i) => (
           <LayoutElementRenderer
@@ -72,8 +78,8 @@ const Edit: FC<ActionProps> = (props) => {
           />
         ))}
       </DrawerContent>
-      <DrawerFooter>
-        <Button variant="primary" size="lg" type="submit" data-testid="button-save" disabled={loading}>
+      <DrawerFooter data-css={footerTag}>
+        <Button variant="primary" size="lg" type="submit" data-css={buttonTag} data-testid="button-save" disabled={loading}>
           {loading ? (<Icon icon="Fade" spin />) : null}
           {translateButton('save', resource.id)}
         </Button>

diff --git a/src/frontend/components/actions/list.tsx b/src/frontend/components/actions/list.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect } from 'react'
 import { Box, Pagination, Text } from '@adminjs/design-system'
-import { useNavigate, useLocation } from 'react-router'
+import React, { useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router'
 
-import RecordsTable from '../app/records-table/records-table'
-import { ActionProps } from './action.props'
+import allowOverride from '../../hoc/allow-override'
 import useRecords from '../../hooks/use-records/use-records'
 import useSelectedRecords from '../../hooks/use-selected-records/use-selected-records'
+import { getActionElementCss } from '../../utils'
+import RecordsTable from '../app/records-table/records-table'
+import { ActionProps } from './action.props'
 import { REFRESH_KEY } from './utils/append-force-refresh'
-import allowOverride from '../../hoc/allow-override'
 
 const List: React.FC<ActionProps> = ({ resource, setTag }) => {
   const {
@@ -54,8 +55,10 @@ const List: React.FC<ActionProps> = ({ resource, setTag }) => {
     navigate({ search: search.toString() })
   }
 
+  const contentTag = getActionElementCss(resource.id, 'list', 'table-wrapper')
+
   return (
-    <Box variant="white">
+    <Box variant="white" data-css={contentTag}>
       <RecordsTable
         resource={resource}
         records={records}

diff --git a/src/frontend/components/actions/new.tsx b/src/frontend/components/actions/new.tsx
@@ -1,16 +1,17 @@
+import { Box, Button, DrawerContent, DrawerFooter, Icon } from '@adminjs/design-system'
 import React, { FC, useEffect } from 'react'
 import { useNavigate } from 'react-router'
-import { DrawerContent, Box, DrawerFooter, Button, Icon } from '@adminjs/design-system'
 
+import allowOverride from '../../hoc/allow-override'
+import useRecord from '../../hooks/use-record/use-record'
+import { useTranslation } from '../../hooks/use-translation'
+import { RecordJSON } from '../../interfaces'
+import { getActionElementCss } from '../../utils'
+import ActionHeader from '../app/action-header/action-header'
 import PropertyType from '../property-type'
 import { ActionProps } from './action.props'
-import ActionHeader from '../app/action-header/action-header'
-import { RecordJSON } from '../../interfaces'
-import useRecord from '../../hooks/use-record/use-record'
 import { appendForceRefresh } from './utils/append-force-refresh'
-import { useTranslation } from '../../hooks/use-translation'
 import LayoutElementRenderer from './utils/layout-element-renderer'
-import allowOverride from '../../hoc/allow-override'
 
 const New: FC<ActionProps> = (props) => {
   const { record: initialRecord, resource, action } = props
@@ -44,15 +45,21 @@ const New: FC<ActionProps> = (props) => {
     return false
   }
 
+  const contentTag = getActionElementCss(resource.id, action.name, 'drawer-content')
+  const formTag = getActionElementCss(resource.id, action.name, 'form')
+  const footerTag = getActionElementCss(resource.id, action.name, 'drawer-footer')
+  const buttonTag = getActionElementCss(resource.id, action.name, 'drawer-submit')
+
   return (
     <Box
       as="form"
       onSubmit={submit}
       flex
       flexGrow={1}
       flexDirection="column"
+      data-css={formTag}
     >
-      <DrawerContent>
+      <DrawerContent data-css={contentTag}>
         {action?.showInDrawer ? <ActionHeader {...props} /> : null}
         {action.layout ? action.layout.map((layoutElement, i) => (
           <LayoutElementRenderer
@@ -75,8 +82,8 @@ const New: FC<ActionProps> = (props) => {
           />
         ))}
       </DrawerContent>
-      <DrawerFooter>
-        <Button variant="primary" size="lg" type="submit" data-testid="button-save" disabled={loading}>
+      <DrawerFooter data-css={footerTag}>
+        <Button variant="primary" size="lg" type="submit" data-css={buttonTag} data-testid="button-save" disabled={loading}>
           {loading ? (<Icon icon="Fade" spin />) : null}
           {translateButton('save', resource.id)}
         </Button>

diff --git a/src/frontend/components/actions/show.tsx b/src/frontend/components/actions/show.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
 import { DrawerContent } from '@adminjs/design-system'
+import React from 'react'
 
+import allowOverride from '../../hoc/allow-override'
+import { getActionElementCss } from '../../utils'
+import ActionHeader from '../app/action-header/action-header'
 import PropertyType from '../property-type'
 import { ActionProps } from './action.props'
-import ActionHeader from '../app/action-header/action-header'
 import LayoutElementRenderer from './utils/layout-element-renderer'
-import allowOverride from '../../hoc/allow-override'
 
 /**
  * @name ShowAction
@@ -18,8 +19,10 @@ const Show: React.FC<ActionProps> = (props) => {
   const { resource, record, action } = props
   const properties = resource.showProperties
 
+  const contentTag = getActionElementCss(resource.id, action.name, 'drawer-content')
+
   return (
-    <DrawerContent>
+    <DrawerContent data-css={contentTag}>
       {action?.showInDrawer ? <ActionHeader {...props} /> : null}
       {action.layout ? action.layout.map((layoutElement, i) => (
         <LayoutElementRenderer

diff --git a/src/frontend/components/app/action-button/action-button.tsx b/src/frontend/components/app/action-button/action-button.tsx
@@ -5,9 +5,10 @@
 import React, { ReactElement } from 'react'
 import { ActionResponse } from '../../../../backend/actions/action.interface'
 
-import { ActionJSON, buildActionTestId } from '../../../interfaces'
-import { useAction } from '../../../hooks'
 import allowOverride from '../../../hoc/allow-override'
+import { useAction } from '../../../hooks'
+import { ActionJSON, buildActionTestId } from '../../../interfaces'
+import { getActionElementCss } from '../../../utils'
 
 /**
  * @alias ActionButtonProps
@@ -59,9 +60,12 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     throw new Error('ActionButton has to have one child')
   }
 
+  const contentTag = getActionElementCss(resourceId, action.name, 'button')
+
   const WrappedElement = React.cloneElement(firstChild as ReactElement<any>, {
     onClick: handleClick,
     'data-testid': buildActionTestId(action),
+    'data-css': contentTag,
     href,
   })
 

diff --git a/src/frontend/components/app/action-header/action-header.tsx b/src/frontend/components/app/action-header/action-header.tsx
@@ -1,17 +1,16 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+import { Badge, Box, ButtonGroup, cssClass, H2, H3 } from '@adminjs/design-system'
 import React from 'react'
-import { Box, Badge, H3, H2, ButtonGroup, cssClass } from '@adminjs/design-system'
 import { useNavigate } from 'react-router'
-
+import allowOverride from '../../../hoc/allow-override'
+import { useActionResponseHandler, useTranslation } from '../../../hooks'
+import { ActionJSON, buildActionClickHandler } from '../../../interfaces/action'
+import { getActionElementCss, getResourceElementCss } from '../../../utils'
 import Breadcrumbs from '../breadcrumbs'
 import { ActionHeaderProps } from './action-header-props'
 import { actionsToButtonGroup } from './actions-to-button-group'
 import { StyledBackButton } from './styled-back-button'
 
-import { useActionResponseHandler, useTranslation } from '../../../hooks'
-import { ActionJSON, buildActionClickHandler } from '../../../interfaces/action'
-import allowOverride from '../../../hoc/allow-override'
-
 /**
  * Header of an action. It renders Action name with buttons for all the actions.
  *
@@ -63,6 +62,7 @@ const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
       label: translateButton('filter', resource.id),
       onClick: toggleFilter,
       icon: 'SettingsAdjust',
+      'data-css': getResourceElementCss(resource.id, 'filter-button'),
     })
   }
 
@@ -84,9 +84,9 @@ const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
   const cssHeaderMT = action.showInDrawer ? '' : 'lg'
   const cssActionsMB = action.showInDrawer ? 'xl' : 'default'
   const CssHComponent = action.showInDrawer ? H3 : H2
-
+  const contentTag = getActionElementCss(resourceId, action.name, 'action-header')
   return (
-    <Box className={cssClass('ActionHeader')}>
+    <Box className={cssClass('ActionHeader')} data-css={contentTag}>
       {action.showInDrawer ? '' : (
         <Box flex flexDirection="row" px={['default', 0]}>
           <Breadcrumbs resource={resource} actionName={action.name} record={record} />

diff --git a/src/frontend/components/app/action-header/actions-to-button-group.ts b/src/frontend/components/app/action-header/actions-to-button-group.ts
@@ -26,6 +26,7 @@ export const actionsToButtonGroup = (
       onClick: href ? handleClick : undefined,
       'data-testid': buildActionTestId(action),
       buttons: [],
+      'data-css': `${action.resourceId}-${action.name}-button`,
     }
   })
 

diff --git a/src/frontend/components/app/breadcrumbs.tsx b/src/frontend/components/app/breadcrumbs.tsx
@@ -1,12 +1,13 @@
+import { Box, cssClass, Text } from '@adminjs/design-system'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { Box, Text, cssClass } from '@adminjs/design-system'
 
-import { RecordJSON, ResourceJSON } from '../../interfaces'
 import ViewHelpers from '../../../backend/utils/view-helpers/view-helpers'
-import { useTranslation } from '../../hooks/use-translation'
 import allowOverride from '../../hoc/allow-override'
+import { useTranslation } from '../../hooks/use-translation'
+import { RecordJSON, ResourceJSON } from '../../interfaces'
+import { getActionElementCss } from '../../utils'
 
 export const BreadcrumbLink = styled(Link)`
   color: ${({ theme }): string => theme.colors.grey40};
@@ -81,9 +82,9 @@ const Breadcrumbs: React.FC<BreadcrumbProps> = (props) => {
   const action = resource.actions.find((a) => a.name === actionName)
   const h = new ViewHelpers()
   const { translateLabel: tl } = useTranslation()
-
+  const contentTag = getActionElementCss(resource.id, actionName, 'breadcrumbs')
   return (
-    <Box flexGrow={1} className={cssClass('Breadcrumbs')}>
+    <Box flexGrow={1} className={cssClass('Breadcrumbs')} data-css={contentTag}>
       <BreadcrumbLink to={h.dashboardUrl()}>{tl('dashboard')}</BreadcrumbLink>
       {listAction ? (
         <BreadcrumbLink

diff --git a/src/frontend/components/app/default-dashboard.tsx b/src/frontend/components/app/default-dashboard.tsx
@@ -20,7 +20,7 @@ const pageHeaderPaddingX = 250
 export const DashboardHeader: React.FC = () => {
   const { translateMessage } = useTranslation()
   return (
-    <Box position="relative" overflow="hidden">
+    <Box position="relative" overflow="hidden" data-css="default-dashboard">
       <Box
         position="absolute"
         top={50}

diff --git a/src/frontend/components/app/drawer-portal.tsx b/src/frontend/components/app/drawer-portal.tsx
@@ -33,7 +33,7 @@ const DrawerWrapper: React.FC<DrawerWrapperProps> = ({ onMount }) => {
   }, [])
   return (
     <ThemeProvider theme={(window as any).THEME}>
-      <Drawer id={DRAWER_PORTAL_ID} className="hidden" />
+      <Drawer id={DRAWER_PORTAL_ID} className="hidden" data-css="drawer" />
     </ThemeProvider>
   )
 }
@@ -95,6 +95,7 @@ export const DrawerPortal: React.FC<DrawerPortalProps> = ({ children, width }) =
       return (): void => {
         drawerElement.style.width = DEFAULT_DRAWER_WIDTH
         drawerElement.classList.add('hidden')
+        drawerElement.setAttribute('data-css', 'drawer-element')
       }
     }
     return () => undefined