feat: track remote pins in progress

[hacdias]

Closes #1752 Closes #1991

• [x] Persistance via persistActions
• [x] Breathing cloud when pending
• [x] Red cloud when failed
• [x] Periodic checks per storage with back-off
• [x] Dismiss failed pin when clicking red cloud (failed)
• [x] Replace /pins by a list of pending and done pin jobs that can be cleared (similar to the upload drawer)

There are some things you can test via the Storybook. However, there are some aspects, such as dismissing a failed pin on the Files page that I wasn't able to test.

[hacdias]

A quick update on the pins statuses:

[lidel]

@hacdias mind resolving conflicts? I think we should review and ship this, so this work is not lost.

[SgtPooki]

@juliaxbow another one for you

[SgtPooki]

I tried running this locally and got the following error in the following scenarios:

1. no daemon running
2. daemon running, then trying to open the "set pinning" modal

I have a few changes coming up that resolve these errors.

Note that I added estuary, so I have three pinning services, and no matter what I do, selecting 'estuary' and applying in the "set pinning modal" and then re-opening it, always leaves estuary unchecked:

[hacdias]

@SgtPooki I think I fixed the issue you were having with the checkbox.

[hacdias]

Regarding the UI element to navigate to the Pins page: I would like to add something that would fit in. However, I'm not having great ideas.

Problem: the remanning information blocks on this style are not clickable.

Problem: better, as the button indicates an action. However, we do not usually use buttons for navigation, so it also does not feel natural.

I pushed the one below, but it doesn't make me necessarily happy. I just feel like it's still a bit out of place too.

What do you think?

Note: the icon only shows up if there's some pending, failed, or completed pins that were not dismissed (aka, the pin page is not empty).

[hacdias]

Tweaked the interface to include an 'x' for all types of pins:

[lidel]

Thanks @hacdias!

@juliaxbow any suggestions on what could be the best way to indicate "there are remote pins in progress"? Design requirement: we want it to be visually noticeable, so the user won't miss the fact there are pinning jobs in progress. See initial mockups in https://github.com/ipfs/ipfs-webui/pull/1919#issuecomment-1202685324

[juliaxbow]

I like the idea of a breathing cloud! Something like below. Tested this on two people who both were inclined to click the cloud

Separately I would also suggest an additional visual clue (aside from color) for failed pin to make it more accessible for users. Like this or the more straightforward version (which I prefer):

[hacdias]

I updated the breathing cloud to match your idea:

Regarding the icon for the failed pins: I think it'd be a great addition, but maybe we should add it to https://github.com/ipfs-shipyard/ipfs-css first. /cc @lidel

[hacdias]

@juliaxbow could you please send the bottom icon (cloud with the slash) as an SVG so I can add it to the ipfs-css repository? You can see how the other icons are formatted and sizes, here: https://github.com/ipfs-shipyard/ipfs-css/tree/main/icons

[juliaxbow]

@hacdias added here

[hacdias]

I added the new icon in #2008 @lidel @SgtPooki. Please review and merge that PR into this one.

[hacdias]

@lidel @SgtPooki this PR is ready for review. It already includes the new icon.

[hacdias]

@SgtPooki I created some follow up issues (#2043 #2042) according to your comments. Once CI is green, I will be merging this.

[hacdias]

@SgtPooki it seems I need a new approval for this to go through 😄

[hacdias]

I do not understand. There are no pending changes requested, but I still can't merge.

[hacdias]

Ah, @lidel requested changes at some point so we also need @lidel's review.

[ipfs-gui-bot]

:tada: This PR is included in version 2.20.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: