First Look at the New Features 1.1 UI

Posted Oct 15, 2012 // 8 comments

Out with the Old

The Drupal Features module has always had a quirky user interface. I'm talking about the "New Feature" or the "Recreate" screens. In those screens you see the name, description and other general information at the top. On the right is a summary of what components/items are exported to the feature. On the left there is a Components drop-down selector. To add a new item to the feature, you first select the Component from the drop-down (like Fields), and then you click the checkbox for the Item you wish to add (like a specific field name).

Each time you click a checkbox, an Ajax call is made to refresh the summary shown on the right. This adds the item you just selected to the summary, and also computes new "auto-detected" items that are also added. For example, when you select a Content Type, all of the Fields for that Content Type are automatically detected and added.

For years Drupal users have complained about this and suggested improvements. I've summarized the issues over the years into the following (probably incomplete) list:

• Ajax callback whenever an item is clicked is slow and cumbersome. Makes it a pain to select multiple items.
• Dropdown list of Components is poor. Prevents seeing more than one component at a time. New users don't initially know to select a component.
• Summary of items included in the feature shown on the right mostly duplicates the information shown on the left by which checkboxes are enabled.
• No way to filter items to just those that contain certain text.
• No way to specifically exclude auto-detected items from being added to the feature.
• Cannot distinguish between newly added items that will be exported from items that were already part of the feature export.
• Options such as "URL of Update XML" are for advanced users and shouldn't be shown all the time.

The new 1.1 branch of Features attempts to fix or improve all of these issues.

In with the New

In the new featuresUI-1.1 branch makes the following changes to the user interface:

• The Ajax on the checkboxes has been completely removed. The Component Dropdown menu has been completely replaced with a set of collapsible fieldsets, one per component, shown on the right. To add a new item to a feature, expand the fieldset for the component you want, and click the checkbox for the item you want. The item will be moved down to the "newly included" list of items to be exported.
• If you add an item that adds dependencies, the auto-detected items will be added to the export (in blue italic). To prevent an auto-detected item from being exported, simply uncheck the box.
• Newly added items are shown in bold with a gray background to distinguish from items already part of the export.
• A Filter box is shown along the top. Enter text into this box to only show items that contain the filter text. Components with matching items will be expanded automatically. Clicking the Clear button will remove the filter and collapse all component sections.
• Advanced options are collapsed into a new Advanced section on the left.
• If Javascript is disabled, a Refresh button will be displayed that can be used to manually refresh the list to show newly auto-detected items. When Javascript is enabled, this button is hidden since javascript is used to display the auto-detected items.
• Items that are auto-detected and then unchecked are saved to the export *.info file a "features-excluded" items. Having these items in the *.info file allows features to keep them unchecked in the future so they are not automatically added.

Give the new UI a test drive by checking out the featuresUI-1.1 branch:

git clone --branch featuresUI-1.1 [email protected]:project/features.git

If you have any trouble, it's easy to switch back to the 1.x branch. Let me know what you think, or feel free to post to the issue queue http://drupal.org/node/1810134