Closes: #9525 - Add split button functionality to table rows

[huntabyte]

Fixes: #9525

Utilizing the extra_buttons argument within the ActionsColumn class, I added an additional button that takes the user directly to the edit page, removing a click from the workflow.

The edit button was added through the actions of the NetBoxTable. The existing Edit link inside the dropdown is retained but can be removed if requested by maintainers/users.

[jeremystretch]

Per my comment here, the intent of FR #9525 is to split the dropdown button into separate link and dropdown components as in this example, rather than to add another button (which largely detracts from the purpose of the dropdown menu).

[huntabyte]

I will implement the changes accordingly. Thanks for the feedback!

[huntabyte]

Before pushing the updated changes @jeremystretch - Do you feel it is necessary to retain the first action in the dropdown menu along with it being the direct link, or should it be removed from the dropdown and only accessible through the direct link?

[jeremystretch]

@huntabyte the first action should only appear as the direct link and not in the dropdown menu.

[huntabyte]

Added split button functionality to the ActionsColumn.render() method.

 

The use of a split button is controlled by the argument split_actions which defaults to True.

def __init__(self, *args, actions=('edit', 'delete', 'changelog'), extra_buttons='', split_actions=True, **kwargs):
        super().__init__(*args, **kwargs)

        self.extra_buttons = extra_buttons
        self.split_actions = split_actions

        # Determine which actions to enable
        self.actions = {
            name: self.actions[name] for name in actions
        }

 

The first modification that was made is within the for loop. In order to gain access to the index which will be used to access the first action item, I enumerated the object to gain access to the counter of each item.

for idx, (action, attrs) in enumerate(self.actions.items()):

 

Inside the loop, the number of action items is checked, if there is only one action, a standard button will be rendered with a direct link to that action's view. This reduces unnecessarily rendering dropdowns or split buttons for a single action. This was implemented to better support the single-action objects, such as VLAN Device Interfaces.

# If only a single action exists, render a regular button
if len(self.actions.items()) == 1:
    html += (
        f'<a class="btn btn-sm btn-secondary" href="{url}{url_appendix}" type="button">'
        f'<i class="mdi mdi-{attrs.icon}"></i></a>'
    )

 

If there is more than one action, the method checks to see if split_actions is True and that the idx is 0 (idx being the index of the current action item). If the conditions are met, the direct link button is appended to the html variable with the appropriate icon and URL. The dropdown class must exist alongside the btn-group class to prevent an overflow issue.

# Creates split button for the first action with direct link and icon
elif self.split_actions and idx == 0:
    html += (
        f'<span class="btn-group dropdown">'
        f'<a class="btn btn-sm btn-secondary" href="{url}{url_appendix}" type="button">'
        f'<i class="mdi mdi-{attrs.icon}"></i></a>'
    )

 

Finally, for all other actions, a standard list item with the appropriate URL, icon, and title is appended to the links list.

# Creates standard action dropdown menu items
else:
    links.append(
        f'<li><a class="dropdown-item" href="{url}{url_appendix}">'
        f'<i class="mdi mdi-{attrs.icon}"></i> {attrs.title}</a></li>'
    )

 

Lastly, I updated the following conditional which includes variables that are empty if self.split_actions is True else contain the necessary HTML to render the regular dropdown menu. I added these variables in an attempt to reduce the HTML duplication - if there is a better way of doing so, I am all ears.

# Create the actions dropdown menu
if links:
    dropdown_icon = '' if self.split_actions else '<i class="mdi mdi-wrench"></i>'
    dropdown_class = '' if self.split_actions else '<span class="dropdown">'
    html += (
        f'{dropdown_class}'
        f'<a class="btn btn-sm btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">'
        f'{dropdown_icon}'
        f'<span class="visually-hidden">Toggle Dropdown</span></a>'
        f'<ul class="dropdown-menu">{"".join(links)}</ul></span>'
    )

[jeremystretch]

Excellent work, @huntabyte! Thanks for this!