Add visual indication on removed field (or filter) in Views UI

Sorry to dig up this very old feature request, but this issue came up when discussing another Views UI issue during Drupal Developer Days 2023 in Vienna. And I (still) agree with the OP in that this would be a very nice enhancement of the Views UI.

1. Similar to what happens when you rearrange a field, a removed field should be highlighted in yellow

I'm not sure if I'm a huge fan of this. I would opt for a bit more distinction between rearranged and deleted items.

Taking a queue from Claro in the blocks layout screen, when you disable a block, a class is applied that subtly changes the row's background color and decreases the opacity:

.block-disabled:not(:hover) {
    opacity: 0.675;
    background: #fcfcfa;
}

This seems to do the trick visually already.

I'm wondering how to implement this though. Perhaps Views UI could provide a marked-for-removal class, but it would be up to the (admin) themes to attach the styling rules. So it sounds like this feature could need some coordination between views ui and theme maintainers.

Applying Claro's styling from disabled blocks to Views UI would look like this:

I like this idea, the change in #14 feel a little too subtle though. Maybe add a strikethrough? Don't know, UX is not my thing, but +1 from me

Here's a first attempt at a patch. Probably won't pass the tests, but it seems to work fine (with Stark enabled as backend theme).

Claro doesn't load views_ui.admin.css so styling will not be visible there. We probably need a follow-up issue there to achieve what is depicted in #14.

Some JS refactoring

Fix for mistake in css comment in #17

Tests fail, because in the filter rearrange dialog screen, a removed filter now no longer completely disappears, but instead it is (visually) marked for removal. Hence, JS tests checking the last or penultimate row no longer give the same results and should be altered.

Also, the changes in CSS do not apply to the filter rearrange dialog rows, as it has its own css class.

• Altering the CSS somewhat so that it also applies to the Views UI rearrange filters dialog
• Removing the last 2 steps of testOperatorLabels() in FilterCriteriaTest.php, because they expected the last row to disappear, which is no longer the case.

Fixing for a new test that snuck in while I wasn't paying attention:

1) Drupal\Tests\views_ui\FunctionalJavascript\FieldDialogsTest::testRemoveFieldHandler
Failed asserting that true is false.

Test expects the Remove link to disappear after clicking it, which is no longer true.

Can verify it now says "undo", maybe should be "Undo removal"

Also the css opacity doesn't seem to take affect

Thanks for the quick review @smustgrave!

Can verify it now says "undo", maybe should be "Undo removal"

I briefly discussed this with @lendude and @laurii during DrupalDevDays last week. Possible candidates were: "Undo", "Undo remove", "Restore", "Cancel", "Undelete" or possible even remove the link altogether, forcing users to cancel the form to undo their changes. We agreed that "Undo" was the best option for now, as it was short and concise, with the assumption that "users would understand". But this is definitely up for debate afaik.

Also the css opacity doesn't seem to take affect

The opacity change is part of views_ui.admin.css (part of the core views_ui module), but Claro does not load it and instead applies its own specific styling for Views UI. So I reckoned that the changes for Claro warrant a separate follow-up issue once the work in this one passes all the quality checks.

For now, the changes in #21 are best tested with Stark enabled as backend theme. I will add this info the IS.