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.

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,

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.

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