Customizing the Admin UI

[margamorais]

Describe the bug I'm trying to add a new button to the action bar in the sellers page. This is the code I have:

// dependencies
import { addActionBarItem } from '@vendure/admin-ui/core';
// utils
import { map } from 'rxjs/operators';

export default [
    addActionBarItem({
        id: 'custom-action',
        label: 'custom-action, 
        locationId: 'seller-detail',
        buttonColor: 'primary',
        buttonStyle: 'outline',
        buttonState(context) {
            return context.entity$.pipe(
                map(seller => {
                    console.log('SELLER --> ', seller);
                    return seller?.name !== '' && seller?.email !== '' && seller?.iban !== ''
                        ? { disabled: false, visible: true }
                        : { disabled: true, visible: true };
                }),
            );
        },
        onClick(event, context) {
            context.entity$.subscribe(entity => {
                if (entity) {
                    console.log('ENTITY --> ', entity);
                    // Handle entity data
                } else {
                    console.log('ENTITY is undefined');
                    // Handle undefined
                }
            });
        },
    }),
];

The problem is that entity is always undefined.

My goals are: 1) Check if the seller entity has the fields name, iban and email filled, and then the button will be enabled. 2) When clicking the button I need to call my service using the injector, or calling a mutation.

To Reproduce Steps to reproduce the behavior:

1. Follow the documentation in https://docs.vendure.io/guides/extending-the-admin-ui/add-actions-to-pages/#using-onclick
2. Add an action bar button in the sellers page
3. Add the onClick function
4. Try to access the entity
5. The entity is undefined

Expected behavior The entitity shouldn't be undefined and we should be able to see its data.

Environment (please complete the following information):

• @vendure/core version: 2.2.6
• Nodejs version: 21.0.6
• Database (mysql/postgres etc): 15.7

[lgoebkes]

Based on this: https://docs.vendure.io/guides/extending-the-admin-ui/add-actions-to-pages/. I assume (without testing) you need to set the property buttonState instead of declaring it as function. So more like this:

buttonState: context => {
          return context.entity$.pipe(
                map(seller => {
                    console.log('SELLER --> ', seller);
                    return seller?.name !== '' && seller?.email !== '' && seller?.iban !== ''
                        ? { disabled: false, visible: true }
                        : { disabled: true, visible: true };
                }),
            );
        },

But see this response as a guess

Edit: Fixed typo

[margamorais]

I tried to use this buttonState, however I get the same problem:

I don't know if I'm trying to access the wrong object...

If I access a seller that has already been created, I can see the seller data:

But I need to be able to access the fields data before the seller is created, because I want to use my custom mutation.