Handling user actions

handling user actions

User actions are all the things you can do to the items displayed in the UI, such as create, edit, delete, sync, open a transmogrify modal...

These are available in the header of a detail screen, with individual list screen items, and in list toolbars.

20230628183905 20230628183932 20230628183949

There will be significant overlaps between the lists of actions available for each item,
but also create is only available in the list toolbar,
while edit is only available for individual items.

detail page:

import { useHubNamespaceActions } from './hooks/useHubNamespaceActions';

  const pageActions = useHubNamespaceActions();

  return (
    <PageLayout>
      <PageHeader
        headerActions={
          <PageActions<HubNamespace>
            actions={pageActions}

list page:

import { useHubNamespaceActions } from './hooks/useHubNamespaceActions';
import { useHubNamespaceToolbarActions } from './hooks/useHubNamespaceToolbarActions';

  const toolbarActions = useHubNamespaceToolbarActions();
  const rowActions = useHubNamespaceActions();

  return (
    <PageTable<HubNamespace>
      toolbarActions={toolbarActions}
      rowActions={rowActions}

use*Actions is a hook that returns the list of actions, with icon, label, and an onClick function that triggers the action, or a href to navigate to. (see details in useHubNamespaceActions, useHubNamespaceToolbarActions)

The onClick function itself would typically come from another, action-specific hook, such as...

import { useDeleteHubNamespaces } from './useDeleteHubNamespaces';

  const deleteHubNamespaces = useDeleteHubNamespaces(() => null);

        label: t('Delete selected namesapces'),
        onClick: deleteHubNamespaces,

(see useDeleteHubNamespaces)

selection: PageActionSelection.Single vs .Multiple seems to affect whether onClick gets one item or multiple, isDanger makes it red, type allows for PageActionType.Separator and PageActionType.Button (any more?) isPinned pulls it out of the kebab,

TODO: how to disabled/invisible action, possible, but find examples

bulk actions

Most actions can be run for 1 to N items, this is called bulk actions, and usually implemented by the tooling calling action onClick for each item in batches, and reporting results in the same tasks modal. (And available from list screen toolbar, when items are selected in the list.)

The hook calls const bulkAction = useBulkConfirmation<Collection>(); for the delete confirmation modal. Not sure but probably BulkActionDialog for other actions?

TODO: tasks modal (is that ^?).

All actions (except for navigation) now report their results in a tasks modal, this replaces any success/failure alerts.