storage: re-design the disk selection component

[KKoukiou]

Move disk selection from the inline select inside a modal dialog. Move the re-scan button also there to make the disk selection entry page more minimal.

[garrett]

To confirm, the modal, when it gets more content (like a lot of disks), grows taller and the box scrolls, like in this horribly quick mockup based on the screnshot:

@jkonecny12 was concerned about this on Slack, but this is what those widgets should do by default. The list means it overflows, and the modal should be able to grow with more content.

If it doesn't do this, then that's a bug.

[jkonecny12]

Looks good to me design wise.

[garrett]

Design related issues:

1. Spacing in the wizard page is not correct. There is too much space between the list and the edit link, and there's not enough space between sections.
2. Rescan devices is supposed to affect the list, so it should be closer to the list, but there's too much space between it and the action buttons, which are unrelated.
3. Cancel should not be a secondary button, but a link-styled button.
4. The modal is probably a little too short by default. It should be taller and also should grow to accommodate more devices in a list. (See the mockup for approximate default sizing. See modified screenshot as a quick, thrown-together mockup to see what it'd look like with tons of devices.)

Here are the most recent versions of the mockups, for reference:

Here's how the modal would look with multiple, 2 items, and 1 item (where it becomes force-selected, unless another disk is added). The right two have a minimum height, but then it starts to grow and become overflowed with a scrollbar like the above modified screenshot I posted.

[garrett]

(see above for review)

[garrett]

There's currently no way to refresh when there are no disks, and the actions should be just a "Close" button in secondary style. (You cannot select nothing, and you cannot cancel... just close, unless you click refresh and disks appear, then it should go back to "Select" and "Cancel".)

I can make a mockup for this state.

[garrett]

Probably something like one of these:

I like the top-left of these the most, but that'd mean we would need to change the modal like this:

(Whoops! I forgot to change the Select/Cancel to close! Fixing below...)

So the pairs of disks vs. no disks would look like this:

Which looks best to you?

I like the leftmost pair together overall, but as having no disks available is not a common situation, we could go with the rightmost (the one with the left alignment).

We could also drop the icon:

[garrett]

The most straightforward one to implement is probably this, which is probably fine, really, especially since nobody should see this error state (hopefully):

However, we do need a refresh in the no disks mode due to the interactive tests, so we need this. (I'll probably always forget to add a disk before this, and without being able to refresh, it'll be annoying to have to restart a VM.)

[rvykydal]

@KKoukiou should I wait with a review a bit (after finishing the design review?).

[KKoukiou]

@KKoukiou should I wait with a review a bit (after finishing the design review?).

I think I addressed all design comments.

[rvykydal]

Looks good to me.

Addressed.