[Docker Desktop Extension] Rethink the app

[mmartin24]

Issue

Given that the extension is getting traction and Rancher Desktop even uses that, it may be a good moment to re-evaluate what to keep, to drop, and to extend in the extension.

Some starting points

• CLI button: currently points to latest release. Should it be an actual CLI?
• Link to UI, Do we want it?
• Ability to change Epinio version. Would we consider implementing it?
• Add uninstall button on for pushed apps
• Only default namespace available

[enrichman]

We should schedule a meeting to discuss about the "future" of the Epinio extension.

Who could be interested? @nunix @olblak @jhmarina Given that this will be part also of the Rancher extensions maybe also @mook-as @manuelecarlini @rak-phillip

What do you think?

[manuelecarlini]

@enrichman I'd be up for a meeting

[jhmarina]

Here are my comments on the extension UX/UI. I will also add mockups with suggested improvements in this issue.

Docker Desktop competitor/extension research

• Many of the extensions only include links to their UI or very little interaction

UX

General

• We need to improve the use of real estate. Currently, the footer buttons use a lot of space and don’t seem to add functionality.
• Titles: they use the same text as the remaining body
• Fixed height: The viewport can scroll. That would potentially allow us to make better use of the space when there are many items on the table.
• Or at least we should consider making a better use of the real estate and having a minimum of 10 items for a table

Top section

• We can use the Epinio dashboard as inspiration
• This is where all the CTAs & information should be found. Also, the ones from the bottom
• Have an intro text in a square.
• User & password, should they be visible?

Applications

• The upload functionality
  • The fields are too spaced between each other
• Table
  • Issue with wrapping, right side seems out of frame
  • The empty column after “Info” shouldn’t exist
  • “Info”: in my case, it doesn’t seem to serve much of a purpose since there’s only a number (”1/1)”. ← This seems to be the “Status” column in the Epinio UI
  • This means that there isn’t correspondence between the columns in the UI & Extension
  • The table height doesn’t adapt to its container height. After add

Footer

• As mentioned above, it makes sense to relocate the footer links elsewhere
  • Cloud icon & Epinio version can easily go elsewhere.
• Links are broken
  • There should be a link to the documentation instead of the homepage
  • CLI link is broken, at least in Mac. If we can’t open the CLI, which I think is a good idea, either remove or repurpose the logo

Features that could be useful

• An installation starter page

Epinio features that should be included in the extension

• Namespaces
  • Ability to switch between namespaces since it is frustrating when something is installed in a namespace that isn’t the default.
• Services
• Applications
  • Adding some of the actions that can be performed on an app, may be useful

References

• https://mui.com/material-ui/react-button/
• https://docs.docker.com/desktop/extensions-sdk/design/design-guidelines/

[jhmarina]

These are a couple of mockups with some rough concepts that could be implemented as improvements of the UX

 Installer

The user is presented with the installer if it is the first time they use Epinio and have no apps set up:

Main view

• No CTA in the bottom
• 3 main action boxes (same as in the Epinio UI)
• Ability to select the namespace
• The table includes information that corresponds to the table in the UI
• Ability to delete an app (may have to update the colour)
• More table items, better use of the real estate

[jhmarina]

Update

The team has had several discussions around rethinking the app, figuring out requirements and iterating over the design. We have created an Epic to track all the improvements to the Docker Desktop Extension. There's also a Confluence page on the subject.