Highlight expired/disabled short URLs

[CodeAlDente]

Summary

You can set an expiration date for short URLs. But on the listing page you can't tell which short URL has been expired and which not. I would like to highlight this maybe with an indicator just like there's one if you set a max number of visits. Additionally to this, filter expired short URLs would be a nice thing, too!

[acelaya]

Good idea!

The filtering will have to be added to Shlink itself. I'll create a linked ticket there.

[acelaya]

I have explored a couple of ways to highlight "disabled" short URLs, like using italic text, reduced opacity, smaller text size, etc. They all look weird and have side effects (like affecteing the context menu).

The best-looking option so far is this, adding a badge indicating the URL is disabled and why.

I have also added extra information of all limits in the visits field.

disabled.URLs.desktop.mp4

[CodeAlDente]

Looks good!! 🥰

Why don't you show the reason right in the tooltip of that "disabled" label?

[acelaya]

Why don't you show the reason right in the tooltip of that "disabled" label?

That's the plan. This is a conceptual test of the UI that I liked the most so far.

I'm also trying to figure out what's the proper term. Not sure if "disabled" is the right one.

[CodeAlDente]

I'm also trying to figure out what's the proper term. Not sure if "disabled" is the right one.

Maybe use

• reached (red)
  • when links have been accessed x times
• scheduled (yellow/grey)
  • when links are not valid yet (set by "valid after")
• expired (red)
  • for links where "valid until" date has been reached

Maybe only an icon would fit here? Or use both: text and icon based on the reason why the link has been disabled.

[acelaya]

I like the idea of using different icons and colors depending on the status.

The only question is what happens if multiple are met, but I guess it's not that critical.

"Scheduled" would always have lower priority, and we just need to decide about the other two.

Also, with this approach I'm also considering on having the status icon on a separate column, and have a dedicated icon with dedicated color (blue?) for "valid" short URLs (no limits have been reached yet).

I'll try to do another proof of concrete for this.

[acelaya]

How does this look:

disabled.URLs.split.desktop.mp4

There is a problem for when the short URLs are "valid". This is the status which most of them are going to have always, and having the screen full of "blue ticks" might be a bit confusing/overwhelming.

Because of this I'm also considering to not displaying an icon at all for those.

I'm also not sure what's the best place to display the icon itself: First column? Next to the short URL? At the end before the button?

I'm also experimenting with the mobile version and where/how to display the status.

[CodeAlDente]

How does this look:

That is brilliant! It really fits in perfectly to the rest of the UI.

I'm also not sure what's the best place to display the icon itself: First column? Next to the short URL? At the end before the button?

At the end, absolutely yes! Call that column "Status" and we're all set. 😎

There is a problem for when the short URLs are "valid". This is the status which most of them are going to have always, and having the screen full of "blue ticks" might be a bit confusing/overwhelming.

Because of this I'm also consideraing to not display an icon at all for those.

Not at all! Atleast to me. It's good to see that those links are working properly. In fact, I've seen you're planning to check target urls for malicious content? cf. shlinkio/shlink#1305

That status column can then even be used to indicate problems with urls like when they're blacklisted and/or have status code e.g. 404. Then the tick icon can be changed to question or exclamation mark, depending on severity of error/event to raise attention.

[acelaya]

Thanks for the feedback!