Use icon to assist with understanding of maintenance status

Maybe it should follow the same icons that are used on d.o?
* For minimally maintained it’s a grey triangle.
* For actively maintained there is no icon.

Current icons can be found here: https://git.drupalcode.org/project/drupalorg/-/tree/7.x-3.x/drupalorg/im...
(I don’t think there is a grouping for the different maintenance statuses)

And the logic for the icons is here: https://git.drupalcode.org/project/drupalorg/-/blob/7.x-3.x/drupalorg_pr...
(no icon for actively maintained projects, then grey triangle or alert triangle for minimally maintained and no longer maintained)

Would adding a legend be an option for letting users know what the icons represent? Tooltips were our original thought, but have accessibility issues. A legend would allow us to put the combined statuses of "Actively maintained or Minimally maintained"

The legend could display where we used to have the text explaining the default options.

See attached file - DefaultFiltertext.png

I think that's exactly what this other issue was created for: https://www.drupal.org/project/project_browser/issues/3282163

Related issue and comment: https://www.drupal.org/project/project_browser/issues/3281218#comment-14... (as in decisions in this issue will affect the other or viceversa).

If this issue is different than #3282163: Improve iconography usability by adding a legend, can the issue summary be updated?

Chris clarified, thanks!

Code looks good and new icon is shown. Icons order also match the one of the filters. Marking RTBC.

The two icons look odd next to each other due to the maintained gear icon occupying the full width/height of it's canvas while the blue security shield has space (basically padding) on each side that is roughly 12.5% of the total width/height. If the maintained gear had similar "padding" in it's canvas, the two icons would look much better next to one another.

That's a very good point! However, I don't know how to do that. I grabbed those directly from Figma

Hoping someone else can figure it out

I don't have access to the figma pinned in the #project_browser channel.

I was playing around with an online SVG editor with different paddings from the image that Tim originally added to this MR. This version is what feels the most consistent. Adding more padding to the sides will make one icon taller than the other.

See results:

I think this should get postponed on (the similarly named but I assure you it is different) #3294608: Consider replacing "actively maintained" icon. This issue seems to be iterating on an icon that @drumm has broader concerns about it being in the UI at all.

That may also justify removing this as an MVP requirement, but I don't want to singlehandedly make that call and remove the tag.

I'd like to work on this. #Portland2024

My input on wrench vs. gear: a wrench icon to me implies heavy work, like under construction, vs. a gear, which seems to imply a smoothly running machine. The gear seems to be a better fit for actively maintained to me. A wrench would seem to apply that the module needs a lot of work.

I did not immediately get the impression that the gear or the wrench meant "maintained". I'm wondering if you can somehow convey it with a silhouette of a person to convey it's maintained by a person? Person with a hammer? Or the gear with a person silhouette inside?

Hello! Just some UX two cents here. My initial thought with a gear icon is settings and with a shield icon is security. If we were to go in a different direction than these two I would suggest something with a person avatar that is either holding a tool or on a computer to indicate that there is a human maintaining this.

I'm going to be honest, I'm not sure if a wrench or a gear really matter. The larger issue is educating the user as to what the icons means. I have discussed not using a legend (#3282163: Improve iconography usability by adding a legend) and adding a tool tip (#3293909: Security and maintained icons need to communicate correct information). I tend to agree that a wrench might be better than a gear based on the above comment of a gear being associated with settings.

I think this is a really, really hard thing to covey with an icon! It is interesting that there are people strongly in favour of both. I don't see either one as being very indicative, and agree with #25 that the icon itself probably won't achieve much either way.

Coming into this issue I did not know what the blue check icon meant either, but looking at PB I was able to determine from the filters that it means 'Covered by a security policy'. However, given that this is also a default filter, I am not sure the icon is a good idea? It will add clutter to the UI, considering that every module will have it by default. So I guess the use case is someone who selects 'Show all'?

I think it would probably be better to add an icon if it's *not* actively maintained, as this is something to alert users to. Otherwise, nothing to see here. And I see now this was already suggested in #2!

Screenshot of the filter for reference:

I am curious if we can check some d.o. statistics about "Maintenance status" and "Development status" in comparision with gitlab commits. It can be interesting to see how many modules are Actively maintained and/or Under active development and have no commits for a longer period (or similar).

I often see that these two values does not reflect the reality in many modules (would say that maintainers set them mostly when creating a module and then never update it). Certainly there are exceptions and lot of modules has this set correctly, but the question is if it does not get too much space, so that the module maintainers will be abusing this to get the "icon".

Hi @Chris, while looking at the projects, I don't find wrench icon. Is this issue still relevant?

I'll ask @tim.plunkett to change the target branch to 2.0.x as i don't have the permission of doing that and then maybe work on this to get it more refined.
Assigning it to Tim for above mentioned task.

Re-targeted!

This still needs some CSS fixing as there is a difference in heights between the 2 icons.

Now the icons are of the same size as you can see in the attached screenshots.

This now has some work align to what @chrisfromredfin mentioned in #31.Marking it needs review.

Merged the latest changes in 2.0.x.

After manaull testimg I can confirm that the wrench icon appear on the correct place on the card when the Project is maintained and does not display when the project is unsupported.

Needs a code review

I've reviewed the code, and I've queried one thing. I think at present, a module will only showed the maintained icon if it is also covered by the security policy.

I've tried testing manually, but at present I'm only seeing data if I turn off the "maintained" filter, so I think there may be an issue with the back end at present, but because of this I wasn't seeing any "maintained" icons. I think this is a data issue rather than an application issue.

I have created a follow-up issue Include the wrench icon on the module's detail page.
All the feedbacks are addressed and the test fails are not related to the changes in this MR, keeping the status as NR as this is blocking Improve iconography usability by adding a legend therefore also increasing the priority for this issue as both are Beta blockers.