feat(plugins): ui for plugins management

[nokome]

In #2027, @kusalekanayake posted some initial designs for a plugin management UI. This issue is to iterate on those (separate from all the other designs in that issue).

[nokome]

There are some difference between these designs and what we have in the CLI and backend Rust:

We could bring some of the concepts from the CLI to the GUI and vice verse. Here are my suggestions:

GUI

• Make the list for all plugins (including those not installed) but with check boxes allowing filtering for those that are installed and those that are enabled, and those that are outdated
• Expose plugin description and link in list? A "details" expansion for each plugin?
• Status should reflect to status we use in the backend, including for example whether an upgrade is available for a plugin (see below)
• Remove Date added
• Replace "Remove" link with "Uninstall" / "Install" buttons (but only show install if installable and uninstall if installed)
• Enable/disable buttons should be different colors/styles and should only be present if the plugin is installed and come after "Uninstall" / "Install" buttons.
• Remove "Add Plugin" section. If plugin developers want to test their plugin from an arbitrary URL, they can do that via the CLI.
• Remove "Discard" and "Save" buttons; not necessary.

/// The status of a plugin on the current machine
///
/// Install-ability determined based on the `runtimes` and `platforms` properties
/// of the plugin and the runtimes and platform of the current machine.
#[derive(Debug, Display, Clone, PartialEq, Eq)]
#[strum(serialize_all = "lowercase")]
pub enum PluginStatus {
    /// Latest version installed
    InstalledLatest(Version),

    /// An outdated version is installed
    InstalledOutdated(Version, Version),

    /// Available on this machine but requires installation
    Installable,

    /// Required runtime not available
    #[strum(to_string = "requires runtime installation")]
    UnavailableRuntime,

    /// Not available on this operating system platform
    #[strum(to_string = "unavailable on this operating system")]
    UnavailablePlatform,
}

CLI / Rust plugins crate

• To stencila plugins list add --installed and --enabled flags to filter by those.

• Add a mechanism to disable/enable a plugin stencila plugins enable <name> and stencila plugins enable <name>

• To stencila plugins install, in addition to plugin names, allow a URL to be used; mainly for plugin developers to be able to test

[kusalekanayake]

Have this as the idea for the plugins. Trying to lean on more iconography to show state of the plugin while still keeping the ability to enable and disable plugins. Have plenty of room to add any more details about the plugins too.

Have tried to hide some of the error states behind a hover so it also doesn't cram the rows. And we can give specific reasons to why that plugin can't be installed. Have included the filters up top too.

In regards to the order of the buttons. I left the install and uninstall buttons on the end, since they're the two largest actions that would effect everything else in the row. Having them part way through a row meant it felt unnatural for all the other content to appear around it.

[nokome]

Thanks @kusalekanayake, looking great! Some relatively comments / personal preferences:

• I think I'd prefer chevron up/downs instead of "Details"/"Hide details"
• I'd prefer if we used buttons for all actions, and put all actions together:
  • "Install/Uninstall" toggle button (shown only if installable) in penultimate column after status
  • "Enable/Disable" toggle button in last column, without header

Also reminding myself that in the Rust Plugin struct we need to add:

• A logo field
• A required description field

[kusalekanayake]

Great, thanks @nokome. I also wanted to ask about the enable and disable action. Is that going to be functionality we are intending to have upfront?

[nokome]

Yep, I added that functionality yesterday:

[kusalekanayake]

Had a play with it without the enable/disable buttons as it takes up some room. Will add it to the end now to have a look at. With the uninstall option. Because it's the destructive option, I kept it at the end in a secondary button format but I'll elevate it to an actual button too and see how the feels.

[kusalekanayake]

With enable/disable functionality and reordered info. Just realised I should change remove to uninstall. Whoops!

[nokome]

Getting closer :) Some more suggestions:

• Download -> Install
• Remove -> Uninstall
• All the check boxes are a bit distracting; maybe hide them behind a filter iconed menu next to search bar; also they should probably be paired radio buttons - Installed/Not Installed, Enabled/Disabled, Outdated/Up to date - because the members of the pairs are mutually exclusive but its OK not to select any of them.
• I know I said enabled should be last column but given current layout (with a header) and use of toggle I now wonder if it should go before version and all the other stuff related to installation status.

[kusalekanayake]

Sweet, happy to change most of those things, however with filtering it seems a little tricky to do radio buttons. I played around with that idea but even with the pairs being mutually exclusive going from selecting one or the other to selecting both became tricky. I guess you could have them select an already selected radio button to toggle it off but that's not how they would normally work. Maybe just having a reset filters button could be a work around?

[nokome]

OK, thanks. I don't think we should spend any more time on it right now - wait until we have at least 10 plugins 😅

[kusalekanayake]

Fair point!

[kusalekanayake]

I'll leave it at this.