export function ChannelActions()

in dashboards-notifications/public/pages/Channels/components/ChannelActions.tsx [34:121]
69 lines of code
7 McCabe index (conditional complexity)

export function ChannelActions(props: ChannelActionsProps) {
  const coreContext = useContext(CoreServicesContext)!;
  const servicesContext = useContext(ServicesContext)!;
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  const actions: ChannelActionsParams[] = [
    {
      label: 'Edit',
      disabled: props.selected.length !== 1,
      href: `#${ROUTES.EDIT_CHANNEL}/${props.selected[0]?.config_id}`,
    },
    {
      label: 'Delete',
      disabled: props.selected.length === 0,
      modal: DeleteChannelModal,
      modalParams: { refresh: props.refresh },
    },
    {
      label: 'Mute',
      disabled: props.selected.length !== 1 || !props.selected[0].is_enabled,
      modal: MuteChannelModal,
      modalParams: { refresh: props.refresh, setSelected: props.setSelected },
    },
    {
      label: 'Unmute',
      disabled: props.selected.length !== 1 || props.selected[0].is_enabled,
      action: async () => {
        const channel = { ...props.selected[0], is_enabled: true };
        servicesContext.notificationService
          .updateConfig(channel.config_id, channel)
          .then((resp) => {
            coreContext.notifications.toasts.addSuccess(
              `Channel ${channel.name} successfully unmuted.`
            );
            props.setSelected([channel]);
            setTimeout(() => props.refresh(), SERVER_DELAY);
          })
          .catch((error) => {
            coreContext.notifications.toasts.addError(error?.body || error, {
              title: 'Failed to unmute channel',
            });
          });
      },
    },
  ];

  return (
    <ModalConsumer>
      {({ onShow }) => (
        <EuiPopover
          panelPaddingSize="none"
          button={
            <EuiButton
              iconType="arrowDown"
              iconSide="right"
              disabled={props.selected.length === 0}
              onClick={() => setIsPopoverOpen(!isPopoverOpen)}
            >
              Actions
            </EuiButton>
          }
          isOpen={isPopoverOpen}
          closePopover={() => setIsPopoverOpen(false)}
        >
          {actions.map((params) => (
            <EuiContextMenuItem
              key={params.label}
              disabled={params.disabled}
              onClick={() => {
                setIsPopoverOpen(false);
                if (params.modal) {
                  onShow(params.modal, {
                    selected: props.selected,
                    ...(params.modalParams || {}),
                  });
                }
                if (params.href) location.assign(params.href);
                if (params.action) params.action();
              }}
            >
              {params.label}
            </EuiContextMenuItem>
          ))}
        </EuiPopover>
      )}
    </ModalConsumer>
  );
}