Conditional create/update/delete actions leads to inconsistent alignment of actions on index

[dmason30]

• Laravel Version: 9.x
• Nova Version: 4.15.x

Description:

If your policy for a resource makes the various actions only display under certain conditions the index row actions can seem a little disorganised:

Proposal

Show disabled buttons instead of hiding them when not authorized
Patch: https://gist.github.com/dmason30/86e606ff913c10f7e37118f491dd9066

Note: A disabled action will only be displayed if any row is authorized to run that action, so on a resource with just view enabled you would still get this:

Alternative Proposal

I propose adopting a grid style instead so that the above would display like this:

Note: By using grid a column will only be defined if any row contains that action, so on a resource with just view enabled you would still get this:

Changes Required in core

Container
Before

<div class="flex items-center justify-end space-x-0 text-gray-400">

After

<div class="grid grid-cols-4 gap-x-2 items-center space-x-0 text-gray-400">

Button
Before

<a class="toolbar-button hover:text-primary-500 px-2">

After

<a class="toolbar-button md:col-start-1 aspect-square hover:text-primary-500">

Work around

Click for CSS to make this work externally if not added to core

[data-testid="resource-table"] tbody tr td:last-child > div {
    display: grid;
    grid-template-columns: [actions] 1fr [view] 1fr [edit] 1fr [delete] 1fr;
    gap: 0 0.5rem;
}

[data-testid="resource-table"] tbody tr td:last-child > div > .toolbar-button {
    aspect-ratio:1;
    padding-left:0;
    padding-right:0;
}

[data-testid="resource-table"] tbody tr td:last-child > div > div:first-child {
    grid-column-start: actions;
}

[data-testid="resource-table"] tbody tr td:last-child > div > [aria-label="View"] {
    grid-column-start: view;
}

[data-testid="resource-table"] tbody tr td:last-child > div > [aria-label="Edit"], [data-testid="resource-table"] tbody tr td:last-child > div > [aria-label="Edit Attached"] {
    grid-column-start: edit;
}

[data-testid="resource-table"] tbody tr td:last-child > div > [aria-label="Delete"],
[data-testid="resource-table"] tbody tr td:last-child > div > [aria-label="Detach"],
[data-testid="resource-table"] tbody tr td:last-child > div > [aria-label="Restore"] {
    grid-column-start: delete;
}

Credit: Cephandrius (@ianrobertsFF) on discord https://discord.com/channels/297040613688475649/486650473336537098/1022908082268934185

[ianrobertsFF]

I support this message

[mrleblanc101]

I suggest you always display the button in a disbled state when aligning with a Grid.
Otherwise it look like a bug.

[dmason30]

How would it look like a bug to have the icons display in consistent columns?

[mrleblanc101]

Empty column look very odd to me. That's why I say the button should still be shown, but in a disabled state.

[dmason30]

There are no empty columns?
Using the grid it only shows a column if at least one row has an action for that column
If all rows do not have that action it continues to display to the right first.

We did discuss the disable buttons would be better but they do not render the buttons that are missing so I am unable to produce a working example for that.

[mrleblanc101]

Something like this

[dmason30]

@crynobone Here is a patch as a proof of concept if you wanted to add disabled buttons like the above...

https://gist.github.com/dmason30/86e606ff913c10f7e37118f491dd9066

[davidhemphill]

PR incoming for the second approach of showing disabled buttons.

[dmason30]

Great stuff David, looking forward to it here was my POC for disabled buttons🤣
https://gist.github.com/dmason30/86e606ff913c10f7e37118f491dd9066