[Concept Release/Request] Nova Action Buttons on Details/Index Page (Code Available)

[RealityGamin]

I would love to have a function where we can have a visible buttons on the details page, I saw few packages on novapackages but they are either broken, incomplete, or they just remove the dropdown list in general and swap it for buttons! So I would love to share with you guys a way of implementing it, and hopefully the nova staff might be interested in the concept, and perhaps they can expand on it, or if this is really requested I could release a novapackage to do the same thing with more features like Disabled Buttons/Smaller buttons/Larger Buttons.

You can extend this further by making the buttons standalone on the index page! and create something like:

GenerateReport::make('Report')->standalone()->buttonStyle('success')->hideFromDropDown();

Or we can extend this further by passing a function to the buttons! And you can also add more styles to the array! Again, so many beautiful possibilities, if nova staff are interested, I could make a pull request with possible implementation!

---

---

Step 1: Lets use our new method on our actions in your ResourceName method, for this example I created a "ApproveRequest" action.
Location: YOUR_APP/Nova/Resources/

   /**
    * Get the actions available for the resource.
    *
    * @return array
    */
   public function actions(NovaRequest $request)
   {
       return [
           ApproveRequest::make('Approve')->buttonStyle('success'),
           ApproveRequest::make('Approve')->buttonStyle('danger'),
           ApproveRequest::make('Approve')->buttonStyle('doesnt exist word'),
           ApproveRequest::make('Approve'),
       ];
   }

Step 2: Lets modify the Action.php (To be able to create a method that can be used on the action and pass it onto the Vue)
Location: vendor/laravel/nova/src/Actions/Action.php

    //Set the custon variable
    private $buttonStyle = null;

    //our button style accepting a style passed from the ActionName::make()->buttonStyle('');
    public function buttonStyle(string $style = null)
    {
        //You can add more styles for warning? info?
        $styles = [
            'success' => [
                'text-white bg-green-500 border-green-500 focus:ring ring-green-200 hover:enabled:bg-green-400 hover:enabled:border-green-400 dark:text-green-900 dark:ring-green-600',
            ],
            'danger' => [
                'text-white bg-red-500 border-red-500 focus:ring ring-red-200 hover:enabled:bg-red-400 hover:enabled:border-red-400 dark:text-red-900 dark:ring-red-600',
            ],
        ];
        //Return the style else default to primary
        $this->buttonStyle = $styles[$style] ?? [
            'text-white bg-primary-500 border-primary-500 focus:ring ring-primary-200 hover:enabled:bg-primary-400 hover:enabled:border-primary-400 dark:text-gray-900 dark:ring-gray-600',
        ];
        return $this;
    }

    /**
     * Prepare the action for JSON serialization.
     *
     * @return array<string, mixed>
     */
    public function jsonSerialize() : array
    {
        $request = app(NovaRequest::class);

        return array_merge([
            'cancelButtonText' => Nova::__($this->cancelButtonText),
            'component' => $this->component(),
            'confirmButtonText' => Nova::__($this->confirmButtonText),
            'confirmText' => Nova::__($this->confirmText),
            'destructive' => $this instanceof DestructiveAction,
            'name' => $this->name(),
            'uriKey' => $this->uriKey(),
            'fields' => FieldCollection::make($this->fields($request))
                ->filter->authorizedToSee($request)
                ->each->resolveForAction($request)
                ->applyDependsOnWithDefaultValues($request)
                ->values()
                ->all(),
            'showOnDetail' => $this->shownOnDetail(),
            'showOnIndex' => $this->shownOnIndex(),
            'showOnTableRow' => $this->shownOnTableRow(),
            'standalone' => $this->isStandalone(),
            'buttonStyle' => $this->buttonStyle, //inserted code
            'modalSize' => $this->modalSize,
            'modalStyle' => $this->modalStyle,
            'responseType' => $this->responseType,
            'withoutConfirmation' => $this->withoutConfirmation,
        ], $this->meta());
    }

Step 3: Lets modify the ActionDropDown.vue
Location: vendor/laravel/resources/js/components/Dropdowns/ActionDropdown.vue
We are inserting here the div class="flex" after <components> area

        <div class="flex">
            <!-- Buttons -->
            <template v-for="action in actions">
                <button :dusk="`${triggerDuskAttribute}-${action.uriKey}`" @click="() => handleActionClick(action.uriKey)"
                    :title="action.name"
                    class="border inline-flex items-center justify-center appearance-none cursor-pointer rounded text-sm font-bold focus:outline-none relative disabled:cursor-not-allowed shadow h-9 px-3"
                    :class="action.buttonStyle ?? 'text-white bg-primary-500 border-primary-500 focus:ring ring-primary-200 hover:enabled:bg-primary-400 hover:enabled:border-primary-400 dark:text-gray-900 dark:ring-gray-600'"
                    style="margin-right: 0.5rem;" :destructive="action.destructive">
                    {{ action.name }}
                </button>
            </template>

            <!-- Dropdown Section (Code Unchanged Below) -->
            <Dropdown>
                <template #default>
                    <slot name="trigger">
                        <Button @click.stop :dusk="triggerDuskAttribute" variant="ghost" icon="ellipsis-horizontal"
                            v-tooltip="{
                                placement: 'bottom',
                                distance: 10,
                                skidding: 0,
                                content: __('Actions'),
                            }" />
                    </slot>
                </template>

                <template #menu>
                    <DropdownMenu width="auto" class="px-1">
                        <ScrollWrap :height="250" class="divide-y divide-gray-100 dark:divide-gray-800 divide-solid">
                            <slot name="menu" />

                            <div v-if="actions.length > 0" class="py-1">
                                <DropdownMenuItem v-for="action in actions" :key="action.uriKey"
                                    :data-action-id="action.uriKey" as="button" class="border-none"
                                    @click="() => handleActionClick(action.uriKey)" :title="action.name"
                                    :destructive="action.destructive">
                                    {{ action.name }}
                                </DropdownMenuItem>
                            </div>
                        </ScrollWrap>
                    </DropdownMenu>
                </template>
            </Dropdown>
        </div>

[jkbennemann]

I would be highly interested in a nova package, or even better if that would be included into nova core one day 👍

[muhammadsaeedparacha]

@jkbennemann
@RealityGamin

https://codeberg.org/Lednerb/nova-action-button-selectors

This was the best package but it broke after v4.29.x so I forked and updated my version and have sent a PR to the main.
If you want to use my fork:

{
            "type": "vcs",
            "url": "https://codeberg.org/muhammadsaeedparacha/nova-action-button-selectors"
        },

[Radiergummi]

@davidhemphill I don't know if you're currently working on a Nova release, but I'd like to ask you to consider adding an option for action buttons in the interface.
We have lots of situations where we have custom actions that should be as accessible as possible to users, which get confused by the hard-to-miss dots button; take a look here:

For our application, customers cannot be created with the normal form, since we need to create a few unrelated entities at once, like the owner user etc. So the only option I'm left with is having a custom action, which cannot be shown above the customer list. I hope you do agree that this is really awful UX for our sales employees, and I don't really understand the decision to not allow first-class primary actions here.
If you would reconsider this, we'd be immensely grateful!

[webard]

Action buttons and/or action icons with steering what should be button, what icon and what is hidden under Action menu will be awesome!

There are some less important actions, like report generating or mass changes that are not often ran, can be hidden, but some of action are used daily, so button or icon for them is great idea.