feat: change buttons in record in list

package.json

@@ -75,7 +75,7 @@
   },
   "homepage": "https://github.com/SoftwareBrothers/admin-bro#readme",
   "peerDependencies": {
-    "@admin-bro/design-system": "^1.7.0-beta.12"
+    "@admin-bro/design-system": "^1.7.0-beta.13"
   },
   "dependencies": {
     "@babel/core": "^7.10.2",
@@ -114,7 +114,7 @@
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@admin-bro/design-system": "^1.7.0-beta.12",
+    "@admin-bro/design-system": "^1.7.0-beta.13",
     "@babel/cli": "^7.4.4",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",

src/backend/actions/index.ts

@@ -17,11 +17,11 @@ export * from './bulk-delete/bulk-delete-action'
 export * from './action.interface'
 
 export const ACTIONS: {[key in BuildInActions]: any} = {
-  delete: DeleteAction,
-  show: ShowAction,
   new: NewAction,
-  edit: EditAction,
-  search: SearchAction,
   list: ListAction,
+  show: ShowAction,
+  edit: EditAction,
+  delete: DeleteAction,
   bulkDelete: BulkDeleteAction,
+  search: SearchAction,
 }

src/backend/bundler/bundler.js

@@ -29,6 +29,7 @@ async function build({
   if (watch) {
     const bundle = await rollup.rollup(inputOptions)
     if (process.env.DEBUG_BUNDLER) {
+      // eslint-disable-next-line no-console
       console.log(util.inspect(bundle.watchFiles, { maxArrayLength: null }))
     }
     const spinner = ora('Bundling files')

src/frontend/components/app/action-header/action-header.tsx

@@ -40,17 +40,15 @@ export const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
   const resourceId = resource.id
   const params = { resourceId, recordId: record?.id }
 
-  const handleActionClick = (event, sourceAction: ActionJSON): void => {
-    event.preventDefault()
-    event.stopPropagation()
-    return buildActionClickHandler({
+  const handleActionClick = (event, sourceAction: ActionJSON): void => (
+    buildActionClickHandler({
       action: sourceAction,
       params,
       actionResponseHandler,
       search: location.search,
       push: history.push,
     })(event)
-  }
+  )
 
   const actionButtons = actionsToButtonGroup({
     actions: record

src/frontend/components/app/action-header/actions-to-button-group.spec.ts

@@ -6,7 +6,7 @@ import { actionsToButtonGroup } from './actions-to-button-group'
 
 import '../../spec/action-json.factory'
 
-describe.only('actionsToButtonGroup', () => {
+describe('actionsToButtonGroup', () => {
   let actions: Array<ActionJSON>
   const params = {
     recordId: 'recordId',
@@ -17,10 +17,6 @@ describe.only('actionsToButtonGroup', () => {
   const search = ''
   const handleClick = () => true
 
-  beforeEach(() => {
-
-  })
-
   context('flat actions (no nesting)', () => {
     const actionsCount = 5
     let buttonGroupProps: ButtonGroupProps['buttons']

src/frontend/components/app/records-table/record-in-list.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { useHistory } from 'react-router-dom'
 import {
-  Placeholder, TableRow, TableCell, CheckBox, DropDown,
-  DropDownTrigger, Icon, DropDownMenu, DropDownItem, Button,
+  Placeholder, TableRow, TableCell, CheckBox, ButtonGroup,
 } from '@admin-bro/design-system'
 
-import ActionButton from '../action-button/action-button'
+import { useLocation } from 'react-router'
 import PropertyType from '../../property-type'
-import { RecordJSON, ResourceJSON } from '../../../interfaces'
-import ViewHelpers from '../../../../backend/utils/view-helpers/view-helpers'
+import { ActionJSON, buildActionClickHandler, RecordJSON, ResourceJSON } from '../../../interfaces'
 import { display } from './utils/display'
 import { ActionResponse, RecordActionResponse } from '../../../../backend/actions/action.interface'
 import mergeRecordResponse from '../../../hooks/use-record/merge-record-response'
+import { useActionResponseHandler } from '../../../hooks'
+import { actionsToButtonGroup } from '../action-header/actions-to-button-group'
 
 export type RecordInListProps = {
   resource: ResourceJSON;
@@ -29,6 +29,17 @@ export const RecordInList: React.FC<RecordInListProps> = (props) => {
   } = props
   const [record, setRecord] = useState<RecordJSON>(recordFromProps)
   const history = useHistory()
+  const location = useLocation()
+
+  const handleActionCallback = useCallback((actionResponse: ActionResponse) => {
+    if (actionResponse.record && !actionResponse.redirectUrl) {
+      setRecord(mergeRecordResponse(record, actionResponse as RecordActionResponse))
+    } else if (actionPerformed) {
+      actionPerformed(actionResponse)
+    }
+  }, [actionPerformed, record])
+
+  const actionResponseHandler = useActionResponseHandler(handleActionCallback)
 
   useEffect(() => {
     setRecord(recordFromProps)
@@ -38,36 +49,51 @@ export const RecordInList: React.FC<RecordInListProps> = (props) => {
 
   const show = record.recordActions.find(({ name }) => name === 'show')
   const edit = record.recordActions.find(({ name }) => name === 'edit')
-  const actionName = (show && show.name) || (edit && edit.name)
+  const action = show || edit
 
-  const handleClick = (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void => {
-    const h = new ViewHelpers()
-    const targetTagName = (event.target as HTMLElement).tagName.toLowerCase()
-
-    if (actionName
-        && targetTagName !== 'a'
-        && targetTagName !== 'button'
-        && targetTagName !== 'svg') {
-      const actionUrl = h.recordActionUrl({
-        resourceId: resource.id,
-        recordId: record.id,
-        actionName,
-        search: window.location.search,
-      })
-      history.push(actionUrl)
+  const handleClick = (event): void => {
+    if (action
+      && event.targetTagName !== 'a'
+      && event.targetTagName !== 'button'
+      && event.targetTagName !== 'svg'
+    ) {
+      buildActionClickHandler({
+        action,
+        params: { resourceId: resource.id, recordId: record.id },
+        actionResponseHandler,
+        search: location.search,
+        push: history.push,
+      })(event)
     }
   }
 
-  const handleActionPerformed = useCallback((actionResponse: ActionResponse) => {
-    if (actionResponse.record && !actionResponse.redirectUrl) {
-      setRecord(mergeRecordResponse(record, actionResponse as RecordActionResponse))
-    } else if (actionPerformed) {
-      actionPerformed(actionResponse)
-    }
-  }, [actionPerformed, record])
+  const actionParams = { resourceId: resource.id, recordId: record.id }
+
+  const handleActionClick = (event, sourceAction: ActionJSON): void => (
+    buildActionClickHandler({
+      action: sourceAction,
+      params: actionParams,
+      actionResponseHandler,
+      search: location.search,
+      push: history.push,
+    })(event)
+  )
+
+  const buttons = [{
+    icon: 'OverflowMenuHorizontal',
+    variant: 'light',
+    label: null,
+    buttons: actionsToButtonGroup({
+      actions: recordActions,
+      params: actionParams,
+      search: location.search,
+      handleClick: handleActionClick,
+    }),
+  }]
+
 
   return (
-    <TableRow onClick={(event): void => handleClick(event)} data-id={record.id}>
+    <TableRow onClick={handleClick} data-id={record.id}>
       <TableCell className={isSelected ? 'selected' : 'not-selected'}>
         {onSelect && record.bulkActions.length ? (
           <CheckBox
@@ -98,29 +124,7 @@ export const RecordInList: React.FC<RecordInListProps> = (props) => {
       ))}
       <TableCell key="options">
         {recordActions.length ? (
-          <DropDown stick="right">
-            <DropDownTrigger>
-              <Button variant="text" size="icon" data-testid="actions-dropdown">
-                <Icon icon="OverflowMenuHorizontal" color="grey100" />
-              </Button>
-            </DropDownTrigger>
-            <DropDownMenu minWidth="200px">
-              {recordActions.map(action => (
-                <ActionButton
-                  key={action.name}
-                  action={action}
-                  resourceId={resource.id}
-                  recordId={record.id}
-                  actionPerformed={handleActionPerformed}
-                >
-                  <DropDownItem>
-                    <Icon icon={action.icon} />
-                    {action.label}
-                  </DropDownItem>
-                </ActionButton>
-              ))}
-            </DropDownMenu>
-          </DropDown>
+          <ButtonGroup buttons={buttons} />
         ) : ''}
       </TableCell>
     </TableRow>

src/frontend/hooks/use-action/use-action.ts

@@ -1,8 +1,3 @@
-import React from 'react'
-/* eslint-disable no-restricted-globals */
-/* eslint-disable no-undef */
-/* eslint-disable no-alert */
-import { AxiosResponse } from 'axios'
 import { useLocation, useHistory } from 'react-router'
 
 import { ActionResponse } from '../../../backend/actions/action.interface'
@@ -11,7 +6,6 @@ import { ActionJSON, buildActionCallApiTrigger, buildActionClickHandler } from '
 
 import { DifferentActionParams, ActionCallCallback, UseActionResult } from './use-action.types'
 import { actionHref } from '../../interfaces/action/action-href'
-import { callActionApi } from '../../interfaces/action/call-action-api'
 import { useActionResponseHandler } from './use-action-response-handler'
 
 /**

src/frontend/interfaces/action/build-action-click-handler.ts

@@ -1,3 +1,6 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-undef */
+/* eslint-disable no-alert */
 import { DifferentActionParams, useActionResponseHandler } from '../../hooks'
 import { actionHasComponent } from './action-has-component'
 import { actionHref } from './action-href'

yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@admin-bro/design-system@^1.7.0-beta.12":
-  version "1.7.0-beta.12"
-  resolved "https://registry.yarnpkg.com/@admin-bro/design-system/-/design-system-1.7.0-beta.12.tgz#2e97de7f553b20f105d41ea2152ebf0bf5f5f16e"
-  integrity sha512-mF5lxh+TQ/42GFIu36tZTJXe9jbDD+CcarGUFUNQ8ZrwUHXX03Lkj0OiNnzst1omCGFDbs5MPu6NQv6+dliMtw==
+"@admin-bro/design-system@^1.7.0-beta.13":
+  version "1.7.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@admin-bro/design-system/-/design-system-1.7.0-beta.13.tgz#36fc051f98ed5afcb6588c5acbe761c0f766dc38"
+  integrity sha512-HZUUBuCUg6LppY6A2+ZFu751H0MhbH6jENiV9si1W7VrZk6Jmem3nkkxIhGCOElTkNYAf0lFvz3CF1ZGJCLOOw==
   dependencies:
     "@carbon/icons-react" "^10.14.0"
     jw-paginate "^1.0.4"