This is a aggregation of many many issues that have been posted here in the past, all related to improving the Features User Interface. Specifically, this topic is about the New Feature or feature/Recreate screens.

Problems to address:

  • Ajax callback whenever an item is clicked is slow and cumbersome.
  • Dropdown list of Components is poor. Prevents seeing more than one component at a time.
  • 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.

I have uploaded a new Branch of Features (featuresUI-1.1) that addresses all of the above issues. Please use this issue to report problems or suggestions about this branch. Once this branch is debugged and I merge it into the master Features branch, then I will close this topic to allow new issues to be reported normally.

The approach to solving the above issues was started by hefox here: #1400298: Removing auto-detected components from a feature (UI update, removing Ajax). However, the patch in that issue didn't fully work and also didn't address all of the user interface concerns that I collected from past Issues above.

In the new featuresUI-1.1 branch, the following changes were made:

  • 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.

Hope people like this new direction. Your *constructive* comments are welcome!

NOTE: Your experience with this branch will greatly depend upon which Admin theme you are using. I tested using Seven, Bartik, Rubik, and Garland. Tried my best to make stuff generic enough and yet still nice looking. But if you use an obscure theme, there might be problems. I can try to fix problems if you are really specific about which Admin theme you are using and if it's a common enough theme. Unfortunately, Fieldset theming is one of the things that Admin themes like to mess around with.

CommentFileSizeAuthor
#4 features-ui-improvements-1810134-3.patch3.26 KBmarcelovani
#3 features-ui-improvements-1810134-3.patch3.26 KBmarcelovani
#1 2012-10-15_12-05-47.png169.01 KBbtopro
#1 selectall-1810134-1.patch4.59 KBbtopro

Comments

mpotter’s picture

mpotter commented
Issue summary: View changes

Updated issue summary.

btopro’s picture

btopro commented
StatusFileSize
new selectall-1810134-1.patch4.59 KB
new 2012-10-15_12-05-47.png169.01 KB

Love the redesigned UI, looks more like what Rules, Views, etc are following. Attached is a patch that does the following:
Comments out a legacy ajax function that fails in the background
slightly restructures filter portion of form to allow for select all checkbox
Adds support for select all / deselect all to target and auto select visible items (should satisfy #885996: Select All for permissions)

A screenshot also shows the patch applied as well as how this branch looks in Rubik, a popular admin theme (quite functional).

cweagans’s picture

cweagans
He/Him
Primary language English
Location Boise, ID, USA
commented

I would very much like to see #1277414: Preview info file when creating a feature included with the UI redesign efforts, as it's a major UX/DX problem for more than a few people.

Other than that, this looks really awesome :)

marcelovani’s picture

marcelovani
Primary language Portuguese, Brazil
Location London
commented
StatusFileSize
new features-ui-improvements-1810134-3.patch3.26 KB

I have implemented this simple patch that will disable the auto-submit from the checkboxes and add an "Apply" button.

marcelovani’s picture

marcelovani
Primary language Portuguese, Brazil
Location London
commented
StatusFileSize
new features-ui-improvements-1810134-3.patch3.26 KB

I have implemented this simple patch that will disable the auto-submit from the checkboxes and add an "Apply" button.

mpotter’s picture

mpotter commented

marcelovani: I don't know what you are patching. The featuresUI-1.1 branch takes care of this. I am not moving forward with the old UI so changing the old UI to use an Apply button isn't really relavent to this thread. The new UI has a Refresh button that is visible if Javascript is disabled.

cweagans: yes, a export preview is still part of the 1.1 roadmap. Just not part of this initial UI redesign.

btopro: NICE JOB! You probably saw some of my remnant code from trying to add a Select All, but I like your solution a lot better. Works great and I've committed it to the latest branch. Thanks very much for the contribution...great to see other people get involved!

btopro’s picture

btopro commented

