New data UI

[aptkingston]

Description

This PR is a large refactor of how the data UI functions - making views a first class citizen and relating everything in Budibase back to data.

Designs: https://www.figma.com/board/kj4VXQQLcls3cemiFceZP8/3.0?node-id=54-10194&t=uNzp8ox3Wo8zBUJN-0

Views are now displayed horizontally in a new bar

Old views will also appear here, and render the old view UI as always. The only change is the removal of the title, as this is redundant. An old view for example:

Overflowed views are handled by a dropdown menu, which has a nested menu to support editing or deleting them as well:

Views are created inline instead of in a modal:

Row actions are available for both tables and views. They can be toggled on and off for views:

Automations which use the selected table as their trigger are now shown via a new button. This is not available on views as views cannot be used in automations.

Screens which use the selected table or view (anywhere at all - it searches for the ID in the entire screen) are shown via a new button. This is available on both tables and views:

Screens and automations can be generated for the selected table or view. Tables support both, views only support screens. Creating an automation will instantly create it and auto-name it. Creating a screen will skip most of the screen creation wizard and only ask you for the final decision - what type of table/form screen do you want:

Access is still available as-is for both tables and views, and will be redesigned in an upcoming ticket. The only change is that editing custom roles is now available everywhere you can see access, rather than only hidden inside the users table:

Automations are now grouped by trigger table first, then grouped by trigger type for all other automations:

Row actions can be deleted or renamed via their automations:

Auto generated automations no longer are prefixed by the table name. Automation autonaming has been improved and will generate sequential non-clashing names.

Row action usage

When in the data section, row actions are available using a new actions dropdown button. Opening the action dropdown for a row will also highlight that row so that you know which row the actions are targeting (help for wide rows):

Rows are refreshed after actions execute, so here's a quick example of approving a request:

Screen.Recording.2024-09-04.at.11.30.54.mov

In apps, row actions can be triggered using the new "row action" button action. This allows you to pick the table/view, row ID and row action to run. This also includes parameters for requiring confirmation:

Collapsed button groups

As seen in data section row actions, buttons can now be collapsed into a single dropdown. This is now available:

• In data section row actions
• In button group components
• When adding buttons to tables
• When adding buttons to form blocks and multi step form blocks

Row action button templates

Row actions are available as button templates, to save time when building your UI. When adding buttons to tables or form blocks, you'll see a new dropdown menu when adding buttons (if your datasource has any row actions). This dropdown will let you instantly create a fully configured button to run your row action with a single click:

You can create a custom button as always using the "Custom button" option. If you don't have any row actions on your datasource, a custom button will be automatically created.

Row actions in autoscreens

Creating any variant of a table or form autoscreen will now include row actions. They will be added to tables (in the case of inline table editing) or added to your forms (in the case of editing rows inside forms for table autoscreens or form autoscreens og the update variant).

If you have lots of row actions we will automatically collapse your button group into a dropdown to avoid having a huge list of buttons.

Addresses

• https://linear.app/budibase/issue/BUDI-8570/make-views-part-of-the-core-flow
• https://linear.app/budibase/issue/BUDI-8432/button-action-for-row-actions
• Lots of other unticketed work, but described in https://linear.app/budibase/project/row-actions-2d0d3dff3761/overview

Feature branch env

Feature Branch Link

[deanhannigan]

Amazing work @aptkingston! So many QoL updates jammed into one PR! 🚀

The data section is really solid and given the scale of the changes, in general, I saw only a few minor bugs:

• BUG - screen and automations buttons present in the User section header
  • They don't do anything but should be removed
• BUG - Access Roles revert in the data section UI when the popover is closed and reopened
  • The underlying permission HAS been changed, it just resets to the previous value.
  • This happens in both the table and view screens in the data section
• BUG - filtering on Google Sheets views, saves but does nothing? I'm not 100% sure that this is related to your changes.

[aptkingston]

Appreciate the review!

BUG - screen and automations buttons present in the User section header
They don't do anything but should be removed

Nice one, yep I deliberately removed the generate button for the users table, but forgot to remove these. Fixed.

BUG - Access Roles revert in the data section UI when the popover is closed and reopened
The underlying permission HAS been changed, it just resets to the previous value.
This happens in both the table and view screens in the data section

You're right, but I think actually I'll leave this as it's being completely rewritten in my next PR - and none of this will be shipped until that work is done too.

BUG - filtering on Google Sheets views, saves but does nothing? I'm not 100% sure that this is related to your changes.

99.9% sure this is nothing to do with my changes... I hope anyway!

[deanhannigan]

LGTM!