@mpotter - my first commit to features and no attribution ;) (jk). Love the direction of the UI branch, I'd be happy to jump in on other UX improvements if there's need. We use features for (oh I don't know, everything) so happy to payback what I can.

mpotter’s picture

mpotter commented

btopro: Hmm, I spoke too soon. Your patch commented out the primary piece of the Javascript code for updating/adding dependencies. So that broke everything. Will try to commit a fix asap.

btopro’s picture

btopro commented

OOps, thought that was a busted AJAX call cause I was getting the error locally; I don't think it's related to the functionality added (sorry bout that)

mpotter’s picture

mpotter commented

OK, fix has been committed and pushed. The Javascript onclick functionality is restored and the Select All button is fixed. The Javascript error was coming from processing your SelectAll checkbox as if it was a component checkbox. I just added a test to skip the checkall checkbox in the processing.

quicksketch’s picture

quicksketch
he/him
commented

I'm excited about this new UI, in particular because it allows me to deselect "automatically detected" dependencies, such as Taxonomies, when they don't really belong in a particular feature. I don't want both my News and Blog features to depend on each other just because they both have the Tags vocabulary.

Unfortunately, trying out this new UI, unchecking any automatically detected dependencies doesn't seem to do anything.

To reproduce:
- Add a content type that has a Term reference field.
- Try to create a feature that exports that content type.
- Uncheck the vocabulary dependency under Taxonomy.
- Download the feature.

Expected: The new feature doesn't include the vocabulary.
Actual: A *.features.taxonomy.inc is generated and the vocabulary is listed in the info file as features[taxonomy][] = vocabulary_name.

I'm running the latest 1.1 branch Git. Is this feature not actually implemented yet?

quicksketch’s picture

quicksketch
he/him
commented

Hm, yeah this problem affects all automatic dependencies, not just Taxonomies. You can deselect modules, fields, variables, etc, but anything that is automatically detected gets exported whether the checkbox is selected or not.

quicksketch’s picture

quicksketch
he/him
commented

Separately, I also found a different bug that causes the new UI to break:

- Add a new feature.
- Do NOT give the feature a name.
- Check any exportable to add to the feature.
- The AJAX request throws a 404 page not found, because the POST goes to /features/ajaxcallback/ (with no feature name). It expects to go to /features/ajaxcallback/feature_name.

This can be solved by adding a feature name of course, but it threw me off for at least 20 minutes trying to figure out where things were going wrong. I'd suggest manually validating the feature name before the AJAX request is made, to ensure that it at least exists.

btopro’s picture

btopro commented

Maybe need a conditional before the ajax request that the name exists. That is troublesome with the detected vs selected still exporting. Is there something visually we should do to indicate that something is auto-detected vs auto-detected but deselected? Either that or two groupings that show up in the list of things that are checked (kind of a checked by you vs auto-selected).

I know this would be rather evil but would there be a way of performing the search to return everything (like *) and then do select-all? This would more or less provide http://drupal.org/project/drush_ctex_bonus like functionality via the UI. Not something everyone's going to do but in the case of all permissions-variables still might save time. Possibly in the filter could be a drop-down for which component to search against. That way you could do a * "variables" kind of a query if you will, then select all.

quicksketch’s picture

quicksketch
he/him
commented

That is troublesome with the detected vs selected still exporting. Is there something visually we should do to indicate that something is auto-detected vs auto-detected but deselected?

Doesn't the checkbox indicate whether it's selected? That should be the ultimate indicator of whether it will be included in the export or not. Blue backgrounds are for auto-detected. So obviously something that is auto-detected but deselected would be represented as an item with a blue background and an unchecked checkbox.

Unfortunately what this would require of Features is to store which items were manually excluded from the feature export. Just like Features currently represents which items are exported in the .info file, it would also need to keep track of which items are specifically *not* included in the export, so that regenerated features could maintain their manual overrides. This isn't new though, it's exactly what http://drupal.org/project/features_plumber does.

mpotter’s picture

mpotter commented

#10 and #11 should be fixed in the latest branch update. Working on #12.

On #14, the new branch *does* store which items are manually excluded (in the .info file). And the new branch takes that into proper consideration now. And yes, this is supposed to work like features_plumber. The idea is to include that functionality into the main Features module so that features_plumber is no longer needed.

quicksketch’s picture

quicksketch
he/him
commented

Thanks @mpotter. I'll probably give this another shot soon. For now I've reverted back to 1.0. I'm glad this 1.1 update is a UI change only, it's nice that we don't need to revert the database to switch between versions.

mpotter’s picture

mpotter commented

Give it a test as soon as you can. I'd like to merge this into -dev this week and call it an Alpha version.

(and yeah, you don't even need to clear cache...i've been doing demos where I can switch between 1.0 and 1.1 with an easy git checkout command to easily compare the before/after. fun fun)

mpotter’s picture

mpotter commented

#12 problems with empty feature name should be fixed in the latest branch commit.

mpotter’s picture

mpotter commented

Note that this 1.1 UI branch also now contains a button in the Advanced Options to generate the feature to a specified directory (or the default dir) just like "drush fu"! Another great reason to start playing with this branch!

mpotter’s picture

mpotter commented
Status: Active » Needs review
mpotter’s picture

mpotter commented
Status: Needs review » Fixed

Merged this with the 1.x-dev branch today. Please post new bug reports to new issues.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

Updated issue summary.